/* ──────────── BASKET SIDEBAR ────────────
 * Global basket overlay rendered once in layout.html via
 * _basket_sidebar.twig. Loaded on every page so the navbar's
 * cart pill can open it from anywhere.
 *
 *  - frosted glass card pinned to the top-right
 *  - GTA Art Deco font throughout
 *  - each item: name + dark X button, then a red LEFT-border accent
 *    holding "Price" label and the red price+icon
 *  - solid 2px white-15% divider between items
 *  - white radial-gradient "Go to checkout" CTA at the bottom
 * ───────────────────────────────────────── */
.basket-overlay {
    position: fixed; inset: 0;
    z-index: 250;
    pointer-events: none;
}
.basket-overlay.open { pointer-events: all; }
.basket-backdrop {
    position: absolute; inset: 0;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: opacity 0.25s;
}
.basket-overlay.open .basket-backdrop { opacity: 1; }

.basket-sidebar {
    position: absolute;
    right: 32px;
    /* Sits below the navbar; both shift down by --announce-h
     * (set on :root in layout.html) when the announcement bar is on. */
    top: calc(var(--announce-h, 0px) + 113px);
    width: 519px;
    max-height: calc(100vh - 130px);
    overflow-y: auto;
    padding: 24px;
    border-radius: 8px;
    background: rgba(15, 18, 27, 0.55);
    outline: 2px solid rgba(255, 255, 255, 0.05);
    outline-offset: -2px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex; flex-direction: column; gap: 32px;
    transform: translateX(calc(100% + 40px));
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    font-family: "GTA Art Deco", sans-serif;
}
.basket-overlay.open .basket-sidebar { transform: translateX(0); }

/* ── header ── */
.basket-header {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
}
.basket-title-row {
    display: flex; align-items: flex-start; gap: 12px;
    flex: 1; min-width: 0;
}
.basket-cart-icon {
    width: 33px; height: 33px;
    flex-shrink: 0;
    color: #FA4039;
    display: inline-flex; align-items: center; justify-content: center;
}
.basket-cart-icon svg { width: 100%; height: 100%; }
.basket-cart-icon-img,
.basket-cart-icon img {
    width: 100%; height: 100%;
    object-fit: contain;
    display: block;
}
.basket-title { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.basket-title h3 {
    font-family: "GTA Art Deco", sans-serif;
    font-weight: 500;
    font-size: 24px;
    color: #fff;
    line-height: 1;
    margin: 0;
}
.basket-title p {
    font-family: "GTA Art Deco", sans-serif;
    font-weight: 400;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.45);
    line-height: 1.35;
    margin: 0;
}
.basket-count {
    flex-shrink: 0;
    background: rgba(250, 64, 57, 0.14);
    border-radius: 2.87px;
    padding: 3.83px 5.74px;
    display: flex; align-items: center; gap: 3.83px;
}
.basket-count-num {
    font-family: "GTA Art Deco", sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #FA4039;
    line-height: 1;
}
.basket-count-lbl {
    font-family: "GTA Art Deco", sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #FA4039;
    line-height: 1;
}

/* ── items list ── */
.basket-items { display: flex; flex-direction: column; gap: 12px; }
.basket-empty {
    padding: 24px 0;
    text-align: center;
    font-family: "GTA Art Deco", sans-serif;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.45);
}

.basket-item { display: flex; flex-direction: column; gap: 12px; }
.basket-item-body { display: flex; flex-direction: column; gap: 14px; }

.basket-item-row {
    display: flex; justify-content: space-between; align-items: center; gap: 8px;
}
.basket-item-name {
    flex: 1; min-width: 0;
    /* Now an <a> linking to the package page — strip default link
     * styling and tint red on hover so the click affordance is
     * obvious. */
    text-decoration: none;
    transition: color 0.15s ease;
    font-family: "GTA Art Deco", sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 22.98px;
    color: #fff;
}
.basket-item-name:hover {
    color: #FA4039;
}
.basket-remove {
    width: 32px; height: 32px;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.10);
    border-radius: 3.83px;
    border: none;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    color: #fff;
    padding: 0;
    transition: background 0.15s;
}
.basket-remove:hover { background: rgba(255, 255, 255, 0.18); }
.basket-remove svg,
.basket-remove .basket-remove-icon { width: 14px; height: 14px; object-fit: contain; display: block; }

/* the red LEFT vertical line + price block */
.basket-price-block {
    align-self: flex-start;
    padding: 0 13.4px;
    border-left: 1.67px solid #FA4039;
    display: flex; flex-direction: column;
}
.basket-price-label {
    font-family: "GTA Art Deco", sans-serif;
    font-weight: 400;
    font-size: 13.4px;
    line-height: 23.44px;
    color: rgba(255, 255, 255, 0.55);
}
.basket-price-value {
    display: inline-flex; align-items: center; gap: 8.37px;
    color: #FA4039;
}
.basket-price-value svg,
.basket-price-value .basket-price-icon { width: 17px; height: 17px; object-fit: contain; flex-shrink: 0; }
.basket-price-value span {
    font-family: "GTA Art Deco", sans-serif;
    font-weight: 500;
    font-size: 21.77px;
    line-height: 23.44px;
    color: #FA4039;
}

/* full-width divider rendered as its own element between basket items */
.basket-divider {
    width: 100%;
    height: 0;
    border-top: 3px dashed rgba(255, 255, 255, 0.15);
}

/* ── checkout CTA ── */
.basket-checkout-btn {
    width: 100%; height: 52px;
    border-radius: 12px;
    background: radial-gradient(ellipse 77.46% 320.85% at 50% 50%, #E1E1E1 0%, #FFFFFF 100%);
    display: flex; align-items: center; justify-content: center; gap: 8px;
    font-family: "GTA Art Deco", sans-serif;
    font-weight: 500;
    font-size: 18px;
    color: rgba(0, 0, 0, 0.75);
    border: none;
    text-decoration: none;
    cursor: pointer;
    transition: filter 0.15s;
}
.basket-checkout-btn:hover { filter: brightness(0.97); }

@media (max-width: 760px) {
    .basket-sidebar {
        right: 16px; left: 16px;
        width: auto;
        top: 96px;
    }
}