/* Shared UI — TikTok-inspired theme */



:root {

  --mint-bg: #FFFFFF;

  --mint-bg2: #F5F5F5;

  --line-green: #F0357A;

  --line-green2: #F0357A;

  --line-navy: #121212;

  --line-navy2: #1a1a1a;

  --tiktok-cyan: #3BB5D4;

  --tiktok-red: #F0357A;

  --text-muted: #9ca3af;

}



.gm-logo-mark {

  display: inline-flex;

  align-items: center;

  gap: 0;

  text-decoration: none;

  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Roboto, Arial, sans-serif;

}

.gm-logo-mark .gm-g-circle {

  width: 31px;

  height: 31px;

  border-radius: 50%;

  background: var(--tiktok-red, #F0357A);

  color: #fff;

  font-size: 20px;

  font-weight: 900;

  font-style: normal;

  display: flex;

  align-items: center;

  justify-content: center;

  position: relative;

  flex-shrink: 0;

  line-height: 1;

  letter-spacing: -1px;

}

.gm-logo-mark .gm-g-circle::after {

  content: '';

  position: absolute;

  width: 6px;

  height: 6px;

  border-radius: 50%;

  background: var(--tiktok-cyan, #3BB5D4);

  right: 7px;

  bottom: 7px;

}

.gm-logo-mark .gm-logo-text {

  font-size: 24px;

  font-weight: 900;

  color: #003594;

  letter-spacing: -1.2px;

  line-height: 1;

  margin-left: -1px;

}

.gm-logo-img { height: 32px; width: auto; display: block; object-fit: contain; }

.gm-logo-img--home {

  height: auto;

  max-height: 44px;

  width: auto;

  max-width: min(180px, 75vw);

}

.gm-logo-img--shop {

  height: 26px;

  max-height: 26px;

  width: auto;

  max-width: min(148px, 68vw);

  object-fit: contain;

}

/* โลโก้ PNG ที่มีพื้นขาว/การ์ดแล้ว — ไม่ใช้ blend */

.gm-logo-img--real { object-fit: contain; }

.gm-logo-img--auth-gate,
.gm-logo-img--auth-form {
  max-height: 56px;
  max-width: 56px;
  margin-bottom: 0;
}

.gm-logo-img--auth-gate {
  max-height: 64px;
  max-width: 64px;
}

.gm-logo-img--auth-form {

  max-height: 48px;

  max-width: min(200px, 78vw);

  margin-bottom: 10px;

}

.gm-logo-box {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  background: transparent;

  border-radius: 0;

  padding: 0;

  box-shadow: none;

}

.auth-gate .gm-logo-wrap {

  margin: 0 0 14px;

  background: transparent;

  width: 100%;

  display: flex;

  justify-content: center;

}

.auth-form-head .gm-logo-wrap { 

  margin-bottom: 6px; 

  background: transparent;

}



/* Home header — larger logo like reference */

.gm-logo-mark--home { gap: 0; }

.gm-logo-mark--home .gm-g-circle {

  width: 31px;

  height: 31px;

  font-size: 20px;

}

.gm-logo-mark--home .gm-g-circle::after {

  width: 6px;

  height: 6px;

  right: 7px;

  bottom: 7px;

}

.gm-logo-mark--home .gm-logo-text {

  font-size: 24px;

  font-weight: 900;

  color: #003594;

}

.gm-logo-mark--lg .gm-g-circle {

  width: 44px;

  height: 44px;

  font-size: 28px;

}

.gm-logo-mark--lg .gm-logo-text {

  font-size: 34px;

}

.gm-home-header h1 { margin: 0; line-height: 1; }



/* Legacy JS mobile nav — disabled */

.mobile-nav { display: none !important; }



/* ── Bottom nav — TikTok tab bar (overridden in clone.css) ── */



/* ── Auth shell - soft pastel entry ── */

.auth-shell {

  min-height: 100vh;

  background:

    radial-gradient(ellipse 90% 70% at 15% 10%, rgba(126, 232, 230, 0.55) 0%, transparent 55%),

    radial-gradient(ellipse 80% 60% at 90% 20%, rgba(255, 170, 210, 0.5) 0%, transparent 50%),

    radial-gradient(ellipse 70% 50% at 50% 100%, rgba(255, 200, 220, 0.35) 0%, transparent 55%),

    linear-gradient(165deg, #e8faf9 0%, #f7f0f8 45%, #fde8f0 100%);

  display: flex;

  flex-direction: column;

  position: relative;

  overflow: hidden;

}



/* soft blur atmosphere */

.auth-shell::before {

  content: '';

  position: absolute;

  inset: -10%;

  background:

    radial-gradient(circle at 30% 40%, rgba(40, 217, 206, 0.22) 0%, transparent 40%),

    radial-gradient(circle at 75% 55%, rgba(240, 53, 122, 0.18) 0%, transparent 42%);

  filter: blur(28px);

  pointer-events: none;

  animation: bg-float 14s ease-in-out infinite;

}



@keyframes bg-float {

  0%, 100% { transform: translate(0, 0) scale(1); }

  33% { transform: translate(18px, -14px) scale(1.03); }

  66% { transform: translate(-12px, 10px) scale(0.98); }

}



/* Auth gate — centered professional card */

.auth-gate {

  flex: 1;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 28px 18px max(32px, env(safe-area-inset-bottom));

  min-height: min(100vh, 100dvh);

  position: relative;

  z-index: 1;

  box-sizing: border-box;

}

.auth-gate-card {

  width: 100%;

  max-width: 360px;

  margin: 0 auto;

  padding: clamp(36px, 8vw, 48px) clamp(24px, 6vw, 32px) clamp(28px, 6vw, 36px);

  background: #ffffff;

  border-radius: 40px;

  border: none;

  box-shadow:

    0 28px 64px rgba(80, 40, 80, 0.12),

    0 8px 20px rgba(40, 217, 206, 0.08);

  display: flex;

  flex-direction: column;

  align-items: stretch;

  text-align: center;

  box-sizing: border-box;

  position: relative;

  overflow: hidden;

}

.auth-gate-card::before {

  content: '';

  position: absolute;

  top: 0;

  left: 12%;

  right: 12%;

  height: 3px;

  border-radius: 0 0 999px 999px;

  background: linear-gradient(90deg, #3BB5D4 0%, #F0357A 100%);

}

.auth-gate-brand {

  margin-bottom: 0;

  padding-bottom: 0;

  border-bottom: none;

}

.auth-gate-logo {

  margin-bottom: 22px;

}

.auth-gate-logo-box {
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

.gm-logo-img--auth-gate {

  max-height: 64px;

  max-width: 64px;

}

.auth-gate-title {

  margin: 0 0 10px;

  font-size: clamp(20px, 5.2vw, 22px);

  font-weight: 700;

  color: #111111;

  letter-spacing: -0.02em;

  line-height: 1.35;

}

.auth-gate-tagline {

  margin: 0;

  font-size: 13px;

  font-weight: 500;

  color: #8a8a8a;

  letter-spacing: 0.01em;

  line-height: 1.55;

  max-width: 280px;

  margin-inline: auto;

  text-align: center;

}

.auth-gate-divider {

  width: 72px;

  height: 2px;

  margin: 22px auto 28px;

  border-radius: 999px;

  background: linear-gradient(90deg, #3BB5D4 0%, #F0357A 100%);

}

.auth-gate-actions {

  display: flex;

  flex-direction: column;

  gap: 14px;

  margin-bottom: clamp(28px, 7vw, 36px);

}

.auth-gate-actions .auth-btn-primary,
.auth-gate-actions .auth-btn-outline {

  max-width: none;

  margin-bottom: 0;

}

.auth-gate-footer {

  margin-top: auto;

}

.auth-gate-footer .auth-gate-utils {

  max-width: none;

}

/* Login Button - Premium */

.auth-btn-primary {

  display: block;

  width: 100%;

  max-width: 340px;

  padding: 16px 24px;

  border: none;

  border-radius: 999px;

  font-size: 16px;

  font-weight: 700;

  font-family: inherit;

  color: #fff;

  text-decoration: none;

  text-align: center;

  cursor: pointer;

  background: linear-gradient(90deg, #3BB5D4 0%, #F0357A 100%);

  box-shadow:

    0 8px 22px rgba(240, 53, 122, 0.32),

    0 0 0 1px rgba(255, 255, 255, 0.25) inset;

  margin-bottom: 0;

  min-height: 52px;

  display: flex;

  align-items: center;

  justify-content: center;

  letter-spacing: 0.02em;

  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);

  position: relative;

  overflow: hidden;

}

.auth-btn-primary::before {

  content: '';

  position: absolute;

  top: 0;

  left: -100%;

  width: 100%;

  height: 100%;

  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);

  transition: left 0.5s;

}

.auth-btn-primary:hover {

  transform: translateY(-2px);

  box-shadow:

    0 10px 28px rgba(240, 53, 122, 0.38),

    0 0 0 1px rgba(255, 255, 255, 0.35) inset;

}

.auth-btn-primary:hover::before {

  left: 100%;

}

.auth-btn-primary:active {

  transform: translateY(0);

}



/* Register Button - Glass Effect */

.auth-btn-outline {

  display: block;

  width: 100%;

  max-width: 340px;

  padding: 15px 24px;

  border: 1.5px solid #F0357A;

  border-radius: 999px;

  font-size: 16px;

  font-weight: 700;

  font-family: inherit;

  color: #F0357A;

  background: #ffffff;

  text-decoration: none;

  text-align: center;

  cursor: pointer;

  margin-bottom: 0;

  min-height: 52px;

  display: flex;

  align-items: center;

  justify-content: center;

  letter-spacing: 0.02em;

  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);

  position: relative;

  overflow: hidden;

}

.auth-btn-outline::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background: linear-gradient(135deg, rgba(40, 217, 206,0.12) 0%, rgba(240,53,122,0.08) 100%);

  opacity: 0;

  transition: opacity 0.3s;

}

.auth-btn-outline:hover {

  background: #fff8fb;

  border-color: #F0357A;

  color: #F0357A;

  transform: translateY(-2px);

  box-shadow: 0 8px 24px rgba(240, 53, 122, 0.15);

}

.auth-btn-outline:hover::before {

  opacity: 1;

}

.auth-gate-utils {

  display: flex;

  gap: 10px;

  width: 100%;

  max-width: 340px;

}

.auth-gate-util {

  flex: 0 0 auto;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 7px;

  padding: 11px 14px;

  border-radius: 14px;

  border: 1px solid #ececec;

  background: #fafafa;

  color: #4a4a4a;

  font-size: 13px;

  font-weight: 500;

  font-family: inherit;

  cursor: pointer;

  text-decoration: none;

  transition: border-color 0.2s, background 0.2s, color 0.2s;

  white-space: nowrap;

}

.auth-gate-util--wide {

  flex: 1 1 auto;

  min-width: 0;

  font-size: 12px;

  padding-left: 10px;

  padding-right: 10px;

}

.auth-gate-util:hover {

  border-color: rgba(40, 217, 206, 0.45);

  background: #fff;

  color: #161616;

}

.auth-gate-util i {

  font-size: 14px;

  color: #3BB5D4;

}

.auth-privacy-modal {

  position: fixed;

  inset: 0;

  z-index: 2000;

  background: rgba(20, 20, 30, 0.45);

  display: flex;

  align-items: flex-end;

  justify-content: center;

  padding: 16px;

  box-sizing: border-box;

}

.auth-privacy-modal[hidden] {

  display: none !important;

}

.auth-privacy-sheet {

  width: 100%;

  max-width: 420px;

  background: #fff;

  border-radius: 24px 24px 20px 20px;

  padding: 20px 20px 28px;

  box-shadow: 0 -8px 40px rgba(0,0,0,0.15);

  animation: auth-sheet-up 0.28s ease;

}

@keyframes auth-sheet-up {

  from { transform: translateY(24px); opacity: 0; }

  to { transform: translateY(0); opacity: 1; }

}

.auth-privacy-head {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 14px;

}

.auth-privacy-head h2 {

  margin: 0;

  font-size: 17px;

  font-weight: 700;

  color: #111;

}

.auth-privacy-close {

  border: none;

  background: #f3f3f3;

  width: 32px;

  height: 32px;

  border-radius: 999px;

  font-size: 20px;

  line-height: 1;

  cursor: pointer;

  color: #666;

}

.auth-privacy-body {

  font-size: 14px;

  line-height: 1.65;

  color: #555;

  text-align: left;

}

.auth-privacy-body p {

  margin: 0 0 12px;

}



/* Login / register form pages */

.auth-page .app-root {

  background: transparent;

}

.auth-form-page {

  flex: 1;

  display: flex;

  flex-direction: column;

  justify-content: center;

  padding: 20px 16px max(28px, env(safe-area-inset-bottom));

  max-width: 440px;

  margin: 0 auto;

  width: 100%;

  min-height: min(100vh, 100dvh);

  box-sizing: border-box;

  position: relative;

  z-index: 1;

}

.auth-back {

  position: absolute;

  top: max(16px, env(safe-area-inset-top));

  left: 16px;

  width: 42px;

  height: 42px;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.92);

  border: 1px solid rgba(255, 255, 255, 0.8);

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 15px;

  color: #1a1a1a;

  cursor: pointer;

  margin-bottom: 0;

  box-shadow: 0 6px 18px rgba(80, 40, 80, 0.1);

  text-decoration: none;

  backdrop-filter: blur(8px);

  -webkit-backdrop-filter: blur(8px);

  transition: transform 0.2s, box-shadow 0.2s;

  z-index: 2;

}

.auth-back:hover {

  transform: translateY(-1px);

  box-shadow: 0 8px 22px rgba(80, 40, 80, 0.14);

}

.auth-form-card {

  width: 100%;

  margin: 0 auto;

  padding: clamp(28px, 6vw, 36px) clamp(20px, 5vw, 28px) clamp(24px, 5vw, 32px);

  background: rgba(255, 255, 255, 0.92);

  border-radius: 32px;

  border: 1px solid rgba(255, 255, 255, 0.85);

  box-shadow:

    0 24px 56px rgba(80, 40, 80, 0.12),

    0 6px 18px rgba(40, 217, 206, 0.08);

  backdrop-filter: blur(12px);

  -webkit-backdrop-filter: blur(12px);

  box-sizing: border-box;

  position: relative;

  overflow: hidden;

}

.auth-form-card::before {

  content: '';

  position: absolute;

  top: 0;

  left: 14%;

  right: 14%;

  height: 3px;

  border-radius: 0 0 999px 999px;

  background: linear-gradient(90deg, #3BB5D4 0%, #F0357A 100%);

}

.auth-form-head {

  text-align: center;

  margin: 0 0 8px;

  padding-bottom: 0;

  border-bottom: none;

}

.auth-form-logo {

  margin-bottom: 16px;

}

.auth-form-logo-box {
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

.gm-logo-img--auth-form {

  max-height: 54px;

  max-width: 54px;

  margin-bottom: 0;

}

.auth-welcome-title {

  margin: 0 0 6px;

  font-size: clamp(20px, 5vw, 22px);

  font-weight: 700;

  color: #141414;

  letter-spacing: -0.02em;

  line-height: 1.3;

}

.auth-welcome {

  font-size: 13px;

  color: #8b8b8b;

  margin: 0;

  font-weight: 500;

  line-height: 1.5;

  letter-spacing: 0.01em;

}

.auth-form-divider {

  width: 64px;

  height: 2px;

  margin: 18px auto 22px;

  border-radius: 999px;

  background: linear-gradient(90deg, #3BB5D4 0%, #F0357A 100%);

  opacity: 0.85;

}

.auth-form {

  display: flex;

  flex-direction: column;

}

.auth-field {

  display: flex;

  align-items: center;

  background: #ffffff;

  border-radius: 16px;

  padding: 0 14px;

  margin-bottom: 12px;

  min-height: 54px;

  gap: 10px;

  border: 1px solid rgba(0, 0, 0, 0.06);

  box-shadow:

    0 4px 14px rgba(80, 40, 80, 0.05),

    0 1px 2px rgba(0, 0, 0, 0.03);

  transition: border-color 0.2s, box-shadow 0.2s;

}

.auth-field:focus-within {

  border-color: rgba(240, 53, 122, 0.35);

  box-shadow:

    0 6px 18px rgba(240, 53, 122, 0.1),

    0 0 0 3px rgba(240, 53, 122, 0.08);

}

.auth-field > i.fi {

  color: #F0357A;

  font-size: 16px;

  width: 22px;

  text-align: center;

  flex-shrink: 0;

  opacity: 0.92;

}

.auth-field input {

  flex: 1;

  border: none;

  outline: none;

  background: transparent;

  font-size: 15px;

  font-family: inherit;

  font-weight: 500;

  color: #151515;

  padding: 14px 0;

  min-width: 0;

}

.auth-field input::placeholder {

  color: #b0b0b0;

  font-weight: 400;

}

.auth-field .auth-cc {

  display: flex;

  align-items: center;

  gap: 4px;

  font-size: 14px;

  color: #151515;

  padding-right: 10px;

  border-right: 1px solid #eee;

  margin-right: 4px;

  white-space: nowrap;

}

.auth-field .auth-cc i { color: #999; font-size: 10px; }

.auth-field .auth-eye {

  background: none;

  border: none;

  color: #9aa0a6;

  font-size: 16px;

  cursor: pointer;

  padding: 8px 4px;

  flex-shrink: 0;

  transition: color 0.2s;

}

.auth-field .auth-eye:hover {

  color: #F0357A;

}

.auth-links {

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin: 2px 0 18px;

  font-size: 13px;

  gap: 10px;

}

.auth-links--center {

  justify-content: center;

  margin: 4px 0 16px;

}

.auth-links a {

  color: #777;

  text-decoration: none;

  font-weight: 500;

}

.auth-links a span {

  color: #F0357A;

  font-weight: 600;

}

.auth-links a:hover {

  color: #F0357A;

}

.auth-submit {

  width: 100%;

  padding: 16px 24px;

  border: none;

  border-radius: 999px;

  font-size: 16px;

  font-weight: 700;

  font-family: inherit;

  color: #fff;

  cursor: pointer;

  background: linear-gradient(90deg, #3BB5D4 0%, #F0357A 100%);

  box-shadow:

    0 10px 26px rgba(240, 53, 122, 0.32),

    0 0 0 1px rgba(255, 255, 255, 0.2) inset;

  min-height: 54px;

  letter-spacing: 0.02em;

  transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;

}

.auth-submit:hover {

  transform: translateY(-1px);

  box-shadow:

    0 12px 30px rgba(240, 53, 122, 0.38),

    0 0 0 1px rgba(255, 255, 255, 0.28) inset;

}

.auth-submit:active {

  transform: translateY(0);

  opacity: 0.94;

}

.auth-alert {

  border-radius: 14px;

  padding: 12px 14px;

  font-size: 13px;

  margin-bottom: 14px;

  font-weight: 500;

}

.auth-alert.err {

  background: #fff1f0;

  color: #d63a3a;

  border: 1px solid #ffdede;

}

.auth-alert.ok {

  background: #fff0f3;

  color: #F0357A;

  border: 1px solid #ffc9d6;

}

/* phone picker polish inside auth fields */

.auth-field .phone-cc-btn {

  border-right-color: #eee;

  font-weight: 600;

  color: #222;

}

.auth-field .phone-cc-btn .fa-chevron-down {

  color: #F0357A;

}

.auth-field .phone-cc-option:hover {

  background: #fff0f5;

}



/* auth-fit-mobile */
html, body.auth-page { overflow-x: hidden; max-width: 100%; }
.auth-page .app-root,
.auth-shell,
.auth-form-page,
.auth-gate {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow-x: hidden;
}
.auth-form-card,
.auth-gate-card {
  width: 100%;
  max-width: 420px;
  min-width: 0;
  box-sizing: border-box;
  overflow: visible;
}
.auth-links {
  flex-wrap: wrap;
  align-items: flex-start;
}
.auth-links a {
  white-space: normal;
  overflow-wrap: anywhere;
}
@media (max-width: 520px) {
  .auth-form-page,
  .auth-gate { padding-left: 12px; padding-right: 12px; }
  .auth-links {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
}