/* Shared premium treatment for the existing login and registration flows. */
body.auth-experience {
  --auth-ink: #14231f;
  --auth-muted: #65736e;
  --auth-green: #008c69;
  --auth-green-dark: #006e54;
  --auth-violet: #6048c8;
  --auth-surface: #fbfaf7;
  --auth-line: rgba(20, 35, 31, .12);
  background: #102a24;
}

body.auth-experience main#main-content {
  min-height: 0 !important;
  position: relative;
  isolation: isolate;
}

.login-page,
.register-page {
  color: var(--auth-ink);
  /* Keep horizontal bleed clipped, but never clip the country dropdown vertically. */
  overflow-x: clip;
  overflow-y: visible;
}

.login-page .bg-gradient,
.register-page .bg-gradient {
  background:
    radial-gradient(circle at 12% 16%, rgba(92, 214, 164, .2), transparent 30%),
    radial-gradient(circle at 88% 72%, rgba(112, 83, 211, .23), transparent 34%),
    linear-gradient(135deg, #10251f 0%, #0f392e 52%, #17263a 100%);
}

.login-page .bg-pattern,
.register-page .bg-pattern {
  opacity: .8;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, #000, transparent 92%);
}

.auth-stage {
  min-height: calc(100dvh - 76px);
  padding-block: clamp(22px, 4vw, 60px);
  align-items: center;
}

.register-page .auth-stage { align-items: start; }
.auth-stage-col { width: 100%; }

.auth-layout {
  width: min(1080px, 100%);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(390px, 1.08fr);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 32px;
  overflow: visible;
  box-shadow: 0 38px 90px rgba(0, 13, 10, .38);
  background: rgba(255,255,255,.07);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  animation: authFrameEntry .62s cubic-bezier(.16,1,.3,1) both;
}

.register-page .auth-layout {
  width: min(1140px, 100%);
  grid-template-columns: minmax(320px, .78fr) minmax(500px, 1.22fr);
}

@keyframes authFrameEntry {
  from { opacity: 0; transform: translateY(22px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.auth-showcase {
  position: relative;
  overflow: hidden;
  padding: clamp(34px, 5vw, 64px);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 620px;
}

.register-page .auth-showcase { min-height: 760px; }

.auth-showcase::before,
.auth-showcase::after {
  content: '';
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
}

.auth-showcase::before {
  width: 280px;
  height: 280px;
  inset-inline-end: -120px;
  top: -90px;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 0 0 42px rgba(255,255,255,.025), 0 0 0 84px rgba(255,255,255,.018);
}

.auth-showcase::after {
  width: 160px;
  height: 160px;
  inset-inline-start: -55px;
  bottom: 70px;
  background: linear-gradient(145deg, rgba(33, 195, 142, .2), rgba(112, 83, 211, .16));
  filter: blur(2px);
}

.auth-brand,
.auth-story-copy,
.auth-story-foot { position: relative; z-index: 1; }

.auth-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  text-decoration: none;
  width: fit-content;
}

.auth-brand:hover { color: #fff; }
.auth-brand-mark {
  width: 48px;
  height: 48px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, rgba(255,255,255,.24), rgba(255,255,255,.1));
  border: 1px solid rgba(255,255,255,.24);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 10px 26px rgba(0,0,0,.16);
}
.auth-brand-mark i { font-size: 1.25rem; }
.auth-brand-text { display: grid; line-height: 1.1; }
.auth-brand-text strong { font-size: 1rem; letter-spacing: .01em; }
.auth-brand-text small { color: rgba(255,255,255,.58); font-size: .68rem; margin-top: 4px; }

.auth-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: 18px;
  padding: 7px 11px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: #c8f7e5;
  font-size: .73rem;
  font-weight: 700;
}
.auth-eyebrow::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #53e0ad; box-shadow: 0 0 0 5px rgba(83,224,173,.11); }
.auth-story-copy h2 { max-width: 420px; margin: 0 0 16px; font-size: clamp(1.75rem, 3vw, 2.45rem); line-height: 1.35; font-weight: 800; letter-spacing: -.025em; }
.auth-story-copy > p { max-width: 430px; color: rgba(255,255,255,.7); line-height: 1.9; font-size: .93rem; margin: 0; }

.auth-benefits { display: grid; gap: 12px; margin-top: 30px; }
.auth-benefit {
  display: grid;
  grid-template-columns: 40px 1fr;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 15px;
  background: rgba(255,255,255,.055);
}
.auth-benefit i { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; color: #bdf4df; background: rgba(83,224,173,.11); }
.auth-benefit span { color: rgba(255,255,255,.84); font-size: .82rem; font-weight: 600; line-height: 1.55; }
.auth-story-foot { display: flex; align-items: center; gap: 9px; color: rgba(255,255,255,.55); font-size: .73rem; }
.auth-story-foot i { color: #70e1b7; }

.login-page .auth-card,
.register-page .auth-card {
  position: relative;
  z-index: 2;
  width: 100%;
  border-radius: 28px;
  padding: clamp(28px, 4vw, 46px);
  background: var(--auth-surface);
  box-shadow: -18px 0 54px rgba(0, 20, 15, .14);
  backdrop-filter: none;
  animation: none;
}

.login-page .auth-card::before,
.register-page .auth-card::before {
  content: '';
  position: absolute;
  inset-inline: 34px;
  top: 0;
  height: 3px;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(90deg, transparent, #16ad82 28%, #6b52ce 72%, transparent);
  opacity: .82;
}

[dir="ltr"] .auth-card { box-shadow: 18px 0 54px rgba(0, 20, 15, .14); }

.auth-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  padding: 5px;
  margin-bottom: 30px;
  border: 1px solid var(--auth-line);
  border-radius: 14px;
  background: #f0efeb;
}
.auth-switch a {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 10px;
  color: var(--auth-muted);
  text-decoration: none;
  font-size: .84rem;
  font-weight: 700;
  transition: color .2s, background .2s, box-shadow .2s;
}
.auth-switch a:hover { color: var(--auth-green-dark); }
.auth-switch a.active { color: var(--auth-green-dark); background: #fff; box-shadow: 0 4px 16px rgba(20,35,31,.09); }
.auth-switch a:focus-visible { outline: 3px solid rgba(0,140,105,.16); outline-offset: 1px; }
.auth-switch a.active::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #15a77d; box-shadow: 0 0 0 4px rgba(21,167,125,.1); }

.login-page .auth-header,
.register-page .auth-header { margin-bottom: 26px; }
.login-page .logo-circle,
.register-page .logo-circle {
  width: 62px;
  height: 62px;
  margin-bottom: 14px;
  border-radius: 19px;
  background: linear-gradient(145deg, var(--auth-green), var(--auth-violet));
  box-shadow: 0 14px 34px rgba(0,140,105,.22);
}
.login-page .logo-circle::after,
.register-page .logo-circle::after { inset: 9px; border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.08); }
.login-page .auth-title,
.register-page .auth-title { color: var(--auth-ink); font-size: clamp(1.35rem, 2vw, 1.65rem); font-weight: 800; letter-spacing: -.02em; }
.login-page .auth-subtitle,
.register-page .auth-subtitle { color: var(--auth-muted); line-height: 1.7; }

.field-group { position: relative; }
.field-label { color: #34443f; font-size: .82rem; margin-bottom: 8px; transition: color .18s ease, transform .18s ease; }
.field-group:focus-within .field-label { color: var(--auth-green-dark); transform: translateY(-1px); }
.field-group:focus-within .field-label i { transform: scale(1.08); color: var(--auth-violet); }
.field-label i { transition: color .18s ease, transform .18s ease; }
.field-input,
.picker-btn {
  min-height: 52px;
  background: #fff;
  border: 1.5px solid #d9dedb;
  box-shadow: 0 1px 0 rgba(20,35,31,.02);
}
.field-input:hover,
.picker-btn:hover { border-color: #b4c2bd; background: #fff; }
.field-input:focus,
.picker-btn:focus-visible {
  border-color: var(--auth-green);
  box-shadow: 0 0 0 4px rgba(0,140,105,.1), 0 7px 20px rgba(0,140,105,.06);
}
.field-input::placeholder { color: #a1aaa6; opacity: 1; }
.field-input:-webkit-autofill,
.field-input:-webkit-autofill:hover,
.field-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--auth-ink);
  -webkit-box-shadow: 0 0 0 1000px #fff inset, 0 0 0 4px rgba(0,140,105,.08);
  transition: background-color 9999s ease-out 0s;
}
.field-input.has-error,
.field-input[aria-invalid="true"] { border-color: #dc5c5c; box-shadow: 0 0 0 4px rgba(220,92,92,.08); }
.pwd-toggle { width: 36px; height: 36px; display: grid; place-items: center; inset-inline-end: 9px; border-radius: 10px; }
.pwd-toggle:hover,
.pwd-toggle:focus-visible { color: var(--auth-green); background: rgba(0,140,105,.08); outline: none; }
/* Country dial-code picker — must escape card stacking without breaking layout */
.phone-row,
.field-group:has(.country-picker),
.login-page .auth-card,
.register-page .auth-card {
  overflow: visible;
}
.country-picker {
  position: relative;
  z-index: 3;
}
.country-picker.open {
  z-index: 80;
}
.picker-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: auto;
  min-width: 260px;
  width: max(100%, 260px);
  max-width: min(320px, calc(100vw - 24px));
  max-height: min(340px, 55vh);
  border: 1px solid rgba(20,35,31,.12);
  background: #fff;
  box-shadow: 0 20px 50px rgba(20,35,31,.18);
  z-index: 10050;
  overflow: hidden;
  overscroll-behavior: contain;
}
[dir="rtl"] .picker-dropdown {
  left: auto;
  right: 0;
}
.picker-dropdown.is-fixed {
  position: fixed;
  margin: 0;
  /* top/left/width set by JS; panel is portaled to <body> while open */
  z-index: 10050;
}
.picker-dropdown.is-fixed.open,
body > .picker-dropdown.is-fixed {
  display: flex;
  flex-direction: column;
}
#countrySearch,
.picker-dropdown #countrySearch {
  background: #f7f8f6;
  border-color: #d9dedb;
  min-height: 42px;
  width: calc(100% - 12px);
  margin: 6px;
  box-sizing: border-box;
  flex: 0 0 auto;
}
#countryOpts {
  flex: 1 1 auto;
  min-height: 0;
  max-height: min(280px, calc(55vh - 56px));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.country-opt { border-radius: 9px; margin: 2px 6px; }
.country-opt:hover,
.country-opt[aria-selected="true"],
.country-opt.active { background: #ecf8f3; }
.country-opt:focus-visible { outline: 2px solid rgba(0,140,105,.42); outline-offset: -2px; background: #ecf8f3; }

.login-page .submit-btn,
.register-page .submit-btn {
  position: relative;
  overflow: hidden;
  min-height: 52px;
  background: linear-gradient(110deg, var(--auth-green-dark), var(--auth-green) 46%, var(--auth-violet));
  background-size: 160% 100%;
  box-shadow: 0 13px 26px rgba(0,140,105,.2);
  isolation: isolate;
}
.login-page .submit-btn::after,
.register-page .submit-btn::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  transform: translateX(-115%) skewX(-18deg);
  width: 42%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  transition: transform .55s cubic-bezier(.2,.7,.2,1);
}
.login-page .submit-btn:hover:not(:disabled),
.register-page .submit-btn:hover:not(:disabled) { background-position: 100% 0; box-shadow: 0 16px 30px rgba(0,140,105,.28); }
.login-page .submit-btn:hover:not(:disabled)::after,
.register-page .submit-btn:hover:not(:disabled)::after { transform: translateX(280%) skewX(-18deg); }
.submit-btn:focus-visible,
.back-btn:focus-visible,
.browse-btn:focus-visible { outline: 3px solid rgba(0,140,105,.22); outline-offset: 3px; }
.back-btn,
.browse-btn { background: #fff; border-color: #d9dedb; min-height: 50px; }
.browse-btn:hover,
.back-btn:hover { border-color: rgba(0,140,105,.45); background: #f1faf6; }
.remember-label,
.terms-label { line-height: 1.6; }
.remember-check,
.terms-check {
  appearance: none;
  -webkit-appearance: none;
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  display: grid;
  place-content: center;
  border: 1.5px solid #b9c3bf;
  border-radius: 6px;
  background: #fff;
  transition: border-color .18s, background .18s, box-shadow .18s;
}
.remember-check::before,
.terms-check::before { content: ''; width: 9px; height: 6px; border: solid #fff; border-width: 0 0 2px 2px; transform: rotate(-45deg) scale(0); transition: transform .16s ease; }
[dir="ltr"] .remember-check::before,
[dir="ltr"] .terms-check::before { transform: rotate(-45deg) scale(0); }
.remember-check:checked,
.terms-check:checked { background: linear-gradient(145deg, var(--auth-green), var(--auth-green-dark)); border-color: var(--auth-green); box-shadow: 0 4px 12px rgba(0,140,105,.2); }
.remember-check:checked::before,
.terms-check:checked::before { transform: rotate(-45deg) scale(1); }
.remember-check:focus-visible,
.terms-check:focus-visible { outline: 3px solid rgba(0,140,105,.16); outline-offset: 2px; }
.terms-label a { text-underline-offset: 3px; text-decoration-thickness: 1px; }
.terms-label:has(.terms-check.has-error) { color: #b42323; }
.terms-check.has-error { outline: 3px solid rgba(220,92,92,.18); outline-offset: 2px; }
.security-badge { padding: 10px 12px; border-radius: 12px; background: #edf7f3; color: #65736e; }
.security-badge i { color: var(--auth-green); }
.alert-msg { border-radius: 13px; line-height: 1.6; box-shadow: 0 8px 20px rgba(20,35,31,.05); }
.auth-footer { margin-top: 22px; }

.form-status {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 17px;
  padding: 11px 13px;
  border: 1px solid #f1c3c3;
  border-radius: 12px;
  color: #a92d2d;
  background: #fff4f4;
  font-size: .79rem;
  line-height: 1.6;
}
.form-status i { flex: 0 0 auto; }

.register-page .steps-bar { margin-bottom: 24px; padding: 0 16px; }
.register-page .step-dot { width: 34px; height: 34px; border-width: 2px; }
.step-caption { position: absolute; top: calc(100% + 7px); white-space: nowrap; color: #8b9692; font-size: .68rem; font-weight: 600; }
.step-dot.active .step-caption,
.step-dot.done .step-caption { color: var(--auth-green-dark); }
.register-page .step-info { margin-top: 34px; }
.register-page .step-icon { width: 50px; height: 50px; font-size: 20px; background: linear-gradient(145deg, #e4f6ef, #ebe7fb); }
.phone-preview-bar { background: #edf7f3; border: 1px solid rgba(0,140,105,.2); }
.edit-phone-btn { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; }
.edit-phone-btn:focus-visible { outline: 3px solid rgba(0,140,105,.16); }
.strength-track { height: 6px; background: #e5e8e6; }
.otp-section { background: #fff; border-color: rgba(0,140,105,.24); box-shadow: 0 16px 36px rgba(20,35,31,.08); }

@media (hover: hover) {
  .auth-benefit { transition: transform .2s ease, border-color .2s ease, background .2s ease; }
  .auth-benefit:hover { transform: translateX(-3px); border-color: rgba(110,231,186,.2); background: rgba(255,255,255,.08); }
  [dir="ltr"] .auth-benefit:hover { transform: translateX(3px); }
}

.terms-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 20px;
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  background: rgba(6,24,19,.66);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.terms-dialog {
  position: relative;
  width: min(520px, 100%);
  max-height: min(80vh, 720px);
  overflow-y: auto;
  padding: 32px;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 22px;
  background: #fbfaf7;
  box-shadow: 0 28px 80px rgba(0,14,10,.35);
  -webkit-overflow-scrolling: touch;
  animation: termsEntry .22s cubic-bezier(.16,1,.3,1);
}
@keyframes termsEntry { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.terms-dialog h3 { margin: 0 0 20px; padding-inline-end: 38px; color: var(--auth-green-dark); font-size: 1.2rem; font-weight: 800; }
.terms-copy { color: #52605c; font-size: .88rem; line-height: 1.9; }
.terms-copy p { padding: 10px 12px; margin: 0 0 7px; border-radius: 11px; background: #f3f3ef; }
.terms-close { position: absolute; top: 10px; inset-inline-end: 10px; width: 42px; height: 42px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 12px; color: #697671; background: transparent; font-size: 1.6rem; cursor: pointer; }
.terms-close:hover { color: #9c2727; background: #fbeaea; }
.terms-close:focus-visible { outline: 3px solid rgba(0,140,105,.16); }
.terms-accept { width: 100%; min-height: 50px; margin-top: 14px; border: 0; border-radius: 13px; color: #fff; background: linear-gradient(110deg,var(--auth-green-dark),var(--auth-green)); font-size: .95rem; font-weight: 700; box-shadow: 0 11px 24px rgba(0,140,105,.2); cursor: pointer; }
.terms-accept:hover { transform: translateY(-1px); box-shadow: 0 14px 27px rgba(0,140,105,.26); }
.terms-accept:focus-visible { outline: 3px solid rgba(0,140,105,.2); outline-offset: 3px; }

.auth-mobile-note { display: none; }

@media (max-width: 991.98px) {
  .auth-stage { min-height: auto; padding-block: 28px; }
  .auth-layout,
  .register-page .auth-layout { width: min(600px, 100%); display: block; border-radius: 28px; }
  .auth-showcase { min-height: auto; padding: 24px 28px; }
  .auth-showcase .auth-story-copy,
  .auth-showcase .auth-story-foot { display: none; }
  .auth-brand { margin-inline: auto; }
  .login-page .auth-card,
  .register-page .auth-card { border-radius: 25px; box-shadow: 0 -18px 48px rgba(0,20,15,.13); }
  .auth-mobile-note { display: flex; justify-content: center; gap: 18px; margin: -8px 0 24px; color: var(--auth-muted); font-size: .72rem; }
  .auth-mobile-note span { display: inline-flex; align-items: center; gap: 6px; }
  .auth-mobile-note i { color: var(--auth-green); }
}

@media (max-width: 576px) {
  .auth-stage { padding-block: 14px 24px; }
  .auth-layout,
  .register-page .auth-layout { border-radius: 23px; }
  .auth-showcase { padding: 16px 18px; }
  .auth-brand-mark { width: 40px; height: 40px; border-radius: 12px; }
  .login-page .auth-card,
  .register-page .auth-card { min-height: 0; margin: 0; padding: 24px 18px 26px; border-radius: 21px; justify-content: flex-start; }
  .auth-switch { margin-bottom: 24px; }
  .login-page .logo-circle,
  .register-page .logo-circle { width: 56px; height: 56px; }
  .phone-row { flex-direction: row; align-items: stretch; }
  .picker-btn { width: auto; padding-inline: 11px; }
  .phone-field { text-align: start; min-width: 0; }
  /* Prefer JS-fixed panel on narrow screens so the list never stretches the card. */
  .picker-dropdown {
    min-width: 0;
    width: min(100vw - 16px, 360px);
    max-width: calc(100vw - 16px);
    max-height: min(60vh, 360px);
  }
  .form-extras { flex-direction: row; align-items: center; }
  .auth-mobile-note { gap: 12px; flex-wrap: wrap; }
  .auth-card::before { inset-inline: 26px; }
  .terms-dialog { padding: 26px 18px 20px; border-radius: 18px; }
  .terms-copy { font-size: .82rem; }
  .terms-copy p { padding: 8px 9px; }
}

@media (max-width: 390px) {
  .auth-stage { padding-inline: 8px; }
  .auth-mobile-note { display: none; }
  .phone-row { gap: 6px; }
  .picker-code { font-size: .82rem; }
  .picker-flag { font-size: 19px; }
  .picker-btn { padding-inline: 8px; }
  .fields-grid { gap: 0; }
  .form-extras { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .auth-layout,
  .shape,
  .logo-circle::after,
  .form-step,
  .alert-msg { animation: none !important; }
  .terms-dialog { animation: none !important; }
  .submit-btn,
  .field-input { transition-duration: .01ms !important; }
}

@media (prefers-contrast: more) {
  .field-input,
  .picker-btn,
  .back-btn,
  .browse-btn { border-width: 2px; border-color: #66736f; }
}