/*
 *===========================================================================
 * CLAUDE-CHANGE-ATTRIBUTION
 * Authored by Claude (Anthropic), with the Pratham Books team, 2026-07..2026-08,
 * as part of the Release 01 authentication redesign (new login / signup / OTP /
 * social login / password reset flow). This file is new Claude-generated code.
 *===========================================================================
 */
/* ==========================================================================
   PB eStore — authentication screens (Release 01)

   Design tokens from the supplied Style Sheet + client spec. Every colour and
   dimension used by the auth screens is declared here once; the macros in
   authMacros.ftl reference these and hardcode nothing.

   Breakpoint 767px is the theme's existing mobile breakpoint (mediaqueries.css),
   reused deliberately rather than introducing a parallel system.
   ========================================================================== */

:root {
  --pb-yellow:        #FFDB00;   /* primary */
  --pb-yellow-hover:  #F0CC00;
  --pb-blue-focus:    #5EA3E7;   /* focus / info */
  --pb-blue-strong:   #1076DC;
  --pb-red:           #D40D0D;   /* error */
  --pb-red-soft:      #E75E5E;
  --pb-text:          #080808;
  --pb-surface:       #F2F2F2;   /* light surface */
  --pb-disabled:      #DFDCD6;   /* disabled fill */
  --pb-white:         #FFFFFF;

  --pb-text-muted:    #5A5A5A;
  --pb-border:        #D9D9D9;
  --pb-radius:        4px;
  --pb-radius-pill:   28px;
  --pb-field-h:       52px;
  --pb-btn-h:         56px;
  --pb-touch-min:     44px;      /* WCAG target size */
  --pb-card-w:        508px;
}

/* ---------------------------------------------------------------- shell --- */
.pb-auth-wrap  { display:flex; justify-content:center; align-items:flex-start;
                 padding:60px 16px 120px; background:var(--pb-white); }
.pb-auth-card  { position:relative; width:100%; max-width:var(--pb-card-w);
                 background:var(--pb-white); border:1px solid #e8e8e8;
                 border-radius:var(--pb-radius); box-shadow:0 2px 10px rgba(0,0,0,.06);
                 padding:0 0 40px; }
.pb-auth-card:before { content:""; display:block; height:8px; background:var(--pb-yellow);
                       border-radius:var(--pb-radius) var(--pb-radius) 0 0; }
.pb-auth-inner { padding:24px 48px 0; }

.pb-auth-close, .pb-auth-back {
  position:absolute; top:14px; display:inline-flex; align-items:center;
  justify-content:center; min-width:var(--pb-touch-min); min-height:var(--pb-touch-min);
  font-size:22px; line-height:1; color:var(--pb-text); text-decoration:none;
  background:none; border:0; cursor:pointer; }
.pb-auth-close { right:12px; }
.pb-auth-back  { left:12px; }
.pb-auth-close:hover, .pb-auth-back:hover { color:#000; text-decoration:none; }

.pb-auth-logo  { display:block; margin:12px auto 20px; max-height:86px; }
.pb-auth-title { text-align:center; font-size:24px; font-weight:600;
                 color:var(--pb-text); margin:0 0 8px; }
.pb-auth-sub   { text-align:center; font-size:14px; color:var(--pb-text-muted);
                 margin:0 0 28px; line-height:1.5; }

/* circular icon above the heading */
.pb-auth-icon  { width:72px; height:72px; margin:8px auto 20px; border-radius:50%;
                 display:flex; align-items:center; justify-content:center;
                 background:var(--pb-surface); }
.pb-auth-icon svg { width:32px; height:32px; fill:var(--pb-blue-strong); }
.pb-auth-icon-phone  { background:#E8F5E9; } .pb-auth-icon-phone  svg { fill:#2E7D32; }
.pb-auth-icon-user   { background:#E8F5E9; } .pb-auth-icon-user   svg { fill:#2E7D32; }
.pb-auth-icon-shield { background:#E8F5E9; } .pb-auth-icon-shield svg { fill:#2E7D32; }
.pb-auth-icon-email  { background:#F3E5F5; } .pb-auth-icon-email  svg { fill:#7B1FA2; }
.pb-auth-icon-lock   { background:#FCE4EC; } .pb-auth-icon-lock   svg { fill:#C2185B; }

/* ---------------------------------------------------------------- fields -- */
.pb-auth-fieldwrap { margin:0 0 18px; }
.pb-auth-label { display:block; font-size:14px; color:#333; margin:0 0 8px; }
.pb-auth-field { width:100%; height:var(--pb-field-h); border:1px solid var(--pb-border);
                 border-radius:var(--pb-radius); padding:0 14px; font-size:15px;
                 color:var(--pb-text); background:var(--pb-white); }
.pb-auth-field::placeholder { color:#B5B5B5; }
.pb-auth-field:focus { outline:none; border-color:var(--pb-blue-focus);
                       box-shadow:0 0 0 2px rgba(94,163,231,.25); }
.pb-auth-field-error { border-color:var(--pb-red-soft); }
.pb-auth-hint  { margin:6px 0 0; font-size:12px; color:var(--pb-text-muted); }
.pb-auth-msg   { display:none; margin:6px 0 0; font-size:13px; color:var(--pb-red); }
.pb-auth-msg.is-shown { display:block; }
.pb-auth-banner { background:#FDECEC; border:1px solid var(--pb-red-soft);
                  color:var(--pb-red); border-radius:var(--pb-radius);
                  padding:12px 14px; font-size:14px; margin:0 0 18px; }

/* password show/hide */
.pb-auth-pw { position:relative; }
.pb-auth-pw .pb-auth-field { padding-right:52px; }
.pb-auth-pw-toggle { position:absolute; right:4px; top:50%; transform:translateY(-50%);
                     min-width:var(--pb-touch-min); min-height:var(--pb-touch-min);
                     display:flex; align-items:center; justify-content:center;
                     background:none; border:0; cursor:pointer; }
.pb-auth-pw-toggle svg { width:20px; height:20px; fill:#8A8A8A; }
.pb-auth-pw-toggle[aria-pressed="true"] svg { fill:var(--pb-blue-strong); }

/* phone: country selector + national number */
.pb-auth-phone { display:flex; border:1px solid var(--pb-border);
                 border-radius:var(--pb-radius); overflow:hidden;
                 height:var(--pb-field-h); background:var(--pb-white); }
.pb-auth-phone:focus-within { border-color:var(--pb-blue-focus);
                              box-shadow:0 0 0 2px rgba(94,163,231,.25); }
.pb-auth-cc  { border:0; border-right:1px solid var(--pb-border); background:var(--pb-white);
               padding:0 8px; font-size:14px; color:var(--pb-text); min-width:96px; }
.pb-auth-cc:focus { outline:none; }
.pb-auth-phone-num { flex:1 1 auto; border:0; padding:0 14px; font-size:15px;
                     color:var(--pb-text); }
.pb-auth-phone-num:focus { outline:none; }

/* ------------------------------------------------------------------- OTP -- */
/* Visible boxes drawn under ONE real input so paste, SMS autofill and screen
   readers all operate on a single value. */
.pb-auth-otp { position:relative; height:56px; margin:0 0 4px; }
.pb-auth-otp-real { position:absolute; inset:0; width:100%; height:100%;
                    opacity:0; z-index:2; border:0; font-size:16px;
                    letter-spacing:2.35em; padding-left:1em; }
.pb-auth-otp-boxes { position:absolute; inset:0; display:flex; gap:10px; }
.pb-auth-otp-box { flex:1 1 0; border:1px solid var(--pb-border);
                   border-radius:var(--pb-radius); display:flex; align-items:center;
                   justify-content:center; font-size:20px; color:var(--pb-text);
                   background:var(--pb-white); }
.pb-auth-otp-real:focus + .pb-auth-otp-boxes .pb-auth-otp-box.is-active {
  border-color:var(--pb-blue-focus); box-shadow:0 0 0 2px rgba(94,163,231,.25); }
.pb-auth-otp.is-error .pb-auth-otp-box { border-color:var(--pb-red-soft); }

.pb-auth-resend { text-align:center; margin:18px 0 0; }
.pb-auth-resend-text { font-size:14px; color:var(--pb-text-muted); margin:0 0 8px; }
.pb-auth-timer { font-weight:600; color:var(--pb-text); }
.pb-auth-link  { display:inline-block; background:none; border:0; padding:10px 8px;
                 min-height:var(--pb-touch-min); color:var(--pb-blue-strong);
                 font-size:14px; text-decoration:underline; cursor:pointer; }

/* ---------------------------------------------------------------- button -- */
.pb-auth-btn { width:100%; height:var(--pb-btn-h); margin:22px 0 0; border:0;
               border-radius:var(--pb-radius-pill); font-size:15px; font-weight:700;
               letter-spacing:2px; text-transform:uppercase;
               background:var(--pb-disabled); color:#6B6B6B; cursor:not-allowed;
               transition:background .15s, color .15s; }
.pb-auth-btn.is-enabled { background:var(--pb-yellow); color:var(--pb-text); cursor:pointer; }
.pb-auth-btn.is-enabled:hover { background:var(--pb-yellow-hover); }
.pb-auth-btn:focus-visible { outline:3px solid var(--pb-blue-strong); outline-offset:2px; }
/* disabled is not signalled by colour alone — the cursor and aria-disabled carry it too */

.pb-auth-terms { margin:20px 0 0; text-align:center; font-size:13px;
                 color:var(--pb-text-muted); line-height:1.5; }
.pb-auth-terms a { color:var(--pb-text-muted); text-decoration:underline; }

/* ------------------------------------------------- compact / mobile sheet -- */
@media (max-width: 767px) {
  .pb-auth-wrap  { padding:0; min-height:100vh; align-items:stretch; }
  .pb-auth-card  { max-width:none; min-height:100vh; border:0; border-radius:0;
                   box-shadow:none; padding-bottom:32px;
                   padding-bottom:calc(32px + env(safe-area-inset-bottom)); }
  .pb-auth-card:before { border-radius:0; }
  .pb-auth-inner { padding:20px 24px 0;
                   padding-top:calc(20px + env(safe-area-inset-top)); }
  .pb-auth-logo  { max-height:110px; margin:24px auto 26px; }
  .pb-auth-title { font-size:26px; }
  /* >=16px prevents iOS Safari zooming the viewport on focus */
  .pb-auth-field, .pb-auth-phone-num, .pb-auth-otp-real { font-size:16px; }
  .pb-auth-field, .pb-auth-phone { height:56px; }
  .pb-auth-btn   { height:60px; }
  .pb-auth-otp-box { font-size:22px; }
}

@media (prefers-reduced-motion: reduce) {
  .pb-auth-btn, .pb-auth-field, .pb-auth-phone { transition:none; }
}

/* ---- Screen 4: left-aligned verification heading block --------------------- */
.pb-auth-left        { margin:8px 0 24px; }
.pb-auth-title-left  { text-align:left; font-size:22px; margin:0 0 6px; }
.pb-auth-destline    { margin:0 0 12px; font-size:15px; color:var(--pb-text); }
.pb-auth-changelink  { margin-left:10px; font-size:14px; color:var(--pb-blue-strong);
                       text-decoration:none; }
.pb-auth-changelink:hover { text-decoration:underline; }
.pb-auth-sub-left    { text-align:left; margin:0; color:var(--pb-text-muted); }
.pb-auth-another     { text-align:center; margin:18px 0 0; font-size:14px;
                       color:var(--pb-text); }
@media (max-width: 767px) {
  .pb-auth-title-left { font-size:24px; }
}

/* ---- show-password checkbox and policy list (email flows) ------------------ */
.pb-auth-showpw       { display:flex; align-items:center; gap:8px; margin:2px 0 4px;
                        font-size:14px; color:var(--pb-text); }
.pb-auth-showpw-right { justify-content:flex-end; }
.pb-auth-check        { width:18px; height:18px; accent-color:#2E7D32; cursor:pointer; margin:0; flex:0 0 auto; }
.pb-auth-showpw label { cursor:pointer; margin:0; padding:0; line-height:1.2; }
.pb-auth-policy       { margin:16px 0 0; font-size:13px; color:var(--pb-text); line-height:1.7; }
.pb-auth-policy strong{ display:block; margin-bottom:2px; }
.pb-auth-policy span  { display:block; color:var(--pb-text-muted); }

/* ---- client tweaks 2026-08-18 ------------------------------------------------ */
/* space between the site menu bar and the auth card (desktop) */
.pb-login-wrap, .pb-auth-wrap { padding-top:56px; }
@media (max-width: 767px) {
  .pb-login-wrap, .pb-auth-wrap { padding-top:24px; }
  .pb-login-card, .pb-auth-card  { margin-top:12px; }
}
/* error message with the (!) marker from the design */
.pb-field-msg, .pb-auth-msg { display:none; align-items:center; gap:8px; }
.pb-field-msg.is-shown, .pb-auth-msg.is-shown { display:flex; }
.pb-field-msg-icon { display:inline-flex; align-items:center; justify-content:center;
                     width:18px; height:18px; border:2px solid var(--pb-red); border-radius:50%;
                     color:var(--pb-red); font-size:12px; font-weight:700; line-height:1; }

/* ---- client tweaks 2026-08-18 (b): uniform start position for every auth page ---- */
.pb-login-inner, .pb-auth-inner { padding-top:28px; }
.pb-login-title, .pb-auth-title { margin-top:0; }

/* ---- client tweak 2026-08-19: clear space between the site header and every auth
   card (login landing + all checkout/auth steps). Uses margin on the wrapper, not
   padding inside the card, so the yellow top rule and the close button are fully
   visible below the menu bar. Applied after the earlier rules so it wins. ---- */
.pb-login-wrap, .pb-auth-wrap { margin-top:48px; padding-top:0; }
.pb-login-card, .pb-auth-card { margin-top:0; }
@media (max-width: 767px) {
  .pb-login-wrap, .pb-auth-wrap { margin-top:20px; }
}

/* ---- 2026-08-20: the desktop header is position:absolute, 100px tall, z-index 9999.
   It occupies no flow space, so content without its own offset renders underneath it.
   The rest of the site uses .add-top { padding-top:80px } for this; the auth pages
   need the same clearance plus a visible gap. 100px header + 40px breathing room.
   Mobile uses .fixed-top (different navbar) so it gets its own value. ---- */
.pb-login-wrap, .pb-auth-wrap { margin-top:0; padding-top:140px; }
@media (max-width: 767px) {
  .pb-login-wrap, .pb-auth-wrap { padding-top:84px; min-height:auto; }
}

/* ---- auth modal (2026-08-20) -------------------------------------------------- */
.pb-auth-modal .pb-auth-dialog { max-width:508px; }
.pb-auth-modal .pb-auth-modal-content { border:0; border-radius:4px; background:transparent; box-shadow:none; }
.pb-auth-modal .pb-auth-modal-body { padding:0; }
/* inside the modal the card IS the dialog: no outer offset, no extra shadow */
.pb-auth-modal .pb-login-wrap, .pb-auth-modal .pb-auth-wrap { padding:0 !important; margin:0 !important; min-height:0; }
.pb-auth-modal .pb-login-card, .pb-auth-modal .pb-auth-card { margin:0; box-shadow:0 8px 30px rgba(0,0,0,.18); }
/* no logo on any popup page */
.pb-auth-modal .pb-login-logo, .pb-auth-modal .pb-auth-logo { display:none !important; }
.pb-auth-loading { padding:60px 0; text-align:center; color:#666; }
@media (max-width: 767px) {
  .pb-auth-modal .pb-auth-dialog { margin:0; max-width:none; min-height:100vh; }
  .pb-auth-modal .pb-login-card, .pb-auth-modal .pb-auth-card { min-height:100vh; border-radius:0; box-shadow:none; }
}

/* ---- login landing (moved from login.ftl inline <style> so the modal gets it too) ---- */
/* ---- login landing: card shell ------------------------------------------------ */
.pb-login-wrap { display:flex; justify-content:center; align-items:flex-start;
                 padding:60px 16px 120px; background:#fff; }
.pb-login-card { position:relative; width:100%; max-width:508px; background:#fff;
                 border:1px solid #e8e8e8; border-radius:4px;
                 box-shadow:0 2px 10px rgba(0,0,0,.06); padding:0 0 40px; }
/* yellow rule across the top of the card, per both mockups */
.pb-login-card:before { content:""; display:block; height:8px; background:#FFD500;
                        border-radius:4px 4px 0 0; }
.pb-login-close { position:absolute; top:18px; right:18px; font-size:22px; line-height:1;
                  color:#222; text-decoration:none; background:none; border:0;
                  cursor:pointer; padding:4px 8px; }
.pb-login-close:hover { color:#000; text-decoration:none; }
.pb-login-inner { padding:24px 48px 0; }
.pb-login-logo { display:block; margin:12px auto 24px; max-height:86px; }
.pb-login-title { text-align:center; font-size:24px; font-weight:600; color:#111;
                  margin:0 0 34px; }

/* ---- social provider buttons -------------------------------------------------- */
.pb-login-label { font-size:14px; color:#333; margin:0 0 10px; }
.pb-social-row { display:flex; gap:16px; margin:0 0 26px; }
.pb-social-btn { flex:1 1 0; display:flex; align-items:center; justify-content:center;
                 gap:12px; height:48px; background:#fff; border:1px solid #d9d9d9;
                 border-radius:4px; font-size:15px; color:#222; text-decoration:none;
                 transition:border-color .15s, box-shadow .15s; }
.pb-social-btn:hover { border-color:#b3b3b3; box-shadow:0 1px 4px rgba(0,0,0,.08);
                       text-decoration:none; color:#222; }
.pb-social-btn:focus { outline:none; border-color:#1a73e8; }
.pb-social-btn img, .pb-social-btn svg { width:20px; height:20px; }

/* ---- OR divider --------------------------------------------------------------- */
.pb-or { display:flex; align-items:center; gap:16px; margin:0 0 22px; }
.pb-or:before, .pb-or:after { content:""; flex:1 1 auto; height:1px; background:#d9d9d9; }
.pb-or span { font-size:13px; color:#9b9b9b; letter-spacing:.5px; }

/* ---- identifier field --------------------------------------------------------- */
.pb-field { width:100%; height:52px; border:1px solid #d9d9d9; border-radius:4px;
            padding:0 14px; font-size:15px; color:#111; background:#fff; }
.pb-field::placeholder { color:#b5b5b5; }
.pb-field:focus { outline:none; border-color:#1a73e8; }          /* focused, per style sheet */
.pb-field.pb-field-error { border-color:#E05C5C; }               /* error, per style sheet  */
.pb-field-msg { display:none; margin:8px 0 0; font-size:13px; color:#D01B1B; }
.pb-field-msg.is-shown { display:block; }

/* ---- CONTINUE: pill, grey when disabled, yellow when enabled ------------------- */
.pb-continue { width:100%; height:56px; margin:26px 0 0; border:0; border-radius:28px;
               font-size:15px; font-weight:700; letter-spacing:2px; text-transform:uppercase;
               background:#DCDCDA; color:#6b6b6b; cursor:not-allowed;
               transition:background .15s, color .15s; }
.pb-continue.is-enabled { background:#FFD500; color:#111; cursor:pointer; }
.pb-continue.is-enabled:hover { background:#F0C800; }

.pb-terms { margin:22px 0 0; text-align:center; font-size:13px; color:#555; line-height:1.5; }
.pb-terms a { color:#555; text-decoration:underline; }

/* ---- mobile: full-screen sheet, matching the Android/iOS compact mockup --------
   768px is the theme's existing breakpoint (mediaqueries.css), reused deliberately
   rather than introducing a new one. ------------------------------------------- */
@media (max-width: 767px) {
  .pb-login-wrap  { padding:0; min-height:100vh; align-items:stretch; }
  .pb-login-card  { max-width:none; min-height:100vh; border:0; border-radius:0;
                    box-shadow:none; padding-bottom:32px; }
  .pb-login-card:before { border-radius:0; }
  .pb-login-inner { padding:20px 24px 0; }
  .pb-login-logo  { max-height:110px; margin:24px auto 30px; }
  .pb-login-title { font-size:28px; margin:0 0 44px; }
  .pb-social-row  { gap:12px; margin-bottom:30px; }
  .pb-social-btn  { height:52px; font-size:16px; }
  .pb-field       { height:56px; font-size:16px; }   /* >=16px avoids iOS zoom-on-focus */
  .pb-continue    { height:60px; }
}

/* ---- 2026-08-20: header "SIGN UP / LOGIN" link. The legacy .login-txt/.header-login
   styling was sized for the single word "LOGIN" (77px) with overflow:hidden +
   text-overflow:ellipsis, so the longer combined label was truncated. Let it take the
   width it needs on one line; the parent column has ~210px available. ---- */
.header-login, .header-login a.pb-open-login, a.login-txt.pb-open-login {
  width:auto !important; max-width:none !important; min-width:0;
  overflow:visible !important; text-overflow:clip !important;
  white-space:nowrap !important; display:inline-block;
}

/* ---- 2026-08-20: every auth popup sits below the header. The dialog is no longer
   vertically centred (on short viewports that pushed the card up under the 100px
   absolute header). Fixed 140px from the top on desktop; the modal itself scrolls if
   the card is taller than the remaining viewport. ---- */
.pb-auth-modal .pb-auth-dialog { margin:140px auto 40px; max-width:508px; }
.pb-auth-modal.modal { overflow-y:auto; }
@media (max-width: 767px) {
  .pb-auth-modal .pb-auth-dialog { margin:84px 0 0; }
}

/* Bootstrap 4 .modal.fade applies transform:translate(0,-25%) to the dialog for its
   slide-in; here it was measured as a persistent -148px offset that dragged the card
   under the header. Pin the dialog with no transform in every state. */
.pb-auth-modal .pb-auth-dialog,
.modal.fade .pb-auth-dialog,
.modal.show .pb-auth-dialog { transform:none !important; transition:none !important; }

/* ---- 2026-08-21: re-assert 140px header clearance. The base .pb-login-wrap { padding:60px }
   rule is declared LATER in this file than the earlier 140px tweak, so it was
   winning and the card sat only 60px below the 100px absolute header. Re-assert
   padding-top last (full-page auth only). The modal keeps its own dialog offset
   via the higher-specificity .pb-auth-modal .pb-auth-wrap rule above. ---- */
.pb-login-wrap, .pb-auth-wrap { padding-top:140px; }
@media (max-width: 767px) {
  .pb-login-wrap, .pb-auth-wrap { padding-top:84px; }
}

/* CLAUDE 2026-08: centre the login modal card horizontally at every width. The 508px
   .pb-auth-dialog had 0 side margins, so once the viewport exceeds 508px (tablets /
   large phones) the card was left-aligned with all the gap on the right. */
.pb-auth-modal .pb-auth-dialog { margin-left: auto !important; margin-right: auto !important; }

/* CLAUDE 2026-08: size login card to content on mobile (remove the min-height:100vh that
   left a tall white gap below the form before the footer). */
@media (max-width: 767px) {
  .pb-login-wrap, .pb-auth-wrap,
  .pb-login-card, .pb-auth-card { min-height: auto !important; }
}

/* CLAUDE 2026-08: login modal typography per client mockups (font weights/sizes, icon sizes) */
.pb-auth-title, .pb-login-title { font-weight: 400 !important; margin-bottom: 15px; }
.pb-auth-label { font-size: 14px !important; font-weight: 300 !important; }
p.pb-login-label { font-size: 16px !important; font-weight: 300 !important; }
label.pb-login-label, .pb-auth-label { font-size: 14px !important; font-weight: 300 !important; }
.pb-social-btn { font-size: 16px !important; }
.pb-auth-btn { color: #000 !important; }
.pb-auth-terms, .pb-terms { font-size: 14px !important; font-weight: 300 !important; }
.pb-auth-another { font-weight: 300 !important; }
.pb-auth-destline { font-weight: 400 !important; }
.pb-auth-sub { font-weight: 300 !important; }
.pb-auth-close, .pb-auth-back, .pb-login-close { font-size: 30px !important; }
/* password show/hide: eye-open when visible, eye-slash when hidden */
.pb-auth-pw-toggle .pb-eye-open { display: none; }
.pb-auth-pw-toggle .pb-eye-off  { display: inline-block; }
.pb-auth-pw-toggle[aria-pressed="true"] .pb-eye-open { display: inline-block; }
.pb-auth-pw-toggle[aria-pressed="true"] .pb-eye-off  { display: none; }