/**
 * Listeo Booking Plus - Modal Wizard Styles
 *
 * @package Listeo_Booking_Plus
 */


/* ============================================
   Book Now Button (replaces Core's booking widget)
   ============================================ */

.lbp-book-now-btn {
    display: block;
    width: 100%;
    padding: 14px 20px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    text-align: center;
    border-radius: 8px !important;
    color: #fff !important;
    border: none !important;
    cursor: pointer;
    transition: opacity 0.2s ease;
    box-sizing: border-box;
    margin: 0 0 20px;
}

.lbp-book-now-btn:hover {
    opacity: 0.9;
    color: #fff !important;
}

.lbp-book-now-btn i {
    margin-right: 8px;
}

/* ============================================
   Modal Container
   ============================================ */

.lbp-modal {
    position: relative;
    max-width: 900px;
    width: 95vw;
    margin: 20px auto;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.lbp-modal-inner {
    display: flex;
    min-height: 520px;
    max-height: 85vh;
}

/* ============================================
   Sidebar
   ============================================ */

.lbp-sidebar {
    width: 260px;
    min-width: 260px;
    /* `--lbp-popup-sidebar` is injected by LBP_Frontend when an admin
       sets the popup-appearance options; otherwise the slate fallback
       applies. Same dual-source pattern is used for the accent color
       below. */
    background: var(--lbp-popup-sidebar, #2d2d32);
    color: #fff;
    padding: 30px 24px;
    display: flex;
    flex-direction: column;
}

.lbp-sidebar-eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 6px;
}

.lbp-sidebar-eyebrow::before {
    /* Small accent dot mirrors the landing-page popup. Uses the
       configured accent color, falling back to a soft white so dark
       sidebars still read clearly without configuration. */
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--lbp-popup-accent, rgba(255, 255, 255, 0.65));
    flex-shrink: 0;
}

.lbp-sidebar-header h3 {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #fff;
    margin: 0 0 28px;
    line-height: 1.35;
    word-break: break-word;
}

/* Step navigation */
.lbp-steps-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lbp-step-indicator {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: default;
    transition: background 0.2s ease;
    opacity: 0.5;
}

.lbp-step-indicator.active {
    background: rgba(255, 255, 255, 0.1);
    opacity: 1;
}

.lbp-step-indicator.completed {
    opacity: 0.8;
}

.lbp-step-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    flex-shrink: 0;
}

.lbp-step-indicator.active .lbp-step-num {
    background: #fff;
    color: #2d2d32;
}

.lbp-step-indicator.completed .lbp-step-num {
    background: #4CAF50;
    color: #fff;
}

.lbp-step-label {
    font-size: 13px;
    font-weight: 500;
}

/* Summary panel */
.lbp-summary {
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.lbp-summary h4 {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 12px;
}

.lbp-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0;
    font-size: 13px;
}

.lbp-summary-label {
    color: rgba(255, 255, 255, 0.6);
}

.lbp-summary-value {
    color: #fff;
    font-weight: 500;
    text-align: right;
    max-width: 140px;
    word-break: break-word;
}

.lbp-summary-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 8px 0;
}

.lbp-summary-price {
    font-size: 16px;
    font-weight: 700;
    
}

/* ============================================
   Main Content Area
   ============================================ */

.lbp-content {
    flex: 1;
    padding: 30px;
    overflow-y: auto;
    position: relative;
}

.lbp-modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 32px;
    height: 32px;
    border: none;
    background: #f0f0f0;
    border-radius: 50%;
    font-size: 18px;
    line-height: 32px;
    text-align: center;
    cursor: pointer;
    color: #666;
    transition: all 0.2s ease;
    z-index: 10;
    padding: 0;
}

.lbp-modal-close:hover {
    background: #e0e0e0;
    color: #333;
}

/* Steps */
.lbp-step {
    display: none;
}

.lbp-step.active {
    display: block;
}

.lbp-step-header {
    margin-bottom: 14px;
    padding-right: 40px;
}

.lbp-step-eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #b8b8b8;
    margin-bottom: 4px;
}

.lbp-step-eyebrow::before {
    /* Matches the sidebar eyebrow dot but defaults to the accent color
       on light backgrounds (content area is white). */
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--lbp-popup-accent, #3b82f6);
    flex-shrink: 0;
}

.lbp-step-header h3 {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #2b2b2b;
    margin: 0 0 6px;
}

.lbp-step-desc {
    font-size: 14px;
    color: #888;
    margin: 0;
}

/* ============================================
   Step 0: Resource Cards
   ----
   Compact selectable variant of the listing-page resource card. Three
   columns: media · identity (name + subtitle + tags + availability) ·
   price + radio. Same data shape as the listing card, designed to read
   as a row in a picker.
   ============================================ */

.lbp-resources-count {
    font-size: 12f.5px;
    color: #7a7a7a;
    font-weight: 600;
    margin-bottom: 10px;
}

.lbp-resources-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lbp-resource-card {
    display: grid;
    grid-template-columns: 55px 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 14px;
    background: #fff;
    border: 1.5px solid #ececec;
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
    position: relative;
}

.lbp-resource-card:hover {
    border-color: #d8d8d8;
}

.lbp-resource-card.selected {
    border-color: #f43758;
    background: #fff5f8;
    box-shadow: 0 0 0 3px #ffe6ee;
}

/* Media — rectangular per the design's "objects/spaces" treatment.
   People-style listings still get an avatar by overriding this width in
   theme CSS if needed. */
.lbp-resource-avatar {
    width: 50px;
    height: 50px;
    border-radius: 99px;
    background: #f4f4f4;
    object-fit: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.lbp-resource-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lbp-resource-avatar i {
    font-size: 22px;
    color: #b8bbc1;
}

.lbp-resource-any {
    background: #e8e8f0;
}

.lbp-resource-any i {
    color: #66676b;
}

.lbp-resource-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.lbp-resource-info .lbp-resource-identity {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.lbp-resource-info h4 {
    font-size: 15.5px;
    font-weight: 800;
    color: #2b2b2b;
    margin: 0;
    letter-spacing: -0.005em;
}
.lbp-resource-info .lbp-resource-subtitle {
    font-size: 12.5px;
    color: #7a7a7a;
    font-weight: 600;
}
/* Subtitle drops below the name now — the inline `·` separator
   doesn't belong at the start of its own line. The listing-page
   card layout (`.lbp-resource-identity` without `.lbp-resource-info`
   ancestor at line ~1795) is unchanged and keeps the inline dot. */
.lbp-resource-info .lbp-resource-subtitle::before {
    content: none;
}

/* Tags — same pill treatment as the listing-page card. */
.lbp-resource-info .lbp-resource-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.lbp-resource-info .lbp-resource-tag {
    padding: 2px 8px;
    border-radius: 999px;
    background: #f4f4f4;
    color: #4a4a4a;
    font-size: 11px;
    font-weight: 600;
}
.lbp-resource-card.selected .lbp-resource-info .lbp-resource-tag {
    background: #fff;
    border: 1px solid #ffe6ee;
}

/* Availability — colored dot + label. Same tone colors as listing card. */
.lbp-resource-info .lbp-resource-availability {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
}
.lbp-resource-info .lbp-resource-availability-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}
.lbp-resource-info .lbp-resource-availability--good    { color: #1F9A55; }
.lbp-resource-info .lbp-resource-availability--warn    { color: #C57500; }
.lbp-resource-info .lbp-resource-availability--neutral { color: #7a7a7a; }

/* Right column — price (left) + radio (right), side by side.
   Matches the landing-page popup layout instead of stacking the
   radio on top of the price. */
.lbp-resource-action {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding-right: 4px;
}
.lbp-resource-card .lbp-resource-price {
    text-align: right;
    white-space: nowrap;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}
.lbp-resource-card .lbp-resource-price-from {
    font-size: 9.5px;
    color: #7a7a7a;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
}
.lbp-resource-card .lbp-resource-price-amount {
    font-size: 16px;
    font-weight: 800;
    color: #2b2b2b;
    line-height: 1.1;
    letter-spacing: -0.005em;
}
.lbp-resource-card .lbp-resource-price-unit {
    /* Drops to its own line under the amount so the price column
       reads FROM / $price / /unit vertically (landing-page layout). */
    display: block;
    font-size: 11px;
    color: #7a7a7a;
    font-weight: 600;
    margin-top: 1px;
}

.lbp-resource-check {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1.5px solid #ececec;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.12s ease;
}

.lbp-resource-check i {
    font-size: 10px;
    color: transparent;
    transition: color 0.12s ease;
}

.lbp-resource-card.selected .lbp-resource-check {
    border-color: #f43758;
    background: #f43758;
}

.lbp-resource-card.selected .lbp-resource-check i {
    color: #fff;
}

/* ============================================
   Step 1: Date & Time
   ============================================ */

.lbp-datetime-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.lbp-field-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Field-group labels — uppercase eyebrow style matched across the
   modal (Date, Check In - Check Out, Available times, Start Time, End
   Time). Scoped to top-level field labels only — explicitly NOT
   `.lbp-field-group label` because that would sweep up the per-service
   <label> inside .lbp-bookable-services (which already has its own
   sentence-case treatment from the theme/Core). */
.lbp-field-group > label,
.lbp-field-group > .lbp-field > label,
.lbp-field-group > .lbp-date-range-wrap > .lbp-field > label,
.lbp-time-slots-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #7a7a7a;
    margin-bottom: 8px;
}
.lbp-time-slots-header .lbp-time-slots-title {
    margin-bottom: 0; /* parent .lbp-time-slots-header sets its own spacing */
}

.lbp-date-range-wrap {
    display: flex;
    gap: 12px;
}

.lbp-date-range-wrap .lbp-field {
    flex: 1;
}

.lbp-field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #555;
    margin-bottom: 6px;
}

.lbp-field label .required {
    color: #e53935;
}

.lbp-date-input,
.lbp-time-input,
.lbp-info-form input[type="text"],
.lbp-info-form input[type="email"],
.lbp-info-form input[type="tel"],
.lbp-info-form textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    color: #333;
    background: #fff;
    transition: border-color 0.2s ease;
    outline: none;
    box-sizing: border-box;
}
input#lbp-date-end,
input#lbp-date-start {
    margin-bottom: 0px;
}
.lbp-date-input:focus,
.lbp-time-input:focus,
.lbp-info-form input:focus,
.lbp-info-form textarea:focus {
    border-color: #66676b;
}

/* Custom Booking Fields (from Listeo Editor → Booking Fields) get
   rendered by Core's helper which outputs Bootstrap `col-md-6`
   markup. Inside the popup's narrow column that creates two 50%
   columns squashed to ~80px, which breaks the labels (one word per
   line) and shrinks inputs to nothing. Reset the columns to a
   responsive grid keyed off the popup's width so the helper's output
   reads as a clean stack of fields. */
.lbp-custom-booking-fields-row {
    /* Override the flex row from `.lbp-form-row` so the wrapper can
       take full width inside it, then let the inner grid handle the
       column layout. */
    display: block;
}
.lbp-custom-booking-fields {
    display: grid;
    grid-template-columns: repeat( auto-fit, minmax( 220px, 1fr ) );
    gap: 14px;
}
.lbp-custom-booking-fields > div[id^="listeo-core-booking-fields-"] {
    display: contents;
}
.lbp-custom-booking-fields [class*="col-md-"],
.lbp-custom-booking-fields [class*="col-sm-"],
.lbp-custom-booking-fields [class*="col-xs-"] {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
    padding: 0;
    float: none;
}
.lbp-custom-booking-fields label {
    display: block;
    margin-bottom: 4px;
    color: #333;
    font-size: 13px;
    font-weight: 500;
    white-space: normal;
}
.lbp-custom-booking-fields input[type="text"],
.lbp-custom-booking-fields input[type="email"],
.lbp-custom-booking-fields input[type="tel"],
.lbp-custom-booking-fields input[type="url"],
.lbp-custom-booking-fields input[type="number"],
.lbp-custom-booking-fields input[type="date"],
.lbp-custom-booking-fields textarea,
.lbp-custom-booking-fields select {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    color: #333;
    background: #fff;
    box-sizing: border-box;
}

/* Core's `listeo_get_extra_booking_fields()` wraps inputs that carry
   an icon in `.input-with-icon` which the theme styles with
   `padding-left: 47px !important` + an absolutely-positioned icon. In
   the popup the icon column is unnecessary (no room) and the !important
   padding shoves the typed text 50–100px to the right. Suppress the
   icon and reset the input padding so the field reads cleanly. */
.lbp-custom-booking-fields .input-with-icon {
    position: relative;
}
.lbp-custom-booking-fields .input-with-icon > i {
    display: none;
}
.lbp-custom-booking-fields .input-with-icon input,
.lbp-custom-booking-fields .input-with-icon textarea {
    padding-left: 14px !important;
}

/* flatpickr `static: true` wraps the input in `.flatpickr-wrapper`,
   which defaults to `display: inline-block` width-by-content. Inside
   our flex date/time row that collapses the field. Force the wrapper
   to behave like a transparent block so the input keeps its natural
   100% width and the calendar floats below it normally. */
.lbp-modal .flatpickr-wrapper {
    display: block;
    width: 100%;
    position: relative;
}
.lbp-modal .flatpickr-wrapper > .flatpickr-input {
    width: 100%;
}

/* Constrain the time-picker calendar to the column width and override
   any inline `width: NNNpx` flatpickr sets at runtime (the time-only
   picker normally defaults to ~300px which overflows our column). */
.lbp-modal .flatpickr-calendar {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
    border: 1px solid #e6e6e6;
}

/* Hide the browser's native number-input spinners on flatpickr's
   internal hour/minute fields — Magnific Popup + the theme's input
   resets let them through, producing two sets of arrows alongside
   flatpickr's own. We only want flatpickr's. */
.lbp-modal .flatpickr-time input.flatpickr-hour,
.lbp-modal .flatpickr-time input.flatpickr-minute,
.lbp-modal .flatpickr-time input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}
.lbp-modal .flatpickr-time input.flatpickr-hour::-webkit-inner-spin-button,
.lbp-modal .flatpickr-time input.flatpickr-hour::-webkit-outer-spin-button,
.lbp-modal .flatpickr-time input.flatpickr-minute::-webkit-inner-spin-button,
.lbp-modal .flatpickr-time input.flatpickr-minute::-webkit-outer-spin-button,
.lbp-modal .flatpickr-time input[type="number"]::-webkit-inner-spin-button,
.lbp-modal .flatpickr-time input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.lbp-field.has-error input,
.lbp-field.has-error textarea {
    border-color: #e53935;
}

.lbp-field-error {
    font-size: 12px;
    color: #e53935;
    margin-top: 4px;
    display: none;
}

.lbp-field.has-error .lbp-field-error {
    display: block;
}

/* Time slots — `.calendar-slot` mirrors Core's booking widget grid
   markup so the slot-span engine in `lbp-slot-span.js` (multi-slot,
   service-driven span highlighting, clock-format display) inherits.
   Popup-scoped styles override Core's painted look to match the
   "Compact chip grid" design — 4-col matrix, monospace time chips,
   selected = filled brand, taken = pale + line-through. The shared
   `.calendar-slot` class is what the span engine looks for, so we
   keep it and just relayout/restyle it inside `.lbp-time-slots`. */

.lbp-time-slots {
    display: block;
}

.lbp-time-slots-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 10px;
    gap: 12px;
}
.lbp-time-slots-count {
    font-size: 11.5px;
    color: #9a9a9a;
    font-weight: 500;
}

/* Popup-scoped 2-column grid (variant E "compact list"). The
   `.slot-carousel-day-column` wrapper sticks around so `lbp-slot-span.js`
   finds its `.calendar-slot` children, but each child is now a
   "start → end" row instead of a single-time chip — gives the customer
   enough context for the last slot of the day or any non-uniform gap. */
.lbp-time-slots .slot-carousel-day-column {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    flex: none;
    width: 100%;
    min-width: 0;
    max-width: none;
}

/* Row chip — start → end with a small radio in the right column. */
.lbp-time-slots .calendar-slot {
    display: grid;
    grid-template-columns: 1fr 16px;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    border-radius: 5px;
    border: 1px solid #dbdbdb;
    box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.06);
    background: #fff;
    color: #15130F;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}
.lbp-time-slots .calendar-slot:hover {
    border-color: #c8c8c8;
}
.lbp-time-slots .calendar-slot.selected,
.lbp-time-slots .calendar-slot.selected:hover {
    background: #fff5f8;
    border-color: #f43758;
    color: #15130F;
    box-shadow: inset 0 0 0 1px #f43758, 0 1px 3px 0px rgba(244, 55, 88, 0.12);
}

/* Taken / disabled slots stay visible but lined-through, faint background. */
.lbp-time-slots .calendar-slot-booked,
.lbp-time-slots .calendar-slot[disabled],
.lbp-time-slots .calendar-slot.calendar-slot-booked:hover {
    background: #FAF8F4;
    border-color: #f1eee8;
    color: #b8b6b1;
    cursor: not-allowed;
    text-decoration: line-through;
    text-decoration-thickness: 1px;
    box-shadow: none;
}

/* Row content composition: time → arrow → time, plus a separate radio. */
.lbp-time-slots .calendar-slot .lbp-slot-row {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    min-width: 0;
}
.lbp-time-slots .lbp-slot-time {
    font-weight: 600;
}
.lbp-time-slots .lbp-slot-time--end {
    color: #7a7a7a;
    font-weight: 500;
    margin-left: 4px;
}
.lbp-time-slots .lbp-slot-meridiem {
    font-size: 10px;
    opacity: 0.7;
    font-weight: 500;
    margin-left: 2px;
}
.lbp-time-slots .lbp-slot-arrow {
    color: #c8c8c8;
    font-weight: 400;
    margin: 0 4px;
}

/* Radio circle — right column; fills brand red when selected. */
.lbp-time-slots .lbp-slot-radio {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1.5px solid #ececec;
    background: transparent;
    justify-self: end;
    position: relative;
    transition: border-color 0.12s ease, background 0.12s ease;
}
.lbp-time-slots .calendar-slot.selected .lbp-slot-radio {
    border-color: #f43758;
    background: #f43758;
}
.lbp-time-slots .calendar-slot.selected .lbp-slot-radio::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: #fff;
}
.lbp-time-slots .calendar-slot-booked .lbp-slot-radio,
.lbp-time-slots .calendar-slot[disabled] .lbp-slot-radio {
    border-color: #ececec;
    background: transparent;
}

/* Multi-slot span overlays (driven by `lbp-slot-span.js`) — keep their
   visual treatment but adapt to the row look. */
.lbp-time-slots .calendar-slot.lbp-slot-in-span {
    border-color: #f43758;
}

/* Drop to a single column on narrow viewports so rows have room to
   breathe (otherwise the arrow + meridiems collide). */
@media (max-width: 540px) {
    .lbp-time-slots .slot-carousel-day-column { grid-template-columns: 1fr; }
}

/* Legacy `.lbp-time-slot` styles kept for any cached/themed markup that
   still emits the old class. Core's `.calendar-slot-*` rules cover the
   new markup. */
.lbp-time-slot {
    padding: 8px 16px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #555;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #fff;
}
.lbp-time-slot:hover {
    border-color: #66676b;
    color: #333;
}
.lbp-time-slot.selected {
    border-color: #66676b;
    background: #66676b;
    color: #fff;
}
.lbp-time-slot.unavailable {
    opacity: 0.4;
    cursor: not-allowed;
    text-decoration: line-through;
}

.lbp-placeholder-msg {
    color: #999;
    font-size: 13px;
    font-style: italic;
}


/* ============================================
   Panel Dropdowns (Guests, Services)
   Matches Core's booking-widget panel-dropdown style
   ============================================ */

.lbp-panel-dropdown {
    width: 100%;
}

.lbp-panel-toggle {
    border: none;
    cursor: pointer;
    border-radius: 5px;
    /* //box-shadow: 0 1px 6px 0px rgba(0, 0, 0, 0.1); */
    font-size: 16px;
    font-weight: 600;
    height: auto;
    padding: 10px 16px;
    line-height: 30px;
    margin: 0;
    position: relative;
    background-color: #fff;
        border: 1px solid #dbdbdb;
        box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.06);
    text-align: left;
    color: #888;
    display: block;
    width: 100%;
    text-decoration: none !important;
    transition: color 0.3s;
}

.lbp-panel-dropdown.active .lbp-panel-toggle {
    border-radius: 5px 5px 0px 0px;
}
.lbp-panel-toggle:hover {
    color: #444 !important;
}

.lbp-panel-toggle:after {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f107";
    font-size: 20px;
    color: #c0c0c0;
    position: absolute;
    right: 20px;
    top: 10px;
    transition: transform 0.3s;
}

.lbp-panel-dropdown.active .lbp-panel-toggle:after {
    transform: rotate(180deg);
}

.lbp-panel-content {
    display: none;
    padding: 20px;
        background-color: #fff;
            border: 1px solid #dbdbdb;
            box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.06);
    overflow: visible;
   
    position: relative;
}

.lbp-panel-content:before {
    content: "";
    height: 10px;
    position: absolute;
    width: 100%;
    top: -3px;
    background-color: #fff;
    left: 0;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
    border-bottom: 1px solid #eee;
}

.lbp-panel-dropdown.active .lbp-panel-content {
    display: block;
}

.lbp-panel-dropdown.active .lbp-panel-content:before {
    opacity: 1;
    visibility: visible;
}

.lbp-panel-content-reset {
    padding: 0;
}

/* Guest total badge — matches Core's .qtyTotal */
.lbp-guests-total {
    background-color: #66676b;
    border-radius: 50%;
    color: #fff;
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    font-family: "Open Sans", sans-serif;
    line-height: 18px;
    text-align: center;
    position: relative;
    top: -2px;
    left: 2px;
    height: 18px;
    width: 18px;
}

/* Services counter badge — matches Core's .services-counter */
.lbp-services-counter {
    background-color: #f91942;
    border-radius: 50%;
    color: #fff;
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    font-family: "Open Sans", sans-serif;
    line-height: 18px;
    text-align: center;
    position: relative;
    top: -2px;
    left: 2px;
    height: 18px;
    width: 18px;
}

/* ============================================
   Quantity Buttons — matches Core's .qtyButtons
   ============================================ */

.lbp-qtyButtons {
    display: flex;
    align-items: center;
    margin: 0 0 13px 0;
}

.lbp-panel-content .lbp-qtyButtons:first-child {
    margin-top: 8px;
}

.lbp-panel-content .lbp-qtyButtons:last-child {
    margin-bottom: 3px;
}

.lbp-qtyTitle {
    font-size: 16px;
    font-weight: 600;
    line-height: 36px;
    padding-right: 15px;
    display: block;
    flex: 1;
}

.lbp-panel-with-children .lbp-qtyTitle {
    display: block;
    line-height: 14px;
}

.lbp-panel-with-children .lbp-qtyTitle span {
    font-size: 13px;
    display: block;
    font-weight: 500;
    opacity: 0.8;
    padding-top: 2px;
}

.lbp-panel-with-children .lbp-qtyButtons {
    display: flex;
    text-align: left;
    justify-content: center;
    align-items: center;
}

.lbp-qtyInput {
    font-family: "Open Sans", sans-serif;
    outline: 0;
    font-size: 20px;
    text-align: center;
    width: 50px !important;
    height: 36px !important;
    color: #333;
    line-height: 36px;
    margin: 0 !important;
    padding: 0 5px !important;
    border: none !important;
    box-shadow: none !important;
    pointer-events: none;
    display: inline-block;
    background: transparent !important;
    border-radius: 0 !important;
}

.lbp-qtyInc,
.lbp-qtyDec {
    width: 36px;
    height: 36px;
    line-height: 36px;
    font-size: 14px;
    background-color: #f2f2f2;
    -webkit-text-stroke: 1px #f2f2f2;
    color: #333;
    display: inline-block;
    text-align: center;
    border-radius: 50%;
    cursor: pointer;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

.lbp-qtyInc:before {
    content: "\f067";
}

.lbp-qtyDec:before {
    content: "\f068";
}

/* ============================================
   Bookable Services — matches Core's .bookable-services
   ============================================ */

.lbp-bookable-services {
    display: block;
    padding: 20px 0px;
}

/* Single service row — mirrors Core's `.bookable-services .single-service`.
   Selectors are prefixed with `.lbp-bookable-services` so they beat the
   modal's generic label resets without resorting to !important. */
.lbp-bookable-services .lbp-single-service {
    display: block;
    width: 100%;
    margin: 0 0 8px 0;
    overflow: hidden;
    position: relative;
    padding: 5px 20px 0px 20px
}

.lbp-bookable-services .lbp-single-service:last-child {
    margin-bottom: 0;
}

.lbp-bookable-services .lbp-single-service input[type="checkbox"].lbp-service-checkbox {
    display: none;
}

.lbp-bookable-services .lbp-single-service input[type="checkbox"] + label {
    transition: 0.3s;
    font-size: 14.7px;
    cursor: pointer;
    border-radius: 4px;
    background-color: #f8f8f8;
    color: #777;
    display: block;
    width: 100%;
    padding: 15px 70px 15px 15px;
    margin: 0;
    line-height: 24px;
    position: relative;
    box-sizing: border-box;
}

.lbp-bookable-services .lbp-single-service input[type="checkbox"] + label h5 {
    font-weight: 600;
    display: inline-block;
    padding: 0;
    margin: 0;
    line-height: 20px;
    color: #666;
    transition: 0.3s;
    text-align: left;
    max-width: 80%;
}

.lbp-bookable-services .lbp-single-service-price {
    font-weight: 500;
    font-size: 14px;
    color: #888;
    transition: 0.3s;
    line-height: 18px;
    display: inline-block;
    background-color: #eee;
    padding: 3px 8px;
    margin: 0;
    border-radius: 4px;
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    white-space: nowrap;
}

/* Hover */
.lbp-bookable-services .lbp-single-service:hover h5,
.lbp-bookable-services .lbp-single-service:hover .lbp-single-service-price {
    color: #f91942;
}

.lbp-bookable-services .lbp-single-service:hover .lbp-single-service-price {
    background-color: rgba(249, 25, 66, 0.08);
}

.lbp-bookable-services .lbp-single-service input[type="checkbox"] + label:hover {
    background-color: rgba(249, 25, 66, 0.08);
    color: #f91942;
}

/* Checked state */
.lbp-bookable-services .lbp-single-service input[type="checkbox"]:checked + label {
    background-color: #f91942;
    color: #fff;
}

.lbp-bookable-services .lbp-single-service input[type="checkbox"]:checked + label h5 {
    color: #fff;
}

.lbp-bookable-services .lbp-single-service input[type="checkbox"]:checked + label .lbp-single-service-price {
    background-color: #fff;
    color: #f91942;
}

/* Service quantity buttons — matches Core's .single-service .qtyButtons */
.lbp-service-qty-wrap {
    position: relative;
}

.lbp-svc-qtyButtons {
    background: #f8f8f8;
    height: auto;
    display: flex;
    align-items: center;
    text-align: left;
    padding: 15px;
    transition: 0.3s;
    border-radius: 0 0 4px 4px;
    margin-top: 0;
    border-top: 1px solid #eaeaea;
}

.lbp-svc-qtyInc,
.lbp-svc-qtyDec {
    width: 26px;
    height: 26px;
    line-height: 26px;
    font-size: 14px;
    background-color: #eee;
    -webkit-text-stroke: 1px #eee;
    color: #999;
    display: inline-block;
    text-align: center;
    border-radius: 3px;
    cursor: pointer;
    transition: 0.3s;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

.lbp-svc-qtyInc:before {
    content: "\f067";
}

.lbp-svc-qtyDec:before {
    content: "\f068";
}

.lbp-svc-qtyInc:hover,
.lbp-svc-qtyDec:hover {
    background-color: #f91942;
    -webkit-text-stroke: 1px #f91942;
    color: #fff;
}

.lbp-svc-qtyDec {
    margin-right: -2px;
    z-index: 2;
    border-radius: 3px 0 0 3px;
}

.lbp-svc-qtyInc {
    margin-left: -2px;
    border-radius: 0 3px 3px 0;
}

.lbp-svc-qtyInput {
    outline: 0;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    width: 32px !important;
    height: 26px !important;
    color: #333;
    line-height: 26px;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    pointer-events: none;
    display: inline-block;
    background: transparent !important;
    border-radius: 0 !important;
}

/* Qty buttons stay visible — matches Core's widget behavior, where the
   qty row is always interactive and adjusting it auto-checks the
   service. Previously hidden until checked, which differed from the
   regular widget UX the user wanted parity with. */
.lbp-single-service.lbp-with-qty .lbp-service-qty-wrap {
    display: block;
}

/* Connect the qty row visually with the label above by squaring the
   label's bottom corners on with-qty rows, regardless of checked state. */
.lbp-single-service.lbp-with-qty input[type="checkbox"] + label {
    border-radius: 4px 4px 0 0;
}

/* Price estimate */
.lbp-price-estimate {
    margin-top: 20px;
    padding: 14px 0px;
  
    
}

.lbp-price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 15px;
    font-weight: 600;
    color: #333;
}

.lbp-estimated-price {
    font-size: 18px;
    color: #333;
}

/* Itemized price breakdown above the estimated-total line.
   Airbnb-style two-line rows: title on top, dim sublabel below. */
.lbp-price-breakdown {
    list-style: none;
    padding: 0;
    margin: 0 0 14px;
}

.lbp-price-breakdown .lbp-breakdown-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
}

.lbp-price-breakdown .lbp-breakdown-line:last-child {
    border-bottom: none;
}

.lbp-price-breakdown .lbp-breakdown-line-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
}

.lbp-price-breakdown .lbp-breakdown-line-label,
.lbp-price-breakdown .lbp-breakdown-line-sublabel {
    display: block;
    text-align: left;
    width: 100%;
    color: #666;
    font-size: 12px;
    line-height: 1.4;
}

.lbp-price-breakdown .lbp-breakdown-line-label {
    font-weight: 600;
}

.lbp-price-breakdown .lbp-breakdown-line-sublabel {
    font-weight: 400;
}

.lbp-price-breakdown .lbp-breakdown-line-amount {
    color: #666;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

.lbp-price-breakdown .lbp-breakdown-line--discount .lbp-breakdown-line-amount,
.lbp-price-breakdown .lbp-breakdown-line--coupon .lbp-breakdown-line-amount {
    color: #2e7d32;
}

.lbp-price-breakdown .lbp-breakdown-line--adjustment .lbp-breakdown-line-label {
    font-style: italic;
}

/* ============================================
   Step 2: Info & Confirm
   ============================================ */

.lbp-info-form {
    display: flex;
    flex-direction: column;
    /* gap: 14px; */
    margin-bottom: 24px;
}

.lbp-form-row {
    display: flex;
    gap: 12px;
}

.lbp-form-row .lbp-field {
    flex: 1;
}

.lbp-form-row-full .lbp-field {
    flex: 1;
}

.lbp-info-form textarea {
    resize: vertical;
    min-height: 70px;
}

/* Confirm summary */
.lbp-confirm-summary {
    padding: 18px;
    background: #f8f9fa;

    margin-bottom: 20px;
}

.lbp-confirm-summary h4 {
    font-size: 14px;
    font-weight: 700;
    color: #333;
    margin: 0 0 14px;
}

.lbp-confirm-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lbp-confirm-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    padding: 4px 0;
}

.lbp-confirm-row-label {
    color: #666;
}

.lbp-confirm-row-value {
    font-weight: 600;
    color: #333;
}

.lbp-confirm-row.lbp-confirm-total {
    border-top: 1px solid #ddd;
    padding-top: 10px;
    margin-top: 4px;
}

.lbp-confirm-row.lbp-confirm-total .lbp-confirm-row-value {
    font-size: 18px;
    color: #333;
}

/* Error message */
.lbp-error-message {
    padding: 12px 16px;
    background: #fde8e8;
    border: 1px solid #f5c6cb;
    border-radius: 8px;
    color: #721c24;
    font-size: 14px;
    margin-bottom: 16px;
}

/* ============================================
   Step Actions (Bottom Buttons)
   ============================================ */

.lbp-step-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.lbp-btn-back {
    padding: 10px 20px !important;
    font-size: 14px !important;
    border-radius: 8px !important;
    background: #f0f0f0 !important;
    color: #555 !important;
    border: none !important;
    cursor: pointer;
    transition: background 0.2s ease;
}

.lbp-btn-back:hover {
    background: #e0e0e0 !important;
}

.lbp-btn-back i {
    margin-right: 6px;
}

.lbp-btn-next,
.lbp-btn-confirm {
    padding: 10px 24px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
  
    color: #fff !important;
    border: none !important;
    cursor: pointer;
    transition: all 0.2s ease;
}


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

.lbp-btn-next i {
    margin-left: 6px;
}

.lbp-btn-confirm i {
    margin-right: 6px;
}

.lbp-btn-confirm.loading {
    opacity: 0.7;
    pointer-events: none;
}

/* ============================================
   Loading Overlay
   ============================================ */

.lbp-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 100;
    border-radius: 0 12px 12px 0;
}

.lbp-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid #eee;
    border-top-color: #66676b;
    border-radius: 50%;
    animation: lbp-spin 0.7s linear infinite;
    margin-bottom: 12px;
}

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

.lbp-loading-overlay p {
    font-size: 14px;
    color: #666;
    margin: 0;
}

/* ============================================
   Magnific Popup Overrides
   ============================================ */

.mfp-bg.lbp-mfp-bg {
    background: rgba(0, 0, 0, 0.6);
}

.mfp-wrap .lbp-modal {
    opacity: 1;
}

/* Time picker loading */
.lbp-time-loading {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #888;
    font-size: 13px;
    padding: 10px 0;
}

.lbp-time-loading .lbp-mini-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid #eee;
    border-top-color: #66676b;
    border-radius: 50%;
    animation: lbp-spin 0.7s linear infinite;
}

/* ============================================
   Responsive
   ============================================ */

@media (max-width: 768px) {
    .lbp-modal {
        max-width: 100%;
        width: 100%;
        margin: 0;
        border-radius: 0;
        max-height: 100vh;
    }

    .lbp-modal-inner {
        flex-direction: column;
        max-height: 100vh;
    }

    .lbp-sidebar {
        width: 100%;
        min-width: 100%;
        padding: 14px 16px;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .lbp-sidebar-header {
        display: none;
    }

    .lbp-steps-nav {
        flex-direction: row;
        width: 100%;
        gap: 6px;
    }

    .lbp-step-indicator {
        flex: 1 1 0;
        min-width: 0;
        justify-content: flex-start;
        gap: 6px;
        padding: 6px 8px;
    }

    /* Keep the step labels visible on mobile — the bare numbers
       were too cryptic. Let long labels truncate per pill instead
       of pushing the row sideways. */
    .lbp-step-label {
        display: block;
        font-size: 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
    }

    .lbp-step-num {
        width: 22px;
        height: 22px;
        font-size: 11px;
    }

    /* Force the booking summary off on mobile. `LBP_Modal.goToStep()`
       inline-sets `display: block` via jQuery `.show()`, which beats a
       plain `display: none` rule from this stylesheet — `!important`
       is the only way to win consistently across step changes. */
    .lbp-summary {
        display: none !important;
    }

    .lbp-content {
        padding: 20px;
        overflow-y: auto;
        flex: 1;
    }

    .lbp-step-header h3 {
        font-size: 18px;
    }

    .lbp-form-row {
        flex-direction: column;
    }

    .lbp-date-range-wrap {
        flex-direction: column;
    }

    .lbp-loading-overlay {
        border-radius: 0;
    }
}

@media (max-width: 480px) {
    .lbp-resource-card {
        padding: 12px;
    }

    .lbp-resource-avatar {
        width: 42px;
        height: 42px;
    }

    .lbp-step-actions {
        flex-direction: column-reverse;
        gap: 10px;
    }

    .lbp-btn-back,
    .lbp-btn-next,
    .lbp-btn-confirm {
        width: 100%;
        text-align: center;
    }
}

/* ============================================
   Success / Confirmation View
   ============================================ */

/* Center the success view both axes inside the modal content area.
   The step container fills the available height (matching the modal's
   min-height — `.lbp-modal-inner` is 520px+, content area minus the
   30px padding) so flex-centering has something to push against. */
.lbp-step.lbp-step-success.active {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 460px;
}

.lbp-success-view {
    text-align: center;
    padding: 40px 20px;
    max-width: 480px;
    width: 100%;
}

.lbp-success-icon {
    margin-bottom: 20px;
}

.lbp-success-icon i {
    font-size: 64px;
    color: #4CAF50;
}

.lbp-success-icon.lbp-icon-waiting i {
    color: #FF9800;
}

.lbp-success-icon.lbp-icon-redirect i {
    color: #676767;
}

/* Force the redirect spinner to actually spin. The theme/Core stylesheets
 * load after FA6 and in some cascades override `animation-name: fa-spin`
 * on bare `<i>` elements inside popups, leaving the static glyph visible
 * but not animating. Bind to our own `lbp-spin` keyframes (defined
 * earlier in this file) with !important to take the rule out of the
 * cascade fight. `display: inline-block` and `transform-origin: center`
 * guarantee `transform: rotate()` has something to rotate around. */
.lbp-success-icon.lbp-icon-redirect i.fa-spin {
    display: inline-block;
    transform-origin: 50% 50%;
    animation: lbp-spin 1s linear infinite !important;
}

.lbp-success-title {
    font-size: 22px;
    margin: 0 0 8px;
}

.lbp-success-message {
    color: #666;
    font-size: 14px;
    margin: 0 0 25px;
}

.lbp-success-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.lbp-success-actions .button {
    min-width: 160px;
}

/* .lbp-btn-my-bookings {
    background-color: #4CAF50 !important;
    color: #fff !important;
    border: none !important;
} */

/* .lbp-btn-my-bookings:hover {
    opacity: 0.9;
    color: #fff !important;
} */

.lbp-btn-close-success {
    background: #f5f5f5 !important;
    color: #555 !important;
    border: 1px solid #ddd !important;
}

/* Booked state for the Book Now button */
.lbp-book-now-btn.lbp-booked {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ============================================
   Resources Listing Section (Single Listing Page)
   ============================================ */

.lbp-resources-listing {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Grid layout — opt-in via Listeo → Booking → Booking Plus settings.
   Switches the section from stacked rows to a 2-column card grid with
   the image stacked on top of the body. Mirrors how listings render in
   archive views. Each card flips its inner flex direction so the image
   becomes a banner and the book button drops below the meta. */
.lbp-resources-listing--grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}
.lbp-resources-listing--grid .lbp-resource-listing-card {
    flex-direction: column;
    overflow: hidden;
}
.lbp-resources-listing--grid .lbp-resource-listing-media {
    width: 100%;
    min-width: 0;
    height: 220px;
    align-self: stretch;
}
.lbp-resources-listing--grid .lbp-resource-listing-body {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
}
.lbp-resources-listing--grid .lbp-resource-listing-action {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.lbp-resources-listing--grid .lbp-book-resource-btn {
    flex: 0 0 auto;
}

@media (max-width: 768px) {
    .lbp-resources-listing--grid {
        grid-template-columns: 1fr;
    }
}

/* =====================================================================
   Resource cards — six-zone horizontal layout per the design.
   Zones (left to right): media · identity · tags · meta · availability ·
   price+CTA. Each zone collapses cleanly when its data is missing.
   ===================================================================== */

.lbp-resource-listing-card {
    display: flex;
    align-items: stretch;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.lbp-resource-listing-card:hover {
    border-color: #d8d8d8;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

/* Media — rectangular by design. Fixed aspect ratio (4:3) so the image
   doesn't stretch the card to its natural intrinsic height; the image
   crops to fit via `object-fit: cover`. Site owners can adjust the
   dimensions / ratio via CSS without touching the template. */
.lbp-resource-listing-media {
    width: 180px;
    min-width: 180px;
    aspect-ratio: 4 / 3;
    align-self: center;
    overflow: hidden;
    position: relative;
    background: #f4f4f4;
    border-radius: 10px;
    margin: 14px 0 14px 14px;
}
.lbp-resource-listing-media a {
    display: block;
    width: 100%;
    height: 100%;
}
.lbp-resource-listing-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.lbp-resource-listing-body {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    gap: 22px;
    min-width: 0;
}

.lbp-resource-listing-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

/* Zone 1: identity (name + subtitle). */
.lbp-resource-identity {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}
.lbp-resource-listing-card h3.lbp-resource-name {
    font-size: 17px;
    font-weight: 600;
    color: #2b2b2b;
    margin: 0;
    line-height: 1.25;
    letter-spacing: -0.005em;
}
.lbp-resource-listing-card h3.lbp-resource-name a {
    color: inherit;
    text-decoration: none;
    transition: color 0.15s ease;
}
.lbp-resource-listing-card h3.lbp-resource-name a:hover {
    color: #f43758;
}
.lbp-resource-subtitle {
    font-size: 13px;
    font-weight: 600;
    color: #7a7a7a;
}
.lbp-resource-subtitle::before {
    content: "·";
    margin-right: 6px;
    color: #c8c8c8;
}

/* Zone 2: tags (features). */
.lbp-resource-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.lbp-resource-tag {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 999px;
    background: #f4f4f4;
    color: #4a4a4a;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.4;
}

/* Zone 3: meta facts (icon + value + label). */
.lbp-resource-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}
.lbp-resource-fact {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    color: #4a4a4a;
}
.lbp-resource-fact i {
    font-size: 13px;
    color: #888;
}
.lbp-resource-fact-value {
    color: #2b2b2b;
    font-weight: 700;
}
.lbp-resource-fact-label {
    color: #888;
    font-weight: 500;
}

/* Zone 4: availability (colored dot + status). */
.lbp-resource-availability {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
}
.lbp-resource-availability-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    background: currentColor;
}
.lbp-resource-availability--good    { color: #1F9A55; }
.lbp-resource-availability--warn    { color: #C57500; }
.lbp-resource-availability--neutral { color: #7a7a7a; }

/* Right column: price (above) + CTA (below). */
.lbp-resource-listing-action {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}
.lbp-resource-price {
    text-align: right;
    white-space: nowrap;
}
.lbp-resource-price-from {
    display: block;
    font-size: 12px;
    color: #7a7a7a;
    font-weight: 700;
    margin-bottom: -5px;
}
.lbp-resource-price-amount {
    font-size: 20px;
    font-weight: 800;
    color: #2b2b2b;
    line-height: 1.1;
    letter-spacing: -0.01em;
}
.lbp-resource-price-unit {
    font-size: 12px;
    color: #7a7a7a;
    font-weight: 600;
    margin-left: 2px;
}
.lbp-book-resource-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    padding: 10px 18px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    border-radius: 999px !important;
    cursor: pointer;
    margin-right: 0px !important;
}
.lbp-book-resource-btn i {
    font-size: 13px;
}

/* Responsive: collapse to a vertical stack on narrow viewports so the
   right-column price + CTA don't squeeze the body content. */
@media (max-width: 720px) {
    .lbp-resource-listing-card {
        flex-direction: column;
    }
    .lbp-resource-listing-media {
        width: auto;
        min-width: 0;
        aspect-ratio: 16 / 9;
        margin: 14px 14px 0;
        align-self: stretch;
    }
    .lbp-resource-listing-body {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        padding: 16px;
    }
    .lbp-resource-listing-action {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }
    .lbp-book-resource-btn {
        flex: 0 0 auto;
    }
}

/* Bed Configuration Summary (Card) */
.lbp-beds-summary {
    margin-top: 6px;
    font-size: 13px;
    color: #555;
    line-height: 1.6;
    margin-bottom: 6px;
}

.lbp-bed-group-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
}

.lbp-bedroom-label {
    font-weight: 600;
    color: #333;
    margin-right: 4px;
}

.lbp-bed-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.lbp-bed-item i {
    font-size: 12px;
    color: #888;
}

.lbp-bed-separator {
    margin-right: 4px;
}

/* Bed Configuration Detail (Popup) */
.lbp-beds-detail {
    padding: 24px 0;
}

.lbp-beds-detail h4 {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.lbp-beds-detail h4 i {
    color: #888;
}

.lbp-bed-group-detail {
    margin-bottom: 10px;
}

.lbp-bed-group-detail strong {
    display: block;
    font-size: 14px;
    color: #444;
    margin-bottom: 4px;
}

.lbp-bed-group-detail ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.lbp-bed-group-detail li {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #555;
    padding: 2px 0;
}

.lbp-bed-group-detail li i {
    color: #888;
    width: 16px;
    text-align: center;
}

/* Instant booking meta badge */
.lbp-resource-meta-instant {
    color: #4CAF50;
}

.lbp-resource-meta-instant i {
    color: #4CAF50;
}

/* Picker card — wrapper that keeps availability dot and the instant-booking
 * chip side by side, wrapping on narrow widths. */
.lbp-resource-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
}

/* Picker card "Instant booking" chip — sits next to the availability
 * dot. Green to match the listing-page meta badge, low-contrast pill so
 * it doesn't compete with the availability label. */
.lbp-resource-instant {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1;
    color: #2e7d32;
    background: #e8f5e9;
    border-radius: 999px;
    padding: 4px 9px;
    white-space: nowrap;
    margin-top: 3px;
}

.lbp-resource-detail-popup .lbp-resource-instant {
    margin-top: 10px;
}

.lbp-resource-instant i {
    font-size: 11px;
    color: #2e7d32;
}

/* ============================================
   Resource Detail Popup (Magnific Popup)
   ============================================ */

.lbp-resource-detail-popup {
    position: relative;
    width: 100%;
    max-width: 1040px;
    /* Fix the popup's own height so the inner grid + flex chain can
       propagate it down to `.lbp-detail-body` for overflow-y: auto to
       actually scroll. Without an explicit height here, Magnific's
       inline-block wrapper lets the popup grow with content and the
       body never gets a constrained height. */
    height: min(680px, calc(100vh - 48px));
    margin: 24px auto;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 30px 80px -20px rgba(20,15,10,0.5), 0 4px 16px rgba(0,0,0,0.08);
}

.lbp-resource-detail-inner {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    height: 100%;
    min-height: 0; /* grid children inherit min-height: auto; allow shrink */
}

/* Magnific's default close button collides with our custom in-modal one.
   We provide our own (top-right of the content column) so hide theirs
   for this popup specifically — scoped via the `mainClass`. */
.lbp-detail-mfp .mfp-close,
.lbp-detail-mfp.mfp-bg + .mfp-wrap .mfp-close {
    display: none;
}

/* ─── Gallery (left) ─────────────────────────────────────────────── */

.lbp-detail-gallery {
    display: flex;
    flex-direction: column;
    background: #0d0d0d;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
}

.lbp-detail-gallery-main {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.lbp-detail-gallery-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.lbp-detail-gallery-image.is-active {
    opacity: 1;
}

.lbp-detail-gallery-counter {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(0,0,0,0.55);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    backdrop-filter: blur(8px);
    z-index: 2;
}
.lbp-detail-gallery-counter-sep {
    opacity: 0.5;
    margin: 0 3px;
}

.lbp-detail-gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.92);
    border: none;
    color: #000;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    z-index: 2;
    transition: background 0.15s ease;
}
.lbp-detail-gallery-nav:hover {
    background: #fff;
}
.lbp-detail-gallery-nav--prev { left: 12px; }
.lbp-detail-gallery-nav--next { right: 12px; }

.lbp-detail-gallery-dots {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 2;
}
.lbp-detail-gallery-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: rgba(255,255,255,0.5);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: width 0.15s ease, background 0.15s ease;
}
.lbp-detail-gallery-dot.is-active {
    width: 22px;
    background: #fff;
}

.lbp-detail-gallery-thumbs {
    display: flex;
    gap: 6px;
    padding: 10px 12px;
    overflow-x: auto;
    scrollbar-width: none;
    background: #0d0d0d;
    border-top: 1px solid #1a1a1a;
}
.lbp-detail-gallery-thumbs::-webkit-scrollbar { display: none; }
.lbp-detail-gallery-thumb {
    flex: 0 0 auto;
    width: 72px;
    height: 54px;
    padding: 0;
    border-radius: 6px;
    overflow: hidden;
    border: 2px solid transparent;
    background: transparent;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.12s ease, border-color 0.12s ease;
}
.lbp-detail-gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.lbp-detail-gallery-thumb.is-active {
    opacity: 1;
    border-color: #f43758;
}

/* ─── Content (right) ────────────────────────────────────────────── */

.lbp-detail-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0; /* allow flex children below to scroll inside fixed height */
    background: #fff;
    overflow: hidden;
}

.lbp-detail-topbar {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    padding: 14px 16px 0;
    flex-shrink: 0;
}
.lbp-detail-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #ececec;
    color: #7a7a7a;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.12s ease, border-color 0.12s ease;
}
.lbp-detail-close:hover {
    color: #2b2b2b;
    border-color: #d8d8d8;
}

.lbp-detail-body {
    flex: 1 1 auto;
    min-height: 0; /* required so overflow-y: auto kicks in inside flex parent */
    overflow-y: auto;
    padding: 8px 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.lbp-detail-header { display: block; }
.lbp-detail-eyebrow {
    font-size: 11px;
    font-weight: 800;
    color: #f43758;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 6px;
}
.lbp-resource-detail-popup h2.lbp-detail-name {
    margin: 0;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.015em;
    line-height: 1.15;
    color: #2b2b2b;
}
.lbp-detail-availability {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    font-size: 13px;
    font-weight: 700;
}

.lbp-detail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.lbp-detail-section-label {
    font-size: 11px;
    font-weight: 800;
    color: #7a7a7a;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
}

.lbp-detail-about {
    color: #4a4a4a;
    font-size: 13.5px;
    line-height: 1.6;
}
.lbp-detail-about p { margin: 0 0 10px; }
.lbp-detail-about p:last-child { margin-bottom: 0; }

.lbp-detail-facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.lbp-detail-fact {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #fafafa;
    border: 1px solid #f4f4f4;
}
.lbp-detail-fact-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #f43758;
    flex-shrink: 0;
    border: 1px solid #f4f4f4;
}
.lbp-detail-fact-icon i { font-size: 14px; }
.lbp-detail-fact-text { min-width: 0; }
.lbp-detail-fact-label {
    font-size: 11px;
    color: #7a7a7a;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
}
.lbp-detail-fact-value {
    font-size: 14px;
    font-weight: 700;
    color: #2b2b2b;
    line-height: 1.25;
    margin-top: 1px;
}

.lbp-detail-slots {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.lbp-detail-slot {
    padding: 7px 12px;
    border-radius: 8px;
    background: #fff;
    border: 1.5px solid #ececec;
    color: #2b2b2b;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.12s ease, background 0.12s ease;
}
.lbp-detail-slot:hover {
    border-color: #f43758;
    background: #fff5f8;
}

/* Sticky footer */
.lbp-detail-footer {
    flex-shrink: 0;
    padding: 14px 24px;
    border-top: 1px solid #f4f4f4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #fff;
}
.lbp-detail-price { white-space: nowrap; }
.lbp-detail-price-from {
    font-size: 10px;
    color: #7a7a7a;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    margin-bottom: 1px;
}
.lbp-detail-price-amount {
    font-size: 22px;
    font-weight: 800;
    line-height: 1.1;
    color: #2b2b2b;
}
.lbp-detail-price-unit {
    font-size: 13px;
    color: #7a7a7a;
    font-weight: 600;
}
.lbp-detail-cta {
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
    padding: 12px 22px !important;
    border-radius: 999px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
}

/* Responsive: stack the modal vertically below 720px, drop the gallery
   to a fixed-height banner above the content. */
@media (max-width: 720px) {
    .lbp-resource-detail-popup {
        max-width: 100%;
        margin: 0;
        border-radius: 0;
        min-height: 100vh;
    }
    .lbp-resource-detail-inner {
        grid-template-columns: 1fr;
        height: auto;
        max-height: none;
    }
    .lbp-detail-gallery-main { height: 280px; }
    .lbp-detail-facts { grid-template-columns: 1fr; }
    .lbp-detail-body { padding: 8px 18px 20px; }
    .lbp-detail-footer { padding: 12px 18px; }
}


label.label-lbp_recurrence {
    display: none;
}

/* ====================================================================
   DARK MODE
   --------------------------------------------------------------------
   Engaged when Listeo's "listeo_dark_mode" option is set to 'enable'
   (the theme adds `id="dark-mode"` to <body> in header.php). Scoped
   exclusively under `body#dark-mode` so light-mode sites are
   completely unaffected.

   Palette mirrors the theme's `css/dark-mode.css`:
     bg base       #202020
     bg surface    #262626
     bg raised     #2b2b2b
     bg field      #1f1f1f
     border        #3a3a3a / #444
     text primary  #e5e5e5
     text muted    #9a9a9a / #bbb
     accent        var(--lbp-popup-accent, #3b82f6) — preserved per-site

   Popup admin-configured background (`--lbp-popup-sidebar`) is
   honored as-is when set; only the fallback sidebar background flips
   to dark.
   ==================================================================== */

/* ── Popup chrome ─────────────────────────────────────────────────── */
body#dark-mode .lbp-modal {
    background: #1a1a1a;
    box-shadow: 0 20px 60px rgba( 0, 0, 0, 0.55 );
}

body#dark-mode .lbp-sidebar {
    background: var( --lbp-popup-sidebar, #262626 );
}

body#dark-mode .lbp-content {
    background: #1a1a1a;
    color: #d6d6d6;
}

body#dark-mode .lbp-modal-close {
    background: #2b2b2b;
    color: #ccc;
}
body#dark-mode .lbp-modal-close:hover {
    background: #383838;
    color: #fff;
}

body#dark-mode .lbp-step-header h3 {
    color: #f0f0f0;
}
body#dark-mode .lbp-step-desc,
body#dark-mode .lbp-resources-count,
body#dark-mode .lbp-time-loading {
    color: #9a9a9a;
}

/* ── Sidebar steps + summary ──────────────────────────────────────── */
body#dark-mode .lbp-step-indicator {
    color: rgba( 255, 255, 255, 0.7 );
}
body#dark-mode .lbp-step-num {
    background: rgba( 255, 255, 255, 0.12 );
}

body#dark-mode .lbp-summary {
    border-top-color: rgba( 255, 255, 255, 0.08 );
}
body#dark-mode .lbp-summary-label {
    color: rgba( 255, 255, 255, 0.55 );
}
body#dark-mode .lbp-summary-value {
    color: #f5f5f5;
}
body#dark-mode .lbp-summary-divider {
    background: rgba( 255, 255, 255, 0.08 );
}

/* ── Resource cards (in popup picker) ─────────────────────────────── */
body#dark-mode .lbp-resource-card {
    background: #262626;
    border-color: #3a3a3a;
}
body#dark-mode .lbp-resource-card:hover {
    border-color: #4a4a4a;
}
body#dark-mode .lbp-resource-card.selected {
    background: #2d2f37;
    box-shadow: 0 0 0 3px rgba( 80, 100, 160, 0.35 );
}
body#dark-mode .lbp-resource-info h4,
body#dark-mode .lbp-resource-card .lbp-resource-price-amount {
    color: #f0f0f0;
}
body#dark-mode .lbp-resource-info .lbp-resource-subtitle,
body#dark-mode .lbp-resource-card .lbp-resource-price-from,
body#dark-mode .lbp-resource-card .lbp-resource-price-unit {
    color: #9a9a9a;
}
body#dark-mode .lbp-resource-tag {
    background: #333;
    color: #ccc;
}
body#dark-mode .lbp-resource-check {
    background: #1a1a1a;
    border-color: #444;
}

/* ── Form inputs (datetime step + confirm step) ───────────────────── */
body#dark-mode .lbp-modal input[type="text"],
body#dark-mode .lbp-modal input[type="email"],
body#dark-mode .lbp-modal input[type="tel"],
body#dark-mode .lbp-modal input[type="number"],
body#dark-mode .lbp-modal input[type="date"],
body#dark-mode .lbp-modal input[type="url"],
body#dark-mode .lbp-modal textarea,
body#dark-mode .lbp-modal select {
    background-color: #1f1f1f;
    color: #e5e5e5;
    border-color: #3a3a3a;
}
body#dark-mode .lbp-modal input::placeholder,
body#dark-mode .lbp-modal textarea::placeholder {
    color: #6a6a6a;
}
body#dark-mode .lbp-modal input:focus,
body#dark-mode .lbp-modal textarea:focus,
body#dark-mode .lbp-modal select:focus {
    border-color: #5a5a5a;
}
body#dark-mode .lbp-field label {
    color: #d0d0d0;
}

/* Date / time picker fields keep the same input look. */
body#dark-mode .lbp-date-input,
body#dark-mode .lbp-time-input {
    background: #1f1f1f;
    color: #e5e5e5;
    border-color: #3a3a3a;
}

/* flatpickr calendar (mounted inside the modal) */
body#dark-mode .lbp-modal .flatpickr-calendar,
body#dark-mode .lbp-modal .flatpickr-months,
body#dark-mode .lbp-modal .flatpickr-weekdays,
body#dark-mode .lbp-modal .flatpickr-days,
body#dark-mode .lbp-modal .flatpickr-time {
    background: #262626;
    color: #e5e5e5;
    border-color: #3a3a3a;
}
body#dark-mode .lbp-modal .flatpickr-day {
    color: #ddd;
}
body#dark-mode .lbp-modal .flatpickr-day:hover {
    background: #353535;
    color: #fff;
}
body#dark-mode .lbp-modal .flatpickr-day.flatpickr-disabled,
body#dark-mode .lbp-modal .flatpickr-day.prevMonthDay,
body#dark-mode .lbp-modal .flatpickr-day.nextMonthDay {
    color: #555;
}
body#dark-mode .lbp-modal .flatpickr-time input,
body#dark-mode .lbp-modal .flatpickr-time .flatpickr-time-separator,
body#dark-mode .lbp-modal .flatpickr-time .flatpickr-am-pm {
    background: #262626;
    color: #e5e5e5;
}

/* daterangepicker (rentals) */
body#dark-mode .lbp-modal .daterangepicker {
    background: #262626;
    border-color: #3a3a3a;
    color: #e5e5e5;
}
body#dark-mode .lbp-modal .daterangepicker .calendar-table {
    background: #262626;
    border-color: #3a3a3a;
}
body#dark-mode .lbp-modal .daterangepicker td.available {
    color: #ddd;
}
body#dark-mode .lbp-modal .daterangepicker td.available:hover {
    background: #353535;
}
body#dark-mode .lbp-modal .daterangepicker td.in-range {
    background: rgba( 80, 100, 160, 0.18 );
    color: #f0f0f0;
}
body#dark-mode .lbp-modal .daterangepicker td.active,
body#dark-mode .lbp-modal .daterangepicker td.active:hover {
    background: var( --lbp-popup-accent, #3b82f6 );
    color: #fff;
}
body#dark-mode .lbp-modal .daterangepicker td.disabled {
    color: #555;
    background: transparent;
}

/* ── Time slots (single_day) ──────────────────────────────────────── */
body#dark-mode .lbp-modal .calendar-slot {
    background: #262626;
    color: #ddd;
    border-color: #3a3a3a;
}
body#dark-mode .lbp-modal .calendar-slot.calendar-slot-available:hover {
    background: #2f2f2f;
    border-color: #4a4a4a;
}
body#dark-mode .lbp-modal .calendar-slot.selected {
    color: #fff;
}
body#dark-mode .lbp-modal .calendar-slot-booked,
body#dark-mode .lbp-modal .calendar-slot.unavailable {
    background: #1d1d1d;
    color: #555;
    border-style: dashed;
}

/* Guests dropdown panel */
body#dark-mode .lbp-modal .lbp-panel-dropdown {
    background: #1f1f1f;
    border-color: #3a3a3a;
}
body#dark-mode .lbp-modal .lbp-panel-toggle {
    background-color: #1f1f1f;
    border-color: #3a3a3a;
    color: #ddd;
    box-shadow: none;
}
body#dark-mode .lbp-modal .lbp-panel-toggle:hover {
    color: #fff !important;
}
body#dark-mode .lbp-modal .lbp-panel-content {
    background: #262626;
    border-color: #3a3a3a;
    color: #e5e5e5;
}
body#dark-mode .lbp-modal .lbp-qty-plus,
body#dark-mode .lbp-modal .lbp-qty-minus {
    background: #2b2b2b;
    color: #e5e5e5;
    border-color: #3a3a3a;
}
body#dark-mode .lbp-modal .lbp-qty-plus:hover,
body#dark-mode .lbp-modal .lbp-qty-minus:hover {
    background: #383838;
}

/* ── Services list ────────────────────────────────────────────────── */
body#dark-mode .lbp-modal .lbp-single-service,
body#dark-mode .lbp-modal .lbp-services-section {
    background: transparent;
}
body#dark-mode .lbp-modal .lbp-single-service input[type="checkbox"] + label {
    background: #262626;
    border-color: #3a3a3a;
    color: #e5e5e5;
}
body#dark-mode .lbp-modal .lbp-single-service.lbp-svc-checked input[type="checkbox"] + label {
    background: #2d2f37;
    border-color: #4a4a4a;
}

/* ── Price summary + breakdown ────────────────────────────────────── */
body#dark-mode .lbp-modal .lbp-price-estimate {
    border-top-color: #3a3a3a;
}
body#dark-mode .lbp-modal .lbp-price-row {
    color: #e5e5e5;
}
body#dark-mode .lbp-modal .lbp-estimated-price {
    color: #f0f0f0;
}
body#dark-mode .lbp-modal .lbp-price-breakdown .lbp-breakdown-line {
    border-bottom-color: #2e2e2e;
}
body#dark-mode .lbp-modal .lbp-price-breakdown .lbp-breakdown-line-label,
body#dark-mode .lbp-modal .lbp-price-breakdown .lbp-breakdown-line-sublabel,
body#dark-mode .lbp-modal .lbp-price-breakdown .lbp-breakdown-line-amount {
    color: #aaa;
}

/* ── Confirm step custom-booking-fields ───────────────────────────── */
body#dark-mode .lbp-custom-booking-fields label {
    color: #d0d0d0;
}
body#dark-mode .lbp-custom-booking-fields input[type="text"],
body#dark-mode .lbp-custom-booking-fields input[type="email"],
body#dark-mode .lbp-custom-booking-fields input[type="tel"],
body#dark-mode .lbp-custom-booking-fields input[type="url"],
body#dark-mode .lbp-custom-booking-fields input[type="number"],
body#dark-mode .lbp-custom-booking-fields input[type="date"],
body#dark-mode .lbp-custom-booking-fields textarea,
body#dark-mode .lbp-custom-booking-fields select {
    background: #1f1f1f;
    color: #e5e5e5;
    border-color: #3a3a3a;
}

/* ── Extras / coupon panel + confirm summary ──────────────────────── */
body#dark-mode .lbp-modal .lbp-confirm-summary {
    background: #262626;
    border-color: #3a3a3a;
}
body#dark-mode .lbp-modal .lbp-confirm-summary h4 {
    color: #f0f0f0;
}
body#dark-mode .lbp-modal .lbp-confirm-row {
    color: #ddd;
}
body#dark-mode .lbp-modal .lbp-confirm-row-label {
    color: #999;
}

/* ── Buttons ──────────────────────────────────────────────────────── */
body#dark-mode .lbp-modal .lbp-step-actions {
    border-top-color: #2e2e2e;
}
body#dark-mode .lbp-modal .lbp-btn-back {
    background: #2b2b2b;
    color: #e5e5e5;
    border-color: #3a3a3a;
}
body#dark-mode .lbp-modal .lbp-btn-back:hover {
    background: #383838;
}
body#dark-mode .lbp-modal .lbp-btn-close-success {
    background: #2b2b2b !important;
    color: #ccc !important;
    border-color: #3a3a3a !important;
}

/* ── Success step ─────────────────────────────────────────────────── */
body#dark-mode .lbp-success-title {
    color: #f0f0f0;
}
body#dark-mode .lbp-success-message {
    color: #aaa;
}

/* ── Error / notice strips ────────────────────────────────────────── */
body#dark-mode .lbp-error-message {
    background: rgba( 200, 70, 70, 0.15 );
    color: #ffb5b5;
    border-color: rgba( 200, 70, 70, 0.4 );
}

/* ── Loading overlay ──────────────────────────────────────────────── */
body#dark-mode .lbp-loading-overlay {
    background: rgba( 20, 20, 20, 0.85 );
    color: #e5e5e5;
}

/* ── Resources on single listing page ─────────────────────────────── */
body#dark-mode .lbp-resource-listing-card {
    background: #262626;
    border-color: #3a3a3a;
    color: #d6d6d6;
}
body#dark-mode .lbp-resource-listing-card h3.lbp-resource-name {
    color: #f0f0f0;
}
body#dark-mode .lbp-resource-listing-card h3.lbp-resource-name a:hover {
    color: var( --lbp-popup-accent, #f43758 );
}
body#dark-mode .lbp-resource-subtitle {
    color: #9a9a9a;
}
body#dark-mode .lbp-resource-tag {
    background: #333;
    color: #ccc;
}

/* ── Booking estimated cost (Core widget breakdown reused in popup) ── */
body#dark-mode .booking-price-breakdown .booking-breakdown-line {
    border-bottom-color: #2e2e2e;
}
body#dark-mode .booking-price-breakdown .booking-breakdown-line-label,
body#dark-mode .booking-price-breakdown .booking-breakdown-line-sublabel,
body#dark-mode .booking-price-breakdown .booking-breakdown-line-amount {
    color: #aaa;
}

/* ── My Bookings — resources column / chips ──────────────────────── */
body#dark-mode .lbp-ops-list-box,
body#dark-mode .lbp-ops-row,
body#dark-mode .lbp-ops-card {
    background: #262626;
    border-color: #3a3a3a;
    color: #d6d6d6;
}
body#dark-mode .lbp-ops-card-title,
body#dark-mode .lbp-ops-row-title {
    color: #f0f0f0;
}
body#dark-mode .lbp-ops-chip {
    background: #333;
    color: #ddd;
    border-color: #444;
}
body#dark-mode .lbp-ops-summary-line {
    color: #9a9a9a;
}

/* ── Event ticket selector ────────────────────────────────────────── */
body#dark-mode .lbp-tt-card.qtyButtons {
    background: #262626;
    box-shadow: 0 1px 6px 0 rgba( 0, 0, 0, 0.4 );
}
body#dark-mode .lbp-tt-card .lbp-tt-name {
    color: #f0f0f0;
}
body#dark-mode .lbp-tt-card .lbp-tt-price,
body#dark-mode .lbp-tt-card .lbp-tt-desc {
    color: #aaa;
}