/*
* Global Design System
* Enterprise Theme Tokens & Base Components
* Version: 1.0.0
*/

:root {
    /* ------------------------------
       Color Palette
    ------------------------------ */
    /* Brand Colors */
    --color-brand-primary: #E11E12;
    --color-brand-dark: #B9190F;
    --color-brand-light: #FFEEED;

    /* Surface Colors */
    --color-surface-bg: #F8F9FA;
    --color-surface-card: #FFFFFF;
    --color-surface-elevated: #FFFFFF;

    /* Text Colors */
    --color-text-main: #1A1A1A;
    --color-text-secondary: #4A4A4A;
    --color-text-muted: #666666;
    --color-text-inverse: #FFFFFF;

    /* Border Colors */
    --color-border-subtle: #F0F0F0;
    --color-border-light: #E5E7EB;
    --color-border-focus: rgba(225, 30, 18, 0.4);

    /* State Colors */
    --color-success: #10B981;
    --color-warning: #F59E0B;
    --color-danger: #EF4444;
    --color-info: #3B82F6;

    /* ------------------------------
       Typography
    ------------------------------ */
    --font-family-base: 'Work Sans', system-ui, -apple-system, sans-serif;

    --text-xs: 0.75rem;
    /* 12px */
    --text-sm: 0.875rem;
    /* 14px */
    --text-base: 1rem;
    /* 16px */
    --text-lg: 1.125rem;
    /* 18px */
    --text-xl: 1.25rem;
    /* 20px */
    --text-2xl: 1.5rem;
    /* 24px */
    --text-3xl: 2rem;
    /* 32px */
    --text-4xl: 3rem;
    /* 48px */

    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 600;
    --font-weight-heavy: 700;

    /* ------------------------------
       Spacing
    ------------------------------ */
    --space-xs: 0.25rem;
    /* 4px */
    --space-sm: 0.5rem;
    /* 8px */
    --space-md: 1rem;
    /* 16px */
    --space-lg: 1.5rem;
    /* 24px */
    --space-xl: 2rem;
    /* 32px */
    --space-2xl: 3rem;
    /* 48px */
    --space-3xl: 5rem;
    /* 80px */

    /* ------------------------------
       Effects
    ------------------------------ */
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-glow: 0 0 15px rgba(225, 30, 18, 0.15);

    /* Radius */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-full: 9999px;

    /* Transitions */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-smooth: 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ------------------------------
   Base Reset & Typo
------------------------------ */
body {
    font-family: var(--font-family-base);
    color: var(--color-text-main);
    background-color: var(--color-surface-bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--color-text-main);
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
}

/* ------------------------------
   Component: Buttons
------------------------------ */
.btn-premium {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    font-size: var(--text-base);
    font-weight: var(--font-weight-bold);
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
    cursor: pointer;
    border: none;
    gap: 0.5rem;
}

.btn-premium-primary {
    background-color: var(--color-brand-primary);
    color: var(--color-text-inverse);
    box-shadow: var(--shadow-md);
}

.btn-premium-primary:hover {
    background-color: var(--color-brand-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg), var(--shadow-glow);
    color: var(--color-text-inverse);
}

/* ------------------------------
   Component: Cards
------------------------------ */
.card-premium {
    background: var(--color-surface-card);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border-subtle);
    box-shadow: var(--shadow-md);
    transition: all var(--transition-base);
    overflow: hidden;
}

.card-premium:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
    border-color: var(--color-border-light);
}

/* ------------------------------
   Component: Section Headings
------------------------------ */
.section-title-premium {
    font-size: var(--text-3xl);
    font-weight: var(--font-weight-heavy);
    color: var(--color-text-main);
    margin-bottom: var(--space-xl);
    position: relative;
    text-align: center;
}

.section-title-premium span {
    color: var(--color-brand-primary);
}

/* ------------------------------
   Utility Classes
------------------------------ */
.text-brand {
    color: var(--color-brand-primary) !important;
}

.bg-surface {
    background-color: var(--color-surface-bg) !important;
}

.fw-bold {
    font-weight: var(--font-weight-bold) !important;
}

/* ------------------------------
   Bootstrap Button Overrides
------------------------------ */

/* Primary Button - Brand Red */
.btn-primary,
.btn.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, #e11e12 0%, #c41810 50%, #a01308 100%) !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    padding: 12px 28px !important;
    font-size: var(--text-base) !important;
    font-weight: var(--font-weight-bold) !important;
    font-family: var(--font-family-base) !important;
    color: #fff !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(225, 30, 18, 0.3) !important;
    transition: all var(--transition-base) !important;
}

.btn-primary:hover,
.btn.btn-primary:hover,
.btn-primary:focus,
.btn.btn-primary:focus {
    background: linear-gradient(135deg, #c41810 0%, #a01308 50%, #8a0f06 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(225, 30, 18, 0.45) !important;
    color: #fff !important;
}

.btn-primary:active,
.btn.btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(225, 30, 18, 0.35) !important;
}

/* Secondary Button */
.btn-secondary,
.btn.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, #4a4a4a 0%, #333 100%) !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    padding: 12px 28px !important;
    font-size: var(--text-base) !important;
    font-weight: var(--font-weight-bold) !important;
    font-family: var(--font-family-base) !important;
    color: #fff !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
    transition: all var(--transition-base) !important;
}

.btn-secondary:hover,
.btn.btn-secondary:hover {
    background: linear-gradient(135deg, #e11e12 0%, #c41810 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(225, 30, 18, 0.35) !important;
    color: #fff !important;
}

/* Success Button */
.btn-success,
.btn.btn-success {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, #10B981 0%, #059669 100%) !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    padding: 12px 28px !important;
    font-size: var(--text-base) !important;
    font-weight: var(--font-weight-bold) !important;
    font-family: var(--font-family-base) !important;
    color: #fff !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3) !important;
    transition: all var(--transition-base) !important;
}

.btn-success:hover,
.btn.btn-success:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.45) !important;
    color: #fff !important;
}

/* Danger Button */
.btn-danger,
.btn.btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%) !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    padding: 12px 28px !important;
    font-size: var(--text-base) !important;
    font-weight: var(--font-weight-bold) !important;
    font-family: var(--font-family-base) !important;
    color: #fff !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3) !important;
    transition: all var(--transition-base) !important;
}

.btn-danger:hover,
.btn.btn-danger:hover {
    background: linear-gradient(135deg, #DC2626 0%, #B91C1C 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(239, 68, 68, 0.45) !important;
    color: #fff !important;
}

/* Block Button */
.btn-block {
    display: flex !important;
    width: 100% !important;
}

/* Small Button */
.btn-sm {
    padding: 8px 18px !important;
    font-size: var(--text-sm) !important;
}

/* Large Button */
.btn-lg {
    padding: 16px 40px !important;
    font-size: var(--text-lg) !important;
}

/* ------------------------------
   SweetAlert2 Theme Redesign
------------------------------ */

/* Main Popup */
.swal2-popup {
    border-radius: var(--radius-xl) !important;
    padding: var(--space-xl) !important;
    background: var(--color-surface-card) !important;
    box-shadow: var(--shadow-xl) !important;
    font-family: var(--font-family-base) !important;
}

/* Title & Text */
.swal2-title {
    color: var(--color-text-main) !important;
    font-weight: var(--font-weight-heavy) !important;
    font-size: var(--text-2xl) !important;
    margin-bottom: var(--space-md) !important;
}

.swal2-html-container {
    color: var(--color-text-secondary) !important;
    font-size: var(--text-base) !important;
    line-height: 1.6 !important;
}

/* Icons */
.swal2-icon.swal2-success {
    border-color: var(--color-success) !important;
    color: var(--color-success) !important;
}

.swal2-icon.swal2-success [class^='swal2-success-line'] {
    background-color: var(--color-success) !important;
}

.swal2-icon.swal2-success .swal2-success-ring {
    border: .25em solid rgba(16, 185, 129, .3) !important;
}

.swal2-icon.swal2-error {
    border-color: var(--color-danger) !important;
    color: var(--color-danger) !important;
}

.swal2-icon.swal2-error [class^='swal2-x-mark-line'] {
    background-color: var(--color-danger) !important;
}

/* Buttons Container */
.swal2-actions {
    margin-top: var(--space-lg) !important;
    gap: var(--space-md) !important;
}

/* Shared Button Styles */
.swal2-styled {
    padding: 12px 32px !important;
    font-weight: var(--font-weight-bold) !important;
    font-family: var(--font-family-base) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    border-radius: var(--radius-md) !important;
    font-size: var(--text-sm) !important;
    transition: all var(--transition-base) !important;
}

/* Confirm Button (Primary) */
.swal2-confirm.swal2-styled {
    background: linear-gradient(135deg, #e11e12 0%, #c41810 50%, #a01308 100%) !important;
    box-shadow: 0 4px 15px rgba(225, 30, 18, 0.3) !important;
    border: none !important;
   
}

.swal2-confirm.swal2-styled:hover {
    background: linear-gradient(135deg, #c41810 0%, #a01308 50%, #8a0f06 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(225, 30, 18, 0.45) !important;
}

/* Cancel Button (Secondary/Dark) */
.swal2-cancel.swal2-styled {
    background: linear-gradient(135deg, #4a4a4a 0%, #333 100%) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
    color: #fff !important;
}

.swal2-cancel.swal2-styled:hover {
    background: linear-gradient(135deg, #e11e12 0%, #c41810 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(225, 30, 18, 0.35) !important;
}

/* Deny Button */
.swal2-deny.swal2-styled {
    background: var(--color-danger) !important;
    display: none !important;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3) !important;
}

/* Close/X Button */
.swal2-close {
    color: var(--color-text-muted) !important;
    transition: color var(--transition-fast) !important;
}

.swal2-close:hover {
    color: var(--color-brand-primary) !important;
}

/* Footer (if used) */
.swal2-footer {
    border-top: 1px solid var(--color-border-subtle) !important;
    color: var(--color-text-muted) !important;
    font-size: var(--text-xs) !important;
}

/* ------------------------------
   Header & Sticky Navigation Fixes
------------------------------ */

/* Ensure header is always on top of all page elements */
#header,
.mobile-header {
    z-index: 20000 !important;
    background-color: var(--color-surface-card) !important;
    transition: all var(--transition-base) !important;
}

/* Fix for sticky/pinned state to prevent "collapsing" look */
.headroom--pinned {
    box-shadow: var(--shadow-lg) !important;
    border-bottom: 1px solid var(--color-border-subtle) !important;
    background-color: var(--color-surface-card) !important;
}

/* Ensure mega menu is also correctly positioned above other page content */
.mega-menu {
    z-index: 20001 !important;
    border-top: 2px solid var(--color-brand-primary) !important;
    box-shadow: var(--shadow-xl) !important;
    background-color: var(--color-surface-card) !important;
}

/* mobile header specific fix */
@media (max-width: 991px) {
    .mobile-header {
        position: fixed !important;
        top: 0;
        left: 0;
        width: 100%;
        background-color: var(--color-surface-card) !important;
        box-shadow: var(--shadow-md) !important;
    }
}

/* ------------------------------
   Mobile Responsive SweetAlert
------------------------------ */
@media (max-width: 576px) {
    .swal2-popup {
        width: 95% !important;
        margin: 0 auto !important;
        padding: 1.25rem !important;
    }

    .swal2-title {
        font-size: 1.5rem !important;
        /* Smaller title on mobile */
    }

    .swal2-content,
    .swal2-html-container {
        font-size: 0.95rem !important;
        /* Readable content text */
    }

    .swal2-styled {
        padding: 0.75rem 1.5rem !important;
        /* Smaller buttons */
        font-size: 0.85rem !important;
        width: 100% !important;
        /* Full width buttons for easier tapping */
        margin: 0.25rem 0 !important;
        display: block !important;
    }

    .swal2-actions {
        flex-direction: column !important;
        /* Stack buttons vertically */
        gap: 0.5rem !important;
        width: 100% !important;
    }
}

/* --------------------------------------------------------------------------
   Force Table Layout on Mobile (Override stacked layout)
   Targeting Cart, Account, and Checkout tables to be horizontally scrollable
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {

    /* 1. Ensure Table Containers Scroll - DO NOT STACK */
    .cart-table,
    .account-table,
    .order-table,
    .account-table .table-responsive,
    .order-table.table-responsive {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* 2. Force Actual Table Display */
    .cart-table table,
    .account-table table,
    .order-table table {
        display: table !important;
        width: 100% !important;
        min-width: 600px;
        /* Force minimum width to prevent squashing */
        border-collapse: collapse !important;
    }

    /* 3. Restore Table Elements (Override any display: block or flex) */
    .cart-table thead,
    .account-table thead,
    .order-table thead {
        display: table-header-group !important;
    }

    .cart-table tbody,
    .account-table tbody,
    .order-table tbody {
        display: table-row-group !important;
    }

    .cart-table tr,
    .account-table tr,
    .order-table tr {
        display: table-row !important;
    }

    .cart-table th,
    .account-table th,
    .order-table th,
    .cart-table td,
    .account-table td,
    .order-table td {
        display: table-cell !important;
        vertical-align: middle !important;
        white-space: nowrap !important;
        /* Keep content on one line for cleanliness */
        border: 1px solid #eee !important;
        padding: 10px !important;
        text-align: left !important;
    }

    /* 4. Disable "Card View" Pseudo-elements (Common in responsive tables) */
    .cart-table td::before,
    .account-table td::before,
    .order-table td::before {
        display: none !important;
        content: none !important;
    }

    /* 5. Specific Fixes for Images & Inputs */
    .cart-table img,
    .order-table img {
        max-width: 50px !important;
        /* Keep images small */
        height: auto !important;
        display: block !important;
        margin: 0 auto !important;
    }

    /* fix quantity inputs */
    .qty-btn {
        width: 25px !important;
        height: 25px !important;
        line-height: 25px !important;
    }

    .qty-input {
        width: 40px !important;
        height: 25px !important;
    }
}