/*
 * HostValues webshop: categorie-, product- en afrekenpagina.
 *
 * Paymenter heeft hier geen node_modules, dus de Tailwind-CSS van het thema
 * kan niet hercompileerd worden. Alles wat de eigen views nodig hebben staat
 * daarom als gewone CSS in dit bestand, dat vanuit
 * themes/hostvalues/views/layouts/colors.blade.php wordt ingeladen.
 *
 * De vormtaal is een op een overgenomen van de pakketkaarten op hostvalues.net
 * (hv-modern.css + main.css): rode kop #96121d met afgeronde bovenhoeken,
 * icoon dat half over de kop hangt, prijs met kleine euro, witte body met
 * dikgedrukte specificaties, en een rode Bestellen-knop. Aanbevolen pakketten
 * krijgen een pil en een rode rand.
 *
 * Bewust buiten public/hostvalues/ geplaatst: die map is de Vite-uitvoer en
 * zou bij een toekomstige build worden leeggemaakt.
 */

:root {
    --hvs-rood: #96121d;
    --hvs-rood-donker: #7c0f18;
    --hvs-rood-licht: #b81b28;
    --hvs-radius: 12px;
    --hvs-schaduw: 0 6px 24px rgba(20, 20, 43, 0.08);
    --hvs-schaduw-hover: 0 12px 32px rgba(20, 20, 43, 0.14);
}

/* ------------------------------------------------------------------ algemeen */
.hv-shop a { text-decoration: none; }

.hv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    background: var(--hvs-rood);
    color: #fff !important;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 0.7rem 1.4rem;
    border-radius: 8px;
    border: 0;
    cursor: pointer;
    transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.hv-btn:hover { background: var(--hvs-rood-donker); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(150, 18, 29, 0.3); }
.hv-btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }
.hv-btn--block { width: 100%; }
.hv-btn--ghost { background: transparent; color: var(--hvs-rood) !important; border: 1.5px solid var(--hvs-rood); }
.hv-btn--ghost:hover { background: rgba(150, 18, 29, 0.06); box-shadow: none; }
.hv-btn--wit { background: #fff; color: var(--hvs-rood) !important; }
.hv-btn--wit:hover { background: #f6dcde; box-shadow: none; }

.hv-muted { color: hsl(var(--color-muted)); }
.hv-kicker {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hvs-rood);
}

/* ------------------------------------------------------------ categoriekop */
.hv-cat-hero {
    position: relative;
    background: linear-gradient(135deg, #96121d 0%, #7c0f18 60%, #620c13 100%);
    color: #fff;
    padding: 3.25rem 0 5.5rem;
    overflow: hidden;
}

.hv-cat-hero::after {
    /* zacht doorschijnend spelbeeld rechts, net als de hero op de site */
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--hv-cat-image, none);
    background-size: cover;
    background-position: center right;
    opacity: 0.16;
    mask-image: linear-gradient(90deg, transparent 30%, #000 75%);
    -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 75%);
    pointer-events: none;
}

.hv-cat-hero .container { position: relative; z-index: 1; }

.hv-cat-hero h1 {
    font-size: clamp(1.8rem, 3.6vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0.3rem 0 0.6rem;
    color: #fff;
}

.hv-cat-hero p { max-width: 42rem; font-size: 1.02rem; line-height: 1.6; color: rgba(255, 255, 255, 0.9); margin: 0; }

.hv-cat-hero .hv-kicker { color: rgba(255, 255, 255, 0.75); }

.hv-cat-hero .hv-cat-usps {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin-top: 1.25rem;
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.85);
}

.hv-cat-hero .hv-cat-usps span::before {
    content: "\2714";
    margin-right: 0.45rem;
    font-size: 0.8rem;
}

/* Tabs met de andere games, onder de kop */
.hv-game-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: -2.75rem 0 2.25rem;
    position: relative;
    z-index: 2;
}

.hv-game-nav a {
    background: hsl(var(--color-background-secondary));
    border: 1px solid hsl(var(--color-neutral));
    color: hsl(var(--color-base));
    border-radius: 999px;
    padding: 0.45rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    box-shadow: var(--hvs-schaduw);
    transition: all 0.15s ease;
}

.hv-game-nav a:hover { border-color: var(--hvs-rood); color: var(--hvs-rood); transform: translateY(-1px); }
.hv-game-nav a.is-actief { background: var(--hvs-rood); border-color: var(--hvs-rood); color: #fff; }

/* ------------------------------------------------------------ pakketkaarten */
.hv-plans {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    padding-top: 3rem; /* ruimte voor het icoon dat over de kop hangt */
}

@media (min-width: 640px) { .hv-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .hv-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .hv-plans { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.hv-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    background: hsl(var(--color-background-secondary));
    border: 1px solid hsl(var(--color-neutral));
    border-radius: var(--hvs-radius);
    box-shadow: var(--hvs-schaduw);
    overflow: visible;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hv-plan:hover { transform: translateY(-4px); box-shadow: var(--hvs-schaduw-hover); }

.hv-plan--aanbevolen {
    border: 2px solid var(--hvs-rood);
    box-shadow: 0 14px 34px rgba(150, 18, 29, 0.18);
}

.hv-plan-badge {
    position: absolute;
    top: 10px;
    right: 12px;
    left: auto !important;
    transform: none !important;
    background: #fff;
    color: var(--hvs-rood);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-radius: 999px;
    padding: 3px 11px;
    z-index: 10;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.hv-plan-kop {
    background: var(--hvs-rood);
    color: #fff;
    text-align: center;
    padding: 1.8rem 1.25rem 1.4rem;
    border-radius: calc(var(--hvs-radius) - 1px) calc(var(--hvs-radius) - 1px) 0 0;
    position: relative;
}

.hv-plan--aanbevolen .hv-plan-kop { padding-top: 2.5rem; }

.hv-plan-icoon {
    width: 96px;
    height: 96px;
    margin: -3.6rem auto 0.75rem;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.28));
}

.hv-plan-icoon[src*="ark-"],
.hv-plan-icoon[src*="ark/"],
.hv-plan-icoon[src*="dodo"],
.hv-plan-icoon[src*="raptor"],
.hv-plan-icoon[src*="rex"],
.hv-plan-icoon[src*="giga"],
.hv-plan-icoon[src*="titan"],
.hv-plan-icoon[src*="trike"],
.hv-plan-icoon[src*="spino"],
.hv-plan-icoon[src*="therizino"] {
    filter: brightness(0) invert(1) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.45));
}

.hv-plan-naam {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.95;
    margin: 0 0 0.35rem;
    color: #fff;
}

.hv-plan-prijs { font-size: 2.2rem; font-weight: 800; line-height: 1.1; color: #fff; }
.hv-plan-prijs sup { font-size: 1rem; font-weight: 700; vertical-align: super; margin-right: 2px; }
.hv-plan-termijn { font-size: 0.8rem; opacity: 0.85; margin-top: 0.35rem; color: #fff; }

.hv-plan-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.5rem 1.4rem 1.6rem;
    text-align: center;
}

.hv-specs { list-style: none; margin: 0 0 1.1rem; padding: 0; }
.hv-specs li { padding: 0.35rem 0; font-size: 0.95rem; line-height: 1.4; color: hsl(var(--color-muted)); }
.hv-specs li b { color: hsl(var(--color-base)); font-weight: 700; margin-right: 0.35rem; }

.hv-plan-divider { height: 1px; background: hsl(var(--color-neutral)); margin: 0.3rem auto 1.1rem; width: 80%; }

.hv-features { list-style: none; margin: 0 0 1.4rem; padding: 0; text-align: left; }
.hv-features li { font-size: 0.88rem; line-height: 1.45; color: hsl(var(--color-muted)); padding: 0.3rem 0 0.3rem 1.4rem; position: relative; }
.hv-features li::before {
    content: "\2714";
    color: var(--hvs-rood);
    position: absolute;
    left: 0;
    top: 0.3rem;
    font-size: 0.82rem;
    font-weight: 700;
}

.hv-plan-jaar { font-size: 0.8rem; color: hsl(var(--color-muted)); margin-top: 0.85rem; }
.hv-plan-jaar b { color: var(--hvs-rood); }

.hv-plan-body .hv-btn { margin-top: auto; }

/* ------------------------------------------------------------- productpagina */
.hv-prod-hero {
    background: linear-gradient(135deg, #96121d 0%, #7c0f18 60%, #620c13 100%);
    color: #fff;
    padding: 3rem 0 3.25rem;
}

.hv-prod-hero .container { display: grid; gap: 2rem; align-items: center; grid-template-columns: 1fr; }
@media (min-width: 768px) { .hv-prod-hero .container { grid-template-columns: 1fr auto; } }

.hv-prod-hero h1 { font-size: clamp(1.9rem, 3.8vw, 2.7rem); font-weight: 800; letter-spacing: -0.02em; margin: 0.3rem 0 0.5rem; color: #fff; }
.hv-prod-hero .hv-kicker { color: rgba(255, 255, 255, 0.75); }
.hv-prod-hero p { font-size: 1.02rem; color: rgba(255, 255, 255, 0.9); max-width: 40rem; margin: 0 0 1.2rem; }
.hv-prod-hero .hv-prod-icoon { width: 170px; height: 170px; object-fit: contain; filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.35)); justify-self: center; }

.hv-prijsblok { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.hv-prijsblok .hv-prijs { font-size: 2.4rem; font-weight: 800; line-height: 1; color: #fff; }
.hv-prijsblok .hv-prijs sup { font-size: 1.05rem; vertical-align: super; }
.hv-prijsblok .hv-per { font-size: 0.95rem; color: rgba(255, 255, 255, 0.85); }
.hv-prijsblok .hv-jaar { font-size: 0.85rem; color: rgba(255, 255, 255, 0.8); flex-basis: 100%; }

.hv-prod-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; margin-top: 2rem; }
@media (min-width: 1024px) { .hv-prod-grid { grid-template-columns: 2fr 1fr; } }

.hv-panel {
    background: hsl(var(--color-background-secondary));
    border: 1px solid hsl(var(--color-neutral));
    border-radius: var(--hvs-radius);
    box-shadow: var(--hvs-schaduw);
    padding: 1.4rem 1.5rem;
}

.hv-panel h2, .hv-panel h3 { font-size: 1.05rem; font-weight: 700; margin: 0 0 0.9rem; }

.hv-spec-grid { display: grid; gap: 0.9rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .hv-spec-grid { grid-template-columns: repeat(3, 1fr); } }

.hv-spec {
    border: 1px solid hsl(var(--color-neutral));
    border-radius: 10px;
    padding: 0.85rem 0.95rem;
}

.hv-spec small { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: hsl(var(--color-muted)); margin-bottom: 0.2rem; }
.hv-spec b { font-size: 1.15rem; font-weight: 800; }

.hv-checklist { list-style: none; margin: 0; padding: 0; columns: 1; }
@media (min-width: 640px) { .hv-checklist { columns: 2; column-gap: 1.5rem; } }
.hv-checklist li { font-size: 0.9rem; padding: 0.3rem 0; break-inside: avoid; color: hsl(var(--color-base)); }
.hv-checklist li::before { content: "\2714"; color: var(--hvs-rood); margin-right: 0.5rem; font-size: 0.8rem; }

.hv-panel--cta { position: sticky; top: 5.5rem; }
.hv-panel--cta .hv-cta-prijs { font-size: 2rem; font-weight: 800; line-height: 1; }
.hv-panel--cta .hv-cta-prijs sup { font-size: 0.9rem; vertical-align: super; }
.hv-panel--cta .hv-cta-per { font-size: 0.85rem; color: hsl(var(--color-muted)); margin: 0.2rem 0 1rem; }
.hv-panel--cta ul { list-style: none; padding: 0; margin: 1rem 0 0; }
.hv-panel--cta ul li { font-size: 0.85rem; color: hsl(var(--color-muted)); padding: 0.25rem 0; }
.hv-panel--cta ul li::before { content: "\2714"; color: var(--hvs-rood); margin-right: 0.45rem; font-size: 0.75rem; }

.hv-terug { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.88rem; color: hsl(var(--color-muted)); margin-bottom: 1.5rem; }
.hv-terug:hover { color: var(--hvs-rood); }

/* -------------------------------------------------------------- afrekenpagina */
.hv-co-kop { padding: 2.25rem 0 1.25rem; }
.hv-co-kop h1 { font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 800; letter-spacing: -0.02em; margin: 0.25rem 0 0.35rem; }
.hv-co-kop p { color: hsl(var(--color-muted)); margin: 0; }

.hv-co-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; padding-bottom: 3rem; }
@media (min-width: 1024px) { .hv-co-grid { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; } }

.hv-co-links { display: flex; flex-direction: column; gap: 1.25rem; }

.hv-co-stap { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 1rem; }
.hv-co-stap .hv-stapnr {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--hvs-rood); color: #fff;
    font-size: 0.8rem; font-weight: 800;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.hv-co-stap h2 { margin: 0; font-size: 1.05rem; font-weight: 700; }
.hv-co-stap small { display: block; font-size: 0.82rem; color: hsl(var(--color-muted)); font-weight: 400; }

/* Looptijdkeuze als tegels in plaats van een select */
.hv-termijnen { display: grid; gap: 0.85rem; grid-template-columns: repeat(1, 1fr); }
@media (min-width: 560px) { .hv-termijnen { grid-template-columns: repeat(3, 1fr); } }

.hv-termijn {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1.5px solid hsl(var(--color-neutral));
    border-radius: 12px;
    padding: 1.1rem 1.15rem;
    cursor: pointer;
    transition: all 0.15s ease;
    min-height: 5.4rem;
}

.hv-termijn:hover { border-color: var(--hvs-rood); transform: translateY(-1px); }
.hv-termijn input { position: absolute; opacity: 0; pointer-events: none; }
.hv-termijn.is-actief { border-color: var(--hvs-rood); background: rgba(150, 18, 29, 0.05); box-shadow: 0 0 0 3px rgba(150, 18, 29, 0.12); }
.hv-termijn .hv-t-naam { font-weight: 700; font-size: 0.95rem; display: block; }
.hv-termijn .hv-t-prijs { font-size: 1.2rem; font-weight: 800; display: block; margin-top: 0.25rem; }
.hv-termijn .hv-t-sub { font-size: 0.78rem; color: hsl(var(--color-muted)); display: block; margin-top: 0.2rem; }
.hv-termijn .hv-t-korting {
    position: absolute; top: -10px; right: 12px;
    background: var(--hvs-rood); color: #fff;
    font-size: 0.68rem; font-weight: 700;
    padding: 3px 9px; border-radius: 999px; letter-spacing: 0.04em;
    box-shadow: 0 2px 6px rgba(150, 18, 29, 0.3);
}

/* De standaard configoption-component (slider/select/checkbox) een nette kaart geven */
.hv-co-opties { display: flex; flex-direction: column; gap: 1.25rem; }

.hv-co-optie {
    border: 1px solid hsl(var(--color-neutral));
    border-radius: 12px;
    padding: 1.2rem 1.35rem 1.35rem;
    background: hsl(var(--color-background-secondary));
}

.hv-co-optie label { font-weight: 600 !important; font-size: 0.92rem !important; color: hsl(var(--color-base)) !important; }
.hv-co-optie .text-xs { margin-top: 0.6rem; }

/* De slider van Paymenter zet zijn labels absoluut, waardoor de lijst geen
   hoogte krijgt en de omschrijving eroverheen valt. Hier krijgt de rij
   voldoende hoogte en de labels een vaste breedte zodat "(inbegrepen)" niet
   over de buren heen loopt. */
.hv-co-optie ul.flex.justify-between { min-height: 4.4rem; margin-top: 0.35rem; }
.hv-co-optie ul.flex.justify-between li { padding-bottom: 3.6rem !important; }
.hv-co-optie ul.flex.justify-between li button { width: 5.5rem; white-space: normal; line-height: 1.15; }
.hv-co-optie ul.flex.justify-between li button span { font-size: 0.78rem !important; }
.hv-co-optie ul.flex.justify-between li button span:last-child { color: var(--hvs-rood); }
.hv-co-optie input[type="range"] { accent-color: var(--hvs-rood); }
.hv-co-optie .before\:bg-primary::before { background: var(--hvs-rood) !important; }
.hv-co-optie select { font-size: 0.92rem !important; }
.hv-co-optie input[type="checkbox"] { accent-color: var(--hvs-rood); width: 1.1rem; height: 1.1rem; }

/* Besteloverzicht rechts, blijft in beeld */
.hv-summary {
    position: sticky;
    top: 5.5rem;
    background: hsl(var(--color-background-secondary));
    border: 1px solid hsl(var(--color-neutral));
    border-radius: var(--hvs-radius);
    box-shadow: var(--hvs-schaduw);
    overflow: hidden;
}

.hv-summary-kop {
    background: var(--hvs-rood);
    color: #fff;
    padding: 1.1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.hv-summary-kop img { width: 52px; height: 52px; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3)); }
.hv-summary-kop .hv-kicker { color: rgba(255, 255, 255, 0.75); }
.hv-summary-kop h2 { margin: 0; font-size: 1.15rem; font-weight: 800; color: #fff; }

.hv-summary-body { padding: 1.1rem 1.25rem 1.3rem; }

.hv-summary-specs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; }
.hv-summary-specs span {
    font-size: 0.75rem; font-weight: 600;
    background: rgba(150, 18, 29, 0.07); color: var(--hvs-rood);
    border-radius: 999px; padding: 0.2rem 0.6rem;
}

.hv-summary-regel { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.88rem; padding: 0.35rem 0; border-bottom: 1px dashed hsl(var(--color-neutral)); }
.hv-summary-regel span:first-child { color: hsl(var(--color-muted)); }
.hv-summary-regel span:last-child { font-weight: 600; white-space: nowrap; }
.hv-summary-regel--totaal { border: 0; padding-top: 0.9rem; font-size: 1.05rem; }
.hv-summary-regel--totaal span:last-child { font-size: 1.45rem; font-weight: 800; color: var(--hvs-rood); }
.hv-summary-daarna { font-size: 0.8rem; color: hsl(var(--color-muted)); margin: 0.1rem 0 0.9rem; }

.hv-summary .hv-btn { margin-top: 0.6rem; }
.hv-summary-zeker { font-size: 0.78rem; color: hsl(var(--color-muted)); text-align: center; margin: 0.8rem 0 0; }

/* De hoofdknop van Paymenter binnen het overzicht in dezelfde stijl */
.hv-summary button.bg-primary { border-radius: 8px; font-weight: 700; padding: 0.75rem 1rem; }

/* ------------------------------------------------------------------- footer */
/* Het standaardthema zet mt-72 (18rem) boven de footer; op korte pagina's
   levert dat een groot leeg vlak op. Hier volgt de footer gewoon de inhoud. */
footer.hv-footer { margin-top: 3rem !important; }

/* ------------------------------------------------------------- RAM selector tiles */
.hv-slider-wrap {
    margin-top: 0.25rem;
}
.hv-ram-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}
@media (min-width: 640px) {
    .hv-ram-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}
.hv-ram-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.85rem 0.75rem;
    border: 1.5px solid hsl(var(--color-neutral));
    border-radius: 10px;
    background: hsl(var(--color-background));
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    text-align: center;
    outline: none;
}
.hv-ram-tile:hover {
    border-color: var(--hvs-rood);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(150, 18, 29, 0.1);
}
.hv-ram-tile.is-actief {
    border-color: var(--hvs-rood);
    background: rgba(150, 18, 29, 0.05);
    box-shadow: 0 0 0 2px var(--hvs-rood), 0 4px 14px rgba(150, 18, 29, 0.15);
    transform: translateY(-2px);
}
.hv-ram-val {
    font-weight: 700;
    font-size: 0.98rem;
    color: hsl(var(--color-base));
}
.hv-ram-tile.is-actief .hv-ram-val {
    color: var(--hvs-rood);
}
.hv-ram-price {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--hvs-rood);
    margin-top: 0.25rem;
}