/* Hairshalo — shared styling for the standalone account pages.
 *
 * The palette, type stack and logo lockup are lifted from index.html rather
 * than reinvented, so a customer moving between the storefront and these pages
 * does not cross a visual seam. Keep them in step if the storefront changes.
 */
:root{
  --ink:#2B1B14;
  --navy:#1A2338;          /* the brand's theme-color; used for depth here */
  --cream:#FAF5EE;
  --blush:#E7C7B4;
  --gold:#AD8752;
  --wine:#5C2431;
  --text:#3A2E27;
  --text-soft:#7A6A5F;
  --line:rgba(43,27,20,0.12);
  --danger:#B5443A;
  --ok:#3F7D58;
  --radius:22px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  color:var(--text);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  overflow-x:hidden;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important;}
}
h1,h2,h3,.serif{font-family:'Fraunces',Georgia,serif;font-weight:500;}
a{color:var(--wine);text-decoration:none;}
a:hover{text-decoration:underline;}
img{display:block;max-width:100%;}

/* Balldoug is the logotype face, used ONLY for the brand lockup. */
@font-face{
  font-family:'Balldoug';
  src:url('fonts/balldoug-regular.woff2') format('woff2'),
      url('fonts/balldoug-regular.otf') format('opentype');
  font-weight:400;font-style:normal;font-display:swap;
}

/* ---------- shell ---------- */
.auth-shell{min-height:100vh;display:flex;flex-direction:column;}
.auth-top{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 28px;border-bottom:1px solid var(--line);
  background:rgba(250,245,238,.9);backdrop-filter:blur(12px);
  position:sticky;top:0;z-index:20;
}
.logo{
  display:inline-flex;align-items:center;gap:9px;
  font-family:'Balldoug','Fraunces',serif;font-size:21px;letter-spacing:.05em;
  line-height:1;white-space:nowrap;color:var(--ink);
}
.logo:hover{text-decoration:none;}
.logo-mark{height:28px;width:auto;flex:none;}
.auth-top .back{font-size:13px;color:var(--text-soft);}

.auth-main{
  flex:1;display:flex;align-items:center;justify-content:center;
  padding:40px 20px 64px;
}
.auth-card{
  width:100%;max-width:460px;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius);
  padding:38px 34px;
  box-shadow:0 30px 60px -40px rgba(43,27,20,.45);
}
.auth-card.wide{max-width:920px;}
.auth-head{margin-bottom:26px;}
.auth-head .eyebrow{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);font-weight:600;
}
.auth-head h1{font-size:27px;margin:8px 0 8px;line-height:1.2;}
.auth-head p{font-size:14px;color:var(--text-soft);line-height:1.6;}

/* ---------- fields ---------- */
.field{margin-bottom:16px;}
.field label{
  display:block;font-size:12px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--text-soft);margin-bottom:7px;
}
.field .req{color:var(--wine);}
.control{position:relative;display:flex;}
.field input{
  width:100%;padding:13px 15px;font-family:inherit;font-size:15px;
  border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field input:focus{
  outline:none;border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(173,135,82,.18);
}
.field input[aria-invalid="true"]{border-color:var(--danger);}
.field input:disabled{background:#F6F2EC;color:var(--text-soft);}
.has-toggle input{padding-right:64px;}
.pw-toggle{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  border:none;background:none;cursor:pointer;font-size:11.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--wine);padding:8px;
  border-radius:8px;
}
.pw-toggle:hover{background:var(--cream);}
.pw-toggle:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.hint{font-size:12px;color:var(--text-soft);margin-top:6px;line-height:1.5;}
.err{font-size:12.5px;color:var(--danger);margin-top:6px;display:none;line-height:1.5;}
.err.show{display:block;}

/* Live password rules, mirrored from the backend policy. */
.pw-rules{list-style:none;margin:10px 0 0;font-size:12px;color:var(--text-soft);}
.pw-rules li{padding:2px 0 2px 20px;position:relative;line-height:1.5;}
.pw-rules li::before{
  content:'○';position:absolute;left:2px;color:var(--text-soft);font-size:11px;
}
.pw-rules li.ok{color:var(--ok);}
.pw-rules li.ok::before{content:'✓';color:var(--ok);}
.pw-rules li.bad{color:var(--danger);}
.pw-rules li.bad::before{content:'✕';color:var(--danger);}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 26px;border-radius:100px;font-size:14px;font-weight:600;
  font-family:inherit;letter-spacing:.02em;cursor:pointer;border:1.5px solid transparent;
  transition:transform .3s var(--ease), background .25s, color .25s, box-shadow .3s;
}
.btn-primary{background:var(--ink);color:var(--cream);width:100%;}
.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 14px 28px -14px rgba(43,27,20,.55);}
.btn-outline{border-color:var(--ink);color:var(--ink);background:transparent;}
.btn-outline:hover:not(:disabled){background:var(--ink);color:var(--cream);}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none;}
.btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
.spinner{
  width:15px;height:15px;border-radius:50%;flex:none;
  border:2px solid rgba(250,245,238,.35);border-top-color:var(--cream);
  animation:spin .7s linear infinite;display:none;
}
.btn.busy .spinner{display:block;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ---------- messages ---------- */
.notice{
  border-radius:12px;padding:13px 15px;font-size:13.5px;line-height:1.6;
  margin-bottom:18px;display:none;
}
.notice.show{display:block;}
.notice.error{background:rgba(181,68,58,.09);color:#7d2f28;border:1px solid rgba(181,68,58,.25);}
.notice.ok{background:rgba(63,125,88,.10);color:#2c5a3e;border:1px solid rgba(63,125,88,.25);}
.notice.info{background:rgba(173,135,82,.10);color:#6b4f2a;border:1px solid rgba(173,135,82,.25);}

.auth-alt{
  margin-top:22px;padding-top:20px;border-top:1px solid var(--line);
  font-size:13.5px;color:var(--text-soft);text-align:center;
}
.auth-links{display:flex;justify-content:space-between;gap:14px;font-size:13px;margin-top:-4px;}

/* ---------- account page ---------- */
.acct-grid{display:grid;grid-template-columns:230px 1fr;gap:26px;}
.acct-nav{display:flex;flex-direction:column;gap:4px;}
.acct-nav button{
  text-align:left;padding:11px 14px;border-radius:11px;border:none;background:none;
  font-family:inherit;font-size:14px;color:var(--text);cursor:pointer;
}
.acct-nav button:hover{background:var(--cream);}
.acct-nav button.active{background:var(--ink);color:var(--cream);font-weight:600;}
.acct-panel{min-height:220px;}
.acct-panel h2{font-size:19px;margin-bottom:14px;}
.card-row{
  border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:12px;
}
.muted{font-size:12.5px;color:var(--text-soft);line-height:1.55;}
.empty{
  text-align:center;padding:44px 20px;color:var(--text-soft);font-size:14px;
  border:1px dashed var(--line);border-radius:14px;
}
.badge{
  font-size:11px;text-transform:uppercase;letter-spacing:.05em;
  background:var(--blush);padding:3px 9px;border-radius:20px;color:var(--ink);
}
.verify-banner{
  background:var(--blush);border-radius:12px;padding:13px 15px;font-size:13.5px;
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  margin-bottom:18px;flex-wrap:wrap;
}

/* ---------- responsive: 375px and up, no horizontal overflow ---------- */
@media (max-width:860px){
  .acct-grid{grid-template-columns:1fr;}
  .acct-nav{flex-direction:row;overflow-x:auto;padding-bottom:6px;}
  .acct-nav button{white-space:nowrap;}
}
@media (max-width:560px){
  .auth-top{padding:15px 18px;}
  .auth-main{padding:26px 16px 44px;}
  .auth-card{padding:26px 20px;border-radius:18px;}
  .auth-head h1{font-size:23px;}
  .logo{font-size:16px;}
  .logo-mark{height:23px;}
  .auth-links{flex-direction:column;gap:8px;text-align:center;}
}
@media (max-width:374px){
  .logo{font-size:14px;}
  .auth-card{padding:22px 16px;}
}

/* Consent checkbox: a real, large target, unticked by default. */
.field-check .check{display:flex;gap:12px;align-items:flex-start;}
.field-check input[type="checkbox"]{width:20px;height:20px;margin-top:2px;flex:none;accent-color:var(--wine);}
.field-check label{text-transform:none;letter-spacing:0;font-size:14px;font-weight:400;color:var(--ink);line-height:1.55;margin:0;}
.field-check label a{color:var(--ink);text-decoration:underline;}
.field-check input:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ======================================================================
   THE CINEMATIC ACCOUNT PAGES (body.auth-cine)
   Sign in, create account, password reset and email confirmation, staged
   like the storefront: a campaign portrait on one side, the form on a noir
   set on the other: ivory type, champagne accents, Fraunces display with an
   italic champagne word, hairline fields and a champagne pill. The account
   dashboard does not carry the class and keeps the light layout above.
   ====================================================================== */
.auth-cine{
  --noir:#0D0907; --espresso:#17100C; --ivory:#F4ECE0;
  --ivory-soft:rgba(244,236,224,.68); --ivory-faint:rgba(244,236,224,.42);
  --champagne:#DCC193; --champagne-hi:#F3DDB0; --line-dark:rgba(244,236,224,.14);
  --e-film:cubic-bezier(.19,1,.22,1);
  background:var(--noir);color:var(--ivory);
}
.auth-cine .auth-shell{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);}

/* ---- the campaign side ---- */
.auth-visual{position:relative;overflow:hidden;background:var(--espresso);min-height:100vh;}
.auth-visual img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 28%;
  transform:scale(1.06);animation:authSettle 2.4s var(--e-film) both;}
.auth-visual::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(13,9,7,0) 55%,rgba(13,9,7,.92) 100%),
    linear-gradient(0deg,rgba(13,9,7,.88) 0%,rgba(13,9,7,.15) 45%,rgba(13,9,7,.35) 100%);}
.auth-quote{position:absolute;z-index:1;left:clamp(28px,5vw,72px);right:clamp(28px,5vw,72px);bottom:clamp(36px,7vh,80px);
  animation:authRise 1.4s var(--e-film) .25s both;}
.auth-quote .eyebrow{display:inline-flex;align-items:center;gap:14px;font-size:11px;font-weight:600;
  letter-spacing:.34em;text-transform:uppercase;color:var(--champagne);}
.auth-quote .eyebrow::before{content:"";width:34px;height:1px;background:currentColor;opacity:.7;}
.auth-quote p{font-family:"Fraunces",Georgia,serif;font-weight:400;color:var(--ivory);
  font-size:clamp(34px,3.6vw,58px);line-height:1.02;letter-spacing:-.02em;margin-top:16px;max-width:12ch;}
.auth-quote p em{font-style:italic;color:var(--champagne);}

/* ---- the form side ---- */
.auth-cine .auth-side{position:relative;display:flex;flex-direction:column;min-height:100vh;
  background:radial-gradient(90% 60% at 80% 0%,rgba(220,193,147,.07),rgba(13,9,7,0) 60%),var(--noir);}
.auth-cine .auth-top{position:static;background:none;backdrop-filter:none;border-bottom:1px solid var(--line-dark);
  padding:22px clamp(24px,4vw,56px);}
.auth-cine .logo{color:var(--ivory);}
.auth-cine .logo-mark{filter:brightness(0) invert(.93) sepia(.25);}
.auth-cine .auth-top .back{color:var(--ivory-soft);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;}
.auth-cine .auth-top .back:hover{color:var(--champagne);text-decoration:none;}
.auth-cine .auth-main{padding:clamp(32px,6vh,72px) clamp(24px,4vw,56px);align-items:center;}
.auth-cine .auth-card{max-width:420px;background:none;border:0;box-shadow:none;padding:0;border-radius:0;
  animation:authRise 1.1s var(--e-film) both;}
.auth-cine .auth-head{margin-bottom:30px;}
.auth-cine .auth-head .eyebrow{display:inline-flex;align-items:center;gap:14px;font-size:11px;letter-spacing:.34em;color:var(--champagne);}
.auth-cine .auth-head .eyebrow::before{content:"";width:34px;height:1px;background:currentColor;opacity:.7;}
.auth-cine .auth-head h1{font-family:"Fraunces",Georgia,serif;font-weight:400;color:var(--ivory);
  font-size:clamp(40px,4vw,56px);line-height:1;letter-spacing:-.025em;margin:18px 0 14px;}
.auth-cine .auth-head h1 em{font-style:italic;color:var(--champagne);}
.auth-cine .auth-head p{color:var(--ivory-soft);font-size:14.5px;line-height:1.7;}

.auth-cine .field{margin-bottom:22px;}
.auth-cine .field label{color:var(--ivory-faint);font-size:10.5px;letter-spacing:.24em;font-weight:600;margin-bottom:6px;}
.auth-cine .field .req{color:var(--champagne);}
.auth-cine .field input{background:transparent;border:0;border-bottom:1px solid rgba(244,236,224,.22);border-radius:0;
  color:var(--ivory);padding:12px 0 11px;font-size:15.5px;caret-color:var(--champagne);}
.auth-cine .field input::placeholder{color:rgba(244,236,224,.3);}
.auth-cine .field input:focus{border-bottom-color:var(--champagne);box-shadow:0 1px 0 0 var(--champagne);}
.auth-cine .field input[aria-invalid="true"]{border-bottom-color:#E08A7E;}
.auth-cine .field input:-webkit-autofill{-webkit-text-fill-color:var(--ivory);
  -webkit-box-shadow:0 0 0 40px var(--noir) inset;caret-color:var(--champagne);}
.auth-cine .has-toggle input{padding-right:60px;}
.auth-cine .pw-toggle{color:var(--champagne);right:0;font-size:10.5px;letter-spacing:.18em;}
.auth-cine .pw-toggle:hover{background:none;color:var(--champagne-hi);}
.auth-cine .hint{color:var(--ivory-faint);}
.auth-cine .err{color:#F0A195;}
.auth-cine .pw-rules{color:var(--ivory-faint);}
.auth-cine .pw-rules li::before{color:var(--ivory-faint);}
.auth-cine .pw-rules li.ok,.auth-cine .pw-rules li.ok::before{color:#9CCBAA;}
.auth-cine .pw-rules li.bad,.auth-cine .pw-rules li.bad::before{color:#F0A195;}
.auth-cine .field-check label{color:var(--ivory-soft);font-size:13.5px;letter-spacing:0;text-transform:none;
  font-weight:400;margin:0;}
.auth-cine .field-check label a{color:var(--ivory);}
/* A hairline box on the noir set that fills champagne when ticked. */
.auth-cine .field-check input[type="checkbox"]{-webkit-appearance:none;appearance:none;width:20px;height:20px;
  border:1px solid rgba(244,236,224,.45);border-radius:4px;background:transparent;cursor:pointer;
  transition:background .2s,border-color .2s;}
.auth-cine .field-check input[type="checkbox"]:hover{border-color:var(--champagne);}
.auth-cine .field-check input[type="checkbox"]:checked{background:var(--champagne) no-repeat center/14px
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230D0907' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E");
  border-color:var(--champagne);}
.auth-cine .field-check input[aria-invalid="true"]{border-color:#E08A7E;}

.auth-cine a{color:var(--champagne);}
.auth-cine .btn{border-radius:100px;font-size:12px;letter-spacing:.24em;text-transform:uppercase;padding:17px 30px;}
.auth-cine .btn-primary{background:var(--champagne);color:var(--noir);width:100%;}
.auth-cine .btn-primary:hover:not(:disabled){background:var(--champagne-hi);box-shadow:0 18px 40px -18px rgba(220,193,147,.55);}
.auth-cine .btn-outline{border-color:rgba(244,236,224,.35);color:var(--ivory);}
.auth-cine .btn-outline:hover:not(:disabled){background:var(--ivory);color:var(--noir);}
.auth-cine .spinner{border-color:rgba(13,9,7,.25);border-top-color:var(--noir);}

.auth-cine .notice.error{background:rgba(224,138,126,.1);color:#F4C2BA;border-color:rgba(224,138,126,.35);}
.auth-cine .notice.ok{background:rgba(156,203,170,.1);color:#CDE6D5;border-color:rgba(156,203,170,.35);}
.auth-cine .notice.info{background:rgba(220,193,147,.1);color:var(--champagne-hi);border-color:rgba(220,193,147,.3);}

.auth-cine .auth-links{justify-content:flex-end;margin-top:-10px;}
.auth-cine .auth-links a{font-size:12.5px;color:var(--ivory-soft);}
.auth-cine .auth-links a:hover{color:var(--champagne);}
.auth-cine .auth-alt{border-top:1px solid var(--line-dark);color:var(--ivory-soft);margin-top:30px;padding-top:24px;}

/* ---- Google, and the line between it and the email form ---- */
.google-block{margin-bottom:6px;}
.google-block[hidden]{display:none;}
.google-block [data-google-button]{min-height:44px;display:flex;justify-content:center;}
.google-note{font-size:11.5px;line-height:1.6;color:var(--ivory-faint,#7A6A5F);text-align:center;margin-top:10px;}
.google-note a{color:inherit;text-decoration:underline;}
.auth-or{display:flex;align-items:center;gap:16px;margin:24px 0 22px;font-size:10.5px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--ivory-faint,#7A6A5F);}
.auth-or::before,.auth-or::after{content:"";flex:1;height:1px;background:var(--line-dark,rgba(43,27,20,.12));}
.google-block[hidden] + .auth-or{display:none;}

@keyframes authRise{from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:none;}}
@keyframes authSettle{from{transform:scale(1.14);}to{transform:scale(1.06);}}

/* ---- tablet and phone: the portrait becomes a band above the form ---- */
@media (max-width:980px){
  .auth-cine .auth-shell{grid-template-columns:1fr;position:relative;}
  /* The header floats over the top of the portrait band, so it is placed
     against the whole page rather than the form column. */
  .auth-cine .auth-side{position:static;}
  .auth-visual{min-height:0;height:clamp(240px,42vh,420px);}
  .auth-visual::after{background:linear-gradient(0deg,rgba(13,9,7,1) 0%,rgba(13,9,7,.2) 55%,rgba(13,9,7,.45) 100%);}
  .auth-quote{bottom:22px;}
  .auth-quote p{font-size:clamp(28px,7vw,40px);}
  .auth-cine .auth-side{min-height:0;}
  .auth-cine .auth-top{position:absolute;top:0;left:0;right:0;z-index:5;border-bottom:0;
    background:linear-gradient(180deg,rgba(13,9,7,.7),rgba(13,9,7,0));}
  .auth-cine .auth-main{padding-top:28px;}
}
@media (max-width:560px){
  .auth-cine .auth-top{padding:16px 18px;}
  .auth-cine .auth-main{padding:24px 18px 48px;}
  .auth-cine .auth-head h1{font-size:38px;}
}
@media (prefers-reduced-motion: reduce){
  .auth-visual img,.auth-quote,.auth-cine .auth-card{animation:none;}
}