/**
 * SEM WooCommerce Connector — storefront styles for both funnels:
 * [semwoo_booking] (.semwoo-group) and [semwoo_open_workshops] (.semwoo-openws).
 *
 * DESIGN STANCE — deliberately unopinionated. The plugin supplies structure
 * (layout, the calendar grid, spacing, states) and INHERITS the theme's
 * typography and colour. Font, text colour and price colour all inherit; the
 * calendar/day tints are semantic (availability), not brand. The only brand
 * hook is --semwoo-accent (selected states + submit button); it defaults to a
 * neutral near-black so it never clashes with a theme. Give it your brand
 * colour to match the site — no plugin edits needed:
 *
 *   .semwoo-booking { --semwoo-accent: #c8102e; }
 *
 * (It can't default to currentColor: the submit button and selected chips set
 * their own text colour, so an accent of currentColor would resolve to the
 * contrast colour on those elements — white on white.)
 *
 * Everything is scoped under .semwoo-booking so the rules never leak into the
 * theme, and theme overrides of the variables always win (they load later).
 * Borders are translucent black so they read on light or dark backgrounds.
 */

.semwoo-booking {
    /* Accent — the one brand hook. Neutral by default; set it to your brand. */
    --semwoo-accent: #222;            /* selected states, submit button */
    --semwoo-accent-contrast: #fff;   /* text on the accent color */
    --semwoo-accent-glow: rgba(0, 0, 0, .12); /* selected-card halo */

    /* Text & price — inherit the theme so nothing is imposed */
    --semwoo-text: inherit;
    --semwoo-text-soft: inherit;
    --semwoo-text-muted: rgba(0, 0, 0, .55); /* captions / labels */
    --semwoo-price: inherit;
    --semwoo-warn: #a60;              /* semantic: "+n min" / not-yet-published */

    /* Borders — neutral, translucent (adapt to any background) */
    --semwoo-border: rgba(0, 0, 0, .14);
    --semwoo-border-soft: rgba(0, 0, 0, .08);
    --semwoo-box-border: rgba(0, 0, 0, .12); /* step / card outer frames */
    --semwoo-chip-border: rgba(0, 0, 0, .18);
    --semwoo-chip-bg: transparent;
    --semwoo-disabled: rgba(0, 0, 0, .35);
    /* Solid surface for elements that FLOAT over the page (popover, modal,
       summary card) and therefore can't be transparent. White suits light
       themes; dark themes should override this one variable. */
    --semwoo-surface: #fff;

    /* Calendar day states — semantic (availability), soft neutral tints */
    --semwoo-day-available: rgba(45, 140, 85, .14);
    --semwoo-day-available-border: rgba(45, 140, 85, .38);
    --semwoo-day-request: rgba(190, 150, 40, .16); /* "op aanvraag" */
    --semwoo-day-request-border: rgba(190, 150, 40, .40);
    --semwoo-day-unavailable: rgba(0, 0, 0, .05);

    /* Messages */
    --semwoo-error-bg: #fdecea;
    --semwoo-error-border: #f5c2c0;
    --semwoo-summary-bg: rgba(0, 0, 0, .03);
    --semwoo-summary-border: rgba(0, 0, 0, .10);

    /* Shape */
    --semwoo-radius-sm: 6px;
    --semwoo-radius: 8px;
    --semwoo-radius-lg: 12px;

    max-width: 880px;
    margin: 0 auto;
    font-family: inherit;
    /* Don't inherit an oversized theme body line-height into compact controls. */
    line-height: 1.5;
}

/* --- shared by both funnels ------------------------------------------------ */

.semwoo-booking .semwoo-error {
    background: var(--semwoo-error-bg);
    border: 1px solid var(--semwoo-error-border);
    padding: 12px 16px;
    border-radius: var(--semwoo-radius);
    margin-bottom: 16px;
}
.semwoo-booking .semwoo-slot {
    border: 1px solid var(--semwoo-chip-border);
    background: var(--semwoo-chip-bg);
    color: inherit;
    border-radius: var(--semwoo-radius);
    padding: 8px 14px;
    cursor: pointer;
}
.semwoo-booking .semwoo-slot.sel {
    background: var(--semwoo-accent);
    color: var(--semwoo-accent-contrast);
    border-color: var(--semwoo-accent);
}
.semwoo-booking .semwoo-submit {
    background: var(--semwoo-accent);
    color: var(--semwoo-accent-contrast);
    border: 0;
    padding: 12px 24px;
    border-radius: var(--semwoo-radius);
    font-size: 1em;
    cursor: pointer;
}
.semwoo-booking .semwoo-submit:disabled {
    background: var(--semwoo-disabled);
    cursor: not-allowed;
}
/* Wizard "Verder" button — steps without a natural completion signal
   (persons, extras) advance to the next step through this. */
.semwoo-booking .semwoo-step-continue {
    display: block;
    margin-top: 12px;
    background: var(--semwoo-accent);
    color: var(--semwoo-accent-contrast);
    border: 0;
    padding: 10px 20px;
    border-radius: var(--semwoo-radius);
    font-size: .95em;
    cursor: pointer;
}
.semwoo-booking .semwoo-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 280px;
}
.semwoo-booking .semwoo-field input,
.semwoo-booking .semwoo-field textarea {
    padding: 8px;
    border: 1px solid var(--semwoo-chip-border);
    border-radius: var(--semwoo-radius-sm);
    background: transparent;
    color: inherit;
    font: inherit;
}
.semwoo-booking .semwoo-month-label {
    font-weight: 600;
}

/* --- popup mode ([semwoo_booking display="popup"]) -------------------------- */

.semwoo-popup-open {
    background: var(--semwoo-accent);
    color: var(--semwoo-accent-contrast);
    border: 0;
    padding: 12px 24px;
    border-radius: var(--semwoo-radius);
    font-size: 1em;
    cursor: pointer;
}
.semwoo-popup-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: rgba(0, 0, 0, .55);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    padding: 32px 12px;
}
.semwoo-popup-overlay[hidden] { display: none; }
.semwoo-popup-dialog {
    position: relative;
    background: #fff;
    border-radius: var(--semwoo-radius-lg);
    width: 100%;
    max-width: 900px;
    padding: 24px;
    margin: auto 0;
}
.semwoo-popup-close {
    position: absolute;
    top: 12px;
    right: 12px;
    border: 0;
    background: transparent;
    font-size: 1.6em;
    line-height: 1;
    cursor: pointer;
    color: var(--semwoo-text-muted);
}
.semwoo-popup-close:hover { color: inherit; }
body.semwoo-noscroll { overflow: hidden; }

/* --- group funnel ([semwoo_booking]) ---------------------------------------- */

.semwoo-group .semwoo-step {
    border: 1px solid var(--semwoo-box-border);
    border-radius: var(--semwoo-radius-lg);
    padding: 16px;
    margin: 0 0 16px;
}
/* Progressive disclosure: a step that isn't reachable yet collapses to just
   its numbered legend (greyed). enable() flips the fieldset's disabled flag,
   which expands the step's content — no JS beyond the existing gating. */
.semwoo-group .semwoo-step:disabled { opacity: .45; padding-top: 4px; padding-bottom: 4px; }
.semwoo-group .semwoo-step:disabled > :not(legend) { display: none; }
.semwoo-group .semwoo-step:not(:disabled) > :not(legend) { animation: semwoo-step-open .25s ease; }
@keyframes semwoo-step-open {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .semwoo-group .semwoo-step:not(:disabled) > :not(legend) { animation: none; }
}
.semwoo-group .semwoo-step legend { font-weight: 700; padding: 0 6px; }
/* Auto-number the visible steps so a pinned-location page (step 1 hidden)
   still shows a funnel that starts at "1." */
.semwoo-group .semwoo-form { counter-reset: semwoo-step; }
.semwoo-group .semwoo-step:not([hidden]) { counter-increment: semwoo-step; }
.semwoo-group .semwoo-step[hidden] { counter-increment: none; }
.semwoo-group .semwoo-step legend::before { content: counter(semwoo-step) ". "; }
.semwoo-group .semwoo-locations { display: flex; flex-wrap: wrap; gap: 8px; }
.semwoo-group .semwoo-pinned-location { margin: -8px 0 16px; color: var(--semwoo-text-soft); font-size: .92em; }
.semwoo-group .semwoo-chip {
    border: 1px solid var(--semwoo-chip-border);
    border-radius: 20px;
    padding: 8px 14px;
    cursor: pointer;
}
.semwoo-group .semwoo-chip:has(input:checked) {
    background: var(--semwoo-accent);
    color: var(--semwoo-accent-contrast);
    border-color: var(--semwoo-accent);
}
.semwoo-group .semwoo-chip input { position: absolute; opacity: 0; }
.semwoo-group .semwoo-conceptbar { margin: 0 0 14px; }
.semwoo-group .semwoo-conceptbar[hidden] { display: none; }
.semwoo-group .semwoo-conceptbar-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.semwoo-group .semwoo-sort-field { display: flex; flex-direction: column; gap: 4px; font-size: .85em; color: var(--semwoo-text-soft); }
.semwoo-group .semwoo-sort { padding: 8px 10px; border: 1px solid var(--semwoo-chip-border); border-radius: var(--semwoo-radius); background: transparent; color: inherit; font-size: .95em; }
.semwoo-group .semwoo-readback { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.semwoo-group .semwoo-readchip {
    border: 1px solid var(--semwoo-chip-border);
    background: var(--semwoo-chip-bg);
    border-radius: 16px;
    padding: 5px 12px;
    font-size: .82em;
    color: inherit;
    cursor: pointer;
}
.semwoo-group .semwoo-readchip:hover { background: rgba(0, 0, 0, .05); border-color: var(--semwoo-disabled); }
.semwoo-group .semwoo-concepts { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.semwoo-group .semwoo-card {
    display: flex;
    gap: 10px;
    border: 1px solid var(--semwoo-border);
    border-radius: 10px;
    padding: 12px;
    cursor: pointer;
}
.semwoo-group .semwoo-card-img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--semwoo-radius); flex-shrink: 0; }
.semwoo-group .semwoo-gallery { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.semwoo-group .semwoo-gallery-img { width: 100%; max-width: 180px; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--semwoo-radius); }
.semwoo-group .semwoo-card:has(input:checked) {
    border-color: var(--semwoo-accent);
    box-shadow: 0 0 0 2px var(--semwoo-accent-glow);
}
.semwoo-group .semwoo-card-body { display: flex; flex-direction: column; gap: 4px; }
.semwoo-group .semwoo-card-title { font-weight: 600; }
.semwoo-group .semwoo-card-price { color: var(--semwoo-price); font-weight: 600; font-size: .95em; }
/* Teaser: clamp to 3 lines with an ellipsis instead of a hard mid-word cut. */
.semwoo-group .semwoo-card-desc {
    font-size: .9em;
    color: var(--semwoo-text-soft);
    opacity: .72;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.semwoo-group .semwoo-details { margin-top: 14px; border-top: 1px dashed var(--semwoo-border); padding-top: 12px; }
.semwoo-group .semwoo-details:empty { display: none; }
.semwoo-group .semwoo-details h4 { margin: 0 0 6px; }
.semwoo-group .semwoo-details-desc { white-space: pre-line; color: var(--semwoo-text); font-size: .92em; }
.semwoo-group .semwoo-details-price { font-weight: 600; color: var(--semwoo-price); }
.semwoo-group .semwoo-programs { margin-top: 10px; font-size: .92em; }
.semwoo-group .semwoo-program-table { width: 100%; border-collapse: collapse; margin-top: 6px; }
.semwoo-group .semwoo-program-table th {
    text-align: left;
    font-size: .8em;
    color: var(--semwoo-text-muted);
    font-weight: 600;
    padding: 2px 8px 2px 0;
    border-bottom: 1px solid var(--semwoo-border-soft);
}
.semwoo-group .semwoo-program-table td { padding: 3px 8px 3px 0; border-bottom: 1px solid var(--semwoo-border-soft); }
.semwoo-group .semwoo-program-name { font-weight: 500; }
.semwoo-group .semwoo-program-from,
.semwoo-group .semwoo-program-to,
.semwoo-group .semwoo-program-pers { color: var(--semwoo-text-muted); white-space: nowrap; }
.semwoo-group .semwoo-programs-note { color: var(--semwoo-text-muted); font-weight: 400; font-size: .9em; }
.semwoo-group .semwoo-option-time { color: var(--semwoo-warn); font-size: .85em; }
.semwoo-group .semwoo-optgroup { border: 1px solid var(--semwoo-border-soft); border-radius: var(--semwoo-radius); padding: 8px 12px; margin: 0 0 10px; }
.semwoo-group .semwoo-optgroup-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 1px solid var(--semwoo-border-soft);
    padding-bottom: 4px;
    margin-bottom: 6px;
}
.semwoo-group .semwoo-optgroup-name { font-weight: 600; }
.semwoo-group .semwoo-optgroup-time { color: var(--semwoo-text-muted); font-size: .85em; }
.semwoo-group .semwoo-inc-item { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; color: var(--semwoo-text-soft); font-size: .92em; }
.semwoo-group .semwoo-inc-name::before { content: "✓ "; color: var(--semwoo-price); }
.semwoo-group .semwoo-inc-price { color: var(--semwoo-price); white-space: nowrap; }
.semwoo-group .semwoo-field-wide { max-width: none; }
.semwoo-group .semwoo-cal { max-width: 360px; }
.semwoo-group .semwoo-cal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.semwoo-group .semwoo-cal-head button {
    border: 1px solid var(--semwoo-chip-border);
    background: transparent;
    color: inherit;
    border-radius: var(--semwoo-radius-sm);
    width: 30px;
    height: 30px;
    cursor: pointer;
}
.semwoo-group .semwoo-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.semwoo-group .semwoo-dow { font-size: .75em; color: var(--semwoo-text-muted); text-align: center; }
.semwoo-group .semwoo-day {
    border: 1px solid var(--semwoo-border);
    border-radius: var(--semwoo-radius-sm);
    padding: 6px 0;
    cursor: pointer;
    text-align: center;
    background: transparent;
    color: inherit;
}
.semwoo-group .semwoo-day.av { background: var(--semwoo-day-available); border-color: var(--semwoo-day-available-border); }
.semwoo-group .semwoo-day.uk { background: var(--semwoo-day-request); border-color: var(--semwoo-day-request-border); }
.semwoo-group .semwoo-day.na { background: var(--semwoo-day-unavailable); color: var(--semwoo-disabled); cursor: not-allowed; }
.semwoo-group .semwoo-day.sel { outline: 2px solid var(--semwoo-accent); }
.semwoo-group .semwoo-cal-legend { display: flex; align-items: center; gap: 6px; font-size: .8em; color: var(--semwoo-text-muted); margin-top: 8px; }
.semwoo-group .semwoo-day-demo { display: inline-block; width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--semwoo-border); }
.semwoo-group .semwoo-day-demo.av { background: var(--semwoo-day-available); }
.semwoo-group .semwoo-day-demo.uk { background: var(--semwoo-day-request); }
.semwoo-group .semwoo-day-demo.na { background: var(--semwoo-day-unavailable); }
.semwoo-group .semwoo-times { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; min-height: 20px; }
.semwoo-group .semwoo-option { display: flex; align-items: center; gap: 8px; padding: 6px 0; }
.semwoo-group .semwoo-option-price { color: var(--semwoo-price); font-size: .9em; }
/* ⓘ product-info popover ("Stel je arrangement samen" step) */
.semwoo-group .semwoo-info { position: relative; display: inline-block; margin-left: 6px; }
.semwoo-group .semwoo-info-btn {
    width: 18px;
    height: 18px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--semwoo-chip-border);
    background: var(--semwoo-chip-bg);
    color: var(--semwoo-text-soft);
    font-size: .75em;
    font-style: italic;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    vertical-align: text-bottom;
}
.semwoo-group .semwoo-info-btn:hover { border-color: var(--semwoo-accent); color: var(--semwoo-accent); }
.semwoo-group .semwoo-info-pop {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    width: max-content;
    max-width: 280px;
    background: var(--semwoo-surface);
    border: 1px solid var(--semwoo-border);
    border-radius: var(--semwoo-radius);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
    padding: 10px 12px;
    font-size: .85em;
    font-style: normal;
    font-weight: 400;
    color: var(--semwoo-text);
    white-space: pre-line;
    text-align: left;
}
.semwoo-group .semwoo-info-pop[hidden] { display: none; }
/* Programma-segment prose is longer (menu narratives) — wider popover. */
.semwoo-group .semwoo-info-wide .semwoo-info-pop { max-width: 360px; }
.semwoo-group .semwoo-included { font-size: .9em; color: var(--semwoo-text-soft); }
.semwoo-group .semwoo-summary { margin: 12px 0; }
.semwoo-group .semwoo-summary:empty { display: none; }
/* Summary card — the booking review (mirrors the SEM portal's order card). */
.semwoo-group .semwoo-sumcard {
    background: var(--semwoo-surface);
    border: 1px solid var(--semwoo-box-border);
    border-radius: var(--semwoo-radius-lg);
    padding: 18px 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
    max-width: 440px;
}
.semwoo-group .semwoo-sum-date {
    font-size: .95em;
    color: var(--semwoo-text-soft);
    padding-bottom: 12px;
    border-bottom: 1px solid var(--semwoo-border-soft);
}
.semwoo-group .semwoo-sum-head {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    border: 0;
    background: none;
    padding: 12px 0;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
}
.semwoo-group .semwoo-sum-chev {
    color: var(--semwoo-text-muted);
    line-height: 1.4;
    transition: transform .15s;
}
.semwoo-group .semwoo-sum-head.open .semwoo-sum-chev { transform: rotate(180deg); }
.semwoo-group .semwoo-sum-htext { display: flex; flex-direction: column; gap: 2px; }
.semwoo-group .semwoo-sum-title { font-weight: 700; font-size: 1.05em; }
.semwoo-group .semwoo-sum-sub { color: var(--semwoo-text-soft); font-size: .9em; }
.semwoo-group .semwoo-sum-items {
    padding: 0 0 10px 22px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.semwoo-group .semwoo-sum-items[hidden] { display: none; }
.semwoo-group .semwoo-sum-item {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: .92em;
    color: var(--semwoo-text);
}
.semwoo-group .semwoo-sum-item-name { color: var(--semwoo-text-soft); }
.semwoo-group .semwoo-sum-item-price { white-space: nowrap; }
.semwoo-group .semwoo-sum-totals {
    border-top: 1px solid var(--semwoo-border-soft);
    padding-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.semwoo-group .semwoo-sum-total {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-weight: 700;
    font-size: 1.05em;
}
.semwoo-group .semwoo-sum-btw {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: var(--semwoo-text-soft);
    font-size: .9em;
}

/* --- open workshops ([semwoo_open_workshops]) -------------------------------- */

.semwoo-openws .semwoo-ws-card {
    border: 1px solid var(--semwoo-box-border);
    border-radius: var(--semwoo-radius-lg);
    padding: 18px;
    margin-bottom: 18px;
}
.semwoo-openws .semwoo-ws-card h3 { margin: 0 0 4px; }
.semwoo-openws .semwoo-ws-price { color: var(--semwoo-price); margin-bottom: 8px; }
.semwoo-openws .semwoo-ws-desc { font-size: .92em; color: var(--semwoo-text); white-space: pre-line; margin: 0 0 10px; }
.semwoo-openws .semwoo-locfilter-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 240px;
    margin: 10px 0;
    font-size: .85em;
    color: var(--semwoo-text-soft);
}
.semwoo-openws .semwoo-locfilter { padding: 8px 10px; border: 1px solid var(--semwoo-chip-border); border-radius: var(--semwoo-radius); background: transparent; color: inherit; }
.semwoo-openws .semwoo-availability { border: 1px solid var(--semwoo-border-soft); border-radius: 10px; padding: 14px; margin: 12px 0; }
.semwoo-openws .semwoo-av-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.semwoo-openws .semwoo-month-nav { display: flex; align-items: center; gap: 10px; }
.semwoo-openws .semwoo-month-nav button {
    border: 1px solid var(--semwoo-chip-border);
    background: transparent;
    color: inherit;
    border-radius: var(--semwoo-radius-sm);
    width: 30px;
    height: 30px;
    cursor: pointer;
}
.semwoo-openws .semwoo-month-label { min-width: 130px; text-align: center; }
.semwoo-openws .semwoo-slots { display: flex; flex-wrap: wrap; gap: 8px; min-height: 36px; align-items: center; }
.semwoo-openws .semwoo-loc { flex-basis: 100%; font-weight: 700; margin-top: 6px; }
.semwoo-openws .semwoo-slot { padding: 8px 12px; font-size: .9em; }
/* Two-line slot: instance title (e.g. the Masterclass chef) above date/time. */
.semwoo-openws .semwoo-slot-2line { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; text-align: left; }
.semwoo-openws .semwoo-slot-title { font-weight: 600; }
.semwoo-openws .semwoo-slot-detail { font-size: .88em; opacity: .85; }
.semwoo-openws .semwoo-slot.sel .semwoo-slot-detail { opacity: 1; }
.semwoo-openws .semwoo-noskin { color: var(--semwoo-warn); }
.semwoo-openws .semwoo-field { max-width: 180px; margin: 10px 0; }
.semwoo-openws .semwoo-ws-head { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.semwoo-openws .semwoo-ws-img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--semwoo-radius); flex-shrink: 0; }
.semwoo-openws .semwoo-ws-headtext { min-width: 0; }
.semwoo-openws .semwoo-ws-headtext h3 { margin: 0 0 2px; }
.semwoo-openws .semwoo-ws-headtext .semwoo-ws-price { margin-bottom: 0; }