/* =====================================================================
   SNmarry.com — Sree Narayana Matrimony
   Design system: deep maroon (#7a172f) + gold (#c9a227) on warm cream.
   Original CSS — inspired by premium Indian matrimony platforms.
   ===================================================================== */

:root{
  --maroon:#7a172f;
  --maroon-d:#5a0e21;
  --maroon-l:#9c2745;
  --gold:#c9a227;
  --gold-d:#a6841a;
  --gold-l:#e6cd72;
  --saffron:#e07a26;
  --cream:#fdfaf4;
  --cream-2:#f7efe2;
  --ink:#2a2026;
  --muted:#7c7079;
  --line:#ece2d6;
  --ok:#1f9d6b;
  --ok-bg:#e6f6ef;
  --warn:#c98a12;
  --warn-bg:#fbf2dd;
  --bad:#c23a3a;
  --bad-bg:#fbe7e7;
  --shadow-sm:0 2px 8px rgba(90,14,33,.06);
  --shadow:0 10px 30px rgba(90,14,33,.10);
  --shadow-lg:0 24px 60px rgba(90,14,33,.16);
  --radius:16px;
  --radius-sm:10px;
  --radius-lg:24px;
  --maxw:1180px;
  --font:"Plus Jakarta Sans","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  --serif:"Fraunces","Georgia",serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--font);color:var(--ink);
  background:var(--cream);line-height:1.6;font-size:16px;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--maroon);text-decoration:none;transition:.2s}
a:hover{color:var(--maroon-l)}
h1,h2,h3,h4{font-family:var(--serif);line-height:1.18;margin:0 0 .5em;font-weight:600;letter-spacing:-.01em}
h1{font-size:clamp(2rem,4.4vw,3.2rem)}
h2{font-size:clamp(1.6rem,3vw,2.3rem)}
h3{font-size:1.3rem}
p{margin:0 0 1rem}
.container{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.section{padding:72px 0}
.section-sm{padding:44px 0}
.text-center{text-align:center}
.muted{color:var(--muted)}
.gold{color:var(--gold-d)}
.mt-0{margin-top:0}.mb-0{margin-bottom:0}

/* ---------- Section heading kicker ---------- */
.kicker{
  display:inline-block;font-family:var(--font);font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;font-size:.72rem;
  color:var(--gold-d);margin-bottom:.6rem;
}
.sec-head{max-width:680px;margin:0 auto 44px}
.sec-head.center{text-align:center}
.sec-head p{color:var(--muted)}

/* ============================ BUTTONS ============================ */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;justify-content:center;
  font-family:var(--font);font-weight:600;font-size:.95rem;
  padding:.78rem 1.5rem;border-radius:999px;border:1.5px solid transparent;
  cursor:pointer;transition:.2s;white-space:nowrap;line-height:1;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--maroon);color:#fff;box-shadow:0 8px 20px rgba(122,23,47,.25)}
.btn-primary:hover{background:var(--maroon-d);color:#fff}
.btn-gold{background:linear-gradient(135deg,var(--gold),var(--gold-d));color:#3a2c05;box-shadow:0 8px 20px rgba(201,162,39,.3)}
.btn-gold:hover{filter:brightness(1.05);color:#3a2c05}
.btn-outline{background:transparent;border-color:var(--maroon);color:var(--maroon)}
.btn-outline:hover{background:var(--maroon);color:#fff}
.btn-ghost{background:#fff;border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--maroon);color:var(--maroon)}
.btn-light{background:#fff;color:var(--maroon)}
.btn-light:hover{background:var(--cream-2)}
.btn-sm{padding:.5rem 1rem;font-size:.85rem}
.btn-lg{padding:.95rem 2rem;font-size:1.02rem}
.btn-block{width:100%}
.btn[disabled]{opacity:.55;cursor:not-allowed}

/* ============================ TOP BAR =========================== */
.topbar{background:var(--maroon-d);color:#f3e3c9;font-size:.82rem}
.topbar .container{display:flex;justify-content:space-between;align-items:center;height:38px;flex-wrap:wrap;gap:6px}
.topbar a{color:#f3e3c9}
.topbar a:hover{color:#fff}
.topbar .tb-l span,.topbar .tb-r a{margin-right:18px;display:inline-flex;align-items:center;gap:6px}
.topbar .tb-r a:last-child{margin-right:0}

/* ============================ HEADER =========================== */
.site-header{position:sticky;top:0;z-index:60;background:rgba(253,250,244,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px;gap:20px}
.brand img{height:46px}
.nav-links{display:flex;align-items:center;gap:28px;list-style:none;margin:0;padding:0}
.nav-links a{font-weight:600;font-size:.95rem;color:var(--ink);position:relative}
.nav-links a:hover,.nav-links a.active{color:var(--maroon)}
.nav-links a.active::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--gold)}
.nav-cta{display:flex;align-items:center;gap:10px}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;flex-direction:column;gap:5px;padding:8px}
.nav-toggle span{width:24px;height:2px;background:var(--maroon);border-radius:2px;transition:.3s}

/* avatar chip in nav (logged in) */
.nav-chip{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);padding:5px 14px 5px 5px;border-radius:999px;font-weight:600;font-size:.9rem}
.nav-chip img{width:32px;height:32px;border-radius:50%;object-fit:cover}

/* ============================ HERO ============================= */
.hero{position:relative;color:#fff;overflow:hidden;
  background:linear-gradient(rgba(60,8,22,.72),rgba(60,8,22,.78)),url('../img/hero-bg.jpg') center/cover no-repeat;}
.hero-inner{padding:96px 0 110px;position:relative;z-index:2}
.hero .badge-pill{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.12);border:1px solid rgba(230,205,114,.4);
  color:var(--gold-l);padding:.5rem 1rem;border-radius:999px;font-size:.8rem;font-weight:600;letter-spacing:.04em;margin-bottom:1.4rem}
.hero h1{color:#fff;max-width:14ch}
.hero h1 em{color:var(--gold-l);font-style:normal}
.hero p.lead{font-size:1.12rem;color:#f0e2cf;max-width:48ch;margin-bottom:2rem}
.hero-stats{display:flex;gap:38px;margin-top:42px;flex-wrap:wrap}
.hero-stats .s b{font-family:var(--serif);font-size:1.9rem;color:var(--gold-l);display:block;line-height:1}
.hero-stats .s span{font-size:.85rem;color:#e8d8c4}

/* hero search panel */
.hero-search{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
  padding:22px;margin-top:46px;max-width:920px}
.hero-search form{display:grid;grid-template-columns:repeat(4,1fr) auto;gap:12px;align-items:end}
.hero-search .field label{display:block;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.hero-search select,.hero-search input{width:100%}

/* =========================== FORMS ============================ */
.field{margin-bottom:1rem}
label{font-weight:600;font-size:.9rem;display:block;margin-bottom:.4rem;color:var(--ink)}
input[type=text],input[type=email],input[type=password],input[type=number],
input[type=date],input[type=tel],input[type=search],select,textarea{
  width:100%;padding:.72rem .9rem;border:1.5px solid var(--line);border-radius:var(--radius-sm);
  font-family:var(--font);font-size:.95rem;background:#fff;color:var(--ink);transition:.18s;
}
textarea{min-height:120px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 4px rgba(201,162,39,.14)}
select{appearance:none;background-image:url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%237a172f' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:34px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.hint{font-size:.8rem;color:var(--muted);margin-top:.35rem}
.req::after{content:" *";color:var(--bad)}

/* =========================== CARDS / PANELS ===================== */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.card-pad{padding:26px}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:30px}

/* auth card */
.auth-wrap{min-height:calc(100vh - 112px);display:grid;grid-template-columns:1.05fr .95fr}
.auth-aside{background:linear-gradient(160deg,var(--maroon),var(--maroon-d));color:#fff;padding:64px 56px;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}
.auth-aside::after{content:"";position:absolute;right:-120px;bottom:-120px;width:360px;height:360px;border-radius:50%;border:2px solid rgba(230,205,114,.18)}
.auth-aside h2{color:#fff}
.auth-aside .lead{color:#f0dcc4;max-width:38ch}
.auth-aside ul{list-style:none;padding:0;margin:24px 0 0}
.auth-aside li{display:flex;gap:12px;margin-bottom:14px;color:#f3e6d4}
.auth-aside li i{color:var(--gold-l)}
.auth-form{display:flex;align-items:center;justify-content:center;padding:48px 24px;background:var(--cream)}
.auth-form .inner{width:100%;max-width:430px}

/* =========================== PROFILE CARDS ===================== */
.profile-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:24px}
.pcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);transition:.25s;position:relative}
.pcard:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:#e3d2c0}
.pcard-img{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--cream-2)}
.pcard-img img{width:100%;height:100%;object-fit:cover;transition:.4s}
.pcard:hover .pcard-img img{transform:scale(1.05)}
.pcard-tag{position:absolute;top:12px;left:12px;background:rgba(122,23,47,.92);color:#fff;font-size:.72rem;font-weight:700;padding:.3rem .7rem;border-radius:999px;letter-spacing:.03em}
.pcard-id{position:absolute;top:12px;right:12px;background:rgba(255,255,255,.92);color:var(--maroon);font-size:.68rem;font-weight:700;padding:.3rem .6rem;border-radius:999px}
.pcard-verified{position:absolute;bottom:12px;right:12px;background:var(--ok);color:#fff;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:.7rem}
.pcard-body{padding:16px 18px 20px}
.pcard-body h4{font-family:var(--serif);font-size:1.12rem;margin:0 0 2px}
.pcard-sub{color:var(--muted);font-size:.85rem;margin-bottom:12px}
.pcard-meta{list-style:none;padding:0;margin:0 0 14px;font-size:.83rem;color:#5a4d54}
.pcard-meta li{display:flex;gap:8px;padding:3px 0;align-items:center}
.pcard-meta li i{color:var(--gold-d);width:16px;text-align:center}
.pcard-foot{display:flex;gap:8px}

/* =========================== BADGES =========================== */
.ui-badge{display:inline-flex;align-items:center;gap:5px;font-size:.72rem;font-weight:700;padding:.28rem .6rem;border-radius:999px;letter-spacing:.02em}
.badge-ok{background:var(--ok-bg);color:var(--ok)}
.badge-warn{background:var(--warn-bg);color:var(--warn)}
.badge-bad{background:var(--bad-bg);color:var(--bad)}
.badge-neutral{background:var(--cream-2);color:var(--muted)}

/* =========================== ALERTS =========================== */
.alert{position:relative;padding:.9rem 2.4rem .9rem 1rem;border-radius:var(--radius-sm);margin-bottom:1rem;font-size:.92rem;border:1px solid transparent}
.alert-success{background:var(--ok-bg);color:#136844;border-color:#bfe7d4}
.alert-danger{background:var(--bad-bg);color:#9c2424;border-color:#f0c4c4}
.alert-warning{background:var(--warn-bg);color:#8a6209;border-color:#eedfb0}
.alert-info{background:#eaf2fb;color:#1c4e85;border-color:#cfe0f5}
.alert-x{position:absolute;right:12px;top:50%;transform:translateY(-50%);cursor:pointer;font-size:1.2rem;opacity:.6}
.alert-x:hover{opacity:1}

/* =========================== FEATURE / STEP =================== */
.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.feature{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px 24px;text-align:center;transition:.25s}
.feature:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#e3d2c0}
.feature .ic{width:64px;height:64px;border-radius:18px;background:var(--cream-2);display:grid;place-items:center;margin:0 auto 18px;color:var(--maroon);font-size:1.5rem}
.feature h4{font-size:1.08rem;margin-bottom:.4rem}
.feature p{font-size:.9rem;color:var(--muted);margin:0}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;counter-reset:step}
.step{text-align:center;position:relative}
.step .num{counter-increment:step;width:60px;height:60px;border-radius:50%;margin:0 auto 16px;display:grid;place-items:center;
  background:#fff;border:2px solid var(--gold);font-family:var(--serif);font-size:1.4rem;color:var(--maroon);box-shadow:var(--shadow-sm)}
.step .num::before{content:counter(step,decimal-leading-zero)}
.step h4{font-size:1.05rem}
.step p{font-size:.88rem;color:var(--muted)}

/* =========================== BAND / CTA ====================== */
.band{background:linear-gradient(135deg,var(--maroon),var(--maroon-d));color:#fff;border-radius:var(--radius-lg);padding:54px;position:relative;overflow:hidden}
.band h2{color:#fff}
.band p{color:#f0dcc4}
.band::after{content:"";position:absolute;right:-80px;top:-80px;width:260px;height:260px;border-radius:50%;border:2px solid rgba(230,205,114,.2)}

/* =========================== PLANS =========================== */
.plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.plan{background:#fff;border:1.5px solid var(--line);border-radius:var(--radius-lg);padding:34px 28px;position:relative;transition:.25s}
.plan:hover{box-shadow:var(--shadow);transform:translateY(-4px)}
.plan.featured{border-color:var(--gold);box-shadow:var(--shadow-lg)}
.plan.featured::before{content:"Most Popular";position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:linear-gradient(135deg,var(--gold),var(--gold-d));color:#3a2c05;font-size:.72rem;font-weight:700;padding:.35rem 1rem;border-radius:999px;letter-spacing:.05em}
.plan h3{font-family:var(--serif);margin-bottom:.2rem}
.plan .price{font-family:var(--serif);font-size:2.4rem;color:var(--maroon);margin:.4rem 0 .1rem}
.plan .price small{font-size:.95rem;color:var(--muted);font-family:var(--font)}
.plan ul{list-style:none;padding:0;margin:20px 0 26px}
.plan ul li{padding:7px 0;font-size:.9rem;display:flex;gap:10px;color:#5a4d54;border-bottom:1px dashed var(--line)}
.plan ul li i{color:var(--ok)}
.plan ul li.off{color:#b6acb1}.plan ul li.off i{color:#cdbfc6}

/* =========================== STORIES ========================= */
.story-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.story{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}
.story img{aspect-ratio:10/7;object-fit:cover;width:100%}
.story .s-body{padding:20px}
.story h4{font-size:1.1rem;margin-bottom:.3rem}
.story .s-body p{font-size:.9rem;color:var(--muted)}
.story .s-names{color:var(--gold-d);font-weight:700;font-size:.85rem}

/* =========================== DASHBOARD ======================= */
.dash{display:grid;grid-template-columns:248px 1fr;gap:28px;align-items:start;padding:34px 0 60px}
.dash-side{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:18px;position:sticky;top:90px}
.dash-side .me{text-align:center;padding:14px 8px 18px;border-bottom:1px solid var(--line);margin-bottom:12px}
.dash-side .me img{width:78px;height:78px;border-radius:50%;object-fit:cover;margin:0 auto 10px;border:3px solid var(--gold-l)}
.dash-side .me h4{font-size:1.02rem;margin:0}
.dash-side .me span{font-size:.78rem;color:var(--muted)}
.dash-nav{list-style:none;padding:0;margin:0}
.dash-nav a{display:flex;align-items:center;gap:11px;padding:.7rem .8rem;border-radius:10px;color:#5a4d54;font-weight:600;font-size:.92rem}
.dash-nav a i{width:18px;text-align:center;color:var(--gold-d)}
.dash-nav a:hover{background:var(--cream-2);color:var(--maroon)}
.dash-nav a.active{background:var(--maroon);color:#fff}
.dash-nav a.active i{color:var(--gold-l)}
.dash-main{min-width:0}

.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:26px}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow-sm)}
.stat b{font-family:var(--serif);font-size:1.9rem;color:var(--maroon);display:block;line-height:1}
.stat span{font-size:.82rem;color:var(--muted)}
.stat .ic{float:right;width:42px;height:42px;border-radius:12px;background:var(--cream-2);display:grid;place-items:center;color:var(--maroon)}

/* =========================== TABLES ========================== */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
table.tbl{width:100%;border-collapse:collapse;font-size:.9rem;min-width:560px}
table.tbl th{background:var(--cream-2);text-align:left;padding:.8rem 1rem;font-weight:700;color:var(--maroon);white-space:nowrap}
table.tbl td{padding:.8rem 1rem;border-top:1px solid var(--line);vertical-align:middle}
table.tbl tr:hover td{background:#fdfbf7}
.tbl-actions{display:flex;gap:6px;flex-wrap:wrap}

/* =========================== PROFILE DETAIL =================== */
.pd-head{display:grid;grid-template-columns:300px 1fr;gap:34px;align-items:start}
.pd-photo{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);aspect-ratio:4/5}
.pd-photo img{width:100%;height:100%;object-fit:cover}
.pd-thumbs{display:flex;gap:10px;margin-top:12px}
.pd-thumbs img{width:64px;height:64px;border-radius:10px;object-fit:cover;border:2px solid transparent;cursor:pointer}
.pd-thumbs img:hover{border-color:var(--gold)}
.dl{display:grid;grid-template-columns:repeat(2,1fr);gap:0 30px}
.dl .row{display:flex;justify-content:space-between;gap:14px;padding:.7rem 0;border-bottom:1px dashed var(--line);font-size:.92rem}
.dl .row span{color:var(--muted)}
.dl .row b{font-weight:600;text-align:right}

/* chips / tabs */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:var(--cream-2);color:var(--maroon);padding:.4rem .9rem;border-radius:999px;font-size:.82rem;font-weight:600;border:1px solid var(--line)}

/* =========================== FOOTER ========================== */
.site-footer{background:var(--maroon-d);color:#e7d3bd;padding:64px 0 26px;margin-top:60px}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:36px}
.site-footer img.flogo{height:48px;margin-bottom:16px}
.site-footer h5{color:#fff;font-family:var(--font);font-weight:700;letter-spacing:.03em;margin-bottom:16px;font-size:.95rem}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer ul li{margin-bottom:9px}
.site-footer a{color:#e7d3bd;font-size:.9rem}
.site-footer a:hover{color:var(--gold-l)}
.foot-soc{display:flex;gap:10px;margin-top:14px}
.foot-soc a{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.08);display:grid;place-items:center;color:#fff}
.foot-soc a:hover{background:var(--gold);color:var(--maroon-d)}
.foot-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:44px;padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:.84rem;color:#cbb39c}

/* =========================== PAGE HEADER ===================== */
.page-hero{background:linear-gradient(rgba(60,8,22,.82),rgba(60,8,22,.86)),url('../img/hero-bg.jpg') center/cover;color:#fff;padding:64px 0;text-align:center}
.page-hero h1{color:#fff;margin-bottom:.4rem}
.page-hero .crumbs{color:#e8d3bd;font-size:.88rem}
.page-hero .crumbs a{color:var(--gold-l)}

/* =========================== WHATSAPP FAB ==================== */
.wa-fab{position:fixed;right:22px;bottom:22px;z-index:80;width:56px;height:56px;border-radius:50%;background:#25d366;color:#fff;display:grid;place-items:center;font-size:1.5rem;box-shadow:0 10px 24px rgba(37,211,102,.4)}
.wa-fab:hover{color:#fff;transform:scale(1.06)}

/* =========================== MISC ============================ */
.divider-img{margin:0 auto 16px;height:24px;opacity:.9}
.empty{text-align:center;padding:60px 20px;color:var(--muted)}
.empty i{font-size:2.4rem;color:var(--line);display:block;margin-bottom:14px}
.tag-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:8px}
hr.soft{border:0;border-top:1px solid var(--line);margin:26px 0}
.text-right{text-align:right}
.flex-between{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.5rem}.mt-2{margin-top:1rem}