/* ============================================================================
 * tiki-portal-entry.css — the four public portal entry points
 *   portal/login.html  portal/portal-login.html  portal/signup.html
 *   portal/giftcards.html
 *
 * These pages sit at the boundary between the marketing site and the customer
 * portal. They already load /css/nav.css, so they inherit the public shell.
 * This file gives their page bodies the same visual language.
 *
 * DELIBERATELY STYLE-ONLY. Every selector below matches a class that ALREADY
 * EXISTS in the live markup. No page's <body> or <script> is altered, so:
 *   - authentication and session handling
 *   - redirect targets and ?redirect= passthrough
 *   - CSRF tokens
 *   - passkey / WebAuthn (portal/js/passkey.js)
 *   - email-code (OTP) entry and resend
 *   - remembered-device handling
 *   - rate limiting and lockout messaging
 *   - Square payment fields and gift-card purchase flow
 * are byte-for-byte unchanged. Adding a colour here cannot change any of them.
 *
 * The deeper authenticated portal (dashboard, account, membership, vip-enroll,
 * booking, rewards…) has its own deliberate design system in
 * portal/portal-styles.css and is NOT touched by this file.
 *
 * Requires tiki-2026.css first (uses its --tt-* tokens).
 * ==========================================================================*/

/* --- Page shells ----------------------------------------------------------- */
.login-page, .signup-page {
  min-height: 100vh;
  background:
    radial-gradient(90% 60% at 85% 0%, rgba(34,184,196,.10) 0%, rgba(34,184,196,0) 60%),
    radial-gradient(80% 60% at 5% 100%, rgba(240,180,41,.13) 0%, rgba(240,180,41,0) 62%),
    linear-gradient(180deg, var(--tt-bg) 0%, var(--tt-cream) 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 48px var(--tt-gutter);
}

/* --- Card ------------------------------------------------------------------ */
.login-card, .signup-card {
  width: 100%; max-width: 460px;
  background: var(--tt-surface);
  border: 0;
  border-radius: var(--tt-r-xl);
  box-shadow: var(--tt-shadow-lift);
  padding: 36px var(--tt-card-pad);
}
.signup-card { max-width: 640px; }

.login-header, .signup-header { text-align: center; margin-bottom: 26px; }
.login-header h1, .signup-header h1 { font-size: var(--tt-fs-h2); margin-bottom: 8px; }
.login-header p, .signup-header p { color: var(--tt-ink-soft); font-size: var(--tt-fs-sm); }
.login-header .logo img, .signup-header .logo img, .brand img { height: 46px; width: auto; margin: 0 auto 18px; }

.portal-badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--tt-fs-label); font-weight: 600;
  padding: 5px 13px; border-radius: var(--tt-r-pill);
  background: var(--tt-teal-pale); color: var(--tt-teal-deep);
  margin-bottom: 14px;
}

/* --- Forms ----------------------------------------------------------------- */
.login-form, .balance-form { display: grid; gap: 18px; }
.form-group { display: grid; gap: 7px; }
.form-group label {
  font-size: var(--tt-fs-label); font-weight: 600; color: var(--tt-ink);
}
.form-group input, .form-group select, .form-group textarea {
  width: 100%; min-height: var(--tt-tap-min);
  padding: 12px 14px; font-size: 1rem;          /* >=16px stops iOS zoom */
  background: var(--tt-surface); color: var(--tt-ink);
  border: 1.5px solid var(--tt-border-strong);
  border-radius: var(--tt-r-sm);
  transition: border-color var(--tt-t-fast) var(--tt-ease), box-shadow var(--tt-t-fast) var(--tt-ease);
}
.form-group input::placeholder, .form-group textarea::placeholder { color: var(--tt-ink-muted); opacity: 1; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none; border-color: var(--tt-teal); box-shadow: 0 0 0 3px rgba(14,124,138,.18);
}
.form-group input:focus-visible { outline: 3px solid var(--tt-focus); outline-offset: 1px; }

/* Autofill. Chrome paints its own pale-blue wash over saved credentials, which
 * on the sign-in card reads as a foreign, half-broken field. Pin it to the card
 * surface and ink so a remembered email/password looks like the rest of the
 * form. (Background must go through the inset box-shadow trick — UAs ignore
 * background-color on :-webkit-autofill.) */
.form-group input:-webkit-autofill,
.form-group input:-webkit-autofill:hover,
.form-group input:-webkit-autofill:focus,
.form-group select:-webkit-autofill {
  -webkit-text-fill-color: var(--tt-ink);
  -webkit-box-shadow: 0 0 0 1000px var(--tt-surface) inset;
  box-shadow: 0 0 0 1000px var(--tt-surface) inset;
  caret-color: var(--tt-ink);
}
.form-group input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--tt-surface) inset, 0 0 0 3px rgba(14,124,138,.18);
  box-shadow: 0 0 0 1000px var(--tt-surface) inset, 0 0 0 3px rgba(14,124,138,.18);
}
.form-hint, .form-foot, .sent-to, .info { font-size: var(--tt-fs-label); color: var(--tt-ink-soft); }
.form-row { display: grid; gap: 18px; }
@media (min-width: 560px) { .form-row { grid-template-columns: 1fr 1fr; } }

/* Remembered-device checkbox — 22px control in a 44px hit area. */
.remember { display: flex; align-items: center; gap: 10px; min-height: var(--tt-tap-min); }
.remember input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--tt-teal); cursor: pointer; }
.remember label { font-size: var(--tt-fs-sm); color: var(--tt-ink-soft); cursor: pointer; }

/* --- Buttons --------------------------------------------------------------- */
.btn-login, .btn-signup, .btn-purchase, .btn-primary, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 50px; padding: 13px 26px;
  font-family: var(--tt-font-body); font-size: 1rem; font-weight: 600;
  background: var(--tt-teal); color: var(--tt-on-teal);
  border: 2px solid var(--tt-teal); border-radius: var(--tt-r-pill);
  cursor: pointer; text-decoration: none;
  box-shadow: var(--tt-shadow);
  transition: background var(--tt-t) var(--tt-ease), border-color var(--tt-t) var(--tt-ease),
              box-shadow var(--tt-t) var(--tt-ease);
}
.btn-login:hover, .btn-signup:hover, .btn-purchase:hover, .btn-primary:hover, .btn:hover {
  background: var(--tt-teal-deep); border-color: var(--tt-teal-deep); box-shadow: var(--tt-shadow-hover);
}
.btn-login:disabled, .btn-purchase:disabled, .btn:disabled {
  opacity: .55; cursor: not-allowed; box-shadow: none;
}
.btn-secondary, .btn-outline, .alt-method {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 50px; padding: 13px 26px;
  font-family: var(--tt-font-body); font-size: 1rem; font-weight: 600;
  background: var(--tt-surface); color: var(--tt-teal-deep);
  border: 2px solid var(--tt-teal); border-radius: var(--tt-r-pill);
  cursor: pointer; text-decoration: none;
}
.btn-secondary:hover, .btn-outline:hover, .alt-method:hover {
  background: var(--tt-teal-pale); border-color: var(--tt-teal-deep);
}
.btn-text, .toggle-link, .back-home {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--tt-tap-min);
  background: none; border: none; cursor: pointer;
  font-family: var(--tt-font-body); font-size: var(--tt-fs-sm); font-weight: 600;
  color: var(--tt-teal-deep); text-decoration: underline; text-underline-offset: 3px;
}
.back-home { color: var(--tt-ink-soft); text-decoration: none; }
.back-home:hover { color: var(--tt-teal-deep); text-decoration: underline; }

.login-actions { display: grid; gap: 12px; margin-top: 4px; }

/* --- Divider --------------------------------------------------------------- */
.divider {
  display: flex; align-items: center; gap: 14px;
  color: var(--tt-ink-muted); font-size: var(--tt-fs-label);
  margin: 22px 0;
}
.divider::before, .divider::after {
  content: ""; flex: 1; height: 1px; background: var(--tt-border);
}

/* --- Messages --------------------------------------------------------------
 * .message is the shared status element on all four pages. The scripts toggle
 * its text and (on some pages) an extra state class; the base style is a
 * neutral notice so an un-classed message is still readable. */
.message {
  display: block;
  padding: 13px 16px;
  border-radius: var(--tt-r);
  font-size: var(--tt-fs-sm);
  background: var(--tt-info-bg);
  color: var(--tt-ink);
  border: 1px solid var(--tt-border);
}
.message:empty { display: none; }
.message.error, .message.is-error, .balance-error {
  background: var(--tt-error-bg); border-color: #F2C4C1; color: var(--tt-error); font-weight: 600;
}
.message.success, .message.is-success, .success-box {
  background: var(--tt-open-bg); border-color: #BFE3CE; color: var(--tt-open); font-weight: 600;
}
.message.info { background: var(--tt-teal-pale); border-color: #BFE0E2; color: var(--tt-teal-deep); }
.help-box, .existing-notice, .info {
  background: var(--tt-cream); border-radius: var(--tt-r);
  padding: 14px 16px; font-size: var(--tt-fs-sm); color: var(--tt-ink-soft);
}
.success-icon { font-size: 2rem; }
.password-req, .suggestions-list { font-size: var(--tt-fs-label); color: var(--tt-ink-muted); }

/* --- Signup progress -------------------------------------------------------- */
.progress-bar { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 24px; }
.progress-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--tt-border-strong);
  transition: background var(--tt-t) var(--tt-ease), transform var(--tt-t) var(--tt-ease);
}
.progress-dot.active { background: var(--tt-teal); transform: scale(1.3); }
.step-title { font-family: var(--tt-font-display); font-weight: 700; font-size: 1.25rem; }
.step-desc { color: var(--tt-ink-soft); font-size: var(--tt-fs-sm); }
.toggle-option {
  display: flex; align-items: center; gap: 10px; min-height: var(--tt-tap-min);
  padding: 14px 16px; border: 2px solid var(--tt-border); border-radius: var(--tt-r);
  background: var(--tt-bg); cursor: pointer;
}
.toggle-option.active, .toggle-option.selected {
  border-color: var(--tt-teal); background: var(--tt-teal-pale);
}

/* --- Gift cards ------------------------------------------------------------- */
.main-container { max-width: var(--tt-max-w); margin-inline: auto; padding: 40px var(--tt-gutter); }
.giftcards-page .hero, .promo-banner {
  background: linear-gradient(100deg, var(--tt-cream) 0%, var(--tt-gold-soft) 100%);
  border-radius: var(--tt-r-lg);
  padding: 20px var(--tt-card-pad);
  color: var(--tt-ink);
}
.promo-end { font-size: var(--tt-fs-label); color: var(--tt-gold-deep); font-weight: 600; }
.section-title { font-family: var(--tt-font-display); font-weight: 700; font-size: var(--tt-fs-h3); margin-bottom: 14px; }

.card, .balance-checker, .order-summary, .gift-card-preview, .preview-wrapper {
  background: var(--tt-surface);
  border: 0; border-radius: var(--tt-r-xl);
  box-shadow: var(--tt-shadow);
  padding: var(--tt-card-pad);
}

.amount-grid, .theme-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 12px; }
.amount-btn, .theme-btn {
  min-height: var(--tt-tap-min); padding: 14px 12px;
  font-family: var(--tt-font-body); font-weight: 700; font-size: 1rem;
  background: var(--tt-bg); color: var(--tt-ink);
  border: 2px solid var(--tt-border); border-radius: var(--tt-r);
  cursor: pointer;
  transition: border-color var(--tt-t) var(--tt-ease), background var(--tt-t) var(--tt-ease);
}
.amount-btn:hover, .theme-btn:hover { border-color: var(--tt-teal); }
.amount-btn.active, .amount-btn.selected,
.theme-btn.active, .theme-btn.selected {
  border-color: var(--tt-teal); background: var(--tt-teal-pale); color: var(--tt-teal-deep);
}
.bonus-tag, .bonus-amount {
  display: inline-block; font-size: var(--tt-fs-label); font-weight: 700;
  color: var(--tt-open); background: var(--tt-open-bg);
  border-radius: var(--tt-r-pill); padding: 2px 9px;
}
/* Promo callout inside the purchase card. Visibility is owned by the inline
 * style + giftcards.html's style.display toggle, so no display rule here.
 * Cream/gold ties it to .promo-banner and keeps the green .bonus-amount pill
 * legible against it. */
.bonus-display {
  margin: 16px 0; padding: 16px 18px;
  border-radius: var(--tt-r-lg);
  background: linear-gradient(100deg, var(--tt-cream) 0%, var(--tt-gold-soft) 100%);
  color: var(--tt-ink); text-align: center;
}
.bonus-display h4 {
  font-family: var(--tt-font-display); font-weight: 700;
  font-size: 1.125rem; margin: 0 0 6px;
}
.bonus-display p { margin: 0; font-size: var(--tt-fs-sm); }

.bonus-row, .order-row {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 10px 0; font-size: var(--tt-fs-sm); border-bottom: 1px solid var(--tt-border);
}
.order-row:last-child { border-bottom: 0; font-weight: 700; font-size: 1.0625rem; }
.order-row .value, .order-row .amount { color: var(--tt-teal-deep); font-weight: 700; white-space: nowrap; }
.original { text-decoration: line-through; color: var(--tt-ink-muted); }

.barcode-preview, .code-display {
  background: var(--tt-surface); border: 1px solid var(--tt-border);
  border-radius: var(--tt-r); padding: 16px; text-align: center;
}
.barcode-code, .code-display {
  font-family: ui-monospace, Consolas, monospace; letter-spacing: .08em; color: var(--tt-ink);
}
.balance-result { margin-top: 14px; }
.balance-result .value, .balance-result .amount {
  font-size: 1.75rem; font-weight: 700; color: var(--tt-teal-deep); letter-spacing: -.02em;
}
/* .balance-error picks up its colours from the .message.error rule above but is
 * not part of the .message base, so it had no box. Restate only the box here —
 * .message is shared by 20+ pages and must not be touched. border-color still
 * comes from that rule; visibility is owned by the inline style + JS toggle. */
.balance-error {
  margin-top: 14px; padding: 13px 16px;
  border-radius: var(--tt-r); font-size: var(--tt-fs-sm);
  border-width: 1px; border-style: solid;
}
.empty { color: var(--tt-ink-muted); font-size: var(--tt-fs-sm); }

/* --- Simple footer used by login/signup ------------------------------------- */
.footer-simple {
  margin-top: 32px; text-align: center;
  font-size: var(--tt-fs-label); color: var(--tt-ink-muted);
}
.footer-simple a, .footer-contact a, .footer-links a { color: var(--tt-teal-deep); }
.footer-simple a:hover { text-decoration: underline; text-underline-offset: 3px; }
.copyright { font-size: var(--tt-fs-label); color: var(--tt-ink-muted); text-align: center; }

/* Utility already relied on by the scripts. */
.hidden { display: none !important; }