/* AdNeed platform stylesheet — tokens and patterns per adneed-style-guide.html.
   Applies ONLY to AdNeed's own surfaces (dashboard, admin, marketing, auth) —
   never forced onto individual business portfolios. */
:root{
  --navy-900:#0F1B2E; --navy-700:#1B2C45;
  --orange-500:#E8491D; --amber-400:#F5A623; --blue-500:#1CA8DD; --blue-700:#1478A8;
  --bg:#FAFAFA; --surface:#FFFFFF; --border:#E7E9EE;
  --text:#0F1B2E; --text-muted:#6B7280;
  --success:#1F9D55; --warning:#E8A317; --error:#D64545;
  --grad: linear-gradient(135deg, var(--amber-400), var(--orange-500));
}
*{box-sizing:border-box;}
body{margin:0; background:var(--bg); color:var(--text); font-family:'AdNeedRupee','Manrope',sans-serif;}
h1,h2,h3{font-family:'AdNeedRupee','Sora',sans-serif; margin:0;}

.auth-wrap{min-height:100vh; min-height:100dvh; display:flex; align-items:center; justify-content:center;
  padding:24px; padding-top:max(24px, env(safe-area-inset-top)); padding-bottom:max(24px, env(safe-area-inset-bottom));}
.auth-card{background:var(--surface); border:1px solid var(--border); border-radius:20px;
  box-shadow:0 1px 2px rgba(15,27,46,.06), 0 8px 24px rgba(15,27,46,.04);
  padding:36px 32px; width:100%; max-width:400px;}
.auth-logo{display:block; margin:0 auto 20px; height:56px; border-radius:50%; object-fit:cover; aspect-ratio:1/1;}
.auth-card h1{font-size:22px; font-weight:700; text-align:center; margin-bottom:6px;}
.auth-card p.sub{color:var(--text-muted); font-size:14px; text-align:center; margin:0 0 24px;}

label{display:block; font-size:12px; font-weight:600; color:var(--text-muted);
  text-transform:uppercase; letter-spacing:.5px; margin-bottom:6px;}
.field{margin-bottom:16px;}
.label-optional{text-transform:none; font-weight:400; letter-spacing:0; color:var(--text-muted); opacity:.8;}
.input-row{position:relative;}
input[type=text], input[type=email], input[type=password], input[type=tel], input[type=number],
input[type=date], input[type=month], input[type=search], input[type=url], textarea{
  width:100%; padding:12px 14px; border-radius:12px; border:1.5px solid var(--border);
  font-family:'AdNeedRupee','Manrope',sans-serif; font-size:14px; background:var(--surface); color:var(--text);
  transition:border-color .15s ease, box-shadow .15s ease;
}
input[type=number]:disabled, input[type=date]:disabled{background:var(--bg); color:var(--text-muted); cursor:not-allowed;}
input:focus, textarea:focus{outline:none; border-color:var(--orange-500); box-shadow:0 0 0 3px rgba(232,73,29,.10);}
/* Date fields render a native calendar-icon button inside the input on most
   browsers — recolor it so it doesn't look like a stray grey square next to
   our orange focus ring. */
input[type=date]::-webkit-calendar-picker-indicator{
  cursor:pointer; opacity:.6; transition:opacity .15s ease;
}
input[type=date]:hover::-webkit-calendar-picker-indicator,
input[type=date]:focus::-webkit-calendar-picker-indicator{opacity:1;}
/* Plain file inputs (e.g. admin's Poster Store / Deliver Design uploaders)
   render as an unstyled native control by default — wrap them in the same
   bordered pill as text inputs and restyle the browser's own "Choose File"
   button to match our .btn family, instead of leaving it as bare OS chrome. */
input[type=file]{
  display:block; width:100%; padding:9px 14px; border-radius:12px; border:1.5px solid var(--border);
  font-family:'AdNeedRupee','Manrope',sans-serif; font-size:13.5px; background:var(--surface); color:var(--text-muted);
}
input[type=file]:focus{outline:none; border-color:var(--orange-500); box-shadow:0 0 0 3px rgba(232,73,29,.10);}
input[type=file]::file-selector-button{
  font-family:'AdNeedRupee','Sora',sans-serif; font-weight:600; font-size:13px; color:var(--text);
  background:var(--bg); border:1px solid var(--border); border-radius:8px;
  padding:8px 14px; margin-right:12px; cursor:pointer; transition:border-color .15s ease, color .15s ease;
}
input[type=file]::file-selector-button:hover{border-color:var(--orange-500); color:var(--orange-500);}
select{
  width:100%; padding:12px 14px; border-radius:12px; border:1.5px solid var(--border);
  font-family:'AdNeedRupee','Manrope',sans-serif; font-size:14px; background:var(--surface); color:var(--text);
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236B7280'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:16px;
  padding-right:36px; transition:border-color .15s ease, box-shadow .15s ease;
}
select:focus{outline:none; border-color:var(--orange-500); box-shadow:0 0 0 3px rgba(232,73,29,.10);}
.input-icon{position:absolute; left:12px; top:50%; transform:translateY(-50%); width:18px; height:18px;}
.input-with-icon{padding-left:40px !important;}
.input-prefix{position:absolute; left:38px; top:50%; transform:translateY(-50%); color:var(--text-muted, #666); font-weight:600; pointer-events:none;}
.input-with-prefix{padding-left:70px !important;}

.btn{font-family:'AdNeedRupee','Sora',sans-serif; font-weight:600; font-size:14px; padding:13px 24px;
  border-radius:12px; border:none; cursor:pointer; width:100%; margin-bottom:10px;
  transition:transform .15s ease, box-shadow .15s ease; display:flex; align-items:center;
  justify-content:center; gap:10px;}
.btn:hover{transform:translateY(-1px);}
.btn:disabled{opacity:.6; cursor:not-allowed; transform:none;}
.btn-primary{background:var(--grad); color:#fff; box-shadow:0 6px 18px rgba(232,73,29,.25);}
.btn-secondary{background:transparent; color:var(--navy-900); border:1.5px solid var(--navy-900);}
.btn-ghost{background:var(--surface); color:var(--text-muted); border:1px solid var(--border); box-shadow:none;}
.btn-ghost:hover{transform:translateY(-1px); border-color:var(--navy-900); color:var(--navy-900);}
.btn-google{background:var(--surface); color:var(--text); border:1.5px solid var(--border);}
.btn-blue{background:var(--blue-500); color:#fff; box-shadow:0 6px 18px rgba(28,168,221,.25);}
.btn-blue img, .btn-blue svg{width:16px; height:16px;}

.divider{display:flex; align-items:center; gap:12px; margin:18px 0; color:var(--text-muted); font-size:12px;}
.divider::before, .divider::after{content:''; flex:1; height:1px; background:var(--border);}

.auth-footer{text-align:center; font-size:13px; color:var(--text-muted); margin-top:18px;}
.auth-footer a{color:var(--orange-500); font-weight:600; text-decoration:none;}

.alert{border-radius:12px; padding:12px 14px; font-size:13px; margin-bottom:16px;}
.alert-error{background:#FDECEC; color:var(--error); border:1px solid #F5C6C6;}
.alert-success{background:#E9F7EF; color:var(--success); border:1px solid #C3E9D0;}
.alert-info{background:#EAF6FB; color:var(--blue-700); border:1px solid #C7E8F3;}
/* Inline CTA inside an alert box (e.g. PLAN_NOT_CONFIGURED's "Back to
   Dashboard") — .btn is full-width/stacked by default, which is meant
   for form actions, not a compact link sitting under a couple lines of
   alert text, so this scales it down to fit inline instead. */
.alert-action-btn{width:auto; display:inline-flex; margin:10px 0 0; padding:8px 16px; font-size:13px; text-decoration:none;}

.spinner{width:16px; height:16px; border:2px solid rgba(255,255,255,.4); border-top-color:#fff;
  border-radius:50%; animation:spin .7s linear infinite;}
.spinner-dark{width:16px; height:16px; border:2px solid rgba(15,27,46,.15); border-top-color:var(--navy-900);
  border-radius:50%; animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

.hidden{display:none !important;}

/* Post-signup success panel (non-blocking access — see auth.js / signup.html).
   Shown immediately after account creation; the owner is already signed in
   by this point, this is just a friendly landing + optional email-confirm nudge. */
.success-panel{text-align:center;}
.success-check{width:56px; height:56px; border-radius:50%; background:var(--success); color:#fff;
  font-size:26px; font-weight:700; line-height:56px; margin:0 auto 16px;}
.mail-btn-row{display:flex; gap:10px; margin-bottom:6px;}
.btn-mail{flex:1; margin-bottom:0; font-size:13px; padding:11px 14px; text-decoration:none; box-sizing:border-box;}

/* Admin "log in as business" banner — see dashboard-common.js's
   renderImpersonationBanner(). Only ever shown in the session-scoped tab
   an admin opened via /admin/impersonate.html, never for a normal owner. */
.adneed-impersonation-bar{
  position:sticky; top:0; z-index:9999; display:flex; align-items:center;
  justify-content:center; gap:14px; width:100%; padding:10px 16px;
  background:#0F1B2E; color:#fff; font-size:13px; font-weight:600;
  text-align:center; box-sizing:border-box;
}
.adneed-impersonation-bar strong{color:#F5A623;}
.adneed-impersonation-bar button{
  background:rgba(255,255,255,.15); color:#fff; border:1px solid rgba(255,255,255,.35);
  border-radius:8px; padding:4px 12px; font-size:12px; font-weight:700; cursor:pointer;
}
.adneed-impersonation-bar button:hover{background:rgba(255,255,255,.28);}