.pull-right {
    float: left !important
}

.pull-left {
    float: right !important
}
/*
==================================
== RTL FIXES V2
==================================
*/

/* --- Header Info Popover Fix --- */
.popover {
    right: auto !important;
}

.main-header .navbar .navbar-nav > li > a > .fa-info-circle.pull-left {
    float: right !important;
}

/*
==================================
== FINAL RTL FIX: All Header Dropdowns (CSS-ONLY)
==================================
*/

/* This targets the User Menu dropdown (DaisyUI/Tailwind) */
[dir="rtl"] .tw-dw-dropdown-end > .tw-dw-dropdown-content {
    right: auto !important;
    left: 0 !important;
}

/* This targets the Notifications dropdown (Bootstrap/Tailwind Hybrid) */
[dir="rtl"] .notifications-menu > .dropdown-menu {
    left: 0 !important;
    right: auto !important;
}

/* This aligns the text inside the User Menu to the right */
[dir="rtl"] .tw-dw-dropdown.tw-text-left {
    text-align: right !important;
}

/*
==================================
== FINAL RTL FIX V2: Date Range Picker
==================================
*/

/* Force the main container to behave as RTL */
[dir="rtl"] .daterangepicker {
    direction: rtl !important;
    text-align: right !important;
}

/* Float the main sections correctly */
[dir="rtl"] .daterangepicker .ranges,
[dir="rtl"] .daterangepicker .drp-calendar {
    float: right !important;
}

/* Adjust the text alignment of the list items */
[dir="rtl"] .daterangepicker .ranges li {
    text-align: right !important;
}

/* --- Responsive Layout for Custom Range --- */

/* On screens larger than 564px */
@media (min-width: 565px) {
    [dir="rtl"] .daterangepicker.show-calendar .drp-calendar.left {
        margin-left: 8px !important;
        margin-right: 0 !important;
    }

    [dir="rtl"] .daterangepicker.show-calendar .ranges {
        width: auto !important;
    }
}

/* On smaller screens, stack them vertically */
@media (max-width: 564px) {
    [dir="rtl"] .daterangepicker .ranges,
    [dir="rtl"] .daterangepicker .drp-calendar {
        float: none !important;
        width: 100% !important;
        margin: 0 !important;
    }
}

/* Fix the apply/cancel buttons container */
[dir="rtl"] .daterangepicker .drp-buttons {
    text-align: left !important;
}

[dir="rtl"] .daterangepicker .drp-buttons .btn {
    margin-left: 0 !important;
    margin-right: 8px !important;
}

/* RTL Edit up up up up up */

/*
============================================================
== FINAL & COMPLETE SIDEBAR STYLES
============================================================
*/

/* --- 1. Main Sidebar Styles --- */
aside.side-bar > div {
    display: flex !important; flex-direction: column !important; gap: 8px !important;
    padding: 10px !important; background-color: #F5F5F5 !important;
}
.menu-item-wrapper { width: 100%; position: relative; }
aside.side-bar > div > .menu-item-wrapper > a {
    display: flex !important; flex-direction: row !important; align-items: center !important;
    justify-content: flex-start !important; width: 100% !important; height: 55px !important;
    padding: 0 15px !important; background-color: transparent !important;
    border-radius: 10px !important; transition: all 0.2s ease-in-out;
    border-right: 4px solid transparent;
}
[dir="ltr"] aside.side-bar > div > .menu-item-wrapper > a { border-right: none; border-left: 4px solid transparent; }
aside.side-bar > div > .menu-item-wrapper > a .menu-icon {
    font-size: 22px !important; color: #555 !important; width: 24px;
    text-align: center; transition: all 0.2s ease-in-out;
}
aside.side-bar > div > .menu-item-wrapper > a .menu-title {
    font-size: 16px !important; font-weight: 500 !important; color: #333 !important;
    margin-right: 15px; transition: all 0.2s ease-in-out;
}
[dir="ltr"] aside.side-bar > div > .menu-item-wrapper > a .menu-title { margin-right: 0; margin-left: 15px; }
aside.side-bar > div > .menu-item-wrapper > a:hover { background-color: #FFE1EB !important; }
aside.side-bar > div > .menu-item-wrapper > a:hover .menu-icon,
aside.side-bar > div > .menu-item-wrapper > a:hover .menu-title { color: #670D2F !important; }
aside.side-bar > div > .menu-item-wrapper > a.active { background-color: #FFE1EB !important; border-color: #670D2F !important; }
aside.side-bar > div > .menu-item-wrapper > a.active .menu-icon,
aside.side-bar > div > .menu-item-wrapper > a.active .menu-title { color: #670D2F !important; font-weight: 700 !important; }

/* --- 2. Submenu Panel (Desktop Flyout is the default) --- */
.sidebar-submenu-panel {
    display: none;
    position: absolute;
    top: 0; width: 240px; background-color: #FFFFFF !important;
    border-radius: 12px; padding: 10px; box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    border: 1px solid #e9ecef; z-index: 1000;
}
.sidebar-submenu-panel.is-visible {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
}
[dir="rtl"] .sidebar-submenu-panel { left: auto; right: 105%; }
[dir="ltr"] .sidebar-submenu-panel { right: auto; left: 105%; }
.sidebar-submenu-panel a {
    display: flex !important; align-items: center !important; justify-content: center !important;
    padding: 10px 5px !important; color: #670D2F !important; font-size: 13px !important;
    font-weight: 600 !important; border-radius: 8px !important; background-color: #FFFFFF !important;
    border: 1px solid #D1D5DB; text-align: center !important; min-height: 75px !important;
    word-break: break-word !important; transition: all 0.2s ease-in-out; box-shadow: none;
}
.sidebar-submenu-panel a:hover {
    border: 2px solid #670D2F !important; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.08);
}
.sidebar-submenu-panel a.active {
    background-color: #670D2F !important; color: #FFFFFF !important; border-color: #670D2F !important;
}

/* --- 3. RESPONSIVE OVERRIDE FOR MOBILE --- */
@media (max-width: 767px) {

    /* --- 1. Main Sidebar Container --- */
    aside.side-bar > div {
        display: block !important;
    }

    /* --- 2. Main Menu Item Styles --- */
    aside.side-bar > div > .menu-item-wrapper {
        margin-bottom: 8px; /* Adds space between main items */
    }
    aside.side-bar > div > .menu-item-wrapper:last-child {
        margin-bottom: 0;
    }
    aside.side-bar > div > .menu-item-wrapper > a {
        height: 60px !important;
    }

    /* --- 3. Accordion Submenu Panel (Correct Positioning + Beautiful Styling) --- */
    .sidebar-submenu-panel {
        /* --- Positioning rules from the first code block --- */
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        z-index: 1 !important;
        
        /* --- Styling rules from the second code block --- */
        width: 100% !important;
        display: none; /* Hide by default for JS toggle */
        margin-top: 8px;
        background-color: transparent !important; /* Panel is transparent */
        box-shadow: none !important;
        padding: 0 10px 5px 10px !important;
        border: none !important;
        border-radius: 0;
    }

    /* --- This rule makes it visible --- */
    .sidebar-submenu-panel.is-visible {
        display: block !important;
    }

    /* --- Styling for the links/cards INSIDE the accordion --- */
    .sidebar-submenu-panel a {
        display: flex !important;
        align-items: center;
        background-color: #FFFFFF !important; /* White background for each item */
        min-height: auto !important;
        padding: 12px 15px !important;
        color: #333 !important;
        font-weight: 500 !important;
        font-size: 15px !important;
        border: 1px solid #f0f0f0 !important;
        box-shadow: 0 2px 5px rgba(0,0,0,0.08) !important; /* Add shadow */
        border-radius: 8px !important; /* Rounded corners */
        margin-bottom: 8px !important; /* Add space between items */
        transform: none !important;
        text-align: right !important;
    }
    [dir="ltr"] .sidebar-submenu-panel a {
        text-align: left !important;
    }
    .sidebar-submenu-panel a:last-child {
        margin-bottom: 0 !important;
    }

    /* --- Hover & Active states for mobile --- */
    .sidebar-submenu-panel a:hover {
        color: #670D2F !important;
        border-color: #670D2F !important;
        background-color: #FFFFFF !important;
    }
    .sidebar-submenu-panel a.active {
        background-color: #670D2F !important;
        color: #FFFFFF !important;
        border-color: #670D2F !important;
    }
}

/*
==================================
FINAL & FLUID HOME PAGE SHORTCUTS
==================================
*/

/* --- 1. The Grid Container --- */
#home_shortcuts_grid {
    display: grid;
    gap: 1.5rem; /* Use relative units for gap */

    /* This is the key for a fluid grid:
     - It creates as many columns as can fit (auto-fit).
     - Each column will be at least 140px wide.
     - They will all grow equally to fill the available space (1fr).
    */
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

/* --- 2. The Link Wrapper & Card --- */
a.shortcut-link-wrapper {
    text-decoration: none !important;
    color: inherit !important;
}
#home_shortcuts_grid .shortcut-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    padding: 1.25rem; /* Use relative units */
    height: 100%; /* Height will be determined by the grid row */
    min-height: 140px; /* Minimum height for cards */
    transition: all 0.2s ease-in-out;
}
a.shortcut-link-wrapper:hover .shortcut-card {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* --- 3. Icon & Title Styles (Now scalable) --- */
.shortcut-icon {
    /* Font size will scale based on the parent's font size */
    font-size: 2.25em; /* Approx 36px */
    margin-bottom: 1rem;
}
.shortcut-icon i, .shortcut-icon svg {
    width: 1em; /* Width will now scale with the font size */
    height: 1em;
}
.shortcut-title {
    font-size: 1em; /* Approx 16px, but will scale */
    font-weight: 600;
    text-align: center;
}

/* --- 4. Card Colors (Unchanged) --- */
.card-color-1 .shortcut-card { background-color: #670D2F; }
.card-color-2 .shortcut-card { background-color: #0369a1; }
.card-color-3 .shortcut-card { background-color: #15803d; }
.card-color-4 .shortcut-card { background-color: #be123c; }
.card-color-5 .shortcut-card { background-color: #581c87; }
.card-color-6 .shortcut-card { background-color: #b45309; }
.card-color-7 .shortcut-card { background-color: #0f766e; }
.card-color-8 .shortcut-card { background-color: #3730a3; }
.card-color-9 .shortcut-card { background-color: #86198f; }

/* --- 5. Text & Icon color (Unchanged) --- */
#home_shortcuts_grid .shortcut-card,
#home_shortcuts_grid .shortcut-card .shortcut-icon,
#home_shortcuts_grid .shortcut-card .shortcut-title {
    color: #FFFFFF !important;
}

/*
==================================
COMPLETE THEME COLOR: BURGUNDY
==================================
*/

/* --- Main Header, Logo & Navbar --- */
.tw-bg-gradient-to-r.tw-from-burgundy-800 {
    --tw-gradient-from: #670D2F !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.tw-bg-gradient-to-r.tw-to-burgundy-900 {
    --tw-gradient-to: #5a0b28 !important;
}

/* --- Sidebar Top Section --- */
.tw-bg-burgundy-800 {
    background-color: #670D2F !important;
}
.hover\:tw-bg-burgundy-700:hover {
    background-color: #5a0b28 !important;
}

/* --- Buttons & Links --- */
.btn-primary, .btn-primary:focus {
    background-color: #670D2F !important;
    border-color: #5a0b28 !important;
}
.btn-primary:hover, .btn-primary:active, .btn-primary.hover {
    background-color: #5a0b28 !important;
}

/* --- Other UI Elements --- */
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
    background-color: #670D2F !important;
    border-color: #670D2F !important;
}
.nav-tabs-custom > .nav-tabs > li.active {
    border-top-color: #670D2F !important;
}
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
    background-color: #670D2F !important;
}
.label-primary,
.modal-primary .modal-header,
.modal-primary .modal-footer {
    background-color: #670D2F !important;
}
.box.box-primary {
    border-top-color: #670D2F !important;
}

/*
==================================
== FINAL & COMPLETE FONT OVERRIDE (Tajawal)
==================================
*/
body,
html,
h1, h2, h3, h4, h5, h6,
p, span, a,
input, button, select, textarea,
.form-control, .select2-selection__rendered,
.main-header .logo,
.main-header .navbar,
.main-sidebar,
.content-wrapper,
.main-footer,
.daterangepicker,
.ranges ul li,
.ui-widget,
.dataTables_wrapper,
.fc button,
.modal-title,
.modal-body,
.tw-bg-gradient-to-r h1,
.modal-footer {
    font-family: 'Tajawal', sans-serif !important;
}

/*
==================================
== POS Custom
==================================
*/
#pos_layout_container {
    display: flex;
    gap: 10px;
    height: calc(100vh - 80px); /* Full height minus header & padding */
}

#pos_quick_actions_bar {
    flex: 0 0 70px; /* Fixed width */
}

#pos_bill_container {
    flex: 0 0 450px; /* Fixed width */
}

#pos_products_container {
    flex: 1; /* Takes remaining space */
    display: flex;
    flex-direction: column;
}

.product_area_body_wrapper {
    flex: 1;
    display: flex;
    gap: 10px;
    overflow: hidden;
}

#product_list_body {
    flex: 1;
    overflow-y: auto;
}

#pos_category_bar {
    flex: 0 0 200px; /* Fixed width */
    overflow-y: auto;
}

/*
============================================================
== HOME SCREEN CARDS: V4 - CSS-ONLY STYLING
== BY GEMINI
============================================================
*/

/* --- Card 1: Total Sales (Green Gradient) --- */

/* Select the parent div of the card by looking for the element with the class "total_sell" inside it */
.tw-grid > div:has(p.total_sell) {
    background: linear-gradient(135deg, #22c55e 0%, #0d9488 100%) !important;
    border: none !important;
    color: #fff !important;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

/* Add the overlay effect */
.tw-grid > div:has(p.total_sell)::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at top right, rgba(255, 255, 255, 0.2), transparent);
}

/* Ensure the card content is on top of the overlay */
.tw-grid > div:has(p.total_sell) > .tw-p-4 {
    position: relative;
    z-index: 1;
}

/* Style the icon container */
.tw-grid > div:has(p.total_sell) .tw-shrink-0 {
    width: 3.5rem !important; /* Equivalent to tw-w-14 */
    height: 3.5rem !important; /* Equivalent to tw-h-14 */
    background-color: rgba(255, 255, 255, 0.2) !important;
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
}

/* Style the icon itself (the SVG) */
.tw-grid > div:has(p.total_sell) .tw-shrink-0 svg {
    width: 2rem !important; /* Equivalent to tw-w-8 */
    height: 2rem !important; /* Equivalent to tw-h-8 */
    color: #fff !important;
}

/* Style the title text ("اجمالي المبيعات") */
.tw-grid > div:has(p.total_sell) .tw-text-gray-500 {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Style the value text (the number) */
.tw-grid > div:has(p.total_sell) .total_sell {
    color: #FFFFFF !important;
    font-size: 1.5rem !important; /* Equivalent to tw-text-2xl */
    font-weight: 700 !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}

/* --- Card 2: Net (Blue/Purple Gradient) --- */

/* Select the parent div by looking for the "net" class */
.tw-grid > div:has(p.net) {
    background-image: linear-gradient(to bottom right, #3b82f6, #9333ea) !important;
    border: none !important;
    color: #fff !important;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

/* Style the icon container */
.tw-grid > div:has(p.net) .tw-shrink-0 {
    width: 3.5rem !important; /* Equivalent to tw-w-14 */
    height: 3.5rem !important; /* Equivalent to tw-h-14 */
    background-color: rgba(255, 255, 255, 0.15) !important;
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
}

/* Hide the original SVG icon */
.tw-grid > div:has(p.net) .tw-shrink-0 svg {
    display: none;
}

/* Add the new SVG icon using a pseudo-element */
.tw-grid > div:has(p.net) .tw-shrink-0::before {
    content: '';
    display: block;
    width: 2rem; /* tw-w-8 */
    height: 2rem; /* tw-h-8 */
    background-color: white;
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3v18"/><path d="M17 8.5a5 5 0 0 0-10 0c0 2.5 2.5 4 5 4s5 1.5 5 4a5 5 0 0 1-10 0"/></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3v18"/><path d="M17 8.5a5 5 0 0 0-10 0c0 2.5 2.5 4 5 4s5 1.5 5 4a5 5 0 0 1-10 0"/></svg>');
}


/* Style the title text */
.tw-grid > div:has(p.net) .tw-text-gray-500 {
    color: #fff !important;
}

/* Style the value text */
.tw-grid > div:has(p.net) .net {
    color: #FFFFFF !important;
    font-size: 1.5rem !important; /* Equivalent to tw-text-2xl */
    font-weight: 700 !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}

/* --- Card 3: Invoice Due (Red/Orange Gradient) --- */
.tw-grid > div:has(p.invoice_due) {
    background-image: linear-gradient(to bottom right, #ef4444, #ea580c) !important;
    border: none !important;
    color: #fff !important;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}
.tw-grid > div:has(p.invoice_due) .tw-shrink-0 {
    width: 3.5rem !important;
    height: 3.5rem !important;
    background-color: rgba(255, 255, 255, 0.15) !important;
}
.tw-grid > div:has(p.invoice_due) .tw-shrink-0 svg {
    display: none;
}
.tw-grid > div:has(p.invoice_due) .tw-shrink-0::before {
    content: '';
    display: block;
    width: 2rem;
    height: 2rem;
    background-color: white;
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><path d="M9 7h1" /><path d="M9 13h6" /><path d="M13 17h2" /></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><path d="M9 7h1" /><path d="M9 13h6" /><path d="M13 17h2" /></svg>');
}
.tw-grid > div:has(p.invoice_due) .tw-text-gray-500 {
    color: #fff !important;
}
.tw-grid > div:has(p.invoice_due) .invoice_due {
    color: #FFFFFF !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}

/* --- Card 4: Total Sell Return (Blue/Dark Blue Gradient) --- */
.tw-grid > div:has(p.total_sell_return) {
    background-image: linear-gradient(to bottom right, #3b82f6, #1e40af) !important;
    border: none !important;
    color: #fff !important;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}
.tw-grid > div:has(p.total_sell_return) .tw-shrink-0 {
    width: 3.5rem !important;
    height: 3.5rem !important;
    background-color: rgba(255, 255, 255, 0.15) !important;
}
.tw-grid > div:has(p.total_sell_return) .tw-shrink-0 svg {
    display: none;
}
.tw-grid > div:has(p.total_sell_return) .tw-shrink-0::before {
    content: '';
    display: block;
    width: 2rem;
    height: 2rem;
    background-color: white;
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M21 7H3" /><path d="M18 10l3-3-3-3" /><path d="M6 20l-3-3 3-3" /><path d="M3 17h18" /></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M21 7H3" /><path d="M18 10l3-3-3-3" /><path d="M6 20l-3-3 3-3" /><path d="M3 17h18" /></svg>');
}
.tw-grid > div:has(p.total_sell_return) .tw-text-gray-500 {
    color: #fff !important;
}
.tw-grid > div:has(p.total_sell_return) .total_sell_return {
    color: #FFFFFF !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}

/* --- Card 5: Total Purchase (CORRECTED ICON) --- */
.tw-grid > div:has(p.total_purchase) {
    background: linear-gradient(135deg, #6366f1 0%, #0ea5e9 100%) !important;
    border: none !important; color: #fff !important; position: relative; overflow: hidden; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}
.tw-grid > div:has(p.total_purchase)::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at top right, rgba(255, 255, 255, 0.2), transparent);
}
.tw-grid > div:has(p.total_purchase) .tw-shrink-0 {
    width: 3.5rem !important;
    height: 3.5rem !important;
    background-color: rgba(255, 255, 255, 0.2) !important;
}
/* Hide the original icon */
.tw-grid > div:has(p.total_purchase) .tw-shrink-0 svg {
    display: none;
}
/* Apply the new icon as a mask */
.tw-grid > div:has(p.total_purchase) .tw-shrink-0 {
    content: '';
    display: block;
    width: 3rem; /* 48px */
    height: 3rem; /* 48px */
    background-color: white;
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3v12" /><path d="M16 11l-4 4l-4 -4" /><path d="M3 12a9 9 0 0 0 18 0" /></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3v12" /><path d="M16 11l-4 4l-4 -4" /><path d="M3 12a9 9 0 0 0 18 0" /></svg>');
}
/* Style the title text */
.tw-grid > div:has(p.total_purchase) .tw-text-gray-500 {
    color: rgba(255, 255, 255, 0.9) !important;
}
/* Style the value text */
.tw-grid > div:has(p.total_purchase) .total_purchase {
    color: #FFFFFF !important;
    font-size: 1.5rem !important; /* Equivalent to tw-text-2xl */
    font-weight: 700 !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}

/*
==================================
== POS PRODUCTS GRID (5 per row on desktop)
== - لا ارتفاع ثابت
== - مسافات نسبة مئوية متجاوبة
== - تجاوب مضبوط بالميديا كويري
== - دون التأثير على باقي الصفحات
==================================
*/

/* الحاوية: نفعل Flex ونضبط مسافات خارجية سلبية لتعويض حشوات العناصر */
#product_list_body {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    margin-left: -0.6%;
    margin-right: -0.6%;
}

/* العنصر: نلغي تأثير أعمدة Bootstrap داخل هذه الحاوية فقط */
#product_list_body .product_list {
    box-sizing: border-box;
    float: none !important;          /* إلغاء الـ float من أعمدة Bootstrap */
    padding-left: 0.6%;
    padding-right: 0.6%;
    margin-bottom: 1.2%;
    max-width: 100%;
    height: auto !important;         /* الارتفاع طبيعي */
}

/* الموبايل: 2 في الصف */
@media (max-width: 767.98px) {
    #product_list_body .product_list { width: 50% !important; }
}

/* التابلت: 3 في الصف */
@media (min-width: 768px) and (max-width: 991.98px) {
    #product_list_body .product_list { width: 33.333% !important; }
}

/* لابتوب: 4 في الصف */
@media (min-width: 992px) and (max-width: 1199.98px) {
    #product_list_body .product_list { width: 25% !important; }
}

/* ديسكتوب كبير: 5 في الصف */
@media (min-width: 1200px) {
    #product_list_body .product_list { width: 20% !important; }
}

/* تحسينات خفيفة على صندوق المنتج بدون تثبيت ارتفاع */
#product_list_body .product_box {
    width: 100%;
    height: auto !important;
    border-radius: 8px;
    transition: transform .2s ease, box-shadow .2s ease;
}
#product_list_body .product_box:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0,0,0,.12);
}

/* نص وعناصر داخل البطاقة تبقى مرنة وتتدفق طبيعياً */
#product_list_body .text_div {
    padding: 6px 4px;
    text-align: center;
}
#product_list_body .text_div small {
    display: block;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}