/* Finlandica (self-hosted variable font) */
@font-face {
  font-family: "Finlandica";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/finlandica-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Finlandica";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/finlandica-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Finlandica";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/finlandica-normal-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Finlandica";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/finlandica-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Remove render‑blocking Google Fonts @import (Squarespace may block it) */
/* Use system stack; add <link> fonts in HTML when you host standalone pages. */

/* ---------------- Scope container and centering ---------------- */
.dpf-app {
  font-family: "Finlandica", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: #30343f;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.dpf-app .container {
  width: min(100%, 1200px);
  margin-inline: auto;
  padding: 1rem 1.25rem;
}

/* Prefer LIGHT by default; only dark when data-theme="dark" present */
:root:not([data-theme]),
html[data-theme="light"] {
  --color-background: #fafaff;
  --color-text: #30343f;
  --color-border: #e4d9ff;
  --color-primary: #273469;
  --color-primary-2: #273469;
  --color-primary-3: #1e2749;
  --color-accent: #273469;
}

.header-gradient {
  display: inline-block;
  margin: 0 auto;
  padding: 0;
  text-align: center;
  font-size: clamp(3.2rem, 6.5vw, 5.5rem);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -0.01em;
  background: linear-gradient(90deg, #273469 0%, #273469 45%, #273469 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 6px 14px rgba(2,6,23,0.06));
  position: relative;
}

.header-gradient::after {
  content: '';
  display: block;
  width: 60%;
  height: 8px;
  margin: 0.6rem auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(39,52,105,0.98), rgba(30,39,73,0.98), rgba(48,52,63,0.98));
  box-shadow: 0 6px 18px rgba(39,52,105,0.08);
}

@media (prefers-contrast: more) {
  html:not([data-theme="dark"]) .header-gradient {
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: initial;
    -webkit-text-stroke: 0;
    color: #30343f; /* slate-900 */
    text-shadow: none;
  }
}

@supports not (background-clip: text) {
  html:not([data-theme="dark"]) .header-gradient {
    color: #30343f;
    background: none;
  }
}


/* -----------------------------------------
   Embed (Squarespace) compact overrides
   Applied when the page is embedded in an iframe.
   ----------------------------------------- */
.dpf-embedded,
.dpf-embedded .dpf-app {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 0.95rem;
}

.dpf-embedded .container {
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0.5rem 0.75rem !important;
  background: transparent !important;
  border: none !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

.dpf-embedded .header-gradient {
  font-size: 1.25rem !important;
  margin-bottom: 0.25rem !important;
}

.dpf-embedded nav {
  gap: 0.4rem !important;
  padding: 0 !important;
}

.dpf-embedded .nav-link {
  padding: 0.45rem 0.65rem !important;
  font-size: 0.95rem !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,0.04) !important;
  box-shadow: none !important;
}

.dpf-embedded .controls-wrapper,
.dpf-embedded .filters-actions {
  gap: 0.5rem !important;
}

.dpf-embedded #phoneShowcase,
.dpf-embedded #phoneCardsContainer,
.dpf-embedded .phone-showcase {
  gap: 12px !important;
}

.dpf-embedded .card,
.dpf-embedded .phone-card,
.dpf-embedded .filters-table {
  border-radius: 8px !important;
}

.dpf-embedded img:not(.card-image) {
  max-width: 100% !important;
  height: auto !important;
}

.dpf-embedded #phoneModal > .bg-white,
.dpf-embedded #phoneModal .bg-white {
  width: calc(100% - 20px) !important;
  margin: 8px !important;
}


/* ============================================================
   Controls panel: two-row layout
   Row 1 (.controls-top)  — result count | search bar | price slider
   Row 2 (.filters-actions) — action buttons
   ============================================================ */

.controls-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem 0 0.5rem;
  margin-bottom: 1.5rem;
}

/* Row 1 */
.controls-top {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.result-count {
  flex: 0 0 auto;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-primary, #273469);
  background: rgba(37,99,235,0.08);
  border: 1px solid rgba(37,99,235,0.18);
  border-radius: 6px;
  padding: 0.3rem 0.85rem;
  white-space: nowrap;
}

.search-field {
  flex: 1 1 220px;
  min-width: 0;
  position: relative;
}

.search-hint {
  font-size: 0.72rem;
  color: var(--color-text-muted, #6b7280);
  margin-top: 0.3rem;
  padding-left: 0.25rem;
}

#priceSliderContainer {
  --slider-progress: 100%;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.7rem 0.95rem 0.8rem;
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(241,245,249,0.95));
  border: 1px solid rgba(14, 116, 144, 0.18);
  border-radius: 0.9rem;
  min-width: 220px;
  max-width: 310px;
}

.price-slider-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

#priceSliderContainer label {
  font-size: 0.76rem;
  font-weight: 700;
  color: #30343f;
  margin: 0;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

#priceCurrent {
  font-size: 0.9rem;
  font-weight: 700;
  color: #30343f;
  background: rgba(14, 116, 144, 0.1);
  border: 1px solid rgba(14, 116, 144, 0.24);
  border-radius: 999px;
  padding: 0.22rem 0.6rem;
  min-width: 4.6rem;
  text-align: center;
}

.price-scale {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.74rem;
  font-weight: 600;
  color: #475569;
  line-height: 1;
}

/* Row 2 action buttons */
.filters-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

/* On mobile: full-width stack */
@media (max-width: 640px) {
  .controls-top {
    flex-direction: column;
    align-items: stretch;
  }
  .search-field {
    flex: 0 0 auto;
    width: 100%;
  }
  .result-count {
    text-align: center;
  }
  #priceSliderContainer {
    max-width: 100%;
    min-width: 0;
  }
  .filters-actions {
    justify-content: center;
  }
}

@media (min-width: 641px) {
  #featureSearch {
    width: 100%;
  }
  #priceSlider {
    width: 100%;
  }
}


/* =========================
   Design Tokens (Light)
   ========================= */
:root {
  /* Colors */
  --color-primary: #273469;
  --color-primary-dark: #1e2749;
  --color-success: #10b981;
  --color-success-dark: #059669;
  --color-danger: #ef4444;
  --color-danger-dark: #dc2626;

  --color-background: #fafaff;
  --color-text: #30343f;
  --color-border: #e4d9ff;

  /* Surfaces */
  --color-background-light: #ffffff;
  --color-background-dark: #1e2749;
  --color-text-light: #30343f;
  --color-text-dark: #fafaff;
  --color-border-light: #e4d9ff;
  --color-border-dark: #3b4466;
  --color-header-light: #fafaff;
  --color-header-dark: #1e2749;

  /* Effects */
  --ring: 0 0 0 3px rgba(39, 52, 105, 0.35);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.10);
  --shadow-lg: 0 6px 18px rgba(0,0,0,0.12);

  /* Radii, spacing, transitions */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

  /* Spacing scale */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 0.75rem;
  --space-lg: 1rem;
  --space-xl: 1.25rem;
  --space-2xl: 2rem;

  /* Font sizes */
  --font-xs: 0.75rem;
  --font-sm: 0.875rem;
  --font-md: 1rem;
  --font-lg: 1.25rem;
  --font-xl: 1.5rem;

  --transition-fast: 150ms;
  --transition-normal: 300ms;

  /* Fonts */
  --font-family-heading: 'Finlandica', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-family-body: 'Finlandica', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* =========================
   Design Tokens (Dark)
   ========================= */
[data-theme="dark"] {
  --color-background: #1e2749;
  --color-text: #fafaff;
  --color-border: #3b4466;

  --color-primary: #e4d9ff;
  --color-primary-dark: #fafaff;
  --color-success: #34d399;
  --color-success-dark: #10b981;
  --color-danger: #f87171;
  --color-danger-dark: #ef4444;
}

/* =========================
   Base / Resets
   ========================= */
html { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }
*, *::before, *::after { box-sizing: border-box; }
img, svg, video { display: block; max-width: 100%; height: auto; }

body {
  background-color: var(--color-background-light);
  color: var(--color-text-light);
  font-family: var(--font-family-body);
  font-size: 16px;
  line-height: 1.6;
  transition: background-color var(--transition-normal), color var(--transition-normal);
}

[data-theme="dark"] body {
  background-color: var(--color-background-dark);
  color: var(--color-text-dark);
}

/* Respect user preferences */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-heading);
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 1rem;
}

p, a, span, button, select, table, th, td {
  font-family: var(--font-family-body);
  font-weight: 400;
}

.text-center { text-align: center; }

/* Links */
a {
  color: var(--color-primary);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--transition-fast);
}
a:hover { color: var(--color-primary-dark); text-decoration: underline; }

/* Focus ring (accessible) */
:where(a, button, [role="button"], input, select, textarea):focus-visible {
  outline: none;
  box-shadow: var(--ring), 0 2px 6px rgba(0,0,0,0.12);
  transition: box-shadow var(--transition-fast);
  border-radius: .5rem;
}

/* =========================
   Buttons
   ========================= */
button {
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  background-color: var(--color-primary);
  color: #fff;
  font-weight: 500;
  font-size: 0.875rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
  border: 1px solid transparent;
  cursor: pointer;
}
button:hover {
  background-color: var(--color-primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 6px rgba(0,0,0,0.15);
}
button:active { transform: translateY(0); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .45rem .9rem;           
  border-radius: 9999px;        
  font-weight: 600;
  line-height: 1.1;
  border: 1px solid transparent;
  transition: transform .12s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  background: var(--color-background);
  color: var(--color-primary);
  box-shadow: 0 2px 6px rgba(2,6,23,0.06);
}
.btn:active { transform: translateY(0); }
.btn:focus { box-shadow: var(--ring); }

/* Button variants keep their naming but inherit the action visual */
.btn-primary {
  background: linear-gradient(180deg, var(--color-primary), var(--color-primary-dark));
  color: #fff;
  box-shadow: 0 8px 20px rgba(59,130,246,.12);
}
.btn-primary:hover { filter: brightness(1.03); transform: translateY(-2px); }
.btn-primary:active { filter: brightness(.98); }

.btn-success {
  background: linear-gradient(180deg, var(--color-success), var(--color-success-dark));
  color: #fff;
  box-shadow: 0 6px 16px rgba(16,185,129,.14);
}
.btn-success:hover { filter: brightness(1.03); transform: translateY(-2px); }

.btn-danger {
  background: linear-gradient(180deg, var(--color-danger), var(--color-danger-dark));
  color: #fff;
  box-shadow: 0 6px 16px rgba(239,68,68,.14);
}
.btn-danger:hover { filter: brightness(1.03); transform: translateY(-2px); }

/* Outline variant */
.btn-outline {
  background: transparent;
  color: var(--color-primary);
  border-color: rgba(59,130,246,0.18);
}
.btn-outline:hover {
  background: rgba(59,130,246,0.06);
  color: var(--color-primary-dark);
  transform: translateY(-1px);
}

/* Special buttons */
button.remove-button {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  border-radius: 9999px;
  width: 1.5rem;
  height: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
}
button.remove-button:hover { background-color: var(--color-danger-dark); transform: scale(1.1); }

.buy-button {
  background-color: var(--color-success);
  color: #fff;
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
}
.buy-button:hover {
  background-color: var(--color-success-dark);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.btn-buy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.6rem 1rem;
  border-radius: 0.75rem;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none !important;
  color: #fff; /* keep CTA text white even if global link hover rules apply */
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 200ms cubic-bezier(.2,.9,.2,1), box-shadow 220ms cubic-bezier(.2,.9,.2,1), filter 180ms ease, opacity 120ms ease;
}
.btn-buy:hover,
.btn-buy:focus {
  text-decoration: none !important;
  color: #fff !important;
}


#clearFiltersBtn {
  background: linear-gradient(90deg, #ef4444 0%, #f87171 100%);
  color: #fff;
  border: none;
  border-radius: 0.5rem;
  padding: 0.5rem 1.5rem;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.03em;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(239,68,68,0.10);
  transition: background .2s, box-shadow .2s, transform .1s;
  margin: 0.5rem 0;
}
#clearFiltersBtn:hover,
#clearFiltersBtn:focus {
  background: linear-gradient(90deg, #b91c1c 0%, #ef4444 100%);
  box-shadow: 0 4px 16px rgba(239,68,68,0.18);
  transform: translateY(-2px) scale(1.04);
}
#clearFiltersBtn:active { background: #b91c1c; transform: scale(0.98); }

/* =========================
   Cards / Containers
   ========================= */
.container {
  width: min(100%, 1200px);
  margin-inline: auto;
  padding: 1rem 1.25rem;
}

.container {
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin: 0 auto;
  border-radius: var(--spacing-md);
  box-shadow: var(--shadow-md);
  background-color: var(--color-background);
  transition: background-color var(--transition-normal), box-shadow var(--transition-normal);
  animation: fadeIn 0.5s ease-in-out;
}
.container:hover { box-shadow: var(--shadow-lg); }

[data-theme="dark"] .container { box-shadow: 0 4px 6px rgba(0,0,0,0.5); }
[data-theme="dark"] .container:hover { box-shadow: 0 6px 8px rgba(0,0,0,0.7); }

.card {
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  transition: transform .18s ease, box-shadow .22s ease, border-color .18s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(59,130,246,.18);
}

.glass-container {
  background: rgba(255,255,255,0.18);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 1rem;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: var(--shadow-sm);
}

[data-theme="dark"] .glass-container {
  background: rgba(15,23,42,0.48) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.6) !important;
}

.phone-card { transition: box-shadow .2s ease, border-color .2s ease; }
.phone-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.12); }

/* Modal */
 /* Modal overlay */
 #phoneModal {
   display: none;
   position: fixed !important;
   top: 0; right: 0; bottom: 0; left: 0;
   background: rgba(0,0,0,.6);
   -webkit-backdrop-filter: blur(2px);
   backdrop-filter: blur(2px);
   z-index: 99999 !important;
   align-items: flex-start;
   justify-content: flex-start;
   padding: 1rem;
 }

#phoneModal > .bg-white {
  width: 100%;
  max-width: 420px;
  max-height: calc(100vh - 3rem);
  overflow: auto;
  border-radius: 1rem;
  box-shadow: var(--shadow-lg);
  margin: 2rem auto;
}

/* =========================
   Navigation
   ========================= */
.nav a { transition: color .3s ease; }
.nav a:hover, .nav a.active { text-decoration: underline; }

/* =========================
   Filters UI
   ========================= */
.filters-title { font-family: 'Finlandica', sans-serif; font-weight: 700; }

.filters-table {
  width: 100%;
  margin: 0;
  padding: 0;
  border-collapse: collapse;
  background-color: var(--color-background-light);
  border-radius: .5rem;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border-light);
  transition: all .3s ease;
}
.filters-table thead {
  background-color: var(--color-primary);
  color: #fff;
  font-weight: 600;
  text-align: left;
}
.filters-table th, .filters-table td {
  padding: .75rem;
  font-size: .875rem;
  border-bottom: 1px solid var(--color-border-light);
  text-align: center;
}
.filters-table tbody tr:last-child td { border-bottom: none; }
.filters-table tbody tr:hover { background-color: rgba(59,130,246,0.1); }

.filter-group {
  border: 1px solid var(--color-border);
  margin-bottom: 1rem;
  border-radius: .5rem;
  background-color: var(--color-background-light);
  padding: 1rem;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  transition: box-shadow .2s ease;
}
.filter-group:hover { box-shadow: 0 4px 6px rgba(0,0,0,0.05); }
.filter-group h3 {
  color: #273469;
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: .75rem;
  padding-bottom: .5rem;
  border-bottom: 2px solid #e4d9ff;
}
.filter-group label {
  display: flex;
  align-items: center;
  padding: .375rem .5rem;
  margin: .25rem 0;
  border-radius: .375rem;
  cursor: pointer;
  transition: background-color .15s ease;
}
.filter-group label:hover { background-color: #fafaff; }

.form-checkbox {
  appearance: none;
  border-radius: .25rem;
  border: 2px solid #94a3b8;
  background: var(--color-background);
  cursor: pointer;
  height: 1.125rem;
  width: 1.125rem;
  margin-right: .75rem;
  transition: all .2s ease;
}
.form-checkbox:hover { border-color: #273469; }
.form-checkbox:checked { background-color: #273469; border-color: #273469; }

#activeCheckboxFilters {
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
  background-color: var(--color-background-light);
  border-radius: .5rem;
  padding: 1rem;
  border: 1px solid #e4d9ff;
}

.applied-filters {
  background-color: var(--color-background-light);
  color: var(--color-text);
  border: 1px solid var(--color-border-light);
  border-radius: .5rem;
  padding: .75rem;
  font-size: .875rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  box-shadow: var(--shadow-sm);
}
.applied-filters-title {
  font-weight: 600;
  color: var(--color-primary);
  margin-right: .5rem;
}

.active-filter-tag {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  background-color: #e4d9ff;
  color: #273469;
  padding: .25rem .75rem;
  border-radius: 9999px;
  margin: .25rem;
  font-size: .875rem;
  transition: all .2s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.active-filter-tag:hover { background-color: var(--color-primary-dark); color: #fff; }
.active-filter-tag button {
  color: #dc2626 !important;
  background: transparent;
  border: 0;
  line-height: 1;
  padding: 0 2px;
  font-weight: 600;
}
.active-filter-tag button:hover { color: #b91c1c !important; }

#activeCheckboxFilters .active-filter-tag button {
  color: #dc2626 !important;                 /* red */
  background: rgba(239, 68, 68, 0.10);
  border: 1px solid #fecaca;
  border-radius: 8px;
  padding: 2px 8px;
}
#activeCheckboxFilters .active-filter-tag button:hover,
#activeCheckboxFilters .active-filter-tag button:focus {
  color: #b91c1c !important;                 /* darker red on hover */
  background: rgba(239, 68, 68, 0.18);
  border-color: #fca5a5;
}

[data-theme="dark"] #activeCheckboxFilters .active-filter-tag button {
  color: #fca5a5 !important;
  background: rgba(239, 68, 68, 0.20);
  border-color: #fca5a5;
}
[data-theme="dark"] #activeCheckboxFilters .active-filter-tag button:hover {
  color: #fecaca !important;
  background: rgba(239, 68, 68, 0.28);
}

/* Dropdowns */
select.form-control, #addFilterDropdown {
  width: 100%;
  padding: .5rem 1rem;
  font-size: .875rem;
  border: 1px solid var(--color-border-light);
  border-radius: .375rem;
  background-color: var(--color-background);
  color: var(--color-text);
  transition: all .2s ease;
  appearance: none;
  cursor: pointer;
  position: relative;
}
select.form-control:hover, #addFilterDropdown:hover {
  border-color: var(--color-primary);
  background-color: rgba(59,130,246,0.05);
}
select.form-control:focus, #addFilterDropdown:focus {
  outline: none;
  border-color: var(--color-primary-dark);
  box-shadow: 0 0 4px rgba(59,130,246,0.5);
}

/* Price slider track */
#priceSlider {
  width: 100%;
  max-width: 350px;
  min-width: 120px;
  height: 2.25rem;
  margin: 0;
}

/* =========================
   Comparison (Table + Checkbox)
   ========================= */
.compare-checkbox {
  appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--color-primary);
  border-radius: .25rem;
  transition: all var(--transition-fast) ease;
}
.compare-checkbox:checked { background-color: var(--color-primary); border-color: var(--color-primary); }
.compare-checkbox:disabled { opacity: .5; cursor: not-allowed; border-color: var(--color-border); }
.compare-checkbox:focus { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.dpf-compare-add {
  display: block;
  width: 100%;
  margin-top: .65rem;
  padding: .55rem .75rem;
  border: 1px solid var(--color-primary, #273469);
  border-radius: .5rem;
  color: var(--color-primary, #273469);
  background: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.dpf-compare-add:hover, .dpf-compare-add.is-selected { color: #fff; background: var(--color-primary, #273469); }
.dpf-compare-add:disabled { color: #64748b; border-color: #e4d9ff; background: #e4d9ff; opacity: .7; cursor: not-allowed; box-shadow: none; transform: none; }
.dpf-compare-action:disabled { opacity: .55; cursor: not-allowed; box-shadow: none !important; transform: none !important; }
.dpf-compare-bar {
  position: fixed;
  z-index: 10000;
  right: 1rem;
  bottom: 1rem;
  display: none;
  align-items: center;
  gap: .75rem;
  padding: .8rem 1rem;
  border: 1px solid var(--color-border, #e4d9ff);
  border-radius: .75rem;
  background: var(--color-surface, #fff);
  color: var(--color-text, #30343f);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}
.dpf-compare-bar.is-visible { display: flex; }
.dpf-compare-bar button, .dpf-compare-open { padding: .5rem .75rem; border: 0; border-radius: .5rem; background: var(--color-primary, #273469); color: #fff; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
.dpf-compare-open.is-disabled { opacity: .55; pointer-events: none; }
@media (max-width: 540px) {
  .dpf-compare-bar { right: .5rem; bottom: .5rem; left: .5rem; justify-content: space-between; gap: .4rem; padding: .65rem; }
  .dpf-compare-bar button, .dpf-compare-open { padding: .5rem; font-size: .85rem; }
}

.dpf-comparison-overlay { position: fixed; z-index: 100000 !important; inset: 0; display: flex; align-items: flex-start; justify-content: center; padding: clamp(.5rem, 3vw, 2rem); background: rgba(15, 23, 42, .76); overscroll-behavior: contain; }
.dpf-comparison-dialog { width: min(100%, 1200px); max-height: min(90vh, 900px); overflow: hidden; border: 1px solid var(--color-border, #e4d9ff); border-radius: 1rem; background: var(--color-surface, #fff); color: var(--color-text, #30343f); box-shadow: 0 24px 80px rgba(0, 0, 0, .35); }
.dpf-comparison-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--color-border, #e4d9ff); }
.dpf-comparison-heading h2 { margin: 0; font-size: 1.4rem; font-weight: 800; }
.dpf-comparison-close { display: grid; place-items: center; flex: 0 0 2.75rem; width: 2.75rem; height: 2.75rem; padding: 0; border: 1px solid transparent; border-radius: 999px; background: transparent; color: #475569; cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s ease; }
.dpf-comparison-close svg { display: block; width: 1.25rem; height: 1.25rem; }
.dpf-comparison-close path { fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 2; }
.dpf-comparison-close:hover { border-color: #e4d9ff; background: #e4d9ff; color: #30343f; }
.dpf-comparison-close:focus-visible { outline: 3px solid #e4d9ff; outline-offset: 2px; }
.dpf-comparison-close:active { transform: scale(.94); }
.dpf-comparison-scroll { max-height: calc(min(90vh, 900px) - 5rem); overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.dpf-comparison-table { width: 100%; min-width: 640px; border-collapse: collapse; }
.dpf-comparison-table th, .dpf-comparison-table td { min-width: 9rem; padding: .75rem 1rem; border: 1px solid var(--color-border, #e4d9ff); text-align: left; vertical-align: top; }
.dpf-comparison-table th:first-child { position: sticky; left: 0; z-index: 1; min-width: 9rem; background: #fafaff; }
.dpf-comparison-table thead th { position: sticky; top: 0; z-index: 2; background: #fafaff; }
.dpf-comparison-table thead th:first-child { z-index: 3; }
.dpf-comparison-table tbody tr:nth-child(even) td { background: #fafaff; }
.dpf-comparison-remove { display: block; margin-top: .5rem; padding: .3rem .55rem; border: 1px solid #e4d9ff; border-radius: .4rem; background: #fff; color: #334155; cursor: pointer; }
.dpf-comparison-empty { padding: 1.5rem; }
.dpf-embedded .dpf-comparison-overlay { position: absolute; top: var(--dpf-host-visible-top, 0px); right: 0; bottom: auto; left: 0; height: var(--dpf-host-visible-height, 100vh); min-height: 0; }
.dpf-embedded .dpf-comparison-dialog { max-height: min(calc(var(--dpf-host-visible-height, 100vh) - 2rem), 900px); }
.dpf-embedded .dpf-comparison-scroll { max-height: calc(min(var(--dpf-host-visible-height, 100vh) - 2rem, 900px) - 5rem); }
[data-theme="dark"] .dpf-comparison-dialog { background: #30343f; color: #fafaff; }
[data-theme="dark"] .dpf-comparison-heading, [data-theme="dark"] .dpf-comparison-table th, [data-theme="dark"] .dpf-comparison-table td { border-color: #475569; }
[data-theme="dark"] .dpf-comparison-table th:first-child, [data-theme="dark"] .dpf-comparison-table thead th { background: #30343f; }
[data-theme="dark"] .dpf-comparison-table tbody tr:nth-child(even) td { background: #30343f; }
[data-theme="dark"] .dpf-comparison-close { color: #e4d9ff; }
[data-theme="dark"] .dpf-comparison-close:hover { border-color: #475569; background: #334155; color: #fff; }
[data-theme="dark"] .dpf-comparison-remove { background: #334155; color: #fafaff; }

.comparison-page { width: min(100%, 1600px); max-width: 1600px !important; }
.comparison-intro { margin: -1rem auto 1.5rem; color: var(--color-text-muted, #475569); text-align: center; }
.comparison-search-wrap { max-width: 760px; margin-inline: auto; }
.comparison-search-results { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: .5rem; }
.comparison-search-results:empty { display: none; }
.comparison-search-result { width: 100%; padding: .75rem 1rem; border: 1px solid var(--color-border, #e4d9ff); border-radius: .6rem; background: var(--color-surface, #fff); color: inherit; text-align: left; cursor: pointer; }
.comparison-search-result:hover, .comparison-search-result:focus-visible { border-color: var(--color-primary, #273469); background: #fafaff; }
.comparison-status { min-height: 1.5rem; margin: .75rem 0; color: var(--color-text-muted, #475569); }
.comparison-selection-status { margin: 0 0 .75rem; font-weight: 700; color: var(--color-text-muted, #475569); }
.comparison-results { width: 100%; min-width: 0; }
.comparison-empty { padding: 2rem; border: 1px dashed var(--color-border, #e4d9ff); border-radius: .75rem; color: var(--color-text-muted, #475569); text-align: center; }
.comparison-table-scroll { width: 100%; overflow: auto; border: 1px solid var(--color-border, #e4d9ff); border-radius: .75rem; background: var(--color-surface, #fff); }
.comparison-matrix { min-width: max-content; table-layout: auto; }
.comparison-matrix th:first-child { position: sticky; left: 0; z-index: 3; min-width: 10rem; }
.comparison-matrix thead th { position: sticky; top: 0; z-index: 2; min-width: 12rem; text-align: center; }
.comparison-matrix .comparison-phone-heading img { display: block; width: 100%; height: 7rem; margin: 0 auto .5rem; object-fit: contain; }
.comparison-matrix .comparison-phone-heading strong { display: block; min-height: 2.5rem; }
.comparison-matrix .comparison-phone-heading .remove-btn { margin: .5rem auto 0; padding: .4rem .65rem; border: 1px solid #ef4444; border-radius: .4rem; background: #fff; color: #b91c1c; cursor: pointer; }
.comparison-matrix tbody tr:nth-child(even) td { background: #fafaff; }
.comparison-matrix td.comparison-different { background: transparent !important; font-weight: inherit; }
[data-theme="dark"] .comparison-intro, [data-theme="dark"] .comparison-status, [data-theme="dark"] .comparison-selection-status { color: #e4d9ff; }
[data-theme="dark"] .comparison-search-result, [data-theme="dark"] .comparison-table-scroll { background: #30343f; color: #fafaff; }
[data-theme="dark"] .comparison-search-result:hover, [data-theme="dark"] .comparison-search-result:focus-visible { background: #273469; }
[data-theme="dark"] .comparison-matrix tbody tr:nth-child(even) td { background: #30343f; }
[data-theme="dark"] .comparison-matrix td.comparison-different { background: transparent !important; }
[data-theme="dark"] .comparison-matrix .comparison-phone-heading .remove-btn { background: #334155; color: #fecaca; }
@media (max-width: 600px) {
  .comparison-page { padding-inline: .65rem !important; }
  .comparison-matrix th, .comparison-matrix td { padding: .6rem; }
  .comparison-matrix th:first-child { min-width: 8rem; }
  .comparison-matrix thead th { min-width: 10rem; }
}

.comparison-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: .5rem;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.comparison-table th, .comparison-table td {
  border: 1px solid var(--color-border);
  padding: var(--spacing-md);
  transition: background-color var(--transition-fast) ease;
  text-align: left;
}
.comparison-table th {
  background-color: var(--color-header-light);
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 10;
}
.comparison-table tr:hover td { background-color: rgba(59,130,246,0.05); }

/* Dark overrides for comparison */
[data-theme="dark"] .comparison-table th { background-color: var(--color-header-dark); }
[data-theme="dark"] .comparison-table th, 
[data-theme="dark"] .comparison-table td { border: 1px solid var(--color-border-dark); }
[data-theme="dark"] .comparison-table tr:hover td { background-color: rgba(255,255,255,0.05); }

/* Table utility */
.table { border-color: var(--color-border); }
.table th, .table td { border-color: var(--color-border); }
.table th, .table td { vertical-align: top; }

/* Highlight differences */
.highlight-difference {
  background-color: rgba(255,99,71,0.2);
  border-radius: 4px;
  padding: 2px 4px;
}

/* =========================
   Sidebar (with fixed scrollbars)
   ========================= */
#sidebar {
  transition: transform .3s ease-in-out, box-shadow .3s ease-in-out;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
}
#mainContent { transition: transform .3s ease-in-out, box-shadow .3s ease-in-out; }
#sidebar.hidden { display: none; }

@media (min-width: 768px) {
  #sidebar { display: block; }
}

#sidebar::-webkit-scrollbar { width: 8px; }
#sidebar::-webkit-scrollbar-track { background: #fafaff; }
#sidebar::-webkit-scrollbar-thumb { background-color: #e4d9ff; border-radius: 4px; }
[data-theme="dark"] #sidebar::-webkit-scrollbar-track { background: #1e2749; }
[data-theme="dark"] #sidebar::-webkit-scrollbar-thumb { background: #4b5563; }

/* =========================
   Dark mode component tweaks
   ========================= */
[data-theme="dark"] .filters-table { background-color: var(--color-background-dark); border: 1px solid var(--color-border-dark); box-shadow: 0 2px 4px rgba(0,0,0,0.5); }
[data-theme="dark"] .filters-table thead { background-color: var(--color-primary-dark); }

[data-theme="dark"] .applied-filters {
  background-color: var(--color-background-dark);
  color: var(--color-text-dark);
  border: 1px solid var(--color-border-dark);
}
[data-theme="dark"] .active-filter-tag { background-color: var(--color-primary); color: var(--color-text-dark); }
[data-theme="dark"] .active-filter-tag:hover { background-color: var(--color-primary-dark); }
[data-theme="dark"] .active-filter-tag button:hover { color: var(--color-primary-light); }

body.dark-mode .buy-button { background-color: #4CAF50; color: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
body.dark-mode .buy-button:hover { background-color: #388E3C; box-shadow: 0 4px 8px rgba(0,0,0,0.3); }

[data-theme="dark"] #clearFiltersBtn { background: linear-gradient(90deg, #b91c1c 0%, #ef4444 100%); }

/* =========================
   Visual polish & utilities
   ========================= */

/* Optional site background wrapper (use on a parent div) */
.site-bg {
  background:
    radial-gradient(1000px 400px at 15% -10%, rgba(124,58,237,.16), transparent 60%),
    radial-gradient(800px 380px at 100% 0%, rgba(37,99,235,.15), transparent 60%),
    linear-gradient(180deg, #30343f, #30343f);
}

h1 { font-size: clamp(1.75rem, 2.5vw, 2.25rem); letter-spacing: -0.02em; }
/* Title override -- header-gradient h1 larger than generic h1 */
h1.header-gradient { font-size: clamp(3.2rem, 6.5vw, 5.5rem) !important; }
h2 { font-size: clamp(1.5rem, 2vw, 1.875rem); letter-spacing: -0.02em; }
h3 { font-size: clamp(1.25rem, 1.6vw, 1.5rem); }

.shadow-hover { transition: box-shadow var(--transition-normal), transform var(--transition-fast); }
.shadow-hover:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }

/* =========================
   Inputs / Controls
   ========================= */
.input, input[type="text"], input[type="search"], input[type="number"], input[type="email"], input[type="url"], textarea {
  width: 100%;
  padding: .6rem .8rem;
  border: 1px solid var(--color-border);
  border-radius: .6rem;
  background: var(--color-background);
  color: var(--color-text);
  box-shadow: 0 1px 2px rgba(0,0,0,.04) inset;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}
.input::placeholder, input::placeholder, textarea::placeholder { color: rgba(0,0,0,.5); }
[data-theme="dark"] .input::placeholder, [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: rgba(255,255,255,.55); }

.input:focus, input:focus, textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,.20);
}

/* Input with icon slot */
.input-wrapper {
  position: relative;
}
.input-wrapper .input-icon {
  position: absolute; inset-inline-start: .6rem; inset-block: 0;
  display: grid; place-items: center; width: 1.75rem; color: #64748b;
}
.input.input-with-icon, input.input-with-icon { padding-inline-start: 2.25rem; }

/* Feature search: large pill-shaped search bar */
#featureSearch {
  display: inline-block;
  height: 48px;
  line-height: 48px;
  padding: 0 16px 0 44px; /* room for icon */
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background-color: var(--color-background-light);
  box-shadow: 0 6px 18px rgba(15,23,42,0.06);
  font-size: var(--font-md, 1rem);
  color: var(--color-text);
  transition: box-shadow 180ms ease, transform 120ms ease, background-color 120ms ease;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
  background-repeat: no-repeat;
  background-position: 14px center;
}

#featureSearch::placeholder { color: #6b7280; opacity: 0.95; }
#featureSearch:focus {
  outline: none;
  box-shadow: var(--ring);
  background-color: var(--color-background);
  transform: translateY(-1px);
}

/* Search fills flex container */
@media (max-width: 900px) {
  #featureSearch { width: 100%; margin-top: 0; }
  .filters-actions { flex-direction: row; flex-wrap: wrap; gap: 0.5rem; }
}

@media (min-width: 901px) {
  #featureSearch { width: 100%; }
}

/* Toggle switch */
.switch {
  --h: 22px; --w: 40px;
  position: relative; display: inline-block; width: var(--w); height: var(--h);
}
.switch input { display: none; }
.switch .track {
  position: absolute; inset: 0;
  background: #e4d9ff; border-radius: 9999px; transition: background var(--transition-fast);
}
.switch .thumb {
  position: absolute; top: 2px; left: 2px;
  width: calc(var(--h) - 4px); height: calc(var(--h) - 4px);
  background: var(--color-background); border-radius: 9999px; transition: transform var(--transition-fast);
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.switch input:checked + .track { background: var(--color-primary); }
.switch input:checked + .track + .thumb { transform: translateX(calc(var(--w) - var(--h))); }

[data-theme="dark"] .switch .track { background: #334155; }

/* =========================
   Cards (sections)
   ========================= */
.card-header {
  padding: .9rem 1rem;
  border-bottom: 1px solid var(--color-border);
  background: linear-gradient(180deg, rgba(0,0,0,.02), transparent);
  font-weight: 600;
}
.card-body { padding: 1rem; }
.card-footer {
  padding: .8rem 1rem;
  border-top: 1px solid var(--color-border);
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.02));
}

/* =========================
   Chips / Badges
   ========================= */
.badge {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .25rem .55rem; border-radius: 9999px; font-size: .75rem; font-weight: 600;
  background: #e4d9ff; color: #30343f; border: 1px solid #e4d9ff;
}
.badge.success { background: #dcfce7; color: #065f46; border-color: #bbf7d0; }
.badge.warning { background: #fef08a; color: #7c2d12; border-color: #fde047; }
.badge.danger  { background: #fee2e2; color: #7f1d1d; border-color: #fecaca; }

.chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .35rem .7rem; border-radius: 9999px; font-size: .8125rem; font-weight: 600;
  background: #e4d9ff; color: #273469; border: 1px solid #e4d9ff;
  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
.chip:hover { background: #e4d9ff; transform: translateY(-1px); }
.chip .close { background: transparent; border: 0; color: inherit; cursor: pointer; font-size: .9em; }

/* Dark */
[data-theme="dark"] .badge { background: #1e2749; color: #fafaff; border-color: #3b4466; }
[data-theme="dark"] .chip  { background: #273469; color: #e4d9ff; border-color: #273469; }

/* =========================
   Grid utilities
   ========================= */
.grid { display: grid; gap: var(--space-lg, 1rem); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px) { .sm\:grid-cols-1 { grid-template-columns: 1fr; } }

/* card-grid utility: responsive auto-fill grid */
.card-grid {
  display: grid;
  gap: var(--space-lg, 1rem);
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
@media (max-width: 900px) {
  .card-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}
@media (max-width: 640px) {
  .card-grid { grid-template-columns: 1fr; }
}

/* Aspect helpers for media wrappers */
.aspect-square { aspect-ratio: 1 / 1; width: 100%; }
.aspect-398-219 { aspect-ratio: 398 / 219; width: 100%; }

/* Margin & Padding utilities */
.m-xs { margin: var(--space-xs) !important; }
.m-sm { margin: var(--space-sm) !important; }
.m-md { margin: var(--space-md) !important; }
.m-lg { margin: var(--space-lg) !important; }
.m-xl { margin: var(--space-xl) !important; }
.p-xs { padding: var(--space-xs) !important; }
.p-sm { padding: var(--space-sm) !important; }
.p-md { padding: var(--space-md) !important; }
.p-lg { padding: var(--space-lg) !important; }
.p-xl { padding: var(--space-xl) !important; }

/* =========================
   Skeleton loading
   ========================= */
.skeleton {
  display: block; width: 100%; border-radius: .6rem;
  background: linear-gradient(90deg, rgba(148,163,184,.25), rgba(148,163,184,.12), rgba(148,163,184,.25));
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.2s linear infinite;
}
@keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* =========================
   Alerts / Toasts
   ========================= */
.alert {
  padding: .85rem 1rem;
  border-radius: .75rem;
  border: 1px solid var(--color-border);
  background: var(--color-background-light);
  color: var(--color-text);
}
.alert.success { border-color: #bbf7d0; background: #f0fdf4; color: #166534; }
.alert.warning { border-color: #fde68a; background: #fffbeb; color: #854d0e; }
.alert.danger  { border-color: #fecaca; background: #fef2f2; color: #7f1d1d; }

.toast {
  position: fixed; bottom: 1rem; right: 1rem;
  background: var(--color-background);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: .75rem;
  padding: .75rem 1rem;
  box-shadow: var(--shadow-lg);
  z-index: 1000;
}

/* Dark */
[data-theme="dark"] .alert { background: #1e2749; border-color: #3b4466; }

/* =========================
   Tooltips
   ========================= */
.tooltip {
  position: relative; cursor: help;
}
.tooltip .tooltip-content {
  position: absolute; inset-inline-start: 50%; transform: translateX(-50%) translateY(-6px);
  bottom: 100%; white-space: nowrap;
  background: #30343f; color: #fff; font-size: .75rem; padding: .35rem .5rem; border-radius: .4rem;
  opacity: 0; pointer-events: none; transition: opacity var(--transition-fast), transform var(--transition-fast);
  box-shadow: var(--shadow-sm);
}
.tooltip:hover .tooltip-content, .tooltip:focus-within .tooltip-content {
  opacity: 1; transform: translateX(-50%) translateY(-10px);
}
.tooltip .tooltip-arrow {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  width: 8px; height: 8px; background: #30343f; clip-path: polygon(50% 0, 0 100%, 100% 100%);
}

/* =========================
   Scroll area utility
   ========================= */
.scroll-area {
  max-height: 420px; overflow: auto; padding-right: .5rem;
}
.scroll-area::-webkit-scrollbar { width: 8px; }
.scroll-area::-webkit-scrollbar-thumb { background: #e4d9ff; border-radius: 4px; }
[data-theme="dark"] .scroll-area::-webkit-scrollbar-thumb { background: #475569; }

/* ===== Header & nav ===== */

.nav-link {
  position: relative;
  padding: .5rem .75rem;
  border: 1px solid rgba(59,130,246,.30);
  border-radius: .5rem;
  background: rgba(59,130,246,.05);
  color: #273469;
  font-weight: 600;
  transition: color .2s, background .2s, border-color .2s, transform .12s;
}
.nav-link:hover { background: rgba(59,130,246,.12); border-color: rgba(59,130,246,.5); transform: translateY(-1px); }
.nav-link.text-blue-700,
.nav-link.border-blue-700,
.nav-link.border-b-2,
.nav-link.border-blue-500,
.nav-link[aria-current="page"] {
  background: #273469 !important;
  border-color: #273469 !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(29, 78, 216, 0.35);
}

.nav-link.text-blue-700:hover,
.nav-link.border-blue-700:hover,
.nav-link.border-b-2:hover,
.nav-link.border-blue-500:hover,
.nav-link[aria-current="page"]:hover {
  transform: translateY(-1px);
  background: #273469 !important;
  box-shadow: 0 4px 10px rgba(29, 78, 216, 0.4);
}

/* ===== Toolbar actions (filter/share/dark mode) ===== */
.filter-toggle, #themeToggle {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .4rem .6rem;
  border: 1px solid rgba(59,130,246,.30);
  border-radius: .6rem;
  background: rgba(59,130,246,.06);
  transition: background .2s, transform .12s, box-shadow .2s;
}
.filter-toggle:hover, #themeToggle:hover {
  background: rgba(59,130,246,.12);
  transform: translateY(-1px);
  box-shadow: 0 6px 12px rgba(59,130,246,.15);
}

/* ===== Loader spinner ===== */
.loader {
  border: 8px solid rgba(0,0,0,0.08);
  border-top-color: var(--color-primary);
  border-radius: 9999px;
  width: 6rem; height: 6rem;
  animation: spinner 1s linear infinite;
}
@keyframes spinner { to { transform: rotate(360deg); } }

/* ===== Price slider polish ===== */
#priceSlider {
  -webkit-appearance: none; appearance: none;
  width: 100%; max-width: 350px; min-width: 120px;
  height: 8px; margin: 0;
  background: linear-gradient(
    90deg,
    #273469 0%,
    #273469 var(--slider-progress, 100%),
    #e4d9ff var(--slider-progress, 100%),
    #e4d9ff 100%
  );
  border-radius: 9999px;
  outline: none;
}
#priceSlider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: #ffffff; border: 2px solid #273469;
  box-shadow: 0 2px 8px rgba(14, 116, 144, 0.35);
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 160ms ease;
}
#priceSlider:active::-webkit-slider-thumb,
#priceSlider:focus-visible::-webkit-slider-thumb {
  transform: scale(1.08);
  box-shadow: 0 4px 16px rgba(14, 116, 144, 0.42);
}
#priceSlider::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: #ffffff; border: 2px solid #273469;
  box-shadow: 0 2px 8px rgba(14, 116, 144, 0.35);
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 160ms ease;
}
#priceSlider::-moz-range-track {
  height: 8px; background: #e4d9ff;
  border-radius: 9999px;
}

#priceSlider::-moz-range-progress {
  height: 8px;
  background: linear-gradient(90deg, #273469, #273469);
  border-radius: 9999px;
}

[data-theme="dark"] #priceSliderContainer {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(30, 41, 59, 0.92)) !important;
  border-color: rgba(125, 211, 252, 0.28) !important;
}

[data-theme="dark"] #priceSliderContainer label,
[data-theme="dark"] #priceCurrent {
  color: #e4d9ff !important;
}

[data-theme="dark"] #priceCurrent {
  background: rgba(14, 165, 233, 0.16);
  border-color: rgba(125, 211, 252, 0.32);
}

[data-theme="dark"] .price-scale {
  color: #94a3b8;
}

[data-theme="dark"] #priceSlider {
  background: linear-gradient(
    90deg,
    #e4d9ff 0%,
    #273469 var(--slider-progress, 100%),
    rgba(148, 163, 184, 0.28) var(--slider-progress, 100%),
    rgba(148, 163, 184, 0.28) 100%
  );
}

[data-theme="dark"] #priceSlider::-webkit-slider-thumb,
[data-theme="dark"] #priceSlider::-moz-range-thumb {
  background: #30343f;
  border-color: #e4d9ff;
}

/* ===== Cards in phone showcase ===== */
#phoneShowcase .phone-card,
#phoneShowcase > * {
  background: var(--color-background);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: .9rem;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease;
}
#phoneShowcase .phone-card:hover,
#phoneShowcase > *:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(59,130,246,.35);
}

#phoneModal .bg-white {
  border-radius: 1rem;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-border);
}

html, body, .dpf-app { height: auto; min-height: 0; }
.dpf-app { overflow: visible; }
.dpf-app .container { height: auto; min-height: 100%; overflow: visible; }

.container {
  width: min(100%, 1200px);
  max-width: none;             /* undo earlier max-width:100% */
  padding: 1rem 1.25rem;       /* keep inner spacing */
  margin: 0 auto;              /* center */
  border-radius: var(--spacing-md);
  box-shadow: var(--shadow-md);
  background-color: var(--color-background);
  transition: background-color var(--transition-normal), box-shadow var(--transition-normal);
  animation: fadeIn 0.5s ease-in-out;
}

/* ---- Allow sidebar content to define page height (no internal cap) ---- */
#sidebar { max-height: none; overflow: visible; }
@media (min-width: 1024px) {
  #sidebar { max-height: none; overflow: visible; }
}

/* Full‑bleed mode for embeds (Squarespace) */
#dpf-root.dpf-full .container {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: var(--dpf-gutter) !important;  /* keep gutters so content isn’t flush to edges */
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* If embedded, clear the body’s decorative background */
body.dpf-embedded.site-bg { background: transparent !important; }

/* Title is a centered block */

/* Light by default; only dark when explicitly toggled */
body.site-bg {
  background: var(--color-background) !important;
}
body.dark-mode.site-bg,
html[data-theme="dark"] body.site-bg {
  background: var(--color-background-dark) !important;
  background-image: none !important;
}

/* ---------------- Base + tokens ---------------- */
:root {
  --gutter: clamp(16px, 4vw, 32px);
  --radius-md: 16px;
  --shadow-md: 0 8px 24px rgba(0,0,0,.08);
  --shadow-lg: 0 16px 48px rgba(0,0,0,.12);
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
img, svg, video { display: block; max-width: 100%; height: auto; }

/* Respect user preferences */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ---------------- App shell + container ---------------- */
.dpf-app {
  /* acts as a layout scope */
  min-width: 320px;
}
.dpf-app .container {
  width: min(100%, 1200px);
  margin: 0 auto;
  padding: var(--gutter);
  background: var(--color-background);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

/* Full‑bleed override (used across the site) */
#dpf-root.dpf-full .container,
.dpf-app.dpf-full .container {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: var(--gutter) !important; /* keep gutters */
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Embedded (Squarespace) clears decorative backgrounds safely */
body.dpf-embedded.site-bg { background: transparent !important; }

/* Light as default; only dark when toggled */
body.site-bg { background: var(--color-background); }
body.dark-mode.site-bg,
html[data-theme="dark"] body.site-bg { background: var(--color-background-dark); }

/* ---------------- Title: single, readable, and centered ---------------- */
/* Final .header-gradient override (single source of truth) */
.header-gradient {
  display: block;
  width: max-content;
  margin-inline: auto;
  text-align: center;
  font-size: clamp(3.2rem, 6.5vw, 5.5rem) !important;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.02em;

  background: linear-gradient(90deg, #273469 0%, #273469 22%, #273469 52%, #273469 78%, #273469 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;

  /* subtle edge for contrast on white */
  -webkit-text-stroke: 0.5px rgba(17, 24, 39, 0.18);
  text-shadow: 0 1px 1px rgba(17, 24, 39, 0.10), 0 8px 22px rgba(2, 6, 23, 0.08);
  filter: none; /* avoid washout */
}

/* Underline */
.header-gradient::after {
  content: "";
  display: block;
  width: min(72%, 560px);
  height: 6px;
  margin: .55rem auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(30,64,175,.85), rgba(124,58,237,.85), rgba(14,165,233,.85));
  box-shadow:
    0 2px 10px rgba(30, 64, 175, 0.28),
    0 8px 26px rgba(124, 58, 237, 0.22),
    0 12px 36px rgba(14, 165, 233, 0.18);
}

/* High-contrast and no-clip fallbacks */
@media (prefers-contrast: more) {
  .header-gradient {
    background: none;
    -webkit-text-stroke: 0;
    -webkit-text-fill-color: initial;
    color: #30343f;
    text-shadow: none;
  }
  .header-gradient::after { opacity: .9; }
}
@supports not (background-clip: text) {
  .header-gradient { color: #30343f; background: none; }
}

/* ---------------- Modal polish ---------------- */
@supports (overscroll-behavior: contain) {
  #phoneModal { overscroll-behavior: contain; }
}
#phoneModal .bg-white {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(0,0,0,.06);
}

/* ---------------- Small utilities ---------------- */
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid #273469; outline-offset: 2px; }

/* ---------------- Price slider alignment ---------------- */
#priceSlider { width: 100%; }

/* ---------------- Card media consistency ---------------- */
.phone-card img { object-fit: contain; background: transparent; display: block; }

/* Mobile title sizing + wrapping fix */
@media (max-width: 720px){
  h1.header-gradient{
    font-size: clamp(2.6rem, 9.5vw, 3.4rem) !important;
  }
}
@media (max-width: 560px){
  h1.header-gradient{
    width:100% !important;          /* override earlier max-content */
    font-size: clamp(2.2rem, 10.5vw, 2.9rem) !important;
    line-height:1.15;
    white-space:normal;              /* allow wrapping */
    word-break:normal;
    overflow-wrap:break-word;
    padding:0 .4rem;
    -webkit-text-stroke:0.4px rgba(17,24,39,.15);
  }
}
@media (max-width: 420px){
  h1.header-gradient{
    font-size: clamp(1.9rem, 11.5vw, 2.4rem) !important;
    letter-spacing:-0.5px;
  }
}

/* Apply balanced wrapping where supported (guarded) */
@supports (text-wrap: balance) {
  @media (max-width: 560px) {
    h1.header-gradient { text-wrap: balance; }
  }
}

/* =========================================
   Dropdown Filters: Mobile usability pass
   ========================================= */

/* Universal: custom arrow + no truncation */
select.form-control,
#addFilterDropdown {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg stroke='currentColor' fill='none' stroke-width='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7' /%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .85rem center;
  background-size: .9rem;
  padding-right: 2.4rem;
  white-space: normal;
  line-height: 1.3;
}

/* Hover/active feedback for the arrow color */
select.form-control:hover,
#addFilterDropdown:hover {
  background-image: url("data:image/svg+xml,%3Csvg stroke='%231d4ed8' fill='none' stroke-width='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7' /%3E%3C/svg%3E");
}
select.form-control:focus,
#addFilterDropdown:focus {
  background-image: url("data:image/svg+xml,%3Csvg stroke='%231d4ed8' fill='none' stroke-width='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 15l-7-7-7 7' /%3E%3C/svg%3E");
}

/* Keep title always centered */
h1.header-gradient {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Card layout on small screens */
@media (max-width: 680px) {

  .filters-table thead { display: none; }

  #filterCategories tr {
    display: block;
    position: relative;
    background: var(--color-background);
    border: 1px solid var(--color-border-light);
    border-radius: .85rem;
    padding: .8rem .9rem .95rem;
    margin: 0 0 .9rem;
    box-shadow: var(--shadow-sm);
  }

  #filterCategories td:first-child {
    display: block;
    padding: 0;
    margin: 0 0 .45rem;
    font-size: .7rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--color-primary-dark);
    text-align: left;
    border: none;
  }

  #filterCategories td:nth-child(2) {
    display: block;
    padding: 0;
    border: none;
  }
  #filterCategories td:nth-child(2) select.form-control {
    width: 100%;
    font-size: .85rem;
    padding: .55rem 2.4rem .55rem .85rem;
    border: 1px solid var(--color-border-light);
    border-radius: .6rem;
    background-color: var(--color-background);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.05);
  }

  #filterCategories td:last-child {
    position: absolute;
    top: .5rem;
    right: .55rem;
    padding: 0;
    border: none;
  }
  #filterCategories td:last-child button {
    background: rgba(239,68,68,.12);
    border: 1px solid rgba(239,68,68,.4);
    width: 1.75rem;
    height: 1.75rem;
    line-height: 1;
    padding: 0;
    border-radius: .55rem;
    font-size: .85rem;
    color: #b91c1c;
    box-shadow: none;
    transition: background .2s, transform .15s;
  }
  #filterCategories td:last-child button:hover {
    background: #dc2626;
    color: #fff;
    transform: translateY(-2px);
  }

  .filters-table,
  .filters-table tbody,
  .filters-table tr,
  .filters-table td {
    border: none !important;
  }

  /* Wrapped title stays centered on small screens */
  h1.header-gradient {
    width: 100%;
    white-space: normal;
  }
}

/* Dark mode adjustments for mobile cards */
@media (max-width: 680px) {
  [data-theme="dark"] #filterCategories tr {
    background: #1e2749;
    border: 1px solid #3b4466;
  }
  [data-theme="dark"] #filterCategories td:first-child {
    color: var(--color-primary);
  }
  [data-theme="dark"] #filterCategories td:nth-child(2) select.form-control {
    background: #30343f;
    border-color: #3b4466;
  }
  [data-theme="dark"] #filterCategories td:last-child button {
    background: rgba(239,68,68,.25);
    border-color: rgba(239,68,68,.55);
    color: #fca5a5;
  }
  [data-theme="dark"] #filterCategories td:last-child button:hover {
    background: #ef4444;
    color: #fff;
  }
}

/* -----------------------------
   Defensive dark-mode parity
   Ensure selectors that used hard-coded light colors get dark overrides
   ----------------------------- */
body.dark-mode .bg-white,
[data-theme="dark"] .bg-white,
[data-theme="dark"] .card,
[data-theme="dark"] .card-body,
[data-theme="dark"] .card-header,
[data-theme="dark"] .card-footer {
  background: var(--color-background-dark) !important;
  color: var(--color-text-dark) !important;
  border-color: var(--color-border-dark) !important;
  box-shadow: 0 6px 18px rgba(2,6,23,0.6) !important;
}

[data-theme="dark"] #phoneModal > .bg-white,
[data-theme="dark"] #phoneModal .bg-white {
  background: var(--color-background-dark) !important;
  color: var(--color-text-dark) !important;
  border-color: var(--color-border-dark) !important;
  box-shadow: 0 12px 36px rgba(2,6,23,0.6) !important;
}

[data-theme="dark"] .phone-card,
[data-theme="dark"] #phoneShowcase .phone-card,
[data-theme="dark"] #phoneShowcase > * {
  background: var(--color-background-dark) !important;
  color: var(--color-text-dark) !important;
  border: 1px solid var(--color-border-dark) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.6) !important;
}

[data-theme="dark"] .phone-card img {
  background: transparent !important;
}

/* Image container in dark mode */
[data-theme="dark"] .phone-card .bg-gray-50 {
  background-color: rgba(255,255,255,0.04) !important;
}

[data-theme="dark"] .filter-group {
  background: transparent !important;
  border-color: var(--color-border-dark) !important;
  color: var(--color-text-dark) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.6) !important;
}
[data-theme="dark"] .filter-group h3 {
  color: var(--color-primary) !important;
  border-bottom-color: rgba(255,255,255,0.04) !important;
}

[data-theme="dark"] .active-filter-tag {
  background: rgba(59,130,246,0.08) !important;
  color: var(--color-text-dark) !important;
  border: 1px solid rgba(59,130,246,0.12) !important;
}

[data-theme="dark"] .active-filter-tag button {
  color: #fca5a5 !important;
  background: rgba(239,68,68,0.12) !important;
  border-color: rgba(239,68,68,0.12) !important;
}

[data-theme="dark"] .filter-toggle,
[data-theme="dark"] #themeToggle {
  background: rgba(96,165,250,0.04) !important;
  border-color: rgba(96,165,250,0.12) !important;
  color: var(--color-text-dark) !important;
  box-shadow: none !important;
}

[data-theme="dark"] .alert,
[data-theme="dark"] .toast,
[data-theme="dark"] .tooltip .tooltip-content {
  background: var(--color-background-dark) !important;
  color: var(--color-text-dark) !important;
  border-color: var(--color-border-dark) !important;
}

[data-theme="dark"] .btn {
  background: var(--color-background-dark) !important;
  color: var(--color-primary) !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.6) !important;
}

[data-theme="dark"] .btn-outline {
  background: transparent !important;
  color: var(--color-primary) !important;
  border-color: rgba(96,165,250,0.12) !important;
}

[data-theme="dark"] select.form-control,
[data-theme="dark"] #addFilterDropdown,
[data-theme="dark"] input,
[data-theme="dark"] textarea {
  background: #1e2749 !important;
  color: var(--color-text-dark) !important;
  border-color: var(--color-border-dark) !important;
}

/* Neutralize white backgrounds in dark mode */
[data-theme="dark"] [style*="#fff"],
[data-theme="dark"] [style*="background: #fff"] {
  background: var(--color-background-dark) !important;
  color: var(--color-text-dark) !important;
}

/* Specific component fixes */
[data-theme="dark"] .form-checkbox {
  background: #1e2749 !important;
  border-color: #475569 !important;
}
[data-theme="dark"] .form-checkbox:checked {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}

[data-theme="dark"] .switch .thumb {
  background: #1e2749 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.6) !important;
}

[data-theme="dark"] #priceSlider::-webkit-slider-thumb {
  background: #1e2749 !important;
  border: 2px solid var(--color-primary) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.6) !important;
}
[data-theme="dark"] #priceSlider::-moz-range-thumb {
  background: #1e2749 !important;
  border: 2px solid var(--color-primary) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.6) !important;
}

[data-theme="dark"] .filter-group label:hover {
  background-color: rgba(255,255,255,0.02) !important;
}

/* ==========================
   Improve text contrast in dark mode
   Ensure common typographic elements use the dark text token
   ========================== */
[data-theme="dark"] body,
[data-theme="dark"] .dpf-app,
[data-theme="dark"] .container {
  color: var(--color-text-dark) !important;
  background-color: var(--color-background-dark) !important;
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6,
[data-theme="dark"] p,
[data-theme="dark"] label,
[data-theme="dark"] span,
[data-theme="dark"] a,
[data-theme="dark"] button,
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  color: var(--color-text-dark) !important;
}

/* Tweak lower-contrast hard-coded values */
[data-theme="dark"] .input-wrapper .input-icon { color: #94a3b8 !important; }
[data-theme="dark"] .filter-group label span { color: var(--color-text-dark) !important; }
[data-theme="dark"] .filters-table th,
[data-theme="dark"] .filters-table td { color: var(--color-text-dark) !important; }

/* Price slider container — dark mode */
[data-theme="dark"] #priceSliderContainer {
  background: var(--color-background-card, #30343f) !important;
  border-color: var(--color-border-dark, rgba(255,255,255,0.10)) !important;
}
[data-theme="dark"] #priceSliderContainer label {
  color: var(--color-text-dark, #e4d9ff) !important;
}

/* Filters table wrapper (bg-white panel) — dark mode */
[data-theme="dark"] .bg-white.p-8,
body.dark-mode .bg-white.p-8,
[data-theme="dark"] #mainContent .bg-white,
body.dark-mode #mainContent .bg-white,
[data-theme="dark"] #sidebar,
body.dark-mode #sidebar {
  background: #30343f !important;
  background-color: #30343f !important;
  color: #e4d9ff !important;
  border-color: rgba(255,255,255,0.08) !important;
}

/* Nav links -- preserve active styling */
[data-theme="dark"] .nav-link {
  color: var(--color-text-dark) !important;
  border-color: rgba(255,255,255,0.12) !important;
  background: rgba(255,255,255,0.04) !important;
}
[data-theme="dark"] .nav-link:hover {
  background: rgba(59,130,246,0.12) !important;
  border-color: rgba(59,130,246,0.4) !important;
  color: var(--color-primary) !important;
}
[data-theme="dark"] .nav-link[aria-current="page"],
[data-theme="dark"] .nav-link.text-blue-700,
[data-theme="dark"] .nav-link.border-b-2 {
  background: #273469 !important;
  border-color: #273469 !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(14, 165, 233, 0.4);
}

/* Small utility text contrast */
[data-theme="dark"] #filterResultCount,
[data-theme="dark"] .filter-message,
[data-theme="dark"] .applied-filters,
[data-theme="dark"] .active-filter-tag { color: var(--color-text-dark) !important; }

/* Make sure any lighter accent text is still readable */
[data-theme="dark"] .text-blue-500,
[data-theme="dark"] .text-blue-700 { color: var(--color-primary) !important; }

/* Header gradient in dark mode */
[data-theme="dark"] .header-gradient,
body.dark-mode .header-gradient {
  background: linear-gradient(90deg, #e4d9ff 0%, #c4b5fd 45%, #67e8f9 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  filter: drop-shadow(0 2px 8px rgba(147,197,253,0.35)) !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
}

/* ===========================
   Phone Card Enhancements
   =========================== */
/* Pill tag (brand/label) in product cards */ 
.pill-tag {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .75rem;
  border-radius: 9999px;
  background: var(--color-background);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  font-weight: 700;
  font-size: .75rem;
  box-shadow: 0 6px 18px rgba(2,6,23,0.06);
}

/* Absolute positioning variant inside .phone-card */
.phone-card .pill-tag {
  position: absolute;
  top: .75rem;
  left: .75rem;
  z-index: 12;
}

/* Border glow utility and a lighter embed override */
.border-glow {
  box-shadow: 0 12px 36px rgba(37, 99, 235, 0.08);
  transition: box-shadow var(--transition-normal), transform var(--transition-fast);
}
.dpf-embedded .border-glow {
  box-shadow: 0 6px 14px rgba(37, 99, 235, 0.035) !important;
}

/* Text truncation utility for card titles */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
  max-height: 2.6em;
}

/* Ensure phone cards have consistent height and spacing */
.phone-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 360px;
}

/* Light-mode: pure white cards */
:root:not([data-theme="dark"]) .phone-card {
  background-color: #ffffff;
}

.phone-card > div:last-child {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.phone-card a[href] {
  margin-top: auto;
}

/* Dark mode adjustments for card badges */
[data-theme="dark"] .phone-card .bg-green-100 {
  background-color: rgba(34, 197, 94, 0.15) !important;
  color: #86efac !important;
  border-color: rgba(34, 197, 94, 0.3) !important;
}

[data-theme="dark"] .phone-card .bg-yellow-100 {
  background-color: rgba(251, 191, 36, 0.15) !important;
  color: #fde047 !important;
  border-color: rgba(251, 191, 36, 0.3) !important;
}

[data-theme="dark"] .phone-card .bg-red-100 {
  background-color: rgba(239, 68, 68, 0.15) !important;
  color: #fca5a5 !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
}

[data-theme="dark"] .phone-card .bg-gray-100 {
  background-color: rgba(156, 163, 175, 0.15) !important;
  color: #e4d9ff !important;
  border-color: rgba(156, 163, 175, 0.3) !important;
}

/* Badge text readability */
[data-theme="dark"] .phone-card .text-green-800,
[data-theme="dark"] .phone-card .text-yellow-800,
[data-theme="dark"] .phone-card .text-red-800,
[data-theme="dark"] .phone-card .text-gray-600 {
  color: inherit !important;
}

/* =========================================
   2026 UI/UX refinement pass
   ========================================= */

:root {
  --dpf-hero-bg-1: #fafaff;
  --dpf-hero-bg-2: #fafaff;
  --dpf-hero-bg-3: #fefce8;
  --dpf-panel: rgba(255, 255, 255, 0.86);
  --dpf-panel-border: rgba(14, 116, 144, 0.16);
  --dpf-soft-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
}

body.site-bg {
  background:
    radial-gradient(960px 420px at 0% -12%, var(--dpf-hero-bg-1), transparent 62%),
    radial-gradient(760px 380px at 100% -18%, var(--dpf-hero-bg-2), transparent 60%),
    radial-gradient(520px 280px at 52% -18%, var(--dpf-hero-bg-3), transparent 68%),
    linear-gradient(180deg, #fafaff 0%, #fafaff 50%, #fafaff 100%);
}

.intro-copy {
  margin: 0.8rem auto 0;
  max-width: 62ch;
  text-align: center;
  font-size: clamp(0.98rem, 1.4vw, 1.12rem);
  line-height: 1.6;
  color: #334155;
}

.dpf-app [aria-label="Region versions"] {
  gap: 0.55rem;
}

.dpf-app #mainContent > .bg-white,
.dpf-app #sidebar {
  background: var(--dpf-panel);
  border: 1px solid var(--dpf-panel-border);
  box-shadow: var(--dpf-soft-shadow);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.dpf-app #sidebar {
  border-radius: 16px;
}

.controls-wrapper {
  margin-bottom: 1.25rem;
  padding: 0.95rem;
  border-radius: 14px;
  border: 1px solid rgba(14, 116, 144, 0.16);
  background: linear-gradient(180deg, rgba(240, 249, 255, 0.92), rgba(255, 255, 255, 0.9));
}

.filters-actions .btn {
  min-height: 40px;
  border-color: rgba(14, 116, 144, 0.24);
}

#sortPriceBtn[aria-pressed="true"] {
  background: rgba(14, 116, 144, 0.12);
  border-color: rgba(14, 116, 144, 0.45);
  color: #273469;
}

#toggleFiltersBtn[aria-pressed="true"] {
  background: rgba(37, 99, 235, 0.12);
  border-color: rgba(29, 78, 216, 0.42);
  color: #273469;
}

#featureSearch {
  border-color: rgba(37, 99, 235, 0.22);
  background-color: rgba(255, 255, 255, 0.96);
}

#phoneShowcase .phone-card {
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
  animation: dpf-card-rise 420ms cubic-bezier(0.2, 0.9, 0.25, 1) both;
}

#phoneShowcase .phone-card:focus-visible {
  outline: 2px solid #273469;
  outline-offset: 2px;
}

#phoneShowcase .phone-card:nth-child(2n) { animation-delay: 40ms; }
#phoneShowcase .phone-card:nth-child(3n) { animation-delay: 80ms; }
#phoneShowcase .phone-card:nth-child(5n) { animation-delay: 120ms; }

@keyframes dpf-card-rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 820px) {
  .intro-copy {
    padding-inline: 0.8rem;
  }

  .controls-wrapper {
    padding: 0.75rem;
  }

  .filters-actions {
    justify-content: stretch;
  }

  .filters-actions .btn {
    flex: 1 1 44%;
  }
}

[data-theme="dark"] .intro-copy {
  color: #e4d9ff;
}

[data-theme="dark"] body.site-bg {
  background:
    radial-gradient(900px 420px at 0% -12%, rgba(30, 64, 175, 0.2), transparent 60%),
    radial-gradient(680px 340px at 100% -18%, rgba(14, 116, 144, 0.2), transparent 62%),
    linear-gradient(180deg, #1e2749 0%, #30343f 50%, #30343f 100%);
}

[data-theme="dark"] .dpf-app #mainContent > .bg-white,
[data-theme="dark"] .dpf-app #sidebar {
  background: rgba(15, 23, 42, 0.76) !important;
  border-color: rgba(148, 163, 184, 0.24) !important;
}

[data-theme="dark"] .controls-wrapper {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(17, 24, 39, 0.92));
  border-color: rgba(96, 165, 250, 0.22);
}

[data-theme="dark"] {
  --dpf-dark-bg: #1e2749;
  --dpf-dark-surface: #1e2749;
  --dpf-dark-surface-2: #1e2749;
  --dpf-dark-border: rgba(148, 163, 184, 0.28);
  --dpf-dark-text: #fafaff;
  --dpf-dark-text-soft: #a8b6cb;
  --dpf-dark-accent: #e4d9ff;
}

[data-theme="dark"] body,
[data-theme="dark"] .dpf-app {
  color: var(--dpf-dark-text) !important;
}

[data-theme="dark"] body.site-bg {
  background:
    radial-gradient(1000px 460px at 0% -12%, rgba(14, 116, 144, 0.26), transparent 62%),
    radial-gradient(740px 360px at 100% -18%, rgba(37, 99, 235, 0.24), transparent 64%),
    linear-gradient(180deg, #1e2749 0%, #1e2749 52%, #1e2749 100%) !important;
}

[data-theme="dark"] .dpf-app #mainContent > .bg-white,
[data-theme="dark"] .dpf-app #sidebar,
[data-theme="dark"] #phoneModal .bg-white,
[data-theme="dark"] .filters-table {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(15, 32, 52, 0.9)) !important;
  border: 1px solid var(--dpf-dark-border) !important;
  box-shadow: 0 22px 56px rgba(2, 6, 23, 0.52) !important;
}

[data-theme="dark"] .intro-copy,
[data-theme="dark"] .search-hint,
[data-theme="dark"] .filter-group label span,
[data-theme="dark"] .text-gray-600,
[data-theme="dark"] .text-gray-700 {
  color: var(--dpf-dark-text-soft) !important;
}

[data-theme="dark"] .nav-link {
  color: #e4d9ff !important;
  border-color: rgba(56, 189, 248, 0.28) !important;
  background: linear-gradient(180deg, rgba(14, 116, 144, 0.22), rgba(14, 116, 144, 0.08)) !important;
}

[data-theme="dark"] .nav-link:hover {
  color: #fafaff !important;
  border-color: rgba(125, 211, 252, 0.68) !important;
  background: linear-gradient(180deg, rgba(56, 189, 248, 0.22), rgba(2, 132, 199, 0.14)) !important;
  box-shadow: 0 8px 22px rgba(14, 116, 144, 0.3);
}

[data-theme="dark"] .nav-link[aria-current="page"],
[data-theme="dark"] .nav-link.text-blue-700,
[data-theme="dark"] .nav-link.border-b-2 {
  color: #ffffff !important;
  border-color: #273469 !important;
  background: #273469 !important;
  box-shadow: 0 2px 6px rgba(14, 165, 233, 0.4);
}

[data-theme="dark"] .controls-wrapper {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(16, 36, 58, 0.94)) !important;
  border-color: rgba(56, 189, 248, 0.34) !important;
}

[data-theme="dark"] .result-count {
  color: #e4d9ff;
  background: rgba(14, 165, 233, 0.16);
  border-color: rgba(56, 189, 248, 0.36);
}

[data-theme="dark"] .filter-toggle,
[data-theme="dark"] #themeToggle,
[data-theme="dark"] .btn-outline {
  color: #e4d9ff !important;
  border-color: rgba(125, 211, 252, 0.35) !important;
  background: linear-gradient(180deg, rgba(30, 64, 175, 0.2), rgba(15, 23, 42, 0.1)) !important;
  box-shadow: 0 6px 18px rgba(2, 6, 23, 0.35) !important;
}

[data-theme="dark"] .filter-toggle:hover,
[data-theme="dark"] #themeToggle:hover,
[data-theme="dark"] .btn-outline:hover {
  color: #fafaff !important;
  border-color: rgba(186, 230, 253, 0.72) !important;
  background: linear-gradient(180deg, rgba(14, 165, 233, 0.24), rgba(30, 64, 175, 0.2)) !important;
  box-shadow: 0 10px 24px rgba(14, 116, 144, 0.35) !important;
}

[data-theme="dark"] #themeToggle {
  border-color: rgba(250, 204, 21, 0.45) !important;
  background: linear-gradient(180deg, rgba(250, 204, 21, 0.2), rgba(124, 45, 18, 0.14)) !important;
}

[data-theme="dark"] #themeToggle:hover {
  border-color: rgba(253, 224, 71, 0.8) !important;
  background: linear-gradient(180deg, rgba(250, 204, 21, 0.34), rgba(161, 98, 7, 0.2)) !important;
}

[data-theme="dark"] #phoneShowcase .phone-card,
[data-theme="dark"] .phone-card {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(18, 34, 56, 0.95)) !important;
  border-color: rgba(96, 165, 250, 0.28) !important;
  box-shadow: 0 14px 30px rgba(2, 6, 23, 0.5) !important;
}

[data-theme="dark"] #phoneShowcase .phone-card:hover,
[data-theme="dark"] .phone-card:hover {
  border-color: rgba(125, 211, 252, 0.6) !important;
  box-shadow: 0 18px 38px rgba(14, 116, 144, 0.28) !important;
}

[data-theme="dark"] .filters-table thead {
  background: linear-gradient(180deg, rgba(14, 116, 144, 0.92), rgba(3, 105, 161, 0.92)) !important;
}

[data-theme="dark"] .filters-table tbody tr:hover {
  background: rgba(56, 189, 248, 0.12) !important;
}

[data-theme="dark"] .filter-group {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.72), rgba(15, 32, 52, 0.66)) !important;
  border-color: rgba(96, 165, 250, 0.22) !important;
}

[data-theme="dark"] .filter-group h3 {
  color: #e4d9ff !important;
}

[data-theme="dark"] .filter-group label:hover {
  background-color: rgba(56, 189, 248, 0.08) !important;
}

[data-theme="dark"] .applied-filters,
[data-theme="dark"] #activeCheckboxFilters {
  background: rgba(15, 23, 42, 0.75) !important;
  border-color: rgba(148, 163, 184, 0.26) !important;
}

[data-theme="dark"] .active-filter-tag {
  background: rgba(14, 165, 233, 0.18) !important;
  border-color: rgba(125, 211, 252, 0.38) !important;
  color: #e0f2fe !important;
}

[data-theme="dark"] #featureSearch,
[data-theme="dark"] select.form-control,
[data-theme="dark"] #addFilterDropdown {
  background-color: rgba(2, 6, 23, 0.62) !important;
  border-color: rgba(125, 211, 252, 0.26) !important;
  color: var(--dpf-dark-text) !important;
}

[data-theme="dark"] #featureSearch:focus,
[data-theme="dark"] select.form-control:focus,
[data-theme="dark"] #addFilterDropdown:focus,
[data-theme="dark"] button:focus-visible,
[data-theme="dark"] a:focus-visible {
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.42), 0 6px 20px rgba(14, 116, 144, 0.28) !important;
}

/* =========================================
   Mobile UX pass
   ========================================= */
@media (max-width: 768px) {
  body {
    padding-bottom: 6.2rem;
  }

  .dpf-app .container {
    padding: 0.75rem;
  }

  .intro-copy {
    margin-top: 0.6rem;
    font-size: 0.93rem;
    line-height: 1.45;
  }

  .header-gradient::after {
    width: min(82%, 360px);
    height: 4px;
    margin-top: 0.45rem;
  }

  .dpf-app [aria-label="Region versions"] {
    display: flex;
    flex-wrap: nowrap !important;
    justify-content: flex-start;
    gap: 0.5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-bottom: 0.95rem;
    padding: 0 0.15rem 0.45rem;
  }

  .dpf-app [aria-label="Region versions"]::-webkit-scrollbar {
    display: none;
  }

  .dpf-app [aria-label="Region versions"] .nav-link {
    flex: 0 0 auto;
    white-space: nowrap;
    scroll-snap-align: start;
    font-size: 0.86rem !important;
    padding: 0.5rem 0.7rem;
  }

  #mainContent {
    padding: 0.25rem !important;
  }

  .dpf-app #mainContent > .bg-white {
    padding: 0.85rem !important;
    border-radius: 14px;
  }

  .controls-wrapper {
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding: 0.7rem;
  }

  .controls-top {
    gap: 0.65rem;
  }

  .search-field {
    flex: 0 0 auto;
    width: 100%;
  }

  .result-count {
    order: -1;
    width: 100%;
    text-align: center;
  }

  .search-hint {
    font-size: 0.68rem;
  }

  #priceSliderContainer {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .filters-actions {
    position: fixed;
    left: 0.75rem;
    right: 0.75rem;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 0.65rem);
    z-index: 60;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    align-items: stretch;
    padding: 0.55rem;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.38);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.18);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }

  .filters-actions .btn {
    min-height: 44px;
    border-radius: 0.75rem;
    font-size: 0.78rem;
    line-height: 1.15;
    padding: 0.45rem;
  }

  #sortPriceBtn {
    font-size: 0.74rem;
  }

  #themeToggle,
  #shareFiltersBtn {
    font-size: 0.76rem;
  }

  #questions {
    margin-bottom: 0.8rem;
  }

  #phoneShowcase {
    gap: 0.8rem !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #phoneShowcase .phone-card {
    min-height: 0;
  }

  #phoneShowcase .phone-card .h-44 {
    height: 8.6rem;
  }

  #phoneShowcase .phone-card h5 {
    font-size: 0.96rem;
    margin-bottom: 0.4rem;
  }

  #phoneShowcase .phone-card .text-sm,
  #phoneShowcase .phone-card .text-xs {
    font-size: 0.76rem !important;
  }

  #phoneShowcase .phone-card .text-lg {
    font-size: 1rem !important;
  }

  #phoneShowcase .phone-card .btn-buy {
    padding: 0.52rem 0.65rem;
    font-size: 0.82rem;
  }
}

@media (max-width: 420px) {
  body {
    padding-bottom: 6.5rem;
  }

  #phoneShowcase {
    grid-template-columns: 1fr;
  }

  .filters-actions {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) and (prefers-reduced-motion: no-preference) {
  .filters-actions {
    animation: mobile-toolbar-in 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }
}

@keyframes mobile-toolbar-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 768px) {
  [data-theme="dark"] .filters-actions {
    background: rgba(15, 23, 42, 0.92);
    border-color: rgba(125, 211, 252, 0.32);
    box-shadow: 0 14px 30px rgba(2, 6, 23, 0.56);
  }

  [data-theme="dark"] #themeToggle,
  [data-theme="dark"] #shareFiltersBtn,
  [data-theme="dark"] #sortPriceBtn {
    color: #fafaff !important;
  }
}

@media (max-width: 768px) {
  .dpf-embedded .filters-actions,
  body.dpf-embedded .filters-actions {
    position: static !important;
    left: auto;
    right: auto;
    bottom: auto;
    box-shadow: none !important;
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    margin-top: 0.4rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dpf-embedded body,
  body.dpf-embedded {
    padding-bottom: 0 !important;
  }
}

/* Quick filter chips (shared across mobile, tablet, and desktop) */
.quick-filter-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
}

.quick-filter-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-muted, #64748b);
}

.quick-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.quick-filter-btn {
  flex: 0 0 auto;
  white-space: nowrap;
  border: 1px solid rgba(59, 130, 246, 0.28);
  background: #fafaff;
  color: #273469;
  font-size: 0.8rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 0.45rem 0.85rem;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  transition: border-color 160ms ease, background 160ms ease;
}

.quick-filter-btn:hover {
  border-color: rgba(59, 130, 246, 0.5);
  background: #e4d9ff;
}

.quick-filter-btn:active {
  transform: translateY(1px) scale(0.98);
}

.quick-filter-btn.is-active {
  color: #ffffff;
  background: #273469;
  border-color: #273469;
}

.quick-filter-btn.is-active:hover {
  border-color: #273469;
}

/* Advanced-filters toggle: expands inline dropdown on mobile, opens sidebar on desktop */
.mobile-advanced-checkbox,
.mobile-advanced-toggle {
  display: none;
}

/* Mobile & tablet: hide sidebar button, "Advanced Filters" expands inline dropdown */
@media (max-width: 1023px) {
  #toggleFiltersBtn {
    display: none !important;
  }

  .mobile-advanced-checkbox {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    opacity: 0;
    pointer-events: none;
  }

  .mobile-advanced-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    margin: 0.1rem 0 0.55rem;
    padding: 0.55rem 0.8rem;
    border-radius: 12px;
    border: 1px solid rgba(59, 130, 246, 0.32);
    background: rgba(219, 234, 254, 0.54);
    color: #273469;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
  }

  .mobile-advanced-toggle::before {
    content: "+";
    font-weight: 800;
  }

  .mobile-advanced-checkbox:checked + .mobile-advanced-toggle::before {
    content: "-";
  }

  .mobile-advanced-checkbox:not(:checked) ~ #questions {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
    border: 0;
    pointer-events: none;
  }

  .mobile-advanced-checkbox:checked ~ #questions {
    max-height: 2200px;
    opacity: 1;
    pointer-events: auto;
  }

  #questions {
    transition: max-height 260ms ease, opacity 180ms ease;
  }
}

/* Desktop: chips view, "Advanced Filters" opens sidebar */
@media (min-width: 1024px) {
  #questions {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .quick-filter-actions {
    gap: 0.4rem;
  }

  .search-field {
    display: block;
    flex-basis: 100%;
  }

  .quick-filter-label {
    display: none;
  }

  .quick-filter-row {
    gap: 0.4rem;
  }

  .quick-filter-btn {
    font-size: 0.74rem;
    padding: 0.4rem 0.65rem;
  }
}

[data-theme="dark"] .quick-filter-btn {
  color: #e0f2fe;
  border-color: rgba(125, 211, 252, 0.36);
  background: linear-gradient(180deg, rgba(14, 116, 144, 0.34), rgba(15, 23, 42, 0.56));
  box-shadow: 0 5px 14px rgba(2, 6, 23, 0.42);
}

[data-theme="dark"] .quick-filter-btn:hover {
  border-color: rgba(125, 211, 252, 0.55);
}

[data-theme="dark"] .quick-filter-btn.is-active {
  color: #ffffff;
  background: linear-gradient(180deg, #273469, #273469);
  border-color: #e4d9ff;
  box-shadow: 0 5px 14px rgba(14, 165, 233, 0.4);
}

@media (max-width: 1023px) {
  [data-theme="dark"] .mobile-advanced-toggle {
    color: #e0f2fe;
    border-color: rgba(125, 211, 252, 0.36);
    background: rgba(14, 116, 144, 0.24);
  }
}

/* High-contrast comparison actions in dark mode */
html[data-theme="dark"] .dpf-compare-action {
  color: #e0f2fe !important;
  border-color: #e4d9ff !important;
  background: linear-gradient(180deg, #273469, #1e2749) !important;
}
html[data-theme="dark"] .dpf-compare-action.has-selection {
  color: #1e2749 !important;
  border-color: #e4d9ff !important;
  background: linear-gradient(180deg, #e4d9ff, #e4d9ff) !important;
  box-shadow: 0 0 0 2px rgba(56, 189, 248, .2) !important;
}
html[data-theme="dark"] .dpf-compare-action:disabled {
  color: #94a3b8 !important;
  border-color: #475569 !important;
  background: #30343f !important;
  opacity: .7;
}
html[data-theme="dark"] .dpf-compare-add {
  color: #e4d9ff !important;
  border-color: #e4d9ff !important;
  background: #1e2749 !important;
}
html[data-theme="dark"] .dpf-compare-add:hover,
html[data-theme="dark"] .dpf-compare-add.is-selected {
  color: #1e2749 !important;
  border-color: #e4d9ff !important;
  background: #e4d9ff !important;
}
html[data-theme="dark"] .dpf-compare-add:disabled {
  color: #94a3b8 !important;
  border-color: #475569 !important;
  background: #30343f !important;
  opacity: .75;
  cursor: not-allowed;
}
html[data-theme="dark"] .dpf-compare-bar {
  color: #fafaff !important;
  border-color: #475569 !important;
  background: #30343f !important;
}
html[data-theme="dark"] .dpf-compare-bar button,
html[data-theme="dark"] .dpf-compare-open {
  color: #1e2749 !important;
  border: 1px solid #e4d9ff !important;
  background: #e4d9ff !important;
}
html[data-theme="dark"] .dpf-compare-bar .dpf-compare-clear {
  color: #e4d9ff !important;
  border-color: #64748b !important;
  background: #334155 !important;
}

/* =========================
   Phase 2: comparison views and identity headers
   ========================= */
.comparison-page-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  margin: 0 0 1rem;
}
.comparison-page-actions .btn { min-height: 40px; }

.comparison-view-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  margin: 0 0 .75rem;
}
.comparison-view-toolbar button {
  min-height: 38px;
  padding: .4rem .7rem;
  border: 1px solid #e4d9ff;
  border-radius: 8px;
  background: #fff;
  color: #334155;
  font: inherit;
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
}
.comparison-view-toolbar button[aria-pressed="true"] {
  border-color: #e4d9ff;
  background: #fafaff;
  color: #273469;
}

.comparison-table-scroll,
.dpf-comparison-scroll {
  overscroll-behavior: contain;
}
.comparison-table-scroll:focus-visible,
.dpf-comparison-scroll:focus-visible {
  outline: 2px solid #273469;
  outline-offset: 2px;
}

.comparison-phone-heading img,
.dpf-comparison-phone img {
  display: block;
  width: 64px;
  height: 64px;
  margin: 0 auto .35rem;
  object-fit: contain;
}
.comparison-phone-price,
.dpf-comparison-price {
  display: block;
  margin-top: .2rem;
  color: #15803d;
  font-size: .9rem;
  font-weight: 800;
}
.comparison-phone-rating,
.dpf-comparison-rating {
  display: block;
  margin: .1rem 0 .35rem;
  color: #64748b;
  font-size: .75rem;
  font-weight: 600;
}

.comparison-group-row th,
.dpf-comparison-table .comparison-group-row th {
  position: sticky;
  left: 0;
  z-index: 2;
  padding: .55rem .75rem;
  background: #e4d9ff;
  color: #30343f;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-align: left;
  text-transform: uppercase;
}

.dpf-comparison-heading-actions {
  display: flex;
  align-items: center;
  gap: .6rem;
}
.dpf-comparison-full-link {
  color: #273469;
  font-size: .8rem;
  font-weight: 700;
  white-space: nowrap;
}

.comparison-empty h2 {
  margin: 0 0 .5rem;
  font-size: 1.2rem;
  font-weight: 800;
}
.comparison-empty p { margin: 0 0 .5rem; }
.comparison-empty-link { color: #273469; font-weight: 700; }

.comparison-search-result[aria-pressed="true"] {
  border-color: #e4d9ff;
  background: #fafaff;
  color: #273469;
}

@media (max-width: 640px) {
  .comparison-view-toolbar button { flex: 1 1 auto; }
  .dpf-comparison-full-link { display: none; }
}
html[data-theme="dark"] .comparison-view-toolbar button {
  border-color: #30343f;
  background: #273469;
  color: #e4d9ff;
}
html[data-theme="dark"] .comparison-view-toolbar button[aria-pressed="true"] {
  border-color: #e4d9ff;
  background: #273469;
  color: #fff;
}
html[data-theme="dark"] .comparison-group-row th,
html[data-theme="dark"] .dpf-comparison-table .comparison-group-row th {
  background: #334155;
  color: #fafaff;
}
html[data-theme="dark"] .dpf-comparison-full-link { color: #e4d9ff; }

.dpf-compare-add.is-disabled {
  color: #64748b;
  border-color: #e4d9ff;
  background: #e4d9ff;
  cursor: not-allowed;
}
.dpf-compare-note {
  flex: 1 1 12rem;
  color: inherit;
  font-size: .78rem;
  font-weight: 600;
}

.dpf-comparison-dialog .comparison-view-toolbar {
  padding: .75rem 1rem 0;
}
.dpf-comparison-dialog .dpf-comparison-scroll {
  padding-top: .75rem;
}

/* =========================
   Comparison cleanup: fixed columns, hairline rules, sticky identity header
   ========================= */
.comparison-view-toolbar .comparison-match-note {
  margin-left: auto;
  color: #6b7280;
  font-size: .78rem;
  font-weight: 600;
}
.comparison-matrix,
.dpf-comparison-table {
  table-layout: fixed;
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.comparison-col-spec { width: 180px; }
.comparison-col-phone { width: 220px; }
.comparison-matrix th,
.comparison-matrix td,
.dpf-comparison-table th,
.dpf-comparison-table td {
  min-width: 0;
  border: 0;
  border-bottom: 1px solid #e4d9ff;
  overflow-wrap: anywhere;
  vertical-align: top;
}
.comparison-table { overflow: visible; }
.comparison-table-scroll,
.dpf-comparison-scroll {
  overflow: auto;
  border-radius: 6px;
}
.comparison-matrix thead th,
.dpf-comparison-table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: #fafaff;
  text-align: center;
}
.comparison-matrix tbody th:first-child,
.dpf-comparison-table tbody th:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background: #fafaff;
}
.comparison-matrix tbody th:not(:first-child),
.comparison-matrix tbody tr.comparison-group-row th,
.dpf-comparison-table tbody tr.comparison-group-row th {
  position: static;
  top: auto;
}
.comparison-matrix thead th:first-child,
.dpf-comparison-table thead th:first-child {
  z-index: 4;
  background: #fafaff;
}
.comparison-matrix tbody tr:nth-child(even) td,
[data-theme="dark"] .comparison-matrix tbody tr:nth-child(even) td {
  background: transparent;
}
.comparison-matrix td.comparison-different,
.dpf-comparison-table td.comparison-different,
[data-theme="dark"] .comparison-matrix td.comparison-different {
  background: transparent !important;
  box-shadow: none;
  font-weight: inherit;
}
.comparison-matrix .comparison-phone-heading img,
.dpf-comparison-phone img {
  width: 56px;
  height: 56px;
  object-fit: contain;
}
.comparison-matrix thead th,
.comparison-matrix th:first-child {
  min-width: 0;
}
.comparison-group-row th,
.dpf-comparison-table .comparison-group-row th {
  background: #fafaff;
  color: #30343f;
}
[data-theme="dark"] .comparison-matrix thead th,
[data-theme="dark"] .comparison-matrix tbody th:first-child,
[data-theme="dark"] .comparison-matrix thead th:first-child,
[data-theme="dark"] .dpf-comparison-table thead th,
[data-theme="dark"] .dpf-comparison-table tbody th:first-child {
  background: #1e2749;
}
[data-theme="dark"] .comparison-group-row th,
[data-theme="dark"] .dpf-comparison-table .comparison-group-row th {
  background: #334155;
  color: #fafaff;
}

.dpf-compare-bar {
  border-radius: 6px;
  box-shadow: none;
}

/* Comparison: keep columns fixed and make the page scroller the sticky port. */
.comparison-matrix,
.dpf-comparison-table {
  width: max-content;
  min-width: 0;
}
.comparison-table-scroll {
  max-height: calc(100dvh - 8rem);
}
.dpf-compare-bar.is-obscured {
  display: none !important;
}
.dpf-compare-action.is-disabled {
  opacity: .55;
  cursor: not-allowed;
}

/* =========================
   Overlay islands: same material and control scale
   ========================= */
#phoneModal > .bg-white {
  border-radius: 12px !important;
  background: #ffffff !important;
  box-shadow: 0 24px 80px rgba(23, 21, 15, .35) !important;
}
html[data-theme="dark"] #phoneModal > .bg-white {
  background: #273469 !important;
}
#phoneModal #closeModal {
  min-height: 40px;
  padding: .5rem 1rem;
  border: 1px solid #e4d9ff;
  border-radius: 2px !important;
  background: #30343f !important;
  color: #ffffff !important;
  font-weight: 600;
  box-shadow: none !important;
}
#phoneModal #closeModal:hover {
  background: #3b4466 !important;
}
html[data-theme="dark"] #phoneModal #closeModal {
  border-color: #3b4466;
  background: #30343f !important;
  color: #fafaff !important;
}
.dpf-comparison-dialog {
  border-radius: 12px !important;
  background: #ffffff !important;
}
html[data-theme="dark"] .dpf-comparison-dialog {
  background: #273469 !important;
}
.dpf-comparison-close {
  width: 40px;
  height: 40px;
  border-radius: 2px !important;
  box-shadow: none !important;
}
.dpf-comparison-remove,
.comparison-view-toolbar button,
.comparison-search-result,
.comparison-page-actions .btn,
.dpf-compare-bar button,
.dpf-compare-bar .dpf-compare-open {
  border-radius: 2px !important;
  box-shadow: none !important;
}
.dpf-compare-bar {
  background: #ffffff;
}
html[data-theme="dark"] .dpf-compare-bar {
  background: #273469;
}
.dpf-comparison-heading {
  border-bottom-color: #e4d9ff;
}
html[data-theme="dark"] .dpf-comparison-heading {
  border-bottom-color: #3b4466;
}

#phoneModal .btn,
#phoneModal .btn-buy,
#phoneModal .modal-compare-link,
#phoneModal .modal-sticky-buy .btn,
.dpf-comparison-dialog .btn,
.dpf-compare-bar .btn {
  border-radius: 2px !important;
  box-shadow: none !important;
}
#phoneModal .modal-at-glance,
#phoneModal .modal-media {
  border-radius: 6px !important;
}

.comparison-matrix tr.comparison-tied th[scope="row"],
.dpf-comparison-table tr.comparison-tied th[scope="row"] {
  /* Tied rows use the same red-dot marker as every other differing row. */
  box-shadow: none;
}

@media (max-width: 640px) {
  .dpf-comparison-full-link {
    display: inline !important;
    font-size: .72rem;
  }
  .dpf-comparison-heading-actions {
    gap: .35rem;
  }
}