/* Shared styles for complaint.website auth pages (register / verify / login / dashboard) */
:root{
  --navy:#163644;
  --navy-dark:#0d2430;
  --navy-soft:#2a5a6e;
  --saffron:#ff7a33;
  --saffron-dark:#e85a18;
  --gold:#ffc56d;
  --green:#25D366;
  --green-dark:#12925a;
  --ink:#1f2f38;
  --muted:#5d6f7a;
  --bg:#fbf5ec;
  --card:#ffffff;
  --line:#ede0d0;
  --radius:22px;
  --shadow:0 12px 40px rgba(40,28,16,.1);
  --font-head:'Poppins','Noto Sans Devanagari',sans-serif;
  --font-body:'Noto Sans','Noto Sans Devanagari',-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:var(--font-body);color:var(--ink);line-height:1.6;
  min-height:100vh;display:flex;flex-direction:column;
  background:
    radial-gradient(900px 480px at 90% -12%,rgba(255,122,51,.18),transparent 58%),
    radial-gradient(720px 420px at -10% 110%,rgba(37,211,102,.11),transparent 58%),
    radial-gradient(500px 300px at 50% 50%,rgba(255,197,109,.06),transparent 60%),
    var(--bg);
}
h1,h2,h3,h4{font-family:var(--font-head);line-height:1.25}
a{color:var(--saffron-dark)}
::selection{background:rgba(255,122,51,.2);color:var(--navy-dark)}

/* language system */
body:not(.hi) .l-hi{display:none!important}
body.hi .l-en{display:none!important}
/* Author styles beat the UA rule for [hidden], so any element given a display
   value would otherwise ignore its own hidden attribute. */
[hidden]{display:none!important}

.tricolor{height:3px;background:linear-gradient(90deg,var(--saffron) 0 33.3%,#fff 33.3% 66.6%,#138808 66.6% 100%)}

/* header */
.auth-header{background:rgba(255,255,255,.82);backdrop-filter:blur(14px) saturate(150%);-webkit-backdrop-filter:blur(14px) saturate(150%);border-bottom:1px solid rgba(237,224,208,.9);position:sticky;top:0;z-index:20}
.auth-header .bar{max-width:1000px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px}
/* The wordmark yields first when the bar runs out of room, so the language
   toggle can never be pushed off a narrow screen. */
.logo{display:flex;align-items:center;gap:11px;text-decoration:none;min-width:0}
.logo-text{min-width:0;overflow:hidden}
.logo-text b{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.lang-toggle{flex:0 0 auto}
.logo-badge{width:42px;height:42px;border-radius:13px;background:linear-gradient(145deg,var(--saffron),var(--saffron-dark));display:flex;align-items:center;justify-content:center;position:relative;box-shadow:0 6px 16px rgba(236,95,34,.4),inset 0 1px 0 rgba(255,255,255,.5)}
.logo-badge svg{width:25px;height:25px;position:relative;z-index:1}
.logo-badge::after{content:"";position:absolute;inset:0;border-radius:13px;background:linear-gradient(155deg,rgba(255,255,255,.5),transparent 48%)}
.logo-text b{display:block;color:var(--navy);font-size:18.5px;font-family:var(--font-head);font-weight:800;letter-spacing:-.4px}
.logo-text b em{font-style:normal;color:var(--saffron-dark)}
.logo-text span{font-size:10px;color:var(--muted);font-weight:700;letter-spacing:.5px;text-transform:uppercase}

.lang-toggle{display:flex;background:#f1ebe2;border:1px solid var(--line);border-radius:100px;padding:3px}
.lang-toggle button{border:0;background:transparent;padding:6px 13px;border-radius:100px;font-weight:700;font-size:13px;cursor:pointer;color:var(--muted);font-family:var(--font-body);transition:all .18s ease}
.lang-toggle button.on{background:var(--navy);color:#fff;box-shadow:0 2px 8px rgba(28,61,77,.3)}

/* layout */
.auth-wrap{flex:1;width:100%;max-width:520px;margin:0 auto;padding:44px 20px 64px}
.auth-wrap.wide{max-width:760px}
.auth-card{
  background:rgba(255,255,255,.92);
  border:1px solid rgba(237,224,208,.95);
  border-radius:var(--radius);
  box-shadow:var(--shadow),0 1px 0 rgba(255,255,255,.8) inset;
  padding:36px 32px;
  backdrop-filter:blur(8px);
  position:relative;
  overflow:hidden;
}
.auth-card::before{
  content:"";
  position:absolute;left:0;top:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--saffron),var(--gold),var(--saffron));
}
.auth-head{text-align:center;margin-bottom:26px}
.auth-head h1{font-size:27px;color:var(--navy);letter-spacing:-.5px;margin-bottom:8px;font-weight:800}
.auth-head p{color:var(--muted);font-size:14.5px;line-height:1.55}
.auth-head .email-chip{display:inline-block;margin-top:10px;font-weight:700;color:var(--navy);background:linear-gradient(135deg,#fff9f0,#fff4e8);border:1px solid var(--line);border-radius:100px;padding:6px 15px;font-size:14px}

/* forms */
.field{margin-bottom:16px}
.field label{display:block;font-weight:700;font-size:13.5px;color:var(--navy);margin-bottom:6px}
.field input{
  width:100%;padding:13px 15px;border:1.6px solid var(--line);border-radius:14px;
  font-size:15px;font-family:var(--font-body);color:var(--ink);background:#fffdfb;
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;
}
.field input:hover{border-color:#e0c9b0}
.field input:focus{outline:0;border-color:var(--saffron);box-shadow:0 0 0 4px rgba(255,122,51,.14);background:#fff}
.field .hint{font-size:12px;color:var(--muted);margin-top:5px}
.pw-wrap{position:relative}
.pw-wrap input{padding-right:64px}
.pw-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:transparent;border:0;color:var(--saffron-dark);font-weight:700;font-size:12.5px;cursor:pointer;padding:6px 8px}

/* plan chooser */
.plan-label{font-weight:700;font-size:13.5px;color:var(--navy);margin-bottom:9px}
.plans{display:grid;gap:10px;margin-bottom:20px}
.plan-opt{position:relative;display:block;cursor:pointer}
.plan-opt input{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.plan-opt .box{
  display:grid;
  grid-template-columns:auto 1fr auto;
  grid-template-rows:auto auto;
  column-gap:12px;
  row-gap:3px;
  align-items:start;
  border:1.6px solid var(--line);
  border-radius:15px;
  padding:14px 15px;
  background:#fffdfb;
  transition:border-color .18s ease,background .18s ease,box-shadow .18s ease,transform .18s ease;
}
.plan-opt .box::before{
  content:"";
  grid-column:1;
  grid-row:1 / span 2;
  align-self:center;
  width:20px;height:20px;
  border-radius:50%;
  border:2px solid #c9b9a6;
  background:#fff;
  box-sizing:border-box;
  transition:border-color .16s ease,background .16s ease,box-shadow .16s ease;
}
.plan-opt .box .row{
  grid-column:2;
  grid-row:1;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 8px;
  min-width:0;
}
.plan-opt .box .pr{
  grid-column:3;
  grid-row:1;
  font-weight:800;
  color:var(--saffron-dark);
  font-size:15px;
  font-family:var(--font-head);
  white-space:nowrap;
  line-height:1.3;
}
.plan-opt .box .ds{
  grid-column:2 / span 2;
  grid-row:2;
  font-size:12.5px;
  color:var(--muted);
  line-height:1.45;
  margin:0;
}
.plan-opt .box .nm{
  font-weight:800;
  color:var(--navy);
  font-size:15px;
  line-height:1.3;
}
.plan-opt .box .tag-best{
  display:inline-block;
  background:linear-gradient(135deg,var(--saffron),var(--saffron-dark));
  color:#fff;
  font-size:10px;
  font-weight:800;
  letter-spacing:.5px;
  padding:2px 8px;
  border-radius:100px;
  line-height:1.4;
  vertical-align:middle;
  box-shadow:0 2px 8px rgba(255,122,51,.3);
}
.plan-opt:hover .box{border-color:#e0c9b0;transform:translateY(-1px)}
.plan-opt input:checked + .box{
  border-color:var(--saffron);
  background:linear-gradient(180deg,#fff8f3,#fff4ec);
  box-shadow:0 0 0 3px rgba(255,122,51,.12),0 8px 20px rgba(255,122,51,.08);
}
.plan-opt input:checked + .box::before{
  border-color:var(--saffron);
  background:var(--saffron);
  box-shadow:inset 0 0 0 4px #fff;
}
.plan-opt input:focus-visible + .box{box-shadow:0 0 0 4px rgba(255,122,51,.18)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:14px 20px;border-radius:15px;font-weight:700;font-size:15.5px;text-decoration:none;border:0;cursor:pointer;font-family:var(--font-body);transition:transform .18s cubic-bezier(.22,1,.36,1),box-shadow .18s ease,filter .18s ease;position:relative;overflow:hidden}
.btn:hover{transform:translateY(-2px)}
.btn:disabled{opacity:.6;cursor:not-allowed;transform:none}
.btn-cta{background:linear-gradient(135deg,var(--saffron),var(--saffron-dark));color:#fff;box-shadow:0 8px 22px rgba(236,95,34,.36)}
.btn-cta::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.2) 50%,transparent 70%);transform:translateX(-120%);transition:transform .55s ease}
.btn-cta:hover::after{transform:translateX(120%)}
.btn-wa{background:linear-gradient(135deg,#2ee06f,var(--green-dark));color:#fff;box-shadow:0 8px 22px rgba(37,211,102,.38)}
.btn-navy{background:linear-gradient(135deg,var(--navy-soft),var(--navy-dark));color:#fff}
.btn-outline{border:2px solid var(--line);color:var(--navy);background:#fff}

.alt-link{text-align:center;margin-top:18px;font-size:14px;color:var(--muted)}
.alt-link a{font-weight:700;text-decoration:none}
.alt-link a:hover{text-decoration:underline}

/* alerts */
.alert{border-radius:14px;padding:12px 15px;font-size:14px;margin-bottom:18px;display:none}
.alert.show{display:block}
/* Complaint Boss — YouTube */
.boss-strip{display:flex;gap:11px;align-items:flex-start;background:#fdeceb;border:1px solid #f7d3d1;border-radius:14px;padding:13px 15px;margin-bottom:22px}
.boss-strip .yt{flex:0 0 auto;width:20px;height:14px;background:#c4302b;border-radius:4px;position:relative;margin-top:2px}
.boss-strip .yt::after{content:"";position:absolute;left:7px;top:3.5px;border-left:6px solid #fff;border-top:3.5px solid transparent;border-bottom:3.5px solid transparent}
.boss-strip p{font-size:13.5px;line-height:1.6;color:#8a3a2c;margin:0}
.boss-strip b{color:#6f2b20}

.boss-dash{display:flex;gap:13px;align-items:center;background:#fdeceb;border:1px solid #f7d3d1;border-radius:16px;padding:15px 17px;margin-top:18px}
.boss-dash .txt{flex:1;min-width:0}
.boss-dash b{display:block;color:#6f2b20;font-size:14.5px;margin-bottom:2px}
.boss-dash span{color:#8a3a2c;font-size:13px;line-height:1.55}
.boss-dash a{flex:0 0 auto;background:#c4302b;color:#fff;font-weight:700;font-size:13.5px;padding:10px 16px;border-radius:11px;text-decoration:none;white-space:nowrap}
.boss-dash a:hover{filter:brightness(1.08)}
@media(max-width:520px){.boss-dash{flex-direction:column;align-items:stretch;text-align:center}.boss-dash a{text-align:center}}

/* Install prompt on the dashboard — shown by assets/pwa.js only when the
   browser can actually install. */
.install-row{display:flex;gap:13px;align-items:center;background:#fff6ee;border:1px solid #f6ddc4;
  border-radius:16px;padding:15px 17px;margin-top:14px;text-decoration:none}
.install-row .ic{flex:0 0 auto;font-size:22px;line-height:1}
.install-row .tx{flex:1;min-width:0}
.install-row b{display:block;color:var(--navy);font-size:14.5px;margin-bottom:2px}
.install-row .tx span{color:var(--muted);font-size:13px;line-height:1.55}
.install-row .go{flex:0 0 auto;background:linear-gradient(135deg,var(--saffron),var(--saffron-dark));color:#fff;
  font-weight:800;font-size:13.5px;padding:11px 16px;border-radius:11px;white-space:nowrap}
@media(max-width:520px){.install-row{flex-wrap:wrap;text-align:left}.install-row .go{width:100%;text-align:center}}

.alert.err{background:#fdf0ec;border:1px solid #f4cdbf;color:#b3402a}
.alert.ok{background:#eef9f1;border:1px solid #c7e9d3;color:#177a41}
.alert.info{background:#fff7ec;border:1px solid #f2ddba;color:#8a5a00}

/* OTP */
.otp-input{width:100%;text-align:center;font-size:30px;font-weight:800;letter-spacing:14px;padding:16px 10px 16px 24px;font-family:var(--font-head);color:var(--navy)}
.resend-row{text-align:center;margin-top:16px;font-size:13.5px;color:var(--muted)}
.resend-row button{background:transparent;border:0;color:var(--saffron-dark);font-weight:700;cursor:pointer;font-size:13.5px}
.resend-row button:disabled{color:var(--muted);cursor:not-allowed}

/* dashboard */
.dash-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.dash-hi{font-size:24px;color:var(--navy);font-weight:800}
.badge{display:inline-flex;align-items:center;gap:7px;font-weight:800;font-size:12.5px;letter-spacing:.4px;padding:6px 14px;border-radius:100px;text-transform:uppercase}
.badge.pending{background:#fff7ec;color:#8a5a00;border:1px solid #f2ddba}
.badge.active{background:#eef9f1;color:#177a41;border:1px solid #c7e9d3}
.badge .dot{width:8px;height:8px;border-radius:50%;background:currentColor}
.plan-card{background:linear-gradient(150deg,var(--navy),var(--navy-dark));color:#fff;border-radius:18px;padding:24px 26px;margin:18px 0;box-shadow:0 14px 36px rgba(13,36,48,.28);position:relative;overflow:hidden}
.plan-card::after{content:"";position:absolute;right:-30px;top:-30px;width:120px;height:120px;border-radius:50%;background:rgba(255,122,51,.2);filter:blur(2px)}
.plan-card .k{font-size:12px;letter-spacing:1px;text-transform:uppercase;color:#a9c2ce;position:relative}
.plan-card .v{font-size:26px;font-weight:800;font-family:var(--font-head);margin-top:2px;position:relative}
.plan-card .v span{font-size:16px;color:var(--gold)}
.dash-steps{list-style:none;counter-reset:s;margin:8px 0 20px}
.dash-steps li{counter-increment:s;position:relative;padding:10px 0 10px 44px;font-size:14.5px}
.dash-steps li::before{content:counter(s);position:absolute;left:0;top:8px;width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--saffron),var(--saffron-dark));color:#fff;font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center;font-family:var(--font-head);box-shadow:0 4px 12px rgba(255,122,51,.35)}
.dash-note{background:linear-gradient(135deg,#fff9f0,#fff4e4);border:1px solid #f2ddba;border-radius:14px;padding:13px 16px;font-size:13px;color:#8a5a00;margin-top:6px}
.dash-meta{font-size:13.5px;color:var(--muted);margin-top:4px}
.dash-actions{display:grid;gap:11px;margin-top:20px}

.foot-note{text-align:center;padding:22px 20px;font-size:12.5px;color:var(--muted)}
.foot-note a{color:var(--muted);text-decoration:underline}

.center-load{text-align:center;color:var(--muted);padding:40px 0;font-size:15px}

/* ========== Mobile / touch optimization ========== */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{-webkit-tap-highlight-color:rgba(255,122,51,.12)}
button,a,.plan-opt{-webkit-tap-highlight-color:rgba(255,122,51,.12)}

/* 16px inputs prevent iOS auto-zoom on focus */
.field input,
.otp-input{
  font-size:16px;
  min-height:48px;
}
.otp-input{
  font-size:clamp(22px,7vw,30px);
  letter-spacing:clamp(6px,3vw,14px);
  min-height:56px;
  padding:14px 8px;
}
.btn{min-height:50px}
.lang-toggle button{min-height:36px;min-width:44px}
.pw-toggle{min-height:44px;min-width:52px;padding:8px 10px}

/* Secondary links are the smallest things anyone has to hit here — "Sign in",
   "Resend code", "Back to home". The negative margin cancels the padding, so
   the hit area grows to thumb size without moving the text. */
.alt-link a,
.foot-note a{display:inline-block;padding:12px 8px;margin:-12px -4px}
.resend-row button{min-height:44px;padding:10px 14px;border-radius:10px}
.resend-row button:not(:disabled):active{background:#fff2e8}

@media(max-width:640px){
  .auth-wrap{padding:24px 14px calc(36px + env(safe-area-inset-bottom))}
  .auth-wrap.wide{max-width:100%}
  .auth-card{
    padding:24px 16px;
    border-radius:18px;
    box-shadow:0 8px 28px rgba(40,28,16,.08);
  }
  .auth-head{margin-bottom:20px}
  .auth-head h1{font-size:22px;letter-spacing:-.3px}
  .auth-head p{font-size:14px}
  .auth-header .bar{padding:10px 14px}
  .logo-badge{width:38px;height:38px;border-radius:11px}
  .logo-badge svg{width:22px;height:22px}
  .logo-text b{font-size:16.5px}
  .logo-text span{display:none}
  .plan-opt .box{
    padding:14px 12px;
    column-gap:10px;
    border-radius:14px;
  }
  .plan-opt .box .nm{font-size:14.5px}
  .plan-opt .box .pr{font-size:14.5px}
  .plan-opt .box .ds{font-size:12px}
  .plan-opt:hover .box{transform:none}
  .dash-hi{font-size:20px}
  .plan-card{padding:20px 18px;border-radius:16px}
  .plan-card .v{font-size:22px}
  .dash-steps li{font-size:14px;padding-left:40px}
  .foot-note{padding:16px 14px calc(20px + env(safe-area-inset-bottom));font-size:12px;line-height:1.5}
}

@media(max-width:400px){
  .auth-header .bar{padding:10px 12px;gap:8px}
  .logo{gap:9px}
  .logo-badge{width:34px;height:34px;border-radius:10px}
  .logo-badge svg{width:20px;height:20px}
  .logo-text b{font-size:15.5px}
  .lang-toggle{padding:2px}
  .lang-toggle button{padding:6px 9px;font-size:12px;min-width:40px}
}

@media(max-width:380px){
  .auth-card{padding:20px 14px}
  .auth-head h1{font-size:20px}
  .plan-opt .box{
    grid-template-columns:auto 1fr;
    grid-template-rows:auto auto auto;
  }
  .plan-opt .box::before{grid-row:1 / span 1;align-self:center}
  .plan-opt .box .row{grid-column:2;grid-row:1}
  .plan-opt .box .pr{grid-column:2;grid-row:2;justify-self:start}
  .plan-opt .box .ds{grid-column:1 / -1;grid-row:3}
}

@media(hover:none){
  .btn:hover{transform:none}
  .btn:active{transform:scale(.98)}
  .plan-opt:hover .box{transform:none}
}

/* Safe area for notched phones when header is sticky */
.auth-header{padding-top:env(safe-area-inset-top)}