/* Inspira Bookings — public styles. Inherits theme typography by default. */

/* v2.7.28 — Variables moved to :root so they're visible to every
   shortcode container (calendar, my-bookings, service grid, staff grid,
   etc.) not just .inspira-flow. The "Use custom colors" setting injects
   :root overrides via wp_add_inline_style — they now actually affect
   everything that uses var(--ib-accent) / var(--ib-ink). */
:root {
    --ib-ink:     #14130F;
    --ib-muted:   #6B6862;
    --ib-rule:    #E5E0D6;
    --ib-accent:  #C8472B;
    --ib-paper:   #FAF7F2;
    --ib-paper-2: #FFFFFF;
    --ib-success: #2E7D5B;
    --ib-success-soft: #E1F0E8;
    --ib-error: #B91C1C;
    --ib-error-soft: #FBE9E1;
    --ib-radius: 6px;
    --ib-serif: Georgia, 'Iowan Old Style', Palatino, serif;
    --ib-mono: ui-monospace, SF Mono, Menlo, Consolas, monospace;
}
.inspira-flow {

    max-width: 720px;
    margin: 32px auto;
    padding: 32px;
    background: var(--ib-paper-2);
    border: 1px solid var(--ib-rule);
    border-radius: 12px;
    color: var(--ib-ink);
}

.inspira-flow-head { margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px solid var(--ib-rule); }
.inspira-flow-hero img { width: 100%; height: auto; border-radius: 8px; margin-bottom: 16px; }
.inspira-flow-title {
    font-family: var(--ib-serif); font-size: 32px; line-height: 1.2;
    letter-spacing: -0.5px; margin: 0 0 12px;
}
.inspira-flow-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.inspira-meta-pill {
    display: inline-block; padding: 4px 12px; font-size: 12px;
    font-family: var(--ib-mono); letter-spacing: 0.4px;
    background: var(--ib-paper); border: 1px solid var(--ib-rule);
    border-radius: 999px; color: var(--ib-muted);
}
.inspira-flow-excerpt, .inspira-flow-desc {
    color: var(--ib-muted); font-size: 15px; line-height: 1.6;
}

.inspira-flow-message {
    padding: 12px 16px; margin-bottom: 20px; border-left: 3px solid var(--ib-accent);
    background: var(--ib-error-soft); border-radius: 0 var(--ib-radius) var(--ib-radius) 0;
}
.inspira-flow-message.is-success {
    border-left-color: var(--ib-success); background: var(--ib-success-soft);
}

.inspira-flow-steps {
    list-style: none; display: flex; gap: 0; padding: 0; margin: 0 0 24px;
    counter-reset: step;
}
.inspira-step {
    flex: 1; display: flex; align-items: center; gap: 8px;
    padding: 12px 0; color: var(--ib-muted); border-bottom: 2px solid var(--ib-rule);
    font-size: 13px; font-weight: 500;
}
.inspira-step.is-active { color: var(--ib-ink); border-bottom-color: var(--ib-accent); }
.inspira-step.is-done   { color: var(--ib-success); }
.inspira-step-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--ib-paper); color: inherit; font-family: var(--ib-mono);
    font-size: 12px; border: 1px solid var(--ib-rule);
}
.inspira-step.is-active .inspira-step-num { background: var(--ib-ink); color: var(--ib-paper); border-color: var(--ib-ink); }

.inspira-flow-panel { animation: ib-fade .2s ease; }
.inspira-flow-panel.is-hidden { display: none; }
@keyframes ib-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.inspira-flow-label {
    display: block; font-size: 11px; font-weight: 700;
    letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--ib-muted); margin-bottom: 10px;
}
/* Row that puts the "Choose a date" label on the left and the
 * Today button on the right. Label keeps its uppercase styling;
 * row controls the bottom margin so the label's own margin is
 * neutralized inside the wrapper. */
.inspira-flow-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}
.inspira-flow-label-row .inspira-flow-label {
    margin-bottom: 0;
}
.inspira-flow-panel input[type="date"],
.inspira-flow-panel input[type="text"],
.inspira-flow-panel input[type="email"],
.inspira-flow-panel input[type="tel"],
.inspira-flow-panel textarea,
.inspira-flow-panel select {
    width: 100%; padding: 11px 14px; font-size: 15px; font-family: inherit;
    color: var(--ib-ink); background: var(--ib-paper-2);
    border: 1px solid var(--ib-rule); border-radius: var(--ib-radius);
}
.inspira-flow-panel input:focus,
.inspira-flow-panel textarea:focus,
.inspira-flow-panel select:focus {
    outline: none; border-color: var(--ib-ink);
    box-shadow: 0 0 0 3px rgba(20, 19, 15, 0.08);
}
.inspira-flow .inspira-field { margin-bottom: 16px; }
.inspira-flow .inspira-field label {
    display: block; font-size: 12px; font-weight: 600; color: var(--ib-ink-2);
    margin-bottom: 4px;
}
.inspira-flow .inspira-field-row { display: flex; gap: 14px; flex-wrap: wrap; }
.inspira-flow .inspira-field-row .inspira-field { flex: 1; min-width: 180px; }

.inspira-slot-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 8px; margin: 16px 0;
}
.inspira-slot {
    padding: 12px 8px; text-align: center; border-radius: var(--ib-radius);
    background: var(--ib-paper); border: 1px solid var(--ib-rule);
    color: var(--ib-ink); cursor: pointer; font-family: var(--ib-mono);
    font-size: 13px; transition: all 0.12s ease;
}
.inspira-slot:hover { border-color: var(--ib-ink); background: var(--ib-paper-2); }
.inspira-slot.is-selected {
    background: var(--ib-ink); color: var(--ib-paper); border-color: var(--ib-ink);
}
.inspira-slot-empty {
    grid-column: 1 / -1; padding: 32px; text-align: center;
    color: var(--ib-muted); font-style: italic; background: var(--ib-paper);
    border-radius: var(--ib-radius);
}

.inspira-flow-actions {
    margin-top: 24px; display: flex; gap: 12px; justify-content: space-between; align-items: center;
}
.inspira-flow .inspira-btn-text {
    background: transparent; border: none; color: var(--ib-muted);
    cursor: pointer; padding: 6px 0; font-size: 13px;
}
.inspira-flow .inspira-btn-text:hover { color: var(--ib-ink); }
.inspira-flow .inspira-btn-primary {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 11px 20px; background: var(--ib-ink); color: #fff;
    border: 1px solid var(--ib-ink); border-radius: var(--ib-radius);
    font-size: 14px; font-weight: 600; cursor: pointer;
    transition: all 0.15s ease; text-decoration: none;
}
.inspira-flow .inspira-btn-primary:hover {
    background: var(--ib-accent); border-color: var(--ib-accent);
    transform: translateY(-1px);
}
.inspira-flow .inspira-btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }

.inspira-honey { position: absolute; left: -9999px; height: 0; overflow: hidden; }

.inspira-success { text-align: center; padding: 40px 16px; }
.inspira-success-mark {
    width: 72px; height: 72px; margin: 0 auto 16px;
    display: flex; align-items: center; justify-content: center;
    background: var(--ib-success-soft); color: var(--ib-success);
    border-radius: 50%;
}
.inspira-success-title {
    font-family: var(--ib-serif); font-size: 30px; margin: 0 0 8px;
}
.inspira-success-sub { color: var(--ib-ink); font-size: 16px; margin: 0 0 8px; }
.inspira-success-email { color: var(--ib-muted); font-size: 13px; margin: 0; }

/* Buttons (used by shortcode + Elementor widgets) */
.inspira-btn-wrap.inspira-align-center { display: block; text-align: center; }
.inspira-btn-wrap.inspira-align-right  { display: block; text-align: right; }
.inspira-btn-wrap.inspira-align-full   { display: block; }
.inspira-btn-wrap.inspira-align-full a { display: block; text-align: center; }

a.inspira-btn,
a.inspira-btn-primary {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 11px 22px; text-decoration: none;
    background: var(--ib-ink); color: #FAF7F2;
    border: 1px solid var(--ib-ink); border-radius: 6px;
    font-size: 14px; font-weight: 600;
    transition: all 0.15s ease;
}
a.inspira-btn-primary:hover {
    background: var(--ib-accent); border-color: var(--ib-accent);
    transform: translateY(-1px); color: #fff;
}
a.inspira-btn-outline {
    background: transparent; color: var(--ib-ink); border: 2px solid var(--ib-ink);
}
a.inspira-btn-outline:hover { background: var(--ib-ink); color: #fff; }
a.inspira-btn-text {
    background: transparent; border: none; color: var(--ib-accent); padding: 6px 0;
    border-bottom: 2px solid currentColor; border-radius: 0;
}
a.inspira-btn-size-small  { padding: 7px 14px; font-size: 12px; }
a.inspira-btn-size-medium { padding: 11px 22px; font-size: 14px; }
a.inspira-btn-size-large  { padding: 14px 32px; font-size: 16px; }

/* Services grid */
.inspira-services-grid {
    display: grid; gap: 24px; margin: 24px 0;
}
.inspira-services-grid.is-cols-1 { grid-template-columns: 1fr; }
.inspira-services-grid.is-cols-2 { grid-template-columns: repeat(2, 1fr); }
.inspira-services-grid.is-cols-3 { grid-template-columns: repeat(3, 1fr); }
.inspira-services-grid.is-cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 760px) {
    .inspira-services-grid.is-cols-2, .inspira-services-grid.is-cols-3, .inspira-services-grid.is-cols-4 { grid-template-columns: 1fr; }
}
.inspira-service-card {
    background: #fff; border: 1px solid #E5E0D6; border-radius: 8px;
    overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.inspira-service-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px -16px rgba(0,0,0,0.15); }
.inspira-service-image { display: block; }
.inspira-service-image img { width: 100%; height: 220px; object-fit: cover; display: block; }
.inspira-service-body { padding: 20px; }
.inspira-service-name {
    font-family: Georgia, serif; font-size: 20px; font-weight: 500;
    margin: 0 0 8px;
}
.inspira-service-name a { color: var(--ib-ink); text-decoration: none; }
.inspira-service-name a:hover { color: var(--ib-accent); }
.inspira-service-desc { color: #6B6862; font-size: 14px; line-height: 1.55; margin: 0 0 12px; }
.inspira-service-meta { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }

/* Staff grid */
.inspira-staff-grid { display: grid; gap: 24px; margin: 24px 0; }
.inspira-staff-grid.is-cols-2 { grid-template-columns: repeat(2, 1fr); }
.inspira-staff-grid.is-cols-3 { grid-template-columns: repeat(3, 1fr); }
.inspira-staff-grid.is-cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 760px) { .inspira-staff-grid { grid-template-columns: 1fr !important; } }
.inspira-staff-card {
    background: #fff; border: 1px solid #E5E0D6; border-radius: 8px;
    padding: 24px; text-align: center;
}
.inspira-staff-photo img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; }
.inspira-staff-name {
    font-family: Georgia, serif; font-size: 20px; font-weight: 500;
    margin: 14px 0 8px;
}
.inspira-staff-bio { color: #6B6862; font-size: 14px; line-height: 1.55; }

/* My bookings */
.inspira-my-bookings {
    background: #fff;
    border: 1px solid #E5E0D6;
    border-radius: 8px;
    margin: 24px 0;
    padding: 20px;
}
.inspira-mybooking-row {
    display: grid; grid-template-columns: 1fr 1.5fr auto;
    align-items: center; gap: 16px;
    padding: 14px 20px; border-bottom: 1px solid #E5E0D6;
}
.inspira-mybooking-row:last-child { border-bottom: 0; }
.inspira-mybooking-when { font-family: Georgia, serif; font-weight: 500; }
.inspira-mybooking-service { color: #6B6862; }
.inspira-mybooking-status {
    font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;
}
.inspira-mybooking-row.is-status-canceled { opacity: 0.5; }

/* ════════════════════════════════════════════════════════════
   v2.0.1 — booking_form two-column layout
   ════════════════════════════════════════════════════════════ */
.inspira-bf-two-col {
    display: grid;
    /* Auto-fit: collapses to 1 column when the container can't fit 2 × 380px + gap.
       This is container-responsive, not viewport-responsive, so it works inside
       narrow sidebars / widgets / split layouts too. */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
    gap: 40px;
    align-items: start;
    justify-content: center;
    max-width: 1100px;
    margin: 32px auto;
    padding: 0 24px;
}
.inspira-bf-two-col.no-image {
    grid-template-columns: minmax(0, 1fr);
    max-width: 640px;
}
.inspira-bf-col-image {
    position: relative;
    min-width: 0;
}
.inspira-bf-col-image .inspira-bf-image {
    width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
    box-shadow: 0 8px 32px rgba(20,19,15,.12);
    position: sticky;
    top: 24px;
}
.inspira-bf-col-form {
    min-width: 0;
}
.inspira-bf-col-form .inspira-flow-hero { display: none; }

/* Image stack — multiple service images layered, only one visible */
.inspira-bf-image-stack {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: 8px;
    overflow: hidden;
    background: var(--ib-paper);
    box-shadow: 0 8px 32px rgba(20,19,15,.12);
    width: 100%;
}
.inspira-bf-image-layer {
    position: absolute; inset: 0;
    opacity: 0;
    transition: opacity .35s ease;
}
.inspira-bf-image-layer.is-active { opacity: 1; }
.inspira-bf-image-layer img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.inspira-bf-image-placeholder {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--ib-muted);
    background: var(--ib-paper);
}

/* When the container is narrow, the auto-fit grid drops to a single column.
   In that state the image should NOT stretch — lock it to 340px and center. */
@media (max-width: 900px) {
    .inspira-bf-two-col {
        gap: 24px;
        padding: 0 16px;
    }
    .inspira-bf-col-image {
        width: 100%;
        max-width: 340px;
        margin: 0 auto;
        text-align: center;
    }
    .inspira-bf-col-image .inspira-bf-image,
    .inspira-bf-image-stack {
        max-width: 340px;
        margin: 0 auto;
        aspect-ratio: 4 / 5;
    }
    .inspira-bf-image-layer img { width: 100%; height: 100%; object-fit: cover; }
}

/* Container queries for true container-responsive behavior (modern browsers).
   When the COLUMN is narrow (the grid has auto-collapsed), apply the same lock. */
@supports (container-type: inline-size) {
    .inspira-bf-two-col {
        container-type: inline-size;
        container-name: ib-bf;
    }
    @container ib-bf (max-width: 800px) {
        .inspira-bf-col-image {
            width: 100%;
            max-width: 340px;
            margin: 0 auto;
        }
        .inspira-bf-image-stack {
            max-width: 340px;
            margin: 0 auto;
            aspect-ratio: 4 / 5;
        }
    }
}

/* ════════════════════════════════════════════════════════════
   v2.0.2 — Visual calendar picker (replaces native date input)
   v2.0.3 — Fits inside booking form 2-col layout, compact buttons
   ════════════════════════════════════════════════════════════ */
.inspira-flow-cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}
@media (max-width: 720px) {
    .inspira-flow-cols { grid-template-columns: 1fr; }
}
.inspira-flow-col-cal, .inspira-flow-col-slots {
    min-width: 0; /* prevent grid overflow */
}

.inspira-visual-cal {
    background: #FFFFFF;
    border: 1px solid #E5E0D6;
    border-radius: 8px;
    padding: 12px;
    user-select: none;
    width: 100%;
    box-sizing: border-box;
}
.inspira-visual-cal * { box-sizing: border-box; }
.inspira-vc-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 10px;
}
.inspira-vc-label {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 15px; font-weight: 500; color: var(--ib-ink);
    flex: 1; text-align: center;
}
.inspira-vc-nav {
    background: transparent; border: 1px solid #E5E0D6; cursor: pointer;
    width: 28px; height: 28px; border-radius: 4px;
    font-size: 14px; color: var(--ib-ink);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.inspira-vc-nav:hover:not([disabled]) { background: #F4F0E8; }
.inspira-vc-nav[disabled] { opacity: 0.3; cursor: not-allowed; }
/* Today button — pill style next to the month label, jumps the
 * calendar back to the current month and selects today (if it's
 * within the bookable date range). */
.inspira-vc-today {
    background: transparent;
    border: 1px solid var(--ib-accent);
    color: var(--ib-accent);
    cursor: pointer;
    height: 28px;
    padding: 0 10px;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    transition: background .12s ease, color .12s ease;
}
.inspira-vc-today:hover {
    background: var(--ib-accent);
    color: #FAF7F2;
}
.inspira-vc-weekdays {
    display: grid; grid-template-columns: repeat(7, 1fr);
    gap: 2px; margin-bottom: 4px;
}
.inspira-vc-weekdays span {
    text-align: center; font-size: 10px; font-weight: 600;
    letter-spacing: 0.04em; text-transform: uppercase; color: #6B6862;
    padding: 4px 0;
}
.inspira-vc-grid {
    display: grid; grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}
.inspira-vc-cell {
    aspect-ratio: 1;
    min-height: 32px;
    background: #b5b5b514;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 13px; font-weight: 500;
    color: var(--ib-ink); cursor: pointer;
    transition: all .12s ease;
    display: flex; align-items: center; justify-content: center;
    padding: 0;
    line-height: 1;
    position: relative; /* anchor for the count badge */
}
/* The day number itself — centered by the cell's flexbox.
 * Lives inside the cell as its own element so the count badge can
 * be positioned absolutely without disturbing the number's centering. */
.inspira-vc-num {
    display: inline-block;
    line-height: 1;
}
/* Available-slot count badge — top-right corner of open cells.
 * Small pill with the number of bookable slots so customers can
 * scan availability across the month at a glance. */
.inspira-vc-count {
    position: absolute;
    top: 3px;
    right: 3px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 9px;
    background: rgba(46, 125, 91, 0.92);
    color: #FFFFFF;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    pointer-events: none;
}
.inspira-vc-count.is-zero {
    background: rgba(176, 48, 31, 0.85);
}
.inspira-vc-cell:hover:not([disabled]) {
    background: #FBE9E1; border-color: var(--ib-accent);
}
.inspira-vc-cell.is-empty { background: transparent; cursor: default; pointer-events: none; border: 0; }
.inspira-vc-cell.is-today { font-weight: 700; color: var(--ib-accent); border-color: rgba(200,71,43,0.25); }
.inspira-vc-cell.is-disabled, .inspira-vc-cell[disabled] {
    color: #C9C2B2; cursor: not-allowed; background: transparent; border: 0;
}
/* Closed days (store off OR every relevant staff off). Distinct from
 * out-of-range disabled cells — struck-through with red tint so the
 * customer reads "this day is closed" instead of "this day is greyed
 * for no apparent reason". */
.inspira-vc-cell.is-closed {
    color: rgba(181, 48, 31, 0.55);
    background:
        repeating-linear-gradient(
            45deg,
            transparent 0,
            transparent 4px,
            rgba(181, 48, 31, 0.07) 4px,
            rgba(181, 48, 31, 0.07) 8px
        );
    text-decoration: line-through;
    text-decoration-color: rgba(181, 48, 31, 0.55);
    text-decoration-thickness: 1.5px;
    cursor: not-allowed;
    border: 1px dashed rgba(181, 48, 31, 0.25);
}
.inspira-vc-cell.is-selected {
    background: var(--ib-accent); color: #FAF7F2;
    border-color: var(--ib-accent);
    box-shadow: 0 2px 6px rgba(200,71,43,0.30);
}
.inspira-vc-cell.is-selected:hover { background: #B0301F; color: #FAF7F2; }

/* ════════════════════════════════════════════════════════════
   v2.0.3 — Tightened slot grid + booking-form 2-col polish
   ════════════════════════════════════════════════════════════ */

/* Slot grid: 2 columns inside the right column of the date/time view */
.inspira-flow-col-slots .inspira-slot-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    max-height: 340px;
    overflow-y: auto;
    padding: 4px;
}
.inspira-slot-empty {
    grid-column: 1 / -1;
    padding: 32px 16px;
    text-align: center;
    color: #6B6862;
    font-size: 13px;
    background: #FAF7F2;
    border-radius: 6px;
}
.inspira-slot {
    padding: 10px 12px;
    background: #FFFFFF;
    border: 1px solid #E5E0D6;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--ib-ink);
    text-align: center;
    transition: all .12s ease;
}
.inspira-slot:hover {
    border-color: var(--ib-accent);
    background: #FBE9E1;
}
.inspira-slot.is-selected {
    background: var(--ib-accent);
    border-color: var(--ib-accent);
    color: #FAF7F2;
}
/* Past slots (today's already-elapsed times). Shown crossed-out and
 * unclickable so the customer can see "those times have passed" rather
 * than an unexplained empty patch above the available slots. */
.inspira-slot.is-past,
.inspira-slot.is-past:hover {
    background: #F4F0E8;
    color: #9C988F;
    border-color: #E5E0D6;
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
    text-decoration-color: rgba(156, 152, 143, 0.8);
    cursor: not-allowed;
    font-weight: 500;
}
/* Taken slots (already booked by someone else). Greyed with
 * line-through so the customer can SEE which times are taken
 * instead of those times being silently hidden — gives them
 * the day's full picture at a glance. */
.inspira-slot.is-taken,
.inspira-slot.is-taken:hover {
    background: #F4F0E8;
    color: #9C988F;
    border-color: #E5E0D6;
    text-decoration: line-through;
    cursor: not-allowed;
    opacity: 0.65;
}
/* Reschedule mode — customer's existing slot. Yellow ring so they
 * see "this is where you are now". Still clickable; if they don't
 * click anything else and submit, server detects no-change. */
.inspira-slot.is-current {
    background: #FBEED2;
    color: #B8730E;
    border-color: #B8730E;
    font-weight: 600;
    box-shadow: inset 0 0 0 1px #B8730E;
}
.inspira-slot.is-current:hover {
    background: #F5DA9C;
    border-color: #B8730E;
    color: #B8730E;
}
/* When current slot is also the selected one (initial state on
 * reschedule page load), filled yellow + a softer outer ring so
 * both states ("this is current" + "this is selected") are clear. */
.inspira-slot.is-current.is-selected {
    background: #B8730E;
    color: #FFFFFF;
    box-shadow: 0 0 0 2px #FBEED2, inset 0 0 0 1px #B8730E;
}

/* Equal-size 2-col booking form layout — grid columns set on parent only */
.inspira-bf-col-image {
    min-width: 0;
    text-align: center;
}
.inspira-bf-col-image .inspira-bf-image {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 12px;
    display: block;
    box-shadow: 0 8px 32px rgba(20,19,15,.12);
}
.inspira-bf-col-form { min-width: 0; }
.inspira-bf-col-form .inspira-flow { padding: 24px; }
.inspira-bf-col-form .inspira-flow-hero { display: none; }
@media (max-width: 900px) {
    .inspira-bf-col-form .inspira-flow { padding: 20px; }
}

/* Tighter step indicator inside booking form */
.inspira-bf-col-form .inspira-flow-steps {
    margin-top: 0;
}

/* ════════════════════════════════════════════════════════════
   v2.0.3 — my_bookings card layout
   ════════════════════════════════════════════════════════════ */
.inspira-mb-head { margin-bottom: 28px; }
.inspira-mb-title {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 28px; font-weight: 500;
    margin: 0 0 4px; color: var(--ib-ink);
}
.inspira-mb-sub { color: #6B6862; font-size: 14px; margin: 0; }
.inspira-mb-section { margin-bottom: 32px; }
.inspira-mb-section-title {
    display: flex; align-items: center; gap: 8px;
    font-family: Georgia, serif; font-size: 18px; font-weight: 500;
    color: var(--ib-ink); margin: 0 0 12px;
    padding-bottom: 8px; border-bottom: 1px solid #E5E0D6;
}
.inspira-mb-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 24px; height: 24px; padding: 0 6px;
    border-radius: 12px; background: #F4F0E8;
    font-size: 12px; font-weight: 600; color: #6B6862;
}
.inspira-mb-list { display: flex; flex-direction: column; gap: 10px; }
.inspira-mb-list-past .inspira-mb-card { opacity: 0.7; }
.inspira-mb-card {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 16px;
    padding: 16px;
    background: #FFFFFF;
    border: 1px solid #E5E0D6;
    border-left: 4px solid var(--card-color, var(--ib-accent));
    border-radius: 8px;
    transition: all .15s ease;
}
.inspira-mb-card:hover { box-shadow: 0 4px 12px rgba(20,19,15,0.06); }
.inspira-mb-card.is-status-canceled { opacity: 0.5; }
.inspira-mb-card.is-status-canceled .inspira-mb-card-title { text-decoration: line-through; }
.inspira-mb-card-date {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; text-align: center;
    background: #FAF7F2; border-radius: 6px;
    padding: 8px;
}
.inspira-mb-day {
    font-size: 11px; text-transform: uppercase;
    letter-spacing: 0.08em; color: #6B6862; font-weight: 600;
}
.inspira-mb-num {
    font-family: Georgia, serif; font-size: 28px;
    font-weight: 500; color: var(--ib-ink); line-height: 1;
}
.inspira-mb-month {
    font-size: 11px; text-transform: uppercase;
    letter-spacing: 0.08em; color: #6B6862; font-weight: 600;
}
.inspira-mb-card-info { display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.inspira-mb-card-title {
    font-family: Georgia, serif; font-size: 17px; font-weight: 500;
    margin: 0; color: var(--ib-ink);
}
.inspira-mb-card-meta {
    display: flex; align-items: center; gap: 10px;
    font-size: 13px; color: #6B6862;
}
.inspira-mb-status {
    display: inline-block; padding: 2px 8px;
    border-radius: 10px; font-size: 10px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.06em;
    background: #F4F0E8; color: #6B6862;
}
.inspira-mb-status-confirmed { background: #E1F0E8; color: #2E7D5B; }
.inspira-mb-status-pending { background: #FBEED2; color: #B8730E; }
.inspira-mb-status-canceled { background: rgba(176,48,31,0.1); color: #B0301F; }
.inspira-mb-cancel-link {
    font-size: 12px; color: #B0301F; text-decoration: none;
}
.inspira-mb-cancel-link:hover { text-decoration: underline; }

/* ════════════════════════════════════════════════════════════
   v2.0.3 — [inspira_calendar] service picker (image cards)
   ════════════════════════════════════════════════════════════ */
.inspira-cp-head { margin-bottom: 24px; }
.inspira-cp-title {
    font-family: Georgia, serif; font-size: 28px; font-weight: 500;
    margin: 0 0 6px; color: var(--ib-ink);
}
.inspira-cp-sub { color: #6B6862; font-size: 14px; margin: 0; }

.inspira-services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 18px;
}
.inspira-service-card {
    display: flex; flex-direction: column;
    background: #FFFFFF;
    border: 1px solid #E5E0D6;
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    color: var(--ib-ink);
    transition: all .2s ease;
}
.inspira-service-card:hover {
    border-color: var(--card-color, var(--ib-accent));
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(20,19,15,.10);
}
.inspira-service-card-image {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    background-size: cover;
    background-position: center;
    background-color: #FAF7F2;
}
.inspira-service-card-image-placeholder { aspect-ratio: 4 / 3; }
.inspira-service-card-body {
    padding: 16px;
    display: flex; flex-direction: column; gap: 8px;
    flex: 1;
}
.inspira-service-card-title {
    font-family: Georgia, serif; font-size: 18px; font-weight: 500;
    margin: 0; color: var(--ib-ink);
}
.inspira-service-card-excerpt {
    font-size: 13px; color: #6B6862; margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.inspira-service-card-meta { display: flex; gap: 6px; flex-wrap: wrap; }
.inspira-service-card-pill {
    display: inline-block; padding: 3px 8px;
    background: #F4F0E8; border-radius: 10px;
    font-size: 11px; font-weight: 600; color: #6B6862;
}
.inspira-service-card-cta {
    margin-top: auto; padding-top: 8px;
    color: var(--card-color, var(--ib-accent));
    font-weight: 600; font-size: 13px;
}

/* ════════════════════════════════════════════════════════════
   v2.0.4 — Disclaimer notice (booking flow)
   ════════════════════════════════════════════════════════════ */
.inspira-disclaimer {
    display: flex; align-items: flex-start; gap: 12px;
    margin: 20px 0;
    padding: 14px 16px;
    background: #FBEED2;
    border: 1px solid #E5C28F;
    border-left: 4px solid #B8730E;
    border-radius: 6px;
    color: #5C4A18;
}
.inspira-disclaimer-icon { flex-shrink: 0; color: #B8730E; margin-top: 2px; }
.inspira-disclaimer-body { display: flex; flex-direction: column; gap: 4px; line-height: 1.45; }
.inspira-disclaimer-body strong { color: var(--ib-ink); font-size: 13.5px; font-weight: 600; }
.inspira-disclaimer-body span { font-size: 13px; color: #5C4A18; }
.inspira-disclaimer-body strong + strong { color: var(--ib-ink); }
.inspira-disclaimer-success {
    margin-top: 24px;
    text-align: left;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

/* ════════════════════════════════════════════════════════════
   v2.7.34 — Per-service custom fields on the booking form
   ════════════════════════════════════════════════════════════ */
/* Container per conditional field. Stays hidden via the [hidden]
   attribute until JS reveals it based on the service's toggle. */
.inspira-cf-field[hidden] { display: none; }

/* Budget input — currency symbol prefix sits inside the same
   bordered box as the number input for a unified look. */
.inspira-cf-budget-wrap {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--ib-rule);
    border-radius: 6px;
    overflow: hidden;
    background: #FFFFFF;
}
.inspira-cf-budget-prefix {
    display: flex;
    align-items: center;
    padding: 0 12px;
    background: #FAF7F2;
    color: var(--ib-muted);
    font-size: 14px;
    font-weight: 500;
    border-right: 1px solid var(--ib-rule);
}
.inspira-cf-budget-wrap input[type="number"] {
    flex: 1;
    border: 0;
    background: transparent;
    padding: 10px 12px;
    font-size: 14px;
}
.inspira-cf-budget-wrap input[type="number"]:focus { outline: none; }

/* Guest-count disclaimer. Sits ABOVE the dropdown so the customer
   reads the 4-guest limit before they open the select and discover
   it's capped. Same visual language as .inspira-disclaimer but
   tighter spacing since it's mid-form. */
.inspira-cf-guest-disclaimer {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 8px;
    padding: 10px 12px;
    background: #FAF7F2;
    border: 1px solid var(--ib-rule);
    border-left: 3px solid var(--ib-accent);
    border-radius: 6px;
    font-size: 13px;
    color: var(--ib-ink);
    line-height: 1.45;
}
.inspira-cf-guest-disclaimer svg {
    flex-shrink: 0;
    color: var(--ib-accent);
    margin-top: 1px;
}

/* ════════════════════════════════════════════════════════════
   v2.0.5 — Hide flow-steps on success + single-column booking
   ════════════════════════════════════════════════════════════ */
.inspira-flow-steps.is-hidden { display: none; }

/* When booking_form is rendered without an image, use full width */
.inspira-bf-single { max-width: 720px; margin: 24px auto; }
.inspira-bf-single .inspira-flow-hero { display: none; }

/* ════════════════════════════════════════════════════════════
   v2.0.6 — Inline service selector for [inspira_booking_form]
   ════════════════════════════════════════════════════════════ */
.inspira-bf-selector {
    max-width: 560px;
    margin: 24px auto;
    padding: 28px;
    background: #FFFFFF;
    border: 1px solid #E5E0D6;
    border-radius: 10px;
}
.inspira-bf-selector-head { margin-bottom: 20px; }
.inspira-bf-selector-title {
    font-family: Georgia, serif; font-size: 24px; font-weight: 500;
    margin: 0 0 6px; color: var(--ib-ink);
}
.inspira-bf-selector-sub { color: #6B6862; font-size: 14px; margin: 0; }
.inspira-bf-selector-form {
    display: flex; flex-direction: column; gap: 14px;
}
.inspira-bf-selector-label { display: flex; flex-direction: column; gap: 6px; }
.inspira-bf-selector-label span {
    font-size: 11px; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: #6B6862;
}
.inspira-bf-selector-select {
    width: 100%; padding: 10px 12px;
    background: #FAF7F2;
    border: 1px solid #C9C2B2; border-radius: 6px;
    font-size: 14px; color: var(--ib-ink);
    font-family: inherit;
}
.inspira-bf-selector-select:focus {
    outline: 0; border-color: var(--ib-accent);
    box-shadow: 0 0 0 3px rgba(200,71,43,0.18);
}
.inspira-bf-selector-submit {
    align-self: flex-start;
    margin-top: 4px;
}
.inspira-bf-change-service {
    display: inline-block;
    margin-bottom: 12px;
    font-size: 13px;
    color: #6B6862;
    text-decoration: none;
}
.inspira-bf-change-service:hover { color: var(--ib-accent); }

/* ════════════════════════════════════════════════════════════
   v2.0.6 — Service-as-step-1 picker (multi-service flow)
   ════════════════════════════════════════════════════════════ */

/* In picker mode the flow box doesn't need its own outer max-width because the
   2-col wrapper handles centering. Keep the padding consistent though. */
.inspira-bf-col-form .inspira-flow {
    max-width: none;
    margin: 0;
    width: 100%;
}

/* Service radio cards inside the flow */
.inspira-service-radios {
    display: flex; flex-direction: column;
    gap: 10px;
    margin: 12px 0 24px;
}
.inspira-service-radio {
    display: flex; align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--ib-paper);
    border: 1.5px solid var(--ib-rule);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.inspira-service-radio:hover {
    border-color: var(--ib-accent);
    background: var(--ib-paper-2);
}
.inspira-service-radio input[type="radio"] {
    position: absolute; opacity: 0; pointer-events: none;
}
.inspira-service-radio-mark {
    flex-shrink: 0;
    width: 20px; height: 20px;
    border-radius: 50%;
    border: 2px solid var(--ib-rule);
    background: var(--ib-paper-2);
    position: relative;
    transition: border-color .15s;
}
.inspira-service-radio:has(input:checked) {
    border-color: var(--svc-color, var(--ib-accent));
    background: var(--ib-paper-2);
    box-shadow: 0 0 0 3px rgba(200,71,43,0.08);
}
.inspira-service-radio:has(input:checked) .inspira-service-radio-mark {
    border-color: var(--svc-color, var(--ib-accent));
}
.inspira-service-radio:has(input:checked) .inspira-service-radio-mark::after {
    content: '';
    position: absolute; inset: 3px;
    border-radius: 50%;
    background: var(--svc-color, var(--ib-accent));
}
.inspira-service-radio-body {
    display: flex; flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}
.inspira-service-radio-name {
    font-size: 15px; font-weight: 600;
    color: var(--ib-ink);
}
.inspira-service-radio-meta {
    font-size: 12.5px;
    color: var(--ib-muted);
    font-family: var(--ib-mono);
}

/* When picker mode is active and no service is picked, show the first image
   as a friendly default in the left column. The :has fallback in earlier CSS
   handles browsers that support it; for safety, this rule explicitly shows
   the first layer until JS adds is-active to one. */
.inspira-bf-image-stack:not(:has(.is-active)) .inspira-bf-image-layer:first-child {
    opacity: 1;
}

/* ════════════════════════════════════════════════════════════
   v2.0.8 — Selection summary chips + date/time toggle
   ════════════════════════════════════════════════════════════ */

/* Summary chip strip — sits between step indicator and the active panel */
.inspira-flow-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0 20px;
    padding: 12px 14px;
    background: var(--ib-paper);
    border: 1px solid var(--ib-rule);
    border-radius: 8px;
}
.inspira-flow-summary[hidden] { display: none; }

/* Chips are buttons — clickable to jump back to that step */
button.inspira-summary-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px 6px 12px;
    background: var(--ib-paper-2);
    border: 1px solid var(--ib-rule);
    border-radius: 999px;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.2;
    cursor: pointer;
    color: var(--ib-ink);
    text-align: left;
    transition: border-color .15s, background .15s, transform .1s;
}
button.inspira-summary-chip:hover {
    border-color: var(--ib-accent);
    background: var(--ib-paper);
}
button.inspira-summary-chip:active { transform: scale(0.98); }
button.inspira-summary-chip:focus-visible {
    outline: 2px solid var(--ib-accent);
    outline-offset: 2px;
}
button.inspira-summary-chip.is-locked {
    cursor: default;
    background: var(--ib-paper);
}
button.inspira-summary-chip.is-locked:hover {
    border-color: var(--ib-rule);
    background: var(--ib-paper);
    transform: none;
}
.inspira-summary-chip[hidden] { display: none; }

.inspira-summary-icon { color: var(--ib-accent); display: inline-flex; flex-shrink: 0; }
.inspira-summary-body { display: inline-flex; flex-direction: column; gap: 1px; min-width: 0; }
.inspira-summary-label {
    font-size: 10px; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--ib-muted);
}
.inspira-summary-value {
    font-size: 13px; font-weight: 600;
    color: var(--ib-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}
.inspira-summary-edit {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 22px; height: 22px;
    background: var(--ib-paper);
    border-radius: 50%;
    color: var(--ib-muted);
    flex-shrink: 0;
    transition: background .15s, color .15s;
}
button.inspira-summary-chip:hover .inspira-summary-edit {
    background: var(--ib-accent);
    color: var(--ib-paper-2);
}

/* Mobile: chips smaller and value can wrap */
@media (max-width: 560px) {
    .inspira-flow-summary { padding: 10px; gap: 6px; }
    button.inspira-summary-chip {
        flex: 1 1 100%;
        padding: 8px 10px;
    }
    .inspira-summary-value {
        max-width: none;
        white-space: normal;
    }
}

/* Date / time sub-panes inside the datetime step */
.inspira-dt-pane { display: none; }
[data-panel="datetime"][data-dt-mode="date"] .inspira-dt-pane-date { display: block; }
[data-panel="datetime"][data-dt-mode="time"] .inspira-dt-pane-time { display: block; }

/* Default to date mode if no attribute is set yet */
[data-panel="datetime"]:not([data-dt-mode]) .inspira-dt-pane-date { display: block; }

/* Slot grid spans full width now that it's standalone */
.inspira-dt-pane-time .inspira-slot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 8px;
    max-height: 420px;
    overflow-y: auto;
    padding: 4px 4px 4px 0;
}

/* ════════════════════════════════════════════════════════════
   v2.1.0 — Rate-limit gate (anti-duplicate-booking)
   ════════════════════════════════════════════════════════════ */
.inspira-rate-limit { padding: 24px 0; }
.inspira-rate-limit[hidden] { display: none; }
.inspira-rate-limit-card {
    max-width: 560px;
    margin: 0 auto;
    padding: 32px;
    background: var(--ib-paper-2);
    border: 1px solid var(--ib-rule);
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 4px 24px rgba(20,19,15,0.06);
}
.inspira-rate-limit-icon {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 64px; height: 64px;
    border-radius: 50%;
    background: var(--ib-success-soft);
    color: var(--ib-success);
    margin-bottom: 16px;
}
.inspira-rate-limit-title {
    font-family: var(--ib-serif);
    font-size: 24px; font-weight: 500;
    margin: 0 0 12px;
    color: var(--ib-ink);
}
.inspira-rate-limit-text {
    font-size: 14.5px; line-height: 1.55;
    color: var(--ib-ink);
    margin: 0 0 24px;
}
.inspira-rate-limit-confirm {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    background: var(--ib-paper);
    border: 1.5px solid var(--ib-rule);
    border-radius: 8px;
    margin-bottom: 20px;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s;
}
.inspira-rate-limit-confirm:hover { border-color: var(--ib-accent); }
.inspira-rate-limit-confirm input[type="checkbox"] {
    width: 18px; height: 18px;
    margin-top: 1px;
    flex-shrink: 0;
    accent-color: var(--ib-accent);
}
.inspira-rate-limit-confirm span {
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--ib-ink-2, var(--ib-ink));
}
.inspira-rate-limit-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    align-items: center;
}
.inspira-rate-limit-actions .inspira-btn-primary[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ════════════════════════════════════════════════════════════
   v2.1.1 — My-bookings card status border colors
   The 4px left border now reflects the booking status, not service color.
   ════════════════════════════════════════════════════════════ */
.inspira-mb-card.is-status-confirmed { border-left-color: #2E7D5B; }
.inspira-mb-card.is-status-pending   { border-left-color: #B8730E; }
.inspira-mb-card.is-status-completed { border-left-color: #6B6862; }
.inspira-mb-card.is-status-no_show   { border-left-color: #B0301F; }
.inspira-mb-card.is-status-canceled  { border-left-color: #C9C2B2; }

/* Status pill colors get a matching background tint for visual reinforcement */
.inspira-mb-status {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.inspira-mb-status-confirmed { background: #E1F0E8; color: #2E7D5B; }
.inspira-mb-status-pending   { background: #FBEED2; color: #8C5A0E; }
.inspira-mb-status-completed { background: #F1EEE7; color: #6B6862; }
.inspira-mb-status-no_show   { background: #FBE9E1; color: #B0301F; }
.inspira-mb-status-canceled  { background: #F1EEE7; color: #9A9388; }

/* ════════════════════════════════════════════════════════════
   v2.1.2 — [inspira_booking_button] icon prefix
   ════════════════════════════════════════════════════════════ */
.inspira-btn-icon {
    display: inline-block;
    vertical-align: -2px;
    margin-right: 6px;
}

/* ════════════════════════════════════════════════════════════
   v2.1.2 — [inspira_services] grid / list / cards
   ════════════════════════════════════════════════════════════ */
.inspira-services { margin: 24px 0; }

/* Grid mode (default) */
.inspira-services-grid {
    display: grid;
    gap: 24px;
}
.inspira-services-grid.is-cols-1 { grid-template-columns: 1fr; }
.inspira-services-grid.is-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.inspira-services-grid.is-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.inspira-services-grid.is-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Cards mode — bigger image, more vertical space */
.inspira-services-cards {
    display: grid;
    gap: 32px;
}
.inspira-services-cards.is-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.inspira-services-cards.is-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* List mode — horizontal rows, image left */
.inspira-services-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.inspira-services-list .inspira-svc-item {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 20px;
    align-items: center;
}
.inspira-services-list .inspira-svc-imgwrap {
    aspect-ratio: 4 / 3;
}

@media (max-width: 720px) {
    .inspira-services-grid,
    .inspira-services-cards {
        grid-template-columns: 1fr !important;
    }
    .inspira-services-list .inspira-svc-item {
        grid-template-columns: 1fr;
    }
}

/* Card piece */
.inspira-svc-item {
    background: var(--ib-paper-2);
    border: 1px solid var(--ib-rule);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.inspira-svc-item:hover {
    border-color: var(--svc-color, var(--ib-accent));
    box-shadow: 0 8px 24px rgba(20,19,15,0.08);
}
.inspira-svc-imgwrap {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--ib-paper);
}
.inspira-svc-imgwrap .inspira-svc-img,
.inspira-svc-imgwrap img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}
.inspira-svc-item:hover .inspira-svc-imgwrap img { transform: scale(1.04); }

.inspira-svc-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}
.inspira-svc-name {
    font-family: var(--ib-serif);
    font-size: 20px;
    font-weight: 500;
    margin: 0;
    color: var(--ib-ink);
    line-height: 1.2;
}
.inspira-svc-name a {
    color: inherit;
    text-decoration: none;
}
.inspira-svc-name a:hover { color: var(--svc-color, var(--ib-accent)); }
.inspira-svc-desc {
    font-size: 14px;
    line-height: 1.5;
    color: var(--ib-muted);
    margin: 0;
}
.inspira-svc-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.inspira-svc-meta-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: var(--ib-paper);
    border: 1px solid var(--ib-rule);
    border-radius: 999px;
    font-size: 12px;
    color: var(--ib-ink-2, var(--ib-ink));
    font-family: var(--ib-mono);
}
.inspira-svc-meta-price {
    background: var(--svc-color, var(--ib-accent));
    border-color: var(--svc-color, var(--ib-accent));
    color: var(--ib-paper-2);
    font-weight: 600;
}
.inspira-svc-book {
    margin-top: auto;
    align-self: flex-start;
}

/* ════════════════════════════════════════════════════════════
   v2.1.2 — [inspira_service_card] single rich card
   ════════════════════════════════════════════════════════════ */
.inspira-svc-single {
    background: var(--ib-paper-2);
    border: 1px solid var(--ib-rule);
    border-left: 4px solid var(--svc-color, var(--ib-accent));
    border-radius: 10px;
    overflow: hidden;
    margin: 24px 0;
    max-width: 760px;
}
.inspira-svc-single-horizontal {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
}
.inspira-svc-single-vertical {
    display: flex;
    flex-direction: column;
}
@media (max-width: 640px) {
    .inspira-svc-single-horizontal {
        grid-template-columns: 1fr;
    }
}
.inspira-svc-single-imgwrap {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--ib-paper);
}
.inspira-svc-single-imgwrap .inspira-svc-img,
.inspira-svc-single-imgwrap img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.inspira-svc-single-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}
.inspira-svc-single-name {
    font-family: var(--ib-serif);
    font-size: 24px;
    font-weight: 500;
    margin: 0;
    color: var(--ib-ink);
    line-height: 1.2;
}
.inspira-svc-single-name a { color: inherit; text-decoration: none; }
.inspira-svc-single-desc {
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--ib-ink-2, var(--ib-ink));
    margin: 0;
}

/* ════════════════════════════════════════════════════════════
   v2.1.3 — [inspira_booking_button mode="modal"] overlay
   ════════════════════════════════════════════════════════════ */
body.inspira-modal-locked { overflow: hidden; }

.inspira-booking-modal {
    position: fixed;
    inset: 0;
    z-index: 100050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
}
.inspira-booking-modal[hidden] { display: none; }
.inspira-booking-modal *,
.inspira-booking-modal *::before,
.inspira-booking-modal *::after { box-sizing: border-box; }

.inspira-booking-modal-backdrop {
    position: absolute; inset: 0;
    background: rgba(20,19,15,0.55);
    opacity: 0;
    transition: opacity .2s ease;
}
.inspira-booking-modal.is-open .inspira-booking-modal-backdrop { opacity: 1; }

.inspira-booking-modal-panel {
    position: relative;
    width: 100%;
    max-width: 920px;
    max-height: calc(100vh - 48px);
    background: var(--ib-paper-2);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(20,19,15,0.32);
    transform: translateY(20px);
    opacity: 0;
    transition: transform .25s ease, opacity .2s ease;
    display: flex;
    flex-direction: column;
}
.inspira-booking-modal.is-open .inspira-booking-modal-panel {
    transform: translateY(0);
    opacity: 1;
}

.inspira-booking-modal-close {
    position: absolute;
    top: 12px; right: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 36px; height: 36px;
    background: var(--ib-paper-2);
    border: 1px solid var(--ib-rule);
    border-radius: 50%;
    color: var(--ib-ink-2, var(--ib-ink));
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(20,19,15,0.08);
    transition: border-color .15s, color .15s;
}
.inspira-booking-modal-close:hover {
    border-color: var(--ib-accent);
    color: var(--ib-accent);
}

/* Modal body holds the inline booking flow. It scrolls internally. */
.inspira-booking-modal-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0;
    background: var(--ib-paper);
}
/* Strip outer margins from the inline flow inside the modal */
.inspira-booking-modal-body .inspira-bf-two-col,
.inspira-booking-modal-body .inspira-bf-single {
    margin: 0 !important;
    padding: 24px !important;
    max-width: none !important;
}

@media (max-width: 720px) {
    .inspira-booking-modal { padding: 0; }
    .inspira-booking-modal-panel {
        max-width: 100%;
        max-height: 100%;
        height: 100%;
        border-radius: 0;
    }
    .inspira-booking-modal-close { top: 8px; right: 8px; }
    .inspira-booking-modal-body .inspira-bf-two-col,
    .inspira-booking-modal-body .inspira-bf-single {
        padding: 16px !important;
    }
}

/* Embed mode — when the booking flow is loaded inside the booking-button
   iframe modal (?ib_embed=1), strip every common theme wrapper so only
   the booking form is visible against a clean paper background. */
html.inspira-embed-html,
body.inspira-embed {
    background: var(--ib-paper) !important;
    padding-top: 0 !important;
    margin: 0 !important;
}
body.inspira-embed {
    /* Force scrolling on body inside the iframe, not on any inner wrapper */
    overflow-y: auto;
}

/* WordPress admin bar */
body.inspira-embed #wpadminbar { display: none !important; }
html.inspira-embed-html { margin-top: 0 !important; }

/* Generic header / footer / nav */
body.inspira-embed > header,
body.inspira-embed > footer,
body.inspira-embed .site-header,
body.inspira-embed .site-footer,
body.inspira-embed nav.main-navigation,
body.inspira-embed .menu-toggle,
body.inspira-embed #masthead,
body.inspira-embed #colophon,
body.inspira-embed #site-navigation { display: none !important; }

/* Breadcrumbs (every common variant) */
body.inspira-embed .breadcrumb,
body.inspira-embed .breadcrumbs,
body.inspira-embed .breadcrumb-wrap,
body.inspira-embed .breadcrumb-wrapper,
body.inspira-embed .breadcrumbs-wrap,
body.inspira-embed .yoast-breadcrumb,
body.inspira-embed .rank-math-breadcrumb,
body.inspira-embed nav[aria-label="Breadcrumb"],
body.inspira-embed nav[aria-label="breadcrumbs"] { display: none !important; }

/* Page banners / hero / titles often injected by themes */
body.inspira-embed .page-title-bar,
body.inspira-embed .page-header,
body.inspira-embed .entry-header,
body.inspira-embed .post-header,
body.inspira-embed .page-banner,
body.inspira-embed .hero-section,
body.inspira-embed .post-thumbnail { display: none !important; }

/* Astra theme */
body.inspira-embed .ast-page-banner-wrap,
body.inspira-embed .ast-hfb-header,
body.inspira-embed .ast-header-break-point,
body.inspira-embed .main-header-bar-wrap,
body.inspira-embed .main-header-bar,
body.inspira-embed #ast-mobile-header,
body.inspira-embed .ast-archive-description,
body.inspira-embed .ast-title-bar-wrap,
body.inspira-embed .ast-archive-title { display: none !important; }

/* Hello Elementor + Elementor generally */
body.inspira-embed .elementor-location-header,
body.inspira-embed .elementor-location-footer { display: none !important; }

/* Generate Press */
body.inspira-embed .page-hero,
body.inspira-embed #masthead { display: none !important; }

/* OceanWP, Storefront, Twenty-Twenty* */
body.inspira-embed #site-header,
body.inspira-embed #footer,
body.inspira-embed .storefront-breadcrumb { display: none !important; }

/* Strip wrapper padding so the form has room */
body.inspira-embed .site,
body.inspira-embed .site-content,
body.inspira-embed .content-area,
body.inspira-embed .entry-content,
body.inspira-embed main,
body.inspira-embed #content,
body.inspira-embed #primary,
body.inspira-embed article.page,
body.inspira-embed article.post {
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
    width: auto !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
}

/* The booking form wrapper itself gets the padding back */
body.inspira-embed .inspira-bf-two-col,
body.inspira-embed .inspira-bf-single {
    margin: 0 auto !important;
    padding: 24px !important;
}
@media (max-width: 720px) {
    body.inspira-embed .inspira-bf-two-col,
    body.inspira-embed .inspira-bf-single {
        padding: 16px !important;
    }
}

/* v2.1.5 — Modal auto-close countdown shown on the success panel */
.inspira-modal-autoclose {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 20px auto 0;
    max-width: 480px;
    padding: 12px 16px;
    background: #FAF7F2;
    border: 1px solid #E5E0D6;
    border-radius: 8px;
    font-size: 13.5px;
    color: #2A2823;
}
.inspira-modal-autoclose-text strong { color: var(--ib-accent); font-weight: 700; }
.inspira-modal-autoclose-cancel {
    flex-shrink: 0;
    background: transparent;
    border: 1px solid #E5E0D6;
    border-radius: 999px;
    padding: 5px 14px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 500;
    color: #2A2823;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}
.inspira-modal-autoclose-cancel:hover {
    border-color: var(--ib-accent);
    color: var(--ib-accent);
}

/* ════════════════════════════════════════════════════════════
   v2.1.8 — Cancellation confirmation (standalone, replaces flow)
   ════════════════════════════════════════════════════════════ */
.inspira-cancel-confirm {
    max-width: 560px;
    margin: 48px auto;
    padding: 40px 32px;
    background: #FFFFFF;
    border: 1px solid #E5E0D6;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 4px 24px rgba(20,19,15,0.06);
}
.inspira-cancel-icon {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 88px; height: 88px;
    border-radius: 50%;
    margin-bottom: 20px;
}
.inspira-cancel-confirm.is-type-success .inspira-cancel-icon { background: #E1F0E8; color: #2E7D5B; }
.inspira-cancel-confirm.is-type-info    .inspira-cancel-icon { background: #F4F0E8; color: #6B6862; }
.inspira-cancel-confirm.is-type-error   .inspira-cancel-icon { background: #FBE9E1; color: #B0301F; }

.inspira-cancel-title {
    font-family: Georgia, serif;
    font-size: 28px;
    font-weight: 500;
    margin: 0 0 12px;
    color: var(--ib-ink);
}
.inspira-cancel-msg {
    font-size: 15px;
    line-height: 1.55;
    color: #2A2823;
    margin: 0 0 24px;
}
.inspira-cancel-details {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 16px;
    text-align: left;
    max-width: 380px;
    margin: 0 auto 28px;
    padding: 16px 20px;
    background: #FAF7F2;
    border-radius: 8px;
    border: 1px solid #E5E0D6;
}
.inspira-cancel-details dt {
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: #6B6862;
    margin: 0;
}
.inspira-cancel-details dd {
    font-size: 14px;
    color: var(--ib-ink);
    margin: 0;
}
.inspira-cancel-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ════════════════════════════════════════════════════════════
   v2.2.0 — Anti-bot human-check gate
   ════════════════════════════════════════════════════════════ */
.inspira-human-gate {
    max-width: 560px;
    margin: 32px auto;
    padding: 0;
}
.inspira-human-gate-card {
    padding: 32px 28px;
    background: #FFFFFF;
    border: 1px solid #E5E0D6;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 4px 24px rgba(20,19,15,0.06);
}
.inspira-human-gate-title {
    font-family: Georgia, serif;
    font-size: 22px;
    font-weight: 500;
    margin: 0 0 8px;
    color: var(--ib-ink);
}
.inspira-human-gate-sub {
    font-size: 14px;
    line-height: 1.55;
    color: #6B6862;
    margin: 0 0 20px;
}
.inspira-human-gate-label {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 22px;
    background: #FAF7F2;
    border: 1px solid #E5E0D6;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14.5px;
    color: var(--ib-ink);
    transition: border-color .15s, background .15s;
}
.inspira-human-gate-label:hover { border-color: var(--ib-accent); }
.inspira-human-gate-label input[type="checkbox"] {
    width: 18px; height: 18px;
    accent-color: var(--ib-accent);
    cursor: pointer;
}

/* Danger button — used on cancel confirmation */
.inspira-btn.inspira-btn-danger,
a.inspira-btn.inspira-btn-danger {
    background: #B91C1C;
    color: #FFFFFF;
    border-color: #B91C1C;
}
.inspira-btn.inspira-btn-danger:hover {
    background: #8B1414;
    border-color: #8B1414;
}

/* Warn type for cancel-confirm step */
.inspira-cancel-confirm.is-type-warn .inspira-cancel-icon {
    background: #FCE9C2;
    color: #B8730E;
}

/* Access-link status (my-bookings magic-link form) */
.inspira-access-status {
    margin: 16px 0 0;
    padding: 12px 14px;
    font-size: 13.5px;
    color: #2A2823;
    text-align: center;
    border-radius: 8px;
}
.inspira-access-status:not(:empty) {
    background: #F4F0E8;
    border: 1px solid #E5E0D6;
}

/* ════════════════════════════════════════════════════════════
   v2.3.0 — WooCommerce integration buttons
   ════════════════════════════════════════════════════════════ */
.inspira-wc-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
    margin: 24px 0 20px;
    padding: 0;
}
.inspira-wc-actions > * { flex: 0 0 auto; }
.inspira-wc-contact {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 26px;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 500;
    background: transparent;
    border: 1.5px solid var(--ib-ink, var(--ib-ink));
    color: var(--ib-ink, var(--ib-ink));
    border-radius: 999px;
    text-decoration: none;
    line-height: 1;
    transition: background .15s, color .15s, border-color .15s;
}
.inspira-wc-contact:hover {
    background: var(--ib-ink, var(--ib-ink));
    color: #FFFFFF;
}
.inspira-wc-loop-btn {
    display: inline-block;
    padding: 10px 18px !important;
    background: var(--ib-accent, var(--ib-accent)) !important;
    color: #FFFFFF !important;
    border-radius: 999px !important;
    font-weight: 500;
    text-decoration: none;
}
.inspira-wc-loop-btn:hover {
    background: var(--ib-ink, var(--ib-ink)) !important;
}

/* v2.4.4 — Product-of-interest chip on booking form */
.inspira-field-product-context label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ib-muted, #6B6862);
    margin-bottom: 6px;
}
.inspira-product-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--ib-paper, #FAF7F2);
    border: 1px solid var(--ib-rule, #E5E0D6);
    border-radius: 999px;
    color: var(--ib-ink, var(--ib-ink));
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    transition: border-color .15s, background .15s;
}
.inspira-product-chip:hover {
    border-color: var(--ib-accent, var(--ib-accent));
    background: #FFFFFF;
}
.inspira-product-chip svg { flex-shrink: 0; color: var(--ib-accent, var(--ib-accent)); }

/* v2.4.6 — "Already booked" chip on WC product pages */
.inspira-wc-booked {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: linear-gradient(135deg, #E8F2EC 0%, #F5FAF7 100%);
    border: 1.5px solid #2E7D5B;
    border-radius: 10px;
    color: var(--ib-ink);
    flex-wrap: wrap;
}
.inspira-wc-booked.is-status-pending {
    background: linear-gradient(135deg, #FCE9C2 0%, #FFF8E8 100%);
    border-color: #B8730E;
}
.inspira-wc-booked-icon {
    flex-shrink: 0;
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    background: #2E7D5B;
    color: #FFFFFF;
    border-radius: 50%;
}
.inspira-wc-booked.is-status-pending .inspira-wc-booked-icon {
    background: #B8730E;
}
.inspira-wc-booked-body { flex: 1; min-width: 0; }
.inspira-wc-booked-title {
    font-family: var(--ib-font-serif, Georgia, serif);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 2px;
}
.inspira-wc-booked-meta {
    font-size: 13.5px;
    color: var(--ib-muted, #6B6862);
    line-height: 1.4;
}
.inspira-wc-booked-svc { font-weight: 500; color: var(--ib-ink, var(--ib-ink)); }
.inspira-wc-booked-dot { margin: 0 5px; opacity: 0.6; }
.inspira-wc-booked-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}
.inspira-wc-booked-view {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    background: #2E7D5B;
    color: #FFFFFF !important;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: background .15s;
}
.inspira-wc-booked-view:hover { background: var(--ib-ink); }
.inspira-wc-booked.is-status-pending .inspira-wc-booked-view { background: #B8730E; }
.inspira-wc-booked.is-status-pending .inspira-wc-booked-view:hover { background: var(--ib-ink); }

/* v2.4.9 — Already-booked chip responsive + AJAX swap loading state */
@media (max-width: 600px) {
    .inspira-wc-booked {
        flex-direction: column;
        align-items: flex-start;
        padding: 14px;
        gap: 12px;
    }
    .inspira-wc-booked-icon { width: 32px; height: 32px; }
    .inspira-wc-booked-icon svg { width: 18px; height: 18px; }
    .inspira-wc-booked-title { font-size: 16px; }
    .inspira-wc-booked-meta {
        font-size: 13px;
        white-space: normal;
    }
    .inspira-wc-booked-actions {
        width: 100%;
        flex-shrink: 1;
    }
    .inspira-wc-booked-view {
        width: 100%;
        justify-content: center;
        padding: 11px 16px;
        font-size: 14px;
        box-sizing: border-box;
    }
    .inspira-wc-booked-meta .inspira-wc-booked-svc,
    .inspira-wc-booked-meta .inspira-wc-booked-when {
        display: inline-block;
    }
}

/* AJAX-check loading state — hide booking button & chip until response
   resolved, so identified customers don't see a Book→Booked flash.
   Anonymous customers (no cookies) never get this class, so their button
   appears instantly. The .ib-ready class is added by JS once we know the state. */
.inspira-wc-actions.ib-checking .inspira-btn-wrap,
.inspira-wc-actions.ib-checking .inspira-wc-booked {
    opacity: 0;
    pointer-events: none;
    transition: opacity 150ms ease-in;
}
.inspira-wc-actions.ib-ready .inspira-btn-wrap,
.inspira-wc-actions.ib-ready .inspira-wc-booked {
    opacity: 1;
    pointer-events: auto;
}

/* v2.5.3 — Modal notice (replaces inline + alert for blocking errors) */
.inspira-notice-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(20, 19, 15, 0.45);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: inspira-notice-fadein 180ms ease-out;
}
.inspira-notice-backdrop.is-closing {
    animation: inspira-notice-fadeout 150ms ease-in forwards;
}
body.inspira-notice-open { overflow: hidden; }
.inspira-notice-modal {
    background: #FFFFFF;
    border-radius: 12px;
    padding: 28px 28px 22px;
    max-width: 440px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25), 0 0 0 1px rgba(20,19,15,0.06);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
    animation: inspira-notice-pop 220ms cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
.inspira-notice-modal-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
}
.inspira-notice-error .inspira-notice-modal-icon {
    background: #FDECEA;
    color: var(--ib-accent);
}
.inspira-notice-info .inspira-notice-modal-icon,
.inspira-notice-success .inspira-notice-modal-icon {
    background: #E8F2EC;
    color: #2E7D5B;
}
.inspira-notice-modal-body { width: 100%; }
.inspira-notice-modal-msg {
    font-size: 16px;
    line-height: 1.5;
    color: var(--ib-ink);
    word-wrap: break-word;
}
.inspira-notice-modal-actions {
    width: 100%;
    margin-top: 6px;
}
.inspira-notice-modal-ok {
    appearance: none;
    background: var(--ib-ink);
    color: #FFFFFF;
    border: none;
    border-radius: 999px;
    padding: 11px 32px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    min-width: 120px;
    transition: background .15s, transform .1s;
}
.inspira-notice-modal-ok:hover { background: #2E2D27; }
.inspira-notice-modal-ok:active { transform: scale(0.98); }
.inspira-notice-modal-ok:focus-visible { outline: 2px solid var(--ib-accent); outline-offset: 2px; }
@keyframes inspira-notice-fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes inspira-notice-fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}
@keyframes inspira-notice-pop {
    from { opacity: 0; transform: scale(0.92) translateY(8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
@media (max-width: 480px) {
    .inspira-notice-modal {
        padding: 22px 20px 18px;
        max-width: 100%;
    }
    .inspira-notice-modal-icon { width: 48px; height: 48px; }
    .inspira-notice-modal-icon svg { width: 24px; height: 24px; }
    .inspira-notice-modal-msg { font-size: 15px; }
}

/* v2.6.6 — slot panel closed/full states (public booking flow) */
.inspira-slot-empty.is-closed {
    background:
        repeating-linear-gradient(
            45deg,
            transparent 0,
            transparent 8px,
            rgba(200,71,43,0.06) 8px,
            rgba(200,71,43,0.06) 16px
        ),
        #FDF5F2;
    border: 1px solid rgba(200,71,43,0.25);
    color: #b54a4a;
    font-weight: 500;
}
.inspira-slot-empty.is-full {
    background: #FFFBF6;
    border: 1px solid rgba(139,106,20,0.3);
    color: #8b6a14;
    font-weight: 500;
}

/* v2.7.63 — public calendar closed-day visual: visibly struck-out so
 * customers can see at a glance which days are closed (not just
 * "they look slightly grey"). Bolder hatch + strikethrough on the
 * day number + clearer ban icon make the closed state unambiguous. */
.inspira-cal-cell.is-closed {
    background:
        repeating-linear-gradient(
            45deg,
            transparent 0,
            transparent 6px,
            rgba(181, 48, 31, 0.08) 6px,
            rgba(181, 48, 31, 0.08) 12px
        ),
        rgba(0, 0, 0, 0.025);
    cursor: not-allowed;
}
.inspira-cal-cell.is-closed .inspira-cal-day {
    opacity: 0.55;
    text-decoration: line-through;
    text-decoration-color: rgba(181, 48, 31, 0.6);
    text-decoration-thickness: 2px;
}
.inspira-cal-closed-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 4px;
    color: rgba(181, 48, 31, 0.85);
    vertical-align: middle;
}
/* Optional "Closed" label tucked at the bottom-left of the cell for
 * extra clarity. Only renders when the cell is wide enough (suppressed
 * on the very tight mobile breakpoint). */
.inspira-cal-cell.is-closed::after {
    content: "Closed";
    position: absolute;
    bottom: 6px;
    left: 8px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(181, 48, 31, 0.7);
    pointer-events: none;
}
@media (max-width: 480px) {
    .inspira-cal-cell.is-closed::after { display: none; }
}

/* ─── v2.7.3 — Dedicated staff-selection step ───────────────── */
.inspira-staff-radios {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 12px 0 24px;
}
.inspira-staff-radio {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--ib-paper);
    border: 1.5px solid var(--ib-rule);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color .15s, background .15s, box-shadow .15s;
    position: relative;
}
.inspira-staff-radio:hover {
    border-color: var(--ib-accent);
    background: var(--ib-paper-2);
}
.inspira-staff-radio input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.inspira-staff-radio:has(input:checked),
.inspira-staff-radio input:checked + .inspira-staff-radio-avatar {
    /* :has fallback handled below */
}
.inspira-staff-radio input:checked ~ .inspira-staff-radio-body .inspira-staff-radio-name {
    color: var(--ib-accent);
}
.inspira-staff-radio:has(input:checked) {
    border-color: var(--ib-accent);
    background: var(--ib-paper-2);
    box-shadow: 0 0 0 3px rgba(200, 71, 43, 0.08);
}
.inspira-staff-radio-avatar {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--ib-paper-2);
    border: 1px solid var(--ib-rule);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ib-muted);
    overflow: hidden;
    font-family: var(--ib-font-serif, serif);
    font-size: 18px;
    font-weight: 500;
}
.inspira-staff-radio-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.inspira-staff-radio-avatar.inspira-staff-any {
    background: linear-gradient(135deg, rgba(200, 71, 43, 0.08), rgba(200, 71, 43, 0.16));
    color: var(--ib-accent);
}
.inspira-staff-radio-initial {
    color: var(--ib-ink);
}
.inspira-staff-radio-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
}
.inspira-staff-radio-name {
    font-weight: 500;
    color: var(--ib-ink);
    font-size: 15px;
    transition: color .15s;
}
.inspira-staff-radio-meta {
    font-size: 12.5px;
    color: var(--ib-muted);
}
/* Hidden step indicator entry (when service has 0/1 staff) */
.inspira-step.is-hidden,
.inspira-flow-panel.is-hidden { display: none; }

/* ─── v2.7.14 — Customer self-reschedule banner ─────────────────────────
   Renders at the top of the flow when the page was opened via a
   reschedule link. Visual: warm paper background + accent left border
   (same vocabulary as the .inspira-flow-message banners), with an icon
   + two-line body that names the original appointment.

   Distinct from other banners: doesn't use the error/success colors
   because rescheduling is neutral — neither bad news nor a victory yet. */
.inspira-reschedule-banner {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 18px;
    margin: 0 0 24px;
    background: var(--ib-paper);
    border: 1px solid var(--ib-rule);
    border-left: 3px solid var(--ib-accent);
    border-radius: 0 var(--ib-radius) var(--ib-radius) 0;
}
.inspira-reschedule-banner-icon {
    flex-shrink: 0;
    color: var(--ib-accent);
    margin-top: 1px;
    /* Slight visual lift — the refresh icon sits a touch high otherwise. */
    line-height: 0;
}
.inspira-reschedule-banner-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    line-height: 1.45;
}
.inspira-reschedule-banner-body strong {
    font-family: var(--ib-serif);
    font-size: 16px;
    font-weight: 600;
    color: var(--ib-ink);
}
.inspira-reschedule-banner-body span {
    font-size: 13.5px;
    color: var(--ib-muted);
}
.inspira-reschedule-banner-body span strong {
    /* Inner strong (service name + original time) — slightly heavier
       than the body copy but doesn't try to compete with the title. */
    font-family: inherit;
    font-size: inherit;
    color: var(--ib-ink);
    font-weight: 600;
}

/* Readonly inputs in reschedule mode — visually muted so customers
   understand they can't change their name/email/phone here. Subtle
   background tint + cursor-not-allowed makes the lock obvious without
   feeling broken. */
.inspira-flow.is-reschedule-mode input[readonly] {
    background: var(--ib-paper);
    color: var(--ib-muted);
    cursor: not-allowed;
}
.inspira-flow.is-reschedule-mode input[readonly]:focus {
    outline: none;
    box-shadow: none;
    border-color: var(--ib-rule);
}

/* ─── v2.7.18 — Visitor "Price on request" pill ──────────────────────
   Solid, consistent design — same look everywhere, regardless of
   theme, viewport, or OS color scheme. Background #d1a177 (bridal
   warm tan), white text, white icon, rounded pill, no borders.
   The text span has no font-family override so it inherits whatever
   typography the theme applies to .price. */
.inspira-price-hidden {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 18px;
    background: #d1a177;
    color: #fff;
    border-radius: 20px;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0.015em;
    opacity: 1;
    vertical-align: middle;
    text-decoration: none;
    text-transform: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.inspira-price-hidden:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
}
.inspira-price-hidden-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
    /* Optical alignment — message bubble icon sits a hair high. */
    margin-bottom: 1px;
}
.inspira-price-hidden-text {
    /* No styling — inherits from theme's .price typography. */
}

/* ─── v2.7.16 — Inline admin badge (shown next to real price for managers) ─
   Tiny pill rendered next to a real price when an admin is looking at a
   product whose price is HIDDEN for regular visitors. Lets shop managers
   scan a shop page and instantly see which products have private prices.
   Native title attribute carries a tooltip explaining the reveal rules. */
.inspira-price-admin-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    padding: 2px 8px;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #B8730E;
    background: #FFF1D6;
    border: 1px solid #F0D4A0;
    border-radius: 999px;
    vertical-align: middle;
    cursor: help;
    /* Don't inherit theme's price font weight/size — stay tight + neutral. */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.inspira-price-admin-badge svg {
    flex-shrink: 0;
    /* Lock icon is dense — bump up half a pixel optically. */
    margin-bottom: 1px;
}
.inspira-price-admin-badge-text {
    /* Mobile + cramped layouts (shop loops with 4 cols): hide the text,
       leave just the lock icon. The tooltip still explains on hover. */
}
@media (max-width: 768px) {
    .inspira-price-admin-badge-text { display: none; }
    .inspira-price-admin-badge { padding: 3px 6px; }
}

/* ─── v2.7.16 — Floating admin pricewatch banner ──────────────────────
   Bottom-right informational banner that appears for shop managers on
   WooCommerce frontend pages whenever the price-hide feature is on.
   Tells them what visitors are seeing + provides a quick settings link.
   Dismissible per browser session. */
.inspira-pricewatch-banner {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    max-width: 380px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 14px 14px 16px;
    background: #FAF7F2;
    border: 1px solid #E5E0D6;
    border-left: 3px solid var(--ib-accent);
    border-radius: 8px;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.10), 0 2px 6px rgba(0, 0, 0, 0.04);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--ib-ink);
    /* Slide in from below — JS adds .is-visible after a small delay. */
    transform: translateY(20px);
    opacity: 0;
    transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.24s ease;
}
.inspira-pricewatch-banner.is-visible {
    transform: translateY(0);
    opacity: 1;
}
.inspira-pricewatch-banner-icon {
    flex-shrink: 0;
    color: var(--ib-accent);
    margin-top: 1px;
    line-height: 0;
}
.inspira-pricewatch-banner-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    line-height: 1.45;
    min-width: 0;
}
.inspira-pricewatch-banner-body strong {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ib-ink);
}
.inspira-pricewatch-banner-body span {
    font-size: 12.5px;
    color: #6B6862;
}
.inspira-pricewatch-banner-link {
    flex-shrink: 0;
    align-self: center;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ib-accent);
    text-decoration: none;
    border: 1px solid var(--ib-accent);
    border-radius: 6px;
    transition: background 0.12s, color 0.12s;
    white-space: nowrap;
}
.inspira-pricewatch-banner-link:hover {
    background: var(--ib-accent);
    color: #FFFFFF;
}
.inspira-pricewatch-banner-close {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #6B6862;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s, color 0.12s;
}
.inspira-pricewatch-banner-close:hover {
    background: rgba(0, 0, 0, 0.06);
    color: var(--ib-ink);
}
@media (max-width: 640px) {
    .inspira-pricewatch-banner {
        left: 12px;
        right: 12px;
        bottom: 12px;
        max-width: none;
    }
    .inspira-pricewatch-banner-link {
        /* On mobile the link wraps under the text rather than competing
           horizontally for cramped space. */
        align-self: flex-start;
    }
}

/* v2.7.127 — Custom month picker popover. Replaces native <input
 * type="month"> with a brand-styled popover: prev/next year header
 * + 3x4 month grid. Click year text → year-grid mode (12-year block).
 * Bounded by minDate/maxDate via the disabled attribute on out-of-
 * range buttons. */

/* The trigger button — pinned month-year label with chevron. Now a
 * real button (was a span) so keyboard focus + aria-expanded work. */
.inspira-vc-label-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: transparent;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    font: inherit;
    color: inherit;
    transition: background-color .12s;
}
.inspira-vc-label-wrap:hover {
    background: #F4F0E8;
}
.inspira-vc-label-wrap[aria-expanded="true"] {
    background: #EBE3D2;
}
.inspira-vc-label-caret {
    color: #6B6862;
    opacity: .6;
    transition: opacity .12s, transform .12s;
}
.inspira-vc-label-wrap:hover .inspira-vc-label-caret,
.inspira-vc-label-wrap[aria-expanded="true"] .inspira-vc-label-caret {
    opacity: 1;
}
.inspira-vc-label-wrap[aria-expanded="true"] .inspira-vc-label-caret {
    transform: rotate(180deg);
}

/* The popover itself — absolutely positioned below the header,
 * anchored to the visual-cal element so it follows scroll naturally. */
.inspira-vc-monthpicker {
    position: absolute;
    top: 48px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    background: #FFF;
    border: 1px solid #E5DDC8;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(28, 26, 22, 0.12);
    padding: 12px;
    width: 280px;
    animation: inspira-mp-in 0.12s ease-out;
}
@keyframes inspira-mp-in {
    from { opacity: 0; transform: translateX(-50%) translateY(-4px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Popover header — year prev/next + clickable year text */
.inspira-vc-mp-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}
.inspira-vc-mp-yearnav {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px;
    background: transparent;
    border: 0; border-radius: 4px;
    color: #2A2823;
    cursor: pointer;
    font-size: 14px; font-weight: 600;
    transition: background-color .12s;
}
.inspira-vc-mp-yearnav:hover:not([disabled]) {
    background: #F4F0E8;
}
.inspira-vc-mp-yearnav[disabled],
.inspira-vc-mp-yearnav.is-disabled {
    opacity: .25;
    cursor: not-allowed;
}
.inspira-vc-mp-yearnav.is-disabled:hover {
    background: transparent;
}
.inspira-vc-mp-yeartext {
    flex: 1;
    background: transparent;
    border: 0; border-radius: 4px;
    padding: 6px 12px;
    font-size: 14px; font-weight: 600;
    color: #2A2823;
    cursor: pointer;
    transition: background-color .12s;
}
.inspira-vc-mp-yeartext:hover {
    background: #F4F0E8;
}

/* 3x4 grid of months (or 4x3 grid of years in year-mode) */
.inspira-vc-mp-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
}
.inspira-vc-mp-month {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 10px 8px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    color: #2A2823;
    cursor: pointer;
    font-size: 13px; font-weight: 500;
    transition: background-color .12s, border-color .12s, color .12s;
}
.inspira-vc-mp-month:hover:not([disabled]) {
    background: #F4F0E8;
}
.inspira-vc-mp-month[disabled] {
    opacity: .25;
    cursor: not-allowed;
}
.inspira-vc-mp-month.is-current {
    background: #C8472B;
    color: #FFF;
    border-color: #C8472B;
    font-weight: 600;
}
.inspira-vc-mp-month.is-current:hover:not([disabled]) {
    background: #B0301F;
    border-color: #B0301F;
}

/* Position context — visual-cal needs to be relative for the popover
 * absolute positioning to anchor to it. */
.inspira-visual-cal {
    position: relative;
}

/* v2.7.128 — Year text in the picker month-mode now shows a small
 * caret to signal it's interactive (opens year-grid mode). */
.inspira-vc-mp-yeartext {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.inspira-vc-mp-yeartext-caret {
    color: #6B6862;
    opacity: .55;
}
.inspira-vc-mp-yeartext:hover .inspira-vc-mp-yeartext-caret {
    opacity: 1;
}

/* v2.7.128 — Cells that can't fit any slot for the currently-selected
 * service. The day is visible (with the "0" badge so customer sees
 * the reason it's not pickable) but the cell itself is muted +
 * non-interactive. Differs from .is-closed (which uses brand red);
 * .is-zero-slot is a softer grey so customer sees "this day exists
 * but doesn't have room for this service" — picking a shorter service
 * may re-enable it. */
.inspira-vc-cell.is-zero-slot {
    color: #B0ACA1;
    cursor: not-allowed;
    background: transparent;
}
.inspira-vc-cell.is-zero-slot .inspira-vc-num {
    opacity: .5;
}
.inspira-vc-cell.is-zero-slot:hover {
    background: transparent;
}

/* v2.7.130 — defensive: any nested SVG inside a clickable picker
 * element gets pointer-events: none so click target always resolves
 * to the parent button cleanly. Prevents subtle SVG-in-button click
 * swallow edge cases on some browsers. */
.inspira-vc-mp-yearnav svg,
.inspira-vc-mp-yeartext svg,
.inspira-vc-mp-month svg {
    pointer-events: none;
}