html {
    position: relative;
    min-height: 100%;
    font-size: 14px;
}

/* -- Typography
   English : Plus Jakarta Sans  � modern, geometric, warm. Used by Notion, Linear, top EdTech.
   Arabic  : IBM Plex Sans Arabic � professional, already self-hosted locally.
------------------------------------------------------------------- */
html[lang="en"],
html[lang="en"] body,
html[lang="en"] .form-control,
html[lang="en"] .form-select,
html[lang="en"] .btn,
html[lang="en"] .dropdown-item,
html[lang="en"] .nav-link,
html[lang="en"] .badge,
html[lang="en"] .card,
html[lang="en"] .modal,
html[lang="en"] .table,
html[lang="en"] input,
html[lang="en"] textarea,
html[lang="en"] select {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

html[lang="ar"],
html[lang="ar"] body,
html[lang="ar"] .form-control,
html[lang="ar"] .form-select,
html[lang="ar"] .btn,
html[lang="ar"] .dropdown-item,
html[lang="ar"] .nav-link,
html[lang="ar"] .badge,
html[lang="ar"] .card,
html[lang="ar"] .modal,
html[lang="ar"] .table,
html[lang="ar"] input,
html[lang="ar"] textarea,
html[lang="ar"] select {
    font-family: 'IBM Plex Sans Arabic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* Headings: slightly tighter tracking on English, standard on Arabic */
html[lang="en"] h1, html[lang="en"] h2, html[lang="en"] h3,
html[lang="en"] h4, html[lang="en"] h5, html[lang="en"] h6 {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-weight: 700;
    letter-spacing: -.015em;
}

html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3,
html[lang="ar"] h4, html[lang="ar"] h5, html[lang="ar"] h6 {
    font-family: 'IBM Plex Sans Arabic', sans-serif !important;
    font-weight: 700;
}

:root {
    /* -- Brand: FutureAcademy Teal Identity -- */
    --vz-primary:          #0d9488;
    --vz-primary-rgb:      13, 148, 136;
    --vz-primary-dark:     #0f766e;
    --vz-primary-light:    #f0fdfa;
    --fa-gradient:         linear-gradient(135deg, #0d9488 0%, #0ab39c 100%);
    --fa-gradient-deep:    linear-gradient(135deg, #042f2e 0%, #0f5753 50%, #042f2e 100%);
    /* Gold accent (kept for existing uses) */
    --vz-gold-primary: #d4af37;
    --vz-gold-gradient: linear-gradient(135deg, #bf953f 0%, #fcf6ba 45%, #b38728 70%, #fbf5b7 100%);
    --vz-gold-soft: rgba(212, 175, 55, 0.1);
    --vz-dark-luxury: #1a1d21;
    --vz-primary-luxury: #0d9488;
    /* Animation Tokens */
    --vz-transition-main: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    --vz-entrance-timing: 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

/* Global Entrance Animations */
/* NOTE: 'to' ends at transform:none (not translateY(0)/scale(1)). These animations
   run with 'forwards', which retains the final transform permanently — and ANY
   non-none transform turns the element into a stacking context + containing block,
   trapping Bootstrap modals/dropdowns inside it below the body-level backdrop.
   translateY(0)/scale(1) are visually identical to none, so the entrance is unchanged. */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.98);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* Base Page Content Entrance */
#ajax-content-body {
    animation: fadeInUp var(--vz-entrance-timing);
}


@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    margin-bottom: 0px;
}

/* Ensure Arabic letters use IBM Plex Sans Arabic */
.language span,
[lang="ar"],
.arabic-text {
    font-family: 'IBM Plex Sans Arabic', sans-serif !important;
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}



.CustomePlaceholder {
    color: #0c768a !important;
}

.hr {
    color: #cecece;
}

.form-label {
    font-size: 12px;
}

[dir=rtl] input {
    text-align: right;
    font-size: 11px;
}

.page-title-box,
.page-title mb-0 {
    color: var(--vz-gold-primary);
    font-weight: 700;
}

/* Button & Action Interactions */

.btn {
    transition: var(--vz-transition-main);
    border-radius: 6px;
}

.btn-primary:not(.btn-icon) {
    background: var(--fa-gradient);
    border: none;
    color: #fff !important;
    font-weight: 600;
    position: relative;
    overflow: hidden;
}

    .btn-primary:not(.btn-icon):hover {
        filter: brightness(1.08);
        box-shadow: 0 8px 20px rgba(13, 148, 136, 0.40);
        transform: translateY(-1px);
    }

    .btn-primary:not(.btn-icon):active {
        transform: translateY(1px);
    }

    /* Shimmer sweep on hover */
    .btn-primary:not(.btn-icon)::after {
        content: "";
        position: absolute;
        top: 0;
        left: -100%;
        width: 60%;
        height: 100%;
        background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.3), transparent);
        transform: skewX(-30deg);
        transition: 0.55s;
    }

    .btn-primary:not(.btn-icon):hover::after {
        left: 150%;
    }


.field-validation-error,
.validation-summary-errors {
    font-size: 11px;
}

@media (min-width: 1024px) {
    .twitter-bs-wizard .twitter-bs-wizard-nav .wizard-border:before {
        width: 198px !important;
    }
}

.form-check-input {
    font-size: 14px !important;
}

.table-responsive,
#key-datatable {
    font-size: 12px !important;
}

    #key-datatable table.dataTable thead > tr > th.sorting:before,
    table.dataTable thead > tr > th.sorting:after,
    table.dataTable thead > tr > th.sorting_asc:before,
    .table.dataTable > thead .sorting:before,
    table.dataTable > thead .sorting_asc:before,
    table.dataTable > thead .sorting_asc_disabled:before,
    table.dataTable > thead .sorting_desc:before,
    table.dataTable > thead .sorting_desc_disabled:before {
        right: 0px !important;
        text-align: left !important;
        content: "\f0360";
    }

.table.dataTable > thead .sorting:after,
table.dataTable > thead .sorting_asc:after,
table.dataTable > thead .sorting_asc_disabled:after,
table.dataTable > thead .sorting_desc:after,
table.dataTable > thead .sorting_desc_disabled:after {
    content: "\f035d";
}

#key-datatable th {
    color: var(--vz-primary-luxury);
    font-weight: 600;
}

.field-validation-error {
    font-size: 11px;
}

.navbar-menu .navbar-nav .nav-link {
    font-size: 14px !important;
    padding: .625rem 2.5rem !important;
}



    .navbar-menu .navbar-nav .nav-link i {
        font-size: 1.1rem;
    }

/* Premium Navbar Brand Box Enhancement */
.navbar-brand-box {
    background: var(--vz-dark-luxury);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    z-index: 10;
    padding: 9px 20px !important;
}

    .navbar-brand-box:hover {
        background: rgba(26, 29, 33, 0.95);
    }

.logo-lg img,
.logo-sm img {
    transition: transform 0.3s ease;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.navbar-brand-box:hover .logo-lg img {
    transform: scale(1.02);
}

#vertical-hover {
    color: var(--vz-gold-primary) !important;
    transition: all 0.3s ease;
}

    #vertical-hover:hover {
        transform: rotate(90deg);
        text-shadow: 0 0 10px var(--vz-gold-primary);
    }

/* Glassmorphism reflection effect */
.navbar-brand-box::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.05), transparent);
    transform: skewX(-25deg);
    transition: 0.75s;
    pointer-events: none;
}

.navbar-brand-box:hover::after {
    left: 150%;
}

/* 1. Grainy Texture Overlay for depth */
.navbar-brand-box::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.04;
    pointer-events: none;
    z-index: 1;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}



@keyframes logo-entrance {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.8);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes logo-float {

    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

@keyframes gold-shimmer {
    0% {
        filter: brightness(1) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    }

    50% {
        filter: brightness(1.3) drop-shadow(0 0 15px rgba(212, 175, 55, 0.5));
    }

    100% {
        filter: brightness(1) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    }
}

.navbar-brand-box {
    overflow: hidden;
    background: linear-gradient(180deg, #1e2227 0%, #1a1d21 100%) !important;
}

.logo-lg img,
.logo-sm img {
    animation: logo-entrance 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards, logo-float 4s infinite ease-in-out 1s;
    transition: all 0.3s ease;
}

.navbar-brand-box:hover .logo-lg img,
.navbar-brand-box:hover .logo-sm img {
    animation: gold-shimmer 2s infinite ease-in-out;
    transform: scale(1.05) translateY(-2px);
}


/* 3. Subtle Sidebar Shadow Separation */
.app-menu {
    box-shadow: 10px 0 30px rgba(0, 0, 0, 0.2) !important;
}

/* 4. Glowing Effect for Small Logo state */
.vertical-sidebar-enable .logo-sm img {
    filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.6));
}







.topbar-badge {
    background-color: var(--vz-gold-primary) !important;
    color: var(--vz-dark-luxury) !important;
    font-weight: 800;
}

#topnav-hamburger-icon span span {
    background-color: var(--vz-gold-primary) !important;
}

.search-widget-icon {
    color: var(--vz-gold-primary) !important;
}

.dropdown-head.bg-primary {
    background: var(--vz-gold-gradient) !important;
}

    .dropdown-head.bg-primary h6,
    .dropdown-head.bg-primary .badge {
        color: var(--vz-dark-luxury) !important;
    }

.header-item:hover i,
.header-item.active i {
    color: var(--vz-gold-primary) !important;
}

.right-align {
    text-align: right;
}

.left-align {
    text-align: left;
}

.validation-summary-errors,
.field-validation-error {
    font-size: 11px !important;
}

.breadcrumb-style {
    background: linear-gradient(-45deg, #dce3f8 50%, #75d5c8);
    color: white;
    padding: 15px 1.5rem;
}

.breadcrumb-title {
    color: #003366;
    font-weight: 700;
}

.main-content .footer {
    color: #fcf6ba;
    background: var(--vz-dark-luxury);
    border-top: 2px solid var(--vz-gold-primary);
}

.breadcrumb-item a {
    color: #003366 !important;
}

.breadcrumb-item.active {
    color: #b38728 !important;
}

.field-validation-error {
    margin-bottom: 5px;
}

.card-title {
    font-size: 14px !important;
}

.auth-page-wrapper .auth-page-content {
    padding-bottom: 0px !important;
    margin-top: -3% !important;
}

:is(.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6, .form-label) {
    color: #003366 !important;
}

.dropzone .dz-message {
    margin: 0px !important;
}

.image-grid {
    display: grid;
    /* Ensures 6 equal columns per row */
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    margin-top: 20px;
}

    .image-grid img {
        width: 100%;
        /* Make the image take full width of the grid cell */
        height: 100px;
        /* Set a fixed height for consistency */
        object-fit: cover;
        /* Ensures the image is cropped to fit without stretching */
        border-radius: 8px;
    }

    .image-grid .image-container {
        position: relative;
    }

    .image-grid .delete-btn {
        position: absolute;
        top: 5px;
        right: 5px;
        background-color: rgba(255, 0, 0, 0.7);
        color: white;
        border: none;
        border-radius: 50%;
        width: 20px;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-size: 14px;
    }

.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice,
.select2-container--default[dir="ltr"] .select2-selection--multiple .select2-selection__choice {
    color: #003366 !important;
}

.is-invalid .select2-selection--single,
.is-invalid .select2-selection--multiple {
    border-color: var(--vz-form-invalid-border-color) !important;
}

.is-valid .select2-selection--single,
.is-valid .select2-selection--multiple {
    border-color: var(--vz-form-valid-border-color) !important;
}

.input-step input {
    width: 7em !important;
    text-align: center !important;
}

.flatpickr-hour,
.flatpickr-minute {
    text-align: center !important;
}

.toastify on bg-success toastify-right toastify-top {
    border-radius: 10px !important;
}

/* Target the input field by its type and placeholder */
input[type="search"][placeholder="???? ???"] {
    width: 100%;
    padding-right: 35px;
    /* Space for the icon */
    padding-left: 10px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid #ddd;
    background-color: #fff;
    color: #333;
    box-sizing: border-box;
    margin-right: 4px;
}

    /* Style the search box container */
    input[type="search"][placeholder="???? ???"]::placeholder {
        color: #888;
        font-size: 14px;
        /* Adjust font size if needed */
    }

    /* Positioning the icon */
    input[type="search"][placeholder="???? ???"] + .search-icon {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        color: #888;
        font-size: 18px;
    }

/* Adjusting parent div to relative if needed */
input[type="search"][placeholder="???? ???"] {
    position: relative;
    /* Makes sure the icon aligns correctly */
}

.js-AllProductsDatatables > tbody > tr > td {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

#productnav-all .table-responsive {
    overflow-x: unset !important;
}

/* customPreloader styles */
#customPreloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--vz-secondary-bg);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: visible;
}

/* Hide customPreloader after loading */
.loaded #customPreloader {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.tw {
    color: white !important;
}

/* ================================================
   Dark Mode Styles
   ================================================ */

/* Dark Mode - Breadcrumb */
[data-bs-theme="dark"] .breadcrumb-style {
    background: linear-gradient(-45deg, #1f2937 50%, #374151);
    border-bottom: 1px solid #374151;
}

[data-bs-theme="dark"] .breadcrumb-title {
    color: #e5e7eb !important;
}

[data-bs-theme="dark"] .breadcrumb-item a {
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .breadcrumb-item.active {
    color: #d1d5db !important;
}

/* Dark Mode - Footer */
[data-bs-theme="dark"] .main-content .footer {
    background: linear-gradient(-45deg, #1f2937 50%, #111827);
    color: #9ca3af;
    border-top: 1px solid #374151;
}

/* Dark Mode - Sidebar */
[data-bs-theme="dark"] .navbar-menu {
    background-color: #1f2937 !important;
    border-right: 1px solid #374151;
}

    [data-bs-theme="dark"] .navbar-menu .navbar-nav .nav-link {
        color: #d1d5db;
    }

        [data-bs-theme="dark"] .navbar-menu .navbar-nav .nav-link:hover {
            color: #ffffff;
            background-color: rgba(59, 130, 246, 0.1);
        }

        [data-bs-theme="dark"] .navbar-menu .navbar-nav .nav-link.active {
            color: #60a5fa;
            background-color: rgba(59, 130, 246, 0.15);
        }

[data-bs-theme="dark"] .menu-title {
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .navbar-menu .menu-dropdown {
    background-color: #111827;
}

    [data-bs-theme="dark"] .navbar-menu .menu-dropdown .nav-link {
        color: #d1d5db;
    }

        [data-bs-theme="dark"] .navbar-menu .menu-dropdown .nav-link:hover {
            color: #ffffff;
            background-color: rgba(59, 130, 246, 0.1);
        }

/* Dark Mode - Page Title & Headings */
[data-bs-theme="dark"] :is(.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6, .form-label) {
    color: #e5e7eb !important;
}

[data-bs-theme="dark"] .page-title-box,
[data-bs-theme="dark"] .page-title.mb-0 {
    color: #e5e7eb;
}

/* Dark Mode - Cards */
[data-bs-theme="dark"] .card {
    background-color: #1f2937;
    border-color: #374151;
}

[data-bs-theme="dark"] .card-header {
    background-color: #111827;
    border-color: #374151;
}

[data-bs-theme="dark"] .card-title {
    color: #e5e7eb !important;
}

/* Dark Mode - Select2 */
[data-bs-theme="dark"] .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice,
[data-bs-theme="dark"] .select2-container--default[dir="ltr"] .select2-selection--multiple .select2-selection__choice {
    color: #e5e7eb !important;
    background-color: #374151;
    border-color: #4b5563;
}

/* ================================================
   Toastr RTL Support
   ================================================ */

/* RTL - Toastr Container Alignment */
[dir="rtl"] #toast-container > div {
    padding: 15px 50px 15px 15px !important;
}

[dir="ltr"] #toast-container > div {
    padding: 15px 15px 15px 50px !important;
}

/* RTL - Close Button Position */
[dir="rtl"] .toast-close-button {
    right: auto !important;
    left: -0.3em !important;
    float: left !important;
}

[dir="ltr"] .toast-close-button {
    left: auto !important;
    right: -0.3em !important;
    float: right !important;
}

/* RTL - Toast Icon Position */
[dir="rtl"] .toast-info,
[dir="rtl"] .toast-error,
[dir="rtl"] .toast-success,
[dir="rtl"] .toast-warning {
    background-position: calc(100% - 15px) center !important;
    padding-right: 50px !important;
    padding-left: 15px !important;
}

[dir="ltr"] .toast-info,
[dir="ltr"] .toast-error,
[dir="ltr"] .toast-success,
[dir="ltr"] .toast-warning {
    background-position: 15px center !important;
    padding-left: 50px !important;
    padding-right: 15px !important;
}

/* RTL - Toast Progress Bar */
[dir="rtl"] .toast-progress {
    right: 0 !important;
    left: auto !important;
}

[dir="ltr"] .toast-progress {
    left: 0 !important;
    right: auto !important;
}

/* ================================================
   Premium Modal & Dialog Enhancements
   ================================================ */
.modal-content {
    border: 1px solid var(--vz-gold-soft);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
    animation: fadeInScale var(--vz-entrance-timing);
}

/* Premium dark + gold modal header — site-wide.
   Forced with !important because app.min.css and Bootstrap's vendor RTL
   stylesheet ship per-selector overrides for padding/border that can make
   the gradient appear collapsed (especially when the title is set lazily
   from JS, e.g. UsersApproval review modal). */
.modal-header,
.modal-dialog .modal-header,
.modal-dialog:not(.modal-dialog-scrollable) .modal-header {
    background: linear-gradient(to right, var(--vz-dark-luxury), #2a2e34) !important;
    border-bottom: 2px solid var(--vz-gold-primary) !important;
    padding: 1rem 1.25rem !important;
    min-height: 56px;
}

.modal-header .modal-title,
.modal-header h1.modal-title,
.modal-header h2.modal-title,
.modal-header h3.modal-title,
.modal-header h4.modal-title,
.modal-header h5.modal-title,
.modal-header h6.modal-title {
    color: var(--vz-gold-primary) !important;
    font-weight: 700;
    margin: 0;
}

/* Bootstrap's default close button is dark; flip it to white on the dark header. */
.modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(2);
    opacity: .85;
}
.modal-header .btn-close:hover { opacity: 1; }

/* Glassmorphism Backdrop */
.modal-backdrop.show {
    opacity: 0.7;
    backdrop-filter: blur(4px);
}

/* ================================================
   Dropdown Menu Animations
   ================================================ */
.dropdown-menu {
    animation: fadeInUp 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    border: 1px solid var(--vz-gold-soft);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.dropdown-item {
    transition: var(--vz-transition-main);
    padding: 0.5rem 1.2rem;
}

    .dropdown-item:hover {
        background-color: var(--vz-gold-soft);
        color: var(--vz-gold-primary);
        transform: translateX(5px);
    }

/* ================================================
   Premium No Data Placeholders
   ================================================ */
.no-data-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 300px;
    padding: 2rem;
    text-align: center;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px dashed var(--vz-gold-soft);
    border-radius: 12px;
    transition: var(--vz-transition-main);
    position: relative;
    overflow: hidden;
}

    .no-data-placeholder:hover {
        background: rgba(255, 255, 255, 0.04);
        border-color: var(--vz-gold-primary);
        box-shadow: inset 0 0 20px rgba(212, 175, 55, 0.05);
    }

    .no-data-placeholder i {
        font-size: 1.5rem;
        background: var(--vz-gold-gradient);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        margin-bottom: 1.5rem;
        filter: drop-shadow(0 4px 10px rgba(191, 149, 63, 0.3));
        animation: floatingIcon 3s infinite ease-in-out;
    }

    .no-data-placeholder h5 {
        color: var(--vz-gold-primary);
        font-weight: 700;
        margin-bottom: 0.75rem;
        letter-spacing: 0.5px;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .no-data-placeholder p {
        color: #878a99;
        font-size: 0.95rem;
        max-width: 320px;
        margin: 0 auto;
        line-height: 1.6;
    }

@keyframes floatingIcon {

    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

/* Ensure centering for table empty states */
.table-empty-state {
    padding: 3rem !important;
    text-align: center;
}

    .table-empty-state i {
        font-size: 2.5rem;
        color: var(--vz-gold-soft);
        margin-bottom: 1rem;
        display: block;
    }

.validation-summary-errors {
    padding-bottom: 0px !important;
    margin-bottom: 10px !important;
}

/* DataTables Search Box Enhancement */
.dataTables_filter input {
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    padding: 0.5rem 1rem;
    padding-left: 2.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cpath d='m21 21-4.35-4.35'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 0.75rem center;
    background-size: 1rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    min-width: 200px;
}

    .dataTables_filter input:focus {
        border-color: #0d9488;
        box-shadow: 0 0 0 0.2rem rgba(13,148,136, 0.15);
        outline: none;
    }

.dataTables_filter label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0;
    font-weight: 500;
    color: #495057;
}

/* DataTables Length Menu (Entries Dropdown) Enhancement */
.dataTables_length select {
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    padding: 0.5rem 2rem 0.5rem 1rem;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 1rem;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    min-width: 80px;
}

    .dataTables_length select:focus {
        border-color: #0d9488;
        box-shadow: 0 0 0 0.2rem rgba(13,148,136, 0.15);
        outline: none;
    }

.dataTables_length label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0;
    font-weight: 500;
    color: #495057;
}

/* DataTables Info & Pagination Enhancement */
.dataTables_info {
    color: #6c757d;
    font-size: 0.875rem;
    padding-top: 0.75rem;
}

.dataTables_paginate .paginate_button {
    border-radius: 0.375rem !important;
    margin: 0 2px;
}

    .dataTables_paginate .paginate_button.current {
        background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%) !important;
        border-color: #0d9488 !important;
        color: #fff !important;
    }

    .dataTables_paginate .paginate_button:hover:not(.current):not(.disabled) {
        background: #f3f6f9 !important;
        border-color: #ced4da !important;
        color: #0d9488 !important;
    }

/* RTL Support for Arabic */
[dir="rtl"] .dataTables_filter input {
    padding-left: 1rem;
    padding-right: 2.5rem;
    background-position: calc(100% - 0.75rem) center;
}

[dir="rtl"] .dataTables_length select {
    padding-left: 2rem;
    padding-right: 1rem;
    background-position: left 0.5rem center;
}

/* Layout: Search and Length dropdown on the same line */
.dataTables_wrapper .row:first-child {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 1.25rem !important;
}

    .dataTables_wrapper .row:first-child > div {
        width: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        flex: 0 0 auto !important;
        max-width: none !important;
    }

        /* Swap order: Search on Left (Order 1), Length on Right (Order 2) */
        /* DataTables typically renders: [1] Length, [2] Filter */
        .dataTables_wrapper .row:first-child > div:first-child {
            order: 2 !important;
        }

        .dataTables_wrapper .row:first-child > div:last-child {
            order: 1 !important;
        }

.dataTables_filter label {
    justify-content: flex-start !important;
}

.dataTables_length label {
    justify-content: flex-end !important;
}

/* RTL Logic: Justify content naturally swaps them */
[dir="rtl"] .dataTables_filter label {
    justify-content: flex-end !important;
}

[dir="rtl"] .dataTables_length label {
    justify-content: flex-start !important;
}

.dataTables_wrapper .row:last-child {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e9ebec;
}

.dt-spinner {
    padding: 2rem;
}

.product-img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 4px;
}

.product-placeholder {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--vz-light);
    border-radius: 4px;
}

.product-thumbnail-slider {
    height: 350px;
}

.product-nav-slider {
    height: 80px;
}

    .product-nav-slider .swiper-slide {
        opacity: 0.4;
        cursor: pointer;
    }

    .product-nav-slider .swiper-slide-thumb-active {
        opacity: 1;
        border: 2px solid #0d9488;
    }

/* Country Flag Dropdown RTL Fix */
[dir="rtl"] [data-input-flag] .dropdown-menu {
    text-align: right;
    left: 0 !important;
    right: auto !important;
}

[dir="rtl"] [data-input-flag] .search-countryList {
    text-align: right;
}

[dir="rtl"] [data-input-flag] .country-name {
    order: 1;
}

[dir="rtl"] [data-input-flag] .countrylist-codeno {
    order: 2;
}

.profile-photo-edit {
    transition: all 0.3s ease;
}

    .profile-photo-edit:hover {
        transform: scale(1.1);
        filter: brightness(0.9);
    }

.avatar-title {
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.user-profile-image {
    object-fit: cover;
    border: 4px solid #fff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.auth-pass-inputgroup .form-control.is-valid {
    background-size: calc(6.75em + .5rem) calc(.75em + .5rem) !important;
}

.password-addon{
    margin-left: 2%;
}

/* Remove the extra margin-top some layouts add, but keep enough padding-top to
   clear the fixed 70px topbar — otherwise page content renders behind the search
   bar (previously padding-top was 1.5rem, which is shorter than the topbar). */
.page-content {
    margin-top: 0 !important;
    padding-top: calc(70px + 1.5rem);
}

.page-title-box {
    margin-bottom: 2.5rem !important;
}

/* RTL breadcrumb: the divider must point LEFT (toward the next item) in Arabic.
   The RTL bundle ships chevron-right (\f0142); flip it to chevron-left (\f0141). */
[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before {
    content: "\f0141" !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   Flatpickr — brand (teal #0d9488 / gold #d4af37) theme
   Overrides the Velzon-default navy flatpickr styling so the date/time picker
   matches the system identity. Colours only — no layout/behaviour changes.
   !important is used throughout so the theme wins regardless of CSS load order
   (the vendor flatpickr.min.css may load after this file).
   ════════════════════════════════════════════════════════════════════════════ */
.flatpickr-calendar {
    border-radius: 12px !important;
    border: 1px solid rgba(13, 148, 136, .15) !important;
    box-shadow: 0 12px 32px rgba(13, 148, 136, .18) !important;
    overflow: hidden;
}
.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after    { border-bottom-color: #0d9488 !important; }
.flatpickr-calendar.arrowBottom::before,
.flatpickr-calendar.arrowBottom::after { border-top-color: #0d9488 !important; }

/* Header bar (month / year) */
.flatpickr-months,
.flatpickr-month,
.flatpickr-current-month {
    background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%) !important;
    color: #fff !important;
    fill: #fff !important;
}
.flatpickr-current-month input.cur-year,
.flatpickr-current-month .flatpickr-monthDropdown-months {
    color: #fff !important;
    background: transparent !important;
}
.flatpickr-monthDropdown-months .flatpickr-monthDropdown-month { color: #0f766e !important; }
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg { fill: #fff !important; }
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg { fill: #d4af37 !important; }
.numInputWrapper:hover { background: rgba(255, 255, 255, .12) !important; }

/* Weekday labels (Sun–Sat row, on white) */
span.flatpickr-weekday { color: #0f766e !important; font-weight: 600 !important; }

/* Days */
.flatpickr-day:hover,
.flatpickr-day:focus {
    background: rgba(13, 148, 136, .12) !important;
    border-color: transparent !important;
}
.flatpickr-day.today {
    border-color: #d4af37 !important;
    color: #0f766e !important;
}
.flatpickr-day.today:hover {
    background: #d4af37 !important;
    border-color: #d4af37 !important;
    color: #fff !important;
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: #0d9488 !important;
    border-color: #0d9488 !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(13, 148, 136, .35) !important;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover { color: rgba(57, 57, 57, .25) !important; }

/* Time picker row (12-hour + AM/PM) */
.flatpickr-time { border-top: 1px solid rgba(13, 148, 136, .12) !important; }
.flatpickr-time input { color: #0f766e !important; font-weight: 600 !important; }
.flatpickr-time .flatpickr-am-pm { color: #0d9488 !important; font-weight: 700 !important; }
.flatpickr-time input:hover,
.flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time .flatpickr-am-pm:focus { background: rgba(13, 148, 136, .08) !important; }
.flatpickr-time .numInputWrapper span.arrowUp::after   { border-bottom-color: #0d9488 !important; }
.flatpickr-time .numInputWrapper span.arrowDown::after { border-top-color: #0d9488 !important; }

/* ── Header refinements: taller bar, month-nav arrows, year spinner, RTL ───── */
/* A touch taller + larger month/year text */
.flatpickr-months { padding: 5px 0 !important; }
.flatpickr-current-month { font-size: 1.05rem !important; }
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year { font-size: 1rem !important; font-weight: 600 !important; }

/* Keep the month-nav arrows centred in the header. FIXED height (NOT 100%):
   these buttons are position:absolute, so height:100% made them span the whole
   calendar and overlap the time picker — in RTL that meant clicking the hour
   stepper actually hit the next-month button (advancing the month). */
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    top: 0 !important;
    height: 38px !important;
    display: flex !important;
    align-items: center !important;
}

/* Pin prev/next to the calendar edges (LTR) */
.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month { left: 0 !important; right: auto !important; }
.flatpickr-months .flatpickr-next-month.flatpickr-next-month { right: 0 !important; left: auto !important; }

/* RTL: swap sides AND mirror the chevrons so they point the correct way */
[dir="rtl"] .flatpickr-months .flatpickr-prev-month.flatpickr-prev-month { right: 0 !important; left: auto !important; }
[dir="rtl"] .flatpickr-months .flatpickr-next-month.flatpickr-next-month { left: 0 !important; right: auto !important; }
[dir="rtl"] .flatpickr-months .flatpickr-prev-month svg,
[dir="rtl"] .flatpickr-months .flatpickr-next-month svg { transform: scaleX(-1) !important; }

/* Year up/down spinner arrows — white so they're visible on the teal header */
.flatpickr-current-month .numInputWrapper span.arrowUp::after   { border-bottom-color: #fff !important; }
.flatpickr-current-month .numInputWrapper span.arrowDown::after { border-top-color: #fff !important; }
.flatpickr-current-month .numInputWrapper span:hover { background: rgba(255, 255, 255, .15) !important; }

/* ── Compact size — make the popup a bit smaller ──────────────────────────── */
.flatpickr-calendar { font-size: 13px !important; }
.flatpickr-rContainer,
.flatpickr-days,
.flatpickr-days .dayContainer {
    width: 263px !important;
    min-width: 263px !important;
    max-width: 263px !important;
}
.flatpickr-day {
    max-width: 37.5px !important;
    height: 34px !important;
    line-height: 34px !important;
}
span.flatpickr-weekday { font-size: 11px !important; }
.flatpickr-time { height: 36px !important; line-height: 36px !important; }
.flatpickr-time input,
.flatpickr-time .flatpickr-am-pm { font-size: 13px !important; }

/* ── Time picker — compact, clear steppers & AM/PM toggle ─────────────────── */
/* Force LTR inside the time row so "HH : MM  AM/PM" reads naturally and each
   stepper maps to its own input even when the page is RTL (Arabic). */
.flatpickr-time { direction: ltr !important; }
.flatpickr-calendar.hasTime .flatpickr-time,
.flatpickr-time { height: 34px !important; line-height: 34px !important; max-height: 34px !important; }
.flatpickr-time .numInputWrapper { height: 34px !important; }
.flatpickr-time input.flatpickr-hour,
.flatpickr-time input.flatpickr-minute { font-size: 14px !important; font-weight: 700 !important; color: #0f766e !important; }
.flatpickr-time .flatpickr-time-separator { color: #0f766e !important; font-weight: 700 !important; }

/* Up/down steppers — always visible, compact, teal */
.flatpickr-time .numInputWrapper span {
    opacity: 1 !important;
    width: 16px !important;
    right: 0 !important;
    left: auto !important;
    border: none !important;
    background: rgba(13, 148, 136, .08) !important;
}
.flatpickr-time .numInputWrapper span.arrowUp { border-bottom: 1px solid #fff !important; }
.flatpickr-time .numInputWrapper span:hover  { background: rgba(13, 148, 136, .24) !important; }
.flatpickr-time .numInputWrapper span:active { background: rgba(13, 148, 136, .4) !important; }
.flatpickr-time .numInputWrapper span.arrowUp::after {
    border-left: 4px solid transparent !important;
    border-right: 4px solid transparent !important;
    border-bottom: 5px solid #0d9488 !important;
}
.flatpickr-time .numInputWrapper span.arrowDown::after {
    border-left: 4px solid transparent !important;
    border-right: 4px solid transparent !important;
    border-top: 5px solid #0d9488 !important;
}

/* AM/PM — compact clickable pill */
.flatpickr-time .flatpickr-am-pm {
    width: 46px !important;
    max-width: 46px !important;
    flex: 0 0 46px !important;
    margin: 5px 6px !important;
    height: 24px !important;
    line-height: 24px !important;
    padding: 0 !important;
    text-align: center !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    color: #fff !important;
    background: #0d9488 !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: background .15s ease !important;
}
.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time .flatpickr-am-pm:focus { background: #0f766e !important; color: #fff !important; }