/* ==========================================
   0. FONTS IMPORT & SYSTEM SETUP
   ========================================== */
   @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600&display=swap');

   /* ==========================================
      1. CSS VARIABLES & BASE OVERRIDES
      ========================================== */
   :root {
       --glass-bg: rgba(255, 255, 255, 0.75);
       --glass-border: rgba(226, 232, 240, 0.8);
       --glass-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.05), 0 0 15px rgba(99, 102, 241, 0.05);
       --primary-color: #4f46e5;
       --primary-gradient: linear-gradient(135deg, #0066FF 0%, #5296fd 100%);
       --neon-cyan: #06b6d4;
       --neon-cyan-glow: rgba(6, 182, 212, 0.4);
       --neon-danger: #f43f5e;
       --neon-danger-glow: rgba(244, 63, 94, 0.4);
       --text-main: #0f172a;
       --text-muted: #64748b;
       --border-light: rgba(226, 232, 240, 0.9);
       --neon-success: #004525;               /* Bright neon green base */
        --neon-warning: #ffaa00;
   }
   
   body {
       background-color: #f8fafc;
       color: var(--text-main);
       font-family: 'Roboto', system-ui, -apple-system, sans-serif !important;
   }
   
   body, .slider-card, .data-table, .modal-content, .form-control {
       font-size: 13px !important;
       letter-spacing: -0.01em;
       font-weight: normal
   }
   .btn-glass-primary {
        background: var(--primary-gradient) !important;
        color: #ffffff !important;
        border-color: transparent !important;
        font-weight: 500 !important;
        font-size: 0.8rem !important;
        padding: 0.65rem 1.5rem !important;
        transition: all 0.3s ease !important;
        border-radius:10px !important
    }
    .btn-glass-primary:hover {
        background: var(--primary-gradient) !important;
        color: #ffffff !important;
        border-color: transparent !important;
        font-weight: 500 !important;
        font-size: 0.8rem !important;
        padding: 0.65rem 1.5rem !important;
        transition: all 0.3s ease !important;
        border-radius:10px !important;
        transition: none !important;
        transform: none !important
    }
    .btn-glass-secondary {
        background: rgba(148, 163, 184, 0.15) !important;
        color: #475569 !important;
        border: 1px solid rgba(148, 163, 184, 0.35) !important;
        font-weight: 500 !important;
        font-size: 0.8rem !important;
        padding: 0.65rem 1.5rem !important;
        transition: all 0.3s ease !important;
        border-radius: 10px !important;
        /* backdrop-filter: blur(10px); */
        /* -webkit-backdrop-filter: blur(10px); */
    }
    
    .btn-glass-secondary:hover {
        background: rgba(148, 163, 184, 0.15) !important;
        color: #475569 !important;
        border: 1px solid rgba(148, 163, 184, 0.35) !important;
        font-weight: 500 !important;
        font-size: 0.8rem !important;
        padding: 0.65rem 1.5rem !important;
        transition: all 0.3s ease !important;
        border-radius: 10px !important;
        /* backdrop-filter: blur(10px); */
        /* -webkit-backdrop-filter: blur(10px); */
        transition: none !important;
        transform: none !important
    }
   .menu-vertical .app-brand {
       padding-top: 10px !important;
       padding-bottom: 10px !important;
       margin: 0 !important;
   }

   .merchant-label {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 12px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 600;
        color: #475569;
        background: rgba(90, 152, 251, 0.1);
        border: 1px solid rgba(90, 138, 214, 0.18);
        white-space: nowrap;
    }

    .merchant-label i {
        font-size: 14px;
        color: #d6e3ff;
    }
   
   /* ==========================================
      2. CONTAINER & CARD STYLING
      ========================================== */
   .slider-card {
       border: 1px solid var(--glass-border) !important;
       background: var(--glass-bg) !important;
       /* backdrop-filter: blur(16px) !important; */
       /* -webkit-backdrop-filter: blur(16px) !important; */
       border-radius: 1rem !important;
       box-shadow: var(--glass-shadow);
       overflow: hidden;
   }
   
   .slider-card-header {
       background: rgba(255, 255, 255, 0.5);
       /* backdrop-filter: blur(8px); */
       border-bottom: 1px solid var(--border-light);
       padding: 1rem;
   }
   
   /* ==========================================
      3. DATA TABLE STYLING
      ========================================== */
   .table-responsive-wrapper {
       border-radius: 0 0 1rem 1rem;
   }
   
   .data-table {
       width: 100% !important;
       margin: 0 !important;
       border-collapse: separate !important;
       border-spacing: 0;
   }
   
   /* Clean UI Table Header */
   .data-table thead th {
       background: rgba(241, 245, 249, 0.7) !important;
       color: #334155;
       font-family: 'Inter', sans-serif !important;
       font-weight: 600;
       font-size: 0.75rem;
       text-transform: uppercase;
       letter-spacing: 0.08em;
       padding: 1rem 2rem !important;
       border-bottom: 1px solid var(--border-light) !important;
       cursor: default !important;
       background-image: none !important;
   }
   
   .data-table thead th:before,
   .data-table thead th:after {
       display: none !important;
   }
   
   /* Body Cells */
   .data-table tbody td {
       padding: 1rem 2rem !important;
       vertical-align: middle;
       color: var(--text-main);
       border-bottom: 1px solid rgba(241, 245, 249, 0.9);
   }
   
   .data-table tbody tr:hover td {
       background: rgba(248, 250, 252, 0.8);
   }
   
   /* ==========================================
      4. DATATABLES WRAPPER LAYOUT & CONTROLS
      ========================================== */
   .dataTables_wrapper {
       display: flex;
       justify-content: space-between;
       align-items: center;
       flex-wrap: wrap;
   }
   
   .dataTables_wrapper .row:first-child {
       display: flex !important;
       flex-direction: row !important;
       align-items: center !important;
       justify-content: space-between !important;
       padding: 1rem 2rem !important;
       margin: 0 !important;
       background: rgba(255, 255, 255, 0.4);
       border-bottom: 1px solid var(--border-light);
   }
   
   .dataTables_wrapper .row:first-child > [class*="col-"] {
       flex: 0 0 auto !important;
       width: auto !important;
       max-width: none !important;
       padding: 0 !important;
   }
   
   .dataTables_wrapper .row:last-child {
       display: flex !important;
       flex-direction: row !important;
       align-items: center !important;
       justify-content: space-between !important;
       padding: 1rem 2rem !important;
       margin: 0 !important;
       background: rgba(255, 255, 255, 0.4);
       border-top: 1px solid var(--border-light);
   }
   
   .dataTables_wrapper .row:last-child > [class*="col-"] {
       flex: 0 0 auto !important;
       width: auto !important;
       max-width: none !important;
       padding: 0 !important;
   }
   
   /* Length Selector Padding & Layout */
   .dataTables_length {
       margin: 0 !important;
       padding: 0.5rem 1rem !important;
       display: inline-flex;
       align-items: center;
   }
   
   .dataTables_length label {
       display: inline-flex;
       align-items: center;
       gap: 0.6rem;
       color: var(--text-muted);
       font-size: 0.85rem;
       font-weight: 500;
       margin-bottom: 0;
   }
   
   .dataTables_length select {
       border-radius: 0.5rem !important;
       border: 1px solid var(--glass-border) !important;
       background: rgba(255, 255, 255, 0.9) !important;
       padding: 0.35rem 0.8rem !important;
       color: var(--text-main) !important;
       outline: none;
       font-size: 0.85rem;
       box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
   }
   
   /* Filter / Search Input Padding & Layout */
   .dataTables_filter,
   #DataTables_Table_0_filter {
       margin: 0 !important;
       padding: 0.5rem 1rem !important;
       display: inline-flex;
       align-items: center;
       justify-content: flex-end;
   }
   
   .dataTables_filter label,
   #DataTables_Table_0_filter label {
       display: inline-flex;
       align-items: center;
       gap: 0.6rem;
       color: var(--text-muted);
       font-size: 0.85rem;
       font-weight: 500;
       margin-bottom: 0;
   }
   
   .dataTables_filter input,
   #DataTables_Table_0_filter input {
       border-radius: 0.5rem !important;
       border: 1px solid var(--glass-border) !important;
       background: rgba(255, 255, 255, 0.9) !important;
       padding: 0.4rem 1rem !important;
       color: var(--text-main) !important;
       outline: none;
       min-width: 220px;
       font-size: 0.875rem;
       box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
       transition: all 0.2s ease;
   }
   
   .dataTables_filter input:focus,
   #DataTables_Table_0_filter input:focus {
       background: #ffffff !important;
       border-color: var(--neon-cyan) !important;
       box-shadow: 0 0 10px var(--neon-cyan-glow) !important;
   }
   
   /* Table Info Badge & Padding */
   .dataTables_info {
       background: rgba(241, 245, 249, 0.8);
       border: 1px solid var(--glass-border);
       padding: 0.45rem 1.1rem !important;
       margin: 1rem 1rem !important;
       border-radius: 0.5rem;
       color: var(--text-muted) !important;
       font-size: 0.75rem !important;
       font-family: 'Roboto', system-ui, -apple-system, sans-serif !important;
       font-weight: 500;
       display: inline-block;
   }
   
   /* ==========================================
      5. PAGINATION & PAGING SIMPLE NUMBERS
      ========================================== */
   .dataTables_paginate,
   .dataTables_paginate.paging_simple_numbers {
       margin: 0 !important;
       padding: 1rem 1rem !important;
       display: flex;
       justify-content: flex-end;
       align-items: center;
       gap: 0.35rem;
   }
   
   .dataTables_paginate .paginate_button,
   .dataTables_paginate .page-item .page-link {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       min-width: 32px;
       height: 32px;
       padding: 0 0.6rem !important;
       border-radius: 0.4rem !important;
       border: 1px solid var(--glass-border) !important;
       background: rgba(255, 255, 255, 0.9) !important;
       color: var(--text-main) !important;
       font-weight: 500;
       font-size: 0.8rem;
       cursor: pointer;
       text-decoration: none !important;
       transition: all 0.2s ease;
       margin-right: 5px;
   }
   
   .dataTables_paginate .paginate_button:hover:not(.disabled):not(.current),
   .dataTables_paginate .page-item:not(.active):not(.disabled) .page-link:hover {
       background: #ffffff !important;
       color: var(--neon-cyan) !important;
       border-color: var(--neon-cyan) !important;
       box-shadow: 0 0 8px var(--neon-cyan-glow);
   }
   
   .dataTables_paginate .paginate_button.current,
   .dataTables_paginate .paginate_button.current:hover,
   .dataTables_paginate .page-item.active .page-link {
       background: var(--primary-gradient) !important;
       color: #ffffff !important;
       border-color: transparent !important;
   }
   
   .dataTables_paginate .paginate_button.disabled,
   .dataTables_paginate .paginate_button.disabled:hover,
   .dataTables_paginate .page-item.disabled .page-link {
       opacity: 0.4;
       cursor: not-allowed;
       background: rgba(241, 245, 249, 0.6) !important;
       box-shadow: none !important;
   }
   
   /* ==========================================
      6. NEON CRYSTAL BUTTONS & ACTION CONTROLS
      ========================================== */
   .action-btn-group {
       display: flex !important;
       align-items: center;
       justify-content: center;
       gap: 0.5rem;
   }
   
   .btn-action-icon {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       width: 34px;
       height: 34px;
       border-radius: 8px;
       border: 1px solid var(--glass-border);
       /* backdrop-filter: blur(4px); */
       transition: all 0.2s ease;
       text-decoration: none !important;
       font-size: 1rem;
   }
   
   .btn-action-edit {
       background: rgba(6, 182, 212, 0.08);
       color: var(--neon-cyan);
       border-color: rgba(6, 182, 212, 0.2);
   }
   
   .btn-action-edit:hover {
       background: var(--neon-cyan);
       color: #ffffff;
       border-color: var(--neon-cyan);
       box-shadow: 0 0 12px var(--neon-cyan-glow);
   }
   
   .btn-action-delete {
       background: rgba(244, 63, 94, 0.08);
       color: var(--neon-danger);
       border-color: rgba(244, 63, 94, 0.2);
   }
   
   .btn-action-delete:hover {
       background: var(--neon-danger);
       color: #ffffff;
       border-color: var(--neon-danger);
       box-shadow: 0 0 12px var(--neon-danger-glow);
   }
   
   /* Dashboard Crystal Buttons (Primary & Danger) */
   .btn-crystal-primary,
   .btn-crystal-danger,
   .btn-crystal-warns,
   .btn-crystal-success {
       /* backdrop-filter: blur(8px); */
       /* -webkit-backdrop-filter: blur(8px); */
       font-weight: 600;
       font-size: 0.7rem;
       border-radius: 0.5rem;
       padding: 0.3rem 0.6rem;
       transition: all 0.25s cubic-bezier(0.165, 0.84, 0.44, 1);
       display: inline-flex;
       align-items: center;
       justify-content: center;
       gap: 0.4rem;
   }
   
   .btn-crystal-primary {
       background: rgba(6, 182, 212, 0.12);
       color: var(--neon-cyan);
       border: 1px solid rgba(6, 182, 212, 0.3);
       box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
   }
   
   /* .btn-crystal-primary:hover {
       background: var(--neon-cyan);
       color: #ffffff;
       border-color: var(--neon-cyan);
       box-shadow: 0 0 15px var(--neon-cyan-glow);
       transform: translateY(-1px);
   } */
   
   .btn-crystal-danger {
       background: rgba(244, 63, 94, 0.12);
       color: var(--neon-danger);
       border: 1px solid rgba(244, 63, 94, 0.3);
       box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
   }
   
   /* .btn-crystal-danger:hover {
       background: var(--neon-danger);
       color: #ffffff;
       border-color: var(--neon-danger);
       box-shadow: 0 0 15px var(--neon-danger-glow);
       transform: translateY(-1px);
   } */
   
  .btn-crystal-success {
        background: rgba(16, 185, 129, 0.12);
        color: var(--neon-success);
        border: 1px solid rgba(16, 185, 129, 0.3);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
    }
  
  .btn-crystal-warns {
        background: rgba(245, 158, 11, 0.12);
        color: var(--neon-warning);
        border: 1px solid rgba(245, 158, 11, 0.3);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
    }
   /* ==========================================
      7. THUMBNAIL CONTAINER & UPLOAD STYLING
      ========================================== */
   .thumbnail-glass-container {
       border: 1px solid var(--glass-border) !important;
       background: var(--glass-bg) !important;
       /* backdrop-filter: blur(12px) !important; */
       /* -webkit-backdrop-filter: blur(12px) !important; */
       border-radius: 0.75rem !important;
       box-shadow: var(--glass-shadow);
       padding: 0.5rem;
       display: inline-block;
       overflow: hidden;
       transition: border-color 0.25s ease, box-shadow 0.25s ease;
   }
   
   .thumbnail-glass-container:hover {
       border-color: var(--neon-cyan) !important;
       box-shadow: 0 0 12px var(--neon-cyan-glow);
   }
   
   .thumbnail-glass-container img {
       border-radius: 0.5rem;
       display: block;
       object-fit: cover;
       max-width: 100%;
   }
   
   /* ==========================================
      8. FORM CONTROLS & STATIC MODALS (NO ANIMATION)
      ========================================== */
   .glass-form-group {
       position: relative;
       margin-bottom: 0.8rem;
   }
   
   .glass-label {
       background: none !important;
       color: var(--text-main) !important;
       border: 0 !important;
       color: var(--text-muted);
       font-size: 0.85rem;
       font-weight: normal !important;;
       padding: 0 !important;
       border-radius: 0 !important;
       display: inline-block;
       margin-bottom: 5px !important;
   }
   
   .glass-input {
       background: #ffffff !important;
       border: 1px solid var(--glass-border) !important;
       border-radius: 0.5rem !important;
       padding: 0.6rem 0.9rem !important;
       color: var(--text-main) !important;
       font-size: 0.9rem;
   }
   
   .glass-input:focus {
       background: #ffffff !important;
       border-color: var(--neon-cyan) !important;
       box-shadow: 0 0 8px var(--neon-cyan-glow) !important;
       outline: none;
   }
   
   .glass-checkbox-card {
       background: rgba(255, 255, 255, 0.6);
       border: 1px solid var(--glass-border);
       border-radius: 0.5rem;
       padding: 0.75rem 1.25rem;
       display: flex;
       align-items: center;
       gap: 0.75rem;
   }
   
   .glass-checkbox-card .form-check-input {
       width: 1.25rem;
       height: 1.25rem;
       cursor: pointer;
   }
   
   .glass-checkbox-card .form-check-label {
       cursor: pointer;
       font-weight: 500;
       color: var(--text-main);
       margin-bottom: 0;
   }
   
   /* Static Modal (No Animations/Transitions) */
   .glass-modal,
   .glass-modal.fade,
   .glass-modal .modal-dialog,
   .glass-modal .modal-content {
       animation: none !important;
       transition: none !important;
       transform: none !important;
   }
   
   .glass-modal .modal-content {
       background: #ffffff !important;
       border: 1px solid var(--glass-border) !important;
       border-radius: 1rem !important;
       box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
       backdrop-filter: none !important;
       -webkit-backdrop-filter: none !important;
   }
   
   .glass-modal .modal-header {
       border-bottom: 1px solid var(--border-light);
       background: #f8fafc;
       padding: 1rem;
   }
   
   .glass-modal .modal-footer {
       border-top: 1px solid var(--border-light);
       background: #f8fafc;
       padding: 0.5rem 1rem !important;
   }
   
   /* Instantly removes Bootstrap's backdrop fade animation */
   .modal-backdrop,
   .modal-backdrop.fade {
       animation: none !important;
       transition: none !important;
       opacity: 0.5 !important;
   }

table.dataTable tbody tr.even {
    background: #f6f6f6 !important;
}

.glass-upload-zone{
    border: 2px dotted var(--glass-border);
    border-radius: 10px;
    padding: 10px;
}

.image-info-alert {
    display: flex;
    align-items: center;
    gap: 8px;

    margin-top: 12px;
    padding: 10px 14px;

    background: rgba(0, 140, 255, 0.12);
    border: 1px solid rgba(0, 140, 255, 0.3);
    border-radius: 10px;

    color: #008CFF;
    font-size: 12px;

    /* backdrop-filter: blur(8px); */
    /* -webkit-backdrop-filter: blur(8px); */

    box-shadow: 0 2px 8px rgba(0, 140, 255, 0.12);
}

.image-info-alert i {
    font-size: 16px;
    color: #00A8FF;
}

.image-info-alert b {
    color: #0369A1;
}

.img-rounded {
    width: 60px;
    height: auto;
    max-height: 100px;
    border-radius: 5px;
    object-fit: cover;
}

.btn-loading-spinner {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    vertical-align: text-bottom;
    border: 2.5px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #ffffff;
    animation: btn-spin 0.6s linear infinite;
    margin-right: 8px;
}

@keyframes btn-spin {
    to { transform: rotate(360deg); }
}

/* Visually distinct button state during AJAX process */
.btn-saving-active {
    opacity: 0.85 !important;
    cursor: not-allowed !important;
    pointer-events: none;
    box-shadow: inset 0 3px 5px rgba(0,0,0,0.2) !important;
}

.btn-spinner {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    vertical-align: text-bottom;
    border: 0.2em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border .75s linear infinite;
    margin-right: 0.5rem;
  }
  @keyframes spinner-border {
    to { transform: rotate(360deg); }
  }

  .form-select{
    font-size: 13px !important
  }