/* 
 * ============================================================================
 * PLUGIN NAME:       WC Stores Checkout Enterprise Pro
 * FILE PATH:         /assets/css/wcs-checkout.css
 * VERSION:           5.6.0
 * DESCRIPTION:       Global Checkout Styles, Animations, and PromptPay Modal.
 * ============================================================================
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;800&display=swap');

/* ==========================================================================
   1. WOOCOMMERCE GLOBAL RESETS & OVERLAYS
   ========================================================================== */
.woocommerce form .blockUI.blockOverlay::before,
.woocommerce .blockUI.blockOverlay::before {
    display: none !important;
    background: none !important;
    animation: none !important;
}

.woocommerce .blockUI.blockOverlay {
    background: rgba(255, 255, 255, 0.3) !important;
    opacity: 1 !important;
    backdrop-filter: none !important;
}

.template-dark-mode-pro .woocommerce .blockUI.blockOverlay,
.template-stealth-black .woocommerce .blockUI.blockOverlay {
    background: rgba(15, 23, 42, 0.4) !important;
}

/* ==========================================================================
   2. THE CONTINUOUS TOP LOADING BAR
   ========================================================================== */
#wcs-top-loading-bar {
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 4px;
    background: linear-gradient(90deg, #10B981, #3B82F6, #F59E0B, #EF4444, #10B981);
    background-size: 400% 100%; 
    animation: wcs-color-bar 1.5s linear infinite;
    z-index: 99999999; 
    opacity: 0; 
    visibility: hidden; 
    transition: opacity 0.3s ease;
}

body.wcs-is-updating #wcs-top-loading-bar { 
    opacity: 1; 
    visibility: visible; 
}

@keyframes wcs-color-bar { 
    0% { background-position: 100% 0; } 
    100% { background-position: 0 0; } 
}

/* ==========================================================================
   3. SELECT2 DROPDOWN FIXES
   ========================================================================== */
.select2-container--default .select2-selection--single { 
    border: 1px solid #CBD5E1 !important; 
    border-radius: 6px !important; 
    height: 40px !important; 
}
.select2-container--default .select2-selection--single .select2-selection__rendered { 
    line-height: 40px !important; 
    padding-left: 14px !important; 
    font-size: 13px !important; 
}
.select2-container--default .select2-selection--single .select2-selection__arrow { 
    height: 38px !important; 
}
.select2-container--default .select2-results__option--highlighted[aria-selected] { 
    background-color: #10B981 !important; 
}

/* ==========================================================================
   4. PROMPTPAY MODAL STYLES
   ========================================================================== */
.wcs-pp-overlay { 
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background-color: rgba(15, 23, 42, 0.85); 
    backdrop-filter: blur(8px); 
    -webkit-backdrop-filter: blur(8px); 
    z-index: 9999999; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    opacity: 0; 
    visibility: hidden; 
    transition: all 0.3s ease; 
    font-family: 'Inter', sans-serif; 
}
.wcs-pp-overlay.active { 
    opacity: 1; 
    visibility: visible; 
}
.wcs-pp-box { 
    background: #FFF; 
    width: 90%; 
    max-width: 400px; 
    border-radius: 16px; 
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); 
    text-align: center; 
    padding: 40px; 
    transform: translateY(20px) scale(0.95); 
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); 
    position: relative; 
    overflow: hidden; 
}
.wcs-pp-overlay.active .wcs-pp-box { 
    transform: translateY(0) scale(1); 
}
.wcs-pp-box::before { 
    content: ''; 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    height: 4px; 
    background: linear-gradient(90deg, #10B981, #3B82F6); 
}

.wcs-pp-title { 
    color: #0F172A; 
    font-size: 24px; 
    font-weight: 800; 
    margin: 0 0 10px 0; 
}
.wcs-pp-desc { 
    color: #64748B; 
    font-size: 14px; 
    margin: 0 0 25px 0; 
    line-height: 1.5; 
}

.wcs-pp-qr-container { 
    background: #F8FAFC; 
    padding: 20px; 
    border-radius: 12px; 
    border: 2px dashed #CBD5E1; 
    display: inline-block; 
    margin-bottom: 25px; 
}
.wcs-pp-qr-container svg { 
    width: 150px; 
    height: 150px; 
}

.wcs-pp-status { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 10px; 
    color: #F59E0B; 
    font-weight: 600; 
    font-size: 15px; 
    margin-bottom: 25px; 
}
.wcs-pp-spinner { 
    width: 16px; 
    height: 16px; 
    border: 2px solid rgba(245, 158, 11, 0.3); 
    border-top-color: #F59E0B; 
    border-radius: 50%; 
    animation: wcs-spin 1s linear infinite; 
}
@keyframes wcs-spin { 
    to { transform: rotate(360deg); } 
}

.wcs-pp-cancel { 
    background: #F1F5F9; 
    color: #475569; 
    border: none; 
    padding: 12px 20px; 
    border-radius: 8px; 
    font-weight: bold; 
    cursor: pointer; 
    width: 100%; 
    transition: 0.2s; 
}
.wcs-pp-cancel:hover { 
    background: #E2E8F0; 
    color: #0F172A; 
}