/* ============================================================
   LifePass — Design System v2
   Palette: Navy Trust  |  Type: Space Grotesk + DM Sans
   This file loads AFTER style.css and overrides tokens.
   ============================================================ */

@import url("../fonts/fonts.css");

:root{
  /* ---- Brand palette (Navy Trust refined) ---- */
  --lp-primary:        #0f1b3d;   /* deep navy */
  --lp-primary-600:    #1e3a5f;
  --lp-primary-500:    #3b6fa0;
  --lp-primary-soft:   #eef2f8;
  --lp-primary-dark:   #060d24;
  --lp-secondary:      #3b6fa0;
  --lp-accent:         #d6b25a;   /* refined gold */
  --lp-accent-soft:    #f6ecd2;
  --lp-success:        #16a34a;
  --lp-danger:         #dc2626;
  --lp-warning:        #f59e0b;

  /* ---- Neutrals ---- */
  --lp-dark:           #0b1428;
  --lp-text:           #1f2a44;
  --lp-muted:          #5b6b8c;
  --lp-bg:             #f6f8fc;
  --lp-card:           #ffffff;
  --lp-border:         #e3e8f1;
  --lp-border-strong:  #cdd5e3;

  /* ---- Typography ---- */
  --lp-font-display:   "Baloo Da 2", "Hind Siliguri", "Noto Sans Bengali", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --lp-font-body:      "Baloo Da 2", "Hind Siliguri", "Noto Sans Bengali", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  /* ---- Shape & motion ---- */
  --lp-radius-xs: 8px;
  --lp-radius-sm: 10px;
  --lp-radius:    14px;
  --lp-radius-lg: 20px;
  --lp-radius-xl: 28px;

  --lp-shadow-xs: 0 1px 2px rgba(15,27,61,.06);
  --lp-shadow-sm: 0 4px 12px rgba(15,27,61,.06);
  --lp-shadow:    0 10px 30px rgba(15,27,61,.08);
  --lp-shadow-lg: 0 24px 60px -12px rgba(15,27,61,.18);
  --lp-shadow-glow: 0 16px 40px -12px rgba(59,111,160,.45);

  --lp-ease: cubic-bezier(.2,.7,.2,1);

  /* Bootstrap bridge */
  --bs-primary: #0f1b3d;
  --bs-primary-rgb: 15,27,61;
  --bs-body-font-family: var(--lp-font-body);
  --bs-body-color: var(--lp-text);
  --bs-body-bg: var(--lp-bg);
  --bs-border-color: var(--lp-border);
}

/* ---- Base typography refresh ---- */
html{ -webkit-text-size-adjust:100%; }
body{
  font-family: var(--lp-font-body);
  color: var(--lp-text);
  background: var(--lp-bg);
  font-feature-settings:"ss01","cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1,h2,h3,h4,h5,h6,
.navbar-brand,.section-title,.vr-name,
.pkg-card h3,.feature-card h5,.blog-card h5{
  font-family: var(--lp-font-display);
  letter-spacing:-.01em;
  color: var(--lp-dark);
}
h1{ font-weight:700; }
h2,h3{ font-weight:700; }
h4,h5,h6{ font-weight:600; }
.lead,p{ line-height:1.65; }
small,.small{ letter-spacing:.005em; }
a{ color: var(--lp-primary-500); }
a:hover{ color: var(--lp-primary); }

/* ---- Eyebrow (refined) ---- */
.eyebrow{
  display:inline-flex;align-items:center;gap:.4rem;
  color: var(--lp-primary);
  background: var(--lp-primary-soft);
  border:1px solid color-mix(in srgb, var(--lp-primary) 12%, transparent);
  padding:.32rem .8rem;border-radius:99px;
  font-family: var(--lp-font-display);
  font-size:.72rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.14em;
  margin-bottom:.85rem;
}

/* ---- Buttons (cleaner, modern) ---- */
.btn{
  font-family: var(--lp-font-display);
  font-weight:600;
  border-radius: var(--lp-radius-sm);
  transition: transform .18s var(--lp-ease), box-shadow .18s var(--lp-ease), background .18s, color .18s, border-color .18s;
}
.btn-lg{ padding:.9rem 1.6rem; border-radius:12px; font-size:1rem; }
.btn-primary,.btn-lp{
  background: var(--lp-primary);
  border-color: var(--lp-primary);
  color:#fff;
  box-shadow: 0 8px 20px -8px rgba(15,27,61,.45);
}
.btn-primary:hover,.btn-primary:focus,
.btn-lp:hover,.btn-lp:focus{
  background: var(--lp-primary-600);
  border-color: var(--lp-primary-600);
  color:#fff;
  transform: translateY(-1px);
  box-shadow: var(--lp-shadow-glow);
}
.btn-outline-primary,.btn-outline-lp{
  color: var(--lp-primary);
  border-color: var(--lp-border-strong);
  background:#fff;
}
.btn-outline-primary:hover,.btn-outline-lp:hover{
  background: var(--lp-primary);
  border-color: var(--lp-primary);
  color:#fff;
}
.btn-accent{
  background: var(--lp-accent);
  border-color: var(--lp-accent);
  color:#3a2700;
}
.btn-accent:hover{ background:#c9a347; border-color:#c9a347; color:#3a2700; }

/* ---- Forms ---- */
.form-control,.form-select{
  border-radius: var(--lp-radius-sm);
  border-color: var(--lp-border);
  padding:.7rem .9rem;
  font-family: var(--lp-font-body);
  transition: border-color .15s, box-shadow .15s;
}
.form-control:focus,.form-select:focus{
  border-color: var(--lp-primary-500);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--lp-primary-500) 18%, transparent);
}
.form-control-lg{ height:52px; border-radius:12px; }

/* ---- Cards (universal lift) ---- */
.card,.feature-card,.pkg-card,.blog-card,.t-card,.partner-item,.verify-card,.qs-card{
  border-radius: var(--lp-radius-lg);
  border:1px solid var(--lp-border);
  background: var(--lp-card);
  transition: transform .25s var(--lp-ease), box-shadow .25s var(--lp-ease), border-color .25s;
}
.feature-card,.pkg-card,.blog-card,.t-card,.verify-card{
  box-shadow: var(--lp-shadow-xs);
}
.feature-card:hover,.pkg-card:hover,.blog-card:hover,.t-card:hover,.partner-item:hover{
  transform: translateY(-6px);
  box-shadow: var(--lp-shadow-lg);
  border-color: color-mix(in srgb, var(--lp-primary) 22%, var(--lp-border));
}
.feature-card .feature-ic{
  background: linear-gradient(135deg, var(--lp-primary-soft), #fff);
  color: var(--lp-primary);
  border:1px solid var(--lp-border);
}
.pkg-card.featured{ border:2px solid var(--lp-primary); }
.pkg-card.featured::before{
  background: var(--lp-accent); color:#3a2700;
}
.pkg-card .pkg-price{ color: var(--lp-primary); }
.pkg-card ul li i.bi-check-circle-fill{ color: var(--lp-success); }

/* ---- Hero refresh ---- */
.hero{
  background:
    radial-gradient(900px 420px at 90% -10%, rgba(214,178,90,.18), transparent 60%),
    radial-gradient(900px 520px at 0% 110%, rgba(59,111,160,.18), transparent 60%),
    linear-gradient(180deg,#f3f6fc 0%, #eaf0f9 100%);
  padding: clamp(56px,8vw,96px) 0 clamp(64px,9vw,110px);
}
.hero::before{ display:none; }
.hero h1{
  font-family: var(--lp-font-display);
  font-weight:700;
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  letter-spacing:-.02em;
  color: var(--lp-dark);
}
.hero p.lead{ color: var(--lp-muted); }
.ht-chip{
  background:#fff; color: var(--lp-text);
  border:1px solid var(--lp-border);
  box-shadow: var(--lp-shadow-xs);
}
.ht-chip i{ color: var(--lp-primary); }
.hero-stats .hs-item h3{
  font-family: var(--lp-font-display);
  color: var(--lp-primary);
}

/* ---- Membership card (navy + gold) ---- */
.lp-card,.member-card{

  box-shadow: 0 30px 60px -20px rgba(15,27,61,.55);
}
.lp-card-number,.member-card .mc-num{ color:#f3e9cd; letter-spacing:3px; }
.member-card::after{ background: rgba(214,178,90,.10); }
.member-card .mc-chip{
  background: linear-gradient(135deg,#f1d999,#c8a44a);
}

/* ---- Navbar (cleaner) ---- */
.navbar-lp{
  background:#fff;
  border-bottom:1px solid var(--lp-border);
  box-shadow: 0 1px 0 rgba(15,27,61,.04);
}
.navbar-lp.is-scrolled{ box-shadow: 0 6px 24px rgba(15,27,61,.08); }
.navbar-lp .nav-link{
  font-family: var(--lp-font-display);
  font-weight:500;
  color: var(--lp-text);
}
.navbar-lp .nav-link:hover,
.navbar-lp .nav-link.active{
  color: var(--lp-primary);
  background: var(--lp-primary-soft);
}
.nav-cta{
  background: var(--lp-primary);
  box-shadow: 0 8px 20px -8px rgba(15,27,61,.5);
}
.nav-cta:hover{ background: var(--lp-primary-600); }

/* ---- Top bar ---- */
.topbar{
  background: var(--lp-primary-dark);
  color: #c9d2e4;
  border-bottom:0;
}

/* ---- Section spacing rhythm ---- */
.section{ padding: clamp(56px, 7vw, 96px) 0; }
.section-sm{ padding: clamp(40px, 5vw, 64px) 0; }
.section-title{
  font-family: var(--lp-font-display);
  font-weight:700;
  letter-spacing:-.02em;
}

/* ---- Verify result polish ---- */
.vr-card{
  border-radius: var(--lp-radius-lg);
  border:1px solid var(--lp-border);
  box-shadow: var(--lp-shadow);
}
.vr-ribbon{ background: var(--lp-success); }

/* ---- Footer refinement ---- */
.footer{
  background:
    radial-gradient(700px 320px at 100% 0%, rgba(214,178,90,.10), transparent 60%),
    linear-gradient(180deg, #06101f 0%, #03070f 100%);
}
.footer-glow-2{ background: var(--lp-accent); }
.footer .social a:hover{
  background: var(--lp-primary-500);
  border-color: var(--lp-primary-500);
  box-shadow: 0 8px 18px -8px var(--lp-primary-500);
}

/* ---- Mini cart accent ---- */
.mini-cart .offcanvas-header{
  background: linear-gradient(135deg, var(--lp-primary), var(--lp-primary-600));
}
.mc-count{ background: var(--lp-accent); color:#3a2700; }

/* ---- Floating action ---- */
.fab,.fab-action{ box-shadow: var(--lp-shadow-glow); }
.fab{ background: var(--lp-primary); }
.fab:hover{ background: var(--lp-primary-600); }

/* ---- Focus ring ---- */
:focus-visible{
  outline:3px solid color-mix(in srgb, var(--lp-primary-500) 50%, transparent);
  outline-offset:2px;
}

/* ---- Selection ---- */
::selection{ background: color-mix(in srgb, var(--lp-primary) 18%, transparent); color: var(--lp-primary-dark); }

/* ---- Scrollbar (modern) ---- */
@media (pointer:fine){
  ::-webkit-scrollbar{ width:10px; height:10px; }
  ::-webkit-scrollbar-thumb{ background: var(--lp-border-strong); border-radius:99px; }
  ::-webkit-scrollbar-thumb:hover{ background: var(--lp-primary-500); }
}

/* ---- Containers — keep .container-xxl readable on big screens ---- */
.container,.container-xxl{ max-width:1240px; }
@media (min-width:1400px){
  .container-xxl{ max-width:1280px; }
}

/* ---- Responsive type ---- */
@media (max-width:575px){
  .btn-lg{ padding:.8rem 1.2rem; font-size:.95rem; }
  .section{ padding:48px 0; }
  .section-sm{ padding:36px 0; }
}