/**
 * OunekOS Booking Wellness — Public Styles v2.0
 * Design: terra cotta / warm sand / sage wellness aesthetic
 */

/* ══════════════════════════════════════════════════════
   CSS VARIABLES — static / derived tokens only
   Settable vars (primary, secondary, accent, text,
   background, fonts) are injected earlier by the
   oubkw-vars inline handle in register_and_localize().
══════════════════════════════════════════════════════ */
:root {
    /* derived tints — not user-configurable */
    --oubkw-primary-dark:   #A85843;
    --oubkw-primary-light:  #E8A898;
    --oubkw-secondary-light:#B5C4A8;
    --oubkw-accent-light:   #EDD9C4;
    --oubkw-text-mid:       #5C4033;
    --oubkw-text-soft:      #9C7B6A;
    /* --oubkw-bg-mid is now emitted by build_css_vars() (derived from background_color).
       --oubkw-price-color is also emitted there (contrast-safe against bg-mid).
       Both keep a fallback here so the stylesheet is usable if the inline block
       is somehow absent (e.g. cached static export). */
    --oubkw-bg-mid:         #F2EBE0;
    --oubkw-price-color:    #A85843;
    --oubkw-on-primary:     #ffffff;   /* white on default terra-cotta primary */
    --oubkw-text-on-mid:    #2C1F14;   /* near-black always readable on default bg-mid */
    --oubkw-bg-dark:        #E8DDD0;
    --oubkw-white:          #FFFFFF;
    /* layout / motion tokens */
    --oubkw-r-card:         18px;
    --oubkw-r-pill:         50px;
    --oubkw-shadow:         0 2px 20px rgba(44,31,20,.08);
    --oubkw-shadow-card:    0 4px 32px rgba(44,31,20,.12);
    --oubkw-t:              0.24s cubic-bezier(.4,0,.2,1);
}

/* ══════════════════════════════════════════════════════
   WIDGET WRAPPER
══════════════════════════════════════════════════════ */
.oubkw-booking-widget {
    font-family: var(--oubkw-font-body);
    color: var(--oubkw-text);
    background: var(--oubkw-background);
    overflow-x: hidden;   /* prevent any child from causing page-level horizontal scroll */
    overflow-y: visible;
    width: 100%;
    max-width: 100%;
}
.oubkw-booking-widget *, .oubkw-booking-widget *::before, .oubkw-booking-widget *::after {
    box-sizing: border-box;
}

/* ══════════════════════════════════════════════════════
   PROGRESS BAR
══════════════════════════════════════════════════════ */
.oubkw-progress {
    background: var(--oubkw-bg-mid);
    border-bottom: 1px solid rgba(196,112,90,.1);
}
.oubkw-progress-bar {
    display: flex;
    align-items: stretch;
    overflow-x: auto;
    scrollbar-width: none;
    max-width: 960px;
    margin: 0 auto;
}
.oubkw-progress-bar::-webkit-scrollbar { display: none; }

.oubkw-progress-step {
    flex: 1; min-width: 110px;
    display: flex; align-items: center; gap: 9px;
    padding: 13px 18px;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
    transition: var(--oubkw-t);
    cursor: default;
}
.oubkw-progress-step.completed { border-bottom-color: var(--oubkw-secondary); cursor: pointer; }
.oubkw-progress-step.active    { border-bottom-color: var(--oubkw-text); }

.oubkw-step-num {
    width: 27px; height: 27px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .74rem; font-weight: 500;
    background: var(--oubkw-white);
    border: 2px solid var(--oubkw-accent);
    color: var(--oubkw-text-soft);
    flex-shrink: 0; transition: var(--oubkw-t);
}
.oubkw-progress-step.active    .oubkw-step-num { background: var(--oubkw-primary); border-color: var(--oubkw-text); color: var(--oubkw-on-primary); }
.oubkw-progress-step.completed .oubkw-step-num { background: var(--oubkw-secondary); border-color: var(--oubkw-secondary); color: #fff; }

.oubkw-step-label { font-size: .77rem; font-weight: 500; color: var(--oubkw-text-on-mid); }
.oubkw-progress-step.active    .oubkw-step-label { color: var(--oubkw-price-color); font-weight: 600; }
.oubkw-progress-step.completed .oubkw-step-label { color: var(--oubkw-secondary); }

/* ══════════════════════════════════════════════════════
   STEP PANELS
══════════════════════════════════════════════════════ */
.oubkw-step { display: none; }
.oubkw-step.active { display: block; animation: oubkwFadeIn .3s cubic-bezier(.4,0,.2,1) both; }

/* ══════════════════════════════════════════════════════
   2-COLUMN LAYOUT
══════════════════════════════════════════════════════ */
.oubkw-booking-main {
    max-width: 1100px;
    margin: 0 auto;
    padding: 36px 20px 80px;
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 32px;
    align-items: start;
    overflow: visible;
    min-height: 0;
    width: 100%;
    box-sizing: border-box;
}
.oubkw-booking-main > * { min-width: 0; }  /* prevent grid blowout */
.oubkw-booking-main--single {
    grid-template-columns: 1fr;
    max-width: 600px;
}
@media (max-width: 960px) {
    .oubkw-booking-main { grid-template-columns: 1fr; padding: 24px 16px 60px; }
    .oubkw-sidebar { display: none !important; }
}

/* ══════════════════════════════════════════════════════
   TYPOGRAPHY
══════════════════════════════════════════════════════ */
.oubkw-eyebrow {
    font-size: .7rem; font-weight: 500; letter-spacing: .2em;
    text-transform: uppercase; color: var(--oubkw-price-color);
    margin-bottom: 6px;
}
.oubkw-section-title {
    font-family: var(--oubkw-font-display);
    font-size: 2rem; font-weight: 600;
    color: var(--oubkw-text); line-height: 1.15;
    margin-bottom: 4px;
}
.oubkw-section-sub {
    font-size: .85rem; color: var(--oubkw-text-soft);
    font-weight: 300; margin-bottom: 24px;
}

/* ══════════════════════════════════════════════════════
   FILTER TABS (category)
══════════════════════════════════════════════════════ */
.oubkw-filter-tabs {
    display: flex; gap: 8px; flex-wrap: wrap;
    margin-bottom: 24px;
}
.oubkw-category-tab {
    padding: 8px 18px; border-radius: var(--oubkw-r-pill);
    border: 1.5px solid var(--oubkw-accent);
    background: transparent;
    color: var(--oubkw-text-mid);
    font-family: var(--oubkw-font-body);
    font-size: .82rem; font-weight: 500;
    cursor: pointer; transition: var(--oubkw-t);
    display: flex; align-items: center; gap: 6px;
}
.oubkw-category-tab:hover  {
    border-color: var(--oubkw-text);
    color: var(--oubkw-text);
    background: rgba(196,112,90,.06);
}
.oubkw-category-tab.active {
    background: var(--oubkw-primary);
    border-color: var(--oubkw-text);
    color: var(--oubkw-on-primary);
}
/* Shortcode filter-mode: locked tab acts as a non-interactive breadcrumb */
.oubkw-category-tab.oubkw-cat-filter-locked {
    cursor: default;
    opacity: 0.9;
}

/* ══════════════════════════════════════════════════════
   SUB-CATEGORY TAB ROW  (level-1 filter pills)
══════════════════════════════════════════════════════ */
.oubkw-subcats-row {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: -14px;   /* pull up to sit snugly below main tabs */
    margin-bottom: 18px;
    padding: 10px 14px;
    border-radius: 0 0 12px 12px;
    border: 1px solid rgba(196,112,90,.18);
    border-top: none;
    background: rgba(196,112,90,.05);   /* overridden by JS inline style */
    animation: oubkwSubRowIn .2s ease;
}

@keyframes oubkwSubRowIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Make the main tabs row bottom-corners square when sub-row is visible */
.oubkw-filter-tabs:has(+ .oubkw-subcats-row:not([style*="display:none"]):not([style*="display: none"])) {
    border-radius: var(--oubkw-r-pill) var(--oubkw-r-pill) 0 0;
    margin-bottom: 0;
    padding-bottom: 10px;
    background: rgba(196,112,90,.04);
    border: 1px solid rgba(196,112,90,.15);
    padding: 8px 12px;
}

.oubkw-subcat-tab {
    --subcat-color: #C4705A;
    padding: 5px 14px;
    border-radius: var(--oubkw-r-pill);
    border: 1.5px solid color-mix(in srgb, var(--subcat-color) 35%, transparent);
    background: transparent;
    color: var(--oubkw-text-mid, #6B5A4E);
    font-family: var(--oubkw-font-body);
    font-size: .78rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: var(--oubkw-t, all .2s);
    white-space: nowrap;
}
.oubkw-subcat-tab:hover {
    border-color: var(--subcat-color);
    background: color-mix(in srgb, var(--subcat-color) 10%, transparent);
    color: var(--subcat-color);
}
.oubkw-subcat-tab.active {
    background: var(--subcat-color);
    border-color: var(--subcat-color);
    color: #fff;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--subcat-color) 30%, transparent);
}

/* Fallback for browsers without color-mix (Safari < 16.2, FF < 113) */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
    .oubkw-subcat-tab { border-color: rgba(196,112,90,.35); }
    .oubkw-subcat-tab:hover { background: rgba(196,112,90,.1); color: #C4705A; border-color: #C4705A; }
    .oubkw-subcat-tab.active { background: #C4705A; border-color: #C4705A; color: #fff; box-shadow: 0 2px 8px rgba(196,112,90,.3); }
}

/* ══════════════════════════════════════════════════════
   CATEGORY LABEL (separator between categories)
══════════════════════════════════════════════════════ */
.oubkw-category-label {
    font-size: .7rem; font-weight: 600; letter-spacing: .15em;
    text-transform: uppercase; color: var(--oubkw-text-soft);
    margin: 24px 0 12px;
    display: flex; align-items: center; gap: 10px;
}
.oubkw-category-label::after {
    content: ''; flex: 1; height: 1px;
    background: var(--oubkw-accent-light);
}

/* ══════════════════════════════════════════════════════
   SERVICES GRID WRAPPER
══════════════════════════════════════════════════════ */
.oubkw-services-grid {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* ══════════════════════════════════════════════════════
   SERVICE CARD
══════════════════════════════════════════════════════ */
.oubkw-service-card {
    background: var(--oubkw-white);
    border-radius: var(--oubkw-r-card);
    border: 2px solid transparent;
    box-shadow: var(--oubkw-shadow);
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;       /* allow suggestions row to break onto its own line */
    cursor: pointer;
    transition: var(--oubkw-t);
    position: relative;
    margin-bottom: 12px;
    animation: oubkwFadeUp .32s ease both;
}
.oubkw-service-card:hover {
    box-shadow: var(--oubkw-shadow-card);
    transform: translateY(-2px);
    border-color: var(--oubkw-accent-light);
}
.oubkw-service-card.selected {
    border-color: var(--oubkw-text);
    box-shadow: 0 4px 28px rgba(196,112,90,.22);
}

/* Emoji zone */
.oubkw-service-emoji {
    width: 110px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 2.4rem;
    background: var(--oubkw-bg-mid);
}
@media (max-width: 540px) {
    .oubkw-service-emoji { width: 80px; font-size: 1.8rem; }
}

/* Content zone */
.oubkw-service-content {
    flex: 1; padding: 16px 18px;
    display: flex; flex-direction: column; gap: 4px;
}
.oubkw-service-name {
    font-family: var(--oubkw-font-display);
    font-size: 1.15rem; font-weight: 600;
    color: var(--oubkw-text); line-height: 1.2;
}
.oubkw-service-description {
    font-size: .78rem; color: var(--oubkw-text-soft);
    line-height: 1.55; font-weight: 300;
    /* Clamp long descriptions: max-height is safer than -webkit-line-clamp
       when the content may contain images, lists, or block-level HTML from TinyMCE. */
    max-height: 3.4em; /* ≈ 2 lines at line-height 1.55 × 1.1 rounding */
    overflow: hidden;
}
.oubkw-service-description.oubkw-desc-expanded {
    max-height: none;
    overflow: visible;
}
/* Rich HTML content inside service description cards */
.oubkw-service-description p { margin: 0 0 4px; }
.oubkw-service-description p:last-child { margin-bottom: 0; }
.oubkw-service-description ul,
.oubkw-service-description ol { padding-left: 1.2em; margin: 2px 0 4px; }
.oubkw-service-description li { margin-bottom: 1px; }
.oubkw-service-description strong,
.oubkw-service-description b { font-weight: 600; }
.oubkw-service-description em,
.oubkw-service-description i { font-style: italic; }
.oubkw-service-description a { color: var(--oubkw-text); text-decoration: underline; }
.oubkw-service-description img {
    max-width: 100%; height: auto;
    border-radius: calc(var(--oubkw-radius, 8px) / 2);
    margin: 4px 0; display: block;
}
/* "Show more / Show less" inline toggle */
.oubkw-desc-toggle {
    display: inline-block;
    background: none; border: none; padding: 0;
    margin-top: 3px;
    font-size: .72rem;
    color: var(--oubkw-text);
    cursor: pointer;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 2px;
    opacity: .75;
    transition: opacity .15s;
    line-height: 1.3;
}
.oubkw-desc-toggle:hover { opacity: 1; }
.oubkw-service-meta {
    display: flex; align-items: center; gap: 14px;
    margin-top: 8px; flex-wrap: wrap;
}
.oubkw-service-duration {
    font-size: .75rem; color: var(--oubkw-text-soft);
    display: flex; align-items: center; gap: 4px;
}
.oubkw-service-duration i { color: var(--oubkw-accent); }
.oubkw-service-price {
    font-family: var(--oubkw-font-display);
    font-size: 1.1rem; font-weight: 600;
    color: var(--oubkw-price-color);
}
.oubkw-service-price-original {
    font-size: .8rem; color: var(--oubkw-text-soft);
    text-decoration: line-through; margin-left: 4px; font-weight: 400;
}
.oubkw-promo-badge {
    background: rgba(196,112,90,.12); color: var(--oubkw-text);
    font-size: .65rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; padding: 2px 7px; border-radius: 20px;
}

/* Check circle (right side) */
.oubkw-service-check {
    width: 56px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-left: 1px solid var(--oubkw-bg-mid);
}
.oubkw-service-check-inner {
    width: 28px; height: 28px; border-radius: 50%;
    border: 2px solid var(--oubkw-accent);
    display: flex; align-items: center; justify-content: center;
    transition: var(--oubkw-t);
    color: transparent; font-size: .85rem;
}
.oubkw-service-card.selected .oubkw-service-check-inner {
    background: var(--oubkw-primary);
    border-color: var(--oubkw-text);
    color: #fff;
}

/* Featured (starred) service card — dashed gold border all around, no bg change */
.oubkw-service-card.oubkw-featured {
    border: 2px dashed #C9A227;
}
/* When also selected, revert to solid selection border */
.oubkw-service-card.oubkw-featured.selected {
    border: 2px solid var(--oubkw-text);
    border-style: solid;
}

/* Top-right corner ribbon on featured cards */
.oubkw-featured-ribbon {
    width: 90px;
    height: 90px;
    overflow: hidden;
    position: absolute;
    top: -2px;
    right: -2px;
    z-index: 2;
    pointer-events: none;
}
.oubkw-featured-ribbon span {
    position: absolute;
    display: block;
    width: 128px;
    padding: 6px 0 5px;
    background: #C9A227;
    color: #fff;
    font-size: .5rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.25;
    right: -26px;
    top: 19px;
    transform: rotate(45deg);
    box-shadow: 0 2px 5px rgba(0,0,0,.18);
}

/* Small italic sub-label shown below the service name */
.oubkw-featured-sub {
    font-size: 11px;
    color: #9e8e82;
    font-style: italic;
    margin-top: 3px;
    line-height: 1.3;
}

/* ── Category description banner ──────────────────────────────────────────── */
/* Shown above the services grid when a specific category tab is active.       */
/* Hidden for the "All" tab and when the category has no description.          */

.oubkw-cat-desc-banner {
    margin-bottom: 14px;
}

.oubkw-cat-desc-banner__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 10px;
    padding: 10px 14px;
    background: color-mix(in srgb, var(--oubkw-primary) 8%, transparent);
    border-left: 3px solid var(--oubkw-primary);
    border-radius: 0 var(--oubkw-radius, 8px) var(--oubkw-radius, 8px) 0;
}

.oubkw-cat-desc-banner__icon {
    font-size: .95rem;
    color: var(--oubkw-text);
    flex-shrink: 0;
}

.oubkw-cat-desc-banner__name {
    font-size: .85rem;
    font-weight: 700;
    color: var(--oubkw-text);
    letter-spacing: .01em;
}

.oubkw-cat-desc-banner__text {
    width: 100%;
    margin: 4px 0 0;
    font-size: .8rem;
    color: var(--oubkw-text);
    line-height: 1.55;
    /* white-space: pre-line removed — TinyMCE uses <p> tags, not \n */
}
/* Rich HTML content inside the banner (TinyMCE output) */
.oubkw-cat-desc-banner__text p { margin: 0 0 6px; }
.oubkw-cat-desc-banner__text p:last-child { margin-bottom: 0; }
.oubkw-cat-desc-banner__text ul,
.oubkw-cat-desc-banner__text ol { padding-left: 1.4em; margin: 4px 0 6px; }
.oubkw-cat-desc-banner__text li { margin-bottom: 2px; }
.oubkw-cat-desc-banner__text strong,
.oubkw-cat-desc-banner__text b { font-weight: 600; }
.oubkw-cat-desc-banner__text em,
.oubkw-cat-desc-banner__text i { font-style: italic; }
.oubkw-cat-desc-banner__text a { color: var(--oubkw-text); text-decoration: underline; }
.oubkw-cat-desc-banner__text img {
    max-width: 100%; height: auto;
    border-radius: calc(var(--oubkw-radius, 8px) / 2);
    margin: 6px 0; display: block;
}

/* Service options (select dropdown) — full-width row below emoji+content+check */
.oubkw-service-options {
    flex: 0 0 100%; width: 100%;
    padding: 10px 16px 14px;
    border-top: 1px solid var(--oubkw-bg-mid);
}
.oubkw-option-select {
    font-family: var(--oubkw-font-body) !important;
    font-size: .78rem !important;
    border-color: var(--oubkw-accent) !important;
    color: var(--oubkw-text-mid) !important;
    border-radius: 8px !important;
}
.oubkw-option-select:focus {
    border-color: var(--oubkw-text) !important;
    box-shadow: 0 0 0 3px rgba(196,112,90,.15) !important;
}

/* Loading & empty states */
.oubkw-loading {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 12px; padding: 48px 20px;
    color: var(--oubkw-text-soft); font-size: .9rem;
}
.oubkw-loading i { font-size: 1.5rem; color: var(--oubkw-text); }

.oubkw-empty-state {
    text-align: center; padding: 40px 20px;
    color: var(--oubkw-text-soft); font-size: .85rem;
}
.oubkw-empty-state i { font-size: 2rem; color: var(--oubkw-accent-light); display: block; margin-bottom: 12px; }

/* ══════════════════════════════════════════════════════
   SIDEBAR — SUMMARY PANEL
══════════════════════════════════════════════════════ */
.oubkw-sidebar { position: relative; }

.oubkw-summary-panel {
    background: var(--oubkw-white);
    border-radius: var(--oubkw-r-card);
    box-shadow: var(--oubkw-shadow-card);
    overflow: hidden;
    position: sticky; top: 24px;
}

.oubkw-summary-header {
    background: var(--oubkw-primary);
    padding: 20px 22px 16px; color: var(--oubkw-on-primary);
}
.oubkw-summary-header h3 {
    font-family: var(--oubkw-font-display);
    font-size: 1.3rem; font-weight: 600; margin-bottom: 2px;
}
.oubkw-summary-header p { font-size: .75rem; opacity: .8; font-weight: 300; }

.oubkw-summary-body { padding: 20px 22px; }

/* Empty state */
.oubkw-summary-empty {
    text-align: center; padding: 28px 10px;
    color: var(--oubkw-text-soft);
    font-size: .82rem; font-weight: 300; line-height: 1.6;
}
.oubkw-summary-empty i {
    font-size: 2rem; color: var(--oubkw-accent-light);
    display: block; margin-bottom: 10px;
}

/* Summary items */
.oubkw-summary-item {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--oubkw-bg-mid);
}
.oubkw-summary-item:last-child { border-bottom: none; }
.oubkw-summary-item-icon {
    width: 34px; height: 34px; border-radius: 10px;
    background: var(--oubkw-bg-mid);
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; flex-shrink: 0;
    overflow: hidden;   /* clips the product thumb to the rounded corner */
}
/* Product thumbnail — replaces the emoji when the product has an image */
.oubkw-summary-item-thumb {
    width: 34px; height: 34px;
    object-fit: cover;
    border-radius: 10px;
    display: block;
}
.oubkw-summary-item-info { flex: 1; }
.oubkw-summary-item-name     { display: block; font-size: .82rem; font-weight: 500; color: var(--oubkw-text); line-height: 1.3; }
.oubkw-summary-item-sub      { font-size: .72rem; color: var(--oubkw-text-soft); font-weight: 300; margin-top: 1px; }
.oubkw-summary-item-option   { display: block; font-size: .72rem; color: var(--oubkw-text-soft); margin-top: 1px; }
.oubkw-summary-item-duration { display: block; font-size: .72rem; color: var(--oubkw-text-soft); margin-top: 2px; }
/* Subtotal rows (services / products breakdown in step-3 sidebar) */
.oubkw-summary-item--subtotal { padding: 2px 0; }
.oubkw-summary-item--subtotal .oubkw-summary-item-name  { font-size: .78rem; color: var(--oubkw-text-soft); }
.oubkw-summary-item--subtotal .oubkw-summary-item-price { font-size: .82rem; color: var(--oubkw-text-soft); }
/* Total row in step-3 sidebar */
.oubkw-summary-item--total   { border-top: 2px solid var(--oubkw-bg-mid); margin-top: 6px; padding-top: 10px; }
.oubkw-summary-item--total .oubkw-summary-item-name { font-weight: 600; font-size: .9rem; }
.oubkw-summary-item--total .oubkw-summary-item-price { font-size: 1.05rem; }
.oubkw-summary-item-price {
    font-family: var(--oubkw-font-display);
    font-size: .95rem; font-weight: 600;
    color: var(--oubkw-text); white-space: nowrap;
}
.oubkw-summary-item-remove {
    background: none; border: none;
    color: var(--oubkw-text-soft); font-size: .75rem;
    cursor: pointer; padding: 2px; opacity: .6;
    transition: var(--oubkw-t);
}
.oubkw-summary-item-remove:hover { opacity: 1; color: var(--oubkw-text); }

/* Totals */
.oubkw-summary-totals {
    margin-top: 16px; padding-top: 14px;
    border-top: 2px solid var(--oubkw-bg-mid);
}
.oubkw-summary-row {
    display: flex; justify-content: space-between;
    align-items: center; margin-bottom: 8px;
    font-size: .82rem;
}
.oubkw-summary-row--total {
    font-weight: 600; font-size: .95rem;
    border-top: 1px solid var(--oubkw-accent-light);
    padding-top: 10px; margin-top: 6px;
}
.oubkw-sum-label { color: var(--oubkw-text-soft); }
.oubkw-summary-row--total .oubkw-sum-label { color: var(--oubkw-text); }
.oubkw-sum-val {
    color: var(--oubkw-text); font-weight: 500;
}
.oubkw-summary-row--total .oubkw-sum-val {
    font-family: var(--oubkw-font-display);
    font-size: 1.2rem; color: var(--oubkw-price-color); font-weight: 600;
}

/* Continue button */
.oubkw-btn-continue {
    width: 100%; padding: 16px 20px;
    border-radius: var(--oubkw-r-pill);
    background: var(--oubkw-primary);
    border: none; color: var(--oubkw-on-primary);
    font-family: var(--oubkw-font-body);
    font-size: .9rem; font-weight: 600; letter-spacing: .04em;
    cursor: pointer; transition: var(--oubkw-t);
    display: flex; align-items: center; justify-content: center; gap: 10px;
    box-shadow: 0 4px 20px rgba(196,112,90,.35); margin-top: 20px;
}
.oubkw-btn-continue:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 28px rgba(196,112,90,.45);
}
.oubkw-btn-continue:disabled {
    opacity: .45; cursor: not-allowed;
    transform: none; box-shadow: none;
}

/* Back button */
.oubkw-btn-back {
    background: none; border: 1.5px solid var(--oubkw-accent);
    border-radius: var(--oubkw-r-pill);
    padding: 10px 18px;
    font-family: var(--oubkw-font-body);
    font-size: .82rem; font-weight: 500;
    color: var(--oubkw-text-soft); cursor: pointer;
    transition: var(--oubkw-t);
    display: inline-flex; align-items: center; gap: 7px;
    margin-bottom: 20px;
}
.oubkw-btn-back:hover { border-color: var(--oubkw-text); color: var(--oubkw-text); }

/* Guarantees */
.oubkw-guarantees {
    margin-top: 16px; padding-top: 14px;
    border-top: 1px solid var(--oubkw-bg-mid);
}
.oubkw-guarantee-item {
    display: flex; align-items: center; gap: 8px;
    font-size: .72rem; color: var(--oubkw-text-soft);
    font-weight: 300; margin-bottom: 5px;
}
.oubkw-guarantee-item i { color: var(--oubkw-secondary); font-size: .75rem; }

/* ══════════════════════════════════════════════════════
   CALENDAR
══════════════════════════════════════════════════════ */
.oubkw-calendar-container { margin-bottom: 20px; }

.oubkw-calendar {
    background: var(--oubkw-white);
    border-radius: var(--oubkw-r-card);
    box-shadow: var(--oubkw-shadow-card); overflow: hidden;
    animation: oubkwFadeUp .35s ease both;
}

.oubkw-calendar-header {
    display: flex; align-items: center;
    justify-content: space-between;
    padding: 18px 22px 14px;
    border-bottom: 1px solid var(--oubkw-bg-mid);
}
.oubkw-calendar-title {
    font-family: var(--oubkw-font-display);
    font-size: 1.25rem; font-weight: 600;
    color: var(--oubkw-text); text-transform: capitalize;
}
.oubkw-calendar-nav {
    width: 34px; height: 34px; border-radius: 50%;
    border: 1.5px solid var(--oubkw-accent);
    background: transparent; color: var(--oubkw-text-mid);
    cursor: pointer; display: flex; align-items: center;
    justify-content: center; font-size: .85rem;
    transition: var(--oubkw-t);
}
.oubkw-calendar-nav:hover { border-color: var(--oubkw-text); color: var(--oubkw-text); background: rgba(196,112,90,.06); }
.oubkw-calendar-nav:disabled { opacity: .3; cursor: not-allowed; }

.oubkw-calendar-grid {
    display: grid; grid-template-columns: repeat(7,1fr);
    gap: 4px; padding: 12px 14px 16px;
}
.oubkw-calendar-daynames {
    display: grid; grid-template-columns: repeat(7,1fr);
    padding: 10px 14px 4px;
    border-bottom: 1px solid var(--oubkw-bg-mid);
}
.oubkw-calendar-dayname {
    text-align: center; font-size: .65rem;
    font-weight: 600; letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--oubkw-text-soft); padding: 4px 0;
}
.oubkw-day {
    aspect-ratio: 1; border-radius: 50%;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    cursor: pointer; transition: var(--oubkw-t);
    font-size: .88rem; font-weight: 400;
    color: var(--oubkw-text-mid); position: relative;
    border: 2px solid transparent; gap: 2px;
}
.oubkw-day:hover:not(.past):not(.empty):not(.closed):not(.full):not(.blocked) { background: rgba(196,112,90,.1); border-color: rgba(196,112,90,.25); }
.oubkw-day.selected { background: var(--oubkw-primary) !important; border-color: var(--oubkw-text) !important; color: var(--oubkw-on-primary) !important; font-weight: 600; box-shadow: 0 4px 16px rgba(196,112,90,.4); }
.oubkw-day.past    { opacity: .18; cursor: not-allowed; pointer-events: none; }
.oubkw-day.closed  { opacity: .18; cursor: not-allowed; pointer-events: none; text-decoration: line-through; }
.oubkw-day.full    { opacity: .45; cursor: not-allowed; pointer-events: none; }
.oubkw-day.blocked { opacity: .45; cursor: not-allowed; pointer-events: none; }
.oubkw-day.empty   { pointer-events: none; }
.oubkw-day-number  { line-height: 1; }
/* Status dot — color matches the legend */
.oubkw-day-dot           { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.oubkw-day-dot.available { background: var(--oubkw-secondary-light); }
.oubkw-day-dot.full      { background: var(--oubkw-primary-light); }
.oubkw-day-dot.closed    { background: var(--oubkw-bg-dark); }
.oubkw-day-dot.blocked   { background: var(--oubkw-primary-light); }
.oubkw-day.selected .oubkw-day-dot { background: rgba(255,255,255,.6); }

.oubkw-calendar-legend {
    display: flex; gap: 16px; flex-wrap: wrap;
    padding: 12px 18px 16px;
    border-top: 1px solid var(--oubkw-bg-mid);
}
.oubkw-legend-item { display: flex; align-items: center; gap: 6px; font-size: .7rem; color: var(--oubkw-text-soft); }
.oubkw-legend-dot  { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
/* Dot colors per status */
.oubkw-legend-dot.available { background: var(--oubkw-secondary-light); }
.oubkw-legend-dot.full      { background: var(--oubkw-primary-light); }
.oubkw-legend-dot.closed    { background: var(--oubkw-bg-dark); }
.oubkw-legend-dot.selected  { background: var(--oubkw-primary); }

/* ══════════════════════════════════════════════════════
   TIME SLOTS
══════════════════════════════════════════════════════ */
.oubkw-slots-container { margin-top: 24px; animation: oubkwFadeUp .3s ease both; }
.oubkw-slots-title {
    font-family: var(--oubkw-font-display);
    font-size: 1.2rem; font-weight: 600; color: var(--oubkw-text); margin-bottom: 4px;
}
.oubkw-slots-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

.oubkw-slot {
    position: relative; padding: 10px 16px;
    border-radius: 12px;
    border: 1.5px solid var(--oubkw-accent) !important;
    background: var(--oubkw-white) !important;
    font-family: var(--oubkw-font-body); font-size: .82rem; font-weight: 500;
    color: var(--oubkw-text-mid) !important; cursor: pointer;
    transition: var(--oubkw-t);
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    min-width: 70px; line-height: 1.2;
}
.oubkw-slot:hover:not(.unavailable) { border-color: var(--oubkw-text) !important; color: var(--oubkw-text) !important; background: rgba(196,112,90,.05) !important; transform: translateY(-1px); }
.oubkw-slot.selected { background: var(--oubkw-primary) !important; border-color: var(--oubkw-text) !important; color: var(--oubkw-on-primary) !important; font-weight: 600; box-shadow: 0 4px 16px rgba(196,112,90,.35); }
.oubkw-slot.unavailable { background: var(--oubkw-bg-mid) !important; border-color: var(--oubkw-bg-dark) !important; color: var(--oubkw-text-soft) !important; cursor: not-allowed; pointer-events: none; opacity: .55; }
.oubkw-slot-time { line-height: 1; display: block; color: inherit !important; }
.oubkw-slot-end  { font-size: .62rem; opacity: .7; line-height: 1; display: block; color: inherit !important; }
/* Legend dot inside slot — mirrors calendar day dots */
.oubkw-slot-dot  { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; margin-top: 2px; }
.oubkw-slot-dot.available { background: var(--oubkw-secondary-light); }
.oubkw-slot-dot.full      { background: var(--oubkw-primary-light); }
.oubkw-slot.selected .oubkw-slot-dot { background: rgba(255,255,255,.6); }
.oubkw-slot.unavailable .oubkw-slot-dot { background: var(--oubkw-bg-dark); }

.oubkw-no-slots { text-align: center; padding: 30px 10px; color: var(--oubkw-text-soft); font-size: .82rem; }
.oubkw-no-slots i { font-size: 2rem; color: var(--oubkw-accent-light); display: block; margin-bottom: 10px; }

.oubkw-slots-lunch-break {
    width: 100%; padding: 10px 14px; border-radius: 10px;
    background: linear-gradient(90deg, rgba(212,185,154,.18) 0%, rgba(196,112,90,.1) 100%);
    border: 1px solid rgba(196,112,90,.2);
    display: flex; align-items: center; gap: 10px;
    font-size: .76rem; color: var(--oubkw-text-mid);
    margin: 4px 0;
}
.oubkw-slots-lunch-break i { color: var(--oubkw-text); font-size: .9rem; flex-shrink: 0; }

/* ══════════════════════════════════════════════════════
   CONTACT FORM
══════════════════════════════════════════════════════ */
.oubkw-form-label { font-size: .82rem; font-weight: 500; color: var(--oubkw-text); margin-bottom: 4px; display: block; }
.oubkw-form-label span { color: var(--oubkw-text); }
.oubkw-form-control:focus {
    border-color: var(--oubkw-text) !important;
    box-shadow: 0 0 0 3px rgba(196,112,90,.15) !important;
}
.oubkw-form-control.is-invalid { border-color: #dc3545 !important; }

/* ── Inline field-level error messages (shown on blur) ── */
.oubkw-field-error {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    font-size: .74rem;
    color: #dc3545;
    margin-top: 4px;
    line-height: 1.4;
    animation: oubkwFieldErrIn .18s ease both;
}
.oubkw-field-error::before {
    content: '\f071'; /* fa-triangle-exclamation */
    font-family: 'Font Awesome 6 Free', 'FontAwesome';
    font-weight: 900;
    font-size: .68rem;
    margin-top: 1px;
    flex-shrink: 0;
}
@keyframes oubkwFieldErrIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════════════════════
   CONFIRMATION CARD
══════════════════════════════════════════════════════ */
.oubkw-confirmation-card {
    background: var(--oubkw-white);
    border-radius: var(--oubkw-r-card);
    box-shadow: var(--oubkw-shadow-card);
    padding: 48px 32px; text-align: center;
    animation: oubkwFadeUp .4s ease both;
}
.oubkw-confirmation-icon {
    width: 72px; height: 72px; border-radius: 50%;
    background: var(--oubkw-primary);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 20px; color: var(--oubkw-on-primary); font-size: 1.8rem;
    box-shadow: 0 8px 24px rgba(196,112,90,.4);
}
.oubkw-confirmation-message {
    font-family: var(--oubkw-font-display);
    font-size: 2rem; font-weight: 600;
    color: var(--oubkw-text); margin-bottom: 12px;
}
.oubkw-booking-number-label { font-size: .85rem; color: var(--oubkw-text-soft); margin-bottom: 24px; }
.oubkw-booking-number { color: var(--oubkw-text); font-weight: 600; }
.oubkw-email-notice {
    margin-top: 20px; font-size: .82rem; color: var(--oubkw-text-soft);
    background: var(--oubkw-bg-mid); padding: 12px 16px; border-radius: 10px;
}

.oubkw-confirmation-recap { text-align: left; margin: 20px 0; }
.oubkw-recap-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 0; border-bottom: 1px solid var(--oubkw-bg-mid);
    font-size: .85rem;
}
.oubkw-recap-row:last-child { border-bottom: none; }
.oubkw-recap-label { color: var(--oubkw-text-soft); display: flex; align-items: center; gap: 6px; }
.oubkw-recap-icon {
    width: 28px; height: 28px; border-radius: 6px; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0; font-size: 1rem;
    background: var(--oubkw-bg-mid);
}
.oubkw-recap-icon img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
.oubkw-recap-value { color: var(--oubkw-text); font-weight: 500; }
.oubkw-recap-total .oubkw-recap-value {
    font-family: var(--oubkw-font-display);
    font-size: 1.1rem; color: var(--oubkw-price-color); font-weight: 600;
}

/* ══════════════════════════════════════════════════════
   ERROR TOAST
══════════════════════════════════════════════════════ */
.oubkw-error-toast {
    position: fixed; bottom: 24px; left: 50%;
    transform: translateX(-50%) translateY(60px);
    background: var(--oubkw-text); color: #fff;
    padding: 11px 22px; border-radius: var(--oubkw-r-pill);
    font-size: .8rem; font-weight: 500;
    display: flex; align-items: center; gap: 9px;
    box-shadow: 0 8px 30px rgba(44,31,20,.25);
    z-index: 9999; opacity: 0;
    transition: transform .3s cubic-bezier(.4,0,.2,1), opacity .3s;
    white-space: nowrap;
}
.oubkw-error-toast i { color: var(--oubkw-primary-light); }
.oubkw-error-toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }

/* Progress step "done" state (completed with checkmark) */
.oubkw-progress-step.done { border-bottom-color: var(--oubkw-secondary); cursor: pointer; }
.oubkw-progress-step.done .oubkw-step-num { background: var(--oubkw-secondary); border-color: var(--oubkw-secondary); color: #fff; }
.oubkw-progress-step.done .oubkw-step-label { color: var(--oubkw-secondary); }

/* Mobile: hide sidebar, show bottom bar */
@media (max-width: 900px) {
    .oubkw-sidebar { display: none !important; }
}

/* ══════════════════════════════════════════════════════
   STEP 3 — CARD BLOCKS (shared with steps 4/5)
══════════════════════════════════════════════════════ */
.oubkw-card-block {
    background: var(--oubkw-white);
    border-radius: var(--oubkw-r-card);
    box-shadow: var(--oubkw-shadow-card);
    padding: 24px 28px; margin-bottom: 20px;
    animation: oubkwFadeUp .3s ease both;
}
.oubkw-card-block--compact { padding: 18px 22px; }
.oubkw-card-block-title {
    font-family: var(--oubkw-font-display);
    font-size: 1.1rem; font-weight: 600; color: var(--oubkw-text);
    margin-bottom: 18px; display: flex; align-items: center; gap: 10px;
}
.oubkw-card-block-title i { color: var(--oubkw-text); font-size: .9rem; }

/* Form labels */
.oubkw-form-label {
    font-size: .72rem; font-weight: 600; letter-spacing: .08em;
    text-transform: uppercase; color: var(--oubkw-text-mid);
    display: block; margin-bottom: 5px;
}
.oubkw-form-label span { color: var(--oubkw-text); margin-left: 2px; }
.oubkw-form-control {
    border-radius: 12px !important;
    border: 1.5px solid var(--oubkw-bg-dark) !important;
    background: var(--oubkw-background) !important;
    font-family: var(--oubkw-font-body) !important;
    font-size: .88rem !important; color: var(--oubkw-text) !important;
    transition: var(--oubkw-t) !important;
}
.oubkw-form-control:focus {
    border-color: var(--oubkw-text) !important;
    background: var(--oubkw-white) !important;
    box-shadow: 0 0 0 3px rgba(196,112,90,.1) !important;
}

/* Consent */
.oubkw-consent-row {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 12px 14px; background: var(--oubkw-background);
    border-radius: 12px; border: 1px solid var(--oubkw-bg-dark);
    cursor: pointer;
}
.oubkw-consent-check {
    width: 18px; height: 18px; border-radius: 5px;
    accent-color: var(--oubkw-text); cursor: pointer;
    flex-shrink: 0; margin-top: 2px;
}
.oubkw-consent-text {
    font-size: .76rem; color: var(--oubkw-text-mid);
    line-height: 1.55; font-weight: 300;
}
.oubkw-consent-text a { color: var(--oubkw-text); text-decoration: none; }
.oubkw-consent-text a:hover { text-decoration: underline; }

/* Cancellation policy notice — step 5 */
.oubkw-cancel-policy-notice {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 10px 14px;
    background: rgba(122,140,110,.08);
    border: 1px solid rgba(122,140,110,.25);
    border-radius: 10px;
    font-size: .78rem;
    color: var(--oubkw-text-mid, #6b5c4e);
    line-height: 1.5;
    margin-bottom: 12px;
}
.oubkw-cancel-policy-notice i {
    color: var(--oubkw-secondary, #7A8C6E);
    flex-shrink: 0;
    margin-top: 2px;
    font-size: .85rem;
}

/* Cancellation policy reminder — step 6 confirmation */
.oubkw-confirmation-cancel-notice {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .8rem;
    color: var(--oubkw-text-mid, #6b5c4e);
    background: rgba(122,140,110,.07);
    border: 1px solid rgba(122,140,110,.2);
    border-radius: 8px;
    padding: 8px 14px;
    margin: 8px 0 0;
}
.oubkw-confirmation-cancel-notice i {
    color: var(--oubkw-secondary, #7A8C6E);
    flex-shrink: 0;
}

/* CGV Modal */
.oubkw-cgv-modal-overlay {
    position: fixed; inset: 0; z-index: 99999;
    background: rgba(44,31,20,.55); backdrop-filter: blur(3px);
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
    animation: oubkwFadeIn .18s ease;
}
.oubkw-cgv-modal-box {
    background: #fff; border-radius: 18px;
    box-shadow: 0 24px 80px rgba(44,31,20,.22);
    max-width: 680px; width: 100%;
    max-height: 80vh; display: flex; flex-direction: column;
    overflow: hidden;
}
.oubkw-cgv-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 22px 14px; border-bottom: 1px solid var(--oubkw-bg-mid);
}
.oubkw-cgv-modal-header h5 {
    margin: 0; font-family: var(--oubkw-font-display);
    font-size: 1.1rem; color: var(--oubkw-text); font-weight: 600;
}
.oubkw-cgv-modal-close {
    background: none; border: none; cursor: pointer;
    width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--oubkw-text-soft); font-size: 1rem;
    transition: background .15s, color .15s;
}
.oubkw-cgv-modal-close:hover { background: var(--oubkw-bg-mid); color: var(--oubkw-text); }
.oubkw-cgv-modal-body {
    flex: 1; overflow-y: auto; padding: 20px 22px;
    font-size: .85rem; line-height: 1.7; color: var(--oubkw-text-mid);
}
.oubkw-cgv-modal-body h1,.oubkw-cgv-modal-body h2,.oubkw-cgv-modal-body h3 {
    font-family: var(--oubkw-font-display); color: var(--oubkw-text);
    margin-top: 1.2em; margin-bottom: .4em;
}
.oubkw-cgv-modal-footer {
    padding: 14px 22px; border-top: 1px solid var(--oubkw-bg-mid);
    display: flex; justify-content: flex-end;
}

/* ══════════════════════════════════════════════════════
   STEP 4 — PRODUCTS
══════════════════════════════════════════════════════ */
.oubkw-products-intro {
    background: linear-gradient(135deg, rgba(122,140,110,.1) 0%, rgba(196,112,90,.07) 100%);
    border: 1px solid rgba(122,140,110,.22);
    border-radius: 14px; padding: 16px 20px;
    margin-bottom: 24px;
    display: flex; align-items: flex-start; gap: 14px;
}
.oubkw-products-intro-icon { font-size: 1.6rem; flex-shrink: 0; }
.oubkw-products-intro strong { display: block; font-size: .88rem; font-weight: 600; color: var(--oubkw-text); margin-bottom: 3px; }
.oubkw-products-intro span  { font-size: .78rem; color: var(--oubkw-text-soft); font-weight: 300; line-height: 1.5; }

/* Container — manages the group labels + group grids stacked vertically */
.oubkw-products-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 24px;
}
/* Each per-group row of cards — single column (cards are now full-width horizontal) */
.oubkw-products-grid-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}

/* Horizontal card: 1/3 image | 2/3 content */
.oubkw-product-card {
    background: var(--oubkw-white);
    border-radius: 14px; border: 2px solid transparent;
    box-shadow: var(--oubkw-shadow);
    cursor: pointer; transition: var(--oubkw-t), max-height .25s ease;
    display: flex; flex-direction: row; align-items: stretch;
    position: relative; overflow: hidden;
    animation: oubkwFadeUp .3s ease both;
    min-height: 80px;
    max-height: 140px; /* keep cards compact; removed when description is expanded */
}
/* When description is expanded via "Voir plus" — lift the cap */
.oubkw-product-card:has(.oubkw-desc-expanded) { max-height: none; }
.oubkw-product-card.oubkw-desc-open           { max-height: none; } /* JS fallback */
.oubkw-product-card:hover    { transform: translateY(-2px); box-shadow: var(--oubkw-shadow-card); border-color: var(--oubkw-accent-light); }
.oubkw-product-card.selected { border-color: var(--oubkw-text); box-shadow: 0 4px 22px rgba(196,112,90,.2); }

/* Left: image strip — 1/3 width */
.oubkw-product-card-img {
    flex: 0 0 33%;
    max-width: 33%;
    border-radius: 12px 0 0 12px;
    background: var(--oubkw-bg-mid);
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem; overflow: hidden;
}
.oubkw-product-card-img img {
    width: 100%; height: 100%; object-fit: cover;
    border-radius: 12px 0 0 12px;
}

/* Right: content area — 2/3 width */
.oubkw-product-card-body {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; justify-content: center;
    padding: 10px 36px 10px 14px; gap: 3px;
}
.oubkw-product-card-name  { font-size: .82rem; font-weight: 600; color: var(--oubkw-text); line-height: 1.3; }
.oubkw-product-card-sub   {
    font-size: .72rem; color: var(--oubkw-text-soft); font-weight: 300; line-height: 1.4;
    /* Clamp to 2 lines — same behaviour as service description */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.oubkw-product-card-sub.oubkw-desc-expanded {
    display: block;
    overflow: visible;
    -webkit-line-clamp: unset;
}
/* "Show more / Show less" toggle — appears below the sub text when clamped */
.oubkw-prod-desc-toggle {
    background: none; border: none; padding: 0; margin-top: 1px;
    font-size: .68rem; color: var(--oubkw-accent); font-weight: 500;
    cursor: pointer; text-decoration: underline; line-height: 1;
    align-self: flex-start;
}
.oubkw-prod-desc-toggle:hover { color: var(--oubkw-text); }
.oubkw-product-card-price {
    font-family: var(--oubkw-font-display);
    font-size: .95rem; font-weight: 600; color: var(--oubkw-price-color);
    margin-top: 4px;
}
.oubkw-product-card-check {
    position: absolute; top: 50%; right: 10px;
    transform: translateY(-50%);
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--oubkw-bg-mid); border: 1.5px solid var(--oubkw-accent);
    display: flex; align-items: center; justify-content: center;
    font-size: .7rem; color: transparent; transition: var(--oubkw-t);
    flex-shrink: 0;
}
.oubkw-product-card.selected .oubkw-product-card-check {
    background: var(--oubkw-primary); border-color: var(--oubkw-text); color: #fff;
}
.oubkw-product-group-label {
    font-size: .68rem; font-weight: 700; letter-spacing: .15em;
    text-transform: uppercase; color: var(--oubkw-text-soft);
    margin: 20px 0 12px;
    display: flex; align-items: center; gap: 10px;
}
.oubkw-product-group-label::after { content: ''; flex: 1; height: 1px; background: var(--oubkw-bg-mid); }

.oubkw-products-footer {
    display: flex; align-items: center;
    justify-content: space-between; flex-wrap: wrap; gap: 12px;
    margin-top: 8px;
}
.oubkw-btn-skip {
    background: none; border: none;
    font-family: var(--oubkw-font-body); font-size: .8rem; font-weight: 500;
    color: var(--oubkw-text-soft); cursor: pointer;
    display: flex; align-items: center; gap: 6px;
    transition: var(--oubkw-t); padding: 0;
}
.oubkw-btn-skip:hover { color: var(--oubkw-text); }
.oubkw-btn-products-continue { width: auto; padding: 14px 28px; }

/* ══════════════════════════════════════════════════════
   STEP 5 — PAYMENT
══════════════════════════════════════════════════════ */
.oubkw-payment-options { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.oubkw-payment-option {
    border: 2px solid var(--oubkw-bg-dark);
    border-radius: 16px; padding: 18px 20px;
    cursor: pointer; transition: var(--oubkw-t);
    display: flex; align-items: flex-start; gap: 16px;
    background: var(--oubkw-white);
}
.oubkw-payment-option:hover    { border-color: var(--oubkw-accent); }
.oubkw-payment-option.selected { border-color: var(--oubkw-text); background: rgba(196,112,90,.03); }

.oubkw-payment-icon {
    width: 42px; height: 42px; border-radius: 12px;
    background: var(--oubkw-bg-mid);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; flex-shrink: 0;
}
.oubkw-payment-radio {
    width: 22px; height: 22px; border-radius: 50%;
    border: 2px solid var(--oubkw-accent); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    transition: var(--oubkw-t); margin-top: 2px; position: relative;
}
.oubkw-payment-option.selected .oubkw-payment-radio { border-color: var(--oubkw-text); }
.oubkw-payment-radio::after {
    content: ''; width: 10px; height: 10px; border-radius: 50%;
    background: var(--oubkw-primary); transform: scale(0); transition: var(--oubkw-t);
}
.oubkw-payment-option.selected .oubkw-payment-radio::after { transform: scale(1); }

.oubkw-payment-info { flex: 1; }
.oubkw-payment-title {
    font-size: .9rem; font-weight: 600; color: var(--oubkw-text);
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 3px; flex-wrap: wrap;
}
.oubkw-payment-badge {
    font-size: .62rem; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
    padding: 2px 8px; border-radius: 10px;
}
.oubkw-payment-badge--popular { background: rgba(196,112,90,.15); color: var(--oubkw-text); }
.oubkw-payment-badge--free    { background: rgba(122,140,110,.15); color: var(--oubkw-secondary); }
.oubkw-payment-badge--rebate  { background: rgba(34,197,94,.15);  color: #16a34a; }

/* Full-pay promo card — highlighted border + subtle green tint */
.oubkw-payment-option--promo {
    border-color: rgba(34,197,94,.45) !important;
    background: linear-gradient(135deg, rgba(34,197,94,.04) 0%, rgba(255,255,255,0) 60%);
    position: relative;
}
.oubkw-payment-option--promo::after {
    content: '⭐ ' attr(data-promo-label);
    position: absolute;
    top: -1px; right: 12px;
    font-size: .65rem; font-weight: 700; letter-spacing: .04em;
    background: #16a34a; color: #fff;
    padding: 1px 7px; border-radius: 0 0 6px 6px;
}
.oubkw-payment-option--promo.selected {
    border-color: #16a34a !important;
    box-shadow: 0 0 0 3px rgba(34,197,94,.18);
}

/* Saving row below the description */
.oubkw-rebate-saving-row {
    display: flex; align-items: center; gap: 6px;
    margin-top: 5px; font-size: .76rem;
}
.oubkw-rebate-saving-label { color: #16a34a; font-weight: 600; }
.oubkw-rebate-saving-amount {
    color: #16a34a; font-weight: 700;
    background: rgba(34,197,94,.12);
    padding: 1px 6px; border-radius: 4px;
}

/* Min-amount notice (shown when cart is below threshold) */
.oubkw-rebate-min-notice {
    font-size: .73rem; color: #b45309;
    background: rgba(251,191,36,.12);
    border-left: 3px solid #f59e0b;
    padding: 3px 7px; border-radius: 0 4px 4px 0;
    margin-top: 4px;
}

.oubkw-payment-desc   { font-size: .78rem; color: var(--oubkw-text-soft); font-weight: 300; line-height: 1.55; }
.oubkw-payment-amount {
    font-family: var(--oubkw-font-display);
    font-size: 1.15rem; font-weight: 600;
    color: var(--oubkw-text); margin-top: 4px;
}

.oubkw-deposit-bar { margin-top: 12px; }
.oubkw-deposit-bar-label {
    display: flex; justify-content: space-between;
    font-size: .73rem; color: var(--oubkw-text-soft); margin-bottom: 5px;
}
.oubkw-deposit-bar-track {
    height: 6px; border-radius: 3px;
    background: var(--oubkw-bg-dark); overflow: hidden;
}
.oubkw-deposit-bar-fill {
    height: 100%; border-radius: 3px;
    background: var(--oubkw-primary);
    transition: width .4s ease;
}

/* WooCommerce redirect notice (replaces the old mock card zone) */
.oubkw-wc-redirect-notice {
    display: none;
    align-items: center; gap: 8px;
    background: var(--oubkw-background);
    border-radius: 12px; border: 1.5px solid var(--oubkw-bg-dark);
    padding: 12px 16px; margin-top: 14px;
    font-size: .75rem; color: var(--oubkw-text-soft);
    animation: oubkwFadeUp .25s ease;
}
.oubkw-wc-redirect-notice.visible {
    display: flex;
}
.oubkw-wc-redirect-notice i {
    color: var(--oubkw-secondary);
    flex-shrink: 0;
}

.oubkw-final-recap { font-size: .82rem; }

.oubkw-btn-submit {
    width: 100%; padding: 17px 20px;
    border-radius: var(--oubkw-r-pill);
    background: var(--oubkw-primary);
    border: none; color: var(--oubkw-on-primary);
    font-family: var(--oubkw-font-body);
    font-size: .88rem; font-weight: 600;
    letter-spacing: .04em; cursor: pointer;
    transition: var(--oubkw-t);
    display: flex; align-items: center; justify-content: center; gap: 10px;
    box-shadow: 0 4px 20px rgba(196,112,90,.35); margin-top: 18px;
}
.oubkw-btn-submit:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 28px rgba(196,112,90,.45); }
.oubkw-btn-submit:disabled { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none; }

/* ══════════════════════════════════════════════════════
   STEP 6 — CONFIRMATION (full-width)
══════════════════════════════════════════════════════ */
.oubkw-confirmation-outer {
    max-width: 860px; margin: 0 auto;
    padding: 48px 20px 80px;
}

/* Status hero */
.oubkw-status-hero { text-align: center; margin-bottom: 40px; animation: oubkwFadeUp .7s cubic-bezier(.4,0,.2,1) both; }
.oubkw-status-icon-ring {
    width: 88px; height: 88px; border-radius: 50%;
    margin: 0 auto 20px;
    display: flex; align-items: center; justify-content: center;
    position: relative;
    background: linear-gradient(135deg, var(--oubkw-accent-light) 0%, var(--oubkw-bg-mid) 100%);
    box-shadow: 0 6px 28px rgba(196,112,90,.2);
}
.oubkw-status-icon-ring::before {
    content: ''; position: absolute; inset: -6px;
    border-radius: 50%; border: 2px dashed var(--oubkw-accent);
    animation: oubkwRingRotate 12s linear infinite;
}
@keyframes oubkwRingRotate { to { transform: rotate(360deg); } }
.oubkw-status-icon-ring i { font-size: 2rem; color: var(--oubkw-text); }

.oubkw-status-badge {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 16px; border-radius: 20px;
    font-size: .72rem; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
    background: rgba(196,112,90,.12); color: var(--oubkw-text);
    border: 1px solid rgba(196,112,90,.25);
    margin-bottom: 14px;
}
.oubkw-status-title {
    font-family: var(--oubkw-font-display);
    font-size: 2.2rem; font-weight: 600; color: var(--oubkw-text);
    line-height: 1.1; margin-bottom: 10px;
}
.oubkw-status-sub {
    font-size: .88rem; color: var(--oubkw-text-soft);
    font-weight: 300; line-height: 1.65;
    max-width: 480px; margin: 0 auto 20px;
}
.oubkw-ref-block {
    display: inline-flex; align-items: center; gap: 10px;
    background: var(--oubkw-white); border: 1.5px solid var(--oubkw-bg-dark);
    border-radius: 12px; padding: 10px 18px;
    font-size: .82rem; color: var(--oubkw-text-mid);
}
.oubkw-ref-block i { color: var(--oubkw-accent); }
.oubkw-ref-num {
    font-family: 'Courier New', monospace;
    font-size: .9rem; font-weight: 700;
    color: var(--oubkw-text); letter-spacing: .12em;
}
.oubkw-ref-copy-btn {
    background: none; border: none;
    color: var(--oubkw-text-soft); cursor: pointer;
    font-size: .8rem; padding: 2px 6px;
    border-radius: 6px; transition: var(--oubkw-t);
}
.oubkw-ref-copy-btn:hover { background: var(--oubkw-bg-mid); color: var(--oubkw-text); }

/* Timeline */
.oubkw-timeline-card {
    background: var(--oubkw-white);
    border-radius: var(--oubkw-r-card);
    box-shadow: var(--oubkw-shadow-card);
    padding: 28px; margin-bottom: 20px;
    animation: oubkwFadeUp .4s .1s ease both;
}
.oubkw-timeline-card-title {
    font-family: var(--oubkw-font-display);
    font-size: 1.15rem; font-weight: 600; color: var(--oubkw-text);
    margin-bottom: 20px; display: flex; align-items: center; gap: 10px;
}
.oubkw-timeline-card-title i { color: var(--oubkw-text); }

.oubkw-timeline { display: flex; flex-direction: column; position: relative; }
.oubkw-timeline::before {
    content: ''; position: absolute;
    left: 15px; top: 20px; bottom: 20px;
    width: 2px; background: var(--oubkw-bg-mid);
}
.oubkw-timeline-step {
    display: flex; gap: 18px; align-items: flex-start;
    padding: 0 0 22px; position: relative;
}
.oubkw-timeline-step:last-child { padding-bottom: 0; }
.oubkw-timeline-dot {
    width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; z-index: 1; font-size: .8rem; transition: var(--oubkw-t);
}
.oubkw-timeline-dot--done    { background: var(--oubkw-secondary); color: #fff; box-shadow: 0 2px 10px rgba(122,140,110,.3); }
.oubkw-timeline-dot--active  { background: var(--oubkw-primary); color: #fff; box-shadow: 0 2px 14px rgba(196,112,90,.35); animation: oubkwDotPulse 2s ease infinite; }
.oubkw-timeline-dot--pending { background: var(--oubkw-bg-mid); color: var(--oubkw-accent); border: 2px solid var(--oubkw-accent-light); }
@keyframes oubkwDotPulse { 0%,100%{box-shadow:0 2px 14px rgba(196,112,90,.35);}50%{box-shadow:0 2px 24px rgba(196,112,90,.55);} }
.oubkw-timeline-step--pending .oubkw-timeline-step-title { color: var(--oubkw-text-soft); }
.oubkw-timeline-body { flex: 1; padding-top: 4px; }
.oubkw-timeline-step-title { font-size: .88rem; font-weight: 600; color: var(--oubkw-text); margin-bottom: 2px; }
.oubkw-timeline-step-desc  { font-size: .76rem; color: var(--oubkw-text-soft); font-weight: 300; line-height: 1.5; }
.oubkw-timeline-step-time  { font-size: .68rem; color: var(--oubkw-accent); margin-top: 3px; display: flex; align-items: center; gap: 4px; }

/* Appointment recap card */
.oubkw-appt-card {
    background: var(--oubkw-white);
    border-radius: var(--oubkw-r-card);
    box-shadow: var(--oubkw-shadow-card);
    overflow: hidden; margin-bottom: 20px;
    animation: oubkwFadeUp .4s .2s ease both;
}
.oubkw-appt-card-header {
    background: var(--oubkw-primary);
    padding: 20px 24px 16px; color: var(--oubkw-on-primary);
    display: flex; align-items: flex-start;
    justify-content: space-between; gap: 16px;
}
.oubkw-appt-card-header h3 { font-family: var(--oubkw-font-display); font-size: 1.2rem; font-weight: 600; margin-bottom: 2px; }
.oubkw-appt-card-header p  { font-size: .73rem; opacity: .8; }
.oubkw-appt-card-header-icon { font-size: 2rem; opacity: .6; }

.oubkw-appt-grid { display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 540px) { .oubkw-appt-grid { grid-template-columns: 1fr; } }
.oubkw-appt-cell {
    padding: 16px 20px;
    border-right: 1px solid var(--oubkw-bg-mid);
    border-bottom: 1px solid var(--oubkw-bg-mid);
}
.oubkw-appt-cell:nth-child(even) { border-right: none; }
.oubkw-appt-cell:nth-last-child(-n+2) { border-bottom: none; }
.oubkw-appt-cell-label {
    font-size: .67rem; font-weight: 700; letter-spacing: .13em;
    text-transform: uppercase; color: var(--oubkw-text-soft);
    margin-bottom: 5px; display: flex; align-items: center; gap: 6px;
}
.oubkw-appt-cell-label i { color: var(--oubkw-accent); }
.oubkw-appt-cell-value { font-size: .88rem; font-weight: 500; color: var(--oubkw-text); }
.oubkw-appt-cell-value .hi {
    font-family: var(--oubkw-font-display);
    font-size: 1.05rem; color: var(--oubkw-text); font-weight: 600;
}

.oubkw-appt-services { padding: 16px 20px; border-top: 1px solid var(--oubkw-bg-mid); }
.oubkw-appt-service-row {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 0; border-bottom: 1px solid var(--oubkw-bg-mid); font-size: .8rem;
}
.oubkw-appt-service-row:last-child { border-bottom: none; }
.oubkw-appt-service-row .emoji { font-size: .95rem; }
.oubkw-appt-service-row .name  { flex: 1; color: var(--oubkw-text-mid); }
.oubkw-appt-service-row .dur   { font-size: .7rem; color: var(--oubkw-text-soft); background: var(--oubkw-bg-mid); padding: 2px 8px; border-radius: 10px; }
.oubkw-appt-service-row .price { font-family: var(--oubkw-font-display); font-size: .9rem; color: var(--oubkw-price-color); font-weight: 600; }

.oubkw-appt-totals { padding: 14px 20px; border-top: 2px solid var(--oubkw-bg-mid); }
.oubkw-total-row { display: flex; justify-content: space-between; font-size: .82rem; margin-bottom: 5px; }
.oubkw-total-row .label { color: var(--oubkw-text-soft); }
.oubkw-total-row .val   { color: var(--oubkw-text); font-weight: 500; }
.oubkw-total-row.grand  { padding-top: 8px; border-top: 1px solid var(--oubkw-bg-mid); margin-top: 4px; }
.oubkw-total-row.grand .label { font-weight: 600; color: var(--oubkw-text); font-size: .88rem; }
.oubkw-total-row.grand .val   { font-family: var(--oubkw-font-display); font-size: 1.1rem; color: var(--oubkw-price-color); font-weight: 600; }

/* Email notice */
.oubkw-email-notice {
    text-align: center; font-size: .82rem;
    color: var(--oubkw-text-soft); font-weight: 300;
    padding: 12px; margin-bottom: 20px;
}
.oubkw-email-notice strong { color: var(--oubkw-text); }

/* Actions card */
.oubkw-actions-card {
    background: var(--oubkw-white);
    border-radius: var(--oubkw-r-card);
    box-shadow: var(--oubkw-shadow-card);
    padding: 24px 28px; margin-bottom: 20px;
    animation: oubkwFadeUp .4s .4s ease both;
}
.oubkw-actions-card-title {
    font-family: var(--oubkw-font-display);
    font-size: 1.1rem; font-weight: 600; color: var(--oubkw-text);
    margin-bottom: 16px; display: flex; align-items: center; gap: 9px;
}
.oubkw-actions-card-title i { color: var(--oubkw-text); }
.oubkw-action-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.oubkw-action-btn {
    padding: 11px 18px; border-radius: 12px;
    border: 1.5px solid var(--oubkw-bg-dark);
    background: var(--oubkw-background);
    font-family: var(--oubkw-font-body); font-size: .8rem; font-weight: 500;
    color: var(--oubkw-text-mid); cursor: pointer; transition: var(--oubkw-t);
    display: flex; align-items: center; gap: 8px;
}
.oubkw-action-btn:hover { border-color: var(--oubkw-text); color: var(--oubkw-text); background: rgba(196,112,90,.04); }
.oubkw-action-btn--danger:hover { border-color: #d64545; color: #d64545; background: rgba(214,69,69,.04); }
/* Home link styled as button */
a.oubkw-action-btn { text-decoration: none; }
.oubkw-action-btn--home:hover { border-color: var(--oubkw-secondary); color: var(--oubkw-secondary); background: rgba(122,140,110,.05); }

/* ── Calendar sub-menu ───────────────────────────────────────── */
.oubkw-action-cal-wrap { position: relative; }
.oubkw-cal-chevron {
    font-size: .65rem; transition: transform .2s ease;
    transform: rotate(0deg);
}
#oubkwCalBtn[aria-expanded="true"] .oubkw-cal-chevron { transform: rotate(180deg); }
.oubkw-cal-menu {
    position: absolute; bottom: calc(100% + 8px); left: 0;
    background: var(--oubkw-white);
    border: 1.5px solid var(--oubkw-bg-dark);
    border-radius: 12px;
    box-shadow: 0 6px 24px rgba(0,0,0,.10);
    padding: 6px;
    min-width: 210px;
    z-index: 200;
}
.oubkw-cal-option {
    display: flex; align-items: center;
    width: 100%; padding: 10px 14px;
    background: none; border: none; border-radius: 8px;
    font-family: var(--oubkw-font-body); font-size: .82rem;
    font-weight: 500; color: var(--oubkw-text-mid);
    cursor: pointer; text-align: left; transition: var(--oubkw-t);
}
.oubkw-cal-option:hover { background: rgba(196,112,90,.06); color: var(--oubkw-text); }

/* ── Share toast ─────────────────────────────────────────────── */
.oubkw-share-toast {
    position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(12px);
    background: #2C1F14; color: #fff;
    padding: 11px 22px; border-radius: 50px;
    font-family: var(--oubkw-font-body); font-size: .82rem; font-weight: 500;
    white-space: pre-wrap; max-width: 90vw; text-align: center;
    box-shadow: 0 4px 20px rgba(0,0,0,.18);
    opacity: 0; transition: opacity .25s ease, transform .25s ease;
    z-index: 9999; pointer-events: none;
}
.oubkw-share-toast--visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Mobile: hide sidebar, show bottom bar */
@media (max-width: 900px) {
    .oubkw-sidebar { display: none !important; }
}

/* ══════════════════════════════════════════════════════
   ANIMATIONS
══════════════════════════════════════════════════════ */
@keyframes oubkwFadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes oubkwFadeIn {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}
.oubkw-service-card:nth-child(2) { animation-delay: .04s; }
.oubkw-service-card:nth-child(3) { animation-delay: .08s; }
.oubkw-service-card:nth-child(4) { animation-delay: .12s; }
.oubkw-service-card:nth-child(5) { animation-delay: .16s; }
.oubkw-service-card:nth-child(6) { animation-delay: .20s; }

/* ══════════════════════════════════════════════════════
   SERVICE SUGGESTION CHIPS (Step 1)
══════════════════════════════════════════════════════ */
.oubkw-service-suggestions {
    /* full-width row below emoji + title + check */
    flex-basis: 100%;
    width: 100%;
    padding: 10px 12px 12px;
    border-top: 1px dashed rgba(196,112,90,.25);
    background: rgba(250,246,241,.6);
    border-radius: 0 0 12px 12px;
}
.oubkw-sugg-row { margin-bottom: 8px; }
.oubkw-sugg-row:last-child { margin-bottom: 0; }
.oubkw-sugg-label {
    display: block;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--oubkw-text-soft, #aaa);
    margin-bottom: 5px;
}
.oubkw-sugg-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Chip base */
.oubkw-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border-radius: 20px;
    font-size: .74rem;
    font-weight: 500;
    cursor: pointer;
    border: 1.5px solid;
    transition: background .18s, color .18s, transform .1s;
    line-height: 1.3;
    user-select: none;
}
.oubkw-chip em { font-style: normal; opacity: .75; font-size: .7rem; }
.oubkw-chip:hover { transform: translateY(-1px); }
.oubkw-chip:active { transform: translateY(0); }

/* Product chip */
.oubkw-chip--product {
    background: #fdf8f3;
    border-color: var(--oubkw-primary, #C4705A);
    color: var(--oubkw-text);
}
.oubkw-chip--product:hover {
    background: var(--oubkw-primary, #C4705A);
    color: #fff;
}
.oubkw-chip--product.added {
    background: var(--oubkw-primary, #C4705A);
    color: #fff;
    cursor: default;
}

/* Service upsell chip */
.oubkw-chip--service {
    background: #f0f4ee;
    border-color: var(--oubkw-secondary, #7A8C6E);
    color: var(--oubkw-secondary, #7A8C6E);
}
.oubkw-chip--service:hover {
    background: var(--oubkw-secondary, #7A8C6E);
    color: #fff;
}
.oubkw-chip--service.added {
    background: var(--oubkw-secondary, #7A8C6E);
    color: #fff;
    cursor: default;
}

/* ══════════════════════════════════════════════════════
   RECOMMANDATIONS, ENCART VEDETTE ET LISTE COMPACTE (ch.13)
   Refonte visuelle des suggestions. La primaire ne sert
   qu'au fond, aux bordures et aux boutons, jamais au texte
   ni aux icônes lisibles (couleur de texte : var(--oubkw-text)).
══════════════════════════════════════════════════════ */

/* Encart vedette, affiché sur la carte hôte repliée */
.oubkw-reco-teaser {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    padding: 8px 10px;
    border: 1px dashed var(--oubkw-accent, #D8C3A5);
    border-radius: 12px;
    background: rgba(250, 246, 241, .6);
    cursor: pointer;
    transition: border-color var(--oubkw-t, .24s), box-shadow var(--oubkw-t, .24s);
}
.oubkw-reco-teaser:hover {
    border-color: var(--oubkw-primary, #C4705A);
    box-shadow: var(--oubkw-shadow);
}
.oubkw-reco-teaser-thumb {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    overflow: hidden;
    background: var(--oubkw-bg-mid, #F2EBE0);
    font-size: 1.25rem;   /* repli emoji quand l'image manque */
    line-height: 1;
}
.oubkw-reco-teaser-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.oubkw-reco-teaser-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.oubkw-reco-teaser-text {
    font-style: italic;
    font-size: .76rem;
    line-height: 1.3;
    color: var(--oubkw-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.oubkw-reco-teaser-meta {
    font-size: .8rem;
    color: var(--oubkw-text);
}
.oubkw-reco-teaser-meta strong { font-weight: 600; }
.oubkw-reco-teaser-cta {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 32px;
    padding: 6px 14px;
    border: 0;
    border-radius: var(--oubkw-r-pill, 50px);
    background: var(--oubkw-primary, #C4705A);
    color: var(--oubkw-on-primary, #fff);
    font-size: .76rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background var(--oubkw-t, .24s), transform .1s;
}
.oubkw-reco-teaser-cta:hover { background: var(--oubkw-primary-dark, #A85843); }
.oubkw-reco-teaser-cta:active { transform: translateY(1px); }
.oubkw-reco-teaser-cta i { font-size: .62rem; }

/* Liste compacte, affichée sur la carte hôte dépliée */
.oubkw-sugg-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.oubkw-sugg-item {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    min-height: 44px;   /* cible tactile confortable */
    padding: 7px 9px;
    border: 1px solid var(--oubkw-accent, #D8C3A5);
    border-radius: 12px;
    background: var(--oubkw-white, #fff);
    color: var(--oubkw-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color var(--oubkw-t, .24s), box-shadow var(--oubkw-t, .24s), transform .1s;
}
.oubkw-sugg-item:hover {
    box-shadow: var(--oubkw-shadow);
    transform: translateY(-1px);
}
.oubkw-sugg-item:active { transform: translateY(0); }
.oubkw-sugg-item--service { border-color: var(--oubkw-secondary-light, #B5C4A8); }
.oubkw-sugg-item--product { border-color: var(--oubkw-primary-light, #E8A898); }
.oubkw-sugg-item.added {
    border-color: var(--oubkw-primary, #C4705A);
    background: var(--oubkw-accent-light, #EDD9C4);
    cursor: pointer;
}
.oubkw-sugg-item-thumb {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    overflow: hidden;
    background: var(--oubkw-bg-mid, #F2EBE0);
    font-size: 1.2rem;   /* repli emoji quand l'image manque */
    line-height: 1;
}
.oubkw-sugg-item-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.oubkw-sugg-item-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.oubkw-sugg-item-name {
    font-size: .78rem;
    font-weight: 500;
    color: var(--oubkw-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.oubkw-sugg-item-price {
    font-size: .74rem;
    color: var(--oubkw-text);
    opacity: .8;   /* prix non gras, lisible mais discret */
}
.oubkw-sugg-item-add {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--oubkw-primary, #C4705A);
    color: var(--oubkw-on-primary, #fff);
    font-size: .7rem;
}
.oubkw-sugg-item.added .oubkw-sugg-item-add { background: var(--oubkw-secondary, #7A8C6E); }

/* Marqueur vedette : badge à fond primaire, étoile blanche */
.oubkw-sugg-item-star {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    margin-left: 5px;
    vertical-align: middle;
    border-radius: 50%;
    background: var(--oubkw-primary, #C4705A);
}
.oubkw-sugg-item-star::before {
    content: '\f005';   /* fa-star */
    font-family: 'Font Awesome 6 Free', 'FontAwesome';
    font-weight: 900;
    font-size: .56rem;
    color: var(--oubkw-on-primary, #fff);
}

/* Accessibilité clavier */
.oubkw-reco-teaser-cta:focus-visible,
.oubkw-sugg-item:focus-visible {
    outline: 2px solid var(--oubkw-primary, #C4705A);
    outline-offset: 2px;
}

/* Une seule colonne pleine largeur sous 560 px */
@media (max-width: 560px) {
    .oubkw-sugg-list { grid-template-columns: 1fr; }
}

/* Respect du mouvement réduit */
@media (prefers-reduced-motion: reduce) {
    .oubkw-reco-teaser,
    .oubkw-reco-teaser-cta,
    .oubkw-sugg-item { transition: none; }
    .oubkw-reco-teaser:hover,
    .oubkw-sugg-item:hover,
    .oubkw-sugg-item:active { transform: none; }
}

/* ══════════════════════════════════════════════════════
   CART SIDEBAR — PRODUCT ITEMS + QTY CONTROLS
══════════════════════════════════════════════════════ */

/* Section dividers in sidebar */
.oubkw-summary-section-label {
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--oubkw-secondary, #7A8C6E);
    padding: 8px 0 4px;
    border-top: 1px solid var(--oubkw-bg-dark, #f0ebe4);
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.oubkw-summary-section-label:first-child { border-top: none; margin-top: 0; padding-top: 0; }
.oubkw-summary-section-label--products { color: var(--oubkw-text); }

/* Product row in sidebar */
.oubkw-summary-item--product {
    align-items: flex-start;
}
.oubkw-summary-item--product .oubkw-summary-item-info {
    flex: 1;
}
.oubkw-summary-item-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}

/* Qty control */
.oubkw-qty-control {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 4px;
}
.oubkw-qty-btn,
.oubkw-svc-qty-btn {
    width: 22px;
    height: 22px;
    border: 1.5px solid var(--oubkw-bg-dark, #e8ddd0);
    background: var(--oubkw-background, #faf6f1);
    border-radius: 50%;
    font-size: .9rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: var(--oubkw-text-mid, #6b5b4e);
    transition: background .15s, border-color .15s;
    flex-shrink: 0;
}
.oubkw-qty-btn:hover,
.oubkw-svc-qty-btn:not(:disabled):hover {
    background: var(--oubkw-primary, #C4705A);
    border-color: var(--oubkw-primary, #C4705A);
    color: #fff;
}
/* Bouton « + » grisé : plus de temps libre sur le créneau choisi (gate
   préventif) ou plafond quantity_max atteint. */
.oubkw-svc-qty-btn:disabled {
    opacity: .4;
    cursor: not-allowed;
}
.oubkw-qty-val {
    font-size: .8rem;
    font-weight: 700;
    min-width: 16px;
    text-align: center;
    color: var(--oubkw-text, #2C1F14);
}

/* Indice toujours visible sous le contrôle de quantité quand le « + » est grisé
   faute de temps libre sur le créneau. Aucun survol requis, donc lisible au doigt
   sur mobile. Texte en var(--oubkw-text), jamais var(--oubkw-primary). */
.oubkw-qty-slot-full {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 5px;
    font-size: .72rem;
    line-height: 1.35;
    color: var(--oubkw-text, #2C1F14);
    opacity: .85;
    text-align: left;
}
.oubkw-qty-slot-full .fa-circle-info {
    margin-top: 2px;
    flex-shrink: 0;
    opacity: .7;
}

/* Message bloquant « créneau pris » au paiement (cas rare de concurrence).
   Toujours visible, lisible sur mobile. Texte en var(--oubkw-text). */
.oubkw-slot-taken-notice {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 12px;
    padding: 11px 13px;
    border-radius: 10px;
    border: 1px solid var(--oubkw-bg-dark, #e8ddd0);
    background: var(--oubkw-accent-light, #f7efe7);
    color: var(--oubkw-text, #2C1F14);
    font-size: .85rem;
    line-height: 1.4;
}
.oubkw-slot-taken-notice .fa-triangle-exclamation {
    flex-shrink: 0;
    opacity: .8;
}
.oubkw-slot-taken-msg { flex: 1 1 auto; }
.oubkw-slot-retime {
    flex-shrink: 0;
    border: 0;
    border-radius: 8px;
    padding: 7px 12px;
    background: var(--oubkw-primary, #C4705A);
    color: #fff;
    font-size: .82rem;
    cursor: pointer;
    transition: opacity .15s;
}
.oubkw-slot-retime:hover { opacity: .9; }

/* Remove product button */
.oubkw-product-remove {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 4px;
    color: var(--oubkw-text-soft, #ccc);
    font-size: .75rem;
    line-height: 1;
    transition: color .15s;
}
.oubkw-product-remove:hover { color: #d64545; }

/* Subtotal rows in step-5 sidebar */
.oubkw-summary-row--subtotal {
    display: flex;
    justify-content: space-between;
    font-size: .75rem;
    color: var(--oubkw-text-mid, #6b5b4e);
    padding: 3px 0;
}

/* ══════════════════════════════════════════════════════
   STEP 4 — ALL-ADDED STATE
══════════════════════════════════════════════════════ */
.oubkw-all-added {
    text-align: center;
    padding: 40px 20px;
    color: var(--oubkw-secondary, #7A8C6E);
}
.oubkw-all-added i {
    font-size: 2.5rem;
    display: block;
    margin-bottom: 12px;
    opacity: .8;
}
.oubkw-all-added p {
    font-size: .9rem;
    font-weight: 500;
    margin: 0;
}

/* Product card "In cart" badge */
.oubkw-product-card-check--cart {
    background: var(--oubkw-secondary, #7A8C6E) !important;
    color: #fff !important;
    font-size: .72rem;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 20px;
}

/* ============================================================
   SERVICE MEDIA CAROUSEL
   ============================================================ */

/* Full-width top media block inside the flex card */
/* ── Media zone: same left-column position and size as the emoji zone ── */
.oubkw-service-media {
    width: 110px;          /* matches .oubkw-service-emoji width */
    flex-shrink: 0;
    align-self: stretch;   /* fill full card height */
    overflow: hidden;
    /* Only left corners match the card radius; right side is flat */
    border-radius: var(--oubkw-r-card) 0 0 var(--oubkw-r-card);
    background: var(--oubkw-bg-mid);
    position: relative;
}

/* Carousel fills the media column entirely */
.oubkw-service-media .oubkw-carousel {
    height: 100%;
    min-height: 90px;
    border-radius: 0;
}

.oubkw-carousel {
    position: relative;
    width: 100%;
    height: 140px;   /* used when carousel is outside a media column (legacy) */
    overflow: hidden;
    background: var(--oubkw-bg-mid);
    user-select: none;
}

.oubkw-carousel-track {
    position: relative;
    width: 100%;
    height: 100%;
}

.oubkw-carousel-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.35s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.oubkw-carousel-slide.active {
    opacity: 1;
    z-index: 1;
}

.oubkw-carousel-media {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    display: block;
    cursor: zoom-in;
}

/* Video play icon overlay */
.oubkw-carousel-play-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: rgba(255,255,255,0.85);
    pointer-events: none;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

/* Prev / Next buttons */
.oubkw-carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    background: rgba(0,0,0,0.45);
    border: none;
    color: #fff;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    cursor: pointer;
    transition: background 0.2s;
    padding: 0;
}
.oubkw-carousel-btn:hover { background: rgba(0,0,0,0.7); }
.oubkw-carousel-prev { left: 6px; }
.oubkw-carousel-next { right: 6px; }

/* Dots */
.oubkw-carousel-dots {
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    display: flex;
    gap: 5px;
}

.oubkw-carousel-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,0.5);
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}

.oubkw-carousel-dot.active {
    background: #fff;
    transform: scale(1.3);
}

/* Zoom button */
.oubkw-carousel-zoom {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 5;
    background: rgba(0,0,0,0.4);
    border: none;
    color: #fff;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s, opacity 0.2s;
    opacity: 0;
}

.oubkw-carousel:hover .oubkw-carousel-zoom { opacity: 1; }
/* Always show zoom button on touch devices (no hover available) */
@media (hover: none) {
    .oubkw-carousel-zoom { opacity: 0.82; }
}

/* ============================================================
   LIGHTBOX OVERLAY
   ============================================================ */

.oubkw-lightbox-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(0,0,0,0.92);
    /* Centre the media */
    align-items: center;
    justify-content: center;
}

/* jQuery fadeIn sets display:block; override to keep flex layout */
.oubkw-lightbox-overlay.oubkw-lightbox-visible {
    display: flex !important;
}

.oubkw-lightbox-media-wrap {
    position: relative;
    max-width: 90vw;
    max-height: 85vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.oubkw-lightbox-media {
    max-width: 90vw;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.6);
    display: block;
}

.oubkw-lightbox-close {
    position: fixed;
    top: 16px;
    right: 20px;
    background: rgba(255,255,255,0.15);
    border: none;
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.2s;
    z-index: 1;
    padding: 0;
}
.oubkw-lightbox-close:hover { background: rgba(255,255,255,0.3); }

.oubkw-lightbox-btn {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.15);
    border: none;
    color: #fff;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.2s;
    z-index: 1;
    padding: 0;
}
.oubkw-lightbox-btn:hover { background: rgba(255,255,255,0.3); }
.oubkw-lightbox-prev { left: 16px; }
.oubkw-lightbox-next { right: 16px; }

.oubkw-lightbox-counter {
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255,255,255,0.7);
    font-size: 0.85rem;
    z-index: 1;
}

/* Prevent body scroll when lightbox is open */
body.oubkw-lightbox-open {
    overflow: hidden;
}

/* ══════════════════════════════════════════════════════
   MOBILE PROGRESS — COMPACT LABEL + CIRCLES-ONLY
══════════════════════════════════════════════════════ */
/* Compact text label shown above the dots on mobile */
.oubkw-progress-mobile-label {
    display: none;
    text-align: center;
    padding: 8px 16px 0;
    font-size: .72rem; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
    color: var(--oubkw-text);
}

@media (max-width: 640px) {
    .oubkw-progress-mobile-label { display: block; }

    .oubkw-progress-bar {
        justify-content: center;
        gap: 0;
        padding: 8px 12px 10px;
    }
    .oubkw-progress-step {
        flex: 0 0 auto;
        min-width: 0;
        padding: 4px 6px;
        gap: 0;
        flex-direction: column;
        align-items: center;
        border-bottom: none;
        position: relative;
    }
    /* Connector line between circles */
    .oubkw-progress-step:not(:last-child)::after {
        content: '';
        position: absolute;
        right: -6px; top: 50%; transform: translateY(-50%) translateY(-2px);
        width: 12px; height: 2px;
        background: var(--oubkw-bg-dark);
        border-radius: 2px;
    }
    .oubkw-progress-step.done::after,
    .oubkw-progress-step.completed::after {
        background: var(--oubkw-secondary);
    }
    /* Hide text labels on mobile — step number circle is enough */
    .oubkw-step-label { display: none; }
    /* Border-bottom indicator now lives on the circle */
    .oubkw-progress-step.active .oubkw-step-num {
        box-shadow: 0 0 0 3px rgba(196,112,90,.18);
        transform: scale(1.15);
    }
}

/* ══════════════════════════════════════════════════════
   MOBILE: STICKY CART TRIGGER BUTTON
══════════════════════════════════════════════════════ */
.oubkw-mobile-cart-btn {
    display: none; /* shown by JS via --visible class on ≤900px */
    position: fixed;
    bottom: 20px; right: 20px;
    z-index: 900;
    background: var(--oubkw-primary);
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 12px 18px 12px 14px;
    box-shadow: 0 6px 24px rgba(196,112,90,.45);
    align-items: center; gap: 8px;
    font-family: var(--oubkw-font-body);
    font-size: .85rem; font-weight: 700;
    cursor: pointer;
    transition: transform .2s, box-shadow .2s, opacity .25s;
    opacity: 0; pointer-events: none;
    white-space: nowrap;
}
.oubkw-mobile-cart-btn.oubkw-mobile-cart-btn--visible {
    opacity: 1; pointer-events: auto;
}
.oubkw-mobile-cart-btn:active { transform: scale(.96); }

.oubkw-mobile-cart-count {
    background: #fff;
    color: var(--oubkw-text);
    border-radius: 50%;
    min-width: 20px; height: 20px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .68rem; font-weight: 800;
    line-height: 1;
}
.oubkw-mobile-cart-count:empty { display: none; }
.oubkw-mobile-cart-total { font-size: .85rem; }
.oubkw-mobile-cart-chevron { font-size: .65rem; opacity: .8; }

@media (max-width: 900px) {
    .oubkw-mobile-cart-btn { display: flex; }
}

/* Hide on desktop even if --visible is set */
@media (min-width: 901px) {
    .oubkw-mobile-cart-btn { display: none !important; }
}

/* ══════════════════════════════════════════════════════
   MOBILE: SLIDE-IN CART PANEL
══════════════════════════════════════════════════════ */
.oubkw-cart-panel {
    position: fixed;
    top: 0; right: -420px;
    width: 100%; max-width: 400px;
    height: 100%; max-height: 100dvh;
    z-index: 1100;
    background: var(--oubkw-background);
    box-shadow: -6px 0 40px rgba(44,31,20,.18);
    display: flex; flex-direction: column;
    transition: right .32s cubic-bezier(.4,0,.2,1);
    overflow: hidden;
}
.oubkw-cart-panel.open { right: 0; }

.oubkw-cart-panel-overlay {
    position: fixed; inset: 0;
    z-index: 1099;
    background: rgba(44,31,20,.48);
    backdrop-filter: blur(3px);
    opacity: 0; pointer-events: none;
    transition: opacity .32s;
}
.oubkw-cart-panel-overlay.open { opacity: 1; pointer-events: auto; }

.oubkw-cart-panel-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--oubkw-bg-mid);
    background: var(--oubkw-white);
    flex-shrink: 0;
}
.oubkw-cart-panel-header h3 {
    margin: 0;
    font-family: var(--oubkw-font-display);
    font-size: 1.1rem; font-weight: 600; color: var(--oubkw-text);
    display: flex; align-items: center; gap: 8px;
}
.oubkw-cart-panel-close {
    background: var(--oubkw-bg-mid); border: none;
    width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .9rem; color: var(--oubkw-text-soft);
    cursor: pointer; transition: background .15s, color .15s;
}
.oubkw-cart-panel-close:hover { background: var(--oubkw-accent-light); color: var(--oubkw-text); }

.oubkw-cart-panel-body {
    flex: 1; overflow-y: auto;
    padding: 16px 18px 80px;
    -webkit-overflow-scrolling: touch;
}
/* Prevent body scroll when panel is open */
body.oubkw-panel-open { overflow: hidden; }

/* ══════════════════════════════════════════════════════
   PAYMENT BREAKDOWN SIDEBAR ROWS (step 5)
══════════════════════════════════════════════════════ */
.oubkw-payment-breakdown { margin-top: 12px; }
.oubkw-payment-breakdown-inner {
    border-radius: 12px;
    border: 1px solid var(--oubkw-bg-dark);
    overflow: hidden;
}
.oubkw-bd-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 9px 14px;
    font-size: .8rem;
    border-bottom: 1px solid var(--oubkw-bg-mid);
}
.oubkw-bd-row:last-child { border-bottom: none; }
.oubkw-bd-label {
    display: flex; align-items: center; gap: 6px;
    color: var(--oubkw-text-mid); font-weight: 500;
}
.oubkw-bd-label i { color: var(--oubkw-accent); }
.oubkw-bd-amount {
    font-family: var(--oubkw-font-display);
    font-weight: 600; font-size: .88rem;
    color: var(--oubkw-text);
}
/* "Now" row — prominent */
.oubkw-bd-row--now {
    background: rgba(196,112,90,.07);
}
.oubkw-bd-amount--now { color: var(--oubkw-price-color); font-size: .95rem; }
/* "Later" row */
.oubkw-bd-amount--later { color: var(--oubkw-text-soft); }
/* Savings row */
.oubkw-bd-row--save { background: rgba(34,197,94,.06); }
.oubkw-bd-amount--save { color: #16a34a; }
/* Salon row */
.oubkw-bd-amount--salon { color: var(--oubkw-secondary); }

/* ══════════════════════════════════════════════════════
   GLOBAL MOBILE IMPROVEMENTS
══════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    /* Step title + sub */
    .oubkw-section-title { font-size: 1.55rem; }

    /* Form: stack all cols on mobile */
    .oubkw-booking-form .col-md-6 { flex: 0 0 100%; max-width: 100%; }

    /* Payment options: stack vertically and ensure full width */
    .oubkw-payment-options { flex-direction: column; }
    .oubkw-payment-option  { width: 100% !important; }

    /* Card blocks: reduce padding */
    .oubkw-card-block { padding: 18px 16px; }

    /* Slots grid: more columns on small screens */
    .oubkw-slots-grid { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; }

    /* Continue button: full width */
    .oubkw-btn-continue { width: 100%; justify-content: center; }

    /* Guarantees: compact */
    .oubkw-guarantees { gap: 8px; }
    .oubkw-guarantee-item { font-size: .75rem; }

    /* Filter tabs: wrap on multiple rows — full width, no horizontal scroll */
    .oubkw-filter-tabs {
        flex-wrap: wrap;
        overflow-x: hidden;
        width: 100%;
        padding-bottom: 4px;
    }
    /* Strip the decorative container (rounded corners, border, background) always
       on mobile — the desktop `:has()` rule that adds them should not apply here */
    .oubkw-filter-tabs,
    .oubkw-filter-tabs:has(+ .oubkw-subcats-row),
    .oubkw-filter-tabs:has(+ .oubkw-subcats-row:not([style*="display:none"]):not([style*="display: none"])) {
        border-radius: 0 !important;
        border: none !important;
        background: transparent !important;
        padding: 0 0 4px !important;
        margin-bottom: 0 !important;
    }
    /* Category tabs grow evenly to fill each row — balanced, app-like look */
    .oubkw-category-tab { flex: 1 1 auto; min-width: 0; }
    /* Sub-cat row: wrap on multiple rows on mobile — flat corners, full width */
    .oubkw-subcats-row {
        flex-wrap: wrap;
        overflow-x: hidden;
        width: 100%;
        padding: 8px 12px;
        margin-top: -10px;
        border-radius: 0;
    }
    /* Sub-cat pills: shrink to content, allow text to wrap if extremely long */
    .oubkw-subcat-tab {
        flex: 0 1 auto;
        white-space: normal;
        word-break: break-word;
        font-size: .75rem;
        padding: 4px 12px;
    }
}

@media (max-width: 540px) {
    /* Section title even smaller */
    .oubkw-section-title { font-size: 1.35rem; }

    /* Services grid + service card: guarantee full width, no overflow */
    .oubkw-services-grid {
        width: 100%;
        overflow-x: hidden;
    }
    .oubkw-service-card {
        width: 100%;
        min-width: 0;
        overflow: hidden;
    }

    /* Service card: reduce content padding */
    .oubkw-service-content { padding: 12px 12px; }
    .oubkw-service-name    { font-size: 1rem; }

    /* Media zone: same narrow width as emoji on small screens */
    .oubkw-service-media { width: 80px; }

    /* Calendar: compact day cells */
    .oubkw-calendar { font-size: .8rem; }
    .oubkw-day {
        width: 36px; height: 36px;
        font-size: .78rem;
    }
    .oubkw-calendar-header { padding: 10px 12px; }
    .oubkw-calendar-header .oubkw-month-title { font-size: .95rem; }

    /* Slot: compact */
    .oubkw-slot { min-height: 44px; padding: 6px 4px; font-size: .78rem; }

    /* Summary items: smaller price */
    .oubkw-summary-item-price { font-size: .82rem; }

    /* Final recap: tighter */
    .oubkw-recap-row { padding: 7px 12px; }

    /* Progress bar section: reduce top/bottom padding */
    .oubkw-booking-main { padding: 20px 12px 72px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   SERVICE QUICK-SEARCH  (step 1)
   ══════════════════════════════════════════════════════════════════════ */
.oubkw-service-search-wrap {
    position: relative;
    margin-bottom: 14px;
}

.oubkw-service-search-inner {
    position: relative;
    display: flex;
    align-items: center;
}

.oubkw-service-search-icon {
    position: absolute;
    left: 14px;
    color: var(--oubkw-text-muted, #8C7B6B);
    font-size: 13px;
    pointer-events: none;
}

.oubkw-service-search-input {
    width: 100%;
    padding: 10px 38px 10px 38px;
    border: 1.5px solid rgba(196,112,90,.25);
    border-radius: 30px;
    background: var(--oubkw-bg, #FFFAF7);
    color: var(--oubkw-text, #2C1F14);
    font-size: 13.5px;
    transition: border-color .2s, box-shadow .2s;
    outline: none;
}
.oubkw-service-search-input:focus {
    border-color: var(--oubkw-primary, #C4705A);
    box-shadow: 0 0 0 3px rgba(196,112,90,.12);
}
.oubkw-service-search-input::placeholder { color: var(--oubkw-text-muted, #8C7B6B); }

.oubkw-service-search-clear {
    position: absolute;
    right: 12px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--oubkw-text-muted, #8C7B6B);
    font-size: 13px;
    padding: 4px;
    line-height: 1;
    transition: color .15s;
}
.oubkw-service-search-clear:hover { color: var(--oubkw-text); }

/* Autocomplete dropdown */
.oubkw-service-autocomplete {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--oubkw-card-bg, #fff);
    border: 1px solid rgba(196,112,90,.2);
    border-radius: 12px;
    box-shadow: 0 6px 24px rgba(44,31,20,.12);
    z-index: 200;
    overflow: hidden;
}

.oubkw-ac-item {
    padding: 9px 16px;
    font-size: 13px;
    color: var(--oubkw-text, #2C1F14);
    cursor: pointer;
    transition: background .12s;
    display: flex;
    align-items: center;
    gap: 6px;
}
.oubkw-ac-item:hover,
.oubkw-ac-item:focus { background: rgba(196,112,90,.08); outline: none; }
.oubkw-ac-item strong { color: var(--oubkw-text); }
.oubkw-ac-dur { font-size: 11px; color: var(--oubkw-text-muted, #8C7B6B); margin-left: auto; }

/* Card highlight on autocomplete selection */
.oubkw-service-card--highlight {
    box-shadow: 0 0 0 2.5px var(--oubkw-primary, #C4705A), 0 4px 16px rgba(196,112,90,.25) !important;
    transition: box-shadow .3s;
}

@media (max-width: 600px) {
    .oubkw-service-search-input { font-size: 14px; }
}

/* ── Waiting-list opt-in (step 2) ─────────────────────────────────── */
.oubkw-wl-optin {
    margin-top: 20px;
    padding: 14px 16px;
    background: rgba(196,112,90,.06);
    border: 1px solid rgba(196,112,90,.25);
    border-radius: 10px;
    animation: oubkwFadeUp .3s ease both;
}
.oubkw-wl-optin-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-weight: 600;
    color: var(--oubkw-text, #2C1F14);
    font-size: .9rem;
}
.oubkw-wl-optin-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 1px;
    accent-color: var(--oubkw-primary, #C4705A);
    flex-shrink: 0;
}
.oubkw-wl-optin-hint {
    margin: 6px 0 0 28px;
    font-size: .78rem;
    color: var(--oubkw-text-muted, #8C7B6B);
    line-height: 1.4;
}

/* ── New-client restriction notice (step 3) ───────────────────────── */
.oubkw-new-client-notice {
    margin-top: 20px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(180, 130, 80, .28);
    background: linear-gradient(135deg, #fdf6ee 0%, #fef9f5 100%);
    box-shadow: 0 2px 12px rgba(180, 130, 80, .10);
    animation: oubkwFadeUp .32s ease both;
}
.oubkw-new-client-notice-inner {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 22px;
}
.oubkw-new-client-notice-icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--oubkw-primary, #C4705A);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--oubkw-on-primary, #ffffff);
    font-size: 1rem;
    box-shadow: 0 2px 8px rgba(196, 112, 90, .30);
}
.oubkw-new-client-notice-body {
    flex: 1;
}
.oubkw-new-client-notice-title {
    font-weight: 700;
    font-size: .95rem;
    color: var(--oubkw-text, #2C1F14);
    margin: 0 0 5px;
}
.oubkw-new-client-notice-msg {
    margin: 0;
    font-size: .875rem;
    color: #6B5B4E;
    line-height: 1.55;
}

/* ── Bouton "Suivant" sous la carte principale (tous les steps) ── */
.oubkw-step-below-btn { display: block; width: 100%; }
.oubkw-step-below-btn .oubkw-btn-continue { width: 100%; }

/* ── Bouton d'ancre paiement dans la sidebar step 5 ── */
.oubkw-btn-pay-anchor {
    width: 100%; margin-top: 4px;
    background: var(--oubkw-primary-dark, #a05842);
}
.oubkw-btn-pay-anchor:hover { background: var(--oubkw-primary, #C4705A); }

/* ── Bandeau pré-sélection date/heure step 2 (next_availability shortcode redirect) ── */
.oubkw-preselect-notice {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .75rem 1rem;
    margin: .75rem 0 1rem;
    border-radius: var(--oubkw-radius, 8px);
    font-size: .875rem;
    line-height: 1.45;
}
.oubkw-preselect-notice i {
    flex-shrink: 0;
    margin-top: 2px;
    font-size: 1rem;
}
.oubkw-preselect-notice--success {
    background: color-mix(in srgb, #22c55e 10%, transparent);
    border: 1px solid color-mix(in srgb, #22c55e 30%, transparent);
    color: var(--oubkw-text, #333);
}
.oubkw-preselect-notice--success i { color: #16a34a; }
.oubkw-preselect-notice--warn {
    background: color-mix(in srgb, #f59e0b 10%, transparent);
    border: 1px solid color-mix(in srgb, #f59e0b 30%, transparent);
    color: var(--oubkw-text, #333);
}
.oubkw-preselect-notice--warn i { color: #d97706; }

/* ── Bandeau pré-remplissage step 3 ── */
.oubkw-prefilled-notice {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .75rem 1rem;
    margin-bottom: 1.25rem;
    border-radius: var(--oubkw-radius, 8px);
    background: color-mix(in srgb, var(--oubkw-primary, #C4705A) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--oubkw-primary, #C4705A) 30%, transparent);
    color: var(--oubkw-text, #333);
    font-size: .875rem;
    line-height: 1.45;
}
.oubkw-prefilled-notice i {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--oubkw-text);
    font-size: 1rem;
}

/* ═══════════════════════════════════════════════════════════════
   WELCOME GATE (step 0)
   Full-widget overlay shown before step 1 for anonymous visitors.
═══════════════════════════════════════════════════════════════ */

/* Widget needs a positioning context */
.oubkw-booking-widget { position: relative; }

.oubkw-welcome-gate {
    position: absolute;
    inset: 0;
    z-index: 120;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--oubkw-background, #FAF6F1);
    padding: 2rem 1rem;
    /* Entry animation — set by JS via class */
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .32s ease, transform .32s ease;
    overflow-y: auto;
}
.oubkw-welcome-gate.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.oubkw-welcome-gate.is-leaving {
    opacity: 0;
    transform: translateY(-16px);
    pointer-events: none;
}

/* ── Inner centred card ── */
.oubkw-wg-inner {
    width: 100%;
    max-width: 560px;
    text-align: center;
}

/* ── Decorative icon accent ── */
.oubkw-wg-accent {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--oubkw-primary, #C4705A);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    box-shadow: 0 8px 24px rgba(196, 112, 90, .28);
}
.oubkw-wg-accent i {
    color: var(--oubkw-on-primary, #ffffff);
    font-size: 1.75rem;
}

/* ── Title + subtitle ── */
.oubkw-wg-title {
    font-size: clamp(1.25rem, 4vw, 1.7rem);
    font-weight: 700;
    color: var(--oubkw-text, #2C1F14);
    margin: 0 0 .35rem;
    line-height: 1.25;
}
.oubkw-wg-brand {
    color: var(--oubkw-text);
}
.oubkw-wg-subtitle {
    font-size: 1.05rem;
    color: var(--oubkw-text-soft, #7A6659);
    margin: 0 0 .75rem;
}

/* ── Clarification note — visible when gate is shown ── */
.oubkw-wg-note {
    font-size: .82rem;
    color: var(--oubkw-text-soft, #7A6659);
    background: rgba(196, 112, 90, .06);
    border: 1px solid rgba(196, 112, 90, .18);
    border-radius: 8px;
    padding: .5rem .9rem;
    margin: 0 0 1.5rem;
    line-height: 1.55;
}

/* ── Choice cards ── */
.oubkw-wg-choices {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
/* ── Gate-active: widget shrinks to gate content height ────────────
   While the gate is visible, the progress nav and all steps are
   hidden so the widget height == gate content height (no scrolling).
   The gate switches from position:absolute (overlay) to
   position:relative (normal flow), letting it size itself.
   The class is added by showWelcomeGate() and removed by
   dismissWelcomeGate() once the fade-out animation completes. */
.oubkw-booking-widget.oubkw-gate-active > .oubkw-progress,
.oubkw-booking-widget.oubkw-gate-active > .oubkw-step {
    display: none !important;
}
.oubkw-booking-widget.oubkw-gate-active .oubkw-welcome-gate {
    position: relative;
    inset: auto;
    /* No forced height — the flex container wraps its content */
    min-height: 0;
    padding: 2.5rem 1.5rem 2rem;
}

/* On mobile the gate is position:absolute over the full-height widget,
   so centre-aligning pushes content far off-screen. Pin to top instead. */
@media (max-width: 640px) {
    .oubkw-welcome-gate {
        align-items: flex-start;
        padding-top: 2rem;
    }
}

@media (max-width: 480px) {
    .oubkw-welcome-gate { padding-top: 1.25rem; }
    .oubkw-wg-choices   { grid-template-columns: 1fr; }
    /* Compact accent badge */
    .oubkw-wg-accent    { width: 56px; height: 56px; margin-bottom: .9rem; }
    .oubkw-wg-accent i  { font-size: 1.4rem; }
    /* Tighter subtitle gap + compact note */
    .oubkw-wg-subtitle  { margin-bottom: .5rem; font-size: .95rem; }
    .oubkw-wg-note      { font-size: .78rem; padding: .45rem .75rem; margin-bottom: 1.1rem; }
    /* Compact choice cards */
    .oubkw-wg-btn       { padding: 1rem .9rem .85rem; gap: .4rem; }
    .oubkw-wg-btn-icon  { width: 44px; height: 44px; }
    .oubkw-wg-btn-icon i { font-size: 1.1rem; }
}

.oubkw-wg-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .55rem;
    padding: 1.5rem 1rem 1.25rem;
    background: var(--oubkw-white, #fff);
    border: 2px solid var(--oubkw-bg-dark, #E8DDD0);
    border-radius: 16px;
    cursor: pointer;
    text-align: center;
    transition: border-color .2s ease, box-shadow .2s ease, transform .18s ease, background .2s ease;
    /* Reset button defaults */
    -webkit-appearance: none;
    appearance: none;
    font-family: inherit;
    width: 100%;
}
.oubkw-wg-btn:hover,
.oubkw-wg-btn:focus-visible {
    border-color: var(--oubkw-primary, #C4705A);
    box-shadow: 0 6px 20px rgba(196, 112, 90, .18);
    transform: translateY(-3px);
    outline: none;
}
.oubkw-wg-btn:active { transform: translateY(0); }

/* New-client variant gets a subtle warm tint */
.oubkw-wg-btn--new {
    border-color: var(--oubkw-primary-light, #E8A898);
    background: linear-gradient(160deg, #fff 60%, rgba(196, 112, 90, .04) 100%);
}
.oubkw-wg-btn--new:hover,
.oubkw-wg-btn--new:focus-visible {
    border-color: var(--oubkw-primary, #C4705A);
    background: linear-gradient(160deg, #fff 40%, rgba(196, 112, 90, .08) 100%);
}

/* ── Icon circle inside button ── */
.oubkw-wg-btn-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(196,112,90,.12) 0%, rgba(212,185,154,.18) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s ease;
}
.oubkw-wg-btn-icon i {
    font-size: 1.3rem;
    color: var(--oubkw-text);
}
.oubkw-wg-btn--new .oubkw-wg-btn-icon {
    background: linear-gradient(135deg, rgba(196,112,90,.18) 0%, rgba(212,185,154,.28) 100%);
}
.oubkw-wg-btn:hover .oubkw-wg-btn-icon,
.oubkw-wg-btn:focus-visible .oubkw-wg-btn-icon {
    background: linear-gradient(135deg, rgba(196,112,90,.22) 0%, rgba(212,185,154,.32) 100%);
}

/* ── Button text ── */
.oubkw-wg-btn-label {
    font-size: .95rem;
    font-weight: 700;
    color: var(--oubkw-text, #2C1F14);
    line-height: 1.3;
}
.oubkw-wg-btn-hint {
    font-size: .78rem;
    color: var(--oubkw-text-soft, #7A6659);
    line-height: 1.4;
}

/* ═══════════════════════════════════════════════════════════════
   WELCOME GATE — INNER TRANSITION STATES
═══════════════════════════════════════════════════════════════ */

/* Fade-out when swapping choice cards → confirmation panel */
.oubkw-wg-inner--leaving {
    opacity: 0;
    transform: scale(.96);
    transition: opacity .22s ease, transform .22s ease;
    pointer-events: none;
}

/* Confirmation panel wrapper — used as sizing context */
.oubkw-wg-inner--confirm {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ── Confirmation panel ── */
.oubkw-wg-confirm {
    width: 100%;
    max-width: 440px;
    text-align: center;
    opacity: 0;
    transform: translateY(14px) scale(.97);
    transition: opacity .32s cubic-bezier(.22,.68,0,1.1), transform .32s cubic-bezier(.22,.68,0,1.1);
}
.oubkw-wg-confirm.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* ── Confetti-burst micro-animation ── */
.oubkw-wg-conf-burst {
    position: relative;
    height: 0;
    pointer-events: none;
}
.oubkw-wg-conf-particle {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    opacity: 0;
}
.oubkw-wg-conf-particle:nth-child(1) {
    background: var(--oubkw-primary, #C4705A);
    left: -28px; top: -18px;
    animation: oubkw-particle-1 .9s .1s cubic-bezier(.22,.68,0,1) both;
}
.oubkw-wg-conf-particle:nth-child(2) {
    background: var(--oubkw-accent, #D4B99A);
    right: -28px; top: -12px;
    animation: oubkw-particle-2 .9s .18s cubic-bezier(.22,.68,0,1) both;
}
.oubkw-wg-conf-particle:nth-child(3) {
    background: var(--oubkw-secondary, #7A8C6E);
    left: 50%; top: -24px;
    margin-left: -4px;
    animation: oubkw-particle-3 .8s .08s cubic-bezier(.22,.68,0,1) both;
}
@keyframes oubkw-particle-1 {
    0%   { opacity: 0; transform: translate(0,0) scale(.5); }
    30%  { opacity: 1; }
    100% { opacity: 0; transform: translate(-18px,-36px) scale(1); }
}
@keyframes oubkw-particle-2 {
    0%   { opacity: 0; transform: translate(0,0) scale(.5); }
    30%  { opacity: 1; }
    100% { opacity: 0; transform: translate(18px,-40px) scale(1); }
}
@keyframes oubkw-particle-3 {
    0%   { opacity: 0; transform: translate(0,0) scale(.5); }
    30%  { opacity: 1; }
    100% { opacity: 0; transform: translate(0,-48px) scale(1); }
}

/* ── Heart icon ── */
.oubkw-wg-conf-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--oubkw-primary, #C4705A);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    box-shadow: 0 10px 32px rgba(196,112,90,.32);
    animation: oubkw-conf-icon-pulse 2s 0.3s ease-in-out infinite;
}
.oubkw-wg-conf-icon i {
    color: var(--oubkw-on-primary, #ffffff);
    font-size: 2rem;
}
@keyframes oubkw-conf-icon-pulse {
    0%,100% { box-shadow: 0 10px 32px rgba(196,112,90,.32); transform: scale(1); }
    50%      { box-shadow: 0 14px 40px rgba(196,112,90,.44); transform: scale(1.04); }
}

/* ── Title ── */
.oubkw-wg-conf-title {
    font-size: clamp(1.4rem, 5vw, 1.9rem);
    font-weight: 700;
    color: var(--oubkw-text, #2C1F14);
    margin: 0 0 .75rem;
    line-height: 1.2;
}

/* ── Message ── */
.oubkw-wg-conf-msg {
    font-size: 1rem;
    color: var(--oubkw-text-soft, #7A6659);
    line-height: 1.65;
    margin: 0 0 1.75rem;
}
.oubkw-wg-conf-msg p { margin: 0 0 .5em; }
.oubkw-wg-conf-msg p:last-child { margin: 0; }

/* ── "Let's go!" button ── */
.oubkw-wg-confirm-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .8rem 2rem;
    background: var(--oubkw-primary, #C4705A);
    color: var(--oubkw-on-primary, #ffffff);
    border: none;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(196,112,90,.35);
    transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
    -webkit-appearance: none;
    appearance: none;
}
.oubkw-wg-confirm-btn:hover,
.oubkw-wg-confirm-btn:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(196,112,90,.46);
    opacity: .88;
    outline: none;
}
.oubkw-wg-confirm-btn:active { transform: translateY(0); }

@media (max-width: 480px) {
    .oubkw-wg-conf-icon { width: 64px; height: 64px; }
    .oubkw-wg-conf-icon i { font-size: 1.6rem; }
    .oubkw-wg-confirm-btn { width: 100%; justify-content: center; padding: .9rem 1.5rem; }
}

/* ─────────────────────────────────────────────────────────────────
   WELCOME GATE — VIDEO PLAYER (optional, injected by JS)
   Responsive 16:9 container. Works for HTML5 <video>, YouTube and
   Vimeo iframes. The confirmation panel grows to max-width:560px
   when a video is present (.oubkw-wg-confirm--has-video).
───────────────────────────────────────────────────────────────── */

/* Widen the panel when a video is shown */
.oubkw-wg-confirm--has-video {
    max-width: 560px;
}

/* Compact the heart icon when video is present — saves vertical space */
.oubkw-wg-confirm--has-video .oubkw-wg-conf-icon {
    width: 56px;
    height: 56px;
    margin-bottom: .85rem;
    animation: none;
    box-shadow: 0 6px 18px rgba(196,112,90,.28);
}
.oubkw-wg-confirm--has-video .oubkw-wg-conf-icon i {
    font-size: 1.4rem;
}
.oubkw-wg-confirm--has-video .oubkw-wg-conf-title {
    font-size: clamp(1.1rem, 4vw, 1.45rem);
    margin-bottom: .75rem;
}

/* 16:9 responsive video container */
.oubkw-wg-video-wrap {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
    border-radius: 12px;
    margin: 0 0 .75rem;
    background: #000;
    box-shadow: 0 4px 20px rgba(0,0,0,.18);
}
.oubkw-wg-video-wrap iframe,
.oubkw-wg-video-wrap video {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border: none;
    border-radius: 12px;
}

/* "Watch to continue" hint — shown when required=true, fades out on unlock */
.oubkw-wg-video-hint {
    font-size: .82rem;
    color: var(--oubkw-text-soft, #7A6659);
    text-align: center;
    margin: 0 0 .75rem;
    line-height: 1.45;
}
.oubkw-wg-video-hint i {
    color: var(--oubkw-text);
}

/* Text/subtitle message when displayed under a video */
.oubkw-wg-confirm--has-video .oubkw-wg-conf-msg {
    font-size: .9rem;
    margin-bottom: 1.25rem;
    text-align: left;
}

/* Locked CTA — disabled until video ends */
.oubkw-wg-confirm-btn--locked {
    opacity: .38;
    pointer-events: none;
    cursor: not-allowed;
    box-shadow: none;
    transform: none !important;
}

@media (max-width: 480px) {
    .oubkw-wg-video-wrap { border-radius: 8px; }
    .oubkw-wg-video-wrap iframe,
    .oubkw-wg-video-wrap video { border-radius: 8px; }
    .oubkw-wg-confirm--has-video .oubkw-wg-conf-icon { width: 46px; height: 46px; }
    .oubkw-wg-confirm--has-video .oubkw-wg-conf-icon i { font-size: 1.2rem; }
}

/* ═══════════════════════════════════════════════════════════════
   NEW-CLIENT WELCOME BANNER (step 3 — after email AJAX confirm)
   Slides in below the email field when an unknown email is entered.
═══════════════════════════════════════════════════════════════ */
.oubkw-nc-banner-slot { padding: 0 !important; overflow: hidden; }

.oubkw-nc-welcome-banner {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    padding: .9rem 1rem;
    background: linear-gradient(120deg, rgba(196,112,90,.08) 0%, rgba(212,185,154,.14) 100%);
    border: 1px solid rgba(196,112,90,.25);
    border-radius: 10px;
    /* Slide-in: banner starts above, falls into place */
    animation: oubkw-banner-in .38s cubic-bezier(.22,.68,0,1.2) both;
}
@keyframes oubkw-banner-in {
    from { opacity: 0; transform: translateY(-14px); }
    to   { opacity: 1; transform: translateY(0); }
}
.oubkw-nc-welcome-banner.is-leaving {
    animation: oubkw-banner-out .25s ease forwards;
}
@keyframes oubkw-banner-out {
    to { opacity: 0; transform: translateY(-8px); }
}

.oubkw-nc-wb-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--oubkw-primary, #C4705A);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: .1rem;
}
.oubkw-nc-wb-icon i {
    color: #fff;
    font-size: .85rem;
}

.oubkw-nc-wb-body { flex: 1; min-width: 0; }
.oubkw-nc-wb-intro {
    font-size: .8rem;
    font-weight: 700;
    color: var(--oubkw-text);
    margin: 0 0 .25rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.oubkw-nc-wb-msg {
    font-size: .84rem;
    color: var(--oubkw-text, #2C1F14);
    line-height: 1.5;
    margin: 0;
}
.oubkw-nc-wb-msg p { margin: 0 0 .4em; }
.oubkw-nc-wb-msg p:last-child { margin: 0; }

.oubkw-nc-wb-close {
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 2px 4px;
    cursor: pointer;
    color: var(--oubkw-text-soft, #7A6659);
    font-size: .85rem;
    line-height: 1;
    opacity: .6;
    transition: opacity .15s;
    align-self: flex-start;
}
.oubkw-nc-wb-close:hover { opacity: 1; }

@media (max-width: 480px) {
    .oubkw-nc-welcome-banner { gap: .6rem; padding: .75rem .8rem; }
    .oubkw-nc-wb-icon { width: 30px; height: 30px; }
    .oubkw-nc-wb-icon i { font-size: .75rem; }
}

/* ── Enumeration-guard messages ─────────────────────────────────── */

/* Soft advisory (> 2 unique emails checked) */
.oubkw-nc-advisory {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem .85rem;
    background: rgba(122,140,110,.1);
    border: 1px solid rgba(122,140,110,.3);
    border-radius: 8px;
    font-size: .8rem;
    color: var(--oubkw-text-soft, #5A6B50);
    animation: oubkw-banner-in .3s ease both;
}
.oubkw-nc-advisory i { flex-shrink: 0; color: var(--oubkw-secondary, #7A8C6E); }
.oubkw-nc-advisory span { flex: 1; line-height: 1.4; }
.oubkw-nc-advisory-close {
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 2px 4px;
    cursor: pointer;
    color: var(--oubkw-text-soft, #7A6659);
    font-size: .8rem;
    opacity: .6;
    transition: opacity .15s;
}
.oubkw-nc-advisory-close:hover { opacity: 1; }
.oubkw-nc-advisory.is-leaving { animation: oubkw-banner-out .25s ease forwards; }

/* Hard-lock message (server rate-limit hit) */
.oubkw-nc-lock {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .65rem .9rem;
    background: rgba(180,60,60,.07);
    border: 1px solid rgba(180,60,60,.25);
    border-radius: 8px;
    font-size: .8rem;
    color: #8B2E2E;
    animation: oubkw-banner-in .3s ease both;
}
.oubkw-nc-lock i { flex-shrink: 0; color: #C0392B; font-size: .9rem; }
.oubkw-nc-lock span { flex: 1; line-height: 1.4; }

/* ── New-client block banner (block mode — bookings disabled for new clients) ── */

.oubkw-nc-block {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    padding: 1rem 1.1rem;
    background: linear-gradient(120deg, rgba(180,60,60,.06) 0%, rgba(196,112,90,.1) 100%);
    border: 1px solid rgba(180,60,60,.28);
    border-radius: 10px;
    animation: oubkw-banner-in .38s cubic-bezier(.22,.68,0,1.2) both;
}

.oubkw-nc-block-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(180,60,60,.12);
    color: #C0392B;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    margin-top: .1rem;
}

.oubkw-nc-block-body { flex: 1; min-width: 0; }

.oubkw-nc-block-title {
    font-size: .8rem;
    font-weight: 700;
    color: #9B2B2B;
    margin: 0 0 .3rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.oubkw-nc-block-msg {
    font-size: .84rem;
    color: var(--oubkw-text, #2C1F14);
    line-height: 1.5;
    margin: 0 0 .75rem;
}

.oubkw-nc-block-btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .45rem .9rem;
    background: var(--oubkw-primary, #C4705A);
    color: #fff;
    border-radius: 7px;
    font-size: .82rem;
    font-weight: 600;
    text-decoration: none;
    transition: opacity .15s;
}
.oubkw-nc-block-btn:hover { opacity: .88; color: #fff; text-decoration: none; }

/* Freeze overlay — dims the step when widget is blocked */
.oubkw-nc-frozen {
    position: relative;
    pointer-events: none;
}
.oubkw-nc-frozen::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,.55);
    border-radius: inherit;
    z-index: 10;
    pointer-events: none;
}
/* Keep the banner slot itself interactive so the redirect button works */
.oubkw-nc-frozen .oubkw-nc-banner-slot {
    pointer-events: auto;
    position: relative;
    z-index: 11;
}

/* ── NC cart restriction — frozen progress steps 4–6 ── */
.oubkw-progress-step.oubkw-nc-cart-frozen {
    opacity: .42;
    pointer-events: none;
    cursor: default;
}
.oubkw-progress-step.oubkw-nc-cart-frozen .oubkw-step-num {
    background: #b0b0b0;
    border-color: #b0b0b0;
    color: #fff;
}
.oubkw-progress-step.oubkw-nc-cart-frozen .oubkw-step-label {
    color: #aaa;
}

/* ── NC restart button ── */
/* Inherits .oubkw-btn-continue shape; uses secondary palette */
.oubkw-btn-nc-restart {
    background: #6c757d;
    color: #ffffff;
    box-shadow: 0 4px 20px rgba(73,80,87,.22);
}
.oubkw-btn-nc-restart:hover:not(:disabled) {
    box-shadow: 0 6px 28px rgba(73,80,87,.35);
}

/* ── Welcome gate block panel (same visual language as the banner) ── */
.oubkw-wg-confirm--block .oubkw-wg-conf-icon {
    background: rgba(180,60,60,.12);
    color: #C0392B;
}
.oubkw-wg-confirm--block .oubkw-wg-conf-title { color: #9B2B2B; }

.oubkw-wg-block-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: .9rem;
    padding: .55rem 1.2rem;
    background: var(--oubkw-primary, #C4705A);
    color: #fff;
    border-radius: 8px;
    font-size: .88rem;
    font-weight: 600;
    text-decoration: none;
    transition: opacity .15s;
}
.oubkw-wg-block-btn:hover { opacity: .88; color: #fff; text-decoration: none; }

/* ════════════════════════════════════════════════════════════════
   Explicit CGV acceptance (v2.7.0) — items checklist + signature pad
   Rule: text & icons use --oubkw-text*, never --oubkw-primary.
   --oubkw-primary is reserved for fills, borders and the signature stroke.
   ════════════════════════════════════════════════════════════════ */
.oubkw-cgv-intro {
    display: flex; gap: 10px; align-items: flex-start;
    font-size: .86rem; color: var(--oubkw-text);
    background: var(--oubkw-accent-light);
    border: 1px solid var(--oubkw-accent);
    border-radius: 10px; padding: 10px 13px; margin-bottom: 14px;
}
.oubkw-cgv-intro i { color: var(--oubkw-text); margin-top: 2px; }

.oubkw-cgv-list { display: flex; flex-direction: column; gap: 10px; }
.oubkw-cgv-item {
    display: flex; gap: 12px; align-items: flex-start;
    border: 1px solid var(--oubkw-accent);
    border-radius: 10px; padding: 11px 13px;
    transition: border-color .15s ease, background .15s ease;
}
.oubkw-cgv-item.checked { border-color: var(--oubkw-primary); background: var(--oubkw-accent-light); }
.oubkw-cgv-item-text { font-size: .88rem; line-height: 1.45; color: var(--oubkw-text); }
.oubkw-cgv-item-text a { color: var(--oubkw-text); text-decoration: underline; }
.oubkw-cgv-req {
    display: inline-block; font-size: .66rem; font-weight: 700; letter-spacing: .4px;
    text-transform: uppercase; margin-left: 4px; padding: 1px 7px;
    border-radius: 999px; border: 1px solid var(--oubkw-accent);
    color: var(--oubkw-text-soft);
}

/* Toggle — scoped under .oubkw-cgv-switch so it never collides elsewhere */
.oubkw-cgv-switch { position: relative; display: inline-block; width: 44px; height: 25px; flex: 0 0 auto; margin-top: 1px; }
.oubkw-cgv-switch input { opacity: 0; width: 0; height: 0; }
.oubkw-cgv-switch .oubkw-switch-slider {
    position: absolute; inset: 0; cursor: pointer; border-radius: 999px;
    background: var(--oubkw-text-soft); transition: .2s;
}
.oubkw-cgv-switch .oubkw-switch-slider:before {
    content: ""; position: absolute; height: 19px; width: 19px; left: 3px; top: 3px;
    background: #fff; border-radius: 50%; transition: .2s; box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.oubkw-cgv-switch input:checked + .oubkw-switch-slider { background: var(--oubkw-primary); }
.oubkw-cgv-switch input:checked + .oubkw-switch-slider:before { transform: translateX(19px); }

/* Signature pad */
.oubkw-cgv-sign { margin-top: 16px; }
.oubkw-cgv-sign-label { font-size: .84rem; font-weight: 600; color: var(--oubkw-text); display: flex; align-items: center; gap: 7px; margin-bottom: 7px; }
.oubkw-cgv-sign-label i { color: var(--oubkw-text); }
.oubkw-cgv-sign-pad {
    position: relative; height: 150px; border: 2px dashed var(--oubkw-accent);
    border-radius: 10px; background: #fff; touch-action: none; overflow: hidden; cursor: crosshair;
}
.oubkw-cgv-sign-canvas { display: block; width: 100%; height: 100%; }
.oubkw-cgv-sign-hint {
    position: absolute; left: 0; right: 0; bottom: 12px; text-align: center;
    font-size: .8rem; color: var(--oubkw-text-soft); pointer-events: none;
}
.oubkw-cgv-sign-hint i { color: var(--oubkw-text-soft); }
.oubkw-cgv-sign-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 7px; }
.oubkw-cgv-sign-clear { background: none; border: none; color: var(--oubkw-text); font-size: .82rem; font-weight: 600; cursor: pointer; opacity: .75; }
.oubkw-cgv-sign-clear:hover { opacity: 1; }
.oubkw-cgv-sign-clear i { color: var(--oubkw-text); }
.oubkw-cgv-sign-note { color: var(--oubkw-text-soft); font-size: .72rem; }
.oubkw-cgv-signer-name {
    width: 100%; margin-top: 11px; padding: 9px 12px;
    border: 1px solid var(--oubkw-accent); border-radius: 8px;
    font-size: .9rem; color: var(--oubkw-text); background: #fff;
}
.oubkw-cgv-guardian { display: flex; align-items: center; gap: 8px; margin-top: 9px; font-size: .82rem; color: var(--oubkw-text); cursor: pointer; }
.oubkw-cgv-guardian input { accent-color: var(--oubkw-primary); }

/* Scroll-to-accept terms box (v2.7.0 read & sign model) */
.oubkw-cgv-terms {
    max-height: 240px; overflow-y: auto; -webkit-overflow-scrolling: touch;
    border: 1px solid var(--oubkw-accent); border-radius: 10px;
    padding: 14px 16px; background: #fff; color: var(--oubkw-text);
    font-size: .9rem; line-height: 1.5;
}
.oubkw-cgv-terms p { margin: 0 0 .6em; }
.oubkw-cgv-terms ul, .oubkw-cgv-terms ol { margin: 0 0 .6em 1.2em; padding: 0; }
.oubkw-cgv-terms li { margin-bottom: .4em; }
.oubkw-cgv-terms a { color: var(--oubkw-text); text-decoration: underline; }
.oubkw-cgv-scrollhint { margin-top: 8px; font-size: .82rem; color: var(--oubkw-text-soft); display: flex; align-items: center; gap: 6px; }
.oubkw-cgv-scrollhint i { color: var(--oubkw-text-soft); }
.oubkw-cgv-scrollhint.done, .oubkw-cgv-scrollhint.done i { color: var(--oubkw-secondary); }
.oubkw-cgv-sign.oubkw-cgv-locked { opacity: .45; pointer-events: none; }