/* ================================================
   TV PAKKE — Filter & Cards CSS
   File: filter-table.css
   Enqueued via: functions.php → wp_enqueue_scripts
   ================================================ */

/* ── "Flere detaljer" link, relocated below the CTA button ─────────── */
.grid-item4 .flere-white {
    text-align: center;
    margin-top: 6px;
}

.grid-item4 .flere-white a {
    color: #1a1a1a;
    font-size: 12px;
    text-decoration: none;
}

.grid-item4 .flere-white a:hover {
    text-decoration: underline;
}

/* ── Offer note (always visible, flush-attached to bottom of card) ──── */
.tvpakke-note-wrap {
    /* no positioning context needed — panel sits in normal flow */
}

.tvpakke-note-panel {
    background: linear-gradient(180deg, #f4fdfd 0%, #eafafb 100%);
    border: 1px solid #cdeef1;
    border-radius: 0 0 12px 12px;
}

.tvpakke-note-panel-inner {
    padding: 14px 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tvpakke-note-text {
    margin: 0;
    font-size: 13px !important;
    line-height: 1.55;
    color: #2a3b3c;
    font-style: italic;
    text-align: center;
}

/* ── CTA button color override ─────────────────────────────────────────
   Reset background-image/text-shadow/filter too, in case something in
   the theme's Bootstrap-style .btn-success defaults was muddying the
   flat color with a leftover gradient or shadow overlay. Also rounds
   the corners a bit more than the theme's default 6px. ─────────────── */
#loan-container .hentry2 .grids .grid-item4 .btn.btn-success,
.filter-home-right .hentry2 .grids .grid-item4 .btn.btn-success,
.desktop-view .hentry2 .grids .grid-item4 .btn.btn-success,
#tvpakke-sticky-banner .tvpakke-sticky-inner .grids .grid-item4 .btn.btn-success {
    background: #f4a931 !important;
    background-image: none !important;
    text-shadow: none !important;
    filter: none !important;
    opacity: 1 !important;
    border-radius: 10px !important;
}

#loan-container .hentry2 .grids .grid-item4 .btn.btn-success:hover,
.filter-home-right .hentry2 .grids .grid-item4 .btn.btn-success:hover,
.desktop-view .hentry2 .grids .grid-item4 .btn.btn-success:hover,
#tvpakke-sticky-banner .tvpakke-sticky-inner .grids .grid-item4 .btn.btn-success:hover {
    background: #d8931f !important;
    background-image: none !important;
}

/* ── "Læs mere om X" (desktop) vs "Flere detaljer" (mobile) ───────────
   Two separate fields instead of one link that changes behavior: the
   desktop one is a real link to the brand's page, the mobile one is a
   toggle that expands the package details in place (see
   filter-table.js). Swapped by breakpoint below. ────────────────────── */
.flere-white-mobile {
    display: none;
}

.tvpakke-flere-chevron {
    font-size: 10px;
    margin-left: 4px;
    transition: transform .2s ease;
}

/* ── card-inner layout override ──────────────────────────────────────
   Takes over card-inner's layout with named grid areas so the details
   pills row sits under logo + price only, not under the button — the
   button spans both rows on the right instead.

   IMPORTANT — this site's Customizer "Additional CSS" already targets
   the same elements with selectors like `.hentry2 .grids .card-inner`
   and `.hentry2 .grids .grid-item1 .image-poer img` (higher specificity
   than a bare `.card-inner`), plus its own mobile grid rules at 680px
   and 900px. Since CSS ties are broken by specificity before load
   order, our selectors are boosted to match/exceed that pattern
   (mirroring its `#loan-container / .filter-home-right / .desktop-view`
   prefixes) so these rules reliably win regardless of where the
   Customizer CSS is injected in the page. ─────────────────────────── */
#loan-container .hentry2 .grids .card-inner,
.filter-home-right .hentry2 .grids .card-inner,
.desktop-view .hentry2 .grids .card-inner,
#tvpakke-sticky-banner .tvpakke-sticky-inner .grids .card-inner {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    grid-template-areas:
        "logo    price   button"
        "details details button" !important;
    column-gap: 16px;
    row-gap: 0;
    align-items: center;
}

#loan-container .hentry2 .grids .grid-item1,
.filter-home-right .hentry2 .grids .grid-item1,
.desktop-view .hentry2 .grids .grid-item1,
#tvpakke-sticky-banner .tvpakke-sticky-inner .grids .grid-item1 {
    grid-area: logo !important;
}

#loan-container .hentry2 .grids .grid-item2,
.filter-home-right .hentry2 .grids .grid-item2,
.desktop-view .hentry2 .grids .grid-item2,
#tvpakke-sticky-banner .tvpakke-sticky-inner .grids .grid-item2 {
    grid-area: price !important;
}

#loan-container .hentry2 .grids .grid-item4,
.filter-home-right .hentry2 .grids .grid-item4,
.desktop-view .hentry2 .grids .grid-item4,
#tvpakke-sticky-banner .tvpakke-sticky-inner .grids .grid-item4 {
    grid-area: button !important;
    align-self: center;
}

.tvpakke-note-details-grid {
    grid-area: details !important;
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    padding: 0 0 14px 0;
    justify-content: center;
}

.tvpakke-note-detail {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid #d7eef0;
    border-radius: 999px;
    padding: 6px 12px 6px 10px;
    font-size: 12px;
    line-height: 1;
    box-shadow: 0 1px 2px rgba(15, 164, 175, .06);
}

.tvpakke-sticky-close .post, .hentry {
    border: none !important;
}

.tvpakke-note-detail i {
    color: #0fa4af;
    font-size: 12px;
}

.tvpakke-note-detail-label {
    font-weight: 700;
    color: #0b7a83;
}

.tvpakke-note-detail-value {
    font-weight: 700;
    color: #0b7a83;
}

/* ── Card logo size cap (mobile-only) ────────────────────────────────
   Desktop keeps its natural size (per the img's width="150" attribute)
   — the cap only applies inside the mobile media query below, where
   the logo was stretching to fill the full-width stacked column. */

/* ── card-inner mobile layout ─────────────────────────────────────────
   The desktop grid (logo/price/button row + details row, button
   spanning both) doesn't have room to breathe on narrow screens — it
   was squashing the price block and overlapping the button. Below
   900px, stack everything in one column instead: logo, price, button,
   details. 900px matches the Customizer CSS's own mobile breakpoint
   (it has competing card-inner grid rules at both 680px and 900px) so
   there's no gap width where only its rules apply. The offer-note
   panel already sits outside card-inner and stacks on its own, so it
   needs no extra rule here. ───────────────────────────────────────── */
@media (max-width: 900px) {
    #loan-container .hentry2 .grids .card-inner,
    .filter-home-right .hentry2 .grids .card-inner,
    .desktop-view .hentry2 .grids .card-inner,
    #tvpakke-sticky-banner .tvpakke-sticky-inner .grids .card-inner {
        grid-template-columns: auto 1fr !important;
        grid-template-areas:
            "logo  price"
            "button button"
            "details details" !important;
        row-gap: 10px;
        min-height: 0 !important;
    }

    #loan-container .hentry2 .grids .grid-item1,
    .filter-home-right .hentry2 .grids .grid-item1,
    .desktop-view .hentry2 .grids .grid-item1,
    #tvpakke-sticky-banner .tvpakke-sticky-inner .grids .grid-item1 {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center;
        padding: 0 !important;
    }

    #loan-container .hentry2 .grids .grid-item1 .image-poer,
    .filter-home-right .hentry2 .grids .grid-item1 .image-poer,
    .desktop-view .hentry2 .grids .grid-item1 .image-poer,
    #tvpakke-sticky-banner .tvpakke-sticky-inner .grids .grid-item1 .image-poer {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100%;
        margin: 0 !important;
    }

    #loan-container .hentry2 .grids .grid-item1 .image-poer a,
    .filter-home-right .hentry2 .grids .grid-item1 .image-poer a,
    .desktop-view .hentry2 .grids .grid-item1 .image-poer a,
    #tvpakke-sticky-banner .tvpakke-sticky-inner .grids .grid-item1 .image-poer a {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
    }

    #loan-container .hentry2 .grids .grid-item1 .image-poer img,
    .filter-home-right .hentry2 .grids .grid-item1 .image-poer img,
    .desktop-view .hentry2 .grids .grid-item1 .image-poer img,
    #tvpakke-sticky-banner .tvpakke-sticky-inner .grids .grid-item1 .image-poer img {
        width: 100% !important;
        max-width: 90px !important;
        height: auto !important;
        margin: 0 !important;
    }

    #loan-container .hentry2 .grids .grid-item1,
    #loan-container .hentry2 .grids .grid-item2,
    #loan-container .hentry2 .grids .grid-item4,
    .filter-home-right .hentry2 .grids .grid-item1,
    .filter-home-right .hentry2 .grids .grid-item2,
    .filter-home-right .hentry2 .grids .grid-item4,
    .desktop-view .hentry2 .grids .grid-item1,
    .desktop-view .hentry2 .grids .grid-item2,
    .desktop-view .hentry2 .grids .grid-item4,
    #tvpakke-sticky-banner .tvpakke-sticky-inner .grids .grid-item1,
    #tvpakke-sticky-banner .tvpakke-sticky-inner .grids .grid-item2,
    #tvpakke-sticky-banner .tvpakke-sticky-inner .grids .grid-item4 {
        width: 100% !important;
    }

    #loan-container .hentry2 .grids .grid-item4,
    .filter-home-right .hentry2 .grids .grid-item4,
    .desktop-view .hentry2 .grids .grid-item4,
    #tvpakke-sticky-banner .tvpakke-sticky-inner .grids .grid-item4 {
        align-self: stretch !important;
    }

    .tvpakke-note-details-grid {
        gap: 8px !important;
        justify-content: center;
        padding: 0 0 4px;
    }

    /* ── Pill-shaped CTA button ──────────────────────────────────────── */
    #loan-container .hentry2 .grids .grid-item4 .btn.btn-success,
    .filter-home-right .hentry2 .grids .grid-item4 .btn.btn-success,
    .desktop-view .hentry2 .grids .grid-item4 .btn.btn-success,
    #tvpakke-sticky-banner .tvpakke-sticky-inner .grids .grid-item4 .btn.btn-success {
        border-radius: 999px !important;
    }

    /* ── "Læs mere om" fold/unfold ───────────────────────────────────────
       Swap the two flere-white fields: hide the desktop brand-page link,
       show the mobile toggle. Tapping it reveals the details pills +
       offer note below the button (hidden by default here), via the
       .tvpakke-mobile-open class added by filter-table.js. ──────────── */
    .flere-white-desktop {
        display: none;
    }

    .flere-white-mobile {
        display: block;
    }

    .loan-offer-item.tvpakke-mobile-open .tvpakke-flere-chevron {
        transform: rotate(180deg);
    }

    .tvpakke-note-details-grid,
    .tvpakke-note-wrap {
        display: none;
    }

    .loan-offer-item.tvpakke-mobile-open .tvpakke-note-details-grid {
        display: flex;
    }

    .loan-offer-item.tvpakke-mobile-open .tvpakke-note-wrap {
        display: block;
    }
}

/* ── Offer type pill (below card logo) ─────────────────────────────── */
.tvpakke-offer-type-pill {
    display: inline-block;
    margin-top: 8px;
    background: #0fa4af;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    padding: 5px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

/* ── Offer name label (above card logo) ────────────────────────────── */
.tvpakke-offer-name {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #0fa4af;
    margin-bottom: 4px;
}

/* ── Savings tab (flap above the card, not inside it) ─────────────────
   A normal sibling element placed right before .grids in the markup,
   so it stacks above the card in ordinary document flow — no absolute
   positioning, no negative margins. margin-bottom: -1px closes the
   hairline gap so it reads as attached to the card rather than a
   separate floating chip. ─────────────────────────────────────────── */
.tvpakke-savings-banner {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #f43f5e 0%, #fb7185 100%);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .01em;
    padding: 7px 14px;
    border-radius: 10px 10px 0 0;
}

.tvpakke-savings-banner i.fa-bolt {
    font-size: 11px;
}

/* ── Category toggle rows ──────────────────────────────────────────── */
.tvpakke-cat-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
    gap: 8px;
    cursor: pointer;
}

.tvpakke-cat-logo {
    height: 32px;
    max-width: 110px;
    object-fit: contain;
    object-position: left center;
    display: block;
    transition: opacity .2s;
}

.tvpakke-cat-toggle-row[data-active="false"] .tvpakke-cat-logo {
    opacity: .35;
    filter: grayscale(60%);
}

.tvpakke-cat-logo-toggle {
    flex-shrink: 0;
}

/* ── Utility ───────────────────────────────────────────────────────── */
.tvpakke-hidden {
    display: none !important;
}

/* ── Sticky bottom banner ──────────────────────────────────────────── */
#tvpakke-sticky-banner.tvpakke-sticky-loading {
    display: none !important;
}

#tvpakke-sticky-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    padding: 0 16px;
    transition: transform .35s ease, opacity .35s ease;
    transform: translateY(0);
    opacity: 1;
}

#tvpakke-sticky-banner.tvpakke-sticky-hidden {
    transform: translateY(110%);
    opacity: 0;
    pointer-events: none;
}

.tvpakke-sticky-inner {
    max-width: 960px;
    margin: 0 auto;
    border: none !important;
    box-shadow: none !important;
    padding: 6px 0 !important;
}

.post, .hentry {
    background: none !important;
    border: 1px transparent !important;
}

.tvpakke-sticky-inner .grids {
    border: none !important;
    box-shadow: 0 -4px 18px rgba(0, 0, 0, .12);
    background: #f4feff !important;
    border-radius: 0 10px 10px 10px;
}



.tvpakke-sticky-close:hover {
    color: #111;
}

@media (max-width: 768px) {
    #tvpakke-sticky-banner {
        display: none !important;
    }
}

.post, .hentry {
    border: 0px solid #0fa4af !important;
}