/*
 * ms-widget.css — Music Squad × Zooza widget overrides
 * Shared across all pages. Scoped to .zooza.
 */

:root {
    --brand:   #3F005C;
    --dark:    #2B0040;
    --black:   #111;
    --light:   #F7F2FA;
    --mid:     #e6dcee;
    --muted:   #6b6478;
}

/* ── GOTCHA: Zooza sets max-width:660px + margin:auto which causes a
   phantom white gap on the right after the widget loads. Fix: ── */
html, body {
    overflow-x: hidden !important;
    max-width: 100% !important;
}

/* ── Reset Zooza's own max-width + centering ── */
.zooza {
    max-width: none !important;
    width: 100% !important;
    padding: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

/* ── Font ── */
.zooza, .zooza * { font-family: 'Work Sans', Arial, sans-serif !important; }

/* ── Inputs ── */
.zooza input[type="text"],
.zooza input[type="email"],
.zooza input[type="tel"],
.zooza input[type="number"],
.zooza select,
.zooza textarea {
    border: 1.5px solid var(--mid) !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    background: white !important;
    transition: border-color .2s !important;
    outline: none !important;
    width: 100% !important;
}
/* GOTCHA: The generic padding above overrides Zooza's phone-flag padding.
   Restore left-pad for phone inputs so the country flag doesn't overlap text. */
.zooza .phone_input_wrap input[type="tel"] {
    padding-left: 36px !important;
}
.zooza input:focus,
.zooza select:focus,
.zooza textarea:focus { border-color: var(--brand) !important; box-shadow: 0 0 0 3px rgba(103,51,153,.12) !important; }

/* Date picker */
.zooza .zooza_date_picker { display: flex !important; gap: 8px !important; }
.zooza .zooza_date_picker select { width: auto !important; min-width: 76px !important; }

/* ── Labels ── */
.zooza label, .zooza legend {
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .1em !important;
    color: var(--muted) !important;
    display: block !important;
    margin-bottom: 5px !important;
}

/* ── Submit button ── */
.zooza button[type="submit"],
.zooza input[type="submit"] {
    display: block !important;
    width: 100% !important;
    padding: 16px !important;
    background: var(--brand) !important;
    color: white !important;
    border: 2px solid var(--brand) !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    margin-top: 12px !important;
    transition: background .15s !important;
}
.zooza button[type="submit"]:hover,
.zooza input[type="submit"]:hover { background: var(--dark) !important; border-color: var(--dark) !important; }

/* ── Person card ── */
.zooza .zooza_person {
    background: white !important;
    border: 1.5px solid var(--mid) !important;
    border-radius: 12px !important;
    padding: 24px !important;
    margin-bottom: 16px !important;
    box-shadow: 0 2px 10px rgba(103,51,153,.05) !important;
}
.zooza .zooza_person_footer {
    border-top: 1px solid var(--mid) !important;
    padding-top: 14px !important;
    margin-top: 14px !important;
}

/* ── Section headings ── */
.zooza h3 {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: var(--black) !important;
    margin: 0 0 18px !important;
    padding-bottom: 12px !important;
    border-bottom: 2px solid var(--mid) !important;
}

/* ── "Add another child/person" ── */
.zooza .zooza_add_person { margin: 8px 0 24px !important; }
.zooza .zooza_add_person a,
.zooza .zooza_add_person a.zooza_button {
    display: inline-block !important;
    background: transparent !important;
    background-color: transparent !important;
    color: var(--brand) !important;
    border: 2px solid var(--brand) !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    padding: 10px 20px !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: background .15s, color .15s !important;
}
.zooza .zooza_add_person a:hover { background: var(--brand) !important; color: white !important; }

/* ── Remove person ── */
.zooza .zooza_person_footer a.zooza_button {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--muted) !important;
    border: 1px solid var(--mid) !important;
    border-radius: 6px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    padding: 6px 14px !important;
    text-decoration: none !important;
}

/* ── Payment section ── */
.zooza .zooza_payment_options_sub_items {
    margin: 10px 0 0 0 !important;
    background: var(--light) !important;
    border-radius: 10px !important;
    padding: 16px 20px !important;
}

/* ── Checkboxes / radio ── */
.zooza input[type="checkbox"],
.zooza input[type="radio"] { accent-color: var(--brand) !important; width: auto !important; }

/* ── GOTCHA: the MAP widget renders under .zooza_map, NOT inside .zooza,
   so none of the .zooza-scoped rules above reach it. Style it separately. ── */
.zooza_map, .zooza_map * { font-family: 'Work Sans', Arial, sans-serif !important; }

/* Search controls (postcode / age / radius row) */
.zooza_map input[type="text"],
.zooza_map input[type="search"],
.zooza_map select {
    border: 1.5px solid var(--mid) !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    background: #fff !important;
    outline: none !important;
}
.zooza_map input:focus,
.zooza_map select:focus { border-color: var(--brand) !important; box-shadow: 0 0 0 3px rgba(103,51,153,.12) !important; }

/* Centre name heading (h2.zooza_location) */
.zooza_map .zooza_location,
.zooza_map h2.zooza_location {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: var(--brand) !important;
    margin: 18px 0 10px !important;
}

/* Result / schedule card */
.zooza_map .zooza_location_results_container,
.zooza_map .zooza_schedule_container {
    border: 1.5px solid var(--mid) !important;
    border-radius: 12px !important;
    background: #fff !important;
}
.zooza_map .zooza_schedule_list_item {
    border-bottom: 1px solid var(--mid) !important;
    padding: 8px 14px !important;
}

/* GOTCHA: map "Select" button is a.zooza_button inside .zooza_button_select,
   coloured by Zooza's own default (text #0074D9 on bg #7FDBFF). Override. */
.zooza_map .zooza_button_select a.zooza_button,
.zooza_map a.zooza_button {
    display: inline-block !important;
    background: var(--brand) !important;
    background-color: var(--brand) !important;
    color: #fff !important;
    border: 2px solid var(--brand) !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
    padding: 10px 22px !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: background .15s, border-color .15s !important;
}
.zooza_map .zooza_button_select a.zooza_button:hover,
.zooza_map a.zooza_button:hover { background: var(--dark) !important; border-color: var(--dark) !important; }

/* ── Map pins ── GOTCHA: the pin shape is drawn by .zooza_map_pin::before +
   ::after pseudo-elements (the widget's orange teardrop), NOT the element's own
   background — so styling .zooza_map_pin alone does nothing. Take over the pseudos:
   hide ::after, redraw ::before as a branded pin. ── */
.zooza_map_pin {
    position: relative !important;
    width: 24px !important; height: 30px !important;
    background: none !important; border: none !important; cursor: pointer !important;
}
.zooza_map_pin::after { content: none !important; display: none !important; background: none !important; }
.zooza_map_pin::before {
    content: '' !important; display: block !important; position: absolute !important;
    left: 50% !important; bottom: 2px !important; width: 20px !important; height: 20px !important;
    margin: 0 0 0 -10px !important; padding: 0 !important;
    background: var(--brand) !important; background-image: none !important;
    border: 3px solid #fff !important;
    border-radius: 50% 50% 50% 0 !important;
    transform: rotate(-45deg) !important; transform-origin: center bottom !important;
    box-shadow: 0 2px 5px rgba(0,0,0,.4) !important;
    box-sizing: border-box !important;
}

/* ── Map info window / popup bubble (rendered inside Google .gm-style-iw) ── */
.gm-style .gm-style-iw-c {
    border-radius: 12px !important;
    box-shadow: 0 8px 28px rgba(103,51,153,.20) !important;
    padding: 6px !important;
}
.gm-style .gm-style-iw-d { overflow: hidden !important; }
.zooza_map_bubble { font-family: 'Work Sans', Arial, sans-serif !important; padding: 6px 10px 8px !important; min-width: 160px !important; }
.zooza_map_bubble .info_window.title { margin: 0 0 4px !important; font-size: 15px !important; font-weight: 800 !important; color: var(--brand) !important; }
.zooza_map_bubble .info_window.adress { margin: 0 0 10px !important; font-size: 12.5px !important; color: var(--muted) !important; line-height: 1.4 !important; }
.zooza_map_bubble .info_window.link {
    display: inline-block !important; background: var(--brand) !important; color: #fff !important;
    text-decoration: none !important; font-weight: 800 !important; font-size: 12px !important;
    padding: 8px 16px !important; border-radius: 8px !important;
    text-transform: uppercase !important; letter-spacing: .04em !important;
}
.zooza_map_bubble .info_window.link:hover { background: var(--dark) !important; }
.zooza_map_bubble #zooza_map_navigate {
    display: inline-block !important; background: #fff !important; color: var(--brand) !important;
    border: 2px solid var(--brand) !important; border-radius: 8px !important;
    font-weight: 800 !important; font-size: 12px !important; padding: 7px 14px !important;
    margin-right: 8px !important; cursor: pointer !important;
}
.zooza_map_bubble #zooza_map_navigate:hover { background: var(--brand) !important; color: #fff !important; }

/* ── Parent Zone / profile dashboard ──
   GOTCHA: the profile widget uses TWO class systems inside .zooza —
   the dashboard (.z2_card, .z2_row, .z2_payment_cta …) and the course
   detail view (.zooza_button, .zooza_notice, .zooza_quick_navigation …).
   Style both. Everything below lives inside .zooza so it is reachable. ── */

/* Unified buttons — outline by default */
.zooza a.zooza_button,
.zooza .zooza_button {
    display: inline-block !important;
    background: #fff !important;
    color: var(--brand) !important;
    border: 2px solid var(--brand) !important;
    border-radius: 8px !important;
    padding: 9px 18px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: .03em !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: background .15s, color .15s !important;
}
.zooza a.zooza_button:hover,
.zooza .zooza_button:hover { background: var(--brand) !important; color: #fff !important; }

/* Primary CTA (Pay Now, Continue) — filled. Default Zooza colours are
   grey (#DDDDDD bg / #001F3F text) — override. */
.zooza .z2_payment_cta,
.zooza a.zooza_button.z2_payment_cta,
.zooza .zooza_button_primary {
    background: var(--brand) !important;
    color: #fff !important;
    border-color: var(--brand) !important;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
}
.zooza .z2_payment_cta:hover,
.zooza .zooza_button_primary:hover { background: var(--dark) !important; border-color: var(--dark) !important; color: #fff !important; }

/* Dashboard cards & sections */
.zooza .z2_card,
.zooza .zooza_course_dashboard,
.zooza .zooza_course_persons_wrapper,
.zooza .zooza_payment_status_information {
    border: 1.5px solid var(--mid) !important;
    border-radius: 12px !important;
    background: #fff !important;
    overflow: hidden !important;
    margin-bottom: 16px !important;
    box-shadow: 0 2px 10px rgba(103,51,153,.04) !important;
}
.zooza .z2_card_head {
    background: var(--light) !important;
    border-bottom: 1px solid var(--mid) !important;
    padding: 14px 18px !important;
    font-weight: 800 !important;
}
/* z2_dash_header is often empty — don't paint an empty grey strip; only style if it has content */
.zooza .z2_dash_header:not(:empty) { padding: 0 0 10px !important; font-weight: 800 !important; }
.zooza .z2_dash_header:empty { display: none !important; }
.zooza .z2_card_body { padding: 4px 18px !important; }
.zooza .z2_row,
.zooza .z2_payment_row {
    border-bottom: 1px solid var(--mid) !important;
    padding: 12px 0 !important;
}
.zooza .z2_row:last-child,
.zooza .z2_payment_row:last-child { border-bottom: none !important; }

/* Course tabs (Overview / Attendance / Detail / Payments) */
.zooza .zooza_quick_navigation {
    display: flex !important; flex-wrap: wrap !important; gap: 4px !important;
    list-style: none !important; padding: 0 !important; margin: 0 0 18px !important;
    border-bottom: 2px solid var(--mid) !important;
}
.zooza .zooza_quick_navigation li { margin: 0 !important; }
.zooza .zooza_quick_navigation a {
    display: inline-block !important;
    padding: 10px 16px !important;
    font-size: 13px !important; font-weight: 800 !important;
    color: var(--muted) !important; text-decoration: none !important;
    border-bottom: 3px solid transparent !important; margin-bottom: -2px !important;
}
.zooza .zooza_quick_navigation a:hover { color: var(--brand) !important; }
.zooza .zooza_quick_navigation .active a,
.zooza .zooza_quick_navigation a.active,
.zooza .zooza_quick_navigation .current a,
.zooza .zooza_quick_navigation li.active a { color: var(--brand) !important; border-bottom-color: var(--brand) !important; }

/* Notices — round + soften (default orange payment / bright green success) */
.zooza .zooza_notice,
.zooza .zooza_message,
.zooza .zooza_alert {
    border: none !important; border-radius: 10px !important; padding: 14px 18px !important;
}
.zooza .zooza_notice.payment_notice { background: #fff4e5 !important; color: #9a5b00 !important; }
.zooza .zooza_notice.success,
.zooza .zooza_notice_success,
.zooza .zooza_success,
.zooza .zooza_thank_you { background: #e7f6ea !important; color: #1b6b2c !important; }

/* Status pills (Outstanding / Will attend …) */
.zooza .z2_status,
.zooza .zooza_status,
.zooza .z2_tag {
    border-radius: 999px !important;
    font-size: 11px !important; font-weight: 800 !important;
    padding: 3px 10px !important; text-transform: uppercase !important; letter-spacing: .04em !important;
}

/* Mobile — de-cramp the dashboard, stack rows cleanly, no CTA overlap */
@media (max-width: 600px) {
    .zooza .zooza_quick_navigation { flex-wrap: nowrap !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
    .zooza .zooza_quick_navigation a { white-space: nowrap !important; padding: 10px 13px !important; }

    .zooza .z2_card { margin-bottom: 12px !important; }
    .zooza .z2_card_head { padding: 12px !important; }
    .zooza .z2_card_body { padding: 2px 12px !important; }

    /* shrink the attendee avatar so the text column gets room */
    .zooza .z2_row_attendees { flex: 0 0 auto !important; }
    .zooza .z2_row_attendees img,
    .zooza .z2_row_attendees > div { width: 34px !important; height: 34px !important; font-size: 12px !important; }

    /* rows: avatar + text on one line, the action button wraps full-width below (no overlap) */
    .zooza .z2_row,
    .zooza .z2_payment_row {
        display: flex !important; flex-wrap: wrap !important; align-items: center !important;
        gap: 6px 10px !important; padding: 12px 0 !important; position: relative !important;
    }
    .zooza .z2_row_main { flex: 1 1 0 !important; min-width: 0 !important; }
    .zooza .z2_row .zooza_button,
    .zooza .z2_payment_cta,
    .zooza .zooza_button_primary {
        position: static !important; float: none !important; box-sizing: border-box !important;
        width: 100% !important; margin: 8px 0 0 !important; text-align: center !important;
    }
}

/* ── Calendar / timetable widget ──
   GOTCHA: renders as .zooza_main.calendar, NOT inside .zooza — scope to .calendar.
   Needs full width + an explicit 7-col grid, and its own .zooza_hidden enforcement
   (the widget's base hidden state doesn't always reach a JS-mounted instance). ── */
.calendar { width: 100% !important; font-family: 'Work Sans', Arial, sans-serif !important; }
.calendar .zooza_hidden,
.calendar .zooza_hidden_permanent { display: none !important; }
.calendar .zooza_language_selector { display: none !important; }

/* GOTCHA: the widget floats .zooza_controls / .zooza_filter to the left so the
   week grid wraps beside them. Force a clean vertical flow: controls bar, then
   filter, then the week grid — each full width. */
.calendar .zooza_widget { display: block !important; }
.calendar .zooza_controls,
.calendar .zooza_filter,
.calendar .zooza_week { float: none !important; clear: both !important; width: 100% !important; }
.calendar .zooza_controls .zooza_prev_week,
.calendar .zooza_controls .zooza_this_week,
.calendar .zooza_controls .zooza_next_week { display: inline-flex !important; float: none !important; margin: 0 !important; }

/* Week navigation + filter toggle buttons */
.calendar .zooza_controls { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; align-items: center !important; margin-bottom: 14px !important; }
.calendar .zooza_controls a.zooza_button,
.calendar .zooza_toggle a.zooza_button {
    display: inline-block !important; background: #fff !important; color: var(--brand) !important;
    border: 2px solid var(--brand) !important; border-radius: 8px !important; padding: 8px 16px !important;
    font-size: 13px !important; font-weight: 800 !important; text-decoration: none !important; cursor: pointer !important;
}
.calendar .zooza_controls a.zooza_button:hover,
.calendar .zooza_toggle a.zooza_button:hover { background: var(--brand) !important; color: #fff !important; }

/* Filter row */
.calendar .zooza_filter { margin-bottom: 16px !important; }
.calendar .zooza_filters { display: flex !important; flex-wrap: wrap !important; gap: 14px !important; margin-top: 12px !important; }
.calendar .zooza_filters .zooza_form_input { min-width: 180px !important; flex: 0 0 auto !important; }
.calendar .zooza_filters label { font-size: 10px !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: .08em !important; color: var(--muted) !important; }
.calendar .zooza_filters select,
.calendar .zooza_filters input[type="text"] { border: 1.5px solid var(--mid) !important; border-radius: 8px !important; padding: 8px 12px !important; font-size: 14px !important; background: #fff !important; }

/* Week grid — 7 day columns */
.calendar .zooza_week { display: grid !important; grid-template-columns: repeat(7, minmax(0, 1fr)) !important; gap: 12px !important; }
.calendar .zooza_day { border: 1.5px solid var(--mid) !important; border-radius: 12px !important; background: #fff !important; overflow: hidden !important; min-width: 0 !important; }
.calendar .zooza_day .zooza_inner { padding: 0 !important; }
.calendar .zooza_day h2.zooza_title {
    background: var(--light) !important; color: var(--black) !important; text-align: center !important;
    font-size: 13px !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: .03em !important;
    padding: 10px 8px !important; margin: 0 !important; border-bottom: 1px solid var(--mid) !important; line-height: 1.3 !important;
}
.calendar .zooza_day h2.zooza_title small { display: block !important; font-size: 12px !important; color: var(--muted) !important; font-weight: 700 !important; }
.calendar .zooza_events { padding: 8px !important; }
.calendar .zooza_time_separator { font-size: 11px !important; font-weight: 800 !important; color: var(--muted) !important; margin: 6px 2px 4px !important; }
.calendar .zooza_event_item {
    display: block !important; background: var(--light) !important; border: 1px solid var(--mid) !important;
    border-radius: 8px !important; padding: 9px !important; margin-bottom: 8px !important;
    text-decoration: none !important; color: var(--black) !important; font-size: 12px !important; line-height: 1.45 !important;
}
.calendar a.zooza_event_item:hover { border-color: var(--brand) !important; }
.calendar .zooza_event_item .zooza_time { font-weight: 800 !important; color: var(--black) !important; }
.calendar .zooza_event_item .zooza_name { display: block !important; font-weight: 800 !important; color: var(--brand) !important; margin: 3px 0 !important; font-size: 13px !important; }
.calendar .zooza_event_item .zooza_capacity,
.calendar .zooza_event_item .zooza_place_name { display: block !important; color: var(--muted) !important; font-size: 11px !important; }
.calendar .zooza_day_empty { color: var(--muted) !important; font-size: 11.5px !important; padding: 6px 2px !important; text-align: center !important; }

/* Mobile — stack days */
@media (max-width: 900px) { .calendar .zooza_week { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 520px) {
    .calendar .zooza_week { grid-template-columns: 1fr !important; }
    .calendar .zooza_filters { flex-direction: column !important; }
}

/* ── Workshop segments (the Maths / English blocks) ──
   GOTCHA: each workshop renders as .zooza_segments_segment with Zooza's default
   GREY box styling; the rows inside are .zooza_segment_list_item (key/value) and
   the swap link is a.zooza_button[href*="select_segment"]. We restyle them into
   branded, selectable cards so picking BOTH workshops feels like the obvious,
   rewarding choice. Use nth-of-type (NOT nth-child) for the per-subject accent —
   the "Change" link is a sibling and would throw off nth-child counting. ── */

/* Two cards side by side on desktop, stacked on mobile */
.zooza .zooza_segments {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    margin: 4px 0 8px !important;
}
@media (max-width: 560px) { .zooza .zooza_segments { grid-template-columns: 1fr !important; } }
/* Insurance: if Zooza renders the "Change" link as a DIRECT child of the grid
   (sibling of the cards) instead of inside a card, don't let it break the
   columns — span it full width. No-op when the link lives inside the card. */
.zooza .zooza_segments > a,
.zooza .zooza_segments > .zooza_button { grid-column: 1 / -1 !important; }

.zooza .zooza_segments_segment {
    position: relative !important;
    background: #fff !important;                 /* kill the grey */
    border: 2px solid var(--mid) !important;
    border-radius: 14px !important;
    padding: 20px 18px 16px !important;
    box-shadow: 0 2px 10px rgba(103,51,153,.05) !important;
    transition: border-color .15s, box-shadow .15s, transform .15s !important;
    overflow: hidden !important;
}
/* subject accent strip across the top — Maths purple, English amber */
.zooza .zooza_segments_segment::before {
    content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important;
    height: 5px !important; background: var(--brand) !important;
}
.zooza .zooza_segments_segment:nth-of-type(even)::before { background: #f59e0b !important; }

.zooza .zooza_segments_segment:hover {
    border-color: var(--brand) !important;
    box-shadow: 0 6px 18px rgba(103,51,153,.12) !important;
    transform: translateY(-1px) !important;
}

/* selected state — soft glow ring + green check badge */
.zooza .zooza_segments_segment.selected {
    border-color: var(--brand) !important;
    box-shadow: 0 0 0 3px rgba(103,51,153,.12), 0 6px 18px rgba(103,51,153,.10) !important;
}
.zooza .zooza_segments_segment.selected::after {
    content: '\2713' !important;                  /* ✓ */
    position: absolute !important; top: 14px !important; right: 14px !important;
    width: 24px !important; height: 24px !important;
    background: #22c55e !important; color: #fff !important; border-radius: 50% !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    font-size: 14px !important; font-weight: 900 !important;
    box-shadow: 0 2px 6px rgba(34,197,94,.40) !important;
}

/* rows inside the card — flatten Zooza's grey/striped key-value rows */
.zooza .zooza_segment_list_item {
    display: flex !important; justify-content: space-between !important; align-items: baseline !important;
    gap: 10px !important; background: none !important; border: none !important;
    padding: 2px 0 !important; font-size: 13px !important; color: var(--muted) !important;
}
/* the first row is the workshop title (e.g. "Math 11am") — make it the hero */
.zooza .zooza_segment_list_item:first-child { padding-right: 28px !important; }
.zooza .zooza_segment_list_item_key {
    font-weight: 800 !important; color: var(--black) !important; font-size: 16px !important;
}

/* the "Change" swap link — keep it secondary so the card, not the button, leads */
.zooza .zooza_segments_segment a.zooza_button,
.zooza .zooza_segments_segment a.zooza_button.selected {
    background: #fff !important; color: var(--muted) !important; border: 1.5px solid var(--mid) !important;
    font-size: 11px !important; font-weight: 700 !important; text-transform: none !important; letter-spacing: 0 !important;
    padding: 6px 14px !important; margin-top: 12px !important;
}
.zooza .zooza_segments_segment a.zooza_button:hover,
.zooza .zooza_segments_segment a.zooza_button.selected:hover {
    background: #fff !important; color: var(--brand) !important; border-color: var(--brand) !important;
}

/* Bundle nudge banner (injected by mk-zooza.js above .zooza_segments) */
.zooza .mk-bundle-banner {
    display: flex !important; align-items: center !important; gap: 11px !important;
    background: linear-gradient(135deg, #f3ecfb, #ece3f7) !important;
    border: 1.5px solid #ddccf0 !important;
    color: var(--dark) !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    font-size: 13.5px !important; line-height: 1.45 !important;
    margin: 0 0 16px !important;
}
.zooza .mk-bundle-banner strong { font-weight: 900 !important; color: var(--brand) !important; }

/* One / two blocks picked — warm amber prompt + caution ("add a second",
   "make sure they're consecutive!") to pop against the lavender intro banner. */
.zooza .mk-bundle-banner[data-mode="one"],
.zooza .mk-bundle-banner[data-mode="two"] {
    background: linear-gradient(135deg, #fff4e3, #ffe9c7) !important;
    border-color: #f3d199 !important; color: #8a5a00 !important;
}
.zooza .mk-bundle-banner[data-mode="one"] strong,
.zooza .mk-bundle-banner[data-mode="two"] strong { color: #b9740a !important; }
.zooza .mk-bundle-banner[data-mode="one"] .mk-bundle-icon,
.zooza .mk-bundle-banner[data-mode="two"] .mk-bundle-icon { background: #f59e0b !important; }

/* All three slots booked — green success. */
.zooza .mk-bundle-banner[data-mode="done"] {
    background: linear-gradient(135deg, #e7f6ea, #d6efdc) !important;
    border-color: #b6dfc0 !important; color: #1b6b2c !important;
}
.zooza .mk-bundle-banner[data-mode="done"] strong { color: #1b6b2c !important; }
.zooza .mk-bundle-banner[data-mode="done"] .mk-bundle-icon { background: #22c55e !important; }

/* The not-yet-selected card gets a gentle pulse so the eye lands on it */
.zooza .zooza_segments_segment.mk-suggest {
    border-color: var(--brand) !important; border-style: dashed !important;
    animation: mkPulse 1.4s ease-in-out infinite !important;
}
@keyframes mkPulse {
    0%, 100% { box-shadow: 0 2px 10px rgba(103,51,153,.05); }
    50%      { box-shadow: 0 0 0 4px rgba(103,51,153,.14), 0 6px 18px rgba(103,51,153,.10); }
}

.zooza .mk-bundle-icon {
    flex: 0 0 auto !important;
    width: 28px !important; height: 28px !important; border-radius: 50% !important;
    background: var(--brand) !important; color: #fff !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    font-size: 15px !important; font-weight: 900 !important;
}

/* ── Trial session list — show as a 2-column card grid ──
   Same visual language as the workshop blocks above, for consistency. The list
   container is .zooza_events, each session is a .zooza_events_event. ── */
.zooza .zooza_events {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    margin: 4px 0 8px !important;
}
@media (max-width: 560px) { .zooza .zooza_events { grid-template-columns: 1fr !important; } }

.zooza .zooza_events_event {
    position: relative !important;
    background: #fff !important;
    border: 2px solid var(--mid) !important;
    border-radius: 14px !important;
    padding: 18px !important;
    box-shadow: 0 2px 10px rgba(103,51,153,.05) !important;
    transition: border-color .15s, box-shadow .15s, transform .15s !important;
    overflow: hidden !important;
}
.zooza .zooza_events_event::before {
    content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important;
    height: 5px !important; background: var(--brand) !important;
}
.zooza .zooza_events_event:hover {
    border-color: var(--brand) !important;
    box-shadow: 0 6px 18px rgba(103,51,153,.12) !important;
    transform: translateY(-1px) !important;
}
.zooza .zooza_events_event .zooza_event_list_item {
    display: flex !important; justify-content: space-between !important; align-items: baseline !important;
    gap: 10px !important; background: none !important; border: none !important; padding: 2px 0 !important;
}
.zooza .zooza_events_event .zooza_event_list_item_key { font-weight: 800 !important; color: var(--black) !important; font-size: 15px !important; }
.zooza .zooza_events_event a.zooza_button { margin-top: 12px !important; }

/* ── Trial session list — hide the "Availability: N slots available" row ──
   Each .zooza_events_event is built as [date row, availability row, Select link]
   (verified in the widget source: the capacity div is appended right before the
   Select <a>). So the availability row is always the LAST .zooza_event_list_item
   — target it directly. Date row and Select button are untouched. ── */
.zooza .zooza_events_event > .zooza_event_list_item:last-of-type { display: none !important; }

/* ── Session block — hide the course run range (from / to) ──
   It shows the full multi-year schedule span (e.g. 2026 → 2028), which isn't
   useful to a parent completing a booking. Keep the name + tutor rows. ── */
.zooza .zooza_schedule_from,
.zooza .zooza_schedule_to { display: none !important; }

/* ── Hide Zooza chrome ── */
.zooza .zooza_required_field { display: none !important; }
.zooza .zooza_branding,
.zooza .zooza_language_selector,
a[href*="lang="] { display: none !important; }

/* ── Responsive ── */
@media (max-width: 768px) {
    .zooza .zooza_direct_debit_form_wrapper,
    .zooza .zooza_direct_debit_form__address,
    .zooza .zooza_extra_fields_address_wrapper,
    .zooza .zooza_extra_fields_address { grid-template-columns: 1fr !important; }
    .zooza .zooza_direct_debit_form__span_2,
    .zooza .zooza_address_form__span_2 { grid-column: 1 !important; }
    .zooza .zooza_person { padding: 16px !important; }
    .zooza .zooza_name p,
    .zooza .zooza_contact p { width: 100% !important; float: none !important; margin: 0 !important; }
}
@media (max-width: 480px) {
    .zooza .zooza_date_picker { flex-wrap: wrap !important; gap: 6px !important; }
    .zooza .zooza_date_picker select { min-width: 80px !important; flex: 1 !important; }
}