/* =====================================================================
   Monika Shop — professional storefront theme (loaded AFTER site.css).
   Change the brand look by editing only the variables below.
   ===================================================================== */
:root{
  --pri:#312e81; --pri-d:#25235f; --pri-l:#eef2ff;           /* brand indigo */
  --gold:#c99a3b; --gold-d:#a67c22;                           /* accent */
  --bg:#f5f6fa; --card:#fff; --txt:#0f172a; --mut:#64748b; --line:#e2e8f0;
  --ok:#15803d; --bad:#b91c1c;
  --r:12px; --sh:0 1px 2px rgba(15,23,42,.05),0 1px 3px rgba(15,23,42,.06); --sh2:0 10px 28px rgba(15,23,42,.14);
}
html,body{font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:15px;line-height:1.5;color:var(--txt);background:var(--bg);-webkit-font-smoothing:antialiased}
h1,h2,h3,.brand{font-family:Sora,Inter,sans-serif;letter-spacing:-.01em;color:var(--txt)}

/* ---------- announcement strip + header ---------- */
.announce{background:#0f172a;color:#cbd5e1;font-size:.78rem;text-align:center;padding:7px 12px;letter-spacing:.01em}
.announce b{color:#f3d58e;font-weight:600}
.topbar{background:#fff;color:var(--txt);border-bottom:1px solid var(--line);box-shadow:var(--sh)}
.topbar-in{gap:16px;padding:12px}
.brand{color:var(--pri);font-size:1.15rem;font-weight:700}.brand span{color:var(--gold);margin-left:4px}
.search{background:#f8fafc;border:1.5px solid var(--line);border-radius:999px;height:42px;padding:0 16px;transition:border-color .15s,box-shadow .15s,background .15s}
.search:focus-within{background:#fff;border-color:var(--pri);box-shadow:0 0 0 3px rgba(49,46,129,.12)}
.acctlink{color:var(--txt);font-weight:600;padding:8px 10px;border-radius:8px}.acctlink:hover{background:var(--pri-l);color:var(--pri)}
.cartlink{color:var(--txt);padding:8px;border-radius:8px}.cartlink:hover{background:var(--pri-l);color:var(--pri)}
.cbadge{background:var(--pri);border:2px solid #fff;top:-2px;right:-2px}

/* ---------- buttons ---------- */
.btn-primary,.btn-outline{border-radius:8px;padding:11px 22px;font:600 .92rem Inter,sans-serif;letter-spacing:.01em;transition:background .15s,box-shadow .15s,transform .05s}
.btn-primary{background:var(--pri);color:#fff;box-shadow:0 1px 2px rgba(15,23,42,.2)}
.btn-primary:hover:not(:disabled){background:var(--pri-d);box-shadow:0 4px 12px rgba(49,46,129,.3)}
.btn-primary:active:not(:disabled){transform:translateY(1px)}
.btn-outline{background:#fff;color:var(--pri);border:1.5px solid #c7d2fe}
.btn-outline:hover:not(:disabled){background:var(--pri-l);border-color:var(--pri)}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;border-radius:18px;padding:34px 24px;margin-bottom:14px;color:#fff;
  background:radial-gradient(900px 300px at 85% -10%,rgba(201,154,59,.35),transparent 60%),linear-gradient(135deg,#1e1b4b 0%,#312e81 55%,#4338ca 100%)}
.hero:after{content:"";position:absolute;right:-60px;bottom:-80px;width:280px;height:280px;border-radius:50%;border:40px solid rgba(255,255,255,.05)}
.hero .eyebrow{display:inline-block;font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#f3d58e;margin-bottom:10px}
.hero h1{color:#fff;font-size:1.65rem;line-height:1.2;margin:0 0 10px}
.hero p{color:#e0e7ff;opacity:1;margin:0 0 20px;max-width:520px}
.hero .btn-primary{background:var(--gold);color:#241800;box-shadow:0 4px 14px rgba(201,154,59,.4)}.hero .btn-primary:hover{background:#d8aa4f}
.hero .btn-outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.45);margin-left:8px}.hero .btn-outline:hover{background:rgba(255,255,255,.12);border-color:#fff}

/* ---------- trust strip / sections ---------- */
.trust div{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);padding:12px 8px;font-weight:600;color:#334155}
.trust .mud-icon-root{color:var(--pri)}
.section{margin:26px 0}
.section-head{align-items:center;margin-bottom:12px}
.section-head h2{font-size:1.15rem;position:relative;padding-left:12px}
.section-head h2:before{content:"";position:absolute;left:0;top:15%;bottom:15%;width:4px;border-radius:2px;background:var(--gold)}
.section-head a{color:var(--pri);font-weight:600}.section-head a:hover{text-decoration:underline}
.listhead h1,.ptitle{font-size:1.35rem}

/* ---------- product cards ---------- */
.pcard{border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh);transition:transform .18s,box-shadow .18s,border-color .18s;background:#fff}
.pcard:hover{transform:translateY(-4px);box-shadow:var(--sh2);border-color:#c7d2fe}
.pimg{background:#f1f5f9}.pimg img{transition:transform .35s}.pcard:hover .pimg img{transform:scale(1.05)}
.badge-off{background:#dc2626;border-radius:6px;font-weight:700;letter-spacing:.02em}
.badge-off.inline{background:#dc2626}
.pbody{padding:12px 12px 14px}
.pname{font-size:.9rem;font-weight:500;color:#1e293b}
.pprice b{font-size:1.05rem;color:var(--txt)}.pprice s{color:#94a3b8}
.prate{color:var(--gold-d)}

/* chips */
.chip{border:1px solid var(--line);background:#fff;color:#334155;padding:8px 16px;font-weight:500;transition:all .15s;box-shadow:var(--sh)}
.chip:hover{border-color:var(--pri);color:var(--pri)}
.chip.on{background:var(--pri);border-color:var(--pri);color:#fff;box-shadow:0 2px 8px rgba(49,46,129,.3)}

/* ---------- boxes, forms ---------- */
.authcard,.box,.summary,.cline,.ocard,.timeline,.legal,.why-grid div,.kpi{border-radius:14px;border:1px solid var(--line);box-shadow:var(--sh)}
.summary,.box{padding:18px}
.fld,.filters select,.filters input{border:1.5px solid var(--line);border-radius:8px;padding:10px 12px;transition:border-color .15s,box-shadow .15s}
.fld:focus,.filters select:focus,.filters input:focus{outline:0;border-color:var(--pri);box-shadow:0 0 0 3px rgba(49,46,129,.12)}
label{color:#334155}
.tabs button{background:var(--pri-l);color:var(--pri)}.tabs button.on{background:var(--pri);color:#fff}
.pill{background:var(--pri-l);color:var(--pri)}
.policy{background:var(--pri-l);border:1px solid #c7d2fe;color:#312e81}
.row.total{border-top:1px dashed #cbd5e1}
.notice{border-radius:10px;border:1px solid #bbf7d0}
.why-grid div{background:#fff}.why-grid b{color:var(--pri)}
.qty button{border-radius:8px;border-color:var(--line)}.qty button:hover{border-color:var(--pri);color:var(--pri)}
.stickybar,.bottomnav{box-shadow:0 -4px 16px rgba(15,23,42,.06);border-top:1px solid var(--line)}
.bottomnav a{color:#64748b}.bottomnav a:hover{color:var(--pri)}

/* ---------- footer ---------- */
.footer{background:#0f172a;border-top:0;color:#cbd5e1;padding-top:30px}
.footer .brand.small{color:#fff;font-size:1.25rem}.footer .brand.small span{color:var(--gold)}
.footer p{color:#94a3b8;margin:8px 0 0}
.flinks{gap:10px 28px;color:#cbd5e1}.flinks a:hover{color:#f3d58e}
.copy{color:#64748b;border-top:1px solid #1e293b;padding-top:14px}

/* ---------- admin ---------- */
.adm{background:var(--bg)}
.adm-top{background:#0f172a}
.adm-nav{box-shadow:var(--sh)}
.adm-nav a{border-bottom:3px solid transparent}.adm-nav a:hover{border-bottom-color:var(--gold)}
.kpi{border-left:4px solid var(--pri)}.kpi.warn{border-left-color:var(--gold)}
.kpi b{color:var(--txt)}
.tbl th{background:#f8fafc;color:#475569}
.tbl tr.click:hover,.tbl tbody tr:hover{background:#f8fafc}
.bar{background:#e0e7ff}.bar i{background:linear-gradient(90deg,var(--pri),#6366f1)}

@media(min-width:768px){
  .topbar-in{padding:14px 12px}
  .hero{padding:58px 48px}.hero h1{font-size:2.5rem;max-width:660px}.hero p{font-size:1.05rem}
  .section-head h2{font-size:1.3rem}
  .footer-in{grid-template-columns:1fr 2fr}
  .flinks{display:grid;grid-template-columns:repeat(3,auto);justify-content:start}
}

/* ---- dummy PhonePe test-mode screen ---- */
.dummy-pay{max-width:460px}
.dummy-badge{display:inline-block;background:#fef3c7;color:#92400e;font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:5px 10px;border-radius:6px;margin-bottom:12px}
.dummy-pay code{background:#f1f5f9;padding:1px 5px;border-radius:4px;font-size:.85em}

/* ---- mobile header + no sideways scroll (phones < 768px) ---- */
body{max-width:100%;overflow-x:clip}   /* clip (not hidden) keeps the sticky header working */
img,video,iframe,table{max-width:100%}
@media(max-width:767.98px){
  .announce{font-size:.72rem;padding:6px 10px;line-height:1.35}
  /* row 1: brand · Wishlist · My Orders · cart   |   row 2: full-width search */
  .topbar-in{flex-wrap:wrap;gap:8px 4px;padding:10px 12px}
  .brand{order:1;font-size:.98rem}
  .acctlink{order:2;font-size:.76rem;padding:6px 5px}
  .search + .acctlink{margin-left:auto}
  .acctlink[href^="javascript"]{display:none}           /* Logout is in the bottom nav on phones */
  .cartlink{order:3;padding:4px}
  .search{order:4;flex:1 1 100%;height:40px}
  .legal{padding:16px 14px;border-radius:12px}
  .legal h1{font-size:1.25rem}
  .legal a{word-break:break-word}
  .tbl{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
}
@media(max-width:359.98px){
  .acctlink[href="/wishlist"]{display:none}             /* very small phones: keep My Orders + cart on one row */
}

/* ---------- pay by QR code (UPI): checkout, order page, admin verification ---------- */
.qrpay{margin-top:12px;border:1.5px dashed var(--pri);border-radius:12px;padding:14px;background:var(--pri-l)}
.qrpay-amt{font-size:1rem;margin-bottom:10px}.qrpay-amt b{font-size:1.25rem;color:var(--pri)}
.qrpay-grid{display:grid;gap:14px}
.qrpay-code{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}
.qrpay-code img{width:100%;max-width:220px;aspect-ratio:1;object-fit:contain}
.qrpay-upi{display:flex;align-items:center;gap:8px;font:600 .88rem ui-monospace,Consolas,monospace;word-break:break-all}
.qrpay-app{display:inline-block;text-align:center}
.qrpay-steps ol{margin:0 0 4px;padding-left:18px;font-size:.88rem}.qrpay-steps li{margin-bottom:4px}
.qrpay-proof{display:flex;align-items:center;gap:10px}.qrpay-proof img{width:72px;height:72px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.qrstat.pending{border-left:4px solid var(--gold)}.qrstat.approved{border-left:4px solid var(--ok)}.qrstat.rejected{border-left:4px solid var(--bad)}
.qrstat h2{font-size:1rem;margin-bottom:6px}.qrre{margin-top:10px;display:flex;flex-direction:column;gap:6px;align-items:flex-start}.qrre .fld{max-width:320px}
@media(min-width:640px){.qrpay-grid{grid-template-columns:240px 1fr}.qrpay-app{display:none}}
@media(max-width:639px){.qrpay-code img{max-width:200px}}

.qr-count{display:inline-block;min-width:20px;margin-left:6px;padding:0 6px;border-radius:99px;background:rgba(15,23,42,.08);font-size:.72rem;text-align:center}
.chip.on .qr-count{background:rgba(255,255,255,.25)}
.qr-list{display:grid;gap:12px;margin-bottom:12px}
.qr-card{display:flex;gap:14px;background:var(--card);border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:12px;padding:12px;box-shadow:var(--sh)}
.qr-card.approved{border-left-color:var(--ok)}.qr-card.rejected{border-left-color:var(--bad)}
.qr-shot{flex:0 0 96px;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:.72rem;color:var(--pri)}
.qr-shot img{width:96px;height:128px;object-fit:cover;border-radius:8px;border:1px solid var(--line);background:#f8fafc}
.qr-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.qr-top{display:flex;flex-wrap:wrap;align-items:center;gap:6px}.qr-order{font-weight:700;color:var(--txt)}
.qr-amt{font:700 1.2rem Sora,Inter,sans-serif;color:var(--pri)}
.qr-utr b{font-family:ui-monospace,Consolas,monospace;font-size:1rem;letter-spacing:.04em;user-select:all}
.qr-reason{font-size:.85rem;color:var(--bad)}
.qr-panel{margin-top:8px;padding:10px;border-radius:10px;background:#f0fdf4;border:1px solid #bbf7d0}
.qr-panel.reject{background:#fef2f2;border-color:#fecaca}.qr-panel .fld{max-width:420px}
.btn-primary.danger-fill{background:var(--bad)}.btn-primary.danger-fill:hover:not(:disabled){background:#991b1b}
.qr-settings-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.qr-settings-head h2{font-size:1rem;margin:0}
.qr-cfg{display:grid;gap:16px;margin-top:10px}
.qr-cfg-img img{width:180px;height:180px;object-fit:contain;border:1px solid var(--line);border-radius:10px;background:#fff}
.qr-ph{width:180px;height:180px;display:flex;align-items:center;justify-content:center;border:1.5px dashed var(--line);border-radius:10px;color:var(--mut);font-size:.85rem}
.qr-notice{background:#fff7ed;color:#9a3412;border-color:#fed7aa}
@media(min-width:768px){.qr-cfg{grid-template-columns:220px 1fr}}
@media(max-width:480px){.qr-card{flex-direction:column}.qr-shot{flex-direction:row;flex-basis:auto}.qr-shot img{width:72px;height:96px}}
.qrpay-noqr{width:200px;height:200px;display:flex;align-items:center;justify-content:center;text-align:center;padding:12px;border:1.5px dashed var(--line);border-radius:10px;color:var(--mut);font-size:.82rem}