/* Swayam Shop - refined UI layer (patch 7).
   Loaded after landing.css / ui3.css / auth.css, so these rules win on equal specificity.
   Covers: typography, top and side menus, dashboards (user / merchant / admin), login and
   password pages, invoices, and a clean light footer. No text is placed over any photo. */

:root{
  --ink:#0f1d33;
  --ink-2:#34445e;
  --mut:#647391;
  --line:#e4eaf4;
  --line-2:#eef2f8;
  --brand:#1462e0;
  --brand-2:#0b4fc0;
  --brand-soft:#eaf2ff;
  --ok:#0f8a4b;
  --warn:#b45309;
  --bad:#c0362c;
  --radius:18px;
  --shadow:0 1px 2px rgba(15,29,51,.05),0 8px 24px rgba(15,29,51,.06);
  --shadow-lg:0 2px 4px rgba(15,29,51,.05),0 22px 48px rgba(15,29,51,.10);
}

/* ---------- typography ---------- */
html,body{font-family:Inter,"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{letter-spacing:-.02em;color:var(--ink);font-weight:800}
h1{line-height:1.12}
p{color:var(--ink-2);line-height:1.6}
.eyebrow,.eb,.crumb{letter-spacing:.12em;text-transform:uppercase;font-size:11.5px;font-weight:700;color:var(--brand)}

/* ---------- side menu ---------- */
.side{background:#fff;border-right:1px solid var(--line);padding:22px 16px}
.side-brand{padding:4px 8px 18px;border-bottom:1px solid var(--line-2);margin-bottom:14px}
.side-brand .brand img{height:44px;width:auto}
.brand-caption{display:block;margin-top:8px;font-size:10.5px;letter-spacing:.14em;color:var(--mut);font-weight:700}
.side-role{font-size:12px;font-weight:700;color:var(--mut);letter-spacing:.08em;text-transform:uppercase;padding:0 10px 10px}
.side-nav{display:flex;flex-direction:column;gap:4px}
.nav-link{display:flex;align-items:center;gap:12px;width:100%;padding:11px 12px;border:0;border-radius:12px;background:transparent;color:var(--ink-2);font:600 14.5px/1.2 Inter,system-ui,sans-serif;cursor:pointer;text-align:left;transition:background .15s,color .15s}
.nav-link span:first-child{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:#f2f5fb;color:var(--brand);font-size:15px;flex:none}
.nav-link:hover{background:var(--brand-soft);color:var(--brand-2)}
.nav-link:hover span:first-child{background:#fff}
.nav-link.active,.nav-link[aria-current="page"],.nav-link.on{background:linear-gradient(135deg,#1a6ef0,#0b4fc0);color:#fff;box-shadow:0 8px 18px rgba(20,98,224,.28)}
.nav-link.active span:first-child,.nav-link[aria-current="page"] span:first-child,.nav-link.on span:first-child{background:rgba(255,255,255,.18);color:#fff}
.side-bottom{margin-top:18px;border-top:1px solid var(--line-2);padding-top:14px}
.logout-btn{width:100%;display:flex;align-items:center;gap:12px;padding:11px 12px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--bad);font:700 14px Inter,system-ui,sans-serif;cursor:pointer}
.logout-btn:hover{background:#fff5f4}
.side-footer{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:12.5px;color:var(--mut)}
.secure-mark{width:22px;height:22px;border-radius:50%;background:#e8f8ee;color:var(--ok);display:grid;place-items:center;font-weight:800;font-size:12px}

/* ---------- top bar ---------- */
.topbar{background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);padding:16px 28px;position:sticky;top:0;z-index:20}
.topbar h1{font-size:22px;margin:2px 0 0}
.search-decoration{border:1px solid var(--line);border-radius:12px;background:#f8faff;color:var(--mut);padding:9px 14px;font-size:14px}
.secure-badge{border-radius:999px;background:#e8f8ee;color:var(--ok);font-weight:700;font-size:12.5px;padding:7px 12px}
.profile-trigger{border:1px solid var(--line);border-radius:14px;background:#fff;padding:6px 10px}
.profile-menu{border-radius:14px;border:1px solid var(--line);box-shadow:var(--shadow-lg);padding:6px}
.profile-menu button{border-radius:10px;padding:10px 12px;font:600 14px Inter,system-ui,sans-serif}
.profile-menu button:hover{background:var(--brand-soft)}

/* ---------- dashboard blocks ---------- */
.page-content{padding:26px 28px 34px}
.dash-hero,.hero{border-radius:var(--radius);box-shadow:var(--shadow)}
.panel,.stat,.merchant-card,.lf,.of,.cat{border-radius:var(--radius);border:1px solid var(--line);box-shadow:var(--shadow);background:#fff}
.panel{padding:22px 24px}
.panel-head{margin-bottom:14px}
.panel-head h2,.panel-head h3{font-size:17px}
.stats{gap:16px}
.stat{padding:20px 22px;transition:transform .15s,box-shadow .15s}
.stat.actionable:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.stat-body b,.stat b{font-size:26px;letter-spacing:-.02em}
.metric-line{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--line-2);font-size:14.5px}
.metric-line:last-child{border-bottom:0}
.metric-line b{color:var(--ink)}

/* tables */
table{border-collapse:separate;border-spacing:0;width:100%}
th{font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--mut);background:#f7f9fd;font-weight:700;padding:12px 14px;text-align:left;border-bottom:1px solid var(--line)}
td{padding:13px 14px;border-bottom:1px solid var(--line-2);font-size:14.5px;color:var(--ink-2);vertical-align:middle}
tbody tr:hover td{background:#fbfdff}
.table-note{font-size:13px;color:var(--mut)}

/* buttons */
.btn{border-radius:12px;font:700 14px Inter,system-ui,sans-serif;padding:11px 18px;border:1px solid var(--line);background:#fff;color:var(--ink);transition:background .15s,box-shadow .15s,transform .1s;cursor:pointer}
.btn:hover{box-shadow:var(--shadow)}
.btn:active{transform:translateY(1px)}
.btn.primary,.btn:not(.sm):not(.red):not(.success):not(.o){background:linear-gradient(135deg,#1a6ef0,#0b4fc0);border-color:transparent;color:#fff}
.btn.sm{padding:7px 12px;border-radius:10px;font-size:13px}
.btn.success{background:#e8f8ee;border-color:#bfe8cf;color:var(--ok)}
.btn.red{background:#fff1f0;border-color:#f3c7c2;color:var(--bad)}
.btn.o{background:#fff;border-color:#c9d6ee;color:var(--brand)}

/* forms in workspace */
.form-panel input,.form-panel select,.form-panel textarea,.panel input,.panel select,.panel textarea{border-radius:12px;border:1px solid #d6dfee;padding:12px 14px;font:500 15px Inter,system-ui,sans-serif;background:#fff;color:var(--ink);transition:border-color .15s,box-shadow .15s}
.form-panel input:focus,.form-panel select:focus,.panel input:focus,.panel select:focus,.panel textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px rgba(20,98,224,.14)}

/* dashboard footer: clean, light, no photos or dark tones */
body.workspace .dashboard-footer{background:#fff;border-top:1px solid var(--line);padding:18px 28px;color:var(--mut);font-size:13.5px}
body.workspace .dashboard-footer img{height:30px}

/* ---------- invoice dialog ---------- */
.dialog{border-radius:22px;box-shadow:var(--shadow-lg);padding:26px 28px;max-width:720px}
.dialog h2{font-size:22px;margin:4px 0 6px}
.invoice-detail-brand{border-bottom:1px solid var(--line);margin-bottom:16px;padding-bottom:12px}
.invoice-detail-brand img{height:70px}
.dialog-total{display:flex;justify-content:space-between;gap:16px;margin-top:14px;padding:14px 16px;border-radius:14px;background:var(--brand-soft);color:var(--brand-2);font-weight:800}
.dialog-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:18px;flex-wrap:wrap}

/* ---------- landing footer: clean and light ---------- */
footer{background:#fff;color:var(--mut);border-top:1px solid var(--line);padding:56px 0 26px}
footer h4{color:var(--ink);font-size:14px;letter-spacing:.02em;margin:0 0 14px}
footer a{color:var(--ink-2);text-decoration:none;font-size:14.5px;display:block;padding:4px 0}
footer a:hover{color:var(--brand)}
footer p{color:var(--mut);font-size:14.5px;max-width:320px}
footer .fl{background:transparent;border:0;box-shadow:none;padding:0}
footer .fl img{height:64px;width:auto}
footer .pgstrip{border-top:1px solid var(--line-2);padding-top:22px;margin-top:34px;align-items:center}
footer .pgstrip img{height:24px}
footer .fg{gap:40px}

/* ---------- landing cards: text never sits on a photo ---------- */
.smp{display:none}
.of .ph{background:#f4f7fc}
.of .ph img,.lf img,.cat img{height:auto;aspect-ratio:16/9;object-fit:cover}
.of .b,.lf div,.cat div{background:#fff}
.of h3{font-size:19px}
.inv{border-radius:24px;box-shadow:var(--shadow-lg)}

/* ---------- login / register / change password ---------- */
.auth-page{background:#f6f8fc}
.auth-visual{border-radius:0}
.auth-visual h1{letter-spacing:-.03em;font-size:clamp(34px,4vw,52px);line-height:1.08}
.auth-visual p{font-size:17px;max-width:520px}
.auth-panel{background:#fff;display:flex;flex-direction:column;justify-content:center;padding:40px clamp(24px,5vw,72px)}
.auth-top{margin-bottom:22px}
.auth-top a{color:var(--brand);font-weight:700;text-decoration:none;font-size:14.5px}
.auth-form{max-width:440px;width:100%;margin:0 auto}
.auth-form .mark{height:54px;width:auto;margin:0 0 18px}
.auth-form h2{font-size:34px;margin:6px 0 6px}
.auth-sub{font-size:15.5px;color:var(--mut);margin:0 0 26px}
.auth-field{margin-bottom:16px}
.auth-field span{font-size:13.5px;font-weight:700;color:var(--ink-2);margin-bottom:8px;display:block}
.auth-field input,.auth-field select{width:100%;height:52px;border-radius:14px;border:1.5px solid #d6dfee;padding:0 16px;font:500 15.5px Inter,system-ui,sans-serif;background:#fff;color:var(--ink);box-sizing:border-box}
.auth-field input:focus,.auth-field select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px rgba(20,98,224,.14)}
.password-wrap{position:relative;display:block}
.password-wrap input{padding-right:52px}
.password-wrap button{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:38px;height:38px;border:0;border-radius:10px;background:transparent;color:var(--mut);cursor:pointer;font-size:16px}
.auth-submit{width:100%;height:54px;border-radius:14px;font:800 16px Inter,system-ui,sans-serif;background:linear-gradient(135deg,#1a6ef0,#0b4fc0);color:#fff;border:0;box-shadow:0 12px 26px rgba(20,98,224,.28);cursor:pointer}
.auth-submit:hover{box-shadow:0 16px 32px rgba(20,98,224,.36)}
.auth-divider{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--mut);font-size:12.5px;font-weight:700;letter-spacing:.1em}
.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:var(--line)}
.auth-create{width:100%;height:50px;border-radius:14px;border:1.5px solid #c9d6ee;background:#fff;color:var(--brand);font:800 15px Inter,system-ui,sans-serif;cursor:pointer}
.forgot-link{display:block;text-align:center;margin-top:16px;color:var(--brand);font-weight:700;font-size:14px;text-decoration:none}
.auth-message:not(:empty){border-radius:12px;padding:12px 14px;font-size:14px}
.reset-box{margin-top:18px;border:1px solid var(--line);border-radius:16px;padding:18px;background:#fbfdff}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .page-content{padding:18px 16px 26px}
  .topbar{padding:14px 16px}
  .panel{padding:18px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- hero rotator (landing-plus.js): photo on top, caption below. Text never sits on a photo ---------- */
.hero .car{max-width:560px;margin-left:auto;position:relative;padding-top:340px;border-radius:24px;overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-lg)}
.car .sl{position:absolute;left:0;right:0;top:0;height:340px;background-size:cover;background-position:center;opacity:0;transition:opacity .7s ease}
.car .sl.on{opacity:1}
.car .cap{padding:18px 22px 4px;font-size:22px;font-weight:800;color:var(--ink);letter-spacing:-.02em;line-height:1.25}
.car .cap small{display:block;margin-top:4px;font-size:15px;font-weight:600;color:var(--mut);letter-spacing:0}
.car .dots{display:flex;gap:8px;align-items:center;padding:14px 22px 18px}
.car .dots i{display:block;width:9px;height:9px;border-radius:99px;background:#d6dfee;cursor:pointer}
.car .dots i.on{width:26px;background:var(--brand)}

/* ---------- merchant offer badges: fixed size, no card-body padding leaking into them ---------- */
.of .tags{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:6px 0 8px}
.of .tags .tg{display:inline-flex;align-items:center;padding:6px 12px;margin:0;line-height:1.2;font-size:13.5px;font-weight:800;white-space:nowrap;border-radius:999px}
.of .tags .tg.a{background:#fff1cc;color:#6b4300}
.of .tags .tg.b{background:#e3f6ec;color:#0b5a3a}