/*
 Theme Name:   Centrum voor Tantra
 Theme URI:    https://stichtingdeboogschutter.nl/brick
 Description:  Testpagina voor Bricks Builder.
 Author:       107 ideas
 Author URI:   https://107ideas.com
 Template:     bricks
 Version:      1.1
 Text Domain:  cvt
*/

*:focus {
  outline: none !important;
  box-shadow: none !important;
}

body {
	background: var(--neutral);
}

/* Ankerlinks (#faq, #groepen) niet onder de plakkende header laten landen.
   automatic.css doet [id] { scroll-margin-top: var(--offset, 0) }, maar
   --offset was nergens gezet en viel dus terug op 0. Samen met de negatieve
   marge hieronder verdween de sectiekop achter de header, wat eruitziet
   alsof de pagina te ver doorscrollt.

   Waarde: headerhoogte (109px) plus wat lucht. Staat --offset ooit in het
   ACSS-dashboard, dan wint die en kan dit blok weg. */
:root {
    --offset: 140px;
}

@media (max-width: 991px) {
    :root {
        --offset: 100px;
    }
}

#brx-content {
    margin-top: -109px;
}
.woocommerce-checkout #brx-content,
.woocommerce-cart #brx-content {
    padding-top: 210px;
    padding-bottom: 210px;
}
.brxe-button:hover {
    color: var(--neutral);
}
:where(img):not(header img), :where(figure:not(figure:has(img))) {
    border-radius: 0;
}
.brxe-filter-checkbox label {
    align-items: baseline;
}

.Vervolggroep .categorie.bricks-button {
    background-color: var(--accent) !important;
}
.Introductiegroep .categorie.bricks-button {
    background-color: var(--base) !important;
}
.Kennismaking .categorie.bricks-button {
    background-color: var(--primary) !important;
}



.Meditatie .categorie.bricks-button {
    background-color: var(--accent) !important;
}
.Podcast .categorie.bricks-button {
    background-color: var(--base) !important;
}
.Video .categorie.bricks-button {
    background-color: var(--primary) !important;
}

/* Placeholders */

::placeholder {
    color: var(--secondary);
    opacity: 1;
}
::-ms-input-placeholder {
    color: var(--secondary);
}
.bricks-choices__placeholder {
    opacity: 1;
    color: var(--secondary);
}
 .bricks-choices .bricks-choices__button {
    opacity: 1;
    color: var(--secondary);
}


.input, input:not([type=submit]), select, textarea {
    border: none;
}






.brxe-text h6 {
    font-family: "General Sans";
    font-size: 16px;
    color: var(--secondary);
    font-weight: 700;
}

/* header */

#brxe-vdixtw {
  pointer-events: none;
}

.home #brx-header svg :not([fill="none"]) {
    fill: var(--neutral);
}
.home #brx-header.scrolling svg :not([fill="none"]),
.home #brx-header svg.open :not([fill="none"]) {
    fill: var(--tertiary);
    transition: fill 0.5s;
}

.home #brx-header .bricks-nav-menu > li > a {
    color: var(--neutral);
}
.home #brx-header.scrolling .bricks-nav-menu > li > a {
    color: var(--tertiary);
}

.home #brx-header .bricks-mobile-menu-toggle {
    color: var(--neutral);
}
.home #brx-header.scrolling .bricks-mobile-menu-toggle {
    color: var(--tertiary);
}

.accordion-content-wrapper {
    max-height: 0;
    transition: max-height 0.3s ease-in-out;
}

.accordion-content-wrapper.is-open {
    transition: max-height 0.6s ease-in-out;
}

.accordion-content-wrapper[style*="display: block"],
.accordion-content-wrapper:not([style*="display: none"]) {
    max-height: 2000px;
}

/* Bundelkop toont geen bedrag: bij een groep-bundel staat de prijs op de
   bundled items eronder, dus het totaal van de kop zou dubbelop zijn.
   Uitzondering: het kalenderpakket krijgt dezelfde rijklasse voor de opmaak,
   maar draagt juist wél de volle prijs. Zie datumregel_row_class() in
   cvt-core/sync.php. */
tr.bundle_table_item:not(.cvt-kalender-blok) .product-total { display: none !important; }

.accordion-content-wrapper p:not(:last-child) {
    margin-bottom: 21px;
}


/* ═══════════════════════════════════════════════
   WOOCOMMERCE CHECKOUT — velden
   ───────────────────────────────────────────────
   Zelfde opmaak als de Bricksforge Pro Forms (o.a. de inlogpagina):
   label bóven het veld, pilvormige invoervelden met een gouden rand.

   Vervangt de eerdere floating labels. De klassen .field--has-value en
   .field--focused blijven door Bricks gezet worden, maar doen hier
   niets meer — dat is geen probleem.
═══════════════════════════════════════════════ */

form.checkout.woocommerce-checkout p.form-row {
  position: relative;
  padding-top: 0;
  margin-bottom: 20px;
}

/* Label boven het veld */
form.checkout.woocommerce-checkout p.form-row label:not(.checkbox):not(.screen-reader-text) {
  position: static;
  display: block;
  margin: 0 0 5px;
  padding: 0;
  font-family: "ABC Arizona Flair", serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 28px;
  letter-spacing: 0.4px;
  color: var(--text-color);
  pointer-events: auto;
  transform: none;
  transition: color 0.2s ease;
}


/* Kolomindeling, op veld-ID.
   Niet op .form-row-first/.form-row-last: WooCommerce's address-i18n-JS en
   Bricks herschrijven die klassen ná het laden en zetten er weer
   form-row-wide op. Een ID-selector wint daar altijd van.

   Rij 1: postcode | huisnummer | toevoeging   (de postcodechecker vult hierop)
   Rij 2: straat   | plaats                    (automatisch ingevuld)
   Rij 3: telefoon | e-mailadres               */

form.checkout.woocommerce-checkout #billing_postcode_field,
form.checkout.woocommerce-checkout #billing_street_name_field,
form.checkout.woocommerce-checkout #billing_phone_field {
  float: left;
  clear: both;
}

/* Samen 96%, niet 100%: zonder speling wrapt de laatste kolom zodra er een
   rand of afronding bijkomt. */
form.checkout.woocommerce-checkout #billing_postcode_field {
  width: 46%;
  margin-right: 2%;
}

form.checkout.woocommerce-checkout #billing_house_number_field {
  float: left;
  clear: none;
  width: 22%;
  margin-right: 2%;
}

form.checkout.woocommerce-checkout #billing_house_number_suffix_field {
  float: left;
  clear: none;
  width: 24%;
}

form.checkout.woocommerce-checkout #billing_street_name_field,
form.checkout.woocommerce-checkout #billing_phone_field {
  width: 49%;
}

form.checkout.woocommerce-checkout #billing_city_field,
form.checkout.woocommerce-checkout #billing_email_field {
  float: right;
  clear: none;
  width: 49%;
}

/* ═══════════════════════════════════════════════
   FOUTMELDINGEN
═══════════════════════════════════════════════ */

/* form.checkout is een grid van twee kolommen. WooCommerce zet het
   meldingenblok vooraan in het formulier, waardoor het als grid-item in de
   eerste kolom belandt en de indeling verschuift. Over beide kolommen zetten. */
form.checkout.woocommerce-checkout > .woocommerce-NoticeGroup {
  grid-column: 1 / -1;
  margin-bottom: 24px;
}

/* Ruimte tussen de invulvelden en de kolom met groepsinfo en betaling.
   Bricks zet hier standaard 15px; dat plakt te dicht op elkaar.
   Alleen horizontaal: de rijafstand blijft zoals hij was. */
form.checkout.woocommerce-checkout {
  column-gap: 64px;
}

@media (max-width: 991px) {
  /* Onder elkaar: dan is een horizontale afstand zinloos, maar wil je
     juist verticaal lucht tussen de twee blokken. */
  form.checkout.woocommerce-checkout {
    column-gap: 0;
    row-gap: 48px;
  }
}

form.checkout.woocommerce-checkout .woocommerce-error,
form.checkout.woocommerce-checkout .woocommerce-message,
form.checkout.woocommerce-checkout .woocommerce-info {
  font-family: "General Sans", sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

/* Foutmelding onder een afzonderlijk veld */
form.checkout.woocommerce-checkout .form-row .checkout-inline-error-message {
  display: block;
  margin: 6px 0 0;
  font-family: "General Sans", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--primary);
}

/* Rand van een veld dat is afgekeurd */
form.checkout.woocommerce-checkout .form-row.woocommerce-invalid .input-text,
form.checkout.woocommerce-checkout .form-row.woocommerce-invalid select {
  border-color: var(--primary);
}

/* De veldnaam in een foutmelding staat in <strong> en kreeg de goudkleur;
   binnen een foutmelding hoort alles dezelfde rode kleur te hebben. */
form.checkout.woocommerce-checkout .woocommerce-error strong,
form.checkout.woocommerce-checkout .woocommerce-error a,
form.checkout.woocommerce-checkout .checkout-inline-error-message strong,
form.checkout.woocommerce-checkout .checkout-inline-error-message a {
  color: inherit;
}


/* ═══════════════════════════════════════════════
   AANVINKVAKJES EN KEUZERONDJES
═══════════════════════════════════════════════ */

/* Nagebouwd naar de filtervakjes op /aanbod/ (Bricks .brx-input-indicator):
   16px, rand in --text-color, aangevinkt gevuld met --text-color en een
   vinkje in --neutral. Bricks verbergt daar het echte vakje en tekent een
   los element; WooCommerce heeft dat element niet, dus stylen we het native
   vakje rechtstreeks. Toetsenbediening en schermlezers blijven intact. */
body.woocommerce-checkout form.checkout input[type="checkbox"],
body.woocommerce-checkout form.checkout input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;

  /* Vastzetten met min én max: elders staat padding op invoervelden en een
     breedte op het keuzerondje, waardoor ze te groot en ovaal werden.
     box-sizing zorgt dat de rand binnen die 14px valt. */
  box-sizing: border-box;
  width: 14px;
  min-width: 14px;
  max-width: 14px;
  height: 14px;
  min-height: 14px;
  max-height: 14px;
  padding: 0;
  margin: 0 8px 0 0;

  flex-shrink: 0;
  place-content: center;
  vertical-align: middle;

  /* !important is hier nodig, niet luxe: WooCommerce zet display:inline op
     .input-checkbox en dat won ook van een ID-selector. Op een inline-element
     doen breedte en hoogte niets, waardoor het vakje tot een streepje inzakte. */
  display: inline-grid !important;
  border: 1px solid var(--text-color);
  background: transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

body.woocommerce-checkout form.checkout input[type="radio"] { border-radius: 50%; }

/* Het label van een betaalmethode is een blok van 25,2px hoog (18px tekst,
   regelhoogte 1,4). Het rondje van 14px begint op dezelfde bovenlijn en staat
   daardoor 5,6px te hoog: (25,2 − 14) / 2. */
body.woocommerce-checkout form.checkout ul.wc_payment_methods input[type="radio"] {
  margin-top: 5.6px;
}


/* ───────────────────────────────────────────────
   Voorwaarden-aanvinkvakje: opgebouwd op het LABEL

   Het native vakje laat zich hier niet stylen: Bricks laadt zijn CSS in
   @layer (frontend-layer.min.css), en daardoor verliest onze display-regel
   het — óók met !important en een ID-selector. Alle andere eigenschappen
   komen wél door, maar op een element met display:inline doen breedte en
   hoogte niets, dus zakte het vakje in tot een streepje.

   Daarom dezelfde aanpak als Bricks zelf op /aanbod/ gebruikt: het echte
   vakje onzichtbaar maken en het vakje op het label tekenen. Het blijft
   klikbaar en bereikbaar met het toetsenbord, want het is alleen
   doorzichtig — niet verborgen met display:none.
   ─────────────────────────────────────────────── */

body.woocommerce-checkout form.checkout .woocommerce-form__label-for-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  position: relative;
}

body.woocommerce-checkout form.checkout .woocommerce-form__label-for-checkbox input[type="checkbox"] {
  position: absolute;
  top: 4px;
  left: 0;
  width: 14px;
  height: 14px;
  margin: 0;
  opacity: 0;
}

body.woocommerce-checkout form.checkout .woocommerce-form__label-for-checkbox::before {
  content: "";
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin-top: 4px;
  border: 1px solid var(--text-color);
  border-radius: 3px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px 10px;
  transition: background-color 0.15s ease;
}

/* Het vinkje als achtergrond-SVG in --neutral (#F5F1E9). */
body.woocommerce-checkout form.checkout .woocommerce-form__label-for-checkbox:has(input:checked)::before {
  background-color: var(--text-color);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.3L4.7 9 10 3.2' fill='none' stroke='%23F5F1E9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

body.woocommerce-checkout form.checkout .woocommerce-form__label-for-checkbox:has(input:focus-visible)::before {
  outline: 2px solid var(--secondary);
  outline-offset: 2px;
}


/* Het bolletje van een keuzerondje blijft binnen de rand staan. */
body.woocommerce-checkout form.checkout input[type="radio"]::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--text-color);
  opacity: 0;
  transition: opacity 0.15s ease;
}

body.woocommerce-checkout form.checkout input[type="radio"]:checked::after {
  opacity: 1;
}

body.woocommerce-checkout form.checkout input[type="checkbox"]:focus-visible,
body.woocommerce-checkout form.checkout input[type="radio"]:focus-visible {
  outline: 2px solid var(--secondary);
  outline-offset: 2px;
}


/* ═══════════════════════════════════════════════
   BETAALMETHODEN
═══════════════════════════════════════════════ */

/* Gelijk aan het label van het voorwaarden-aanvinkvakje eronder:
   18px en niet vet, in plaats van 14px vetgedrukt. */
form.checkout.woocommerce-checkout .wc_payment_methods > li > label {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.4;
}


/* ═══════════════════════════════════════════════
   VOORWAARDEN-AANVINKVAKJE
═══════════════════════════════════════════════ */

.woocommerce-terms-and-conditions-checkbox-text,
.woocommerce-terms-and-conditions-checkbox-text a {
  font-weight: 400;
}

/* Bij een foutmelding alles rood, inclusief de links */
form.checkout.woocommerce-checkout .form-row.woocommerce-invalid .woocommerce-terms-and-conditions-checkbox-text a {
  color: inherit;
}


/* ═══════════════════════════════════════════════
   WAARDEBON
═══════════════════════════════════════════════ */

/* De link stond in het goud tegen de blauwe melding; laten meekleuren. */
.woocommerce-form-coupon-toggle .woocommerce-info a,
.woocommerce-form-coupon-toggle .showcoupon {
  color: inherit;
}


/* Uitleg onder een veld — klein, het is een bijschrift */
form.checkout.woocommerce-checkout p.form-row .description {
  display: block;
  margin-top: 6px;
  font-family: "General Sans", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--text-color);
}

/* Link in het goud van het palet, ook bij hover */
form.checkout.woocommerce-checkout p.form-row .description a,
form.checkout.woocommerce-checkout p.form-row .description a:hover,
form.checkout.woocommerce-checkout p.form-row .description a:focus {
  color: var(--secondary);
  text-decoration: none;
}


/* ═══════════════════════════════════════════════
   INPUTS & SELECTS
═══════════════════════════════════════════════ */

form.checkout.woocommerce-checkout .input-text,
.woocommerce-checkout .input-text,
.woocommerce-checkout select {
  background: #fff;
  border: 1px solid var(--secondary);
  border-radius: 50px;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 15px;
  font-family: "General Sans", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--text-color);
  transition: 0.2s ease;
}

form.checkout.woocommerce-checkout p.form-row .input-text {
  padding: 10px 15px !important;
  height: auto !important;
}

form.checkout.woocommerce-checkout .input-text:focus,
.woocommerce-checkout select:focus {
  outline: none;
  border-color: var(--text-color);
}

/* Vastgezette velden (zoals het emailadres) er niet uit laten zien als
   uitgeschakeld — de waarde klopt, hij is alleen niet te wijzigen. */
form.checkout.woocommerce-checkout .input-text[readonly],
.woocommerce-checkout .input-text[readonly] {
  background: #fff;
  color: var(--text-color);
  opacity: 1;
  cursor: default;
}

/* Textarea (opmerkingen): geen pilvorm, dat leest niet bij meerdere regels */
form.checkout.woocommerce-checkout p.form-row textarea.input-text {
  height: auto !important;
  min-height: 120px !important;
  padding: 12px 15px !important;
  border-radius: 20px;
  line-height: 24px;
}


/* ═══════════════════════════════════════════════
   SELECT2
═══════════════════════════════════════════════ */

form.checkout.woocommerce-checkout p.form-row .select2-container .select2-selection--single {
  height: auto !important;
  min-height: 46px;
  display: flex !important;
  align-items: center !important;
  padding: 10px 15px !important;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid var(--secondary);
  border-radius: 50px;
}

form.checkout.woocommerce-checkout p.form-row .select2-container .select2-selection__rendered {
  padding-left: 0 !important;
  font-family: "General Sans", sans-serif;
  font-size: 16px;
  line-height: 24px !important;
  color: var(--text-color);
}

form.checkout.woocommerce-checkout p.form-row .select2-container .select2-selection__arrow {
  top: 50% !important;
  right: 8px;
  transform: translateY(-50%);
}


/* De bestelknop staat verderop, onder PLACE ORDER BUTTON. */


/* ═══════════════════════════════════════════════
   CHECKOUT LAYOUT & MISC
═══════════════════════════════════════════════ */

.woocommerce-checkout #customer_details {
  background: none;
  padding: 0;
  border: none;
}

.woocommerce-checkout h3 {
  font-size: 1.2rem;
  font-weight: 600;
  border: none;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

.woocommerce-checkout .woocommerce-checkout-payment,
.woocommerce-checkout .woocommerce-checkout-review-order-table {
  border: none;
}

.woocommerce-checkout-review-order-table {
  width: 100%;
  border-collapse: collapse;
}

.woocommerce-checkout-review-order-table td,
.woocommerce-checkout-review-order-table th {
  padding: 12px;
  border-bottom: 1px solid #eee;
}

/* De laad-overlay (blockUI) wordt inline gezet vanuit cvt-core/sync.php:
   jQuery blockUI schrijft zijn kleur als inline style op het element, en
   LiteSpeed cachet dit bestand, waardoor een regel hier niet betrouwbaar
   aankomt. */

/* De styling van de totaalregel (label en bedrag in één cel) staat bewust niet
   hier maar inline in cvt-core/sync.php, naast de PHP die het label invoegt.
   Zo kunnen die twee niet uit elkaar lopen en heeft de LiteSpeed CSS-cache er
   geen invloed op. */


/* ═══════════════════════════════════════════════
   PLACE ORDER BUTTON
═══════════════════════════════════════════════ */

/* Gelijk aan .bricks-button op de Pro Forms; wel over de volle breedte,
   zoals een bestelknop hoort. */
#place_order {
  font-family: "General Sans", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 14px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--neutral);
  background: var(--secondary);
  border: none;
  border-radius: 100px;
  padding: 14px 30px;
  width: 100%;
  transition: all 0.2s ease;
}

#place_order:hover {
  background: var(--primary);
}


/* ═══════════════════════════════════════════════
   THANK YOU PAGE
═══════════════════════════════════════════════ */

.woocommerce-order-received .entry-content,
.woocommerce-thankyou {
  max-width: 720px;
  margin: 210px auto;
  padding: 0 20px;
}

.woocommerce-notice--success.woocommerce-thankyou-order-received {
  background: #f0faf4;
  border-left: 4px solid #2ecc71;
  color: #1a1a1a;
  padding: 16px 20px;
  border-radius: 6px;
  font-size: 1.1rem;
  font-weight: 500;
  margin-bottom: 30px;
}

.woocommerce-order-overview {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  list-style: none;
  padding: 24px;
  margin: 0 0 40px;
  background: #f9f9f9;
  border-radius: 8px;
}

.woocommerce-order-overview li {
  flex: 1 1 160px;
  font-size: 0.9rem;
  color: #666;
  border-right: 1px solid #eee;
  padding-right: 16px;
}

.woocommerce-order-overview li:last-child {
  border-right: none;
}

.woocommerce-order-overview li strong {
  display: block;
  font-size: 1rem;
  color: #1a1a1a;
  margin-top: 4px;
}

.woocommerce-order-details h2,
.woocommerce-customer-details h2 {
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 2px solid #000;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

.woocommerce-order-details .woocommerce-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 40px;
}

.woocommerce-order-details .woocommerce-table th {
  background: #f4f4f4;
  padding: 12px 16px;
  text-align: left;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #888;
}

.woocommerce-order-details .woocommerce-table td {
  padding: 14px 16px;
  border-bottom: 1px solid #eee;
  vertical-align: middle;
}

.woocommerce-order-details .woocommerce-table tfoot tr:last-child td,
.woocommerce-order-details .woocommerce-table tfoot tr:last-child th {
  font-weight: 700;
  font-size: 1.05rem;
  border-top: 2px solid #000;
}

.woocommerce-customer-details address {
  background: #f9f9f9;
  border-radius: 8px;
  padding: 20px 24px;
  font-style: normal;
  line-height: 1.8;
  font-size: 0.95rem;
}

.woocommerce-columns--2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

@media (max-width: 640px) {
  .woocommerce-columns--2 {
    grid-template-columns: 1fr;
  }

  .woocommerce-order-overview li {
    border-right: none;
    border-bottom: 1px solid #eee;
    padding-bottom: 12px;
  }
}


/* Deelnemerlijst frontend */

.deelnemers-lijst {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.deelnemer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.deelnemer-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.deelnemer-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.deelnemer-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.deelnemer-naam {
    font-weight: 600;
}

.deelnemer-geslacht {
    font-size: 0.85em;
    color: #666;
}