/* ============================================================
   Booking System - Frontend Styles
   Weekly Calendar Layout with Morning / Afternoon blocks
   ============================================================ */

.bs-booking-wrap {
    /* Colour tokens. Every reference elsewhere in this file uses
       var(--bs-*, fallback) so a single accent colour entered in Settings
       (Appearance & Form Text) is pushed as an override block on this same
       selector and cascades down to every button, focus ring, calendar day,
       slot and the rental grid. The values below are the plugin's built-in
       palette and simply document the defaults. */
    --bs-accent: #0073aa;        /* primary buttons, links, selected states   */
    --bs-accent-dark: #005a87;   /* hover / pressed on primary actions        */
    --bs-range: #1565c0;         /* rental check-in / check-out / grid select */
    --bs-range-soft: #e3f2fd;    /* soft highlight behind an in-range span    */
    --bs-range-border: #bbdefb;  /* outline of in-range / available spans     */

    max-width: 900px;
    margin: 30px auto;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 15px rgba(0,0,0,0.08);
    padding: 40px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.bs-booking-title {
    font-size: 28px;
    margin: 0 0 30px 0;
    color: #333;
    text-align: center;
}

/* ============================================================
   STEPS PROGRESS
   ============================================================ */
.bs-steps {
    display: flex;
    justify-content: space-between;
    margin-bottom: 35px;
    position: relative;
}

.bs-steps::before {
    content: '';
    position: absolute;
    top: 15px;
    left: 8%;
    right: 8%;
    height: 2px;
    background: #e0e0e0;
    z-index: 0;
}

.bs-step {
    position: relative;
    z-index: 1;
    background: #fff;
    padding: 0 10px;
    font-size: 13px;
    font-weight: 500;
    color: #999;
    text-align: center;
    cursor: default;
}

.bs-step::before {
    content: '';
    display: block;
    width: 30px;
    height: 30px;
    background: #e0e0e0;
    border-radius: 50%;
    margin: 0 auto 8px;
    transition: background 0.3s;
}

.bs-step.bs-step-active {
    color: var(--bs-accent, #0073aa);
    font-weight: 600;
}

.bs-step.bs-step-active::before {
    background: var(--bs-accent, #0073aa);
}

/* Step Content */
.bs-step-content {
    display: none;
}

.bs-step-content.bs-step-visible {
    display: block;
}

.bs-step-content h3 {
    font-size: 22px;
    margin: 0 0 20px;
    color: #333;
}

/* ============================================================
   SERVICES GRID
   ============================================================ */
.bs-services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 15px;
    margin-bottom: 25px;
}

.bs-service-card {
    background: #f9f9f9;
    border: 2px solid #eee;
    border-radius: 6px;
    padding: 18px;
    cursor: pointer;
}

.bs-service-card.bs-service-selected {
    border-color: var(--bs-accent, #0073aa);
    background: #f0f8ff;
    box-shadow: 0 2px 8px rgba(0,115,170,0.2);
}

.bs-service-card.bs-service-in-cart {
    border-color: #4caf50;
    background: #f1f8e9;
    cursor: default;
    opacity: 0.85;
}

.bs-service-card.bs-service-in-cart .bs-btn-add {
    background: #4caf50;
    color: #fff;
    cursor: default;
}

.bs-service-card .bs-btn-add {
    display: block;
    width: 100%;
    margin-top: 12px;
    cursor: pointer;
    transition: background 0.2s, filter 0.2s;
}

.bs-service-card .bs-btn-add:disabled {
    background: #4caf50;
    cursor: default;
    opacity: 0.8;
}

.bs-service-name {
    margin: 0 0 6px;
    font-size: 16px;
    color: #333;
}

.bs-service-desc {
    font-size: 13px;
    color: #777;
    margin: 5px 0;
    line-height: 1.4;
}

.bs-service-meta {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    font-size: 13px;
    color: #555;
}

.bs-service-duration {
    background: #e8f0fe;
    padding: 3px 8px;
    border-radius: 3px;
    color: var(--bs-accent, #0073aa);
}

.bs-service-price {
    font-weight: 600;
    color: #2e7d32;
}

/* ============================================================
   CHECKOUT PAGE  ([booking_system] shortcode)
   Pure checkout — no services grid, just selection + calendar + details
   ============================================================ */
.bs-booking-checkout {
    /* Single column, sections stacked */
}

.bs-checkout-section {
    margin-bottom: 30px;
    padding-top: 24px;
    border-top: 2px solid #e8e8e8;
}

.bs-checkout-section:first-child {
    padding-top: 0;
    border-top: none;
}

.bs-checkout-section h3 {
    font-size: 18px;
    margin: 0 0 12px;
    color: #333;
}

.bs-checkout-submit {
    width: 100%;
    padding: 14px 0;
    font-size: 16px;
    margin-top: 10px;
}

/* Checkout success */
.bs-checkout-success {
    text-align: center;
    padding: 50px 20px;
}

.bs-checkout-success .bs-success-icon {
    font-size: 60px;
    color: #4caf50;
    width: 100px;
    height: 100px;
    line-height: 100px;
    border-radius: 50%;
    background: #e8f5e9;
    margin: 0 auto 20px;
}

.bs-checkout-success .bs-success-message {
    font-size: 16px;
    color: #555;
    line-height: 1.6;
}

/* Cart */
.bs-cart {
    background: #fafafa;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    padding: 16px;
    min-height: 120px;
}

.bs-cart-empty {
    text-align: center;
    color: #999;
    padding: 20px 10px;
}

.bs-cart-empty p {
    margin: 5px 0;
    font-size: 14px;
}

.bs-cart-hint {
    font-size: 12px !important;
    color: #bbb !important;
}

.bs-cart-items {
    margin-bottom: 12px;
}

.bs-cart-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 8px;
    border-bottom: 1px solid #eee;
    font-size: 13px;
}

.bs-cart-item:last-child {
    border-bottom: none;
}

.bs-cart-item-name {
    flex: 1;
    font-weight: 600;
    color: #333;
}

.bs-cart-item-variation {
    color: #777;
    font-weight: 500;
    font-size: 12px;
}

.bs-cart-item-duration {
    color: var(--bs-accent, #0073aa);
    font-size: 12px;
    white-space: nowrap;
}

.bs-cart-item-price {
    font-weight: 600;
    color: #2e7d32;
    font-size: 13px;
    white-space: nowrap;
    min-width: 50px;
    text-align: right;
}

.bs-cart-remove {
    background: none;
    border: none;
    color: #d32f2f;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    padding: 0 2px;
    line-height: 1;
    transition: color 0.15s;
}

.bs-cart-remove:hover {
    color: #b71c1c;
}

.bs-cart-totals {
    border-top: 2px solid #e0e0e0;
    padding-top: 12px;
    margin-top: 4px;
}

.bs-cart-totals p {
    margin: 4px 0;
    font-size: 14px;
    color: #333;
}

/* Refundable deposit, shown on its own line beneath the hire subtotal. */
.bs-cart-total-deposit {
    color: #666;
}

/* Combined hire + deposit total shown as "What to pay today". */
.bs-cart-grand-total {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed #e0e0e0;
    font-size: 16px;
}

.bs-cart-grand-total strong,
.bs-cart-grand-total span {
    font-weight: 700;
}

/* Step 2: Cart Summary */
.bs-cart-summary {
    background: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 15px 20px;
    margin-bottom: 20px;
}

.bs-cart-summary p {
    margin: 4px 0;
    font-size: 14px;
}

/* Step 3: Summary Services Table */
.bs-summary-services-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 12px;
    font-size: 14px;
}

.bs-summary-services-table th {
    text-align: left;
    padding: 8px 10px;
    border-bottom: 2px solid #cce5ff;
    color: var(--bs-accent, #0073aa);
    font-weight: 600;
}

.bs-summary-services-table td {
    padding: 8px 10px;
    border-bottom: 1px solid #eee;
}

.bs-summary-services-table th:last-child,
.bs-summary-services-table td:last-child {
    text-align: right;
}

/* Responsive — Step 1 single-column already suits mobile */

/* ============================================================
   WEEKLY CALENDAR NAVIGATION
   ============================================================ */
.bs-week-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 10px 20px;
    margin-bottom: 20px;
}

.bs-week-prev,
.bs-week-next {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 6px 16px;
    font-size: 16px;
    cursor: pointer;
    color: #555;
    transition: all 0.2s;
}

.bs-week-prev:hover,
.bs-week-next:hover {
    background: var(--bs-accent, #0073aa);
    color: #fff;
    border-color: var(--bs-accent, #0073aa);
}

.bs-week-label {
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

/* ============================================================
   7-DAY CALENDAR GRID
   ============================================================ */
.bs-week-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    margin-bottom: 25px;
}

/* Wrapper inside the grid needs to inherit the 7-column layout */
.bs-week-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    grid-column: 1 / -1;
}

.bs-no-days {
    grid-column: 1 / -1;
    margin: 0;
    padding: 20px;
    text-align: center;
    color: #888;
    background: #fafafa;
    border-radius: 8px;
}

.bs-week-day {
    border: 2px solid #e8e8e8;
    border-radius: 8px;
    padding: 12px 6px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    background: #fafafa;
}

.bs-week-day:hover {
    border-color: var(--bs-accent, #0073aa);
    background: #f0f8ff;
}

.bs-week-day.bs-day-selected {
    border-color: var(--bs-accent, #0073aa);
    background: var(--bs-range-soft, #e3f2fd);
    box-shadow: 0 0 0 1px var(--bs-accent, #0073aa);
}

.bs-week-day.bs-day-past {
    opacity: 0.4;
    cursor: not-allowed;
    background: #f5f5f5;
}

.bs-week-day.bs-day-today {
    border-color: #ff9800;
}

.bs-week-day.bs-day-today.bs-day-selected {
    border-color: var(--bs-accent, #0073aa);
    border-width: 2px;
}

.bs-week-day-name {
    font-size: 12px;
    font-weight: 600;
    color: #777;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.bs-week-day.bs-day-selected .bs-week-day-name {
    color: var(--bs-accent, #0073aa);
}

.bs-week-day-number {
    font-size: 24px;
    font-weight: 700;
    color: #333;
    line-height: 1.2;
}

.bs-week-day.bs-day-selected .bs-week-day-number {
    color: var(--bs-accent, #0073aa);
}

.bs-week-day-month {
    font-size: 11px;
    color: #999;
    margin-top: 2px;
}

/* ============================================================
   TIME SLOTS - Morning & Afternoon sections
   ============================================================ */
.bs-slots-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 30px;
    color: #777;
    font-size: 14px;
}

.bs-slots-section {
    margin-bottom: 20px;
}

.bs-slots-section-title {
    font-size: 16px;
    font-weight: 600;
    color: #555;
    margin: 0 0 10px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid #f0f0f0;
}

.bs-slots-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 8px;
}

.bs-slot {
    background: #fff;
    border: 2px solid #ddd;
    border-radius: 6px;
    padding: 10px 8px;
    text-align: center;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: #444;
    transition: all 0.2s;
}

.bs-slot:hover {
    border-color: var(--bs-accent, #0073aa);
    background: #f0f8ff;
    color: var(--bs-accent, #0073aa);
}

.bs-slot.bs-slot-selected {
    background: var(--bs-accent, #0073aa);
    color: #fff;
    border-color: var(--bs-accent, #0073aa);
}

.bs-loading-msg {
    color: #999;
    font-style: italic;
}

.bs-empty-message {
    color: #999;
    text-align: center;
    padding: 40px;
}

.bs-no-slots {
    color: #e65100;
    font-style: italic;
    padding: 15px 0;
    text-align: center;
}

/* ============================================================
   BOOKING SUMMARY
   ============================================================ */
.bs-booking-summary {
    background: #f0f8ff;
    border: 1px solid #cce5ff;
    border-radius: 6px;
    padding: 20px;
    margin-bottom: 25px;
}

.bs-booking-summary h4 {
    margin: 0 0 12px;
    color: var(--bs-accent, #0073aa);
    font-size: 16px;
}

.bs-summary-details p {
    margin: 5px 0;
    font-size: 14px;
}

.bs-summary-details strong {
    min-width: 80px;
    display: inline-block;
}

/* ============================================================
   CLIENT FIELDS
   ============================================================ */
.bs-client-fields {
    margin-bottom: 20px;
}

.bs-field {
    margin-bottom: 18px;
}

.bs-field label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
    color: #444;
    font-size: 14px;
}

.bs-required {
    color: #d32f2f;
}

/* Small helper text under a field (e.g. phone/ID hint, file types) */
.bs-field-desc {
    font-size: 12px;
    color: #999;
    margin: 4px 0 0;
    line-height: 1.5;
}

.bs-field input[type="text"],
.bs-field input[type="email"],
.bs-field input[type="tel"],
.bs-field input[type="date"],
.bs-field input[type="time"],
.bs-field input[type="number"],
.bs-field select,
.bs-field textarea {
    width: 100%;
    padding: 12px 14px;
    border: 2px solid #ddd;
    border-radius: 6px;
    font-size: 15px;
    transition: border-color 0.2s;
    box-sizing: border-box;
    background-color: #fff;
    color: #333;
}

.bs-field input:focus,
.bs-field select:focus,
.bs-field textarea:focus {
    border-color: var(--bs-accent, #0073aa);
    outline: none;
}

.bs-field textarea {
    resize: vertical;
    min-height: 80px;
}

/* Admin-designed multi-column forms (Booking Forms) */
.bs-custom-fields-grid {
    display: grid;
    align-items: start;
    gap: 20px 24px;
    margin-bottom: 20px;
}

.bs-custom-fields-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.bs-custom-fields-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bs-custom-fields-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bs-custom-fields-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.bs-custom-fields-grid .bs-field {
    margin-bottom: 0;
    min-width: 0;
}

@media (max-width: 720px) {
    .bs-custom-fields-cols-2,
    .bs-custom-fields-cols-3,
    .bs-custom-fields-cols-4 {
        grid-template-columns: minmax(0, 1fr);
    }
    /* Drop inline grid placement so fields stack in one column on small screens */
    .bs-custom-fields-grid > .bs-field {
        grid-row: auto !important;
        grid-column: auto !important;
    }
}

/* Admin-defined custom fields: grouped checkbox / radio choices */
.bs-custom-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 2px;
}

.bs-field .bs-custom-choice {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 0;
    padding: 8px 14px;
    border: 2px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    color: #444;
    cursor: pointer;
    background: #fff;
    transition: border-color 0.2s, background 0.2s;
}

.bs-field .bs-custom-choice:hover {
    border-color: var(--bs-accent, #0073aa);
}

.bs-field .bs-custom-choice input {
    margin: 0;
    accent-color: var(--bs-accent, #0073aa);
    cursor: pointer;
}

/* File-upload custom fields — styled to match the other inputs
   (same border/radius/background), with the native picker button
   restyled as the theme accent so the field doesn't look default. */
.bs-field .bs-custom-file-input {
    width: 100%;
    padding: 6px 8px;
    border: 2px solid #ddd;
    border-radius: 6px;
    background: #fff;
    color: #333;
    font-size: 14px;
    box-sizing: border-box;
    cursor: pointer;
    transition: border-color 0.2s;
}
.bs-field .bs-custom-file-input:hover {
    border-color: var(--bs-accent, #0073aa);
}
.bs-field .bs-custom-file-input::file-selector-button {
    margin-right: 10px;
    padding: 8px 16px;
    border: 0;
    border-radius: 4px;
    background: var(--bs-accent, #0073aa);
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.2s;
}
.bs-field .bs-custom-file-input::file-selector-button:hover {
    background: #006291;
}

.bs-custom-file-name {
    display: none;
    margin-top: 6px;
    padding: 6px 10px;
    border: 1px solid #c8e6c9;
    border-radius: 5px;
    background: #f1f8e9;
    color: #2e7d32;
    font-size: 13px;
    font-weight: 500;
    word-break: break-all;
}

/* Tall (multi-row) custom fields — a field whose designer Height is 2+ rows.
   The wrapper becomes a flex column that stretches across the rows it spans
   so a textarea fills the taller area instead of staying three lines high. */
.bs-custom-fields-grid .bs-field.bs-field-tall {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    align-items: stretch;
}
.bs-custom-fields-grid .bs-field.bs-field-tall > label {
    flex: 0 0 auto;
}
.bs-custom-fields-grid .bs-field.bs-field-tall textarea {
    flex: 1 1 0%;
    width: 100%;
    min-height: 60px;
    resize: vertical;
    box-sizing: border-box;
}
.bs-custom-fields-grid .bs-field.bs-field-tall input[type="text"],
.bs-custom-fields-grid .bs-field.bs-field-tall input[type="tel"],
.bs-custom-fields-grid .bs-field.bs-field-tall input[type="email"],
.bs-custom-fields-grid .bs-field.bs-field-tall input[type="number"],
.bs-custom-fields-grid .bs-field.bs-field-tall input[type="date"],
.bs-custom-fields-grid .bs-field.bs-field-tall input[type="time"],
.bs-custom-fields-grid .bs-field.bs-field-tall select,
.bs-custom-fields-grid .bs-field.bs-field-tall input[type="file"] {
    width: 100%;
    box-sizing: border-box;
}

/* ID Number Lookup */
.bs-id-lookup-status {
    margin-top: 4px;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 13px;
}

.bs-id-lookup-status.bs-id-found {
    background: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #c8e6c9;
}

.bs-id-lookup-status.bs-id-not-found {
    background: #fff3e0;
    color: #e65100;
    border: 1px solid #ffe0b2;
}

.bs-id-lookup-status.bs-id-loading {
    background: #f3f4f6;
    color: #666;
    border: 1px solid #e5e7eb;
}

/* Success step returning customer badge */
.bs-returning-customer-badge {
    display: inline-block;
    background: #e8f5e9;
    color: #2e7d32;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 4px;
    margin-left: 8px;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.bs-step-nav {
    display: flex;
    gap: 10px;
    margin-top: 25px;
    justify-content: space-between;
}

.bs-btn {
    padding: 12px 28px;
    border: none;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.bs-btn-next,
.bs-btn-submit {
    background: var(--bs-accent, #0073aa);
    color: #fff;
}

.bs-btn-next:hover,
.bs-btn-submit:hover {
    background: var(--bs-accent-dark, #005a87);
}

.bs-btn-prev {
    background: #f0f0f0;
    color: #555;
}

.bs-btn-prev:hover {
    background: #e0e0e0;
}

.bs-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ============================================================
   MESSAGES
   ============================================================ */
.bs-message {
    padding: 12px 18px;
    border-radius: 6px;
    margin-bottom: 15px;
    font-size: 14px;
}

.bs-message.bs-error {
    background: #fdecea;
    border: 1px solid #f5c6cb;
    color: #721c24;
}

.bs-message.bs-success {
    background: #e8f5e9;
    border: 1px solid #c8e6c9;
    color: #2e7d32;
}

/* Success Step */
.bs-step-success {
    text-align: center;
    padding: 50px 20px;
}

.bs-success-icon {
    font-size: 60px;
    color: #4caf50;
    width: 100px;
    height: 100px;
    line-height: 100px;
    border-radius: 50%;
    background: #e8f5e9;
    margin: 0 auto 20px;
}

.bs-success-message {
    font-size: 16px;
    color: #555;
    line-height: 1.6;
}

/* Loading spinner */
.bs-loading {
    text-align: center;
    padding: 30px;
}

.bs-spinner {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 3px solid #e0e0e0;
    border-top-color: var(--bs-accent, #0073aa);
    border-radius: 50%;
    animation: bs-spin 0.6s linear infinite;
}

@keyframes bs-spin {
    to { transform: rotate(360deg); }
}

/* ============================================================
   CANCEL FORM
   ============================================================ */
.bs-cancel-wrap {
    max-width: 500px;
}

.bs-cancel-desc {
    font-size: 15px;
    color: #666;
    margin-bottom: 25px;
}

.bs-btn-cancel {
    background: #d32f2f;
    color: #fff;
    width: 100%;
    margin-top: 10px;
}

.bs-btn-cancel:hover {
    background: #b71c1c;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
    .bs-booking-wrap {
        padding: 20px;
        margin: 15px;
    }

    .bs-services-grid {
        grid-template-columns: 1fr;
    }

    .bs-week-grid {
        gap: 4px;
    }

    .bs-week-day {
        padding: 8px 4px;
    }

    .bs-week-day-number {
        font-size: 18px;
    }

    .bs-week-day-name {
        font-size: 10px;
    }

    .bs-slots-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    }

    .bs-steps {
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    .bs-week-grid {
        grid-template-columns: repeat(7, 1fr);
        gap: 3px;
    }

    .bs-week-day {
        padding: 6px 2px;
    }

    .bs-week-day-number {
        font-size: 14px;
    }

    .bs-week-day-name {
        font-size: 8px;
    }

    .bs-week-day-month {
        display: none;
    }
}

/* ============================================================
   SERVICES LISTING PAGE  (shortcode: [booking_services])
   ============================================================ */
.bs-services-page-title {
    font-size: 32px;
    text-align: center;
    margin: 0 0 10px;
    color: #333;
}

.bs-services-page-desc {
    text-align: center;
    color: #666;
    font-size: 16px;
    margin-bottom: 35px;
    line-height: 1.6;
}

/* Category groups — titled sections within a services listing. */
.bs-category-heading {
    margin: 32px 0 14px;
}
.bs-category-heading:first-of-type {
    margin-top: 0;
}
.bs-category-title {
    margin: 0 0 4px;
    font-size: 24px;
    line-height: 1.3;
    color: #333;
}
.bs-category-desc {
    margin: 0 0 12px;
    color: #666;
    font-size: 14px;
    line-height: 1.6;
}
/* Spacing between category sections when titles are hidden. */
.bs-services-page-wrap.bs-has-categories .bs-services-page-grid + .bs-services-page-grid,
.bs-services-page-wrap.bs-has-categories .bs-services-page-list + .bs-services-page-list,
.bs-services-page-wrap.bs-has-categories .bs-category-heading + .bs-services-page-grid,
.bs-services-page-wrap.bs-has-categories .bs-category-heading + .bs-services-page-list {
    margin-top: 0;
}
.bs-services-page-wrap.bs-has-categories .bs-services-page-grid + .bs-services-page-grid,
.bs-services-page-wrap.bs-has-categories .bs-services-page-list + .bs-services-page-list {
    margin-top: 32px;
}

.bs-services-page-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
}

.bs-service-page-card {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.bs-service-page-card-body {
    padding: 24px 22px 16px;
    flex: 1;
}

.bs-service-page-name {
    font-size: 20px;
    margin: 0 0 10px;
    color: #222;
    line-height: 1.3;
}

.bs-service-page-excerpt {
    font-size: 14px;
    color: #777;
    line-height: 1.5;
    margin: 0 0 16px;
}

.bs-service-page-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
}

/* Info row that sits directly below the title (duration + stock),
   with the excerpt underneath it. */
.bs-services-page-wrap .bs-meta-top {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 16px;
    margin: 0 0 12px;
}

.bs-service-page-duration {
    color: var(--bs-accent, #0073aa);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.bs-service-page-duration svg {
    flex-shrink: 0;
    opacity: 0.7;
}

.bs-service-page-price {
    font-weight: 700;
    font-size: 18px;
    color: #2e7d32;
}

.bs-service-page-price.bs-price-free {
    color: #999;
    font-weight: 500;
    font-size: 14px;
}

/* Catalog display mode: variation options + prices listed on the card
   (e.g. "30 min - R230", "45 min - R300"). */
.bs-service-variation-list {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bs-service-variation-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-size: 14px;
    line-height: 1.4;
    padding: 3px 0;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.08);
}

.bs-service-variation-item:last-child {
    border-bottom: 0;
}

.bs-service-variation-label {
    color: #555;
}

.bs-service-variation-price {
    font-weight: 700;
    color: #2e7d32;
    white-space: nowrap;
}

.bs-service-variation-price.bs-price-free {
    color: #999;
    font-weight: 500;
}

.bs-service-variation-price.bs-variation-price-tbc {
    color: #999;
    font-weight: 500;
    font-style: italic;
}

.bs-service-page-card-footer {
    padding: 0 22px 22px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.bs-service-page-card-footer .bs-btn-add {
    flex: 1;
}

/* Card quantity selector — sits next to Add to Cart button */
.bs-card-qty {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.bs-card-qty .bs-qty-down,
.bs-card-qty .bs-qty-up {
    width: 28px;
    height: 28px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #f5f5f5;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    transition: background 0.15s;
}

.bs-card-qty .bs-qty-down:hover,
.bs-card-qty .bs-qty-up:hover {
    background: #e0e0e0;
    border-color: #999;
}

.bs-card-qty .bs-qty-down:active,
.bs-card-qty .bs-qty-up:active {
    background: #d0d0d0;
}

.bs-card-qty .bs-qty-input {
    width: 36px;
    height: 28px;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    padding: 0;
    background: #fff;
}

.bs-btn-book-now {
    display: block;
    width: 100%;
    padding: 12px 20px;
    background: var(--bs-accent, #0073aa);
    color: #fff;
    text-align: center;
    text-decoration: none;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 600;
    transition: background 0.2s;
    border: none;
    cursor: pointer;
    box-sizing: border-box;
}

.bs-btn-book-now:hover {
    background: var(--bs-accent-dark, #005a87);
    color: #fff;
}

.bs-services-page-booking-link {
    text-align: center;
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid #eee;
}

.bs-services-page-booking-link p {
    font-size: 15px;
    color: #666;
}

.bs-services-page-booking-link a {
    color: var(--bs-accent, #0073aa);
    font-weight: 600;
    text-decoration: none;
}

.bs-services-page-booking-link a:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .bs-services-page-grid {
        grid-template-columns: 1fr;
    }

    .bs-services-page-title {
        font-size: 26px;
    }
}

/* ============================================================
   SERVICES LISTING — COLUMN OVERRIDES
   ============================================================ */
.bs-services-page-grid.bs-cols-1 { grid-template-columns: 1fr !important; }
.bs-services-page-grid.bs-cols-2 { grid-template-columns: repeat(2, 1fr) !important; }
.bs-services-page-grid.bs-cols-3 { grid-template-columns: repeat(3, 1fr) !important; }
.bs-services-page-grid.bs-cols-4 { grid-template-columns: repeat(4, 1fr) !important; }

/* List (row) layout can also span multiple columns. */
.bs-services-page-list.bs-cols-1 { grid-template-columns: 1fr !important; }
.bs-services-page-list.bs-cols-2,
.bs-services-page-list.bs-cols-3,
.bs-services-page-list.bs-cols-4 {
    display: grid !important;
    gap: 16px;
    align-items: stretch;
}
.bs-services-page-list.bs-cols-2 { grid-template-columns: repeat(2, 1fr) !important; }
.bs-services-page-list.bs-cols-3 { grid-template-columns: repeat(3, 1fr) !important; }
.bs-services-page-list.bs-cols-4 { grid-template-columns: repeat(4, 1fr) !important; }

/* In a multi-column list, stack each row vertically so the tighter columns
   stay readable (title/meta/excerpt on top, actions along the bottom).
   Corner cards are excluded — they keep the two-side row layout so the price
   stays top-right and the button bottom-right. */
.bs-services-page-wrap:not(.bs-layout-corner) .bs-services-page-list.bs-cols-2 .bs-card-row,
.bs-services-page-wrap:not(.bs-layout-corner) .bs-services-page-list.bs-cols-3 .bs-card-row,
.bs-services-page-wrap:not(.bs-layout-corner) .bs-services-page-list.bs-cols-4 .bs-card-row {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 20px 22px;
}

.bs-services-page-list.bs-cols-2 .bs-card-row .bs-list-actions:not(.bs-list-actions-corner),
.bs-services-page-list.bs-cols-3 .bs-card-row .bs-list-actions:not(.bs-list-actions-corner),
.bs-services-page-list.bs-cols-4 .bs-card-row .bs-list-actions:not(.bs-list-actions-corner) {
    justify-content: flex-end;
}

/* Corner layout in a multi-column list: keep the two-side row arrangement
   (main content left, price top-right + button bottom-right on the right).
   The corner column's price/button are positioned by the existing corner
   rules (.bs-layout-corner .bs-list-actions / .bs-list-actions-bottom).
   Just tighten the padding so it fits the narrower columns. */
.bs-services-page-wrap.bs-layout-corner .bs-services-page-list.bs-cols-2 .bs-card-row,
.bs-services-page-wrap.bs-layout-corner .bs-services-page-list.bs-cols-3 .bs-card-row,
.bs-services-page-wrap.bs-layout-corner .bs-services-page-list.bs-cols-4 .bs-card-row {
    padding: 20px 22px;
    gap: 22px;
}

/* ============================================================
   SERVICES LISTING — LIST / ROW LAYOUT
   (button sits on the right)
   ============================================================ */
.bs-services-page-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.bs-services-page-wrap .bs-service-card {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 0;
    cursor: default;
}

.bs-services-page-wrap .bs-service-card.bs-selected {
    border-color: #4caf50;
    background: #fff;
    box-shadow: 0 4px 14px rgba(76,175,80,0.18);
}

.bs-service-card.bs-card-row {
    flex-direction: row;
    align-items: center;
    gap: 26px;
    padding: 24px 28px;
}

.bs-service-card.bs-card-row .bs-list-main {
    flex: 1;
    min-width: 0;
}

.bs-service-card.bs-card-row .bs-list-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
}

.bs-service-card.bs-card-row .bs-list-head .bs-service-page-name {
    margin: 0;
}

.bs-service-card.bs-card-row .bs-list-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 6px;
    font-size: 14px;
}

.bs-service-card.bs-card-row .bs-service-page-excerpt {
    margin: 10px 0 0;
}

.bs-service-card.bs-card-row .bs-list-actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.bs-service-card.bs-card-row .bs-btn-add {
    width: auto;
    min-width: 170px;
    margin: 0;
    text-align: center;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .bs-services-page-grid.bs-cols-2,
    .bs-services-page-grid.bs-cols-3,
    .bs-services-page-grid.bs-cols-4,
    .bs-services-page-list.bs-cols-2,
    .bs-services-page-list.bs-cols-3,
    .bs-services-page-list.bs-cols-4 {
        grid-template-columns: 1fr !important;
    }

    .bs-service-card.bs-card-row {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        padding: 20px;
    }

    .bs-service-card.bs-card-row .bs-list-actions {
        justify-content: flex-end;
    }
}

/* Duration note suffix, e.g. "60 minutes <notepad> P 4–8mth" */
.bs-service-page-duration-note {
    color: #999;
    font-weight: 400;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.bs-service-page-duration-note svg {
    flex-shrink: 0;
    opacity: 0.8;
}

/* "+" glyph at the end of the Add to Booking button (CSS pseudo keeps it
   intact even when JavaScript swaps the button's text via .text()) */
.bs-services-page-wrap .bs-btn-add::after {
    content: ' +';
    font-weight: 600;
    margin-left: 2px;
}

.bs-services-page-wrap .bs-btn-add.bs-added::after {
    content: '';
    margin: 0;
}

/* ============================================================
   STANDALONE ADD BUTTON  ([booking_add_button] / add-button block)
   Reuses the listing's button styling vocabulary (bs-btn-style-*,
   bs-btn-pad-*, bs-has-btn-radius, bs-btn-full) without the card chrome
   and without the trailing "+".
   ============================================================ */
.bs-add-btn-standalone {
    display: inline-block;
}
.bs-add-btn-standalone.bs-btn-full {
    display: block;
    width: 100%;
}
.bs-add-btn-standalone .bs-btn-add {
    margin: 0;
}
.bs-services-page-wrap.bs-add-btn-standalone .bs-btn-add::after {
    content: '';
    margin: 0;
}

/* ============================================================
   SERVICES LISTING — SPA / ELEGANT STYLE
   ============================================================ */
.bs-style-spa .bs-services-page-title {
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: 600;
    letter-spacing: 0.4px;
    color: #33302c;
}

.bs-style-spa .bs-services-page-desc {
    color: #8a8177;
}

.bs-style-spa .bs-category-title {
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: #33302c;
}

.bs-style-spa .bs-category-desc {
    color: #8a8177;
}

.bs-style-spa .bs-service-page-card,
.bs-style-spa .bs-service-card.bs-card-row {
    background: #fff;
    border: 1px solid #f0ece6;
    border-radius: 16px;
    box-shadow: 0 6px 22px rgba(140,120,95,0.08);
}

.bs-style-spa .bs-service-page-name {
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: 600;
    font-size: 22px;
    color: #3b342b;
}

.bs-style-spa .bs-service-page-excerpt {
    color: #8a8177;
    line-height: 1.6;
}

.bs-style-spa .bs-service-page-duration {
    color: #6f675f;
    font-weight: 500;
    letter-spacing: 0.3px;
}

.bs-style-spa .bs-service-page-duration-note {
    color: #b3a793;
}

.bs-style-spa .bs-service-page-price {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 22px;
    font-weight: 600;
    color: #b58c63;
}

.bs-style-spa .bs-service-page-price.bs-price-free {
    color: #b3a793;
    font-size: 14px;
}

/* ============================================================
   SERVICES LISTING — CUSTOMIZATION (font, button style/padding)
   ============================================================ */
/* The listing button intentionally carries NO plugin background/color
   by default (for any card style), so it inherits the site theme's
   default button styling — same as the bare "Add Button" block.
   Customizations below opt in. */

/* Button shapes */
.bs-services-page-wrap.bs-btn-style-pill .bs-btn-add {
    border-radius: 999px;
}

.bs-services-page-wrap.bs-btn-style-square .bs-btn-add {
    border-radius: 0;
}

.bs-services-page-wrap.bs-btn-style-outline .bs-btn-add {
    background: transparent;
    color: var(--bs-accent, #0073aa);
    border: 2px solid var(--bs-accent, #0073aa);
}

/* Custom button radius (px) — overrides the theme default and pill/square shapes */
.bs-services-page-wrap.bs-has-btn-radius .bs-btn-add {
    border-radius: var(--bs-btn-radius);
}

/* Button padding presets */
.bs-services-page-wrap.bs-btn-pad-compact .bs-btn-add {
    padding: 6px 12px;
    font-size: 13px;
}

.bs-services-page-wrap.bs-btn-pad-large .bs-btn-add {
    padding: 14px 30px;
    font-size: 16px;
}

.bs-services-page-wrap.bs-btn-full .bs-btn-add {
    width: 100%;
}

/* Font families */
.bs-font-serif .bs-services-page-title,
.bs-font-serif .bs-category-title,
.bs-font-serif .bs-service-page-name {
    font-family: Georgia, 'Times New Roman', serif;
}

.bs-font-sans .bs-services-page-title,
.bs-font-sans .bs-category-title,
.bs-font-sans .bs-service-page-name,
.bs-font-sans .bs-service-page-excerpt,
.bs-font-sans .bs-service-page-price,
.bs-font-sans .bs-service-page-duration,
.bs-font-sans .bs-service-page-stock,
.bs-font-sans .bs-service-variation-list {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* Custom font picked from the WP Font Library (value is the full CSS stack).
   A price font set via --bs-price-font still wins because its rule appears later. */
.bs-services-page-wrap.bs-has-custom-font .bs-services-page-title,
.bs-services-page-wrap.bs-has-custom-font .bs-category-title,
.bs-services-page-wrap.bs-has-custom-font .bs-service-page-name,
.bs-services-page-wrap.bs-has-custom-font .bs-service-page-excerpt,
.bs-services-page-wrap.bs-has-custom-font .bs-service-page-price,
.bs-services-page-wrap.bs-has-custom-font .bs-service-page-duration,
.bs-services-page-wrap.bs-has-custom-font .bs-service-page-stock,
.bs-services-page-wrap.bs-has-custom-font .bs-service-variation-list {
    font-family: var(--bs-font-family);
}

/* Card text size (only active when a size is chosen) */
.bs-has-body-size .bs-service-page-meta,
.bs-has-body-size .bs-list-meta,
.bs-has-body-size .bs-service-page-price,
.bs-has-body-size .bs-service-page-excerpt,
.bs-has-body-size .bs-service-page-stock,
.bs-has-body-size .bs-service-variation-item {
    font-size: var(--bs-body-size);
}

/* Card corner radius (custom px value via --bs-card-radius) */
.bs-services-page-wrap.bs-has-radius .bs-service-card {
    border-radius: var(--bs-card-radius);
}

/* Card shadow (custom box-shadow via --bs-card-shadow) */
.bs-services-page-wrap.bs-has-shadow .bs-service-card {
    box-shadow: var(--bs-card-shadow);
}

/* Custom button padding (overrides the compact/normal/large presets) */
.bs-services-page-wrap.bs-btn-pad-custom .bs-btn-add {
    padding: var(--bs-btn-pad);
}

/* Outline border mode: drop the accent bar entirely, keep the thin outline */
.bs-services-page-wrap.bs-border-outline .bs-service-card {
    border-top: none;
    border-left: none;
}

/* No border mode: remove the card border entirely (accent bar + outline) */
.bs-services-page-wrap.bs-border-none .bs-service-card {
    border: none !important;
}

/* No background mode: make the card transparent */
.bs-services-page-wrap.bs-bg-none .bs-service-card,
.bs-services-page-wrap.bs-bg-none .bs-service-card.bs-selected {
    background: transparent !important;
    box-shadow: none !important;
}

/* No padding mode: remove the card chrome padding (list rows + grid body/footer) */
.bs-services-page-wrap.bs-pad-none .bs-service-card,
.bs-services-page-wrap.bs-pad-none .bs-service-page-card-body,
.bs-services-page-wrap.bs-pad-none .bs-service-page-card-footer {
    padding: 0 !important;
}

/* Card layout: Corner (price top-right beside the title, duration below,
   excerpt under that, full-width button at the bottom) */
/* The price sits in its own head row, in line with the title. */
.bs-services-page-wrap.bs-layout-corner .bs-service-page-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}
.bs-services-page-wrap.bs-layout-corner .bs-service-page-card-head .bs-service-page-name {
    margin: 0;
}
/* Grid cards: the booking button is full-width (base rule). The corner
   "bottom-right" treatment is only used in the list/row view below. */
/* Corner layout in the list/row view: price top-right, button bottom-right
   (under the price). Title / duration / excerpt stay on the left. */
.bs-services-page-wrap.bs-layout-corner .bs-card-row {
    align-items: stretch;
}
.bs-services-page-wrap.bs-layout-corner .bs-list-actions {
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}
.bs-services-page-wrap.bs-layout-corner .bs-list-actions-bottom {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Card layout: Button under the excerpt */
.bs-services-page-wrap.bs-layout-under .bs-card-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}
.bs-services-page-wrap.bs-layout-under .bs-card-actions .bs-btn-add {
    flex: 1;
}
/* Under layout in the list/row view: the button block sits inside the main
   column, so keep it full width there too. */
.bs-services-page-wrap.bs-layout-under .bs-list-main .bs-card-actions {
    margin-top: 12px;
    margin-bottom: 0;
}

/* Price customization (color, font, size).
   Scoped with :not(.bs-price-free) for color/size so the "Free" label keeps
   its distinct muted look unless the user specifically targets it. Placed
   after the spa/body-size/font rules so a customization always wins. */
.bs-services-page-wrap.bs-has-price-color .bs-service-page-price:not(.bs-price-free),
.bs-services-page-wrap.bs-has-price-color .bs-service-variation-price:not(.bs-price-free):not(.bs-variation-price-tbc) {
    color: var(--bs-price-color);
}
.bs-services-page-wrap.bs-has-price-font .bs-service-page-price,
.bs-services-page-wrap.bs-has-price-font .bs-service-variation-price {
    font-family: var(--bs-price-font);
}
.bs-services-page-wrap.bs-has-price-size .bs-service-page-price:not(.bs-price-free),
.bs-services-page-wrap.bs-has-price-size .bs-service-variation-price:not(.bs-price-free):not(.bs-variation-price-tbc) {
    font-size: var(--bs-price-size);
}

/* ============================================================
   SINGLE SERVICE CARD  (shortcode: [booking_service_card])
   ============================================================ */
.bs-service-card-single {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-width: 360px;
}

.bs-service-card-single-body {
    padding: 22px 20px 14px;
    flex: 1;
}

.bs-service-card-single-name {
    font-size: 18px;
    margin: 0 0 8px;
    color: #222;
    line-height: 1.3;
}

.bs-service-card-single-excerpt {
    font-size: 13px;
    color: #777;
    line-height: 1.5;
    margin: 0 0 14px;
}

/* Reuse .bs-service-page-meta, .bs-service-page-duration, .bs-service-page-price,
   .bs-service-page-card-footer, .bs-btn-book-now from the listing styles above */

/* ============================================================
   SERVICES LISTING PAGE  (shortcode: [booking_services])
   Clean grid layout — no sidebar. Cards use "Add to Cart" buttons.
   ============================================================ */

/* ============================================================
   CART MODAL (standalone Add Button on other pages)
   ============================================================ */

.bs-modal-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 100000;
    animation: bsFadeIn 0.2s ease;
}

.bs-modal-wrap {
    background: #fff;
    border-radius: 12px;
    max-width: 420px;
    width: 90%;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    overflow: hidden;
    animation: bsSlideUp 0.25s ease;
}

.bs-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px 12px;
    border-bottom: 1px solid #eee;
}

.bs-modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

.bs-modal-close {
    background: none;
    border: none;
    font-size: 24px;
    color: #999;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}

.bs-modal-close:hover {
    color: #333;
}

.bs-modal-body {
    padding: 16px 22px;
    max-height: 300px;
    overflow-y: auto;
}

.bs-modal-items {
    margin-bottom: 12px;
}

.bs-modal-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 14px;
}

.bs-modal-item:last-child {
    border-bottom: none;
}

.bs-modal-item-name {
    flex: 1;
    font-weight: 500;
    color: #333;
}

.bs-modal-item-variation {
    color: #777;
    font-weight: 400;
    font-size: 13px;
}

.bs-modal-item-duration {
    color: var(--bs-accent, #0073aa);
    white-space: nowrap;
    font-size: 13px;
}

.bs-modal-item-price {
    font-weight: 600;
    color: #2e7d32;
    white-space: nowrap;
    min-width: 50px;
    text-align: right;
}

.bs-modal-totals {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 12px 16px;
    margin-top: 8px;
}

.bs-modal-totals p {
    margin: 4px 0;
    font-size: 14px;
    color: #555;
}

.bs-modal-totals .bs-modal-total-price {
    font-size: 16px;
}

.bs-modal-footer {
    display: flex;
    gap: 10px;
    padding: 14px 22px 20px;
    justify-content: flex-end;
}

.bs-modal-continue {
    background: #f0f0f0 !important;
    color: #555 !important;
    border: none;
    cursor: pointer;
}

.bs-modal-continue:hover {
    background: #e0e0e0 !important;
}

.bs-modal-confirm {
    background: var(--bs-accent, #0073aa) !important;
    color: #fff !important;
    text-decoration: none;
    border: none;
    cursor: pointer;
    text-align: center;
}

.bs-modal-confirm:hover {
    background: var(--bs-accent-dark, #005a87) !important;
    color: #fff !important;
}

.bs-modal-confirm[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

.bs-modal-close-btn {
    background: #f0f0f0 !important;
    color: #555 !important;
    border: none;
    cursor: pointer;
}

.bs-modal-close-btn:hover {
    background: #e0e0e0 !important;
}

/* Variation picker modal */
.bs-variation-prompt {
    margin: 0 0 10px;
    font-size: 14px;
    color: #666;
}

.bs-variation-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bs-variation-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.bs-variation-option:hover {
    border-color: var(--bs-accent, #0073aa);
}

.bs-variation-option.bs-selected {
    border-color: var(--bs-accent, #0073aa);
    background: #f0f7fc;
}

.bs-variation-option input[type="radio"] {
    flex-shrink: 0;
    margin: 0;
}

.bs-variation-opt-label {
    flex: 1;
    font-weight: 600;
    color: #333;
}

.bs-variation-opt-meta {
    color: #777;
    white-space: nowrap;
    font-size: 13px;
}

@keyframes bsFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes bsSlideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Toggle state for standalone Add buttons */
.bs-btn-add.bs-added {
    background: #e8f5e9 !important;
    color: #2e7d32 !important;
    border-color: #2e7d32 !important;
}

/* ============================================================
   RENTAL MODE STYLES
   ============================================================ */

/* Rental layout: assets on left, booking sidebar on right */
.bs-rental-layout {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

.bs-rental-assets {
    flex: 1;
    min-width: 0;
}

.bs-rental-sidebar {
    width: 360px;
    flex-shrink: 0;
    position: sticky;
    top: 20px;
}

/* Date inputs in rental mode */
.bs-date-input {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid #ddd;
    border-radius: 6px;
    font-size: 15px;
    font-family: inherit;
    box-sizing: border-box;
}

.bs-date-input:focus {
    border-color: var(--bs-accent, #0073aa);
    outline: none;
}

/* Rental price display */
.bs-rental-dates {
    margin-bottom: 18px;
}

/* Day cell styles (used in calendar grids) */
.bs-day-cell {
    border: 2px solid #e8e8e8;
    border-radius: 8px;
    padding: 10px 6px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    background: #fafafa;
}

.bs-day-cell:hover {
    border-color: var(--bs-accent, #0073aa);
    background: #f0f8ff;
}

.bs-day-cell.bs-today {
    border-color: #ff9800;
}

.bs-day-cell.bs-selected {
    border-color: var(--bs-accent, #0073aa);
    background: var(--bs-range-soft, #e3f2fd);
    box-shadow: 0 0 0 1px var(--bs-accent, #0073aa);
}

.bs-day-name {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #777;
    text-transform: uppercase;
}

.bs-day-number {
    display: block;
    font-size: 22px;
    font-weight: 700;
    color: #333;
}

.bs-day-cell.bs-selected .bs-day-name,
.bs-day-cell.bs-selected .bs-day-number {
    color: var(--bs-accent, #0073aa);
}

/* Rental date range: check-in, check-out, range highlight */
.bs-day-cell.bs-checkin {
    border-color: var(--bs-range, #1565c0);
    background: var(--bs-range, #1565c0);
    box-shadow: 0 0 0 1px var(--bs-range, #1565c0);
}
.bs-day-cell.bs-checkin .bs-day-name,
.bs-day-cell.bs-checkin .bs-day-number {
    color: #fff;
}

.bs-day-cell.bs-checkout {
    border-color: var(--bs-range, #1565c0);
    background: var(--bs-range, #1565c0);
    box-shadow: 0 0 0 1px var(--bs-range, #1565c0);
}
.bs-day-cell.bs-checkout .bs-day-name,
.bs-day-cell.bs-checkout .bs-day-number {
    color: #fff;
}

.bs-day-cell.bs-in-range {
    border-color: var(--bs-range-border, #bbdefb);
    background: var(--bs-range-soft, #e3f2fd);
}

/* Minimum-length hint: after the check-in day is picked, the days/nights the
   customer must still hold for the minimum stay/hire are shaded (grey, dashed)
   as a preview. Still clickable — picking a later day turns them into the real
   in-range fill. */
.bs-day-cell.bs-min-preview {
    border-color: #b0bec5;
    border-style: dashed;
    background: #eceff1;
}
.bs-day-cell.bs-min-preview .bs-day-name,
.bs-day-cell.bs-min-preview .bs-day-number {
    color: #607d8b;
}

.bs-day-cell.bs-past {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* Days that cannot fit the cart's total selected time (service mode) are
   hidden entirely so only bookable days appear in the row. */
.bs-day-cell.bs-hidden {
    display: none;
}

/* Rental week calendar — availability scheme matching the grid. The booking
   JS paints a .bs-avail class on days with a free asset and .bs-booked on days
   that are already fully booked (for the chosen asset(s)). Colours mirror the
   availability grid so "available" reads green and "booked" reads grey. */
#bs-week-grid .bs-avail {
    background: #e8f5e9;
    border-color: #a5d6a7;
}

#bs-week-grid .bs-avail:hover {
    background: #c8e6c9;
    border-color: #66bb6a;
}

.bs-day-cell.bs-booked {
    background: #e5e5e5;
    border-color: #d0d0d0;
    cursor: not-allowed;
    box-shadow: none;
    pointer-events: none;
}

.bs-day-cell.bs-booked .bs-day-name,
.bs-day-cell.bs-booked .bs-day-number {
    color: #aaa;
}

/* ============================================================
   MOBILE MONTH CALENDAR (week picker on narrow viewports)
   The week picker swaps its rolling 7-day strip for a full month grid on
   mobile. It reuses the .bs-day-cell markup, so only the layout differs.
   ============================================================ */
.bs-month-cal {
    grid-column: 1 / -1;
    width: 100%;
}

.bs-month-cal-head,
.bs-month-cal-body {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.bs-month-cal-head {
    margin-bottom: 6px;
}

.bs-month-cal-wd {
    text-align: center;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #888;
}

/* Month cells drop the redundant per-cell weekday name (the header shows it)
   and sit a touch shorter than the desktop week tiles. */
.bs-month-cal .bs-day-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 4px 2px;
    border-width: 1px;
    border-radius: 6px;
}

.bs-month-cal .bs-day-name {
    display: none;
}

.bs-month-cal .bs-day-number {
    font-size: 15px;
    line-height: 1.1;
}

.bs-month-blank {
    visibility: hidden;
}

/* Service mode: days that can't fit the cart are greyed in month view (they
   can't be hidden — that would punch holes in the calendar). */
.bs-month-cal .bs-day-cell.bs-unavailable {
    opacity: 0.45;
    background: #f5f5f5;
    border-color: #e8e8e8;
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
}

/* Tighter month calendar on the smallest screens. Placed after the base rules
   above so it actually wins the cascade. */
@media (max-width: 480px) {
    .bs-month-cal-head,
    .bs-month-cal-body {
        gap: 3px;
    }

    .bs-month-cal .bs-day-cell {
        min-height: 40px;
    }

    .bs-month-cal .bs-day-number {
        font-size: 14px;
    }
}

/* Slot buttons */
.bs-slots-label {
    font-size: 15px;
    font-weight: 600;
    color: #555;
    margin: 0 0 10px;
    padding-bottom: 6px;
    border-bottom: 2px solid #f0f0f0;
}

.bs-slot-btn {
    padding: 10px 8px;
    border: 2px solid #ddd;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: #444;
    background: #fff;
    transition: all 0.2s;
    text-align: center;
}

.bs-slot-btn:hover {
    border-color: var(--bs-accent, #0073aa);
    background: #f0f8ff;
    color: var(--bs-accent, #0073aa);
}

.bs-slot-btn.bs-selected {
    background: var(--bs-accent, #0073aa);
    color: #fff;
    border-color: var(--bs-accent, #0073aa);
}

/* ============================================================
   PREFERRED STAFF (block picker)
   ============================================================ */
.bs-staff-field {
    margin-bottom: 20px;
}

.bs-staff-label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #444;
    font-size: 14px;
}

.bs-staff-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bs-staff-option {
    padding: 10px 16px;
    border: 2px solid #ddd;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: #444;
    background: #fff;
    transition: all 0.2s;
    text-align: center;
}

.bs-staff-option:hover {
    border-color: var(--bs-accent, #0073aa);
    background: #f0f8ff;
    color: var(--bs-accent, #0073aa);
}

.bs-staff-option.bs-selected {
    background: var(--bs-accent, #0073aa);
    color: #fff;
    border-color: var(--bs-accent, #0073aa);
}

/* Selected card state */
.bs-service-card.bs-selected {
    border-color: #4caf50 !important;
    background: #f1f8e9;
    opacity: 0.9;
}

/* Rental mode responsive */
@media (max-width: 900px) {
    .bs-rental-layout {
        flex-direction: column;
    }

    .bs-rental-sidebar {
        width: 100%;
        position: static;
    }
}

/* ============================================================
   RENTAL STOCK / INVENTORY DISPLAY
   ============================================================ */

.bs-service-page-stock {
    display: inline-block;
    padding: 2px 8px;
    background: var(--bs-range-soft, #e3f2fd);
    color: var(--bs-range, #1565c0);
    border-radius: 3px;
    font-size: 12px;
    font-weight: 500;
}

/* Quantity selector in cart */
.bs-cart-qty {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0 8px;
}

.bs-cart-qty .bs-qty-down,
.bs-cart-qty .bs-qty-up {
    width: 24px;
    height: 24px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #f5f5f5;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
}

.bs-cart-qty .bs-qty-down:hover,
.bs-cart-qty .bs-qty-up:hover {
    background: #e0e0e0;
    border-color: #999;
}

.bs-cart-qty .bs-qty-down:active,
.bs-cart-qty .bs-qty-up:active {
    background: #d0d0d0;
}

.bs-cart-qty .bs-qty-input {
    width: 32px;
    height: 24px;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 13px;
    padding: 0;
    background: #fff;
}

.bs-cart-qty-single {
    display: inline-block;
    margin: 0 8px;
    color: var(--bs-range, #1565c0);
    font-weight: 600;
    font-size: 13px;
}

/* ============================================================
   PACKAGE CARDS & CART LINES
   ============================================================ */

/* Package card on the services listing */
.bs-service-card.bs-package-card {
    border-top-color: #7a3eb1;
    border-left-color: #7a3eb1;
}

/* "Includes: ..." line under a package card title */
.bs-package-members {
    margin: 6px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: #666;
}

.bs-package-includes {
    font-weight: 600;
    color: #444;
}

/* Package pill badges on cart lines + modal items */
.bs-cart-item-package,
.bs-modal-item-package {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 7px;
    border-radius: 999px;
    background: #f3eefb;
    color: #7a3eb1;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    vertical-align: middle;
    white-space: nowrap;
}

/* Member sub-line in the cart summary */
.bs-cart-item-members,
.bs-modal-item-members {
    flex: 1 1 100%;
    width: 100%;
    margin: 2px 0 0;
    color: #888;
    font-size: 12px;
    line-height: 1.5;
}

/* Allow the cart/modal item rows to wrap so the member sub-line drops below */
.bs-cart-item,
.bs-modal-item {
    flex-wrap: wrap;
}

/* ============================================================
   Add-on assets (require a main/non-add-on asset in the cart)
   ============================================================ */

/* "Add-on" tag shown next to an add-on asset title on listing cards */
.bs-service-addon-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: 999px;
    background: #fff4e5;
    color: #b26a00;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    vertical-align: middle;
    white-space: nowrap;
}

/* Add-on buttons are greyed out until a main asset is in the cart. The button
   stays clickable so a short explanatory message can be shown on click. */
.bs-btn-add.bs-addon-locked {
    opacity: 0.55;
    cursor: not-allowed;
    filter: grayscale(0.6);
}

/* Add-on badge on cart lines + modal items */
.bs-cart-item-addon,
.bs-modal-item-addon {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 7px;
    border-radius: 999px;
    background: #fff4e5;
    color: #b26a00;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    vertical-align: middle;
    white-space: nowrap;
}

/* ============================================================
   RENTAL AVAILABILITY GRID (date picker — row per asset)
   ============================================================ */

/* Rental date-selection prompt shown above the pickers */
.bs-rental-date-prompt {
    margin: 0 0 8px;
    font-size: 13px;
    color: #555;
}

/* Compact "Minimum hire/stay: X days/nights" note under the week picker */
.bs-min-stay-note-footer {
    margin: 6px 0 0;
    text-align: right;
    font-size: 12px;
    font-weight: 600;
    color: #7a5c00;
}

.bs-grid-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 8px 12px;
    margin-bottom: 14px;
}

.bs-grid-prev,
.bs-grid-next {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 5px 14px;
    font-size: 16px;
    line-height: 1.2;
    cursor: pointer;
    color: #555;
    transition: all 0.2s;
    flex-shrink: 0;
}

.bs-grid-prev:hover,
.bs-grid-next:hover {
    background: var(--bs-accent, #0073aa);
    color: #fff;
    border-color: var(--bs-accent, #0073aa);
}

.bs-grid-prev:disabled,
.bs-grid-next:disabled,
.bs-grid-prev:disabled:hover,
.bs-grid-next:disabled:hover {
    opacity: 0.5;
    cursor: not-allowed;
    background: #fff;
    color: #999;
    border-color: #ccc;
}

.bs-grid-label {
    flex: 1;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin: 0 8px;
}

/* Availability grid — two layouts, controlled by the "Grid display" setting:
     1) "10 days"   : the original rolling 10-day strip. A shared date header on
        top, then one horizontal row per asset with a narrow block per day. The
        window pages 10 days at a time and auto-advances to the first bookable
        day on first load.
     2) "Full month": a stacked calendar card per asset. Each card shows exactly
        one calendar month (Monday-first week rows) with a date-labelled block
        per day; navigation pages month to month.
   Range picking is identical in both: click a start and an end block on the
   same asset. */
.bs-rental-grid {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 12px;
}

.bs-grid-table {
    min-width: 300px;
}

/* ---------------- "10 days" strip layout (original rolling grid) -------- */

.bs-grid-table-strip {
    min-width: 760px; /* keeps the compact day columns; scrolls on small screens */
}

/* Every strip row — the shared date header row and each asset row — uses the
   same column template, so the header dates sit exactly over the day blocks
   below them. */
.bs-grid-table-strip .bs-grid-row {
    display: grid;
    grid-template-columns: minmax(150px, 1.1fr) repeat(10, minmax(42px, 1fr));
    gap: 6px;
    align-items: center;
    margin-bottom: 6px;
}

/* Shared date header across the top of the strip. */
.bs-grid-table-strip .bs-grid-header-row {
    margin-bottom: 2px;
}

.bs-grid-head-col {
    text-align: center;
    padding: 4px 0;
}

.bs-grid-day-name {
    display: block;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #888;
}

.bs-grid-day-num {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #333;
    line-height: 1.1;
}

.bs-grid-head-col.bs-today .bs-grid-day-name,
.bs-grid-head-col.bs-today .bs-grid-day-num {
    color: #e65100;
}

/* Asset label column at the left of each strip row — kept compact, matching
   the original grid (name/tags on one line, price on its own line below). */
.bs-grid-asset-col {
    min-width: 0;
    padding: 4px 2px;
    line-height: 1.3;
}

.bs-grid-asset-col .bs-grid-asset-price {
    display: block;
    margin-top: 2px;
    font-size: 12px;
}

.bs-grid-table-strip .bs-grid-row.bs-in-cart .bs-grid-asset-name {
    color: #2e7d32;
}

/* ---------------- "Full month" layout (calendar card per asset) -------- */

.bs-grid-month {
    display: block;
    border: 1px solid #ececec;
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 12px;
    background: #fff;
}

.bs-grid-month.bs-in-cart {
    border-color: #c8e6c9;
    background: #fbfefb;
}

.bs-grid-month.bs-in-cart .bs-grid-asset-name {
    color: #2e7d32;
}

/* Asset label header inside each month card. */
.bs-grid-asset-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 6px;
    margin-bottom: 10px;
    line-height: 1.3;
}

/* Shared asset name / price / tag styling for both layouts. */
.bs-grid-asset-name {
    font-size: 13px;
    font-weight: 700;
    color: #333;
}

.bs-grid-asset-price {
    color: #888;
    font-weight: 600;
}

.bs-grid-addon-tag,
.bs-grid-in-cart-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    vertical-align: middle;
    white-space: nowrap;
}

.bs-grid-addon-tag {
    background: #fff4e5;
    color: #b26a00;
}

.bs-grid-in-cart-tag {
    background: #e8f5e9;
    color: #2e7d32;
}

/* Weekday columns (Mon-Sun). Shares column gaps with the week rows below so the
   dated day blocks line up under the correct weekday. */
.bs-grid-weekdays {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
    margin-bottom: 4px;
}

.bs-grid-weekday {
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #888;
    padding: 2px 0;
}

.bs-grid-weeks {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bs-grid-week {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
}

/* Blank leading/trailing cells keep each month aligned to its week rows. */
.bs-grid-spacer {
    min-height: 34px;
}

/* Strip day block — a compact empty square matching the original grid. */
.bs-grid-table-strip .bs-grid-cell {
    display: block;
    width: 100%;
    min-height: 34px;
    padding: 0;
    border: 1px solid #a5d6a7;
    border-radius: 6px;
    background: #e8f5e9;
    cursor: pointer;
    transition: all 0.15s;
}

/* Month calendar day block — a date-labelled block, number centred. */
.bs-month-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 2px;
    border: 1px solid #a5d6a7;
    border-radius: 6px;
    background: #e8f5e9;
    color: #2e7d32;
    font: inherit;
    line-height: 1.1;
    cursor: pointer;
    transition: all 0.15s;
}

.bs-month-cell-day {
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

.bs-grid-table-strip .bs-grid-cell:hover:not(:disabled),
.bs-month-cell:hover:not(:disabled) {
    background: #c8e6c9;
    border-color: #66bb6a;
}

/* Today is ringed so it stays visible alongside the green/blue states. */
.bs-grid-table-strip .bs-grid-cell.bs-today:not(.bs-booked):not(.bs-grid-past),
.bs-month-cell.bs-today:not(.bs-booked):not(.bs-grid-past) {
    box-shadow: inset 0 0 0 1px #ff9800;
}

/* Fully booked day/night — greyed out and not clickable. */
.bs-grid-table-strip .bs-grid-cell.bs-booked,
.bs-month-cell.bs-booked {
    background: #e5e5e5;
    border-color: #d0d0d0;
    color: #9e9e9e;
    cursor: not-allowed;
    box-shadow: none;
}

.bs-grid-table-strip .bs-grid-cell.bs-booked:hover,
.bs-month-cell.bs-booked:hover {
    background: #e5e5e5;
    border-color: #d0d0d0;
    color: #9e9e9e;
}

/* Advance-notice cut-off: days before the earliest allowed booking start
   (e.g. today when "next-day" booking is enabled) are greyed and cannot start
   a stay, mirroring the past-day handling in the week calendar. */
.bs-grid-table-strip .bs-grid-cell.bs-grid-past,
.bs-month-cell.bs-grid-past {
    background: #f4f4f4;
    border-color: #e3e3e3;
    color: #bdbdbd;
    cursor: not-allowed;
    box-shadow: none;
    opacity: 0.6;
}

.bs-grid-table-strip .bs-grid-cell.bs-grid-past:hover,
.bs-month-cell.bs-grid-past:hover {
    background: #f4f4f4;
    border-color: #e3e3e3;
    color: #bdbdbd;
}

/* Selected range: check-in / check-out caps and the days/nights in between. */
.bs-grid-table-strip .bs-grid-cell.bs-checkin,
.bs-grid-table-strip .bs-grid-cell.bs-checkout,
.bs-month-cell.bs-checkin,
.bs-month-cell.bs-checkout {
    background: var(--bs-range, #1565c0);
    border-color: var(--bs-range, #1565c0);
    color: #fff;
    box-shadow: none;
}

.bs-grid-table-strip .bs-grid-cell.bs-checkin:hover,
.bs-grid-table-strip .bs-grid-cell.bs-checkout:hover,
.bs-month-cell.bs-checkin:hover,
.bs-month-cell.bs-checkout:hover {
    background: var(--bs-range, #1565c0);
    border-color: var(--bs-range, #1565c0);
    color: #fff;
}

.bs-grid-table-strip .bs-grid-cell.bs-in-range,
.bs-month-cell.bs-in-range {
    background: var(--bs-range-border, #bbdefb);
    border-color: #90caf9;
    color: #0d47a1;
}

.bs-grid-table-strip .bs-grid-cell.bs-in-range:hover,
.bs-month-cell.bs-in-range:hover {
    background: var(--bs-range-border, #bbdefb);
    border-color: #90caf9;
    color: #0d47a1;
}

/* Minimum-length hint: after the check-in day is picked, the days/nights the
   customer must still hold for the minimum stay/hire are shaded (grey, dashed)
   as a preview. Still clickable — picking a later day turns them into the real
   in-range fill. */
.bs-grid-table-strip .bs-grid-cell.bs-min-preview,
.bs-month-cell.bs-min-preview {
    background: #eceff1;
    border-color: #90a4ae;
    color: #546e7a;
    border-style: dashed;
    box-shadow: none;
}

.bs-grid-table-strip .bs-grid-cell.bs-min-preview:hover,
.bs-month-cell.bs-min-preview:hover {
    background: #d5dde3;
    border-color: #78909c;
    color: #546e7a;
}

/* Loading / empty / error states inside the grid container */
.bs-grid-status {
    padding: 16px;
    text-align: center;
    color: #888;
    background: #fafafa;
    border-radius: 8px;
    margin: 0;
}

.bs-grid-error {
    color: #a00;
}

/* Legend row (swatches left, minimum hire/stay note right) */
.bs-grid-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 18px;
    margin: 8px 0 0;
    font-size: 12px;
    color: #666;
}

.bs-grid-legend-items {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 18px;
}

.bs-legend-min {
    margin-left: auto;
    font-weight: 600;
    color: #7a5c00;
    font-size: 12px;
}

.bs-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.bs-legend-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 4px;
    vertical-align: -2px;
    flex-shrink: 0;
}

.bs-legend-avail {
    background: #e8f5e9;
    border: 1px solid #66bb6a;
}

.bs-legend-booked {
    background: #e5e5e5;
    border: 1px solid #c0c0c0;
}

.bs-legend-range {
    background: var(--bs-range, #1565c0);
    border: 1px solid var(--bs-range, #1565c0);
}

@media (max-width: 480px) {
    .bs-grid-label {
        font-size: 12px;
    }
    .bs-rental-date-prompt {
        font-size: 12px;
    }
    .bs-grid-table-strip .bs-grid-cell,
    .bs-month-cell {
        min-height: 32px;
    }
    .bs-grid-spacer {
        min-height: 30px;
    }
    .bs-month-cell-day {
        font-size: 12px;
    }
    /* The mobile (forced) month view gets more cell width by reclaiming card
       padding and tightening the week gaps. */
    .bs-grid-month {
        padding: 8px;
    }
    .bs-grid-weekdays,
    .bs-grid-week {
        gap: 3px;
    }
}

/* ============================================================
   MANAGE YOUR BOOKINGS / CANCELLATION PAGE (bsm-*)
   Shown when the [booking_cancel] shortcode runs with a valid
   signed link, and for the manual Booking-ID lookup fallback.
   ============================================================ */
.bsm-wrap {
    max-width: 760px;
}

.bsm-title {
    font-size: 24px;
    margin: 0 0 6px;
}

.bsm-signed-in {
    font-size: 15px;
    color: #555;
    margin: 0 0 22px;
}

.bsm-subtitle {
    font-size: 18px;
    margin: 34px 0 14px;
    padding-top: 22px;
    border-top: 1px solid #eee;
}

.bsm-card {
    background: #fff;
    border: 1px solid #e2e2e2;
    border-radius: 10px;
    padding: 20px 22px;
    margin-bottom: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.bsm-card-muted {
    background: #fafafa;
}

.bsm-card-head,
.bsm-entry-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}

.bsm-card-head {
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 12px;
    margin-bottom: 14px;
}

.bsm-ref,
.bsm-entry-title {
    font-weight: 700;
    font-size: 16px;
}

.bsm-card-body > p {
    margin: 4px 0;
}

.bsm-when {
    color: #666;
    font-size: 14px;
}

.bsm-service {
    font-size: 16px;
}

.bsm-price {
    font-weight: 700;
    font-size: 17px;
}

.bsm-status {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.bs-status-pending {
    background: #fff8e1;
    color: #b26a00;
    border: 1px solid #ffe082;
}

.bs-status-confirmed {
    background: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #c8e6c9;
}

.bs-status-completed {
    background: #eceff1;
    color: #546e7a;
    border: 1px solid #cfd8dc;
}

.bs-status-cancelled {
    background: #fdecea;
    color: #c62828;
    border: 1px solid #f5c6cb;
}

.bs-status-rejected {
    background: #fdecea;
    color: #8e0000;
    border: 1px solid #e0b4b4;
}

.bsm-field {
    margin-bottom: 12px;
}

.bsm-field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 4px;
}

.bsm-field input {
    width: 100%;
    max-width: 380px;
    padding: 9px 12px;
    border: 1px solid #d0d0d0;
    border-radius: 6px;
    font-size: 15px;
}

.bsm-field input[readonly] {
    background: #f7f7f7;
    color: #444;
}

.bsm-cancel-form {
    margin-top: 18px;
}

.bsm-cancel-actions {
    margin-top: 6px;
}

.bsm-cancel-form .bs-btn-cancel {
    width: auto;
    min-width: 220px;
}

.bsm-message {
    margin-top: 10px;
    font-size: 14px;
}

.bsm-not-cancellable {
    background: #fafafa;
    border: 1px dashed #ddd;
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 14px;
    color: #666;
    margin: 14px 0 0;
}

.bsm-btn-sm {
    padding: 7px 16px;
    font-size: 13px;
}

.bsm-btn-outline {
    background: transparent;
    color: var(--bs-accent, #0073aa);
    border: 1px solid var(--bs-accent, #0073aa);
}

.bsm-btn-outline:hover {
    background: var(--bs-accent, #0073aa);
    color: #fff;
}

.bsm-empty {
    color: #888;
}

.bsm-notice-error {
    background: #fdecea;
    border: 1px solid #f5c6cb;
    color: #721c24;
    padding: 12px 16px;
    border-radius: 6px;
    font-size: 14px;
}

/* Small helper note used where the lookup flow has been withheld. */
.bsm-help-note {
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
    color: #555;
    padding: 12px 16px;
    border-radius: 6px;
    font-size: 14px;
    margin-top: 22px;
}

/* Per-entry read-only marker inside the list while cancellations are disabled. */
.bsm-entry .bsm-not-cancellable.bsm-row-disabled {
    margin-top: 12px;
}

/* ----- The bookings list ----- */
.bsm-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.bsm-entry {
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    padding: 16px 18px;
    background: #fff;
}

.bsm-entry-current {
    border-color: #90caf9;
    background: #f5fbff;
}

.bsm-current-tag,
.bsm-addon-tag {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--bs-range-soft, #e3f2fd);
    color: var(--bs-range, #1565c0);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    vertical-align: middle;
    white-space: nowrap;
}

.bsm-entry-service {
    font-size: 15px;
}

.bsm-entry-head .bsm-when {
    width: 100%;
    flex-basis: 100%;
    margin: 2px 0 0;
}

.bsm-lines {
    list-style: none;
    margin: 12px 0 4px;
    padding: 0;
}

.bsm-lines li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 5px 0;
    border-bottom: 1px dashed #f0f0f0;
    font-size: 14px;
}

.bsm-lines li:last-child {
    border-bottom: none;
}

.bsm-line-addon {
    padding-left: 16px;
    color: #555;
}

.bsm-qty {
    color: #888;
}

.bsm-line-price,
.bsm-price-single,
.bsm-total {
    font-weight: 600;
}

.bsm-total {
    font-size: 14px;
    text-align: right;
    margin: 6px 0 0;
}

/* Small explanatory note, e.g. when a row is part of a multi-service visit. */
.bsm-note {
    margin: 10px 0 0;
    font-size: 13px;
    color: #666;
    font-style: italic;
}

.bsm-price-single {
    font-size: 16px;
    margin: 8px 0 0;
}

.bsm-deposit {
    font-size: 12px;
    color: #888;
    margin: 2px 0 0;
}

.bsm-total + .bsm-deposit {
    text-align: right;
}

.bsm-history-note {
    color: #888;
    font-size: 13px;
    font-style: italic;
    margin: 10px 0 0;
}

/* ----- Row cancel forms ----- */
.bsm-row-cancel-form {
    margin-top: 12px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.bsm-row-cancel-form .bs-btn-cancel {
    width: auto;
    margin-top: 0;
}

.bsm-row-msg {
    font-size: 13px;
}

/* ----- Add-on picker ----- */
.bsm-addons {
    margin-top: 14px;
    border-top: 1px solid #f0f0f0;
    padding-top: 12px;
}

.bsm-addons-panel {
    background: #fafafa;
    border: 1px solid #ececec;
    border-radius: 8px;
    padding: 14px 16px;
    margin-top: 10px;
}

.bsm-addons-hint {
    font-size: 13px;
    color: #666;
    margin: 0 0 10px;
}

.bsm-addons-list {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    max-height: 220px;
    overflow: auto;
    border: 1px solid #eee;
    border-radius: 6px;
    background: #fff;
}

.bsm-addons-list li {
    padding: 7px 10px;
    border-bottom: 1px solid #f5f5f5;
    font-size: 14px;
}

.bsm-addons-list li:last-child {
    border-bottom: none;
}

.bsm-addons-list label {
    cursor: pointer;
}

/* Add-on row: checkbox + name (+ availability) on the left, quantity stepper
   on the right for add-ons with more than one unit free. */
.bsm-addon-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.bsm-addon-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.bsm-addon-avail {
    font-size: 12px;
    color: #888;
}

.bsm-addon-qty {
    flex-shrink: 0;
}

.bsm-addon-qty .bs-qty-down:disabled,
.bsm-addon-qty .bs-qty-up:disabled {
    opacity: 0.45;
    cursor: default;
}

/* Inline quantity editor for an add-on already on the hire (line list). */
.bsm-addon-edit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.bsm-addon-edit .bsm-addon2-qty {
    width: 56px;
    text-align: center;
}

.bsm-addon2-msg {
    font-size: 12px;
}

@media (max-width: 480px) {
    .bsm-lines li {
        flex-wrap: wrap;
    }
}

.bsm-addons-actions {
    display: flex;
    gap: 8px;
}

.bsm-addons-msg {
    display: inline-block;
    margin-left: 10px;
    font-size: 13px;
}

/* ----- Customer "change dates" (pending asset hires) ----- */
.bsm-dates {
    margin-top: 14px;
    border-top: 1px solid #f0f0f0;
    padding-top: 12px;
}

.bsm-dates-panel {
    background: #fafafa;
    border: 1px solid #ececec;
    border-radius: 8px;
    padding: 14px 16px;
    margin-top: 10px;
}

.bsm-dates-hint {
    font-size: 13px;
    color: #666;
    margin: 0 0 10px;
}

.bsm-dates-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 10px;
}

.bsm-dates-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    color: #444;
}

.bsm-dates-field input[type="date"] {
    padding: 6px 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    background: #fff;
}

.bsm-dates-min {
    font-size: 12px;
    color: #888;
    margin: 0 0 10px;
}

.bsm-dates-actions {
    display: flex;
    gap: 8px;
}

.bsm-dates-msg {
    display: inline-block;
    margin-left: 10px;
    font-size: 13px;
}

/* ----- Different-email disclosure + manual lookup ----- */
.bsm-different-email {
    margin-top: 26px;
    padding-top: 4px;
}

.bsm-different-email summary {
    cursor: pointer;
    color: var(--bs-accent, #0073aa);
    font-size: 14px;
}

.bsm-different-email > p {
    color: #777;
    font-size: 13px;
    margin: 8px 0;
}

.bsm-lookup-form {
    margin-top: 10px;
    max-width: 460px;
}

.bsm-lookup-form .bs-btn {
    width: auto;
    background: var(--bs-accent, #0073aa);
    color: #fff;
}

@media (max-width: 520px) {
    .bsm-card,
    .bsm-entry {
        padding: 14px;
    }
    .bsm-cancel-form .bs-btn-cancel {
        width: 100%;
    }
}

/* ============================================================
   CHECKOUT STATE / THEME-FRIENDLY CLASSES
   These elements used to carry inline style="display:none" and
   hard-coded sizing in the markup. Defaults now live here so the
   active theme's own CSS (theme-UI mode) can restyle the form and
   controls without fighting style="" attributes. jQuery toggles the
   state at runtime through .show()/.hide(), which override these
   defaults, so nothing else needs to change.
   ============================================================ */
#bs-cart-items,
#bs-cart-totals,
#bs-cart-rental-nights,
#bs-slots-loading,
#bs-no-slots,
#bs-id-lookup-status,
#bs-booking-message,
#bs-booking-success {
    display: none;
}

/* ============================================================
   Add-on picker inside the "Your Selection" cart modal
   ============================================================ */

.bs-modal-addons {
    margin-top: 4px;
    border-top: 1px dashed #d9d9d9;
    padding-top: 12px;
}

.bs-modal-addons-title {
    margin: 0 0 2px;
    font-size: 12px;
    font-weight: 700;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.bs-modal-addons-hint {
    margin: 0 0 10px;
    font-size: 12px;
    color: #888;
}

.bs-modal-addons-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bs-modal-addon {
    padding: 7px 10px;
    border-radius: 8px;
    background: #f8f9fa;
}

.bs-modal-addon-row {
    display: flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    font-size: 13px;
    color: #333;
}

.bs-modal-addon-row input[type="checkbox"] {
    flex: none;
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--bs-accent, #0073aa);
    cursor: pointer;
}

.bs-modal-addon-name {
    flex: 1;
    font-weight: 500;
}

.bs-modal-addon-price {
    color: #2e7d32;
    font-weight: 600;
    white-space: nowrap;
    font-size: 12px;
}

.bs-modal-addon-var {
    width: 100%;
    margin-top: 5px;
    padding: 4px 6px;
    font-size: 12px;
    color: #333;
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    background: #fff;
}

.bs-modal-body:has(.bs-modal-addons) {
    max-height: 420px;
}