/**
 * CartBanner Component Styles
 * 
 * Unified styles for cart banner across all booking steps.
 * 
 * @package HotelMaster
 * @subpackage CartBanner
 * @since 2.0.0
 */

@import url('../css/event-booking-typography.css');

/* Default shape = rooms step (data-step="1", rooms-added-spec): an inset white card,
   kept only at mobile widths (#18691's in-flow anchor). Checkout steps (2/3) override
   this below to the full-bleed bar per fine-checkout.md; BS-5865 gives the rooms step
   the same full-bleed bar at desktop, further down. */
.cart-banner {
    position: fixed;
    bottom: 24px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: calc(100% - 160px);
    max-width: 1520px;
    z-index: 9999;
    background: var(--event-surface-primary-color, #1a1a1c);
    border: 1px solid var(--event-hairline-color, #3A3A4A);
    border-radius: 16px;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: var(--event-font-family, "DM Sans"), sans-serif;
}

/* Checkout steps (extras/checkout): full-bleed bar, no radius/shadow, blurred backdrop. */
#cart-banner[data-step="2"],
#cart-banner[data-step="3"] {
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: none;
    margin: 0;
    border: none;
    border-top: 1px solid var(--event-hairline-color, #3A3A4A);
    border-bottom: 1px solid var(--event-hairline-color, #3A3A4A);
    border-radius: 0;
    box-shadow: none;
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
}

.cart-banner__content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 32px;
    gap: 16px;
}

#cart-banner[data-step="2"] .cart-banner__content,
#cart-banner[data-step="3"] .cart-banner__content {
    padding: 16px 24px;
    gap: 32px;
}

/* BS-5865: desktop rooms step gets the same full-bleed bar as steps 2/3 above (same
   properties, mirrored here instead of merged into that selector list because the
   mobile anchor rules further down key off data-step="1" staying on the inset-card
   selector — merging would also flip it full-bleed on mobile). */
@media (min-width: 769px) {
    #cart-banner[data-step="1"] {
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-width: none;
        margin: 0;
        border: none;
        border-top: 1px solid var(--event-hairline-color, #3A3A4A);
        border-bottom: 1px solid var(--event-hairline-color, #3A3A4A);
        border-radius: 0;
        box-shadow: none;
        /* BS-5647: no backdrop blur here. The bar's surface token is opaque, so the blur
           had nothing to show, and Chromium composites a fixed blurred layer over the
           near-black public-booking footer as solid black in Light mode. */
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    #cart-banner[data-step="1"] .cart-banner__content {
        padding: 16px 24px;
        gap: 32px;
    }
}

.cart-banner__message {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--event-text-primary-color, #ffffff);
    font-weight: 500;
    flex-shrink: 0;
}

.cart-banner__icon {
    color: var(--event-primary-darkest-color, #4FF6B1);
    flex-shrink: 0;
}

.cart-banner__text {
    font-size: 16px;
    line-height: 1.5;
}

.cart-banner__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.cart-banner__btn {
    padding: 12px 24px;
    min-height: 48px;
    border: none;
    border-radius: var(--event-button-radius, 8px);
    font-family: var(--event-font-family, "DM Sans"), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    text-transform: capitalize;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

/* BS-5866: same global-v2.css `button:not(...)` reset (0,2,1) that beats
   .guest-item__fill-btn also beats this bare class; #cart-banner is the button's
   existing wrapper id, so scope through it to win outright. */
#cart-banner .cart-banner__btn {
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    flex-shrink: 0;
}

.cart-banner__btn--primary {
    background: var(--event-button-primary-bg, var(--event-cta-color, #4FF6B1));
    color: var(--event-button-primary-text, #0d0d0f);
}

.cart-banner__btn--primary:hover {
    background: color-mix(in srgb, var(--event-button-primary-bg, var(--event-cta-color, #4FF6B1)) 85%, #0a0a0a);
    color: var(--event-button-primary-text, #0d0d0f);
}

.cart-banner__btn--secondary {
    background: var(--event-surface-primary-color, transparent);
    color: var(--event-text-primary-color, #4FF6B1);
    border: 1px solid var(--event-surface-border-color, #4FF6B1);
}

.cart-banner__btn--secondary:hover {
    background: color-mix(in srgb, var(--event-surface-border-color, #4FF6B1) 12%, var(--event-surface-primary-color, transparent));
    border-color: var(--event-surface-border-color, #4FF6B1);
    color: var(--event-text-primary-color, #4FF6B1);
}

.cart-banner__btn--skip {
    background: var(--event-primary-color, #4323FF);
    color: var(--event-on-primary-color, var(--event-on-cta-color, #ffffff));
    border: 1px solid var(--event-primary-color, #4323FF);
}

.cart-banner__btn--skip:hover {
    background: color-mix(in srgb, var(--event-primary-color, #4323FF) 85%, #0a0a0a);
    border-color: color-mix(in srgb, var(--event-primary-color, #4323FF) 85%, #0a0a0a);
    transform: translateY(-1px);
}

.cart-banner__btn--disabled,
.cart-banner__btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}

.cart-banner__btn--disabled:hover,
.cart-banner__btn:disabled:hover {
    transform: none !important;
}

.cart-banner__btn .btn-icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 6px;
}

.cart-banner__close {
    background: transparent;
    border: none;
    color: var(--event-text-secondary-color, rgba(255, 255, 255, 0.7));
    cursor: pointer;
    padding: 8px;
    border-radius: 4px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cart-banner__close:hover {
    color: var(--event-text-primary-color, #ffffff);
    background: color-mix(in srgb, var(--event-text-primary-color, #ffffff) 10%, transparent);
}

.cart-banner--visible {
    transform: translateY(0);
    animation: cart-banner-slide-up 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.cart-banner--hidden {
    transform: translateY(100%);
    visibility: hidden;
}

@keyframes cart-banner-slide-up {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@media (max-width: 768px) {
    .cart-banner {
        width: calc(100% - 32px);
    }

    /* Lola (16 Sep, overriding the 15 Sep in-flow bar): the rooms-step actions stay sticky on
       mobile — the same full-bleed fixed bar checkout steps 2/3 use. */
    #cart-banner:not([data-step="2"]):not([data-step="3"]) {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-width: none;
        margin: 0;
        border: none;
        border-top: 1px solid var(--event-hairline-color, #3A3A4A);
        border-radius: 0;
        box-shadow: none;
    }

    .cart-banner--hidden:not([data-step="2"]):not([data-step="3"]) {
        display: none;
    }

    .cart-banner__content {
        padding: 16px;
    }

    .cart-banner__actions {
        flex-wrap: nowrap;
        width: 100%;
        gap: 8px;
    }

    .cart-banner__btn {
        padding: 12px 16px;
        flex: 1 1 0;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .cart-banner__message {
        display: none !important;
    }
}

@media (max-width: 480px) {
    .cart-banner__content {
        gap: 8px;
        padding: 12px 0; /* Figma m-rooms-added: the two buttons span the 358px card edge to edge */
    }
    
    .cart-banner__text {
        font-size: 13px;
    }
    
    .cart-banner__btn {
        padding: 10px 12px;
        font-size: 13px;
    }
}

/* The reserve for the fixed bar sits on <body>, i.e. below the footer, so the last footer
   line scrolls clear of the bar. On the content wrapper it left the footer itself under the
   bar at the true page bottom (BS-5865 regression pass, 19 Sep). */
body:has(.cart-banner--visible) {
    padding-bottom: 100px;
}

@media (max-width: 768px) {
    body:has(.cart-banner--visible) {
        padding-bottom: 140px;
    }
}

/* Lift the Freshchat / help-chat widget above the cart banner so it doesn't
   overlap Back / Skip / Next while the banner is visible. Both selectors are
   covered: #fc_frame (legacy Freshchat) and #freshworks-frame-wrapper (current
   Freshworks unified). The banner is ~84px on desktop and ~124px on mobile;
   the widget's default 16px clearance is preserved on top of that. */
body:has(.cart-banner--visible) #fc_frame,
body:has(.cart-banner--visible) #freshworks-frame-wrapper,
body:has(.cart-banner--visible) #freshworks-container {
    bottom: 100px !important;
    transition: bottom 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (max-width: 768px) {
    body:has(.cart-banner--visible) #fc_frame,
    body:has(.cart-banner--visible) #freshworks-frame-wrapper,
    body:has(.cart-banner--visible) #freshworks-container {
        bottom: 100px !important;
    }
}