/* Cart Sidebar */
.cart-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    max-width: 400px;
    height: 100vh;
    background: white;
    z-index: 1040;
    transition: transform 0.3s ease-in-out;
    transform: translateX(100%);
    display: flex;
    flex-direction: column;
    visibility: hidden;
    font-family: var(--font-family-base);
}

/* Mobile-specific cart adjustments */
@media (max-width: 576px) {
    .cart-sidebar {
        width: 100%;
        max-width: 100%;
    }

    .cart-footer {
        max-width: 100%;
    }
}

@media (min-width: 577px) and (max-width: 768px) {
    .cart-sidebar {
        width: 90%;
        max-width: 350px;
    }

    .cart-footer {
        max-width: 350px;
    }
}

.cart-sidebar.open {
    transform: translateX(0);
    visibility: visible;
}

.cart-header {
    padding: 1.25rem;
    background: rgba(var(--bs-light-rgb), 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--bs-border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 5;
}

.cart-items {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem;
    padding-bottom: calc(1rem + 160px);
    background: var(--bs-white);
}

.cart-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    max-width: 400px;
    padding: 1.25rem;
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
    background: rgba(var(--bs-light-rgb), 0.95);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--bs-border-color);
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Cart Overlay */
.cart-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    z-index: 1035;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

.cart-overlay.show {
    opacity: 1;
    visibility: visible;
}


@keyframes slideInCenter {
    from {
        transform: translateX(-50%) translateY(-20px);
        opacity: 0;
    }

    to {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Mobile adjustments for Android navigation buttons */
@media (max-width: 768px) {
    .cart-footer {
        padding-bottom: max(2rem, env(safe-area-inset-bottom));
    }

    .cart-items {
        padding-bottom: calc(1rem + 180px);
    }
}

@media (max-width: 576px) {
    .cart-footer {
        padding-bottom: max(2.5rem, env(safe-area-inset-bottom));
        /* Fallback for devices that don't support safe-area-inset-bottom */
        padding-bottom: 2.5rem;
    }

    .cart-footer {
        padding-bottom: max(2.5rem, env(safe-area-inset-bottom));
    }

    .cart-items {
        padding-bottom: calc(1rem + 200px);
    }

    /* Additional spacing for Android phones with navigation buttons */
    .cart-footer button {
        margin-bottom: 0.5rem;
    }

}

/* Bootstrap Toast Customization for Auto-Width */
.toast {
    --bs-toast-max-width: auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: auto !important;
}

.toast .toast-body {
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    padding: 0.75rem 1rem;
    direction: rtl;
    text-align: center;
}

/* Mobile toast adjustments */
@media (max-width: 576px) {
    .toast {
        max-width: calc(100vw - 40px) !important;
    }

    .toast .toast-body {
        white-space: normal;
        padding: 0.6rem 0.8rem;
        font-size: 0.9rem;
    }
}