/* 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;
    /* Derived accent states — computed from --ib-accent so admin
       can change ONE color and all state variants follow.
       color-mix() supported in Chrome 111+ / Firefox 113+ / Safari 16.2+
       (May 2023 baseline). In older browsers, these declarations are
       invalid and callers fall back to the second arg of var().
       - accent-hover: 15% darker (mix with black)
       - accent-soft:  low-opacity accent tint for soft backgrounds
       - accent-focus: mid-opacity accent for focus rings + selections */
    --ib-accent-hover: color-mix(in srgb, var(--ib-accent) 85%, black);
    --ib-accent-soft:  color-mix(in srgb, var(--ib-accent) 12%, transparent);
    --ib-accent-focus: color-mix(in srgb, var(--ib-accent) 40%, transparent);
    /* Dark surface color used for button/panel backgrounds. Separate
       from --ib-ink (which is text color) so admin can change text
       color without breaking button visibility. Defaults to the same
       near-black --ib-ink used to default to. */
    --ib-surface-strong: #14130F;
}
.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-surface-strong, var(--ib-ink)); color: var(--ib-ink); border-color: var(--ib-surface-strong, 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-surface-strong, var(--ib-ink)); color: var(--ib-ink); border-color: var(--ib-surface-strong, 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-surface-strong, var(--ib-ink)); color: var(--ib-button-text, #FAF7F2);
    border: 1px solid var(--ib-surface-strong, 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-surface-strong-hover, var(--ib-accent)); border-color: var(--ib-surface-strong-hover, var(--ib-accent));
    color: var(--ib-button-text-hover, #fff);
    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-surface-strong, var(--ib-ink)); color: var(--ib-button-text, #FAF7F2);
    border: 1px solid var(--ib-surface-strong, 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-surface-strong-hover, var(--ib-accent));
    border-color: var(--ib-surface-strong-hover, var(--ib-accent));
    transform: translateY(-1px);
    color: var(--ib-button-text-hover, #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-surface-strong-hover, var(--ib-accent-hover, var(--ib-ink))); color: var(--ib-button-text-hover, #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: var(--ib-accent-soft, #FBE9E1); border-color: var(--ib-accent); color: var(--ib-ink);
}
.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: color-mix(in srgb, var(--ib-accent) 25%, transparent); }
.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: var(--ib-ink);
    border-color: var(--ib-accent);
    box-shadow: 0 2px 6px color-mix(in srgb, var(--ib-accent) 30%, transparent);
}
.inspira-vc-cell.is-selected:hover { background: var(--ib-accent-hover, #B0301F); color: var(--ib-ink); }

/* ════════════════════════════════════════════════════════════
   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: var(--ib-accent-soft, #FBE9E1);
    color: var(--ib-ink);
}
.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 color-mix(in srgb, var(--ib-accent) 18%, transparent);
}
.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 color-mix(in srgb, var(--ib-accent) 8%, transparent);
}
.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-loop-btn {
    display: inline-block;
    padding: 10px 18px !important;
    background: var(--ib-accent, var(--ib-accent)) !important;
    color: var(--ib-button-text, #FFFFFF) !important;
    border-radius: 999px !important;
    font-weight: 500;
    text-decoration: none;
}
.inspira-wc-loop-btn:hover {
    background: var(--ib-surface-strong-hover, var(--ib-accent-hover, var(--ib-ink))) !important;
    color: var(--ib-button-text-hover, #FFFFFF) !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-surface-strong-hover, var(--ib-accent-hover, var(--ib-ink))); color: var(--ib-button-text-hover, #FFFFFF); }
.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-surface-strong-hover, var(--ib-accent-hover, var(--ib-ink))); color: var(--ib-button-text-hover, #FFFFFF); }

/* 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-surface-strong, 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,
            color-mix(in srgb, var(--ib-accent) 6%, transparent) 8px,
            color-mix(in srgb, var(--ib-accent) 6%, transparent) 16px
        ),
        #FDF5F2;
    border: 1px solid color-mix(in srgb, var(--ib-accent) 25%, transparent);
    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 color-mix(in srgb, var(--ib-accent) 8%, transparent);
}
.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, color-mix(in srgb, var(--ib-accent) 8%, transparent), color-mix(in srgb, var(--ib-accent) 16%, transparent));
    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: 7px;
    font-size: 13px;
    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;
    width: 100%;
    text-align: center;
    justify-content: center;
}
.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 #C8472B;
    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: #14130F;
    /* 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: #C8472B;
    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: #14130F;
}
.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: #C8472B;
    text-decoration: none;
    border: 1px solid #C8472B;
    border-radius: 6px;
    transition: background 0.12s, color 0.12s;
    white-space: nowrap;
}
.inspira-pricewatch-banner-link:hover {
    background: #C8472B;
    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: #14130F;
}
@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: var(--ib-accent, #C8472B);
    color: #FFF;
    border-color: var(--ib-accent, #C8472B);
    font-weight: 600;
}
.inspira-vc-mp-month.is-current:hover:not([disabled]) {
    background: var(--ib-accent-hover, #B0301F);
    border-color: var(--ib-accent-hover, #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;
}

/* ============================================================
   v2.7.150 — Booking form section headers
   ------------------------------------------------------------
   Two visual groupings inside the details step: "Your details"
   (identity fields) and "About your booking" (notes, referral,
   custom fields). Same fields, same scroll length, but the form
   reads as two short lists instead of one long one. No collapse
   logic — just visual grouping. Purely CSS-driven.
   ============================================================ */

.inspira-form-section {
    margin: 0;
}
.inspira-form-section + .inspira-form-section {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.inspira-form-section-title {
    margin: 0 0 14px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.62;
    line-height: 1.2;
}