/* =============================================================
   Standalone-styling: laadt ALLEEN op thema's die niet het
   ONE/SBVO-thema zijn (bv. Bax op Hello Elementor). Levert de
   containerbreedte, verticale ruimte en basis-typografie die
   zulke thema's niet zelf om de WooCommerce-content zetten.
   Op ONE laadt dit bestand niet en verandert er dus niets.
   ============================================================= */

/* Productpagina's (wizard + Code 95-kiezer) */
.o_bf-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 48px 20px 72px;
    box-sizing: border-box;
}
.o_bf-page *,
.o_bf-page *::before,
.o_bf-page *::after {
    box-sizing: border-box;
}

/* Titel en intro (themaklassen die hier geen styling hebben) */
.o_bf-page .column-title {
    font-size: 30px;
    line-height: 1.25;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--bf-donker, #212121);
    margin: 0 0 14px;
}
.o_bf-page .o_wc-leadtext {
    font-size: 16px;
    line-height: 1.65;
    color: #555;
    max-width: 760px;
    margin: 0 0 8px;
}
.o_bf-page .gap-40 { height: 40px; }
.o_bf-page .gap-20 { height: 20px; }

/* Checkout en bedanktpagina: eigen container als het thema die niet geeft */
.o_co,
.o_ty {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px 72px;
    box-sizing: border-box;
}
.o_co *, .o_co *::before, .o_co *::after,
.o_ty *, .o_ty *::before, .o_ty *::after {
    box-sizing: border-box;
}

/* Basis voor formuliervelden (WooCommerce-markup zonder themastyling) */
.o_co .input-text,
.o_co select,
.o_bf-page .input-text {
    width: 100%;
    height: 44px;
    padding: 0 12px;
    border: 2px solid #e8e8e8;
    border-radius: 5px;
    font-size: 14px;
    background: #fff;
}
.o_co textarea.input-text { height: auto; padding: 10px 12px; }
.o_co .input-text:focus,
.o_co select:focus {
    outline: none;
    border-color: var(--bf-primary, #ED6B06);
}
.o_co .form-row label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--bf-donker, #212121);
}
.o_co .form-row { margin-bottom: 14px; }
.o_co .required { color: #b32d2e; text-decoration: none; }

/* WooCommerce meldingen in de flow-stijl. WooCommerce zet zijn eigen
   icoon als ::before, absoluut gepositioneerd — de linkerpadding moet
   daar ruimte voor houden, anders loopt de tekst door het icoon heen. */
.o_bf-page .woocommerce-message,
.o_co .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce .woocommerce-message {
    position: relative;
    border: 2px solid var(--bf-primary, #ED6B06);
    border-radius: 5px;
    background: var(--bf-primary-tint, #fef8f3);
    padding: 16px 18px 16px 48px;
    margin-bottom: 20px;
    list-style: none;
    color: var(--bf-donker, #212121);
    font-size: 14px;
    line-height: 1.5;
}
.o_bf-page .woocommerce-message::before,
.o_co .woocommerce-message::before,
.woocommerce-notices-wrapper .woocommerce-message::before,
.woocommerce .woocommerce-message::before {
    color: var(--bf-primary, #ED6B06);
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
    margin: 0;
}
/* Knop in de melding (bv. "Bekijk winkelwagen") in de huisstijl */
.woocommerce-message .button.wc-forward,
.woocommerce-message .button.wc-forward:focus {
    float: right;
    order: 2;
    margin-left: 16px;
    padding: 8px 16px;
    background: var(--bf-primary, #ED6B06);
    border: 0;
    border-radius: 3px;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
}
.woocommerce-message .button.wc-forward:hover {
    background: var(--bf-primary-hover, #d45e05);
    color: #fff;
}
/* Fout- en infomeldingen: zelfde opbouw, eigen accentkleur */
.woocommerce .woocommerce-error,
.o_co .woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-error {
    position: relative;
    border: 2px solid #b32d2e;
    border-radius: 5px;
    background: #fdf3f3;
    padding: 16px 18px 16px 48px;
    margin-bottom: 20px;
    list-style: none;
    font-size: 14px;
    line-height: 1.5;
}
.woocommerce .woocommerce-error::before,
.o_co .woocommerce-error::before,
.woocommerce-notices-wrapper .woocommerce-error::before {
    color: #b32d2e;
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
    margin: 0;
}
.woocommerce .woocommerce-info,
.o_co .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-info {
    position: relative;
    border: 2px solid var(--bf-donker, #212121);
    border-radius: 5px;
    background: #f7f7f7;
    padding: 16px 18px 16px 48px;
    margin-bottom: 20px;
    list-style: none;
    font-size: 14px;
    line-height: 1.5;
}
.woocommerce .woocommerce-info::before,
.o_co .woocommerce-info::before,
.woocommerce-notices-wrapper .woocommerce-info::before {
    color: var(--bf-donker, #212121);
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
    margin: 0;
}

/* WooCommerce-breadcrumb: uitlijnen op de flow-container en ademruimte
   onder de (sticky) header; zonder dit plakt hij tegen de header aan. */
/* Dubbele selector: WooCommerce zelf stylet met `.woocommerce .woocommerce-breadcrumb`
   (o.a. padding:0); zonder gelijke specificiteit verliest deze regel. */
.woocommerce .woocommerce-breadcrumb,
.woocommerce-breadcrumb {
    max-width: 1200px;
    margin: 0 auto;
    padding: 44px 20px 0;
    box-sizing: border-box;
    font-size: 13px;
    line-height: 1.5;
    color: #999;
}
.woocommerce .woocommerce-breadcrumb a,
.woocommerce-breadcrumb a {
    color: #777;
    text-decoration: none;
}
.woocommerce .woocommerce-breadcrumb a:hover,
.woocommerce-breadcrumb a:hover {
    color: var(--bf-primary, #ED6B06);
}

/* Widget-afstand in de wizard-sidebar (themaklasse .widget bestaat niet overal) */
.o_wz-side .widget { margin-bottom: 20px; }
.o_wc-contact-widget img { max-width: 100%; height: auto; display: block; }

/* =============================================================
   Code 95-pagina: de template gebruikt het Bootstrap-grid van het
   ONE/SBVO-thema (.row / .col-xl-*). Op andere thema's bestaat dat
   grid niet en stapelt alles onder elkaar; hier een eigen grid,
   alleen voor deze template.
   ============================================================= */
.o_wc-product.o_c95 > .row {
    display: flex;
    flex-direction: column;
}
.o_wc-product.o_c95 .o_sidebar .widget { margin-bottom: 20px; }

/* Mobiel: samenvatting boven, dan de content, dan de overige widgets.
   display:contents tilt de widgets uit de kolom zodat ze los te ordenen
   zijn tussen de flex-items van de row. */
@media (max-width: 991px) {
    .o_wc-product.o_c95 > .row > .o_c95-kolom,
    .o_wc-product.o_c95 .o_c95-kolom-sticky { display: contents; }
    .o_wc-product.o_c95 .o_c95-kolom-sticky > .o_c95-summary-widget { order: 1; }
    .o_wc-product.o_c95 > .row > [class*="col-xl-8"] { order: 2; }
    .o_wc-product.o_c95 .o_c95-kolom-sticky > .widget:not(.o_c95-summary-widget) { order: 3; }
}

@media (min-width: 992px) {
    .o_wc-product.o_c95 > .row {
        display: grid;
        grid-template-columns: minmax(280px, 1fr) minmax(0, 2.6fr);
        gap: 0 36px;
    }
    /* Kolom rekt mee tot de volle hoogte (align stretch), zodat de sticky
       wrapper erin ruimte heeft om mee te schuiven zonder iets te overlappen. */
    .o_wc-product.o_c95 > .row > .o_c95-kolom { grid-column: 1; grid-row: 1; }
    .o_wc-product.o_c95 > .row > [class*="col-xl-8"] { grid-column: 2; grid-row: 1; }
    /* Bax-header is hoger dan de ONE-header: sticky-offset ruimer */
    .o_c95-kolom-sticky { top: 140px; max-height: calc(100vh - 160px); }
}

/* CTA-balk in de content: tekst links, knop rechts */
.o_wc-product .o_call-to-action .row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.o_wc-product .text-md-right { text-align: right; }

/* =============================================================
   Neutralisatie van generieke button-styling uit thema-resets.
   Hello Elementor's reset.css geeft ELKE <button> een roze rand,
   roze tekst en een roze hover/focus-achtergrond (#c36), plus
   eigen padding en fontgrootte. Onze kaarten en knoppen zijn
   <button>-elementen; hieronder zetten we per component de eigen
   stijl terug met hogere specificiteit, voor alle states.
   ============================================================= */

/* Keuzekaarten */
:is(.o_bf-page, .o_co, .o_ty) .o_wz-card,
:is(.o_bf-page, .o_co, .o_ty) .o_wz-card:focus {
    background-color: #fff;
    border: 2px solid #e8e8e8;
    border-radius: 5px;
    padding: 22px 18px 18px;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
}
:is(.o_bf-page, .o_co, .o_ty) .o_wz-card:hover {
    background-color: #fff;
    color: inherit;
    border-color: var(--bf-primary, #ED6B06);
}
:is(.o_bf-page, .o_co, .o_ty) :is(.o_wz-card--prominent, .o_wz-card--uitgelicht, .o_wz-card.is-gekozen),
:is(.o_bf-page, .o_co, .o_ty) :is(.o_wz-card--prominent, .o_wz-card--uitgelicht, .o_wz-card.is-gekozen):focus {
    border-color: var(--bf-primary, #ED6B06);
}
:is(.o_bf-page, .o_co, .o_ty) .o_wz-card.is-gekozen,
:is(.o_bf-page, .o_co, .o_ty) .o_wz-card.is-gekozen:hover,
:is(.o_bf-page, .o_co, .o_ty) .o_wz-card.is-gekozen:focus {
    background-color: var(--bf-primary-tint, #fef8f3);
}

/* Zij-optie (bv. proefles) */
:is(.o_bf-page, .o_co, .o_ty) .o_wz-zij,
:is(.o_bf-page, .o_co, .o_ty) .o_wz-zij:focus {
    background-color: #fff;
    border: 2px dashed var(--bf-primary, #ED6B06);
    border-radius: 5px;
    padding: 12px 16px;
    color: inherit;
    font-size: inherit;
}
:is(.o_bf-page, .o_co, .o_ty) .o_wz-zij:hover {
    background-color: var(--bf-primary-tint, #fef8f3);
    color: inherit;
}

/* Ja/nee-knoppen */
:is(.o_bf-page, .o_co, .o_ty) .o_wz-janee-btn,
:is(.o_bf-page, .o_co, .o_ty) .o_wz-janee-btn:focus {
    background-color: #fff;
    border: 2px solid #e8e8e8;
    border-radius: 5px;
    padding: 20px;
    color: inherit;
    font-size: 16px;
    font-weight: 700;
}
:is(.o_bf-page, .o_co, .o_ty) .o_wz-janee-btn:hover {
    background-color: #fff;
    color: inherit;
    border-color: var(--bf-primary, #ED6B06);
}
:is(.o_bf-page, .o_co, .o_ty) .o_wz-janee-btn.is-gekozen,
:is(.o_bf-page, .o_co, .o_ty) .o_wz-janee-btn.is-gekozen:hover,
:is(.o_bf-page, .o_co, .o_ty) .o_wz-janee-btn.is-gekozen:focus {
    background-color: var(--bf-primary-tint, #fef8f3);
    border-color: var(--bf-primary, #ED6B06);
    color: var(--bf-primary, #ED6B06);
}

/* Tekstuele knoppen (terug, in-company, modal sluiten) */
:is(.o_bf-page, .o_co, .o_ty) :is(.o_wz-terug, .o_dd-incompany, .o_wz-modal-sluit, .o_wz-modal-close),
.o_wz-modal :is(.o_wz-modal-sluit, .o_wz-modal-close),
.o_wz-modal :is(.o_wz-modal-sluit, .o_wz-modal-close):focus {
    background-color: transparent;
    border: 0;
    color: #777;
    padding: 0;
    font-size: 13px;
}
:is(.o_bf-page, .o_co, .o_ty) .o_wz-terug { padding: 4px 0; }
:is(.o_bf-page, .o_co, .o_ty) .o_dd-incompany { padding: 8px 0 0; }
.o_wz-modal .o_wz-modal-close { font-size: 16px; color: #999; }
.o_wz-modal .o_wz-modal-sluit { text-decoration: underline; }
:is(.o_bf-page, .o_co, .o_ty) :is(.o_wz-terug, .o_dd-incompany):hover {
    background-color: transparent;
    color: var(--bf-primary, #ED6B06);
}
.o_wz-modal :is(.o_wz-modal-sluit, .o_wz-modal-close):hover {
    background-color: transparent;
    color: #000;
}

/* Sessie-dropdown trigger */
:is(.o_bf-page, .o_co, .o_ty) .o_dd-trigger,
:is(.o_bf-page, .o_co, .o_ty) .o_dd-trigger:focus {
    background-color: #fff;
    border: 2px solid #e8e8e8;
    border-radius: 5px;
    padding: 0 14px;
    color: inherit;
    font-size: inherit;
}
:is(.o_bf-page, .o_co, .o_ty) .o_dd-trigger:hover,
:is(.o_bf-page, .o_co, .o_ty) .o_dd--open .o_dd-trigger {
    background-color: #fff;
    color: inherit;
    border-color: var(--bf-primary, #ED6B06);
}

/* Upsell-knop en deelnemer plus/min */
:is(.o_bf-page, .o_co, .o_ty) .o_upsell-cta,
:is(.o_bf-page, .o_co, .o_ty) .o_upsell-cta:focus {
    background-color: var(--bf-primary, #ED6B06);
    border: 0;
    border-radius: 3px;
    padding: 7px 12px;
    color: #fff;
    font-size: 11px;
}
:is(.o_bf-page, .o_co, .o_ty) .o_upsell-cta:hover {
    background-color: var(--bf-primary-hover, #d45e05);
    color: #fff;
}
:is(.o_bf-page, .o_co, .o_ty) .o_co-deelnemers-btn,
:is(.o_bf-page, .o_co, .o_ty) .o_co-deelnemers-btn:focus {
    background-color: #fafafa;
    border: 0;
    border-radius: 0;
    padding: 0;
    color: #555;
    font-size: 12px;
}
:is(.o_bf-page, .o_co, .o_ty) .o_co-deelnemers-btn:hover {
    background-color: #eee;
    color: var(--bf-primary, #ED6B06);
}

/* Code 95: alles-selecteren-knop */
.o_bf-page .o_c95-selector-all,
.o_bf-page .o_c95-selector-all:focus,
.o_bf-page .o_c95-selector-all:hover {
    background-color: var(--bf-primary, #ED6B06);
    border: 2px solid var(--bf-primary, #ED6B06);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 9px 18px;
}
.o_bf-page .o_c95-selector-all:hover {
    background-color: var(--bf-primary-hover, #d45e05);
    border-color: var(--bf-primary-hover, #d45e05);
}

/* Voucherknop op de checkout */
.o_co .o_co-voucher-veld button,
.o_co .o_co-voucher-veld button:focus {
    background-color: var(--bf-donker, #212121);
    border: 0;
    color: #fff;
}
.o_co .o_co-voucher-veld button:hover {
    background-color: var(--bf-primary, #ED6B06);
    color: #fff;
}

/* Oranje/merk-CTA's: focus-state expliciet (reset kleurt focus roze) */
:is(.o_bf-page, .o_co, .o_ty, .o_wz-modal) .o_header_btn_orange:focus {
    background-color: var(--bf-primary, #ED6B06);
    border-color: var(--bf-primary, #ED6B06);
    color: #fff;
}

/* =============================================================
   Typografie-borging: de Bax-Elementor-kit zet een breed custom
   font (SanukOT) en grotere maten op alle buttons en koppen.
   Binnen de flow-onderdelen houden we het paginafont en onze
   eigen maten, zodat teksten in de kaders blijven passen.
   ============================================================= */
:is(.o_bf-page, .o_co, .o_ty, .o_wz-modal, .o_ic-modal) button {
    font-family: inherit;
    /* De reset zet white-space:nowrap op alle buttons, waardoor kaartteksten
       uit de kaders lopen in plaats van af te breken. Browserstandaard terug. */
    white-space: normal;
}
:is(.o_bf-page, .o_co, .o_ty) :is(h1, h2, h3, h4, h5) {
    font-family: inherit;
}
.o_bf-page .o_wz-step-titel {
    font-size: 22px;
    line-height: 1.3;
}
.o_wz-modal .o_wz-modal-inner h3 {
    font-size: 20px;
    line-height: 1.3;
}