/*
 Theme Name: Carbon Child
 Template: carbon
 */

/* ===============================
   Transporthoes.shop – UI tweaks
   =============================== */

/* Centrale themawaarden.
   --ths-text-dark is de tekstkleur voor alle donkere secties (footer,
   homepage-blokken, WooCommerce-/contact-/transporthoezenpagina's). Het
   parent-thema zet de basis-tekstkleur op #4a4a4a, wat onleesbaar donker is
   op onze #101012-achtergronden. Pas deze ene waarde aan om de leesbaarheid
   van alle donkere secties tegelijk te regelen. */
:root {
  --ths-text-dark: #ffffff;
}

/* Alle headings wit */
.vc_custom_heading h1,
.vc_custom_heading h2,
.vc_custom_heading h3 {
  color: var(--ths-text-dark);
}

/* Algemene "color-custom" knoppen – gevuld roze */
.vc_btn3.vc_btn3-color-custom {
  background-color: #ea028b !important;
  border-color: #ea028b !important;
  color: #ffffff !important;
}

/* Outline knoppen roze (algemeen) */
.vc_btn3.vc_btn3-style-outline-custom {
  border-color: #ea028b !important;
  color: #ea028b !important;
}

.vc_btn3.vc_btn3-style-outline-custom:hover {
  background-color: #ea028b !important;
  border-color: #ea028b !important;
  color: #ffffff !important;
}

/* Primaire hero-knop "Vraag offerte aan" – gevuld roze, witte tekst.
   Staat NA de outline-regel zodat de witte tekst wint (gelijke specificiteit),
   anders wordt roze tekst op een roze vlak onzichtbaar. */
.custom-button-class .vc_btn3 {
  background-color: #ea028b !important;
  border-color: #ea028b !important;
  color: #ffffff !important;
}

.custom-button-class .vc_btn3:hover {
  background-color: #c70275 !important;
  border-color: #c70275 !important;
  color: #ffffff !important;
}

/* FAQ toggles – iets rustiger */
.faq-toggle-dark .vc_toggle_title {
  padding: 12px 0;
}

.faq-toggle-dark .vc_toggle_content {
  margin-top: 10px;
}

/* FAQ toggles – use the theme's default heading font, drop the wide spacing */
.faq-toggle-dark .vc_toggle_title h3,
.faq-toggle-dark .vc_toggle_title .vc_custom_heading {
  font-family: 'Helvetica Neue', 'Arial', sans-serif !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}


/* ===============================
   Header / menu verfijning
   =============================== */

.site-header,
.header-wrapper,
.header-main,
.header-inner,
#masthead,
header {
  position: relative;
  z-index: 100;
}

/* Logo netjes centreren */
.site-branding,
.header-logo,
.logo-wrapper,
.navbar-brand {
  display: flex;
  align-items: center;
}

/* Navigatie netjes uitlijnen */
.main-navigation ul,
.primary-menu,
.menu,
.nav-menu,
#menu-main-menu,
#menu-hoofdmenu {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Menu links netjes uitlijnen */
.main-navigation a,
.primary-menu a,
.menu a,
.nav-menu a,
#menu-main-menu a,
#menu-hoofdmenu a {
  display: inline-flex;
  align-items: center;
  line-height: 1.2;
  text-decoration: none;
  padding: 10px 0;
}

/* Iconen mooi centreren */
.site-header .vc_btn3,
.site-header .header-button,
.site-header .cart-icon,
.site-header .search-icon,
.site-header .menu-item-cart,
.site-header .menu-item a i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


/* ===============================
   Levertijdbalk
   Helvetica styling
   =============================== */

.ths-leadtime-banner {
  width: 100%;
  background: #f5f1eb;
  color: #3b3128;
  text-align: center;
  padding: 10px 16px;
  border-top: 1px solid rgba(0,0,0,0.05);
  border-bottom: 1px solid rgba(0,0,0,0.08);
  box-sizing: border-box;
  position: relative;
  z-index: 20;
}

/* typografie strak en rustig */
.ths-leadtime-banner-inner {
  max-width: 1400px;
  margin: 0 auto;

  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;

  letter-spacing: 0;
  text-transform: none;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* ===============================
   spacing onder balk
   =============================== */

.ths-leadtime-banner + .site-content,
.ths-leadtime-banner + #content,
.ths-leadtime-banner + main {
  margin-top: 0;
}


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

@media (max-width: 991px) {

  .main-navigation ul,
  .primary-menu,
  .menu,
  .nav-menu,
  #menu-main-menu,
  #menu-hoofdmenu {
    gap: 16px;
  }

  .main-navigation a,
  .primary-menu a,
  .menu a,
  .nav-menu a,
  #menu-main-menu a,
  #menu-hoofdmenu a {
    padding: 8px 0;
    font-size: 14px;
  }

  .ths-leadtime-banner-inner {
    font-size: 13px;
  }

}

@media (max-width: 767px) {

  .ths-leadtime-banner {
    padding: 8px 12px;
  }

  .ths-leadtime-banner-inner {
    font-size: 12px;
    line-height: 1.35;
  }

}


/* ===============================
   WooCommerce – Verzending
   Radio + label verticaal centreren (cart & checkout)
   =============================== */

.woocommerce ul#shipping_method li,
.woocommerce-page ul#shipping_method li {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: 0;
  text-indent: 0;
}

.woocommerce ul#shipping_method li label,
.woocommerce-page ul#shipping_method li label {
  margin: 0;
}


/* ===============================
   Mini-cart prijs: leesbaar wit i.p.v. lichtgrijs (#f2f2f2 uit de parent)
   =============================== */
.carbon_minicart .cart_list_product_price,
.carbon_minicart .cart_list_product_price .woocommerce-Price-amount,
.carbon_minicart .cart_list_product_price .amount {
  color: var(--ths-text-dark);
}


/* ===============================
   Transporthoezen – categorie & producten
   Kaarten hergebruiken Carbon masonry-classes; productlijst gebruikt
   de bestaande WooCommerce-styling (carbon-woocommerce.css).
   =============================== */

.ths-transporthoezen .ths-cat-grid {
  margin-top: 10px;
}

.ths-cat-card {
  display: block;
  margin-bottom: 30px;
  text-align: center;
  background: #ffffff;
  border: 1px solid #eee;
  transition: box-shadow .2s ease, transform .2s ease;
}

.ths-cat-card:hover {
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.12);
  transform: translateY(-3px);
}

.ths-cat-card .featured-image {
  overflow: hidden;
}

.ths-cat-card .featured-image img {
  width: 100%;
  height: auto;
  display: block;
}

.ths-cat-card .padding-box-masonry {
  padding: 16px;
}

.ths-cat-card .the_title h2 {
  margin: 0 0 6px;
  font-size: 18px;
  line-height: 1.25;
}

.ths-cat-card .ths-cat-count {
  display: block;
  font-size: 13px;
  color: #888;
}

.ths-transporthoezen .ths-back-link {
  display: inline-block;
  margin-bottom: 18px;
  font-weight: 500;
}

.ths-transporthoezen .ths-cat-heading {
  margin: 0 0 10px;
}

.ths-transporthoezen .ths-cat-desc {
  margin-bottom: 24px;
  color: #666;
}


/* ===============================
   Homepage – populairste producten
   Full-bleed donkere sectie in de stijl van de overige homepage-secties.
   Het product-grid hergebruikt de WooCommerce-markup; we forceren een
   nette grid-layout (de Carbon float-layout dekt 5 kolommen niet).
   =============================== */

.ths-popular-products {
  position: relative;
  left: 50%;
  right: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
  background-color: #101012;
  padding: 5vw 15px;
  box-sizing: border-box;
}

.ths-popular-products .ths-popular-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.ths-popular-products .ths-popular-heading {
  color: var(--ths-text-dark);
  text-align: center;
  margin: 0 0 36px;
}

.ths-popular-products ul.products {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Carbon/WooCommerce clearfix + floats uitschakelen binnen het grid */
.ths-popular-products ul.products::before,
.ths-popular-products ul.products::after {
  content: none !important;
  display: none !important;
}

.ths-popular-products ul.products li.product {
  width: auto !important;
  float: none !important;
  clear: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Tekst leesbaar op donkere achtergrond (knoppen behouden themastijl) */
.ths-popular-products ul.products li.product,
.ths-popular-products ul.products li.product a,
.ths-popular-products ul.products li.product .price,
.ths-popular-products ul.products li.product .woocommerce-loop-product__title {
  color: var(--ths-text-dark);
}

@media (max-width: 991px) {
  .ths-popular-products ul.products {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 600px) {
  .ths-popular-products ul.products {
    grid-template-columns: repeat(2, 1fr);
  }

  .ths-popular-products .ths-popular-heading {
    margin-bottom: 24px;
  }
}


/* ===============================
   Footer – menu en contactgegevens op dezelfde rij
   De footer-inhoud is een Gutenberg "Media & Text"-blok, maar de grid-CSS van
   dat blok wordt op de front-end niet geladen (de inhoud loopt niet via
   do_blocks()). Daardoor stapelen de twee kolommen verticaal: menu bovenaan,
   contactgegevens eronder. We maken de wrapper zelf een tweekoloms-flexbox
   (zoals de child-thema nav ook flexbox gebruikt) zodat menu (links) en
   contactgegevens (rechts) op dezelfde rij staan. Contact blijft rechts
   uitgelijnd (inline text-align:right op de paragrafen). Gescoped onder de
   Carbon footer-namespace.
   =============================== */
#secondary_footer .footer_custom_text .wp-block-media-text {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
}

#secondary_footer .footer_custom_text .wp-block-media-text > ul,
#secondary_footer .footer_custom_text .wp-block-media-text__content {
  margin: 0;
}

/* Lege comment-paragrafen tussen de lijst en de content uit de flow halen */
#secondary_footer .footer_custom_text .wp-block-media-text > p {
  display: none;
}

/* Leeg media-figuur verbergen + eerste contactregel bovenaan uitlijnen */
#secondary_footer .footer_custom_text .wp-block-media-text__media {
  display: none;
}
#secondary_footer .footer_custom_text .wp-block-media-text__media + p {
  margin-top: 0;
}

/* Mobiel: kolommen onder elkaar */
@media (max-width: 767px) {
  #secondary_footer .footer_custom_text .wp-block-media-text {
    display: block;
  }
}

/* Footer-tekst leesbaar op de donkere achtergrond: centrale
   darkmode-tekstkleur (--ths-text-dark), net als de overige donkere secties. */
#secondary_footer .footer_custom_text,
#secondary_footer .footer_custom_text p,
#secondary_footer .footer_custom_text li,
#secondary_footer .footer_custom_text a {
  color: var(--ths-text-dark);
}


/* ===============================
   WooCommerce product- en categoriepagina's – donkere stijl
   De Carbon-content staat normaal in een wit paneel (master_container_bgwhite).
   Onze woocommerce.php geeft het paneel de class .ths-woo-dark, zodat alleen
   pagina's die via dat template renderen (single product + product-archieven)
   donker worden. Cart/checkout lopen via page.php en blijven dus wit.
   Donkere tint #101012 sluit aan bij de overige homepage-secties.
   =============================== */
.master_container.ths-woo-dark {
  position: relative;
  left: 50%;
  right: 50%;
  width: 100vw;
  margin: 0 -50vw;
  float: none;
  background-color: #101012;
  padding: 40px 0 80px;
  box-sizing: border-box;
}

/* Inhoud blijft via Carbons .container netjes gecentreerd */
.ths-woo-dark .page_content {
  background: transparent;
  border: 0;
}

/* Basistekst en koppen leesbaar op donker */
.ths-woo-dark,
.ths-woo-dark p,
.ths-woo-dark li,
.ths-woo-dark h1,
.ths-woo-dark h2,
.ths-woo-dark h3,
.ths-woo-dark h4,
.ths-woo-dark .product_title,
.ths-woo-dark .price,
.ths-woo-dark .price ins,
.ths-woo-dark .woocommerce-Price-amount,
.ths-woo-dark .woocommerce-product-details__short-description,
.ths-woo-dark .woocommerce-loop-product__title,
.ths-woo-dark .related.products > h2,
.ths-woo-dark .upsells.products > h2 {
  color: var(--ths-text-dark);
}

/* Doorgestreepte oude prijs iets gedempt */
.ths-woo-dark .price del,
.ths-woo-dark .price del .woocommerce-Price-amount {
  color: rgba(255, 255, 255, 0.55);
}

/* Links: wit, hover in de themaroze */
.ths-woo-dark a {
  color: var(--ths-text-dark);
}
.ths-woo-dark a:hover,
.ths-woo-dark a:focus {
  color: #ea028b;
}

/* Breadcrumb subtieler */
.ths-woo-dark .woocommerce-breadcrumb {
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 24px;
  font-size: 12px;
}
.ths-woo-dark .woocommerce-breadcrumb a {
  color: rgba(255, 255, 255, 0.6);
}

/* Tabs (Beschrijving / Extra informatie / Reviews) op donker */
.ths-woo-dark .woocommerce-tabs ul.tabs::before,
.ths-woo-dark .woocommerce-tabs ul.tabs li {
  border-color: rgba(255, 255, 255, 0.15);
}
.ths-woo-dark .woocommerce-tabs ul.tabs li {
  background: transparent;
}
.ths-woo-dark .woocommerce-tabs ul.tabs li.active {
  background: #1c1c1f;
}
.ths-woo-dark .woocommerce-tabs ul.tabs li a {
  color: rgba(255, 255, 255, 0.75);
}
.ths-woo-dark .woocommerce-tabs ul.tabs li.active a {
  color: var(--ths-text-dark);
}

/* De parent-WooCommerce-stijlen (.woocommerce div.product ...) en Bootstrap's
   witte .panel winnen op specificiteit; deze custom woocommerce.php rendert geen
   #content-wrapper, dus !important is de betrouwbaarste override op donker. */
.ths-woo-dark .woocommerce-tabs .panel,
.ths-woo-dark .woocommerce-tabs .woocommerce-Tabs-panel {
  background-color: #1c1c1f !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}
.ths-woo-dark .woocommerce-tabs ul.tabs li {
  background: transparent !important;
}
/* Hogere specificiteit dan de parent's '... li.active { background:#fff !important }'
   (carbon-woocommerce.css), daarom de volledige .woocommerce div.product keten. */
.ths-woo-dark .woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  background: #1c1c1f !important;
}
.ths-woo-dark .woocommerce-tabs ul.tabs li a {
  color: rgba(255, 255, 255, 0.75) !important;
  text-shadow: none !important;
}
.ths-woo-dark .woocommerce-tabs ul.tabs li.active a {
  color: var(--ths-text-dark) !important;
  text-shadow: none !important;
}
.ths-woo-dark .woocommerce-tabs ul.tabs li.active:before,
.ths-woo-dark .woocommerce-tabs ul.tabs li.active:after {
  box-shadow: 2px 2px 0 #1c1c1f !important;
}

/* Eigenschappen-tabel (Extra informatie) randen op donker */
.ths-woo-dark table.woocommerce-product-attributes th,
.ths-woo-dark table.woocommerce-product-attributes td,
.ths-woo-dark table.shop_attributes th,
.ths-woo-dark table.shop_attributes td {
  border-color: rgba(255, 255, 255, 0.15) !important;
  background: transparent !important;
  color: var(--ths-text-dark);
}

/* Gerelateerde producten: kaarten transparant met subtiele rand */
.ths-woo-dark ul.products li.product {
  background: transparent;
}

/* Hoeveelheid-invoer leesbaar houden (licht op donker) */
.ths-woo-dark .quantity input.qty {
  background: #ffffff;
  color: #101012;
  border-color: rgba(255, 255, 255, 0.2);
}

/* Op smallere schermen geen horizontale overflow door full-bleed */
@media (max-width: 991px) {
  .master_container.ths-woo-dark {
    padding: 24px 0 56px;
  }
}


/* ===============================
   Transporthoezen-pagina – donkere stijl
   De listingpagina (shortcode [ths_transporthoezen]) is een gewone Carbon
   "Multi Page Template"-pagina en rendert dus in Carbons lichte chrome
   (.fullwidth-container titelbalk + .master_container_bgwhite wit paneel).
   Die volgt niet via woocommerce.php, dus de .ths-woo-dark-stijl raakt 'm
   niet. We maken de hele pagina donker (#101012, gelijk aan de homepage-
   secties) gescoped op de body-class .ths-dark-page (gezet in functions.php
   via ths_th_body_class; core geeft geen stabiele slug-class voor pagina's),
   zodat niets naar andere pagina's lekt. Hogere specificiteit dan de
   parent-regels en de inline .fullwidth-container-stijl, dus geen !important
   nodig voor de achtergronden.
   =============================== */

/* Titelbalk donker + tekst leesbaar */
.ths-dark-page .fullwidth-container {
  background: #101012;
}
.ths-dark-page .pageTitle h1.page_title,
.ths-dark-page .pageTitle .secondaryTitle,
.ths-dark-page .carbon_breadcrumbs,
.ths-dark-page .carbon_breadcrumbs a {
  color: var(--ths-text-dark);
}

/* Inhoudspaneel donker */
.ths-dark-page .master_container.master_container_bgwhite {
  background-color: #101012;
  padding-bottom: 80px;
}

/* Basistekst, koppen en links leesbaar op donker */
.ths-dark-page,
.ths-dark-page p,
.ths-dark-page li,
.ths-dark-page h1,
.ths-dark-page h2,
.ths-dark-page h3,
.ths-dark-page h4 {
  color: var(--ths-text-dark);
}
.ths-dark-page a {
  color: var(--ths-text-dark);
}
.ths-dark-page a:hover,
.ths-dark-page a:focus {
  color: #ea028b;
}

/* Categoriekaarten als donkere panelen i.p.v. wit */
.ths-dark-page .ths-cat-card {
  background: #1c1c1f;
  border-color: rgba(255, 255, 255, 0.12);
}
.ths-dark-page .ths-cat-card:hover {
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45);
}
.ths-dark-page .ths-cat-card .the_title h2 {
  color: var(--ths-text-dark);
}
.ths-dark-page .ths-cat-card .ths-cat-count {
  color: rgba(255, 255, 255, 0.6);
}

/* Drill-down (niveau 2 & 3): terug-link, kop en beschrijving op donker */
.ths-dark-page .ths-transporthoezen .ths-back-link {
  color: var(--ths-text-dark);
}
.ths-dark-page .ths-transporthoezen .ths-back-link:hover,
.ths-dark-page .ths-transporthoezen .ths-back-link:focus {
  color: #ea028b;
}
.ths-dark-page .ths-transporthoezen .ths-cat-heading {
  color: var(--ths-text-dark);
}
.ths-dark-page .ths-transporthoezen .ths-cat-desc {
  color: rgba(255, 255, 255, 0.7);
}

/* Productgrid (niveau 3, WooCommerce [products]) leesbaar op donker.
   Knoppen behouden hun themastijl (roze leest goed op donker). */
.ths-dark-page ul.products li.product,
.ths-dark-page ul.products li.product a,
.ths-dark-page ul.products li.product .price,
.ths-dark-page ul.products li.product .woocommerce-loop-product__title {
  color: var(--ths-text-dark);
}
/* Productkaarten gelijk aan de categorie-kaarten (niveau 1 & 2): donker
   paneel met subtiele rand en hover-lift. De parent zet een vaste
   height:350px met hogere specificiteit (.woocommerce-page.woocommerce ...),
   dus die overrulen we via de .woocommerce-wrapper-keten (gelijke
   specificiteit, child laadt later) zodat het paneel de volledige inhoud
   omsluit. */
.ths-dark-page .woocommerce ul.products li.product {
  background: #1c1c1f;
  border: 1px solid rgba(255, 255, 255, 0.12);
  height: auto;
  padding: 0 0 18px;
  box-sizing: border-box;
  transition: box-shadow .2s ease, transform .2s ease;
}
.ths-dark-page .woocommerce ul.products li.product:hover {
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45);
  transform: translateY(-3px);
}
/* Titel/prijs een nette binnenmarge geven nu de kaart een rand heeft */
.ths-dark-page ul.products li.product .woocommerce-loop-product__title,
.ths-dark-page ul.products li.product h3,
.ths-dark-page ul.products li.product .price {
  padding-left: 12px;
  padding-right: 12px;
}
.ths-dark-page ul.products li.product a:hover .woocommerce-loop-product__title {
  color: #ea028b;
}

/* Sorteer-dropdown (STANDAARD SORTERING): donker i.p.v. het witte
   parent-design (#FAFAFA + sprite-pijl). Eigen SVG-caret in themaroze.
   Gelijke specificiteit als de parent-regel, child laadt later -> wint. */
.ths-dark-page .woocommerce-ordering select,
.ths-dark-page .woocommerce-page .woocommerce-ordering select {
  -webkit-appearance: none;
  appearance: none;
  background-color: #1c1c1f;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23ea028b' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  border: 1px solid #4c4f5d;
  color: #f2f2f2;
  padding: 14px 40px 14px 16px;
}
/* De dropdown-opties krijgen OS-styling (witte achtergrond), dus tekst donker. */
.ths-dark-page .woocommerce-ordering select option {
  color: #101012;
}


/* ===============================
   Contact-pagina – donkere formulieren
   De twee Contact Form 7-formulieren (offerte in .th-offerte, contact in
   .th-contact) dragen geen .dark-class en vielen daardoor terug op de licht-
   thema velden van het parent-thema (witte #f9f9f9-inputs + witte select).
   We scopen de dark-styling op de sectie-classes .th-offerte / .th-contact
   (gegarandeerd uniek op deze pagina) en sluiten aan bij de bestaande
   .wpcf7 .dark-esthetiek van het parent-thema (transparant, #4c4f5d rand).
   Hogere specificiteit dan de parent-regels, dus meestal geen !important nodig.
   =============================== */

/* Tekstvelden, textarea en select – donker/transparant */
.th-offerte .wpcf7 input[type="text"],
.th-offerte .wpcf7 input[type="email"],
.th-offerte .wpcf7 input[type="tel"],
.th-offerte .wpcf7 textarea,
.th-offerte .wpcf7 select,
.th-contact .wpcf7 input[type="text"],
.th-contact .wpcf7 input[type="email"],
.th-contact .wpcf7 input[type="tel"],
.th-contact .wpcf7 textarea {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid #4c4f5d;
  color: #f2f2f2;
  border-radius: 3px;
}

/* Het parent-thema geeft alleen text/email een box-model (breedte, padding,
   marge); tel-velden niet. Daardoor bleef het Telefoon-veld smal en zonder
   padding. Geef tel dezelfde layout als de overige velden. */
.th-offerte .wpcf7 input[type="tel"],
.th-contact .wpcf7 input[type="tel"] {
  float: left;
  width: 100%;
  margin: 10px 0;
  padding: 10px 20px;
  box-sizing: border-box;
}

/* Focus – roze rand (parent forceert border met !important, dus hier ook) */
.th-offerte .wpcf7 input:focus:not([type="submit"]),
.th-offerte .wpcf7 textarea:focus,
.th-offerte .wpcf7 select:focus,
.th-contact .wpcf7 input:focus:not([type="submit"]),
.th-contact .wpcf7 textarea:focus {
  border-color: #ea028b !important;
  background: rgba(255, 255, 255, 0.07);
}

/* Select – eigen caret (parent gebruikt een sprite op witte bg) */
.th-offerte .wpcf7 select {
  -webkit-appearance: none;
  appearance: none;
  height: auto;
  padding: 12px 40px 12px 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23ea028b' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}
.th-offerte .wpcf7 select option {
  color: #101012; /* dropdown-lijst leesbaar (OS-styling, witte bg) */
}

/* Labels, checkbox-/acceptance-tekst en file-input lichter */
.th-offerte .wpcf7 label,
.th-offerte .wpcf7 .wpcf7-list-item-label,
.th-contact .wpcf7 label,
.th-contact .wpcf7 .wpcf7-list-item-label {
  color: rgba(255, 255, 255, 0.85);
}
.th-offerte .wpcf7 input[type="file"] {
  color: rgba(255, 255, 255, 0.7);
}

/* Placeholders lichtgrijs */
.th-offerte .wpcf7 ::placeholder,
.th-contact .wpcf7 ::placeholder {
  color: rgba(255, 255, 255, 0.45);
}

/* Verstuur-knop offerteformulier – roze primair */
.th-offerte .wpcf7-submit.th-submit {
  background: #ea028b;
  border: 1px solid #ea028b;
  color: #ffffff;
  padding: 12px 28px;
  border-radius: 3px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
}
.th-offerte .wpcf7-submit.th-submit:hover {
  background: #c70275;
  border-color: #c70275;
}

/* Verstuur-knop contactformulier – roze i.p.v. het grijze parent-design */
.th-contact .bt-contact a span input {
  background-color: #ea028b;
  border-color: #ea028b;
  color: #ffffff;
}
.th-contact .bt-contact a span input:hover {
  background-color: #c70275;
  border-color: #c70275;
}

/* Lopende tekst leesbaar op donker: de "Tip:"-regel, de "Direct contact"-
   gegevens en het "Snel geholpen"-zijpaneel stonden in donkergrijs. */
.th-offerte .wpb_text_column,
.th-offerte .wpb_text_column p,
.th-offerte .wpb_text_column li,
.th-contact .wpb_text_column,
.th-contact .wpb_text_column p,
.th-contact .wpb_text_column li,
.th-side-card .wpb_text_column,
.th-side-card .wpb_text_column p,
.th-side-card .wpb_text_column li {
  color: rgba(255, 255, 255, 0.8);
}

/* Checkboxes: het thema heeft geen eigen checkbox-stijl (native vinkjes, witte
   vakjes op donker). We bouwen een donker vakje met roze vink, passend bij de
   velden. appearance:none vervangt het OS-vinkje volledig. */
.th-offerte .wpcf7 input[type="checkbox"],
.th-contact .wpcf7 input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  margin: 0 8px 0 0;
  vertical-align: -4px;
  border: 1px solid #4c4f5d;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  position: relative;
}
.th-offerte .wpcf7 input[type="checkbox"]:checked,
.th-contact .wpcf7 input[type="checkbox"]:checked {
  background: #ea028b;
  border-color: #ea028b;
}
.th-offerte .wpcf7 input[type="checkbox"]:checked::after,
.th-contact .wpcf7 input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.th-offerte .wpcf7 input[type="checkbox"]:focus-visible,
.th-contact .wpcf7 input[type="checkbox"]:focus-visible {
  outline: 2px solid #ea028b;
  outline-offset: 2px;
}

/* File-upload: ook native. We stylen de keuzeknop (de "Geen bestand"-tekst
   ernaast is OS-gerenderd en niet te stylen, alleen de tekstkleur). */
.th-offerte .wpcf7 input[type="file"]::file-selector-button,
.th-contact .wpcf7 input[type="file"]::file-selector-button,
.th-offerte .wpcf7 input[type="file"]::-webkit-file-upload-button,
.th-contact .wpcf7 input[type="file"]::-webkit-file-upload-button {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid #4c4f5d;
  color: #f2f2f2;
  border-radius: 3px;
  padding: 8px 16px;
  margin-right: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.th-offerte .wpcf7 input[type="file"]::file-selector-button:hover,
.th-contact .wpcf7 input[type="file"]::file-selector-button:hover,
.th-offerte .wpcf7 input[type="file"]::-webkit-file-upload-button:hover,
.th-contact .wpcf7 input[type="file"]::-webkit-file-upload-button:hover {
  border-color: #ea028b;
  color: #ffffff;
}

/* Validatie: het parent-thema toont een lichte (#f9f9f9) absoluut-gepositioneerde
   tooltip die op donker lelijk oogt. Maak er een nette inline-melding van. */
.th-offerte .wpcf7-not-valid-tip,
.th-contact .wpcf7-not-valid-tip {
  position: static;
  display: block;
  margin-top: 6px;
  background-color: transparent !important;
  color: #ff7a8a !important;
  font-size: 12px !important;
  font-weight: 600;
}
.th-offerte .wpcf7-not-valid,
.th-contact .wpcf7-not-valid {
  border-color: #ff7a8a !important;
}

/* Samenvattende meldingsbalk (succes/fout) leesbaar op donker */
.th-offerte .wpcf7 .wpcf7-response-output,
.th-contact .wpcf7 .wpcf7-response-output {
  color: rgba(255, 255, 255, 0.85);
  border-color: #4c4f5d;
  border-radius: 3px;
  margin: 18px 0 0;
  padding: 12px 16px;
}