/* 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;}
@media (max-width:480px){ .auth-wrap{padding-left:16px; padding-right:16px;} .auth-card{padding:32px 24px;} }
.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;}

.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);}

/* Account page key/value rows (used on /account) */
dl { margin: 4px 0 14px; }
.account-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--border); }
.account-row:last-child { border-bottom: none; }
.account-row dt { font-size: 12.5px; color: var(--text-muted); font-weight: 600; margin: 0; }
.account-row dd { font-size: 13.5px; font-weight: 600; margin: 0; text-align: right; word-break: break-all; }
.muted-note { color: var(--text-muted); font-size: 12.5px; line-height: 1.5; margin: 4px 0 16px; }

/* Wide auth-card variant, used by longer forms like the business profile */
.auth-card--wide { max-width: 520px; }
.field-row { display: flex; gap: 12px; }
.field-row .field { flex: 1; min-width: 0; }
.field-hint { font-size: 11.5px; color: var(--text-muted); margin: 5px 0 0; line-height: 1.4; }

/* Logo photo upload — click/tap tile with preview, hover-to-change overlay
   and an upload spinner, replacing a plain <input type=file>. Ported from
   Site 2's dashboard/profile.html + css/dashboard.css pattern (see
   business/index.html's inline script for the click/keyboard/upload wiring
   this pairs with). */
.preview-thumb { width: 100%; height: 100%; border-radius: inherit; object-fit: contain; display: block; }
.photo-upload-tile {
  position: relative; margin-top: 8px; border-radius: 14px; border: 1.5px dashed var(--border);
  background: var(--bg); cursor: pointer; overflow: hidden; display: flex; align-items: center;
  justify-content: center; transition: border-color .15s ease;
}
.photo-upload-tile:hover, .photo-upload-tile:focus-visible { border-color: var(--orange-500); outline: none; }
.photo-upload-tile.has-image { border-style: solid; background: var(--surface); }
.logo-upload-tile { width: 96px; height: 96px; border-radius: 16px; padding: 8px; }
.photo-upload-placeholder { font-size: 12px; font-weight: 600; color: var(--text-muted); text-align: center; padding: 6px; }
.photo-upload-tile.has-image .photo-upload-placeholder { display: none; }
.photo-upload-overlay {
  position: absolute; top:0; right:0; bottom:0; left:0; display: flex; align-items: center; justify-content: center;
  background: rgba(15,27,46,.55); color: #fff; font-size: 12px; font-weight: 700; opacity: 0;
  transition: opacity .15s ease; pointer-events: none;
}
.photo-upload-tile.has-image:hover .photo-upload-overlay,
.photo-upload-tile.has-image:focus-visible .photo-upload-overlay { opacity: 1; }
.photo-upload-spinner { position: absolute; top:0; right:0; bottom:0; left:0; display: flex; align-items: center; justify-content: center; background: rgba(15,27,46,.55); }
.photo-upload-spinner .spinner { border-color: rgba(255,255,255,.4); border-top-color: #fff; }