/*
 * Beds24 Booking Plugin — booking-flow block styles.
 *
 * Consumes --beds24-* custom properties. Fallback defaults are defined on
 * the block root (.beds24-booking-flow) so the form is presentable on any
 * theme that has not populated the tokens.
 *
 * Specificity contract (see docs/styling-contract.md):
 *   - Single-class selectors throughout.
 *   - No !important.
 *   - No descendant-nesting specificity tricks.
 *   - Themes override via their own single-class rules or custom-property
 *     assignments on .beds24-booking-flow.
 */

/* ==========================================================================
   Token defaults
   Defined on the block root. Themes override by targeting .beds24-booking-flow
   and setting the same custom property names, or via theme.json tokens (V1.x).
   ========================================================================== */

.beds24-booking-flow {
    --beds24-color-primary:       #2563eb;
    --beds24-color-primary-text:  #ffffff;
    --beds24-color-accent:        #f59e0b;
    --beds24-color-surface:       #ffffff;
    --beds24-color-surface-text:  #1f2937;
    --beds24-color-surface-muted: #6b7280;
    --beds24-color-border:        #e5e7eb;
    --beds24-color-success:       #10b981;
    --beds24-color-unavailable:   #9ca3af;
    --beds24-color-error:         #dc2626;
    --beds24-color-error-bg:      #fef2f2;
    --beds24-color-error-border:  #fecaca;

    --beds24-space-xs: 0.25rem;
    --beds24-space-sm: 0.5rem;
    --beds24-space-md: 1rem;
    --beds24-space-lg: 1.5rem;
    --beds24-space-xl: 2rem;

    --beds24-border-radius:       0.5rem;
    --beds24-border-radius-small: 0.25rem;
    --beds24-shadow-card:         0 1px 3px rgba(0, 0, 0, 0.1);
    --beds24-shadow-floating:     0 -2px 8px rgba(0, 0, 0, 0.1);

    --beds24-font-family-body:    system-ui, -apple-system, sans-serif;
    --beds24-font-family-heading: system-ui, -apple-system, sans-serif;
    --beds24-font-size-base:      1rem;
    --beds24-font-size-small:     0.875rem;
    --beds24-font-weight-body:    400;
    --beds24-font-weight-heading: 600;
    --beds24-line-height-body:    1.5;
    --beds24-line-height-heading: 1.2;
}

/* ==========================================================================
   Search form — block container
   ========================================================================== */

.beds24-search-form {
    background-color: var(--beds24-color-surface);
    border:           1px solid var(--beds24-color-border);
    border-radius:    var(--beds24-border-radius);
    box-shadow:       var(--beds24-shadow-card);
    padding:          var(--beds24-space-lg);
    max-width:        760px;
    margin-left:      auto;
    margin-right:     auto;
    box-sizing:       border-box;
    font-family:      var(--beds24-font-family-body);
    font-size:        var(--beds24-font-size-base);
    font-weight:      var(--beds24-font-weight-body);
    line-height:      var(--beds24-line-height-body);
    color:            var(--beds24-color-surface-text);
}

/* ==========================================================================
   Minimum stay note
   ========================================================================== */

.beds24-search-form__min-stay {
    margin:     0 0 var(--beds24-space-md) 0;
    font-size:  var(--beds24-font-size-small);
    color:      var(--beds24-color-surface-muted);
    font-style: italic;
}

/* ==========================================================================
   Date fields row — side-by-side on desktop, stacked on mobile
   ========================================================================== */

.beds24-search-form__fields {
    display:       flex;
    gap:           var(--beds24-space-md);
    margin-bottom: var(--beds24-space-md);
}

.beds24-search-form__field-group {
    flex:           1;
    display:        flex;
    flex-direction: column;
    gap:            var(--beds24-space-xs);
}

/* ==========================================================================
   Labels
   ========================================================================== */

.beds24-search-form__label {
    display:     block;
    font-size:   var(--beds24-font-size-small);
    font-weight: var(--beds24-font-weight-heading);
    color:       var(--beds24-color-surface-muted);
}

/* ==========================================================================
   Date inputs
   ========================================================================== */

.beds24-search-form__check-in,
.beds24-search-form__check-out,
.beds24-search-form__adults {
    width:            100%;
    padding:          var(--beds24-space-sm) var(--beds24-space-md);
    border:           1px solid var(--beds24-color-border);
    border-radius:    var(--beds24-border-radius-small);
    font-family:      var(--beds24-font-family-body);
    font-size:        var(--beds24-font-size-base);
    color:            var(--beds24-color-surface-text);
    background-color: var(--beds24-color-surface);
    box-sizing:       border-box;
    /* Restore native date picker affordance in case a theme reset strips it. */
    -webkit-appearance: auto;
    appearance:         auto;
}

.beds24-search-form__check-in:focus,
.beds24-search-form__check-out:focus,
.beds24-search-form__adults:focus {
    outline:        2px solid var(--beds24-color-primary);
    outline-offset: 1px;
    border-color:   var(--beds24-color-primary);
}

/* ==========================================================================
   Error message region
   The HTML hidden attribute hides this element (display:none) when empty.
   JS removes the hidden attribute to reveal it, sets setAttribute('hidden')
   to re-hide it. No CSS class toggle needed.
   ========================================================================== */

.beds24-search-form__error {
    margin-bottom:    var(--beds24-space-sm);
    padding:          var(--beds24-space-sm) var(--beds24-space-md);
    background-color: var(--beds24-color-error-bg);
    border:           1px solid var(--beds24-color-error-border);
    border-radius:    var(--beds24-border-radius-small);
    color:            var(--beds24-color-error);
    font-size:        var(--beds24-font-size-small);
}

/* ==========================================================================
   Submit button
   ========================================================================== */

.beds24-search-form__submit {
    display:          block;
    width:            100%;
    padding:          var(--beds24-space-sm) var(--beds24-space-md);
    background-color: var(--beds24-color-primary);
    color:            var(--beds24-color-primary-text);
    border:           none;
    border-radius:    var(--beds24-border-radius);
    font-family:      var(--beds24-font-family-body);
    font-size:        var(--beds24-font-size-base);
    font-weight:      var(--beds24-font-weight-heading);
    line-height:      var(--beds24-line-height-body);
    cursor:           pointer;
    box-sizing:       border-box;
    text-align:       center;
}

.beds24-search-form__submit:hover {
    opacity: 0.88;
}

.beds24-search-form__submit:focus {
    outline:        2px solid var(--beds24-color-primary);
    outline-offset: 2px;
}

.beds24-search-form__submit:disabled {
    background-color: var(--beds24-color-unavailable);
    cursor:           not-allowed;
    opacity:          1;
}

.beds24-search-form__submit--loading {
    opacity: 0.7;
    cursor:  not-allowed;
}

/* ==========================================================================
   Mobile: stack date fields vertically at 767px
   Matches the predecessor mockup's mobile breakpoint convention.
   ========================================================================== */

@media (max-width: 767px) {
    .beds24-search-form__fields {
        flex-direction: column;
    }

    .beds24-room-results {
        padding-left:  var(--beds24-space-sm);
        padding-right: var(--beds24-space-sm);
    }
}

/* ==========================================================================
   Room results list
   Hidden by default (HTML hidden attribute). JS removes hidden after rendering.
   ========================================================================== */

.beds24-room-results {
    margin-top:     var(--beds24-space-lg);
    margin-left:    auto;
    margin-right:   auto;
    max-width:      760px;
    display:        flex;
    flex-direction: column;
    gap:            var(--beds24-space-md);
}

/* ==========================================================================
   Room card — beds24-room-card block
   ========================================================================== */

.beds24-room-card {
    background-color: var(--beds24-color-surface);
    border:           1px solid var(--beds24-color-border);
    border-radius:    var(--beds24-border-radius);
    box-shadow:       var(--beds24-shadow-card);
    overflow:         hidden;
    font-family:      var(--beds24-font-family-body);
    font-size:        var(--beds24-font-size-base);
    font-weight:      var(--beds24-font-weight-body);
    line-height:      var(--beds24-line-height-body);
    color:            var(--beds24-color-surface-text);
    transition:       box-shadow 0.2s ease;
}

.beds24-room-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   Room type indicator bar
   Sits flush at the top of the card (no border-radius, overflow:hidden on
   card clips it). First child of .beds24-room-card, before __name.
   ========================================================================== */

.beds24-room-card__type-bar {
    padding:    6px var(--beds24-space-md);
    font-size:  0.75rem;
    font-weight: 500;
    line-height: 1;
}

.beds24-room-card__type-bar--shared {
    background-color: #EAF3DE;
    color:            #3B6D11;
}

.beds24-room-card__type-bar--private {
    background-color: #E6F1FB;
    color:            #185FA5;
}

/* ==========================================================================
   Room name
   ========================================================================== */

.beds24-room-card__name {
    margin:      0;
    padding:     0.75rem var(--beds24-space-md) var(--beds24-space-xs);
    font-family: var(--beds24-font-family-heading);
    font-size:   1.125rem;
    font-weight: var(--beds24-font-weight-heading);
    line-height: var(--beds24-line-height-heading);
    color:       var(--beds24-color-surface-text);
}

/* ==========================================================================
   Card body — photo + description, side by side on desktop
   ========================================================================== */

.beds24-room-card__body {
    display:    flex;
    padding:    var(--beds24-space-sm) var(--beds24-space-md);
    gap:        var(--beds24-space-sm);
    box-sizing: border-box;
    align-items: flex-start;
}

/* Photo column */
.beds24-room-card__photo {
    flex-shrink: 0;
    width:       120px;
}

.beds24-room-card__photo img {
    display:       block;
    width:         120px;
    height:        90px;
    object-fit:    cover;
    border-radius: var(--beds24-border-radius-small);
}

/* Description column */
.beds24-room-card__content {
    flex:      1;
    min-width: 0;
}

.beds24-room-card__description {
    margin:                 0;
    font-size:              var(--beds24-font-size-small);
    line-height:            1.4;
    color:                  var(--beds24-color-surface-muted);
    display:                -webkit-box;
    -webkit-line-clamp:     2;
    -webkit-box-orient:     vertical;
    overflow:               hidden;
}

/* ==========================================================================
   Offer row — price or unavailable notice
   ========================================================================== */

.beds24-room-card__offer {
    display:          flex;
    align-items:      center;
    justify-content:  space-between;
    padding:          var(--beds24-space-sm) var(--beds24-space-md);
    border-top:       1px solid var(--beds24-color-border);
    background-color: var(--beds24-color-surface);
}

.beds24-room-card__price {
    margin:      0;
    font-weight: var(--beds24-font-weight-body);
    font-size:   var(--beds24-font-size-small);
    color:       var(--beds24-color-surface-muted);
}

.beds24-room-card__unavailable-notice {
    margin:    0;
    font-size: var(--beds24-font-size-small);
    color:     var(--beds24-color-unavailable);
}

/* ==========================================================================
   Unavailable state modifier
   ========================================================================== */

.beds24-room-card--unavailable {
    opacity: 0.7;
}

.beds24-room-card--unavailable .beds24-room-card__name {
    color: var(--beds24-color-surface-muted);
}

/* ==========================================================================
   Selected state modifier (card is in the cart)
   ========================================================================== */

.beds24-room-card--selected {
    border-color: var(--beds24-color-primary);
    box-shadow:   0 0 0 2px var(--beds24-color-primary), var(--beds24-shadow-card);
}

.beds24-room-card--selected:hover {
    box-shadow: 0 0 0 2px var(--beds24-color-primary), 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   Amenity chips
   Tags container is a direct child of .beds24-room-card (sibling of __body),
   rendered between __body and __offer. At desktop, left padding indents the
   chips to align under the description column:
     body padding-left (md=16px) + photo width (120px) + body gap (sm=8px) = 144px.
   At mobile, no indent — chips span the full card width.
   ========================================================================== */

.beds24-room-card__tags {
    display:      flex;
    flex-wrap:    wrap;
    gap:          6px;
    padding:      var(--beds24-space-xs) var(--beds24-space-md) var(--beds24-space-sm)
                  calc(var(--beds24-space-md) + 120px + var(--beds24-space-sm));
}

.beds24-room-card__tag {
    display:          inline-flex;
    align-items:      center;
    padding:          2px var(--beds24-space-sm);
    background-color: #f3f4f6;
    border:           1px solid var(--beds24-color-border);
    border-radius:    var(--beds24-border-radius-small);
    font-size:        0.75rem;
    font-weight:      500;
    color:            var(--beds24-color-surface-text);
    line-height:      1.4;
    white-space:      nowrap;
}

/* ==========================================================================
   Dorm quantity [−] [N] [+] control
   ========================================================================== */

.beds24-room-card__qty-control {
    display:     flex;
    align-items: center;
    gap:         var(--beds24-space-xs);
}

.beds24-room-card__qty-btn {
    display:          flex;
    align-items:      center;
    justify-content:  center;
    width:            28px;
    height:           28px;
    background-color: var(--beds24-color-surface);
    border:           1px solid var(--beds24-color-border);
    border-radius:    var(--beds24-border-radius-small);
    font-size:        1rem;
    line-height:      1;
    cursor:           pointer;
    color:            var(--beds24-color-surface-text);
    box-sizing:       border-box;
}

.beds24-room-card__qty-btn:hover:not(:disabled) {
    background-color: var(--beds24-color-border);
}

.beds24-room-card__qty-btn:disabled {
    opacity: 0.4;
    cursor:  not-allowed;
}

.beds24-room-card__qty-value {
    min-width:   1.5rem;
    text-align:  center;
    font-weight: var(--beds24-font-weight-heading);
    font-size:   var(--beds24-font-size-base);
    color:       var(--beds24-color-surface-text);
}

/* ==========================================================================
   Private room Add/Remove toggle button
   ========================================================================== */

.beds24-room-card__cart-btn {
    padding:          var(--beds24-space-xs) var(--beds24-space-sm);
    background-color: var(--beds24-color-primary);
    color:            var(--beds24-color-primary-text);
    border:           none;
    border-radius:    var(--beds24-border-radius-small);
    font-family:      var(--beds24-font-family-body);
    font-size:        var(--beds24-font-size-small);
    font-weight:      var(--beds24-font-weight-heading);
    cursor:           pointer;
    white-space:      nowrap;
    box-sizing:       border-box;
}

.beds24-room-card__cart-btn:hover {
    opacity: 0.88;
}

.beds24-room-card__cart-btn--in-cart {
    background-color: var(--beds24-color-surface);
    color:            var(--beds24-color-surface-muted);
    border:           1px solid var(--beds24-color-border);
}

.beds24-room-card__cart-btn--in-cart:hover {
    opacity: 1;
    background-color: var(--beds24-color-error-bg);
    border-color:     var(--beds24-color-error-border);
    color:            var(--beds24-color-error);
}

/* ==========================================================================
   Mobile: compact side-by-side layout at < 768px
   Photo stays beside description (compact 90px × 68px thumbnail).
   flex-direction stays row — no column override.
   Tags shift to a full-width row below the body, with no column indent.
   ========================================================================== */

@media (max-width: 767px) {
    /* Name: tighter padding on mobile. */
    .beds24-room-card__name {
        padding:   var(--beds24-space-sm) var(--beds24-space-sm) var(--beds24-space-xs);
        font-size: 1rem;
    }

    /* Body: keep flex row (no direction change); tighten all-round padding. */
    .beds24-room-card__body {
        padding: var(--beds24-space-sm);
    }

    /* Photo: compact thumbnail. */
    .beds24-room-card__photo {
        width: 90px;
    }

    .beds24-room-card__photo img {
        width:  90px;
        height: 68px;
    }

    /* Description: unclamp on mobile — let it wrap. */
    .beds24-room-card__description {
        display:            block;
        -webkit-line-clamp: unset;
        overflow:           visible;
        font-size:          0.75rem;
    }

    /* Tags: full-width row below body, no left-column indent. */
    .beds24-room-card__tags {
        padding: var(--beds24-space-xs) var(--beds24-space-sm) var(--beds24-space-sm);
    }

    /* Tag chips: slightly smaller text on mobile. */
    .beds24-room-card__tag {
        font-size: 0.6875rem;
        padding:   1px var(--beds24-space-xs);
    }
}

/* ==========================================================================
   Cart region — beds24-cart block
   Hidden (HTML hidden attribute) until at least one room is in the cart.
   ========================================================================== */

.beds24-cart {
    margin-top:       var(--beds24-space-lg);
    background-color: var(--beds24-color-surface);
    border:           1px solid var(--beds24-color-border);
    border-radius:    var(--beds24-border-radius);
    box-shadow:       var(--beds24-shadow-card);
    font-family:      var(--beds24-font-family-body);
    font-size:        var(--beds24-font-size-base);
    color:            var(--beds24-color-surface-text);
    overflow:         hidden;
}

.beds24-cart__heading {
    margin:      0;
    padding:     var(--beds24-space-md);
    font-family: var(--beds24-font-family-heading);
    font-size:   1.125rem;
    font-weight: var(--beds24-font-weight-heading);
    line-height: var(--beds24-line-height-heading);
    border-bottom: 1px solid var(--beds24-color-border);
}

.beds24-cart__list {
    list-style: none;
    margin:     0;
    padding:    0;
}

.beds24-cart__item {
    display:        flex;
    align-items:    center;
    gap:            var(--beds24-space-sm);
    padding:        var(--beds24-space-sm) var(--beds24-space-md);
    border-bottom:  1px solid var(--beds24-color-border);
}

.beds24-cart__item-name {
    flex:        1;
    min-width:   0;
    font-size:   var(--beds24-font-size-small);
    font-weight: var(--beds24-font-weight-heading);
    overflow:    hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.beds24-cart__item-detail {
    font-size: var(--beds24-font-size-small);
    color:     var(--beds24-color-surface-muted);
    white-space: nowrap;
}

.beds24-cart__item-total {
    font-size:   var(--beds24-font-size-small);
    font-weight: var(--beds24-font-weight-heading);
    white-space: nowrap;
}

.beds24-cart__footer {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    padding:         var(--beds24-space-md);
}

.beds24-cart__total-label {
    font-size: var(--beds24-font-size-small);
    color:     var(--beds24-color-surface-muted);
}

.beds24-cart__total {
    font-size:   1.125rem;
    font-weight: var(--beds24-font-weight-heading);
    color:       var(--beds24-color-surface-text);
}

/* ==========================================================================
   Cart confirm button area
   ========================================================================== */

.beds24-cart__actions {
    padding: 0 var(--beds24-space-md) var(--beds24-space-md);
}

.beds24-cart__confirm-button {
    display:          block;
    width:            100%;
    padding:          var(--beds24-space-sm) var(--beds24-space-md);
    background-color: var(--beds24-color-primary);
    color:            var(--beds24-color-primary-text);
    border:           none;
    border-radius:    var(--beds24-border-radius);
    font-family:      var(--beds24-font-family-body);
    font-size:        var(--beds24-font-size-base);
    font-weight:      var(--beds24-font-weight-heading);
    line-height:      var(--beds24-line-height-body);
    cursor:           pointer;
    box-sizing:       border-box;
    text-align:       center;
}

.beds24-cart__confirm-button:hover:not(:disabled) {
    opacity: 0.88;
}

.beds24-cart__confirm-button:focus:not(:disabled) {
    outline:        2px solid var(--beds24-color-primary);
    outline-offset: 2px;
}

.beds24-cart__confirm-button:disabled {
    background-color: var(--beds24-color-unavailable);
    cursor:           not-allowed;
    opacity:          1;
}

/* ==========================================================================
   [hidden] override

   Chrome's UA stylesheet applies [hidden] without !important, so any
   author display rule (e.g. display:flex on .beds24-cart in the desktop
   media query, display:flex on .beds24-room-results in the base rules)
   silently overrides it.  Firefox's UA stylesheet uses !important and is
   unaffected.  These rules re-establish the invariant: [hidden] always
   means display:none, regardless of what other display values are set.
   ========================================================================== */

.beds24-cart[hidden],
.beds24-room-results[hidden] {
    display: none !important;
}

/* ==========================================================================
   Beds24 booking iframe
   Revealed by JS after Confirm Booking is clicked.
   Height is fixed at 2200px — measured at 2006px with validation errors
   visible in Session 25; 2200px provides headroom for form state variation.
   ========================================================================== */

.beds24-booking-iframe-wrapper {
    margin-top: var(--beds24-space-lg);
}

/* Back-to-rooms navigation strip shown above the iframe. */
.beds24-booking-iframe-nav {
    padding-bottom: var(--beds24-space-sm);
}

.beds24-booking-iframe-nav__back {
    background:  none;
    border:      none;
    padding:     0;
    color:       var(--beds24-color-primary);
    font-family: var(--beds24-font-family-body);
    font-size:   var(--beds24-font-size-small);
    font-weight: var(--beds24-font-weight-heading);
    cursor:      pointer;
}

.beds24-booking-iframe-nav__back:hover {
    text-decoration: underline;
}

.beds24-booking-iframe {
    display:    block;
    width:      100%;
    height:     2200px;
    border:     none;
}

/* ==========================================================================
   Cart item remove button
   Clearly tappable circular × pill. Visible on every cart item in both
   the inline (mobile) and sticky-bar (desktop) cart layouts. Sized to
   read as an explicit remove action rather than a subtle edge character.
   ========================================================================== */

.beds24-cart__item-remove {
    flex-shrink:      0;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    width:            22px;
    height:           22px;
    background-color: var(--beds24-color-border);
    border:           1px solid transparent;
    border-radius:    50%;
    padding:          0;
    cursor:           pointer;
    font-size:        0.875rem;
    line-height:      1;
    color:            var(--beds24-color-surface-muted);
    font-family:      var(--beds24-font-family-body);
}

.beds24-cart__item-remove:hover {
    background-color: var(--beds24-color-error-bg);
    border-color:     var(--beds24-color-error-border);
    color:            var(--beds24-color-error);
}

/* ==========================================================================
   Mobile cart backdrop
   Semi-transparent overlay shown behind the slide-up drawer.
   z-index: 999 so it sits below the cart bar (z-index: 1000).
   Never shown at desktop (suppressed via media query).
   ========================================================================== */

.beds24-cart-backdrop {
    position:   fixed;
    inset:      0;
    background: rgba(0, 0, 0, 0.4);
    z-index:    999;
}

@media (min-width: 768px) {
    .beds24-cart-backdrop {
        display: none !important;
    }
}

/* ==========================================================================
   Mobile cart — bottom bar + slide-up drawer (< 768px)

   The cart becomes a fixed viewport-bottom bar.  DOM order inside .beds24-cart:
     1. .beds24-cart__drawer  — collapsible section (heading + list + footer)
     2. .beds24-cart__mobile-bar — always-visible row (toggle + confirm button)

   With flex-direction: column and position: fixed; bottom: 0, the cart grows
   upward as the drawer expands.  The bar is always at the bottom; the drawer
   appears above it.

   JS controls .beds24-cart--drawer-open on the cart root.
   JS adds padding-bottom to document.body equal to the mobile bar height so
   no page content is hidden behind the fixed bar.
   ========================================================================== */

@media (max-width: 767px) {
    .beds24-cart {
        position:         fixed;
        bottom:           0;
        left:             0;
        right:            0;
        z-index:          1000;
        display:          flex;
        flex-direction:   column;
        margin-top:       0;
        border-radius:    0;
        border:           none;
        border-top:       1px solid var(--beds24-color-border);
        box-shadow:       var(--beds24-shadow-floating);
        overflow:         hidden;
    }

    /* Drawer: collapsible section above the bar. */
    .beds24-cart__drawer {
        display:    block;
        max-height: 0;
        overflow:   hidden;
        transition: max-height 0.3s ease;
    }

    /* Drawer open state: cap at 60vh so the bar remains visible on tall content. */
    .beds24-cart--drawer-open .beds24-cart__drawer {
        max-height:  60vh;
        overflow-y:  auto;
        border-bottom: 1px solid var(--beds24-color-border);
    }

    /* Heading visible inside the drawer. */
    .beds24-cart__heading {
        display:     block;
        border-bottom: 1px solid var(--beds24-color-border);
    }

    /* Footer inside the drawer — standard row layout. */
    .beds24-cart__footer {
        display:         flex;
        flex-direction:  row;
        justify-content: space-between;
        align-items:     center;
        padding:         var(--beds24-space-sm) var(--beds24-space-md);
        border-top:      none;
    }

    /* Items: restore full-width stack in the drawer. */
    .beds24-cart__list {
        display:        block;
        padding:        0;
        margin:         0;
    }

    .beds24-cart__item {
        display:         flex;
        border:          none;
        border-radius:   0;
        border-bottom:   1px solid var(--beds24-color-border);
        background:      none;
        padding:         var(--beds24-space-sm) var(--beds24-space-md);
    }

    .beds24-cart__item-name {
        white-space: nowrap;
        overflow:    hidden;
        flex:        1;
    }

    /* Show per-item total in the drawer. */
    .beds24-cart__item-total {
        display: inline;
    }

    /* Remove button: larger touch target in the drawer. */
    .beds24-cart__item-remove {
        width:  36px;
        height: 36px;
    }

    /* Mobile bar: always-visible row. */
    .beds24-cart__mobile-bar {
        display:     flex;
        align-items: center;
        min-height:  56px;
        padding:     0 var(--beds24-space-md);
        gap:         var(--beds24-space-sm);
        flex-shrink: 0;
    }

    /* Toggle button: takes the left side of the bar (flex-1). */
    .beds24-cart__mobile-toggle {
        display:     flex;
        align-items: center;
        gap:         var(--beds24-space-xs);
        flex:        1;
        min-width:   0;
        min-height:  44px; /* WCAG 2.1 touch target minimum */
        background:  none;
        border:      none;
        padding:     0;
        text-align:  left;
        cursor:      pointer;
        font-family: var(--beds24-font-family-body);
        font-size:   var(--beds24-font-size-small);
        color:       var(--beds24-color-surface-text);
    }

    .beds24-cart__mobile-summary {
        flex:        1;
        min-width:   0;
        overflow:    hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-weight: var(--beds24-font-weight-heading);
        font-size:   var(--beds24-font-size-small);
    }

    /* Chevron: rotates 180° when drawer is open. */
    .beds24-cart__mobile-chevron {
        display:    inline-block;
        flex-shrink: 0;
        font-size:  0.5rem;
        line-height: 1;
        transition: transform 0.3s ease;
    }

    .beds24-cart--drawer-open .beds24-cart__mobile-chevron {
        transform: rotate(180deg);
    }

    /* Actions: confirm button at the right of the bar. */
    .beds24-cart__actions {
        flex-shrink: 0;
        padding:     0;
    }

    .beds24-cart__confirm-button {
        width:       auto;
        white-space: nowrap;
        padding:     var(--beds24-space-xs) var(--beds24-space-sm);
        font-size:   var(--beds24-font-size-small);
    }
}

/* ==========================================================================
   Sticky footer bar — desktop and tablet (≥768px)

   The cart region becomes a full-width bar fixed to the viewport bottom
   whenever it has items.  The mobile bar and drawer wrappers are made
   transparent (display:contents) so the heading, list, footer, and actions
   participate in the flex row as if they were direct children.

   No BEM modifier is used: the sticky layout IS the only desktop cart layout
   in V1.  The media query distinguishes desktop from mobile naturally.

   JS adds padding-bottom to document.body equal to the bar height plus a
   16px buffer so no page content (including the site footer) is hidden
   behind the bar.
   ========================================================================== */

@media (min-width: 768px) {
    .beds24-cart {
        position:       fixed;
        bottom:         0;
        left:           0;
        right:          0;
        z-index:        1000;
        display:        flex;
        flex-direction: row;
        align-items:    center;
        gap:            var(--beds24-space-md);
        padding:        var(--beds24-space-sm) var(--beds24-space-md);
        margin-top:     0;
        border-radius:  0;
        border:         none;
        border-top:     1px solid var(--beds24-color-border);
        box-shadow:     var(--beds24-shadow-floating);
        overflow:       visible;
    }

    /*
     * Make the drawer and mobile-bar wrappers transparent to the flex layout.
     * Their children participate as direct flex items in the desktop bar row.
     * display:contents removes the wrapper from the layout box tree while
     * keeping children fully accessible in the accessibility tree.
     */
    .beds24-cart__drawer {
        display: contents;
    }

    .beds24-cart__mobile-bar {
        display: contents;
    }

    /* Summary toggle: not needed at desktop — the full item list is inline. */
    .beds24-cart__mobile-toggle {
        display: none;
    }

    /* Heading is not needed in the compact desktop bar. */
    .beds24-cart__heading {
        display: none;
    }

    /* Items list: horizontal scrolling row of compact chips. */
    .beds24-cart__list {
        display:        flex;
        flex-direction: row;
        flex-wrap:      nowrap;
        gap:            var(--beds24-space-sm);
        align-items:    center;
        flex:           1;
        min-width:      0;
        overflow-x:     auto;
        padding:        0;
        margin:         0;
    }

    /* Each item becomes a compact bordered chip. */
    .beds24-cart__item {
        display:          inline-flex;
        align-items:      center;
        gap:              var(--beds24-space-xs);
        flex-shrink:      0;
        padding:          var(--beds24-space-xs) var(--beds24-space-sm);
        border:           1px solid var(--beds24-color-border);
        border-radius:    var(--beds24-border-radius-small);
        background-color: var(--beds24-color-surface);
    }

    /* Name: no truncation inside the scrollable chip area. */
    .beds24-cart__item-name {
        overflow:    visible;
        white-space: nowrap;
        flex:        none;
    }

    /* Per-item total is redundant — the running total is shown in the footer. */
    .beds24-cart__item-total {
        display: none;
    }

    /* Footer column: total label + value, stacked, right-aligned. */
    .beds24-cart__footer {
        flex-shrink:     0;
        display:         flex;
        flex-direction:  column;
        align-items:     flex-end;
        justify-content: center;
        padding:         0;
        border-top:      none;
    }

    /* Actions column: confirm button, auto-width (not full-width in the bar). */
    .beds24-cart__actions {
        flex-shrink: 0;
        padding:     0;
    }

    .beds24-cart__confirm-button {
        width:       auto;
        white-space: nowrap;
    }
}