/* ========== Design Tokens ========== */
:root{
  /* Brand palette */
  --brand-1:#4f46e5; /* indigo-600 */
  --brand-2:#06b6d4; /* cyan-500 */
  --brand-3:#16a34a; /* emerald-600 */
  --brand-4:#f59e0b; /* amber-500 */

  /* Surfaces & text */
  --surface-1:#ffffff;
  --surface-2:#f8fafc;   /* slate-50 */
  --text-1:#0f172a;      /* slate-900 */
  --text-2:#475569;      /* slate-600 */

  /* Radius & shadow */
  --radius:1.2rem;
  --shadow-lg:0 10px 30px rgba(2,6,23,.12);
  --shadow-sm:0 4px 14px rgba(2,6,23,.08);

  /* Spacing scale */
  --space-xs:.5rem; --space-sm:.75rem; --space-md:1.25rem; --space-lg:1.75rem; --space-xl:2.25rem;
}
[data-bs-theme="dark"]:root{
  --surface-1:#0b1220;
  --surface-2:#0f172a;
  --text-1:#e2e8f0;
  --text-2:#94a3b8;
  --shadow-lg:0 10px 34px rgba(0,0,0,.55);
  --shadow-sm:0 6px 18px rgba(0,0,0,.35);
}

/* ========== Base ========== */
html{ scroll-behavior:smooth; }
body{
  background:
    radial-gradient(1200px 600px at -10% -10%, rgba(79,70,229,.08), transparent 60%),
    radial-gradient(800px 600px at 110% -20%, rgba(6,182,212,.08), transparent 60%),
    var(--surface-2);
}
section[id]{ scroll-margin-top: calc(var(--nav-h, 64px) + 1rem); }

/* ========== Hero ========== */
.hero{
  position:relative;
  background:linear-gradient(135deg,var(--brand-1),var(--brand-2));
  border-radius:calc(var(--radius) + .6rem);
  box-shadow:var(--shadow-lg);
  overflow:hidden; color:#fff;
}
.hero:before{
  content:""; position:absolute; inset:-20%;
  background:
    radial-gradient(500px 220px at 15% 20%, rgba(255,255,255,.18), transparent 60%),
    radial-gradient(420px 220px at 85% 30%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(600px 260px at 50% 120%, rgba(255,255,255,.12), transparent 60%);
  mix-blend-mode:screen; pointer-events:none;
}
.hero h2 {
    color: var(--bs-secondary-color);
}
@media (min-width:768px){ .hero{ padding:2.25rem 2.5rem!important; } }
@media (min-width:992px){ .hero .row{ min-height:420px; } } /* adjust 380–460px if needed */

.hero-compare { padding:1.25rem 1.5rem!important; }
@media (min-width:992px){ .hero-compare .row{ min-height:initial; } }
@media (min-width: 768px) {
    .hero-compare {
        padding: 2.25rem 2.5rem !important;
    }
}

/* ========== Cards & Accents ========== */
.card-elevated{ border:0; border-radius:var(--radius); box-shadow:var(--shadow-lg); background:var(--surface-1); }
.card-elevated:hover{ transform:translateY(-2px); transition:.25s ease; box-shadow:0 16px 36px rgba(2,6,23,.16); }

.border-gradient{
  border:1px solid transparent;
  background-image:
    linear-gradient(var(--surface-1),var(--surface-1)),
    linear-gradient(135deg,rgba(79,70,229,.7),rgba(6,182,212,.7));
  background-clip:padding-box, border-box;
  background-origin:padding-box, border-box;
  border-radius:var(--radius);
}

/* Card inner spacing */
.card-elevated>.card-body{ padding:var(--space-lg); }
@media (min-width:768px){ .card-elevated>.card-body{ padding:var(--space-xl); } }

/* Optional bordered box padding (used in comparison overview tiles) */
.border-gradient{ padding:var(--space-md); }
@media (min-width:768px){ .border-gradient{ padding:var(--space-lg); } }

/* ========== Chips ========== */
.chip{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.35rem .75rem; border-radius:999px; font-weight:600;
  background:rgba(79,70,229,.10); color:var(--brand-1); border:1px solid rgba(79,70,229,.25);
}
.chip.success{ background:rgba(22,163,74,.10); color:var(--brand-3); border-color:rgba(22,163,74,.25); }
.chip.warning{ background:rgba(245,158,11,.10); color:var(--brand-4); border-color:rgba(245,158,11,.25); }
/* extra chip aliases used in comparison page */
.chip.saving{ background:rgba(245,158,11,.10); color:var(--brand-4); border-color:rgba(245,158,11,.25); }
.chip.location{ background:rgba(245,158,11,.10); color:var(--brand-4); border-color:rgba(245,158,11,.25); }

/* ========== Tables ========== */
.table-modern thead th{
  background:linear-gradient(90deg, rgba(79,70,229,.10), rgba(6,182,212,.10));
  border-bottom:0; color:var(--text-1);
}
.table-modern tbody tr{ --bs-table-accent-bg:transparent; transition:background-color .2s ease; }
.table-modern tbody tr:hover{ background:rgba(15,23,42,.03); }
[data-bs-theme="dark"] .table-modern thead th{
  background:linear-gradient(90deg, rgba(79,70,229,.22), rgba(6,182,212,.18));
}
[data-bs-theme="dark"] .table-modern tbody tr:hover{ background:rgba(255,255,255,.03); }

/* Table & list cell padding (comparison page) */
.table-modern th, .table-modern td{ padding:.9rem 1rem; }
.list-group-flush .list-group-item{ padding:.95rem 1.15rem; }

/* ========== Pricing & Alerts (comparison page) ========== */
.price-card{
  position:relative; border-radius:var(--radius); box-shadow:var(--shadow-sm);
  background:linear-gradient(180deg, var(--surface-1), rgba(79,70,229,.03));
  border:1px solid rgba(2,6,23,.06); padding:var(--space-md);
}
@media (min-width:768px){ .price-card{ padding:var(--space-lg); } }
.price-tag{ font-size:clamp(1.25rem, 1.1rem + 1.2vw, 2rem); font-weight:800; }

.alert-gradient{
  background:linear-gradient(90deg, rgba(79,70,229,.12), rgba(6,182,212,.12));
  border:1px solid rgba(79,70,229,.25); color:var(--text-1);
}

/* ========== Section Headers & Buttons ========== */
.section-title{ position:relative; padding-left:1rem; margin-bottom:.75rem; }
.section-title:before{
  content:""; position:absolute; left:0; top:.25rem; bottom:.25rem; width:6px; border-radius:8px;
  background:linear-gradient(180deg,var(--brand-1),var(--brand-2));
}
/* Anchor pills spacing */
.btn.btn-outline-primary.btn-sm{ padding:.45rem .8rem; }

/* ========== Misc ========== */
.theme-toggle{ border:1px solid rgba(255,255,255,.45); }
[data-bs-theme="light"] .theme-toggle{ border-color:rgba(2,6,23,.15); }

/* Hover list items */
.list-group-item{ transition:all .18s ease; }
.list-group-item:hover{ background:rgba(79,70,229,.08); transform:translateX(2px); }

/* ========== Homepage-specific small tweaks ========== */
#compare{ color: var(--bs-secondary-color); }

/* Tighter hero form spacing (homepage) */
.hero .card-elevated>.card-body{ padding:1rem 1rem; } /* override generic card padding in hero */
.hero .form-label{
  margin-bottom:.25rem;
  color: var(--bs-secondary-color);
  font-weight:bold;
}
/* If using the row layout: control gaps (comparison/homepage) */
.hero .row.g-0 > .col-12{ margin-bottom:.25rem !important; }
.hero .row.g-0 > .col-12:last-child{ margin-bottom:0 !important; }

.hero-compare{
  background: linear-gradient(135deg,var(--brand-1),var(--brand-2)) !important;
  color:#fff !important;
  border-radius: calc(var(--radius) + .6rem);
  box-shadow: var(--shadow-lg);
}

.hero-compare:before{
  content:""; /* ensure the glow overlay renders */
  position:absolute; inset:-20%;
  background:
    radial-gradient(500px 220px at 15% 20%, rgba(255,255,255,.18), transparent 60%),
    radial-gradient(420px 220px at 85% 30%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(600px 260px at 50% 120%, rgba(255,255,255,.12), transparent 60%);
  mix-blend-mode:screen; pointer-events:none;
}

/* If using vstack in the hero form, you can tweak gaps responsively:
.hero .vstack{ gap:.35rem; }
@media (max-width:576px){ .hero .vstack{ gap:.25rem !important; } }
@media (min-width:992px){ .hero .vstack{ gap:.45rem !important; } }
*/

    /* Page-specific tiny tweaks so this hero doesn't get oversized */
    .page-list .hero-search{ padding:1.25rem 1.5rem !important; }
    @media (min-width: 992px){ .page-list .hero-search .row{ min-height: initial; } }
    .filter-card .form-select, .filter-card .form-control{ height:auto; padding:.5rem .75rem; }
    .result-card .title{ font-weight:700; font-size:1.05rem; }
    .result-card .meta{ font-size:.85rem; color:var(--text-2); }

    .hero-search{
  background: linear-gradient(135deg,var(--brand-1),var(--brand-2)) !important;
  color:#fff !important;
  border-radius: calc(var(--radius) + .6rem);
  box-shadow: var(--shadow-lg);
}

.hero-search:before{
  content:""; /* ensure the glow overlay renders */
  position:absolute; inset:-20%;
  background:
    radial-gradient(500px 220px at 15% 20%, rgba(255,255,255,.18), transparent 60%),
    radial-gradient(420px 220px at 85% 30%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(600px 260px at 50% 120%, rgba(255,255,255,.12), transparent 60%);
  mix-blend-mode:screen; pointer-events:none;
}