/* Fixed size for Snipcart Modal */
.snipcart-modal__container {
    width: 60% !important; /* Keep modal width at 60% */
    max-width: 800px; /* Prevent it from getting too large */
    height: 60vh !important; /* Set fixed height (60% of screen height) */
    max-height: 80vh !important; /* Prevent full stretching */
    position: fixed !important;
    top: 0% !important;
    right: 1% !important; /* Stick to the right side with 1% margin */
    overflow-y: auto !important; /* Enable scrolling inside modal */
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    background: #fff;
    color: #000;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Ensures footer stays at the bottom */
    z-index: 999999;
}

/* Make the Modal Content Scrollable */
.snipcart-modal__content {
    flex: 1;
    overflow-y: auto !important;
    padding-bottom: 20px; /* Add space between content and footer */
}

/* Ensure the Footer is Visible and Properly Styled */
.snipcart-modal__footer {
    text-align: center !important;
    padding: 20px 0 !important; /* Add padding to the footer */
    background: #fff; /* Match modal background */
    border-top: 1px solid #e0e0e0; /* Add a subtle border */
    position: relative; /* Ensure it stays at the bottom */
    z-index: 1; /* Keep it above the content */
}

/* ✅ FIX: Center the Checkout Button */
.snipcart-button-primary {
    background-color: #007bff !important; /* Blue background */
    color: #fff !important;
    border: none !important;
    padding: 12px 24px  !important;
    margin-bottom: 30px;
    border-radius: 5px !important;
    font-size: 16px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    text-align: center;
    display: flex;
    width: auto !important; /* Allow it to size correctly */
    max-width: 200px !important; /* Prevent excessive width */
    position: relative !important; /* Keep it inside the modal */
    z-index: 9999999 !important;
}

/* Ensure Button Hover Effect Works */
.snipcart-button-primary:hover {
    background-color: #0056b3 !important;
}

@media screen and (max-width: 768px) {
    .snipcart-modal__container {
        width: 90% !important; /* Ensure it fits on mobile */
        height: 70vh !important; /* Set a reasonable height */
        right: 5% !important;
        display: flex;
        flex-direction: column;
    }

    /* Make the modal content scrollable */
    .snipcart-modal__content {
        flex: 1;
        overflow-y: auto !important; /* Allow scrolling */
        padding-bottom: 20px; /* Ensure space at the bottom */
    }

    /* ✅ Keep checkout button fixed at the bottom of the cart */
    .snipcart-modal__footer {
        position: relative !important;
        bottom: 0 !important;
        width: 100%;
        text-align: center;
        padding: 15px 0;
        background: #fff; /* Ensure it doesn't blend into the background */
        border-top: 1px solid #ddd; /* Add a slight separation */
    }

    /* ✅ Fix Checkout Button Positioning */
    .snipcart-button-primary {
        width: 80% !important; /* Keep button size reasonable */
        max-width: 250px !important; /* Prevent it from stretching */
        position: relative !important; /* No floating! */
        margin: 10px auto !important; /* Center inside modal */
        left: auto !important;
        transform: none !important;
    }
}