/* events/content's ticket section: no <aside>, so the cart footer bar is the only way to
   reach the cart -- always visible when there are items, not just under ticket.css's own
   768px mobile breakpoint, and with two buttons (View cart / Continue to checkout) instead
   of the single alternating one used on the standalone ticket page. */
.ticket-cart-footer-bar:not([hidden]) {
    display: flex;
}

.ticket-cart-footer-actions {
    display: flex;
    gap: 8px;
}

/* ticket/cart drawers: room below their content for the fixed cart footer bar */
body:has(#ticket-cart-footer-bar:not([hidden])) {
    --cart-footer-clearance: 112px;
}

body:has(#ticket-cart-footer-bar:not([hidden])) :is(#ticket-drawer, #cart-drawer):not(:has(> drawer-footer)) {
    --drawer-body-padding: 20px 20px var(--cart-footer-clearance);
}

body:has(#ticket-cart-footer-bar:not([hidden])) :is(#ticket-drawer, #cart-drawer) > drawer-footer {
    margin-bottom: var(--cart-footer-clearance);
}

/* search-bar-component's own :host has max-width:800px, which caps it below the ticket cards'
   width even with the `block` attribute (that only sets width:100%, not max-width). */
#ticket-search {
    max-width: 72rem;
}

/* Desktop only -- single row capped at the same 72rem/centered width as #navigation-section
   above (max-width-4), buttons pushed right, total/price emphasized. Mobile (<=768px, same
   breakpoint as ticket.css) keeps the stacked layout/sizing used on the standalone page. */
@media (min-width: 769px) {
    body:has(#ticket-cart-footer-bar:not([hidden])) {
        --cart-footer-clearance: 80px;
    }

    .ticket-cart-footer-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        max-width: 72rem;
        margin: 0 auto;
    }

    .ticket-cart-footer-total {
        display: flex;
        align-items: center;
        gap: 16px;
        font-size: 18px;
        font-weight: 600;
    }

    #ticket-cart-footer-total-amount {
        color: #038580;
    }

    .ticket-cart-footer-actions {
        margin-left: auto;
    }

    /* Desktop here means the cart-drawer (see ticket-content-section.js), which already frames
       itself -- same reasoning as ticket.css's own mobile bottom-sheet override. */
    #cart-recap-panel {
        border: none;
        border-radius: 0;
    }
}