/* ──────────────────────────────────────────────────────────────────────────
   Tapua Auth — Frontend Styles
   Matches the Tapua design system. CSS custom properties fall back through
   three layers:
     1. Admin override  (--tapua-ui-*)        — highest priority
     2. Theme token     (--orange, --teal-deep …)  — Tapua theme `:root` vars
     3. Hard-coded default                    — works on any WordPress theme
   ────────────────────────────────────────────────────────────────────────── */

/* ── Design tokens ──────────────────────────────────────────────────────── */
.tapua-auth-page,
.tapua-complete-profile {
  --t-primary:      var(--tapua-ui-primary,     var(--orange,      #E8652A));
  --t-heading-col:  var(--tapua-ui-heading,     var(--teal-deep,   #1E5252));
  --t-accent:       var(--tapua-ui-accent,      var(--teal-mid,    #2D6B6B));
  --t-pale:         var(--tapua-ui-pale,        var(--teal-pale,   #EAF3F3));
  --t-card-bg:      var(--tapua-ui-card-bg,     #ffffff);
  --t-text:         var(--tapua-ui-text,        var(--ink-light,   #5A7575));
  --t-ink:          var(--tapua-ui-ink,         var(--ink,         #0F2B2B));
  --t-border:       var(--tapua-ui-border,      rgba(45, 107, 107, 0.13));
  --t-heading-font: var(--tapua-ui-heading-font, 'Playfair Display', serif);
  --t-body-font:    var(--tapua-ui-body-font,   'Nunito', sans-serif);
  --t-shadow:       0 18px 40px rgba(30, 82, 82, .07);
}

/* ── Page wrapper — centres the card in the WC content area ─────────────── */
.tapua-auth-page {
  padding: 40px 0 60px;
  max-width: 480px;
  margin: 0 auto;
  font-family: var(--t-body-font);
}

/* ── Card ───────────────────────────────────────────────────────────────── */
.tapua-auth-card {
  background: var(--t-card-bg);
  border: 1px solid var(--t-border);
  border-radius: 10px;
  padding: 36px 32px;
  box-shadow: var(--t-shadow);
  position: relative;
  overflow: hidden;
}

/* Coloured top accent stripe */
.tapua-auth-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--t-primary);
  border-radius: 10px 10px 0 0;
}

/* ── Eyebrow label ──────────────────────────────────────────────────────── */
.tapua-auth-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--t-body-font);
  font-size: 10.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--t-primary);
  margin-bottom: 12px;
}
.tapua-auth-eyebrow::before {
  content: '';
  display: block;
  flex-shrink: 0;
  width: 22px;
  height: 1.5px;
  background: var(--t-primary);
  border-radius: 2px;
}

/* ── Heading ────────────────────────────────────────────────────────────── */
.tapua-auth-heading {
  font-family: var(--t-heading-font);
  font-size: 28px;
  line-height: 1.12;
  color: var(--t-heading-col);
  font-weight: 700;
  margin-bottom: 6px;
}

/* ── Subtitle ───────────────────────────────────────────────────────────── */
.tapua-auth-sub {
  font-family: var(--t-body-font);
  font-size: 14px;
  line-height: 1.75;
  color: var(--t-text);
  margin-bottom: 28px;
}

/* ── Steps ──────────────────────────────────────────────────────────────── */
.tapua-auth-step {
  /* no extra margin — card padding handles spacing */
}

/* ── Form fields ────────────────────────────────────────────────────────── */
.tapua-field {
  margin-bottom: 18px;
}

.tapua-label {
  display: block;
  font-family: var(--t-body-font);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--t-heading-col);
  margin-bottom: 7px;
}
.tapua-label .required {
  color: var(--t-primary);
  margin-left: 1px;
}

.tapua-input {
  display: block;
  width: 100%;
  padding: 13px 16px;
  font-family: var(--t-body-font);
  font-size: 15px;
  color: var(--t-ink);
  background: #fff;
  border: 1.5px solid var(--t-border);
  border-radius: 3px;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  line-height: 1.4;
  box-sizing: border-box;
}
.tapua-input:focus {
  border-color: var(--t-accent);
  box-shadow: 0 0 0 3px rgba(45, 107, 107, .1);
}
.tapua-input::placeholder {
  color: rgba(90, 117, 117, .4);
  font-weight: 400;
}

/* OTP input — large centred digits */
.tapua-otp-input {
  font-size: 1.8rem;
  letter-spacing: .4em;
  text-align: center;
  font-weight: 800;
  padding-left: 22px; /* compensate for trailing letter-spacing gap */
}

.tapua-field-hint {
  display: block;
  font-family: var(--t-body-font);
  font-size: 11.5px;
  color: var(--t-text);
  margin-top: 5px;
  line-height: 1.5;
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.tapua-btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: var(--t-primary);
  color: #fff;
  border: none;
  padding: 15px 30px;
  border-radius: 3px;
  font-family: var(--t-body-font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .25s, transform .2s, box-shadow .2s;
  box-shadow: 0 8px 20px rgba(30, 82, 82, .12);
  margin-top: 4px;
}
.tapua-btn-primary:hover:not(:disabled) {
  background: var(--t-heading-col);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(30, 82, 82, .18);
}
.tapua-btn-primary:disabled {
  opacity: .55;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* Ghost button — "Change number" */
.tapua-btn-ghost {
  display: block;
  width: 100%;
  text-align: center;
  background: none;
  border: none;
  font-family: var(--t-body-font);
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--t-text);
  cursor: pointer;
  padding: 10px 8px;
  border-radius: 3px;
  margin-top: 8px;
  transition: color .2s, background .2s;
}
.tapua-btn-ghost:hover {
  color: var(--t-accent);
  background: var(--t-pale);
}

/* ── Notices ────────────────────────────────────────────────────────────── */
.tapua-notice {
  padding: 13px 16px 13px 20px;
  border-radius: 0 3px 3px 0;
  font-family: var(--t-body-font);
  font-size: 13.5px;
  line-height: 1.65;
  margin-top: 20px;
  border-left: 4px solid;
}
/* Hide when empty — avoids blank space before any message is set */
.tapua-notice:empty {
  display: none;
}

.tapua-notice-info {
  background: var(--t-pale);
  border-color: var(--t-accent);
  color: var(--t-heading-col);
}

.tapua-notice-error {
  background: #fff0ea;
  border-color: var(--t-primary);
  color: var(--t-ink);
  font-weight: 500;
}

.tapua-notice-loading {
  background: #f5f5f5;
  border-color: #c0c0c0;
  color: #555;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ── Spinner ────────────────────────────────────────────────────────────── */
.tapua-spinner {
  display: inline-block;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border: 2.5px solid rgba(45, 107, 107, .2);
  border-top-color: var(--t-accent);
  border-radius: 50%;
  animation: tapua-spin .75s linear infinite;
}
@keyframes tapua-spin {
  to { transform: rotate(360deg); }
}

/* ── Country-code dropdown ──────────────────────────────────────────────── */
#tapua-country-code {
  max-height: 300px;
  overflow-y: auto;
}

/* ── Defence-in-depth: hide default WC login fields ────────────────────── */
.woocommerce-form-login .woocommerce-form__label-for-checkbox,
.woocommerce-form-login [name="username"],
.woocommerce-form-login [name="password"],
.woocommerce-form-login .lost_password,
.woocommerce-form-login .woocommerce-form__input-checkbox {
  display: none !important;
}

/* ── Complete-profile page ──────────────────────────────────────────────── */
.tapua-complete-profile {
  font-family: var(--t-body-font);
}
.tapua-complete-profile .tapua-auth-heading {
  font-size: 26px;
}
.tapua-complete-profile .tapua-auth-sub {
  margin-bottom: 24px;
}
.tapua-complete-profile .tapua-field {
  margin-bottom: 20px;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 560px) {
  .tapua-auth-page {
    padding: 20px 0 40px;
  }
  .tapua-auth-card {
    border-radius: 8px;
    padding: 26px 20px;
  }
  .tapua-auth-heading {
    font-size: 24px;
  }
  .tapua-auth-sub {
    font-size: 13.5px;
    margin-bottom: 22px;
  }
  .tapua-otp-input {
    font-size: 1.5rem;
    letter-spacing: .3em;
    padding-left: 18px;
  }
  .tapua-btn-primary {
    padding: 14px 20px;
  }
}

@media (max-width: 380px) {
  .tapua-auth-card {
    padding: 22px 16px;
    border-radius: 6px;
  }
  .tapua-auth-heading {
    font-size: 21px;
  }
  .tapua-otp-input {
    font-size: 1.3rem;
    letter-spacing: .2em;
    padding-left: 14px;
  }
}