/**
 * public/assets/css/style.css
 * FindsBest — public site theme. Layered on top of Bootstrap 5.
 */

:root {
    --fb-primary: #2953e0;
    --fb-primary-dark: #1e3fb0;
    --fb-accent: #ff7a1a;
    --fb-ink: #1a2230;
    --fb-muted: #6b7686;
    --fb-bg: #f4f6fb;
    --fb-border: #e4e8f0;
    --fb-radius: 12px;
}

body {
    background: var(--fb-bg);
    color: var(--fb-ink);
    font-family: "Segoe UI", Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
}

a {
    color: var(--fb-primary);
}
a:hover {
    color: var(--fb-primary-dark);
}

/* ---- Navbar --------------------------------------------------------- */
.navbar.bg-dark {
    background: linear-gradient(90deg, #101828, #172554) !important;
}
.navbar-brand {
    letter-spacing: 0.3px;
}
.navbar .nav-link {
    font-weight: 500;
}
.navbar .nav-link.active,
.navbar .nav-link:hover {
    color: #ffb066 !important;
}
#live-search-results {
    border-radius: 0 0 var(--fb-radius) var(--fb-radius);
    overflow: hidden;
    max-height: 360px;
    overflow-y: auto;
}

/* ---- Mega-menu dropdowns (Brands / Best Phones) -------------------------
   Deliberately left at Bootstrap's default position:relative-on-parent /
   Popper-driven placement (top:100%, left:0 of the trigger) — just made
   wider. Forcing position:static + manual left/transform here previously
   fought Popper's own inline positioning and made the menu land off to
   the side of its trigger instead of underneath it. */
@media (min-width: 992px) {
    .mega-menu {
        width: 580px;
        max-width: 90vw;
        padding: 1rem 1.25rem;
        border-radius: 0 0 var(--fb-radius) var(--fb-radius);
    }
}
.mega-menu .dropdown-item {
    padding: 0.35rem 0.6rem;
    /* Bootstrap's .dropdown-item defaults to white-space:nowrap, which is
       fine for a normal single-column dropdown but lets longer labels
       ("Find My Perfect Phone") overflow past their grid column here
       instead of wrapping onto a second line. */
    white-space: normal;
}
.mega-menu .dropdown-item:hover {
    background-color: #eef1fb;
}
.mega-menu .dropdown-header {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    color: var(--fb-muted);
}

/* ---- Cards / grid ------------------------------------------------------ */
.card {
    border: 1px solid var(--fb-border);
    border-radius: var(--fb-radius);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
a .card.shadow-sm:hover {
    transform: translateY(-3px);
    box-shadow: 0 0.75rem 1.5rem rgba(26, 34, 48, 0.12) !important;
    border-color: #c9d5f5;
}
.card-img-top {
    background: #fff;
}

/* ---- Buttons ------------------------------------------------------------ */
.btn-primary {
    background-color: var(--fb-primary);
    border-color: var(--fb-primary);
}
.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--fb-primary-dark);
    border-color: var(--fb-primary-dark);
}
.btn-outline-primary {
    color: var(--fb-primary);
    border-color: var(--fb-primary);
}
.btn-outline-primary:hover {
    background-color: var(--fb-primary);
    border-color: var(--fb-primary);
}

/* ---- Device spec table (device.php) -------------------------------------- */
.spec-table th.table-secondary {
    background: #eef1fb !important;
    color: var(--fb-primary-dark);
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.5rem 0.75rem;
}
.spec-table td {
    font-size: 0.92rem;
    padding: 0.55rem 0.75rem;
    /* A handful of spec values (e.g. IP rating) store a literal newline for
       a second line of fine print — render it as a real line break instead
       of collapsing it, same as any plain single-line value otherwise. */
    white-space: pre-line;
}
.spec-table td:first-child {
    background: #fafbff;
    font-weight: 500;
}

/* =====================================================================
   DEVICE PAGE v2 — sticky sub-nav, hero gallery, key-spec tiles, spec sheet
   ===================================================================== */

/* Sticky in-page section nav */
.device-subnav {
    position: sticky;
    top: var(--navbar-height, 60px);
    z-index: 1010;
    display: flex; gap: 0.35rem;
    overflow-x: auto;
    padding: 0.5rem 0;
    margin-bottom: 1.25rem;
    background: var(--fb-bg);
    border-bottom: 1px solid var(--fb-border);
    scrollbar-width: none;
}
.device-subnav::-webkit-scrollbar { display: none; }
.device-subnav a {
    flex: 0 0 auto;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    font-size: 0.86rem; font-weight: 600;
    color: var(--fb-muted); text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.device-subnav a:hover { background: rgba(41, 83, 224, 0.08); color: var(--fb-primary); }
.device-subnav a.active { background: var(--fb-primary); color: #fff; }

/* Section scroll offset so anchored jumps clear the sticky header + sub-nav */
#overview, #key-specs, #expert-review, #specifications, #reviews {
    scroll-margin-top: calc(var(--navbar-height, 60px) + 72px);
}

/* Hero gallery */
.device-gallery {
    background: #fff;
    border: 1px solid var(--fb-border);
    border-radius: 16px;
    padding: 1rem;
}
.device-gallery-main {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    min-height: 300px;
}
.device-gallery-main img {
    max-width: 100%; max-height: 340px; object-fit: contain;
}
.device-360-btn {
    position: absolute; bottom: 6px; right: 6px;
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--fb-border); border-radius: 999px;
    background: rgba(255, 255, 255, 0.92); color: var(--fb-primary);
    font-size: 0.78rem; font-weight: 600; cursor: pointer;
    box-shadow: 0 2px 8px rgba(16, 24, 40, 0.12);
    transition: background-color 0.15s ease, color 0.15s ease;
}
.device-360-btn:hover { background: var(--fb-primary); color: #fff; }
.device-thumbs {
    display: flex; flex-wrap: wrap; gap: 0.5rem;
    justify-content: center;
    margin-top: 0.85rem; padding-top: 0.85rem;
    border-top: 1px solid var(--fb-border);
}
.device-thumb {
    width: 54px; height: 54px; padding: 3px;
    border: 1px solid var(--fb-border); border-radius: 10px;
    background: #fff; cursor: pointer;
    transition: border-color 0.15s ease, transform 0.15s ease;
}
.device-thumb:hover { border-color: var(--fb-primary); transform: translateY(-2px); }
.device-thumb img { width: 100%; height: 100%; object-fit: contain; }
.device-thumb.is-active { border-color: var(--fb-primary); box-shadow: 0 0 0 2px rgba(41, 83, 224, 0.18); }

/* Clickable main image ("tap to enlarge") */
.device-gallery-zoom {
    display: flex; align-items: center; justify-content: center;
    width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in;
    position: relative;
}
.device-gallery-zoom img { max-width: 100%; max-height: 340px; object-fit: contain; }
.device-zoom-hint {
    position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%);
    padding: 0.2rem 0.6rem; border-radius: 999px;
    background: rgba(26, 34, 48, 0.72); color: #fff;
    font-size: 0.7rem; white-space: nowrap;
    opacity: 0; transition: opacity 0.15s ease; pointer-events: none;
}
.device-gallery-zoom:hover .device-zoom-hint,
.device-gallery-zoom:focus-visible .device-zoom-hint { opacity: 1; }

/* ---- Image lightbox ---- */
.fb-lightbox-stage {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    min-height: 46vh; padding: 1rem 3rem;
    background: var(--fb-bg);
    touch-action: pan-y; /* let vertical scroll through; we handle horizontal */
}
.fb-lightbox-img {
    max-width: 100%; max-height: 68vh; object-fit: contain;
    /* -webkit- prefix required on iOS Safari, or a swipe starts selecting the
       image instead of paging the gallery. */
    -webkit-user-select: none; user-select: none;
    -webkit-touch-callout: none; /* no long-press "Save Image" sheet mid-swipe */
}
.fb-lightbox-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--fb-border); border-radius: 50%;
    background: rgba(255, 255, 255, 0.92); color: var(--fb-ink);
    font-size: 1.1rem; line-height: 1; cursor: pointer;
    box-shadow: 0 2px 8px rgba(16, 24, 40, 0.14);
    transition: background-color 0.15s ease, color 0.15s ease;
}
.fb-lightbox-nav:hover { background: var(--fb-primary); color: #fff; }
.fb-lightbox-nav.prev { left: 10px; }
.fb-lightbox-nav.next { right: 10px; }
.fb-lightbox-caption {
    position: absolute; left: 0; right: 0; bottom: 6px;
    margin: 0; text-align: center;
    font-size: 0.82rem; color: var(--fb-muted);
    pointer-events: none; /* never swallow a drag-to-pan near the bottom edge */
}
/* Zoom controls (also: wheel, double-click, pinch, +/-/0 keys) */
.fb-lightbox-zoom {
    position: absolute; top: 10px; right: 10px;
    display: inline-flex; align-items: stretch;
    border: 1px solid var(--fb-border); border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 2px 8px rgba(16, 24, 40, 0.14);
    overflow: hidden; z-index: 2;
}
.fb-lightbox-zoom button {
    border: 0; background: none; color: var(--fb-ink);
    padding: 0.3rem 0.6rem; font-size: 0.92rem; line-height: 1.2; cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.fb-lightbox-zoom button:hover:not(:disabled) { background: var(--fb-primary); color: #fff; }
.fb-lightbox-zoom button:disabled { opacity: 0.4; cursor: default; }
.fb-lightbox-zoom #zoom-level { font-size: 0.72rem; font-weight: 600; min-width: 38px; display: inline-block; }
/* Once magnified the image is dragged around inside the frame. */
.fb-lightbox-stage.is-zoomed { overflow: hidden; }
.fb-lightbox-stage.is-zoomed .fb-lightbox-caption { opacity: 0; }
.fb-lightbox-thumbs {
    display: flex; gap: 0.4rem; overflow-x: auto;
    max-width: 100%; padding: 0.15rem; margin: 0;
    scrollbar-width: thin;
}
.fb-lightbox-thumb {
    flex: 0 0 auto;
    width: 52px; height: 52px; padding: 3px;
    border: 1px solid var(--fb-border); border-radius: 8px;
    background: #fff; cursor: pointer;
    transition: border-color 0.15s ease;
}
.fb-lightbox-thumb img { width: 100%; height: 100%; object-fit: contain; }
.fb-lightbox-thumb.is-active { border-color: var(--fb-primary); box-shadow: 0 0 0 2px rgba(41, 83, 224, 0.18); }

@media (max-width: 575.98px) {
    .fb-lightbox-stage { padding: 0.5rem 2.4rem; min-height: 40vh; }
    .fb-lightbox-nav { width: 34px; height: 34px; }
    .fb-lightbox-img { max-height: 56vh; }
}

/* Rating stars + price lead */
.device-stars span { color: #d0d5dd; font-size: 1rem; }
.device-stars span.on { color: #f5a623; }
.device-price-lead {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem;
}
.device-price-value {
    font-size: 1.9rem; font-weight: 800; color: var(--fb-ink);
    font-variant-numeric: tabular-nums; line-height: 1;
}

/* Key-spec "at a glance" tiles */
.key-spec-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}
@media (min-width: 576px) { .key-spec-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 992px) { .key-spec-grid { grid-template-columns: repeat(6, 1fr); } }
.key-spec-tile {
    display: flex; flex-direction: column; gap: 0.4rem;
    padding: 0.9rem;
    background: #fff;
    border: 1px solid var(--fb-border);
    border-radius: 14px;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.key-spec-tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(16, 24, 40, 0.08);
    border-color: rgba(41, 83, 224, 0.4);
}
.key-spec-icon {
    display: inline-grid; place-items: center;
    width: 42px; height: 42px; border-radius: 11px;
    background: rgba(41, 83, 224, 0.1); color: var(--fb-primary);
}
.key-spec-body { display: flex; flex-direction: column; min-width: 0; }
.key-spec-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fb-muted); font-weight: 600; }
.key-spec-value { font-size: 0.92rem; font-weight: 600; color: var(--fb-ink); line-height: 1.25; }

/* Modernized full-specs sheet */
.spec-search { width: min(240px, 55vw); }
.spec-sheet { display: flex; flex-direction: column; gap: 1.1rem; }
.spec-group {
    background: #fff;
    border: 1px solid var(--fb-border);
    border-radius: 14px;
    overflow: hidden;
}
.spec-group-title {
    margin: 0; padding: 0.7rem 1rem;
    font-size: 0.82rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--fb-primary-dark);
    background: #eef1fb;
    border-left: 3px solid var(--fb-primary);
}
.spec-table .spec-key {
    width: 240px; font-weight: 500; color: var(--fb-muted);
    background: #fafbff;
}
.spec-table .spec-val { color: var(--fb-ink); }
.spec-group .spec-table tr:last-child td { border-bottom: 0; }

/* =====================================================================
   PHONE LAYOUT — device sheet + compare table
   On a ~390px screen the two things that cost the most usable width were the
   fixed 240px spec label column and the page gutters either side. Both are
   reclaimed here so values get the room, 91mobiles-style.
   ===================================================================== */
@media (max-width: 767.98px) {
    /* Tighter page gutters. Not zero: body copy shouldn't sit flush against
       the bezel — the tables below break out of these on their own. */
    main.container { padding-left: 0.5rem; padding-right: 0.5rem; }

    /* Edge-to-edge tables. These ARE the content on a phone, so the gutter was
       pure loss; the negative margin cancels the container padding exactly. */
    .spec-sheet .spec-group,
    #compare-scroll {
        margin-left: -0.5rem;
        margin-right: -0.5rem;
        border-radius: 0;
    }

    /* "Minimum of its needs": width:1% on an auto-layout table collapses the
       cell to its content. min-width stops one-word keys ("SIM") from going
       silly-narrow, max-width stops long ones ("Charging Time (20-100%)")
       from taking the row back over. Replaces the flat 240px. */
    .spec-table .spec-key {
        width: 1%;
        min-width: 96px;
        max-width: 38%;
        white-space: normal;
        overflow-wrap: anywhere;
        font-size: 0.78rem;
        padding: 0.5rem 0.5rem;
    }
    .spec-table .spec-val { font-size: 0.85rem; padding: 0.5rem 0.6rem; }
    .spec-table th.table-secondary { padding: 0.45rem 0.6rem; }

    /* Sub-nav: all FIVE tabs (Overview / Key Specs / Expert Review / Full Specs
       / Reviews) have to fit at once — it was scrolling, so "Full Specs" sat
       clipped mid-word off the right edge with no hint there was more. Sized to
       total ~335px against ~374px of usable width, leaving headroom for wider
       system fonts. overflow-x: auto stays as the safety net. */
    .device-subnav { gap: 0.1rem; padding: 0.4rem 0; }
    .device-subnav a { padding: 0.35rem 0.4rem; font-size: 0.7rem; }

}
/* NB: the compare-table mobile overrides deliberately live further down, right
   after the desktop .compare-table min-width rules they have to beat. Media
   queries add no specificity, so placing them here (above those rules) let the
   desktop 140px/150px win and the label column never shrank on a phone. */

/* Dark theme */
:root[data-bs-theme="dark"] .device-subnav { background: var(--fb-bg); border-color: var(--fb-border); }
:root[data-bs-theme="dark"] .device-gallery,
:root[data-bs-theme="dark"] .device-thumb,
:root[data-bs-theme="dark"] .key-spec-tile,
:root[data-bs-theme="dark"] .spec-group { background: #131a29; }
:root[data-bs-theme="dark"] .device-360-btn { background: rgba(19, 26, 41, 0.92); }
:root[data-bs-theme="dark"] .spec-group-title { background: #1a2233; color: #aebbff; }
:root[data-bs-theme="dark"] .spec-table .spec-key { background: #101725; }

/* ---- Compare picker: search-typeahead slot cards --------------------------
   Replaces the old <select> dropdown (unusable once the catalog holds
   hundreds of devices). 91mobiles-style single horizontal row: selected
   phones first, then one trailing "add" slot with a search box, "VS"
   separators between them. Never wraps — it scrolls horizontally on
   narrow screens so it always stays one row. */
.compare-slots-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
    scrollbar-width: thin;
}
.compare-slot {
    flex: 1 0 44%;
    min-width: 150px;
    max-width: 260px;
}
@media (min-width: 768px) {
    .compare-slot {
        flex: 1 1 0;
    }
}
.compare-slot-vs {
    align-self: center;
    flex: 0 0 auto;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--fb-muted);
    letter-spacing: 0.05em;
}
.compare-picker-card {
    position: relative;
    border-radius: var(--fb-radius);
    height: 100%;
    min-height: 148px;
    padding: 0.75rem 0.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.compare-picker-card-filled {
    border: 1px solid var(--fb-border);
    background: #fff;
}
.compare-picker-card-filled img {
    max-height: 64px;
    max-width: 100%;
    object-fit: contain;
    margin-bottom: 0.35rem;
}
.compare-picker-brand {
    font-size: 0.72rem;
    color: var(--fb-muted);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.compare-picker-name {
    font-size: 0.85rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.25;
}
.compare-picker-price {
    font-size: 0.8rem;
    color: var(--fb-primary);
    font-weight: 600;
    margin: 0.15rem 0 0;
}
.compare-picker-remove {
    position: absolute;
    top: 6px;
    right: 8px;
    color: var(--fb-muted);
    text-decoration: none;
    font-size: 1.1rem;
    line-height: 1;
}
.compare-picker-remove:hover {
    color: #dc3545;
}
.compare-picker-card-empty {
    border: 2px dashed var(--fb-border);
    background: #fbfcff;
    justify-content: center;
}
.compare-picker-card-empty:focus-within {
    border-color: var(--fb-primary);
}
.compare-picker-plus {
    font-size: 1.4rem;
    color: var(--fb-muted);
    line-height: 1;
    margin-bottom: 0.35rem;
}
.compare-search-input {
    max-width: 100%;
    text-align: center;
}
.compare-search-results {
    /* position/top/left/width are set in compare.js (position:fixed) so the
       panel escapes the slots row's overflow-x:auto clipping. */
    z-index: 1050;
    max-height: 260px;
    overflow-y: auto;
    border-radius: var(--fb-radius);
    text-align: left;
    background: #fff;
}

/* ---- Compare picker: "Suggested Mobiles" strip (second row) ----------------
   Horizontal, scrollable strip of one-tap "+ Add to compare" cards directly
   under the picker — with a phone fixed it lists similar phones, otherwise
   the most popular ones, mirroring 91mobiles' compare page. */
.compare-suggested-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--fb-ink);
    margin: 0 0 0.5rem;
}
.compare-suggested-scroll {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.35rem;
    scrollbar-width: thin;
}
.compare-suggested-card {
    flex: 0 0 auto;
    width: 118px;
    border: 1px solid var(--fb-border);
    border-radius: var(--fb-radius);
    background: #fff;
    padding: 0.5rem 0.4rem;
    text-align: center;
    text-decoration: none;
    color: var(--fb-ink);
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.compare-suggested-card:hover {
    border-color: var(--fb-primary);
    box-shadow: 0 0.4rem 0.9rem rgba(26, 34, 48, 0.1);
    color: var(--fb-ink);
}
.compare-suggested-card img {
    height: 56px;
    max-width: 100%;
    object-fit: contain;
    margin-bottom: 0.35rem;
}
.compare-suggested-name {
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
    min-height: 2.4em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.compare-suggested-add {
    margin-top: 0.4rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--fb-primary);
    white-space: nowrap;
}

/* ---- Compare Quick Specs: per-store "buy" click-through links -------------- */
.compare-buy-links {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-top: 0.45rem;
}
.compare-buy-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--fb-border);
    border-radius: 8px;
    background: #fff;
    text-decoration: none;
    color: var(--fb-ink);
    font-size: 0.78rem;
    line-height: 1.1;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.compare-buy-link:hover {
    border-color: var(--fb-primary);
    background: #f3f6ff;
    box-shadow: 0 0.2rem 0.5rem rgba(41, 83, 224, 0.12);
    color: var(--fb-ink);
}
.compare-buy-store {
    font-weight: 600;
}
.compare-buy-price {
    color: var(--fb-primary);
    font-weight: 700;
    white-space: nowrap;
}

/* ---- Compare table -------------------------------------------------------- */
.compare-table th.table-secondary {
    background: #eef1fb !important;
    color: var(--fb-primary-dark);
    text-transform: uppercase;
    font-size: 0.78rem;
    letter-spacing: 0.05em;
}

/* Frozen header + first column for the Full Specifications table.
 *
 * HISTORY — two earlier attempts at this failed and were reverted, both for
 * the same root cause: .table-responsive sets overflow-x:auto, and per the CSS
 * overflow spec that forces overflow-y to a non-visible value too, which makes
 * the wrapper the containing block for sticky descendants. Because that wrapper
 * only ever grew to fit the table (no height limit) it never scrolled
 * vertically, so `sticky` either never engaged or — with a navbar-height
 * offset — pushed the header down over the first rows.
 *
 * The missing piece was never `sticky` itself but the height constraint: give
 * the wrapper a max-height and it becomes a genuine scroll container, so
 * `top: 0` pins the header to the top of that container exactly like a
 * spreadsheet freeze-pane. The offset is 0 (not navbar-height) precisely
 * because the container, not the viewport, is the reference — which is what the
 * previous attempt got wrong. Horizontal alignment then comes for free: the
 * header scrolls sideways with its own columns.
 */
/* Frozen device names + prices for the Full Specifications table.
 *
 * WHY A JS-DRIVEN FIXED CLONE AND NOT `position: sticky`:
 * .table-responsive must keep overflow-x:auto so wide comparisons scroll
 * sideways, and per the CSS overflow spec that forces overflow-y to a
 * non-visible value too — which makes the wrapper the containing block for any
 * sticky descendant. A sticky thead therefore pins to that wrapper, not the
 * viewport, so it scrolls away with the page (and an earlier attempt at a
 * navbar-height offset pushed it down over the first rows instead). Giving the
 * wrapper a max-height does fix sticky, but only by turning the table into its
 * own scroll box — which is exactly the inner scrollbar we don't want here.
 *
 * A fixed-position clone sidesteps the containing-block rule entirely because
 * it isn't inside the scrolling wrapper. compare.js mirrors the real header's
 * column widths and keeps it in horizontal sync with the table. This is the
 * same technique the section-name bar already used.
 */
.compare-table thead th {
    background: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.06);
}

.compare-floating-head {
    position: fixed;
    top: var(--navbar-height, 0px);
    z-index: 1019;
    overflow: hidden;          /* clips the mirrored table; JS scrolls it */
    background: #fff;
    border-bottom: 1px solid var(--fb-border);
    box-shadow: 0 4px 10px rgba(16, 24, 40, 0.10);
    pointer-events: none;      /* never blocks clicks on the real table */
}
.compare-floating-head table {
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
}
.compare-floating-head td {
    padding: 0.35rem 0.5rem;
    font-size: 0.8rem;
    line-height: 1.25;
    text-align: center;
    vertical-align: middle;
    border: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.compare-floating-head .cfh-name { font-weight: 600; color: var(--fb-ink); }
.compare-floating-head .cfh-price { color: var(--fb-primary); font-weight: 600; }
/* The bar is pointer-events:none so it never blocks the table beneath it — the
   buy link is the one thing that must stay clickable, so it opts back in. */
.compare-floating-head .cfh-buy {
    display: inline-block;
    margin-top: 0.1rem;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background: rgba(255, 138, 0, 0.14);
    color: #d97706;
    font-size: 0.68rem;
    font-weight: 700;
    text-decoration: none;
    pointer-events: auto;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.compare-floating-head .cfh-buy:hover { background: #d97706; color: #fff; }
:root[data-bs-theme="dark"] .compare-floating-head .cfh-buy { color: #fbbf24; background: rgba(251, 191, 36, 0.16); }
/* First cell doubles as the current section label ("Network", "Display", …),
   which is why the old standalone floating group bar is no longer needed. */
.compare-floating-head .cfh-group {
    text-align: left;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: var(--fb-primary-dark);
    background: #eef1fb;
}
:root[data-bs-theme="dark"] .compare-floating-head { background: #131a29; }
:root[data-bs-theme="dark"] .compare-floating-head .cfh-group { background: #1b2436; }

/* Phones: the bar inherits nowrap + ellipsis from the rule above, which at a
   ~150px column turns "Samsung Galaxy S26 Ultra" into "Samsung Ga…" — the one
   piece of information the bar exists to show. Give the name two clamped lines
   and tighten everything else so the bar stays shallow. */
@media (max-width: 767.98px) {
    .compare-floating-head td { padding: 0.3rem 0.35rem; font-size: 0.72rem; }
    .compare-floating-head .cfh-name {
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .compare-floating-head .cfh-price { font-size: 0.7rem; }
    .compare-floating-head .cfh-group {
        font-size: 0.6rem;
        letter-spacing: 0.02em;
        padding-right: 0.2rem;
    }
}

/* ---- Variant / affiliate widget ------------------------------------------- */
#variant-widget {
    background: #fbfcff;
}
#affiliate-links-container a {
    border-color: var(--fb-border) !important;
    transition: border-color 0.15s ease, background 0.15s ease;
}
#affiliate-links-container a:hover {
    border-color: var(--fb-primary) !important;
    background: #f3f6ff;
}

/* ---- Ratings / reviews ------------------------------------------------- */
.text-warning {
    color: #f5a623 !important;
}

/* ---- Breadcrumb ------------------------------------------------------- */
.breadcrumb {
    background: transparent;
    padding: 0;
    font-size: 0.85rem;
}

/* ---- Footer ------------------------------------------------------------ */
footer.bg-dark {
    background: #101828 !important;
}

/* ---- Pagination ---------------------------------------------------------- */
.pagination .page-link {
    color: var(--fb-primary);
}
.pagination .page-item.active .page-link {
    background-color: var(--fb-primary);
    border-color: var(--fb-primary);
}

/* ---- Phone finder sidebar ----------------------------------------------- */
#finder-loading {
    font-weight: 500;
}

/* ---- Misc utility -------------------------------------------------------- */
.badge.bg-success { background-color: #1aa053 !important; }
.badge.bg-secondary { background-color: #6b7686 !important; }

/* ---- Advertisements ------------------------------------------------------ */
/* A region can hold two ad units (e.g. the two header/footer/sidebar
   positions). They sit side by side when there's room and stack when the
   column is narrow (mobile, or the device sidebar). */
.ad-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 1rem;
}
.ad-row > .ad-container {
    margin: 0;
    flex: 0 1 auto;
}
/* Responsive wrapper shared by both AdSense units and custom house banners.
   Centered, never wider than its column, with a small "Advertisement" label
   for policy compliance and reader clarity. */
.ad-container {
    display: block;
    margin: 0 auto;
    padding: 0.25rem 0;
    text-align: center;
    max-width: 100%;
    overflow: hidden;
}
.ad-container::before {
    content: "Advertisement";
    display: block;
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fb-muted);
    margin-bottom: 0.35rem;
}
/* Custom banner images scale down on small screens, never overflow. */
.ad-container.ad-custom img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: var(--fb-radius);
}
/* AdSense responsive <ins> fills the available width; Google sizes it. */
.ad-container .adsbygoogle {
    display: block;
    width: 100%;
}
/* Leaderboard-style placements cap their height on desktop so a tall banner
   doesn't dominate; the sidebar rectangle stays a comfortable 300px. */
.ad-container.ad-header,
.ad-container.ad-footer {
    max-width: 970px;
}
.ad-container.ad-sidebar {
    max-width: 336px;
}
.ad-container.ad-in_content {
    max-width: 728px;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

/* ---- Brand directory (brands.php) --------------------------------------- */
.brand-hero {
    background: linear-gradient(120deg, var(--fb-primary), var(--fb-primary-dark) 55%, #101828);
    color: #fff;
    border-radius: var(--fb-radius);
    padding: 1.1rem 1.5rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 8px 22px rgba(16, 24, 40, 0.15);
}
.brand-hero h1 { font-weight: 700; letter-spacing: -0.3px; font-size: 1.5rem; margin-bottom: 0.2rem; }
.brand-hero-logo {
    display: inline-flex; align-items: center; justify-content: center;
    background: #fff; border-radius: 10px;
    width: 52px; height: 52px; padding: 6px; flex: 0 0 auto;
    box-shadow: 0 4px 12px rgba(16, 24, 40, 0.18);
}
.brand-hero-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.brand-hero .lead-sub { color: rgba(255, 255, 255, 0.85); font-size: 0.85rem; margin-bottom: 0.55rem; }
.brand-hero .stat-pill {
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 999px;
    padding: 0.22rem 0.75rem;
    font-size: 0.76rem;
    font-weight: 500;
}
.brand-hero .stat-pill strong { font-weight: 700; }
.brand-search { position: relative; max-width: 380px; }
.brand-search .form-control {
    border: none;
    border-radius: 999px;
    padding: 0.42rem 0.9rem 0.42rem 2.4rem;
    font-size: 0.88rem;
    box-shadow: 0 4px 14px rgba(16, 24, 40, 0.12);
}
.brand-search .search-ic {
    position: absolute; left: 0.95rem; top: 50%; transform: translateY(-50%);
    font-size: 0.85rem;
    opacity: 0.55; pointer-events: none;
}

/* Toolbar: A-Z + sort */
.brand-toolbar { gap: 0.75rem; }
.brand-other-details {
    background: #fff;
    border: 1px solid var(--fb-border);
    border-radius: var(--fb-radius);
    padding: 1rem 1.15rem;
}
.brand-other-details p { color: var(--fb-muted); font-size: 0.92rem; }
:root[data-bs-theme="dark"] .brand-other-details { background: rgba(19, 26, 41, 0.92); }
.brand-az { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.brand-az button {
    border: 1px solid var(--fb-border);
    background: #fff;
    color: var(--fb-ink);
    min-width: 33px; height: 33px;
    padding: 0 0.3rem;
    border-radius: 8px;
    font-size: 0.78rem; font-weight: 600; line-height: 1;
    transition: all 0.15s ease;
}
.brand-az button:hover:not(:disabled) { border-color: var(--fb-primary); color: var(--fb-primary); }
.brand-az button.active { background: var(--fb-primary); color: #fff; border-color: var(--fb-primary); }
.brand-az button:disabled { opacity: 0.3; cursor: default; }
.brand-sort .btn.active { background: var(--fb-primary); color: #fff; border-color: var(--fb-primary); }

/* Cards — kept slim so all 6 brands sit comfortably in one row on desktop */
.brand-card {
    border: 1px solid var(--fb-border);
    border-radius: var(--fb-radius);
    background: #fff;
    overflow: hidden;
    height: 100%;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.brand-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 22px rgba(16, 24, 40, 0.14);
    border-color: var(--fb-primary);
}
.brand-logo-wrap {
    position: relative;
    height: 76px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(180deg, #fbfcff, #eef2fb);
    border-bottom: 1px solid var(--fb-border);
    padding: 0.6rem;
}
.brand-logo-wrap img {
    max-height: 44px; max-width: 82%;
    object-fit: contain;
    transition: transform 0.2s ease;
}
.brand-card:hover .brand-logo-wrap img { transform: scale(1.07); }
.brand-top-badge {
    position: absolute; top: 6px; right: 6px;
    background: var(--fb-accent); color: #fff;
    font-size: 0.6rem; font-weight: 700;
    padding: 0.15rem 0.4rem; border-radius: 999px;
    box-shadow: 0 2px 6px rgba(255, 122, 26, 0.4);
    white-space: nowrap;
}
.brand-monogram {
    width: 46px; height: 46px; border-radius: 13px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem; font-weight: 700; color: #fff;
    box-shadow: 0 4px 10px rgba(16, 24, 40, 0.18);
}
.brand-card-body { padding: 0.55rem 0.6rem 0.7rem; text-align: center; }
.brand-card-body .brand-name { font-weight: 700; font-size: 0.88rem; margin-bottom: 0.25rem; }
.brand-count-pill {
    display: inline-block; font-size: 0.68rem; font-weight: 600;
    color: var(--fb-primary);
    background: rgba(41, 83, 224, 0.09);
    border-radius: 999px; padding: 0.12rem 0.55rem;
}
.brand-cta {
    display: block; margin-top: 0.35rem;
    color: var(--fb-primary); font-size: 0.72rem; font-weight: 600;
    opacity: 0; transform: translateY(4px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.brand-card:hover .brand-cta { opacity: 1; transform: translateY(0); }
@media (max-width: 575px) {
    .brand-logo-wrap { height: 68px; }
    .brand-logo-wrap img { max-height: 38px; }
    .brand-monogram { width: 40px; height: 40px; font-size: 1.05rem; }
    .brand-cta { opacity: 1; transform: none; }
}

/* =====================================================================
   HEADER v2 — two-row header, theme toggle, mobile drawer + search
   ===================================================================== */
.fb-header { z-index: 1030; }

/* Icon buttons (hamburger, search, theme) — min 44px, bump to 48px on
   touch layouts to satisfy Search Console's tap-target spacing check. */
.fb-icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; min-height: 44px; padding: 0.25rem 0.5rem;
    background: transparent; border: 0; color: #fff;
    font-size: 1.15rem; line-height: 1; border-radius: 8px;
}
.fb-icon-btn:hover, .fb-icon-btn:focus-visible { background: rgba(255, 255, 255, 0.14); color: #fff; }

/* Language selector menu — scrollable list of 20 languages */
.fb-lang-menu { max-height: 360px; overflow-y: auto; min-width: 190px; }
.fb-lang-menu .dropdown-item.active { background: var(--fb-primary); color: #fff; }
.fb-lang-menu .dropdown-item.active small { color: rgba(255, 255, 255, 0.75) !important; }

/* Hidden Google Translate mount + neutralize its injected chrome so only our
   own selector is ever visible (no top banner, no body shift, no tooltip). */
#google_translate_element { display: none; }
.goog-te-banner-frame, .skiptranslate { display: none !important; }
body { top: 0 !important; }
.goog-te-gadget { font-size: 0 !important; }
font[style] { background: none !important; box-shadow: none !important; }

/* Desktop centered smart-search */
.fb-search { position: relative; flex: 0 1 460px; max-width: 460px; min-width: 0; }
.fb-search .form-control { border: none; }

/* ---- Inline per-section expert score (Full Specifications) ----------------
   A rating bar at the head of each spec section, so the camera verdict is on
   screen while you read the camera specs — the standalone Expert Review block
   is metres up the page by then. Segmented rather than a smooth bar: discrete
   blocks read as a score out of 5, a continuous fill reads as a percentage. */
.compare-rating-row td { padding: 0.4rem 0.5rem; vertical-align: middle; }
.compare-rating { display: flex; align-items: center; gap: 0.4rem; }
.compare-rating-track {
    position: relative;
    flex: 1 1 auto;
    height: 7px;
    min-width: 44px;
    border-radius: 4px;
    background: var(--fb-border);
    overflow: hidden;
    /* Five notches cut out of the fill, giving the segmented look. */
    -webkit-mask-image: repeating-linear-gradient(to right, #000 0 calc(20% - 3px), transparent calc(20% - 3px) 20%);
    mask-image: repeating-linear-gradient(to right, #000 0 calc(20% - 3px), transparent calc(20% - 3px) 20%);
}
.compare-rating-fill {
    display: block;
    height: 100%;
    background: #8bc34a;
    border-radius: 4px;
}
/* The leader in the section gets the darker green, matching how the winner is
   already highlighted in Quick Specs. */
.compare-rating.is-best .compare-rating-fill { background: #33691e; }
.compare-rating-num { font-size: 0.72rem; font-weight: 600; color: var(--fb-muted); flex: 0 0 auto; }
.compare-rating.is-best .compare-rating-num { color: #33691e; }
:root[data-bs-theme="dark"] .compare-rating-track { background: #2a3550; }
:root[data-bs-theme="dark"] .compare-rating.is-best .compare-rating-fill { background: #9ccc65; }
:root[data-bs-theme="dark"] .compare-rating.is-best .compare-rating-num { color: #9ccc65; }

/* Row 2 mega-menu bar */
.fb-menubar { background: #0b1120; }
/* Breathing room between items. Bootstrap's own .navbar-nav .nav-link padding
   is 0.5rem, which ran "Phone Finder Compare Best Phones Rumors News Videos"
   together into one unreadable string — the gap plus the wider padding gives
   each item a clear boundary without wrapping the row. */
.fb-menubar .navbar-nav { gap: 0.25rem; }
.fb-menubar .navbar-nav .nav-link {
    font-weight: 500;
    padding: 0.55rem 0.85rem;
    border-radius: 6px;
}
.fb-menubar .navbar-nav .nav-link:hover,
.fb-menubar .navbar-nav .nav-link:focus {
    color: #ffb066;
    background: rgba(255, 255, 255, 0.06);
}
@media (max-width: 991.98px) {
    /* On mobile the row-2 bar hosts only the off-canvas drawer (position:fixed),
       so the bar itself must not take any vertical space. */
    .fb-menubar { min-height: 0; }
}

/* Theme toggle icon swap — moon shows in light mode (tap to go dark),
   sun shows in dark mode (tap to go light). */
.fb-theme-dark { display: none; }
.fb-theme-light { display: inline; }
:root[data-bs-theme="dark"] .fb-theme-dark { display: inline; }
:root[data-bs-theme="dark"] .fb-theme-light { display: none; }

/* Current section, so the nav answers "where am I?" — previously nothing in
   the header changed between pages. */
.fb-menubar .navbar-nav .nav-link.active {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    box-shadow: inset 0 -2px 0 var(--fb-primary);
}

@media (max-width: 991.98px) {
    .fb-icon-btn { min-width: 48px; min-height: 48px; }
}

/* =====================================================================
   MOBILE NAV DRAWER
   Its own component rather than the desktop menu squeezed into an
   offcanvas: inline collapses instead of floating dropdowns, 48px rows,
   and the settings docked at the bottom within thumb reach.
   ===================================================================== */
.fb-drawer {
    width: min(86vw, 340px);
    background: #0b1120;
    color: #e8ecf6;
    display: flex;
    flex-direction: column;
}
.fb-drawer-head {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0.75rem 1rem;
}
.fb-drawer-head .navbar-brand { color: #fff; font-size: 1rem; }
.fb-drawer .offcanvas-body { overflow-y: auto; }

/* Rows: full-width targets, never below the 48px touch minimum. */
.fb-drawer-link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-height: 48px;
    padding: 0.5rem 1rem;
    color: #d7ddec;
    text-decoration: none;
    font-size: 0.94rem;
    font-weight: 500;
    border-left: 3px solid transparent;
}
.fb-drawer-link:hover,
.fb-drawer-link:focus-visible { background: rgba(255, 255, 255, 0.07); color: #fff; }
.fb-drawer-link.active {
    color: #fff;
    background: rgba(41, 83, 224, 0.22);
    border-left-color: var(--fb-primary);
    font-weight: 600;
}
.fb-drawer-ico { width: 1.35rem; text-align: center; flex: 0 0 auto; }

.fb-drawer-sections { border-top: 1px solid rgba(255, 255, 255, 0.1); margin-top: 0.5rem; }
.fb-drawer-section { border-bottom: 1px solid rgba(255, 255, 255, 0.07); }

.fb-drawer-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-height: 50px;
    padding: 0.5rem 1rem;
    background: transparent;
    border: 0;
    color: #d7ddec;
    font-size: 0.94rem;
    font-weight: 600;
    text-align: left;
}
.fb-drawer-toggle:hover, .fb-drawer-toggle:focus-visible { background: rgba(255, 255, 255, 0.07); color: #fff; }
/* Chevron points down when open, right when closed — Bootstrap adds
   .collapsed to the trigger while the panel is shut. */
.fb-drawer-chev { transition: transform 0.2s ease; font-size: 0.8rem; }
.fb-drawer-toggle.collapsed .fb-drawer-chev { transform: rotate(-90deg); }

.fb-drawer-subhead {
    margin: 0.6rem 0 0.3rem;
    padding: 0 1rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8f9ab5;
}
/* Chips: brands and budgets are short labels, so a wrapping grid fits far
   more per screen than one full-width row each. */
.fb-drawer-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.5rem 1rem 0.75rem;
}
.fb-drawer-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.45rem 0.7rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: #d7ddec;
    font-size: 0.82rem;
    text-decoration: none;
    white-space: nowrap;
}
.fb-drawer-chip:hover, .fb-drawer-chip:focus-visible { background: var(--fb-primary); color: #fff; }
.fb-drawer-chip small { opacity: 0.6; font-size: 0.72rem; }
.fb-drawer-more {
    display: block;
    padding: 0 1rem 0.85rem;
    color: #9fb4ff;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
}

.fb-drawer-foot {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    background: #070d18;
}
.fb-drawer-foot-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 44px;
    padding: 0.4rem 0.7rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: transparent;
    color: #d7ddec;
}
.fb-drawer-foot-btn:hover, .fb-drawer-foot-btn:focus-visible { background: rgba(255, 255, 255, 0.1); color: #fff; }

/* =====================================================================
   DARK THEME — redefines the custom --fb-* tokens and repaints the
   hardcoded-light custom surfaces. Bootstrap's own components adapt to
   data-bs-theme="dark" on <html> automatically.
   ===================================================================== */
:root[data-bs-theme="dark"] {
    --fb-primary: #5b81ff;
    --fb-primary-dark: #3f63e6;
    --fb-accent: #ff8f3f;
    --fb-ink: #e7eaf3;
    --fb-muted: #9aa4b8;
    --fb-bg: #0f1420;
    --fb-border: #27314c;
}
:root[data-bs-theme="dark"] .card-img-top { background: #161d2e; }
:root[data-bs-theme="dark"] #variant-widget { background: #131a29; }
/* The spec/compare group-header rows use Bootstrap's .table-secondary on the
   <tr>, whose fixed CSS variables don't follow data-bs-theme — repoint them. */
:root[data-bs-theme="dark"] .spec-table .table-secondary,
:root[data-bs-theme="dark"] .compare-table .table-secondary {
    --bs-table-bg: #1a2233;
    --bs-table-color: #aebbff;
    color: #aebbff;
}
:root[data-bs-theme="dark"] .spec-table th.table-secondary { background: #1a2233; color: #aebbff; }
:root[data-bs-theme="dark"] .spec-table td:first-child { background: #131a29; }
:root[data-bs-theme="dark"] .compare-table thead th { background: #131a29; }
:root[data-bs-theme="dark"] .mega-menu .dropdown-item:hover { background: rgba(255, 255, 255, 0.08); }
/* Brand directory surfaces */
:root[data-bs-theme="dark"] .brand-card { background: #151c2c; }
:root[data-bs-theme="dark"] .brand-logo-wrap { background: linear-gradient(180deg, #1a2334, #10182a); border-bottom-color: var(--fb-border); }
:root[data-bs-theme="dark"] .brand-count-pill { color: #aebbff; background: rgba(91, 129, 255, 0.16); }
:root[data-bs-theme="dark"] .brand-az button { background: #131a29; color: var(--fb-ink); border-color: var(--fb-border); }
:root[data-bs-theme="dark"] .brand-search .form-control { background: #131a29; color: var(--fb-ink); }

/* =====================================================================
   FOOTER v2 — link map + zero-JS accordions
   ===================================================================== */
.fb-footer { background: #0b111e; color: #cbd2e0; }
.fb-foot-link, .fb-social-link {
    color: #aab3c5; text-decoration: none;
}
.fb-foot-link:hover, .fb-foot-link:focus { color: #fff; text-decoration: underline; }
.fb-social-link {
    border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 6px;
    padding: 0.3rem 0.6rem; color: #cbd2e0;
}
.fb-social-link:hover, .fb-social-link:focus { border-color: var(--fb-primary); color: #fff; }

/* Accordion behaviour (mobile) */
.fb-foot-col > summary {
    list-style: none; cursor: pointer; -webkit-user-select: none; user-select: none;
    display: flex; align-items: center; justify-content: space-between;
    margin: 0; padding: 0.6rem 0; min-height: 48px;
}
.fb-foot-col > summary::-webkit-details-marker { display: none; }
.fb-foot-col > summary::after {
    content: "\002B"; font-size: 1.15rem; line-height: 1; color: #8a93a6;
}
.fb-foot-col[open] > summary::after { content: "\2212"; }
.fb-footer .fb-foot-link { display: inline-block; padding: 0.15rem 0; }

@media (max-width: 991.98px) {
    .fb-foot-col { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
    .fb-footer .fb-foot-link { min-height: 40px; }
}
/* Desktop: columns are always open, summary is a static heading */
@media (min-width: 992px) {
    .fb-foot-col > summary { cursor: default; pointer-events: none; padding: 0 0 0.25rem; min-height: 0; }
    .fb-foot-col > summary::after { display: none; }
    .fb-foot-col > ul { display: block !important; }
}

/* =====================================================================
   COMPARE v2 — verdict cards, sticky spec-label column, 360 viewer
   ===================================================================== */

/* Verdict "category winners" cards */
.verdict-card {
    display: flex; flex-direction: column; align-items: center; gap: 0.15rem;
    height: 100%; padding: 0.7rem 0.4rem; text-align: center;
    border: 1px solid var(--fb-border); border-radius: var(--fb-radius);
    background: #fff; color: var(--fb-ink);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.verdict-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgba(16, 24, 40, 0.12);
    border-color: var(--fb-primary);
}
.verdict-label { font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--fb-primary); }
.verdict-card img { height: 54px; object-fit: contain; margin: 0.15rem 0; }
.verdict-name { font-size: 0.75rem; font-weight: 600; line-height: 1.15; color: var(--fb-ink); }
.verdict-note { font-size: 0.66rem; color: var(--fb-muted); }
:root[data-bs-theme="dark"] .verdict-card { background: #151c2c; }

/* Sticky spec-label column so it stays visible while scrolling 4-6 phones
   horizontally. (Left-axis sticky inside .table-responsive's overflow-x is
   safe — unlike the vertical thead sticky, which the overflow container
   broke earlier.) table-layout:fixed makes every device column the same
   width (the label/spacer column keeps its own inline width; the rest
   split the remainder evenly) so Quick Specs, Expert Review and Full
   Specifications all line up under the same per-phone column widths.
   Desktop-only (>=768px): on mobile there isn't enough room to split
   evenly without squishing every column unreadably thin, so phones keep
   the original auto-layout + horizontal-scroll behaviour instead. */
@media (min-width: 768px) {
    .compare-sticky-col {
        table-layout: fixed;
    }
}
.compare-sticky-col tbody td:first-child,
.compare-sticky-col thead th:first-child {
    position: sticky; left: 0; z-index: 2;
    background: #fff;
}
.compare-sticky-col thead th:first-child { z-index: 3; }
.compare-table.compare-sticky-col tbody td:first-child { background: #fafbff; }
:root[data-bs-theme="dark"] .compare-table.compare-sticky-col tbody td:first-child,
:root[data-bs-theme="dark"] .compare-table.compare-sticky-col thead th:first-child { background: #131a29; }

/* Quick Specs — a little extra breathing room between rows/columns than
   Bootstrap's default table padding, since values sit alone in each cell
   with no wrapping label text to visually separate them. */
.quick-specs-table td, .quick-specs-table th { padding: 0.85rem 1rem; }

/* Expert Review scorecards sit inside the matched-width table column;
   shrink text/padding a touch on narrower per-phone columns (4-6 up). */
#expert-review .card-body { padding: 0.85rem; font-size: 0.85rem; }
#expert-review .display-6 { font-size: 1.4rem; }
/* Give each phone column a comfortable minimum width for 4-6 way compares. */
.compare-table td, .compare-table th { min-width: 150px; }
.compare-table td:first-child, .compare-table th:first-child { min-width: 140px; }
/* Same multi-line spec-value handling as .spec-table (device.php) — a
   handful of values (e.g. IP rating) store a literal newline for a second
   line of fine print. */
.compare-table td { white-space: pre-line; }

/* Phones: shrink the spec-label column to its content, same treatment as
   .spec-key on the device page. Placed AFTER the two rules above on purpose —
   they are equally specific, so only source order can override them.
   width:1% collapses an auto-layout column to its content; the floor stops
   one-word labels going to nothing, the ceiling stops "Charging Time
   (20-100%)" from reclaiming the row. */
@media (max-width: 767.98px) {
    .compare-table td:first-child,
    .compare-table th:first-child {
        width: 1%;
        min-width: 76px;
        max-width: 34%;
        font-size: 0.74rem;
        padding: 0.5rem 0.4rem;
        white-space: normal;
        overflow-wrap: anywhere;
    }
    .compare-table td, .compare-table th {
        min-width: 104px;
        font-size: 0.8rem;
        padding: 0.5rem 0.4rem;
    }
    /* table-layout must stay auto for width:1% to shrink-to-fit; it is only
       set to fixed at >=768px, but be explicit so a future change can't
       silently re-break this. */
    .compare-table.compare-sticky-col { table-layout: auto; }
}

/* On mobile the empty spacer column (there to align Expert Review under
   Quick Specs on desktop) has no label content of its own, so it just
   steals width from the actual scorecards — drop it and let every phone
   column use the full space, scrolling horizontally past 2-up if needed. */
@media (max-width: 767.98px) {
    #expert-review td:first-child { display: none; }
    #expert-review td:not(:first-child) { min-width: 170px; }
}

/* (The standalone floating group indicator was retired — .compare-floating-head
   above now carries the current section name in its first cell, alongside the
   frozen device names and prices, so one bar does both jobs.) */

/* 360° trigger badge on device photos */
.spin360-trigger {
    position: relative; border: 0; background: transparent; padding: 0;
    cursor: pointer; display: inline-block; line-height: 0;
}
.spin360-badge {
    position: absolute; bottom: 2px; right: 2px;
    font-size: 0.58rem; font-weight: 700; line-height: 1;
    background: var(--fb-primary); color: #fff; border-radius: 20px;
    padding: 0.14rem 0.4rem; opacity: 0.88; pointer-events: none;
}
.spin360-trigger:hover .spin360-badge { opacity: 1; }
.spin360-trigger:focus-visible { outline: 2px solid var(--fb-primary); outline-offset: 2px; border-radius: 6px; }

/* 360° viewer — a frame-sequence spinner (GSMArena / 91mobiles style). The
   viewer swaps through pre-rendered still frames (one per rotation step) as
   you drag, so every angle is a real image of the phone. */
.spin360-stage {
    position: relative;
    min-height: 360px;
    display: flex; align-items: center; justify-content: center;
    padding: 1rem 0.5rem 1.5rem;
    touch-action: none; cursor: grab;
    -webkit-user-select: none; user-select: none;
    overflow: hidden;
}
.spin360-stage.dragging { cursor: grabbing; }
.spin360-frame {
    max-width: 100%;
    max-height: 380px;
    object-fit: contain;
    pointer-events: none;         /* let the stage own the drag gesture */
    -webkit-user-drag: none;
    -webkit-user-select: none;
    user-select: none;
    filter: drop-shadow(0 14px 26px rgba(16, 24, 40, 0.18));
}
.spin360-loading {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--fb-muted); font-size: 0.9rem;
}
/* Thin rotation-progress track under the phone */
.spin360-progress {
    position: absolute; left: 12%; right: 12%; bottom: 0.6rem;
    height: 4px; border-radius: 4px;
    background: var(--fb-border);
}
.spin360-progress-bar {
    height: 100%; width: 0; border-radius: 4px;
    background: var(--fb-primary);
    transition: width 0.05s linear;
}
:root[data-bs-theme="dark"] .spin360-frame { filter: drop-shadow(0 14px 26px rgba(0, 0, 0, 0.5)); }

/* =====================================================================
   TECH BLOG — listing cards + featured lead
   ===================================================================== */
.blog-lead { border: 1px solid var(--fb-border); border-radius: 14px; overflow: hidden; background: #fff; }
.blog-lead-link { display: grid; grid-template-columns: 1fr; text-decoration: none; color: inherit; }
@media (min-width: 768px) { .blog-lead-link { grid-template-columns: 1.15fr 1fr; } }
.blog-lead-img { width: 100%; height: 100%; min-height: 220px; object-fit: cover; display: block; }
.blog-lead-body { padding: 1.25rem 1.4rem; display: flex; flex-direction: column; justify-content: center; }
.blog-badge {
    align-self: flex-start; margin-bottom: 0.5rem; padding: 0.2rem 0.6rem;
    border-radius: 999px; background: var(--fb-primary); color: #fff;
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.blog-lead-title { font-size: 1.35rem; font-weight: 700; line-height: 1.25; margin-bottom: 0.5rem; color: var(--fb-ink); }
.blog-lead-excerpt { color: var(--fb-muted); margin-bottom: 0.75rem; }
.blog-lead-link:hover .blog-lead-title { color: var(--fb-primary); }

.blog-card { border: 1px solid var(--fb-border); border-radius: 12px; overflow: hidden; background: #fff; transition: box-shadow 0.15s ease, transform 0.15s ease; }
.blog-card:hover { box-shadow: 0 10px 24px rgba(16, 24, 40, 0.10); transform: translateY(-2px); }
.blog-card-link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }
.blog-card-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.blog-card-body { padding: 0.9rem 1rem 1rem; display: flex; flex-direction: column; flex: 1 1 auto; }
/* Clamp so a long headline can't make one card taller than its row-mates. */
.blog-card-title {
    font-size: 1rem; font-weight: 650; line-height: 1.3; margin-bottom: 0.4rem; color: var(--fb-ink);
    display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.blog-card-link:hover .blog-card-title { color: var(--fb-primary); }
.blog-card-excerpt {
    font-size: 0.87rem; color: var(--fb-muted); margin-bottom: 0.75rem; flex: 1 1 auto;
    display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.blog-meta { font-size: 0.78rem; color: var(--fb-muted); }

:root[data-bs-theme="dark"] .blog-lead,
:root[data-bs-theme="dark"] .blog-card { background: #131a29; border-color: #26304a; }
:root[data-bs-theme="dark"] .blog-card:hover { box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45); }