:root {
  --pink: #e8204e;
  --pink-dark: #c4163f;
  --navy: #1c1c2e;
  --cream: #fff7f4;
  --gold: #c9a227;
}
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  font-family: 'Poppins', sans-serif;
  color: #2b2b35;
  background: #faf7f6;
}
.shaadi-nav {
  background: #fff;
  box-shadow: 0 1px 10px rgba(0,0,0,.06);
  padding: .55rem 0;
}
.brand-mark {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, var(--pink), #ff6b8a);
  color: #fff; display: grid; place-items: center; font-size: 15px;
}
.brand-text { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 1.45rem; color: var(--navy); }
.brand-text span { color: var(--pink); }
.shaadi-nav .nav-link { color: #333; font-weight: 500; font-size: .92rem; }
.shaadi-nav .nav-link:hover { color: var(--pink); }
.nav-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.user-chip { color: var(--navy); font-weight: 500; }
.btn-pink {
  background: var(--pink); color: #fff; border: none; border-radius: 24px;
  padding: .45rem 1.2rem; font-weight: 600;
}
.btn-pink:hover { background: var(--pink-dark); color: #fff; }
.btn-outline-pink {
  border: 1.5px solid var(--pink); color: var(--pink); border-radius: 24px; font-weight: 600;
  padding: .4rem 1.1rem;
}
.btn-outline-pink:hover { background: var(--pink); color: #fff; }
.btn-gold { background: var(--gold); color: #fff; border: none; border-radius: 24px; font-weight: 600; }
.hero {
  position: relative; min-height: 620px; color: #fff;
  background: url('https://images.unsplash.com/photo-1519741497674-611481863552?auto=format&fit=crop&w=1600&q=80') center/cover no-repeat, linear-gradient(120deg, #3a1020, #8b1e3a);
}
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(20,8,16,.72) 0%, rgba(40,10,22,.45) 55%, rgba(20,8,16,.25) 100%);
}
.hero-inner { position: relative; z-index: 2; padding: 90px 0 70px; }
.hero h1 {
  font-family: 'Playfair Display', serif; font-size: clamp(2rem, 4vw, 3.3rem); line-height: 1.2;
}
.trust-row { font-size: .9rem; opacity: .9; }
.search-card {
  background: #fff; color: #222; border-radius: 16px; padding: 22px;
  box-shadow: 0 18px 50px rgba(0,0,0,.25);
}
.search-card label { font-size: .75rem; font-weight: 600; color: #666; text-transform: uppercase; letter-spacing: .04em; }
.section-title { font-family: 'Playfair Display', serif; font-weight: 700; }
.community-pill {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: #fff; border-radius: 14px; padding: 18px 10px; text-decoration: none; color: #333;
  box-shadow: 0 6px 18px rgba(232,32,78,.08); transition: .2s;
}
.community-pill:hover { transform: translateY(-4px); color: var(--pink); }
.community-pill i { font-size: 1.6rem; color: var(--pink); }
.profile-card {
  background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,.06);
  transition: .2s;
}
.profile-card:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(0,0,0,.1); }
.profile-card .photo {
  height: 230px; background: #eee center/cover no-repeat; position: relative;
}
.photo-badge {
  position: absolute; top: 12px; left: 12px; background: var(--gold); color: #fff;
  font-size: .7rem; font-weight: 600; padding: 3px 8px; border-radius: 20px;
}
.verified-badge {
  position: absolute; top: 12px; right: 12px; background: #1aae6f; color: #fff;
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 13px;
}
.story-card { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,.06); }
.story-card img { height: 210px; width: 100%; object-fit: cover; }
.how-step { background: #fff; border-radius: 16px; padding: 28px; text-align: center; height: 100%; }
.how-step .num {
  width: 44px; height: 44px; margin: 0 auto 12px; border-radius: 50%;
  background: var(--cream); color: var(--pink); display: grid; place-items: center; font-weight: 700;
}
.shaadi-footer { background: #16161f; color: #fff; }
.shaadi-footer h6 { font-weight: 600; margin-bottom: 12px; }
.shaadi-footer a { display: block; color: #c9c9d4; text-decoration: none; font-size: .9rem; margin-bottom: 6px; }
.shaadi-footer a:hover { color: #fff; }
.page-hero {
  background: linear-gradient(120deg, #2b1020, #e8204e); color: #fff; padding: 36px 0 28px;
}
.auth-wrap { min-height: calc(100vh - 72px); background: var(--cream); }
.auth-card { background: #fff; border-radius: 18px; box-shadow: 0 12px 40px rgba(0,0,0,.08); }
.filter-bar { background: #fff; border-radius: 14px; padding: 16px; box-shadow: 0 6px 18px rgba(0,0,0,.05); }
.chat-list { background: #fff; border-radius: 14px; overflow: hidden; }
.chat-item { display: flex; gap: 12px; padding: 14px 16px; border-bottom: 1px solid #f1f1f1; text-decoration: none; color: inherit; }
.chat-item:hover, .chat-item.active { background: #fff4f6; }
.chat-bubble { max-width: 70%; padding: 10px 14px; border-radius: 16px; margin-bottom: 8px; }
.chat-bubble.me { margin-left: auto; background: var(--pink); color: #fff; border-bottom-right-radius: 4px; }
.chat-bubble.them { background: #f1f1f5; border-bottom-left-radius: 4px; }
.chat-window { background: #fff; border-radius: 14px; min-height: 480px; display: flex; flex-direction: column; }
.chat-body { flex: 1; padding: 16px; overflow-y: auto; background: #faf7f8; }
.profile-cover { height: 180px; background: linear-gradient(120deg, #3a1020, #e8204e); border-radius: 16px 16px 0 0; }
.stat-box { background: #fff; border-radius: 14px; padding: 18px; text-align: center; }
.stat-box h3 { color: var(--pink); margin: 0; }
.plan-card { border: 2px solid #eee; border-radius: 18px; padding: 28px; background: #fff; height: 100%; }
.plan-card.featured { border-color: var(--pink); transform: scale(1.03); }
.table-admin img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.install-hero { max-width: 640px; margin: 60px auto; background: #fff; border-radius: 18px; padding: 36px; }
#searchResults .spinner-border { width: 2rem; height: 2rem; }
@media (max-width: 767px) {
  .hero { min-height: 520px; }
  .profile-card .photo { height: 200px; }
}

.admin-shell{min-height:100vh;background:#f6f7fb}.admin-card{border:0;border-radius:16px;box-shadow:0 6px 24px rgba(20,20,40,.06)}
.admin-stat{background:#fff;border-radius:16px;padding:20px;box-shadow:0 6px 24px rgba(20,20,40,.06);height:100%}
.admin-stat .num{font-size:1.8rem;font-weight:700}.table-admin img{width:44px;height:44px;border-radius:50%;object-fit:cover}
.badge-status{text-transform:capitalize}.admin-actions form{display:inline-block}.sticky-top-admin{top:15px}


/* =========================================================
   APP UI REDESIGN — CSS ONLY
   PHP / HTML / DATABASE LOGIC REMAINS UNCHANGED
   ========================================================= */

:root{
  --app-primary:#e8204e;
  --app-primary-2:#ff5f7e;
  --app-bg:#f6f7fb;
  --app-surface:#ffffff;
  --app-text:#20222b;
  --app-muted:#777b87;
  --app-border:#ececf2;
  --app-shadow:0 8px 28px rgba(25,25,45,.07);
  --app-radius:18px;
}

html{scroll-behavior:smooth}
body{
  background:var(--app-bg);
  color:var(--app-text);
  font-family:'Poppins',sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{-webkit-tap-highlight-color:transparent}

/* ---------- top app bar ---------- */
.shaadi-nav{
  height:74px;
  padding:0;
  background:rgba(255,255,255,.96);
  border-bottom:1px solid rgba(30,30,50,.06);
  box-shadow:0 3px 20px rgba(25,25,45,.06);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  z-index:1030;
}
.shaadi-nav .container{
  height:100%;
  max-width:1240px;
}
.shaadi-nav .navbar-brand{
  min-width:170px;
}
.shaadi-nav .navbar-brand img{
  height:52px!important;
  width:auto;
  object-fit:contain;
}
.shaadi-nav .nav-link{
  position:relative;
  display:flex;
  align-items:center;
  gap:5px;
  min-height:44px;
  padding:.55rem .85rem!important;
  border-radius:12px;
  color:#535661;
  font-size:.86rem;
  font-weight:600;
  transition:.2s ease;
}
.shaadi-nav .nav-link:hover{
  background:#fff1f4;
  color:var(--app-primary);
}
.shaadi-nav .nav-link .badge{
  font-size:.58rem;
  padding:.27rem .42rem;
}
.user-chip{
  background:#f8f8fb;
  border:1px solid var(--app-border);
  padding:5px 10px 5px 6px;
  border-radius:30px;
  transition:.2s;
}
.user-chip:hover{
  background:#fff1f4;
  color:var(--app-primary);
}
.nav-avatar{
  width:38px;
  height:38px;
  border:2px solid #fff;
  box-shadow:0 2px 7px rgba(0,0,0,.12);
}

/* ---------- page shell ---------- */
.container{max-width:1240px}
main,.page-content{min-height:calc(100vh - 74px)}
body:not(.home) .container.py-4{
  padding-top:28px!important;
  padding-bottom:40px!important;
}
.page-hero{
  padding:30px 0 26px;
  background:
    radial-gradient(circle at 85% 20%,rgba(255,255,255,.18),transparent 28%),
    linear-gradient(135deg,#8e1738,#e8204e 58%,#ff6684);
}
.page-hero h1,.page-hero h2{
  font-family:'Poppins',sans-serif;
  font-weight:700;
  letter-spacing:-.02em;
}

/* ---------- cards become app surfaces ---------- */
.stat-box,
.auth-card,
.filter-bar,
.chat-list,
.search-card,
.how-step,
.community-pill,
.profile-card,
.story-card{
  border:1px solid var(--app-border);
  box-shadow:var(--app-shadow);
}
.stat-box{
  background:var(--app-surface);
  border-radius:var(--app-radius);
  padding:20px;
  transition:.2s;
}
.stat-box:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(25,25,45,.10)}
.stat-box h3{
  margin:0 0 4px;
  color:var(--app-primary);
  font-size:1.65rem;
  font-weight:700;
}
.section-title{
  font-family:'Poppins',sans-serif;
  letter-spacing:-.02em;
  color:#252631;
}

/* ---------- profile cards ---------- */
.profile-card{
  border-radius:20px;
  background:#fff;
  box-shadow:0 7px 24px rgba(20,20,40,.07);
}
.profile-card .photo{
  height:255px;
}
.profile-card .p-3{
  padding:17px!important;
}
.profile-card .btn{
  min-height:40px;
}
.profile-card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 34px rgba(20,20,40,.12);
}

/* ---------- controls ---------- */
.form-control,
.form-select{
  min-height:46px;
  border-radius:12px;
  border-color:#e3e4eb;
  background:#fff;
  font-size:.9rem;
  box-shadow:none!important;
}
.form-control:focus,
.form-select:focus{
  border-color:rgba(232,32,78,.55);
  box-shadow:0 0 0 3px rgba(232,32,78,.10)!important;
}
.form-label{
  font-size:.78rem;
  font-weight:600;
  color:#5f626d;
}
.btn{
  min-height:42px;
  border-radius:12px;
  font-weight:600;
  transition:.2s ease;
}
.btn-pink{
  border-radius:12px;
  background:linear-gradient(135deg,var(--app-primary),var(--app-primary-2));
  box-shadow:0 6px 15px rgba(232,32,78,.20);
}
.btn-pink:hover{
  background:linear-gradient(135deg,#cf163f,#f34d70);
  transform:translateY(-1px);
}
.btn-outline-pink{
  border-radius:12px;
}

/* ---------- mobile-app feel ---------- */
@media(max-width:991.98px){
  body{
    padding-bottom:76px;
  }
  .shaadi-nav{
    height:64px;
  }
  .shaadi-nav .container{
    padding:0 14px;
  }
  .shaadi-nav .navbar-brand{
    min-width:0;
  }
  .shaadi-nav .navbar-brand img{
    height:46px!important;
    max-width:145px;
  }
  .shaadi-nav .navbar-toggler{
    border:0;
    padding:8px;
    border-radius:12px;
    box-shadow:none;
  }
  .shaadi-nav .navbar-toggler:focus{
    box-shadow:0 0 0 3px rgba(232,32,78,.10);
  }

  /* The existing Bootstrap menu becomes an app drawer on mobile. */
  .shaadi-nav .navbar-collapse{
    position:fixed;
    left:10px;
    right:10px;
    top:70px;
    max-height:calc(100vh - 145px);
    overflow:auto;
    padding:12px;
    background:rgba(255,255,255,.98);
    border:1px solid var(--app-border);
    border-radius:18px;
    box-shadow:0 18px 45px rgba(15,15,30,.15);
  }
  .shaadi-nav .navbar-nav{
    gap:4px!important;
  }
  .shaadi-nav .nav-link{
    padding:12px 14px!important;
    min-height:48px;
  }
  .shaadi-nav .nav-link:hover{
    background:#fff1f4;
  }
  .shaadi-nav .dropdown{
    margin-top:8px;
    padding-top:8px;
    border-top:1px solid var(--app-border);
  }

  body:not(.home) .container.py-4{
    padding-top:18px!important;
    padding-bottom:26px!important;
  }
  .page-hero{
    padding:23px 0 20px;
  }
  .page-hero h1{font-size:1.55rem}
  .stat-box{padding:16px}
  .stat-box h3{font-size:1.35rem}
  .profile-card .photo{height:230px}
}

/* ---------- bottom app navigation on phones ---------- */
@media(max-width:575.98px){
  .shaadi-nav{
    position:sticky!important;
  }
  .shaadi-nav .navbar-collapse{
    display:none!important;
  }
  .shaadi-nav .navbar-collapse.show{
    display:block!important;
  }

  /* Floating app-like bottom navigation built from the existing nav items */
  .shaadi-nav .navbar-toggler{
    display:block;
  }

  body:has(.shaadi-nav .navbar-nav .nav-link[href*="matches.php"]) .shaadi-nav::after{
    content:"";
    position:fixed;
    left:10px;
    right:10px;
    bottom:10px;
    height:60px;
    border-radius:19px;
    background:rgba(255,255,255,.96);
    border:1px solid rgba(20,20,40,.08);
    box-shadow:0 10px 35px rgba(20,20,40,.16);
    z-index:1028;
    pointer-events:none;
  }

  body:has(.shaadi-nav .nav-link[href*="matches.php"]) .shaadi-nav .navbar-collapse{
    /* Keep the normal menu as the hamburger drawer; bottom bar is visual support. */
  }

  .hero{
    min-height:auto;
  }
  .hero-inner{
    padding:48px 0 34px;
  }
  .hero h1{
    font-size:2rem;
  }
  .search-card{
    padding:17px;
    border-radius:18px;
  }
  .search-card .row{
    --bs-gutter-y:.65rem;
  }
  .community-pill{
    padding:14px 8px;
    border-radius:15px;
  }
  .profile-card .photo{
    height:205px;
  }
  .auth-wrap{
    min-height:calc(100vh - 64px);
    padding-top:24px!important;
  }
  .auth-card{
    border-radius:20px;
    padding:24px!important;
  }
}

/* ---------- chat / inbox ---------- */
.chat-list{
  border-radius:18px;
}
.chat-item{
  padding:15px;
  transition:.15s;
}
.chat-item:hover,.chat-item.active{
  background:#fff3f6;
}
.chat-bubble{
  border-radius:18px;
  box-shadow:0 2px 8px rgba(20,20,40,.05);
}
.chat-bubble.me{
  background:linear-gradient(135deg,var(--app-primary),var(--app-primary-2))!important;
  color:#fff;
}

/* ---------- alerts ---------- */
.alert{
  border-radius:14px;
  border:1px solid transparent;
}
.alert-light{
  background:#fff;
  border-color:var(--app-border);
  box-shadow:var(--app-shadow);
}

/* ---------- dropdown ---------- */
.dropdown-menu{
  border:1px solid var(--app-border);
  border-radius:15px;
  padding:7px;
  box-shadow:0 14px 35px rgba(20,20,40,.12);
}
.dropdown-item{
  border-radius:10px;
  padding:9px 11px;
  font-size:.88rem;
}
.dropdown-item:hover{
  background:#fff1f4;
  color:var(--app-primary);
}

/* ---------- footer ---------- */
.shaadi-footer{
  background:#171821;
  border-radius:28px 28px 0 0;
  margin-top:28px;
}
@media(max-width:575.98px){
  .shaadi-footer{
    border-radius:22px 22px 0 0;
  }
}

/* ---------- install/app visual polish ---------- */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{
  background:#d9dae2;
  border-radius:20px;
}
::-webkit-scrollbar-track{background:transparent}

/* ---------- touch feedback ---------- */
@media(hover:none){
  .btn:active,
  .community-pill:active,
  .profile-card:active,
  .nav-link:active{
    transform:scale(.98);
  }
}

/* =========================================================
   SHADIWALLA — TRUE APP SHELL / MOBILE-FIRST REDESIGN
   UI ONLY: no PHP, SQL, forms or application logic changed.
   ========================================================= */
:root{
 --app-p:#e91e50;--app-p2:#ff6686;--app-bg:#f5f6fa;--app-card:#fff;
 --app-ink:#191b25;--app-muted:#858995;--app-line:#ececf1;
 --app-shadow:0 10px 30px rgba(24,25,38,.07);
}
html,body{background:var(--app-bg)}
body{padding-bottom:0}

/* desktop app frame */
.shaadi-nav{height:76px!important;background:rgba(255,255,255,.92)!important;border:0!important;box-shadow:0 1px 0 var(--app-line),0 5px 24px rgba(20,20,35,.05)!important;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.shaadi-nav .container{max-width:1180px}
.shaadi-nav .navbar-brand img{height:48px!important;max-width:170px}
.shaadi-nav .navbar-toggler{border:0;padding:8px;border-radius:12px;background:#f7f7fa}
.shaadi-nav .navbar-toggler:focus{box-shadow:none}
.shaadi-nav .nav-link{font-size:.82rem!important;font-weight:600!important;color:#646773!important;border-radius:13px!important}
.shaadi-nav .nav-link:hover,.shaadi-nav .nav-link:focus{color:var(--app-p)!important;background:#fff0f4!important}
.user-chip{border:1px solid var(--app-line)!important;background:#fff!important;box-shadow:0 3px 12px rgba(20,20,30,.05)}

/* turn page sections into app panels */
.page-hero{margin:0 auto;padding:26px 0 24px!important;background:linear-gradient(135deg,#831735 0%,#e91e50 62%,#ff6b89 100%)!important}
.page-hero h1,.page-hero h2{font-size:1.45rem!important;letter-spacing:-.035em}
.page-hero p{font-size:.76rem!important}
body:not(.home)>.container.py-4,body:not(.home) .container.py-4{max-width:1180px}
.stat-box,.filter-bar,.auth-card,.chat-list,.chat-window,.plan-card,.admin-card,.admin-stat{border:1px solid var(--app-line)!important;border-radius:20px!important;box-shadow:var(--app-shadow)!important;background:#fff}
.stat-box{padding:18px!important;position:relative;overflow:hidden}
.stat-box:after{content:"";position:absolute;right:-20px;top:-25px;width:70px;height:70px;border-radius:50%;background:#fff0f4}
.profile-card{border-radius:20px!important;border:1px solid var(--app-line)!important;box-shadow:var(--app-shadow)!important;overflow:hidden;background:#fff}
.profile-card:hover{transform:translateY(-4px);box-shadow:0 16px 38px rgba(20,20,35,.12)!important}
.profile-card .photo{height:255px!important}
.section-title{font-family:'Poppins',sans-serif!important;font-size:1.05rem!important;letter-spacing:-.02em}
.btn-pink,.btn-primary{border-radius:14px!important;font-weight:700!important;box-shadow:0 7px 18px rgba(233,30,80,.18)}
.btn-outline-pink{border-radius:14px!important}
.form-control,.form-select{min-height:46px;border-radius:13px!important;border-color:#e5e6eb!important;background:#fbfbfd!important}
.form-control:focus,.form-select:focus{border-color:#f18aa4!important;box-shadow:0 0 0 .2rem rgba(233,30,80,.08)!important;background:#fff!important}
.alert{border-radius:16px!important;border:1px solid var(--app-line)!important}

/* profile/search cards: app style */
.profile-card .p-3{padding:15px!important}
.profile-card h5{font-size:.98rem;font-weight:700}
.profile-card .text-muted{font-size:.74rem}
.community-pill{border-radius:18px!important;border:1px solid var(--app-line);box-shadow:var(--app-shadow)!important}
.story-card{border-radius:20px!important;border:1px solid var(--app-line);box-shadow:var(--app-shadow)!important}

/* mobile = real app */
@media(max-width:767.98px){
 html{background:#f5f6fa}
 body{font-size:13px;padding-bottom:78px;overflow-x:hidden}
 .shaadi-nav{position:sticky!important;top:0;height:62px!important;padding:0!important;border-bottom:1px solid #eee!important;box-shadow:0 4px 18px rgba(25,25,40,.06)!important}
 .shaadi-nav .container{padding:0 14px}
 .shaadi-nav .navbar-brand{min-width:0;margin-right:auto!important}
 .shaadi-nav .navbar-brand img{height:40px!important;max-width:142px}
 .shaadi-nav .navbar-toggler{display:none!important}
 .shaadi-nav .navbar-collapse{display:block!important;position:fixed;left:0;right:0;bottom:0;top:auto!important;height:72px!important;background:rgba(255,255,255,.97)!important;border-top:1px solid #e9e9ee;box-shadow:0 -8px 25px rgba(25,25,40,.08);z-index:2000;padding:5px 4px!important}
 .shaadi-nav .navbar-collapse>ul.navbar-nav{height:100%;display:flex!important;flex-direction:row!important;align-items:stretch!important;justify-content:space-around!important;gap:0!important;margin:0!important;width:100%!important}
 .shaadi-nav .navbar-collapse>ul.navbar-nav .nav-item{flex:1;display:flex;justify-content:center}
 .shaadi-nav .navbar-collapse>ul.navbar-nav .nav-link{width:100%;min-height:62px!important;display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:center!important;gap:3px!important;padding:6px 2px!important;border-radius:12px!important;font-size:0!important;color:#9a9da8!important;font-weight:600!important}
 .shaadi-nav .navbar-collapse>ul.navbar-nav .nav-link:before{font-family:"bootstrap-icons";font-size:20px;line-height:22px;font-weight:400}
 .shaadi-nav .navbar-collapse>ul.navbar-nav .nav-item:nth-child(1) .nav-link:before{content:"\f4e4"}
 .shaadi-nav .navbar-collapse>ul.navbar-nav .nav-item:nth-child(2) .nav-link:before{content:"\f52a"}
 .shaadi-nav .navbar-collapse>ul.navbar-nav .nav-item:nth-child(3) .nav-link:before{content:"\f32f"}
 .shaadi-nav .navbar-collapse>ul.navbar-nav .nav-item:nth-child(4) .nav-link:before{content:"\f4ad"}
 .shaadi-nav .navbar-collapse>ul.navbar-nav .nav-item:nth-child(5) .nav-link:before{content:"\f4ca"}
 .shaadi-nav .navbar-collapse>ul.navbar-nav .nav-link:hover,.shaadi-nav .navbar-collapse>ul.navbar-nav .nav-link:focus{background:#fff0f4;color:var(--app-p)!important}
 .shaadi-nav .navbar-collapse>ul.navbar-nav .nav-link .badge{position:absolute;margin:0 0 28px 22px;font-size:9px;padding:3px 5px}
 .shaadi-nav .navbar-collapse>.user-chip,.shaadi-nav .navbar-collapse>.dropdown{display:none!important}
 .shaadi-nav .navbar-collapse .d-flex{display:none!important}
 .shaadi-nav .navbar-collapse:before{content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);width:34px;height:3px;border-radius:3px;background:#d9d9df}
 .page-hero{padding:20px 15px!important}
 .page-hero .container{padding:0!important}
 .page-hero h2{font-size:1.28rem!important;margin-bottom:4px!important}
 body:not(.home) .container.py-4{padding:16px 13px 25px!important}
 .row.g-4{--bs-gutter-x:10px;--bs-gutter-y:10px}
 .row.g-3{--bs-gutter-x:9px;--bs-gutter-y:9px}
 .stat-box{padding:15px 12px!important;min-height:91px;border-radius:17px!important}
 .stat-box h3{font-size:1.38rem!important}
 .stat-box .text-muted{font-size:.68rem;line-height:1.25}
 .profile-card .photo{height:215px!important}
 .profile-card .p-3{padding:12px!important}
 .profile-card .btn{min-height:38px;font-size:.74rem}
 .search-card{padding:15px!important;border-radius:18px!important}
 .filter-bar{padding:12px!important}
 .chat-list,.chat-window{border-radius:18px!important}
 .chat-window{min-height:calc(100vh - 170px)!important}
 .chat-body{padding:12px!important}
 .chat-bubble{max-width:84%;font-size:.78rem}
 .plan-card{padding:20px!important}
 .plan-card.featured{transform:none}
 .shaadi-footer{display:none!important}
 .install-hero{margin:25px 12px!important;border-radius:22px!important;padding:25px!important}
 .table-responsive{border-radius:16px}
 h1{font-size:1.45rem}h2{font-size:1.3rem}h3{font-size:1.15rem}h4{font-size:1.02rem}
 .modal-content{border:0!important;border-radius:22px!important}
}

/* very small phones: compact 2-column profile grid */
@media(max-width:390px){
 .profile-card .photo{height:190px!important}
 .profile-card h5{font-size:.88rem}
 .profile-card .p-3{padding:10px!important}
 .page-hero h2{font-size:1.18rem!important}
}

/* desktop dashboard gets a premium application workspace feel */
@media(min-width:768px){
 body{background:#f4f5f9}
 body:not(.home) .container.py-4{padding-top:24px!important}
 .page-hero + .container{position:relative}
 .page-hero + .container:before{content:"";display:block;height:1px}
 .profile-card .photo{height:240px!important}
}


/* =========================================================
   PRODUCTION MOBILE APP SHELL
   PHP/HTML structure intentionally untouched.
   ========================================================= */
:root{
  --app-bg:#f6f7fb;
  --app-surface:#ffffff;
  --app-text:#171923;
  --app-muted:#8b909d;
  --app-line:#ececf2;
  --app-primary:#e8204e;
  --app-primary-soft:#fff0f4;
  --app-radius:18px;
  --app-shadow:0 6px 22px rgba(22,25,38,.07);
}

/* Keep the main header as a normal app top bar. */
.shaadi-nav{
  position:sticky !important;
  top:0 !important;
  z-index:1030 !important;
  min-height:64px;
  background:rgba(255,255,255,.97) !important;
  border-bottom:1px solid var(--app-line);
  box-shadow:0 2px 14px rgba(20,20,35,.055) !important;
  backdrop-filter:blur(14px);
}
.shaadi-nav .container{min-height:64px}
.shaadi-nav .navbar-brand img{display:block;max-height:46px;width:auto}
.shaadi-nav .nav-link{font-size:.84rem;font-weight:600;color:#4d5260}
.shaadi-nav .nav-link:hover{color:var(--app-primary)}
.shaadi-nav .navbar-toggler{
  border:0!important;
  width:42px;height:42px;border-radius:12px;
  background:#f5f6f9;
  box-shadow:none!important;
}
.shaadi-nav .navbar-toggler:focus{box-shadow:none}

/* Desktop application feel */
body:not(.home){
  background:var(--app-bg);
}
body:not(.home) main,
body:not(.home) .container.py-4{
  min-height:calc(100vh - 64px);
}
.page-hero{
  background:linear-gradient(135deg,#7c1733 0%,#e8204e 58%,#ff7894 100%) !important;
  border-radius:0 0 24px 24px;
}
.stat-box,.filter-bar,.chat-list,.chat-window,.plan-card,.auth-card,
.profile-card,.story-card,.community-pill{
  border:1px solid var(--app-line)!important;
  box-shadow:var(--app-shadow)!important;
}

/* Remove every previous fake mobile drawer/pseudo bar. */
@media(max-width:767.98px){
  body{
    background:var(--app-bg)!important;
    padding-bottom:88px!important;
  }

  /* Top app bar ONLY. It must never contain the bottom navigation. */
  .shaadi-nav{
    position:sticky!important;
    top:0!important;
    left:auto!important;
    right:auto!important;
    bottom:auto!important;
    height:64px!important;
    min-height:64px!important;
    padding:0!important;
    z-index:1030!important;
    /* Important: backdrop-filter on the sticky parent creates a fixed-position containing block.
       That makes the bottom nav appear at the top on mobile. */
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    transform:none!important;
    filter:none!important;
    contain:none!important;
  }
  .shaadi-nav .container{
    height:64px!important;
    min-height:64px!important;
    padding:0 14px!important;
  }
  .shaadi-nav .navbar-brand{
    margin-right:auto!important;
    padding:0!important;
  }
  .shaadi-nav .navbar-brand img{
    height:42px!important;
    max-height:42px!important;
    max-width:145px!important;
  }

  /* Do not show Bootstrap collapse/drawer at the top. */
  .shaadi-nav .navbar-collapse{
    position:fixed!important;
    top:auto!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    width:100%!important;
    height:76px!important;
    max-height:none!important;
    margin:0!important;
    padding:6px 5px 8px!important;
    overflow:visible!important;
    display:block!important;
    background:rgba(255,255,255,.985)!important;
    border:0!important;
    border-top:1px solid #e8e9ee!important;
    border-radius:0!important;
    box-shadow:0 -8px 28px rgba(20,22,35,.10)!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    z-index:1100!important;
  }

  /* Eliminate the old drawer handle. */
  .shaadi-nav .navbar-collapse:before{display:none!important}

  /* Five real app tabs. */
  .shaadi-nav .navbar-collapse>ul.navbar-nav{
    height:100%!important;
    width:100%!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:stretch!important;
    justify-content:space-around!important;
    gap:0!important;
    margin:0!important;
    padding:0!important;
  }
  .shaadi-nav .navbar-collapse>ul.navbar-nav .nav-item{
    flex:1 1 20%!important;
    width:20%!important;
    height:100%!important;
    display:flex!important;
    justify-content:center!important;
    align-items:stretch!important;
    position:relative!important;
  }
  .shaadi-nav .navbar-collapse>ul.navbar-nav .nav-link{
    position:relative!important;
    width:100%!important;
    height:100%!important;
    min-height:62px!important;
    padding:5px 2px 3px!important;
    margin:0!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    align-items:center!important;
    gap:3px!important;
    border-radius:13px!important;
    color:#8d919d!important;
    font-size:10px!important;
    line-height:1!important;
    font-weight:600!important;
    text-decoration:none!important;
  }
  .shaadi-nav .navbar-collapse>ul.navbar-nav .nav-link:before{
    font-family:"bootstrap-icons"!important;
    display:block!important;
    font-size:20px!important;
    line-height:22px!important;
    font-weight:400!important;
  }
  .shaadi-nav .navbar-collapse>ul.navbar-nav .nav-item:nth-child(1) .nav-link:before{content:"\f4e4"}
  .shaadi-nav .navbar-collapse>ul.navbar-nav .nav-item:nth-child(2) .nav-link:before{content:"\f52a"}
  .shaadi-nav .navbar-collapse>ul.navbar-nav .nav-item:nth-child(3) .nav-link:before{content:"\f32f"}
  .shaadi-nav .navbar-collapse>ul.navbar-nav .nav-item:nth-child(4) .nav-link:before{content:"\f4ad"}
  .shaadi-nav .navbar-collapse>ul.navbar-nav .nav-item:nth-child(5) .nav-link:before{content:"\f4ca"}

  .shaadi-nav .navbar-collapse>ul.navbar-nav .nav-link:hover,
  .shaadi-nav .navbar-collapse>ul.navbar-nav .nav-link:focus,
  .shaadi-nav .navbar-collapse>ul.navbar-nav .nav-link.active{
    color:var(--app-primary)!important;
    background:var(--app-primary-soft)!important;
  }

  .shaadi-nav .navbar-collapse>ul.navbar-nav .nav-link .badge{
    position:absolute!important;
    top:7px!important;
    right:18%!important;
    margin:0!important;
    min-width:16px!important;
    height:16px!important;
    padding:2px 4px!important;
    font-size:8px!important;
    line-height:12px!important;
    border:2px solid #fff!important;
  }

  /* Hide profile dropdown from bottom navigation; keep it in the top bar via separate mobile trigger. */
  .shaadi-nav .navbar-collapse>.dropdown,
  .shaadi-nav .navbar-collapse>.user-chip,
  .shaadi-nav .navbar-collapse>.d-flex{
    display:none!important;
  }

  /* The top bar remains clean: hide desktop link collapse trigger. */
  .shaadi-nav>.container>.navbar-toggler{display:none!important}

  /* Never render the previous pseudo navigation strip. */
  .shaadi-nav:after{display:none!important}

  /* Content spacing */
  .page-hero{
    margin:0!important;
    padding:20px 15px 19px!important;
    border-radius:0 0 20px 20px!important;
  }
  .page-hero .container{padding:0!important}
  body:not(.home) .container.py-4{
    padding:15px 13px 28px!important;
  }

  /* App cards */
  .profile-card{
    border-radius:18px!important;
    overflow:hidden!important;
    background:#fff!important;
  }
  .profile-card .photo{height:215px!important}
  .profile-card .p-3{padding:12px!important}
  .profile-card h5{font-size:.9rem!important}
  .profile-card .btn{min-height:38px!important;font-size:.72rem!important}

  .stat-box{
    min-height:90px!important;
    padding:14px 12px!important;
    border-radius:17px!important;
  }

  .filter-bar{
    border-radius:18px!important;
    padding:12px!important;
    background:#fff!important;
  }
  .form-control,.form-select{
    min-height:46px!important;
    border-radius:12px!important;
  }

  .chat-list,.chat-window{border-radius:18px!important}
  .shaadi-footer{display:none!important}
}

/* On wider screens, don't show mobile bottom navigation. */
@media(min-width:768px){
  .shaadi-nav .navbar-collapse{
    position:static!important;
    display:flex!important;
    height:auto!important;
    width:auto!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
  }
}

/* Small phones */
@media(max-width:390px){
  .shaadi-nav .navbar-collapse>ul.navbar-nav .nav-link{
    font-size:9px!important;
  }
  .shaadi-nav .navbar-collapse>ul.navbar-nav .nav-link:before{
    font-size:19px!important;
  }
  .profile-card .photo{height:195px!important}
}

/* =========================================================
   MOBILE INDEX / VIEWPORT OVERFLOW FIX
   Prevent accidental horizontal page movement while keeping
   normal vertical page scrolling for long home content.
   ========================================================= */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden !important;
}

body {
  margin: 0;
  overscroll-behavior-x: none;
}

@media (max-width: 767.98px) {
  .hero,
  .hero-inner,
  main,
  section,
  footer,
  .container,
  .container-fluid {
    max-width: 100%;
  }

  .hero,
  .hero-inner,
  section,
  .shaadi-footer {
    overflow-x: clip;
  }

  .row {
    max-width: 100%;
  }

  /* Bootstrap rows can create a few pixels of horizontal overflow
     on narrow screens because of negative gutters. */
  .container > .row,
  .hero-inner .row {
    margin-left: 0;
    margin-right: 0;
  }

  .search-card,
  .community-pill,
  .profile-card,
  .story-card,
  .stat-box,
  .how-step {
    max-width: 100%;
  }

  img,
  video,
  iframe {
    max-width: 100%;
  }
}


/* FINAL MOBILE NAV POSITION FIX
   Keep the app navigation attached to the viewport bottom. The sticky header must
   not create a containing block for this fixed element. */
@media(max-width:767.98px){
  .shaadi-nav{
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    transform:none!important;
    filter:none!important;
    perspective:none!important;
  }
  .shaadi-nav .navbar-collapse{
    position:fixed!important;
    top:auto!important;
    bottom:0!important;
    left:0!important;
    right:0!important;
    width:100vw!important;
    height:76px!important;
    margin:0!important;
    transform:none!important;
  }
}


/* =========================================================
   MOBILE APP TOP BAR ACTIONS
   The logo stays on the left. Logged-in users get their name/avatar
   dropdown on the right; guests get a compact Login button.
   ========================================================= */
.mobile-top-user,
.mobile-login-btn { display:none; }

.mobile-user-trigger {
  display:flex;
  align-items:center;
  gap:7px;
  max-width:145px;
  padding:5px 8px 5px 5px;
  color:#252633;
  text-decoration:none;
  font-size:.78rem;
  font-weight:600;
  border:1px solid var(--app-line, #ececf2);
  border-radius:999px;
  background:#fff;
  box-shadow:0 4px 12px rgba(20,20,30,.05);
}
.mobile-user-trigger::after { margin-left:1px; }
.mobile-user-avatar {
  width:31px;
  height:31px;
  border-radius:50%;
  object-fit:cover;
  flex:0 0 31px;
}
.mobile-user-menu {
  min-width:215px;
  margin-top:9px!important;
  padding:7px;
  border:1px solid #eeeef3;
  border-radius:16px;
  box-shadow:0 16px 40px rgba(22,22,40,.16);
}
.mobile-user-menu .dropdown-item {
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 11px;
  border-radius:10px;
  font-size:.82rem;
}
.mobile-user-menu .dropdown-item i { width:18px; font-size:16px; }

@media(max-width:767.98px){
  .shaadi-nav > .container {
    min-height:62px;
    display:flex;
    align-items:center;
  }
  .shaadi-nav .navbar-brand { flex:1 1 auto; min-width:0; }
  .shaadi-nav .navbar-brand img { height:39px!important; max-width:142px; width:auto; object-fit:contain; }

  /* Mobile right-side action is always visible. */
  .mobile-top-user,
  .mobile-login-btn { display:flex!important; flex:0 0 auto; }
  .mobile-top-user { margin-left:8px; }
  .mobile-login-btn {
    align-items:center;
    gap:5px;
    margin-left:8px;
    padding:8px 12px;
    border-radius:999px;
    background:linear-gradient(135deg,#e91e4f,#ff5d7f);
    color:#fff!important;
    text-decoration:none;
    font-size:.76rem;
    font-weight:700;
    box-shadow:0 5px 14px rgba(233,30,79,.22);
  }
  .mobile-login-btn i { font-size:15px; }

  /* The main desktop dropdown stays out of the top bar on phones; its
     mobile duplicate above provides the full user menu. */
  .shaadi-nav .navbar-collapse > .dropdown,
  .shaadi-nav .navbar-collapse > .d-flex { display:none!important; }

  /* Keep all five primary app destinations in the fixed bottom nav. */
  .shaadi-nav .navbar-collapse > ul.navbar-nav { width:100%!important; }
}

@media(min-width:768px){
  .mobile-top-user,
  .mobile-login-btn { display:none!important; }
}