/* ============================================================================
   VirtuHost — Order wizard supplement (op theme.tailwind.css)
   Behoudt alle JS-gekoppelde structuur (slider/boxes/list selectie-toggles),
   maar vervangt de gedateerde grijstinten/ontbrekende vars door huisstijl.
   Brand-tokens (var(--color-brand-*)/var(--brand-grad)) komen uit theme.tailwind.css.
   ============================================================================ */

/* Fallback-vars voor het geval het order-formulier los van theme.tailwind.css laadt */
:root {
    --light: #e2e8f0;
    --secondary: #94a3b8;
    --info: hsl(25 95% 53%);
    --dark: #0f172a;
}

.section-title { margin-top: 10px; margin-bottom: 1rem; }
.section-title h3 { font-weight: 700; color: #0f172a; }
.section-title p { color: #64748b; }

.package-slider { margin-bottom: 20px; padding-top: 20px; border-top: 1px solid #e2e8f0; }
#create-account { margin-top: 20px; padding: 20px 15px 0; border-top: 1px solid #e2e8f0; }
#summary-details .btn { margin: 10px 0; }
.pass-reset { padding-top: 5px; font-size: 12px; font-style: italic; color: #64748b; }

/* ---- Order samenvatting/cart kaart ---------------------------------- */
.card-order { /* box/typografie via Tailwind per kaart; alleen .card-order .table/.total-due helpers hieronder */ }
.card-order .row.card-fix { margin: 0 -20px; }
.card-order .table { border: none; }
.card-order .table > thead > tr > th { background: none; border: none; border-bottom: 2px solid #e2e8f0; }
.card-order .table > tbody > tr > td { border: none; padding: 8px 4px 4px; }
.card-order .total-due { text-align: right; }
.card-order .total-due h4 { margin-top: 5px; color: #0f172a; }

.currency { margin-top: 10px; }
.currency form { float: right; margin: 10px 0; }
.currency form * { margin-right: 0 !important; margin-left: 5px; display: flex; }
@media (max-width: 768px) {
    .currency { margin-top: 0; }
    .currency form { float: none; width: 100%; margin: 0 0 15px; }
    .currency form * { width: 100% !important; display: block; margin: 0 !important; }
}

.gateway-logo { object-fit: cover; max-height: 40px; max-width: 125px; padding-left: 5px; box-sizing: border-box; }
#payment-method .card-body .px-2:last-child label { margin-bottom: 5px; }
.payment_type, .gateway { margin-right: 5px; }

/* ---- Bootstrap-slider styling (pakketkeuze-slider ÉN quantity-config-opties) ----
   De plugin levert in dit thema GEEN eigen CSS mee → hier de basis-layout + huisstijl,
   gescoped op de plugin-eigen classes zodat zowel #package_slider als de quantity-
   slider in .package_options netjes renderen (anders een kale oranje streep). */
.slider { display: inline-block; position: relative; vertical-align: middle; max-width: 100%; }
.slider.slider-horizontal { width: 210px; height: 22px; box-sizing: border-box; }
.slider.slider-horizontal .slider-track { position: absolute; top: 50%; left: 0; width: 100%; height: 8px; margin-top: -4px; border-radius: 999px; background: #e2e8f0; cursor: pointer; box-shadow: none; }
.slider.slider-horizontal .slider-selection,
.slider.slider-horizontal .slider-track-low,
.slider.slider-horizontal .slider-track-high { position: absolute; top: 0; height: 100%; border-radius: 999px; box-sizing: border-box; }
.slider.slider-horizontal .slider-track-high { background: #e2e8f0; opacity: .6; }
.slider.slider-horizontal .slider-selection { background: var(--color-brand-500, hsl(25 95% 53%)); }
.slider.slider-horizontal .slider-handle { position: absolute; top: 50%; width: 20px; height: 20px; margin-top: -10px; margin-left: -10px; border-radius: 50%; cursor: pointer; border: 2px solid #fff; background: var(--color-brand-500, hsl(25 95% 53%)); box-shadow: 0 0 0 3px hsl(25 95% 53% / .25); }
.slider .slider-tick { display: none !important; }
/* waarde-bubbel: de quantity-slider toont het gekozen aantal; de pakket-slider
   verbergt 'm via JS (tooltip:'hide') dus deze stijl raakt die niet. */
.slider .tooltip { position: absolute; z-index: 5; white-space: nowrap; }
.slider .tooltip.top { margin-top: -6px; }
.slider .tooltip .tooltip-inner { background: var(--color-brand-600, #ea580c); color: #fff; border-radius: 6px; padding: 2px 9px; font-size: 12px; font-weight: 600; }
.slider .tooltip .tooltip-arrow, .slider .tooltip .arrow { display: none; }
/* Package-keuze-slider: volledige breedte binnen de kaart */
.package-slider .slider.slider-horizontal { margin: 14px 15px 18px; width: calc(100% - 30px); }
.package-slider .package-block { display: none; }            /* JS toggelt .active */
.package-slider .package-block.active { display: block; }
.package-slider .package-selected { padding: 10px 20px; }
.package-slider .package-selected h3 { margin-bottom: 0; }
.package-slider .instructions { padding: 0 10px; font-style: italic; color: #94a3b8; }

/* Hoeveelheid-config-optie (bv. de antispam-domeinlimiet-slider): het getal-veld en
   de prijsregel erna staan in de PDT los na elkaar in dezelfde .form-group, maar de
   Tailwind-utility op .generated_fields_div forceert op ELK .form-control
   'width:100%' (nodig voor de gewone tekst/select-velden erboven). order.css is
   bewust ONGELAAGD, dus deze normale (niet-!important) regel wint al automatisch
   van die utilities-layer-klasse (zie package.json "_note_order_css") - geen
   @layer-gedoe nodig. Scoped op [data-type="quantity"] zodat andere velden
   (domeinnaam-tekstveld, product-dropdown) hun volle breedte houden. */
.generated_fields_div input.form-control[data-type="quantity"] {
    display: inline-block;
    width: 90px;
    vertical-align: middle;
}

/* De prijsregel-<label> erna heeft van Blesta zelf class="d-block" - dat is Bootstrap
   ("display:block!important", zie bootstrap-compat.css), niet Tailwind. Een !important
   is de enige manier om dat te verslaan, en ONGELAAGD !important verliest van GELAAGD
   !important (zie knowledgebase.css/blesta-theme-layer-cascade) - dus WEL @layer
   components hier, gelijk aan bootstrap-compat.css/components.css. */
@layer components {
    .generated_fields_div input.form-control[data-type="quantity"] + label {
        display: inline-block !important;
        vertical-align: middle;
        margin: 0 0 0 10px !important;
    }
}

/* ---- SSL-wizard (dropdown+tabel), zie _shared/ssl_wizard.pdt ---- */
.vh-ssl-table-wrap table { border-collapse: collapse; }
.vh-ssl-row:hover { background: #f8fafc; }
/* .package-boxes (hergebruikt hier puur voor de .pkg-tagline/.pkg-features-opmaak)
   zet zelf height:100% - dat forceert de kaart hoogte-vullend LOS van items-start
   op de grid hierboven (align-items regelt alleen het stretchen van auto-hoge
   items, niet een expliciet gezette height). Terugzetten naar auto zodat alleen
   de kaart waar "Meer info" wordt aangeklikt daadwerkelijk groeit. NIET zomaar
   ook de .package-klasse toevoegen om de hover hieronder te "lenen" - die zet
   ZELF óók height:100% en zou deze fix weer ongedaan maken.
   Hover-waarden (translateY -4px + dunne oranje rand + oranje gloed) bewust
   1-op-1 gekopieerd uit .package-boxes .package:hover hierboven (het
   "huisstijl"-kaart-hover-effect, hoort overal hetzelfde te zijn). */
.vh-ssl-featured .package-boxes {
    height: auto;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.vh-ssl-featured .package-boxes:hover {
    transform: translateY(-4px);
    border-color: var(--color-brand-300, #fdba74);
    box-shadow: 0 18px 38px -18px hsl(25 95% 53% / .42);
}
@media (max-width: 640px) {
    .vh-ssl-table-wrap table { min-width: 480px; } /* horizontaal scrollen i.p.v. dichtknijpen */
}
/* "Meer info"-lijst in de tabelrijen: zelfde groene-vinkjes-look als de kaarten
   hierboven, maar compacter en buiten de .package-boxes-scope (die styling zit
   vast aan die klasse) - dus een eigen, kleinere variant. */
.vh-ssl-row .pkg-features ul { list-style: none; margin: 6px 0 0; padding: 0; }
.vh-ssl-row .pkg-features ul li { position: relative; padding: 3px 0 3px 20px; color: #64748b; }
.vh-ssl-row .pkg-features ul li::before {
    content: "\2713"; position: absolute; left: 0; top: 3px;
    width: 14px; height: 14px; line-height: 14px; text-align: center;
    font-size: 9px; font-weight: 800; color: #fff;
    background: var(--color-secure-500, #10b981); border-radius: 50%;
}

/* ---- Boxes stijl — frontend "pricing card" look (gescoped op .package-boxes zodat het
   de Tailwind-utilities op het element wint). JS toggelt .selected + .selected/.unselected-btn. */
.package-boxes { position: relative; height: 100%; }
.package-boxes .package {
    height: 100%; background: #fff; text-align: left;
    border-radius: 16px; border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(15,23,42,.06);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
/* Hover: zachte oranje gloed (zoals de frontend hover:shadow-orange-500/40) — op ELKE kaart */
.package-boxes .package:hover {
    transform: translateY(-4px);
    border-color: var(--color-brand-300, #fdba74);
    box-shadow: 0 18px 38px -18px hsl(25 95% 53% / .42);
}

.package > .selected-btn, .package.selected > .unselected-btn { display: none; }
.package > .unselected-btn, .package.selected > .selected-btn { display: block; }

/* Korte omschrijving (tagline) — tussen naam en prijs, net als de marketing-cards */
.package-boxes .pkg-tagline { color: #64748b; font-size: 14px; line-height: 1.45; }
.package-boxes .pkg-tagline p { margin: 0; }
.package-boxes .pkg-tagline > :last-child { margin-bottom: 0; }

/* Prominente prijs */
.package-boxes .pkg-price { line-height: 1.05; padding-bottom: 6px; }
.package-boxes .pkg-price .price { font-size: 34px; font-weight: 800; color: #0f172a; letter-spacing: -.02em; }
.package-boxes .pkg-price .term { color: #64748b; font-size: 14px; font-weight: 500; margin-left: 4px; }
/* De per-kaart factureringscyclus-dropdown is verborgen — de Maandelijks/Jaarlijks-toggle stuurt
   'm aan. De <select> blijft in de DOM (verstuurt pricing_id mee bij submit). */
.package-boxes .price-box { display: none; }

/* Feature-checklist uit de pakketomschrijving (vul de Beschrijving met <ul><li>…) */
.package-boxes .pkg-features ul { list-style: none; margin: 4px 0 0; padding: 0; }
.package-boxes .pkg-features ul li { position: relative; padding: 6px 0 6px 28px; color: #475569; }
.package-boxes .pkg-features ul li::before {
    content: "\2713"; position: absolute; left: 0; top: 6px;
    width: 18px; height: 18px; line-height: 18px; text-align: center;
    font-size: 11px; font-weight: 800; color: #fff;
    background: var(--color-secure-500, #10b981); border-radius: 50%;
}
/* eerste regel van de omschrijving (tagline) iets prominenter onder de prijs */
.package-boxes .pkg-features { padding-top: 2px; }

/* Primaire CTA = oranje gradient (geselecteerd); secundair = outline */
.package-boxes .vh-btn-primary {
    background: var(--brand-grad, linear-gradient(135deg, hsl(25 95% 53%), hsl(35 91% 60%))) !important;
    border: 0 !important; color: #fff !important; font-weight: 700 !important; border-radius: 12px !important;
    box-shadow: 0 12px 22px -10px hsl(25 95% 53% / .55);
}
.package-boxes .vh-btn-secondary {
    background: #fff !important; color: #0f172a !important; border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important; font-weight: 600 !important;
}
.package-boxes .vh-btn-secondary:hover { border-color: var(--color-brand-500, hsl(25 95% 53%)) !important; color: var(--color-brand-600, #ea580c) !important; }

/* Maandelijks/Jaarlijks-toggle */
.billing-toggle-pill { display: inline-flex; align-items: center; gap: 2px; background: #f1f5f9; border-radius: 999px; padding: 4px; }
.billing-toggle .bt-opt { border: 0; background: transparent; color: #475569; font-weight: 600; font-size: 14px; padding: 8px 18px; border-radius: 999px; cursor: pointer; transition: all .2s ease; }

.package-groups { margin-top: 20px; }
.package-groups .list-group-item { margin-bottom: 0; }
.package-groups .list-group-item h4 { margin: 0; font-size: 1rem; font-weight: 600; }

/* ---- Whois / domeinzoeker ------------------------------------------
   LET OP: de transparante kaart alleen BINNEN het whois-blok scopen. Een
   ongescoopte .card-regel hier is ongelaagd (order.css laadt via custom_head
   ná theme.tailwind.css) en verslaat daardoor ALLE gelaagde achtergrond-
   declaraties (bootstrap-compat's witte .card én de bg-white-utility) op
   elke orderpagina - dat maakte o.a. de checkout-kaarten transparant. */
.whois .card { background-color: inherit; }
.whois {
    margin: 15px 0; background: hsl(25 95% 98%); background-repeat: no-repeat;
    background-position: 110% -70px; background-image: url(../images/globe.svg);
    padding: 25px; border-radius: var(--radius-2xl, 1rem); border: 1px solid hsl(25 95% 90%);
}
.whois div.checkbox label { padding-right: 5px; }
.whois div.tlds, .whois div.search { margin: 0 auto; text-align: center; display: block; }
.whois div.tlds { margin-bottom: 0; }
.whois .show_more { margin-left: 5px; }
.domains { font-size: 14px; }
#queue_nonempty_btns, #queue_continue_btns { display: none; }
#empty_cart { margin-bottom: 20px; }

/* ---- List stijl (JS toggelt .selected) ----------------------------- */
.package-list { margin-top: 10px; background: #fff; border: 1px solid #e2e8f0; border-radius: var(--radius-xl, .75rem); }

.package-list .package-item { margin-top: 0; padding: 0 20px; }
.package-list .package-description { padding: 10px; }
.package-list h3 { margin-top: 5px; }
.package-list .instructions { margin-bottom: 2px; font-style: italic; color: #94a3b8; }
.package-list .selected-btn, .package-list.selected .unselected-btn { display: none; }
.package-list .unselected-btn, .package-list.selected .selected-btn { display: block; }

/* ============================================================================
   Per-product box-varianten — webhosting (/webhosting/) & wordpress (/wordpress-hosting/)
   Geactiveerd via .vh-shop(.vh-shop-web|.vh-shop-wp) op de boxes-grid (.vh-pkg-grid),
   gezet vanuit main_packages.pdt op basis van het orderformulier-label.
   Antispam/overige formulieren hebben géén .vh-shop → standaard box-stijl blijft 1:1.
   Doel: de Blesta order-boxen laten ogen als de marketing-prijscards.
   ============================================================================ */

/* 3 kolommen (3 pakketten), gecentreerd — i.p.v. de 4-koloms antispam-grid */
@media (min-width: 1024px) {
    .vh-pkg-grid.vh-shop { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 66rem; margin-left: auto; margin-right: auto; }
}

/* Knop BOVEN de features (zoals de frontend-cards): features achteraan, knop direct
   onder de prijs. Reflow via flex-order; de box is al flex-col. */
.vh-shop .package .order { margin-top: 0 !important; }
.vh-shop .package .pkg-features { order: 10; flex-grow: 1; padding-top: .25rem; }

/* --- webhosting: géén icoon, oranje OUTLINE-vinkjes (zoals /webhosting/: solar:check-circle-linear) --- */
.vh-shop-web .package-name .pkg-icon { display: none; }
.vh-shop-web .package-name .flex { margin-bottom: 0 !important; }
.vh-shop-web .package-boxes .pkg-features ul li::before {
    box-sizing: border-box; background: transparent; color: var(--color-brand-500, hsl(25 95% 53%));
    border: 1.5px solid var(--color-brand-500, hsl(25 95% 53%));
}

/* --- wordpress: rond icoon, grijze OUTLINE-vinkjes (uitgelicht oranje) zoals /wordpress-hosting/ --- */
.vh-shop-wp .package-name .pkg-icon { border-radius: 9999px; }
.vh-shop-wp .package-boxes .pkg-features ul li::before {
    box-sizing: border-box; background: transparent; color: #94a3b8; border: 1.5px solid #cbd5e1;
}

/* ============================================================================
   Foutieve account-velden op de checkout. Blesta markeert de velden zelf niet
   (alleen een tekst-blok .alert-danger); de JS in cart.pdt zet .vh-field-error.
   We gebruiken outline + achtergrond i.p.v. border-color: die laatste verliest van
   de layered !important van .border (bootstrap-compat), outline/background niet.
   ============================================================================ */
.vh-field-error,
.vh-field-error:focus {
    outline: 2px solid #ef4444 !important;
    outline-offset: -1px;
    background-color: #fef2f2 !important;
}