/**
 * IVA-huisstijl over de opmaak van de hoofdshop heen.
 *
 * De stylesheet van qualitymotors.nl (themes/classic/assets/css/custom.css)
 * bevat de hele indeling van de productpagina: de Sales Hub, de tabbladen, de
 * FAQ, de panelen. Die opmaak willen we op iva-dealer.nl hebben, maar dan in
 * rood en zwart in plaats van goud en crème.
 *
 * Dat kan zonder dat bestand aan te raken - en dat mag ook niet, want de
 * andere drie shops delen het. Alle kleuren daar staan namelijk in CSS-
 * variabelen op :root; alleen de twee definitieregels bevatten een hexcode.
 * Dit bestand definieert diezelfde variabelen opnieuw en laadt later, dus
 * neemt het de kleur over zonder een enkele selector na te bouwen.
 *
 * Werkt alleen als de stylesheet van de hoofdshop blijft staan: zet in de
 * module "Waar geldt dat" op "Alleen op de homepage".
 *
 * Gaat de hoofdshop ooit op de schop, dan verandert hooguit de kleur hier -
 * niet de indeling.
 *
 * @author    Quality Motors Wormer
 * @copyright Quality Motors Wormer
 * @license   MIT
 */

:root {
  /* --- Accent: goud wordt IVA-rood ------------------------------------ */
  --qm-gold: #e2001a;
  --qm-gold-dark: #b90015;
  --qm-gold-soft: #ff4d5e;
  --qm-luxe-gold: #e2001a;
  --qm-luxe-gold-light: #ff3b4d;
  --qm-luxe-gold-dark: #b90015;
  --qm-button-gold: #e2001a;
  --qm-button-gold-light: #ff3b4d;
  --qm-button-gold-dark: #b90015;
  --qm-tab-gold: #e2001a;
  --qm-tab-gold-light: #ff3b4d;
  --qm-v9-finance-accent: #b90015;

  /* --- Zwart en inkt: iets minder bruin dan het origineel -------------- */
  --qm-black: #0f0f0f;
  --qm-black-soft: #171717;
  --qm-ink: #1a1a1a;
  --qm-luxe-black: #0f0f0f;
  --qm-luxe-black-hover: #1c1c1c;
  --qm-luxe-text: #1a1a1a;
  --qm-button-black: #0f0f0f;
  --qm-button-charcoal: #1c1c1c;
  --qm-button-text: #1a1a1a;
  --qm-menu-ink: #1a1a1a;
  --qm-tab-black: #0f0f0f;
  --qm-tab-dark: #171717;
  --qm-v9-ink: #1a1a1a;
  --qm-v9-muted: #6b7075;

  /* --- Papier: crème wordt koel grijswit ------------------------------- */
  --qm-ivory: #f7f8f9;
  --qm-white: #ffffff;
  --qm-luxe-ivory: #f7f8f9;
  --qm-luxe-ivory-hover: #eef0f2;
  --qm-button-ivory: #f7f8f9;
  --qm-button-ivory-hover: #eef0f2;
  --qm-menu-paper: #f7f8f9;
  --qm-menu-paper-deep: #eef0f2;
  --qm-tab-cream: #f7f8f9;
  --qm-v9-paper: #f7f8f9;
  --qm-v9-paper-deep: #eef0f2;

  /* --- Lijnen en randen ------------------------------------------------ */
  --qm-line: rgba(226, 0, 26, .28);
  --qm-border: rgba(226, 0, 26, .24);
  --qm-luxe-border: #dfe3e6;
  --qm-button-border-light: #dfe3e6;
  --qm-tab-border: #dfe3e6;
  --qm-v9-line: #dfe3e6;
  --qm-v9-finance-line: #dfe3e6;

  /* --- Focusringen: dezelfde kleur als de rest van de shop ------------- */
  --qm-button-focus-ring: rgba(226, 0, 26, .55);
  --qm-cookie-focus: rgba(226, 0, 26, .55);
  --qm-soft-focus: rgba(226, 0, 26, .45);
  --qm-air-focus: rgba(226, 0, 26, .4);

  /* --- Verlopen -------------------------------------------------------- */
  --qm-button-primary-bg: linear-gradient(180deg, #1c1c1c 0%, #0f0f0f 100%);
  --qm-button-primary-hover-bg: linear-gradient(180deg, #2a2a2a 0%, #1c1c1c 100%);
  --qm-button-secondary-bg: linear-gradient(180deg, #ffffff 0%, #f7f8f9 100%);

  --qm-cookie-dark-bg: linear-gradient(180deg, #171717 0%, #0d0d0d 100%);
  --qm-cookie-dark-hover-bg: linear-gradient(180deg, #242424 0%, #171717 100%);
  --qm-cookie-dark-text: #f7f8f9;
  --qm-cookie-dark-border: rgba(226, 0, 26, .6);
  --qm-cookie-dark-border-hover: #e2001a;
  --qm-cookie-gold-bg: linear-gradient(180deg, #e2001a 0%, #b90015 100%);
  --qm-cookie-gold-hover-bg: #ff1f36;
  --qm-cookie-gold-text: #ffffff;

  /* De champagne- en zandtinten zouden naast rood vaal ogen; die worden
     neutraal grijs, zodat het rood het enige accent blijft. */
  --qm-soft-champagne-bg: linear-gradient(180deg, #eef0f2 0%, #e2e6e9 100%);
  --qm-soft-champagne-hover-bg: linear-gradient(180deg, #f4f6f7 0%, #e8ecef 100%);
  --qm-soft-champagne-text: #1a1a1a;
  --qm-soft-champagne-border: #cfd5da;
  --qm-soft-champagne-border-hover: #b9c1c8;

  --qm-soft-stone-bg: linear-gradient(180deg, #f7f8f9 0%, #eef0f2 100%);
  --qm-soft-stone-hover-bg: linear-gradient(180deg, #f2f4f5 0%, #e6eaed 100%);
  --qm-soft-stone-text: #3a3f44;
  --qm-soft-stone-border: #d5dade;

  --qm-soft-graphite-bg: linear-gradient(180deg, #3f4247 0%, #33363a 100%);
  --qm-soft-graphite-hover-bg: linear-gradient(180deg, #4a4d53 0%, #3c3f44 100%);
  --qm-soft-graphite-text: #f7f8f9;
  --qm-soft-graphite-border: #6f757c;
  --qm-soft-graphite-border-hover: #89909a;

  --qm-air-neutral-bg: linear-gradient(180deg, #f2f4f6 0%, #e6eaed 100%);
  --qm-air-neutral-hover-bg: linear-gradient(180deg, #eaeef1 0%, #dde2e6 100%);
  --qm-air-neutral-text: #3a3f44;
  --qm-air-neutral-border: #cfd5da;
  --qm-air-neutral-border-hover: #b9c1c8;

  --qm-air-primary-bg: linear-gradient(180deg, #e2001a 0%, #c50017 100%);
  --qm-air-primary-hover-bg: linear-gradient(180deg, #f01128 0%, #d3001a 100%);
  --qm-air-primary-text: #ffffff;
  --qm-air-primary-border: #b90015;
  --qm-air-primary-border-hover: #a30013;

  --qm-air-porcelain-bg: linear-gradient(180deg, #ffffff 0%, #f4f6f7 100%);
  --qm-air-porcelain-hover-bg: linear-gradient(180deg, #f7f8f9 0%, #eaeef1 100%);

  --qm-signature-bg: linear-gradient(105deg, #1f2226 0%, #16181b 54%, #1d2024 100%);
  --qm-signature-hover-bg: linear-gradient(105deg, #2a2e33 0%, #1f2226 100%);
  --qm-signature-text: #f7f8f9;
  --qm-signature-muted: #c8ced4;
  --qm-signature-line: rgba(226, 0, 26, .34);
  --qm-v9-finance-bg: linear-gradient(180deg, #ffffff 0%, #f2f4f6 100%);
}

/* De hoofdshop zet de header op zwart met een gouden rand. Op de dealerpagina
   is de header wit; die staat al zo in skin.css, dit dekt alleen wat de
   hoofdstijl er met !important overheen zou leggen. */
#header {
  background: #fff !important;
}

/* =========================================================
   HARDGECODEERD GOUD
   De hoofdstijl zet niet alles via variabelen; op deze plekken
   staat de goudtint letterlijk in de regel. Hieronder staan die
   plekken één voor één in het rood/grijs van IVA.
   ========================================================= */

/* Knoppen: de algemene primaire knop is in de hoofdstijl een
   goudverloop met !important. Ook de knop onder de footer-CTA
   valt hieronder. */
html body .btn-primary,
html body .carousel .btn,
html body .banner .btn,
html body .qm-btn {
  background: linear-gradient(180deg, #e2001a 0%, #c50017 100%) !important;
  border: 1px solid #b90015 !important;
  color: #fff !important;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .18);
}

html body .btn-primary:hover,
html body .carousel .btn:hover,
html body .banner .btn:hover,
html body .qm-btn:hover {
  background: linear-gradient(180deg, #f01128 0%, #d3001a 100%) !important;
  color: #fff !important;
}

/* Balk boven in de header: goudverloop op desktop, zwart met een
   gouden lijn op mobiel. Beide worden hier neutraal. */
@media (min-width: 768px) {
  html body #header .header-nav {
    background: #ffffff !important;
    border-top: 1px solid #e6e9ec !important;
    border-bottom: 1px solid #e0e4e8 !important;
    box-shadow: none !important;
  }
}

@media (max-width: 767.98px) {
  html body #header .header-nav {
    background: #ffffff !important;
    border-bottom: 1px solid #e0e4e8 !important;
    box-shadow: none !important;
  }
}

/* --- Productpagina: het tabbladenblok --- */

html body#product .tabs {
  --qm-tab-gold: #e2001a;
  --qm-tab-gold-light: #f01128;
  --qm-tab-black: #17181a;
  --qm-tab-dark: #23262a;
  --qm-tab-cream: #ffffff;
  --qm-tab-border: #e2e6ea;

  background: #ffffff !important;
  border: 1px solid #e2e6ea !important;
  box-shadow: 0 10px 28px rgba(20, 24, 28, .06), 0 2px 6px rgba(20, 24, 28, .04) !important;
}

html body#product .tabs > .nav-tabs .nav-link.active,
html body#product .tabs > .nav-tabs .nav-link.active:hover,
html body#product .tabs > .nav-tabs .nav-link.active:focus,
html body#product .tabs > .nav-tabs .nav-link.js-product-nav-active {
  color: #ffffff !important;
  background: linear-gradient(180deg, #e2001a 0%, #b90015 100%) !important;
  border-color: #b90015 !important;
}

/* --- Productpagina: de uitklapbare vragen (QM Producttabs) --- */

html body#product .qmpt-accordion-item {
  border-color: #e2e6ea !important;
}

html body#product .qmpt-accordion-item.qmpt-open {
  border-color: rgba(226, 0, 26, .45) !important;
}

html body#product .qmpt-accordion-header {
  color: #23262a !important;
  background: #ffffff !important;
}

html body#product .qmpt-accordion-item.qmpt-open .qmpt-accordion-header {
  color: #ffffff !important;
  background: linear-gradient(135deg, #1f2226 0%, #16181b 60%, #1d2024 100%) !important;
}

/* --- Productpagina: de accessoirekaarten --- */

html body#product .qmpt-accessory {
  background: #ffffff !important;
  border: 1px solid #e2e6ea !important;
}

html body#product .qmpt-accessory:hover {
  border-color: rgba(226, 0, 26, .45) !important;
}

html body#product .qmpt-accessory-image {
  background: #f4f6f8 !important;
}

/* --- Productpagina: het kaartje met prijs en bestelknop --- */

html body.page-product .product-information > .product-actions {
  border: 1px solid #e2e6ea !important;
  background: #ffffff !important;
  box-shadow: 0 14px 34px rgba(20, 24, 28, .07), 0 2px 6px rgba(20, 24, 28, .03) !important;
}

/* Houd het brede bestelblok altijd onder de echte foto- en miniatuurhoogte. */
@media (min-width: 992px) {
  html body.page-product .product-information > .product-actions {
    margin-top: var(--iva-product-actions-offset, 424px) !important;
  }
}

/* Een lege native melding krijgt via iva-v11120.js een status uit productdata. */
html body.page-product #product-availability[hidden] {
  display: none !important;
}

html body.page-product #product-availability.iva-product-availability--filled {
  display: flex !important;
  align-items: center;
  gap: .5rem;
  color: #2f6d34 !important;
  font-weight: 700;
}

html body.page-product #product-availability.iva-product-availability--pending {
  color: #3e4852 !important;
  background: #f4f6f8 !important;
  border-color: #d8dde2 !important;
}

html body.page-product #product-availability.iva-product-availability--out {
  color: #8c2632 !important;
  background: #fff2f3 !important;
  border-color: rgba(185, 0, 21, .2) !important;
}

html body.page-product .iva-stock-fallback {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

html body.page-product .iva-stock-fallback__icon {
  display: inline-flex;
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 1.15rem;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #ffffff;
  background: #438e49;
  font-size: .75rem;
  line-height: 1;
}

html body.page-product .iva-product-availability--pending .iva-stock-fallback__icon {
  background: #59636e;
}

html body.page-product .iva-product-availability--out .iva-stock-fallback__icon {
  background: #b90015;
}

/* --- Productpagina: de gouden knop van QM Product Sales Hub --- */

html body.page-product .qmpsh-btn--gold,
html body.page-product .qmpsh-mobile-bar .qmpsh-mobile-bar__buy {
  border-color: #b90015 !important;
}

html body.page-product .qmpsh-btn--gold:hover,
html body.page-product .qmpsh-btn--gold:focus,
html body.page-product .qmpsh-mobile-bar .qmpsh-mobile-bar__buy:hover,
html body.page-product .qmpsh-mobile-bar .qmpsh-mobile-bar__buy:focus {
  color: #ffffff !important;
  border-color: #e2001a !important;
}

/* --- Aantalbediening en WhatsApp: geen geërfd goud in product/pop-up/cart --- */

html body .quickview .bootstrap-touchspin .btn-touchspin,
html body.page-product .bootstrap-touchspin .btn-touchspin,
html body#product .bootstrap-touchspin .btn-touchspin,
html body.page-cart .bootstrap-touchspin .btn-touchspin,
html body#cart .bootstrap-touchspin .btn-touchspin {
  border-color: #cfd5da !important;
  background: #f3f5f6 !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #343a40 !important;
  text-shadow: none !important;
}

html body .quickview .bootstrap-touchspin .btn-touchspin:hover,
html body .quickview .bootstrap-touchspin .btn-touchspin:focus,
html body.page-product .bootstrap-touchspin .btn-touchspin:hover,
html body.page-product .bootstrap-touchspin .btn-touchspin:focus,
html body.page-cart .bootstrap-touchspin .btn-touchspin:hover,
html body.page-cart .bootstrap-touchspin .btn-touchspin:focus {
  border-color: #e2001a !important;
  background: #fff2f3 !important;
  color: #b90015 !important;
}

html body .iva-product-cta__whatsapp,
html body .quickview .iva-product-cta__whatsapp {
  border-color: #1f8b4c !important;
  background: #25d366 !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #06331a !important;
  text-shadow: none !important;
}

html body .iva-product-cta__whatsapp:hover,
html body .iva-product-cta__whatsapp:focus,
html body .quickview .iva-product-cta__whatsapp:hover,
html body .quickview .iva-product-cta__whatsapp:focus {
  border-color: #176c3b !important;
  background: #1fbd59 !important;
  color: #052a15 !important;
}

html body .iva-cta__secondary,
html body .iva-cta__secondary:hover,
html body .iva-cta__secondary:focus {
  background-image: none !important;
  box-shadow: none !important;
}

/* --- Nieuwsbriefblok in de footer --- */

html body #blockEmailSubscription_displayFooterBefore #block-newsletter-label::after {
  background: #e2001a !important;
}

html body #blockEmailSubscription_displayFooterBefore form .input-wrapper {
  border-color: #d5dade !important;
}

html body #blockEmailSubscription_displayFooterBefore form input[type="submit"] {
  color: #ffffff !important;
  background: linear-gradient(180deg, #e2001a 0%, #c50017 100%) !important;
  border-color: #b90015 !important;
}

/* --- Mobiel menu --- */

html body #mobile_top_menu_wrapper .top-menu > li > a,
html body .mobile-menu .top-menu > li > a,
html body #mobile_top_menu_wrapper .material-icons,
html body #mobile_top_menu_wrapper i,
html body .mobile-menu .material-icons,
html body .mobile-menu i,
html body #mobile_top_menu_wrapper .contact-rich strong,
html body #mobile_top_menu_wrapper .contact-link strong {
  color: #e2001a !important;
}

html body #mobile_top_menu_wrapper .top-menu > li > a:hover,
html body #mobile_top_menu_wrapper .top-menu > li.current > a,
html body #mobile_top_menu_wrapper .top-menu > li.open > a,
html body .mobile-menu .top-menu > li > a:hover,
html body #header #mobile_top_menu_wrapper ul.top-menu[data-depth="0"] > li.open > a,
html body #header #mobile_top_menu_wrapper ul.top-menu[data-depth="0"] > li.current > a {
  color: #ffffff !important;
}

/* --- Cookiebalk --- */

html body #qmcc-banner [data-qmcc-accept] {
  background: linear-gradient(180deg, #e2001a 0%, #c50017 100%) !important;
  border-color: #b90015 !important;
  color: #ffffff !important;
}

html body #qmcc-banner [data-qmcc-accept]:hover,
html body #qmcc-banner [data-qmcc-accept]:focus {
  background: #f01128 !important;
  border-color: #e2001a !important;
  color: #ffffff !important;
}

/* --- Tekstblok op de homepage (CMS) --- */

html body#index #custom-text .qm-info-card h2,
html body#index #custom-text .qm-info-item strong,
html body#index #custom-text .qm-trustbar strong,
html body#index #custom-text h1,
html body#index #custom-text h2,
html body#index #custom-text h3,
html body#index #custom-text h4,
html body#index #custom-text p strong {
  color: #e2001a !important;
}