/**
 * Global Styles
 * 
 * Add your global CSS styles here
 * This file is automatically loaded via script-loader.php
 */

/* Example: Global utility classes */
/* SweetAlert2 custom styles - ensure toast appears above drawer (z-index 9999) */
.swal-custom-top-20 {
    margin-top: 50px !important;
    z-index: 10001 !important; /* Higher than drawer (9999) */
}

/* Also target the main SweetAlert2 container to ensure it's always on top */
.swal2-container {
    z-index: 10001 !important;
}

.swal2-title{
    padding-top:0px !important ;
}

/* Ensure SweetAlert2 popup is always visible at top */
.swal2-popup.swal-custom-top-20 {
    position: fixed !important;
    top: 20px !important;
    margin-top: 0 !important;
    padding-bottom: 20px !important;
}

.swal2-popup.swal-custom-top-20 .swal2-html-container {
    /* font-size: 12px !important; */
    font-weight: 600 !important;
}

@media (max-width: 1024px) {
    .swal2-container {
        display: flex !important;
        align-items: flex-start !important;
        justify-content: center !important;
        padding: 0 10px !important;
    }
    
    .swal2-popup.swal-custom-top-20 {
        left: 50% !important;
        transform: translateX(-50%) !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

@media (max-width: 768px) {
    .swal2-container {
        padding: 0 15px !important;
    }
    
    .swal2-popup.swal-custom-top-20 {
        left: 50% !important;
        transform: translateX(-50%) !important;
        right: auto !important;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .swal2-popup.swal-custom-top-20 {
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
}


@media (min-width: 1025px) {
    .swal2-popup.swal-custom-top-20 {
        left: 50% !important;
        transform: translateX(-50%) !important;
        right: auto !important;
    }
}

/* iOS (Safari / desktop mode) – keep toast centered */
@supports (-webkit-touch-callout: none) {
    .swal2-container {
        display: flex !important;
        align-items: flex-start !important;
        justify-content: center !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        padding: 0 15px !important;
    }

    .swal2-popup.swal-custom-top-20 {
        left: 50% !important;
        right: auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        transform: translateX(-50%) !important;
        -webkit-transform: translateX(-50%) !important;
    }
}

/* Add your global styles below */