/* ════════════════════════════════════════════════════════════════
   Domein-Direct.nl — WHMCS standard_cart — Huisstijl-overrides
   ════════════════════════════════════════════════════════════════
   Doel: de winkelwagen gelijktrekken met de statische site.
   De header wordt al geregeld door twenty-one/css/custom.css;
   dit bestand pakt de body: zoekblok, knoppen en prijzen.

   Plaatsing op de server:
     templates/orderforms/standard_cart/css/custom.css

   Vervangt de vorige versie (34 regels). Wat daar mis was:
     - drie kleuren die nergens anders voorkomen (#0352b7,
       #ffb201, #ffd960) — geen van alle huisstijl
     - background-color blauw met daaroverheen een gele
       gradiënt, maar de -moz- variant zette 'm weer op blauw:
       Chrome toonde geel, Firefox blauw
     - vier verouderde prefixen (-webkit-, -moz-, -ms-, -o-)
       die sinds ~2013 nergens meer nodig zijn

   Laadvolgorde (uit head.tpl):
     twenty-one/all → theme → twenty-one/custom
       → standard_cart/all → standard_cart/custom  ← dit bestand
   Let op: het inline <style>-blok in de pagina laadt hierná en
   wint dus van dit bestand. Daarom staan de prijsregels met een
   hogere specificiteit (sectie 4).
   ════════════════════════════════════════════════════════════════ */


/* ── 1. HUISSTIJL-TOKENS ─────────────────────────────────────── */
/* Gelijk aan twenty-one/css/custom.css en de statische site      */
:root {
  --dd-blue:      #1a2e5a;
  --dd-blue-mid:  #1e4db7;
  --dd-blue-lt:   #3f73c9;
  --dd-blue-pale: #eef4ff;
  --dd-gold:      #e8a020;
  --dd-gold-dk:   #c47d0a;
  --dd-white:     #ffffff;
  --dd-border:    #e6e8ed;
  --dd-text:      #18233b;
  --dd-text-sub:  #4b5563;
  --dd-muted:     #696f7d;
  --dd-green:     #16a34a;
  --dd-r:         10px;
  --dd-rlg:       18px;
}


/* ── 2. ZOEKBLOK — als de hero op de site ────────────────────── */
/* Zelfde gradiënt als .hero op domein-direct.nl (en als main's   */
/* dd-hero.css — die twee zijn identiek). Goud blijft accent:     */
/* een lijn van 3px, net als .nav__gold.                          */
/* Eén achtergrond-regel: elke browser toont hetzelfde.           */
.domain-checker-container {
  margin: 20px 0;
  padding: 0;
  border-radius: var(--dd-rlg);
  overflow: hidden;
  background: linear-gradient(150deg, var(--dd-blue) 0%, #1c3870 55%, var(--dd-blue-mid) 100%);
  position: relative;
}

/* Gouden accentlijn bovenaan — zoals .nav__gold in de header */
.domain-checker-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--dd-gold), var(--dd-gold-dk));
}

/* Tekst op donkerblauw: wit, net als in de hero */
.domain-checker-container,
.domain-checker-container h1,
.domain-checker-container h2,
.domain-checker-container h3,
.domain-checker-container p,
.domain-checker-container label {
  color: var(--dd-white);
}

/* Het zoekveld zelf — wit blok in het blauw */
.domain-checker-container .form-control {
  border: 1px solid transparent;
  border-radius: var(--dd-r);
  font-size: 15px;
  color: var(--dd-text);
}
.domain-checker-container .form-control:focus {
  border-color: var(--dd-blue-lt);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}
.domain-checker-container .form-control::placeholder {
  color: var(--dd-muted);
}

/* Zoekknop in het blok: goud, want dat is de actie.               */
/* Op eigen id — het zoekblok zit binnen #order-standard_cart, dus */
/* een klasse-selector zou verliezen van de blauwe regel in        */
/* sectie 3. Met dit id wint goud, ongeacht de volgorde.           */
#btnCheckAvailability.btn-primary,
#order-standard_cart #btnCheckAvailability {
  background-color: var(--dd-gold);
  border-color: var(--dd-gold);
  color: var(--dd-white);
}
#btnCheckAvailability.btn-primary:hover,
#order-standard_cart #btnCheckAvailability:hover {
  background-color: var(--dd-gold-dk);
  border-color: var(--dd-gold-dk);
  color: var(--dd-white);
}

/* Wereldbol eruit. all.min.css zet globe.png (85 kB) op           */
/* background-position:110% -5px. Dat is een crème bol, getekend    */
/* voor het oude gele vlak — op donkerblauw is het een lichte       */
/* vlek die half buiten het blok valt. Scheelt en passant 85 kB.    */
.domain-checker-bg {
  background-image: none;
  padding: 60px 0;
}

/* Tooltip op het zoekveld — Bootstrap zet 'm links, zwart op      */
/* zwart-blauw. title="Voor een domeinnaam of zoekwoord in"        */
.domain-checker-container .tooltip-inner,
.domain-checker-bg .tooltip-inner {
  background-color: var(--dd-blue);
  color: var(--dd-white);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--dd-r);
  font-size: 12px;
}
.domain-checker-container .tooltip .arrow::before,
.domain-checker-bg .tooltip .arrow::before {
  border-left-color: var(--dd-blue);
  border-right-color: var(--dd-blue);
}

/* Mobiel: geen achtergrondplaatje (overgenomen uit de vorige versie) */
@media (max-width: 767.98px) {
  .domain-checker-bg {
    background-image: none !important;
    padding: 48px 0;
  }
}
@media (prefers-reduced-data: reduce) {
  .domain-checker-bg { background-image: none !important; }
}


/* ── 3. KNOPPEN ──────────────────────────────────────────────── */
/* WHMCS-thema zet .btn-primary op #369; dat is niet je blauw.    */
/* Overgenomen van .btn--blue op de statische site.               */
/* NB: .domain-checker-container .btn-primary staat bewust NIET in  */
/* deze lijst — die knop is goud (sectie 2). Zou hij hier ook       */
/* staan, dan won blauw, want deze regel komt later in het bestand. */
#order-standard_cart .btn-primary,
.btn-primary {
  background-color: var(--dd-blue-mid);
  border-color: var(--dd-blue-mid);
  color: var(--dd-white);
  border-radius: var(--dd-r);
  font-weight: 700;
  transition: background-color .2s, border-color .2s, transform .2s;
}
#order-standard_cart .btn-primary:hover,
.btn-primary:hover {
  background-color: var(--dd-blue);
  border-color: var(--dd-blue);
  color: var(--dd-white);
  transform: translateY(-1px);
}
#order-standard_cart .btn-primary:focus,
.btn-primary:focus {
  box-shadow: 0 0 0 3px var(--dd-blue-pale);
}

/* "In winkelwagen" — de belangrijkste knop, dus goud (.btn--gold) */
#order-standard_cart .btn-add-to-cart,
.btn.btn-add-to-cart {
  background-color: var(--dd-gold);
  border-color: var(--dd-gold);
  color: var(--dd-white);
  border-radius: var(--dd-r);
  font-weight: 700;
  transition: background-color .2s, transform .2s;
}
#order-standard_cart .btn-add-to-cart:hover,
.btn.btn-add-to-cart:hover {
  background-color: var(--dd-gold-dk);
  border-color: var(--dd-gold-dk);
  color: var(--dd-white);
  transform: translateY(-1px);
}

/* Secundaire knoppen — .btn--ghost op de site */
#order-standard_cart .btn-default,
.btn.btn-default {
  background-color: transparent;
  border: 1.5px solid var(--dd-border);
  color: var(--dd-text-sub);
  border-radius: var(--dd-r);
  font-weight: 600;
  transition: border-color .2s, color .2s;
}
#order-standard_cart .btn-default:hover,
.btn.btn-default:hover {
  border-color: var(--dd-blue-mid);
  color: var(--dd-blue-mid);
  background-color: transparent;
}


/* ── 4. PRIJZEN ──────────────────────────────────────────────── */
/* Het inline <style>-blok in de pagina laadt ná dit bestand.     */
/* Daarom hier hogere specificiteit (#order-standard_cart ervoor) */
/* in plaats van !important — dat blijft overschrijfbaar.         */
#order-standard_cart .dd-price-current,
#primaryLookupResult .dd-price-current,
#domainSuggestions .dd-price-current {
  color: var(--dd-text);
}
#order-standard_cart .dd-price-regular,
#primaryLookupResult .dd-price-regular,
#domainSuggestions .dd-price-regular {
  color: var(--dd-muted);
}
#order-standard_cart .dd-price-label,
#primaryLookupResult .dd-price-label,
#domainSuggestions .dd-price-label {
  color: var(--dd-text-sub);
}

/* Kortingslabel — was #eef6ff/#1f5f99, nu je eigen blauw-paar */
#order-standard_cart .dd-coupon-label,
#primaryLookupResult .dd-coupon-label,
#domainSuggestions .dd-coupon-label {
  background: var(--dd-blue-pale);
  color: var(--dd-blue-mid);
}


/* ── 5. RESULTATEN — beschikbaar / bezet ─────────────────────── */
#order-standard_cart .domain-checker-available,
#order-standard_cart .available {
  color: var(--dd-green);
}
#order-standard_cart .domain-checker-unavailable,
#order-standard_cart .unavailable {
  color: var(--dd-muted);
}


/* ── 6. KAARTEN EN LIJSTEN ───────────────────────────────────── */
#order-standard_cart .card,
#order-standard_cart .panel {
  border: 1px solid var(--dd-border);
  border-radius: var(--dd-rlg);
}
#order-standard_cart .card-header,
#order-standard_cart .panel-heading {
  background-color: var(--dd-blue-pale);
  border-bottom: 1px solid var(--dd-border);
  color: var(--dd-text);
  font-weight: 700;
}
#order-standard_cart .list-group-item-action:hover {
  background-color: var(--dd-blue-pale);
}
#order-standard_cart .badge-secondary {
  background-color: var(--dd-blue-pale);
  color: var(--dd-blue-mid);
  font-weight: 600;
}

/* ================================================================
   DOMEIN-DIRECT — Domein-check opmaak (NL/EN)
   ================================================================ */

/* --- Extensie-kaarten: even hoog, meegroeien, inhoud gecentreerd --- */
#spotlightTlds .spotlight-tlds-container { display: flex; flex-wrap: wrap; align-items: stretch; }
#spotlightTlds .spotlight-tld-container { display: flex; float: none; }
#spotlightTlds .spotlight-tld {
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 18px 14px 20px !important;
}
#spotlightTlds .spotlight-tld .domain-lookup-result {
  width: 100%;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 8px;
}

/* --- Bestelknop altijd volledig zichtbaar --- */
#spotlightTlds .btn-add-to-cart {
  width: 100%;
  max-width: 220px;
  padding: 10px 14px !important;
  white-space: nowrap;
  border-radius: 8px !important;
}

/* --- "Bezet"-knop leesbaar + korte uitleg (NL/EN) --- */
#spotlightTlds .btn.unavailable,
#spotlightTlds .btn.invalid {
  width: 100%;
  max-width: 220px;
  background: #eceff3 !important;
  color: #475467 !important;
  font-weight: 600 !important;
  opacity: 1 !important;
  border: 1px solid #d0d5dd !important;
  border-radius: 8px !important;
}
#spotlightTlds .spotlight-tld:has(.btn.unavailable[style*="block"]) .domain-lookup-result::after,
#spotlightTlds .spotlight-tld:has(.btn.invalid[style*="block"]) .domain-lookup-result::after {
  content: "Deze naam is al geregistreerd";
  display: block;
  margin-top: 8px;
  color: #98a2b3;
  font-size: 13px;
  text-align: center;
}

/* --- Prijslabel netjes centreren --- */
#spotlightTlds .dd-price-wrap,
#domainSuggestions .dd-price-wrap { align-items: center !important; }
#spotlightTlds .dd-price-label,
#domainSuggestions .dd-price-label { text-align: center !important; }

/* --- "Zoeken"-knop: nooit afkappen --- */
#btnCheckAvailability {
  flex: 0 0 auto !important;
  width: auto !important;
  padding: 0 26px !important;
  white-space: nowrap !important;
  overflow: visible !important;
  font-weight: 700;
}

/* --- Taal/valuta-knop ("Selecteer" / "Apply") leesbaar op donkere modal --- */
#modalChooseLanguage .modal-footer .btn[type="submit"],
#modalChooseLanguage .modal-footer button.btn-default {
  background: #e8a020 !important;
  color: #ffffff !important;
  border: none !important;
  font-weight: 700 !important;
}

/* ================================================================
   Engelse weergave — eigen labels vertalen
   ================================================================ */
body:has(input[name="language"][value="english"]) #spotlightTlds .spotlight-tld:has(.btn.unavailable[style*="block"]) .domain-lookup-result::after,
body:has(input[name="language"][value="english"]) #spotlightTlds .spotlight-tld:has(.btn.invalid[style*="block"]) .domain-lookup-result::after {
  content: "This domain name is already registered";
}
body:has(input[name="language"][value="english"]) .dd-price-label { font-size: 0 !important; }
body:has(input[name="language"][value="english"]) .dd-price-label::after {
  content: "for the first year";
  font-size: 12px;
  color: #667085;
}
body:has(input[name="language"][value="english"]) .dd-check-custom-domain { font-size: 0 !important; }
body:has(input[name="language"][value="english"]) .dd-check-custom-domain::after {
  content: "Check";
  font-size: 14px;
}
body:has(input[name="language"][value="english"]) #domein-prijzen .col-4:has(> .dd-price-regular) small:first-of-type {
  font-size: 0 !important;
}
body:has(input[name="language"][value="english"]) #domein-prijzen .col-4:has(> .dd-price-regular) small:first-of-type::after {
  content: "first year";
  font-size: 80%;
}

/* =========================================================
   Domein-Direct productoverzicht - WHMCS Standard Cart
   ========================================================= */


/* =========================================================
   Header
   ========================================================= */

#order-standard_cart .dd-store-header {
    margin-bottom: 30px;
}

#order-standard_cart .dd-store-header h1 {
    margin-bottom: 8px;
    font-weight: 700;
    color: #1f2937;
}

#order-standard_cart .dd-store-header p {
    margin: 0;
    color: #667085;
    font-size: 16px;
    line-height: 1.6;
}


/* =========================================================
   Product grid
   ========================================================= */

#order-standard_cart .dd-products {
    margin-top: 10px;
}

#order-standard_cart .dd-products > .row {
    display: flex;
    flex-wrap: wrap;
}

#order-standard_cart .dd-product-column {
    display: flex;
    margin-bottom: 24px;
}


/* =========================================================
   Productkaart
   ========================================================= */

#order-standard_cart .dd-product-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100%;
    background: #ffffff;
    border: 1px solid #e4e7ec;
    border-radius: 12px;
    overflow: hidden;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

#order-standard_cart .dd-product-card:hover {
    border-color: #cbd5e1;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
    transform: translateY(-2px);
}


/* =========================================================
   Inhoud productkaart
   ========================================================= */

#order-standard_cart .dd-product-content {
    flex: 1;
    padding: 28px 28px 20px;
}


/* =========================================================
   Product header
   ========================================================= */

#order-standard_cart .dd-product-header {
    margin-bottom: 20px;
}

#order-standard_cart .dd-product-header h2 {
    margin: 0;
    padding: 0;
    color: #1f2937;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
}

#order-standard_cart .dd-stock {
    display: inline-block;
    margin-top: 8px;
    color: #667085;
    font-size: 12px;
}


/* =========================================================
   Productomschrijving
   ========================================================= */

#order-standard_cart .dd-product-description {
    color: #475467;
}

#order-standard_cart .dd-intro {
    margin: 0;
    padding: 0;
    color: #667085;
    font-size: 14px;
    line-height: 1.5;
}

#order-standard_cart .dd-intro p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   Features
   ========================================================= */

#order-standard_cart .dd-features {
    list-style: none;
    padding: 0;
    margin: 18px 0 0;
}

#order-standard_cart .dd-features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 10px;
    padding: 0;
    color: #344054;
    font-size: 14px;
    line-height: 1.5;
}

#order-standard_cart .dd-features li:last-child {
    margin-bottom: 0;
}

#order-standard_cart .dd-feature-text {
    flex: 1;
}

#order-standard_cart .dd-feature-text strong {
    color: #1f2937;
    font-weight: 600;
}


/* =========================================================
   Groen vinkje
   ========================================================= */

#order-standard_cart .dd-check {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    border-radius: 50%;
    background: #eaf7ef;
    color: #198754;
    font-size: 10px;
}

#order-standard_cart .dd-check i {
    margin: 0;
}


/* =========================================================
   Footer productkaart
   ========================================================= */

#order-standard_cart .dd-product-footer {
    padding: 20px 26px 26px;
    border-top: 1px solid #eef1f4;
    background: #fafbfc;
}


/* =========================================================
   Prijsblok
   ========================================================= */

#order-standard_cart .dd-price-block {
    margin-bottom: 18px;
}

#order-standard_cart .dd-starting-from {
    margin-bottom: 4px;
    color: #667085;
    font-size: 13px;
}


/* =========================================================
   Grote omgerekende maandprijs
   ========================================================= */

#order-standard_cart .dd-month-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 5px;
}

#order-standard_cart .dd-calculated-price,
#order-standard_cart .dd-price-main {
    color: #202b3c;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.1;
}

#order-standard_cart .dd-per-month {
    color: #667085;
    font-size: 14px;
    font-weight: 500;
}


/* =========================================================
   Werkelijke betaling / facturatie
   ========================================================= */

#order-standard_cart .dd-billing-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px;
    color: #667085;
    font-size: 13px;
    line-height: 1.5;
}

#order-standard_cart .dd-original-price {
    color: #344054;
    font-weight: 600;
}

#order-standard_cart .dd-billing-cycle {
    color: #667085;
}

#order-standard_cart .dd-billing-separator {
    margin: 0 2px;
    color: #98a2b3;
}

#order-standard_cart .dd-billing-note {
    color: #667085;
}


/* =========================================================
   Bundle prijs
   ========================================================= */

#order-standard_cart .dd-price-note {
    margin-top: 4px;
    color: #667085;
    font-size: 13px;
    line-height: 1.5;
}


/* =========================================================
   Setup fee
   ========================================================= */

#order-standard_cart .dd-setup-fee {
    margin-top: 6px;
    color: #667085;
    font-size: 12px;
    line-height: 1.5;
}


/* =========================================================
   Bestelknop
   ========================================================= */

#order-standard_cart .dd-order-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    padding: 11px 18px;
    border: 1px solid #198754;
    border-radius: 7px;
    background: #198754;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    box-shadow: none;
    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

#order-standard_cart .dd-order-button:hover,
#order-standard_cart .dd-order-button:focus,
#order-standard_cart .dd-order-button:active {
    background: #157347;
    border-color: #157347;
    color: #ffffff;
    text-decoration: none;
    box-shadow: none;
}

#order-standard_cart .dd-order-button i {
    font-size: 12px;
}


/* =========================================================
   Standaard Standard Cart CSS neutraliseren
   ========================================================= */

#order-standard_cart .dd-product-card header {
    background: transparent;
    border: 0;
}

#order-standard_cart .dd-product-card footer {
    height: auto;
}

#order-standard_cart .dd-product-card .dd-product-description {
    height: auto;
}

#order-standard_cart .dd-product-card ul {
    margin-bottom: 0;
}


/* =========================================================
   Tablet
   ========================================================= */

@media (max-width: 991px) {

    #order-standard_cart .dd-product-content {
        padding: 24px 22px 18px;
    }

    #order-standard_cart .dd-product-footer {
        padding: 20px 22px 24px;
    }

    #order-standard_cart .dd-calculated-price,
    #order-standard_cart .dd-price-main {
        font-size: 29px;
    }

}


/* =========================================================
   Mobiel
   ========================================================= */

@media (max-width: 767px) {

    #order-standard_cart .dd-store-header {
        margin-bottom: 22px;
    }

    #order-standard_cart .dd-store-header h1 {
        font-size: 28px;
        line-height: 1.25;
    }

    #order-standard_cart .dd-store-header p {
        font-size: 15px;
    }

    #order-standard_cart .dd-products > .row {
        display: block;
    }

    #order-standard_cart .dd-product-column {
        display: block;
        width: 100%;
        margin-bottom: 20px;
    }

    #order-standard_cart .dd-product-card {
        min-height: 0;
    }

    #order-standard_cart .dd-product-content {
        padding: 22px 20px 16px;
    }

    #order-standard_cart .dd-product-footer {
        padding: 19px 20px 20px;
    }

    #order-standard_cart .dd-product-header {
        margin-bottom: 16px;
    }

    #order-standard_cart .dd-product-header h2 {
        font-size: 21px;
    }

    #order-standard_cart .dd-calculated-price,
    #order-standard_cart .dd-price-main {
        font-size: 28px;
    }

    #order-standard_cart .dd-order-button {
        min-height: 46px;
    }

}


/* =========================================================
   Kleine mobiele schermen
   ========================================================= */

@media (max-width: 480px) {

    #order-standard_cart .dd-product-content {
        padding: 20px 18px 15px;
    }

    #order-standard_cart .dd-product-footer {
        padding: 18px;
    }

    #order-standard_cart .dd-calculated-price,
    #order-standard_cart .dd-price-main {
        font-size: 26px;
    }

    #order-standard_cart .dd-month-price {
        gap: 6px;
    }

    #order-standard_cart .dd-features li {
        font-size: 13px;
    }

}