@charset "UTF-8";

/* ==========================================================================
   MenuSoft - unified stylesheet (css/app.css)
   Layers: 1) tokens+base+shell  2) shared components  3) per-page sections  4) late overrides
   Per-page rules are scoped with :where(body.page-<name>) -> zero extra specificity.
   <body> gets class "page-<name>" automatically (see includes/header.php).
   ========================================================================== */

/* ==========================================================================
   FONTS
   ========================================================================== */
/* Vazir (Vazirmatn) - self-hosted: Regular 400 / Medium 500 / Bold 700 */
@font-face { font-family:'vazir'; src:url('../assets/fonts/vazirmatn/Vazirmatn-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'vazir'; src:url('../assets/fonts/vazirmatn/Vazirmatn-Medium.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'vazir'; src:url('../assets/fonts/vazirmatn/Vazirmatn-Bold.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }

/* ==========================================================================
   GLOBAL / SHELL  (style.css)
   source: css/style.css
   ========================================================================== */
:root {
    /* --- logo palette (SariPik) --- */
    --brand-navy: #02174a;
    --brand-navy-deep: #000b29;
    --brand-blue: #1e7bff;
    --brand-cyan: #00c8ff;
    --brand-orange: #ff7a00;
    --brand-yellow: #ffc400;
    /* --- semantic --- */
    --primary-color: #f06a00;
    --primary-light: #ffa24d;
    --primary-dark: #d65a00;
    --primary-soft: rgba(240, 106, 0, 0.10);
    --secondary-color: #1e7bff;
    --accent-color: #00c8ff;
    --success-color: #12a594;
    --warning-color: #ffc400;
    --danger-color: #e5484d;
    --info-color: #1e7bff;
    /* --- text / surfaces --- */
    --text-primary: #0b1a3d;
    --text-secondary: #5b6b8c;
    --text-light: #9aa6c0;
    --bg-primary: #ffffff;
    --bg-secondary: #f3f6fc;
    --bg-dark: #02174a;
    --border-color: #e2e8f4;
    /* --- depth / shape --- */
    --shadow-sm: 0 1px 2px rgba(2, 23, 74, 0.05);
    --shadow-md: 0 1px 3px rgba(2, 23, 74, 0.07), 0 1px 2px rgba(2, 23, 74, 0.04);
    --shadow-lg: 0 14px 34px rgba(2, 23, 74, 0.16);
    --header-height: 70px;
    --sidebar-width: 250px;
    --footer-height: 60px;
    --border-radius: 12px;
    --radius-sm: 8px;
    --transition: all 0.2s ease;
    /* --- typography (Vazir) --- */
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-bold: 700;
}
.dark-mode {
    --bg-primary: #07194a;
    --bg-secondary: #020d2e;
    --bg-dark: #000b29;
    --text-primary: #eef2ff;
    --text-secondary: #a8b4d6;
    --text-light: #6c7aa3;
    --border-color: #162a66;
    --primary-soft: rgba(255, 140, 40, 0.16);
    --shadow-md: 0 1px 3px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 14px 34px rgba(0, 0, 0, 0.55);
}

/* ریست استایل‌ها */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family:'vazir';
}

body {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    transition: var(--transition);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    
}
              .paragraph {
                    width: 100%;
                    max-width:700px;
                    background-color: rgba(240, 106, 0, 0.1);
                    color: var(--text-primary);
                    border-radius: 10px;
                    box-shadow: var(--shadow-lg);
                    z-index: 100;
                }
                
                .p-header {
                    padding: 15px;
                    background-color: var(--bg-primary);
                    color: var(--text-primary);
                    border-top-left-radius: 10px;
                    border-top-right-radius: 10px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                }
                .p-title {
                    margin: 0;
                    font-size: 1rem;
                    display: flex;
                    align-items: center;
                    gap: 10px;
                }
                .p-body {
                    padding: 20px;
                }
                .p-info {
                    display: flex;
                    align-items: center;
                    gap: 10px;
                    margin-bottom: 15px;
                }

                .p-content {
                    line-height: 1.6;
                    margin-bottom: 20px;
                }

                .p-footer {
                    padding: 15px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                }
                
/* ==================== هدر ==================== */
header {
    background-color: var(--bg-primary);
    height: var(--header-height);
    box-shadow: var(--shadow-md);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    transition: var(--transition);
    height:90px;
    padding-top:30px;
    
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    padding: 0 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

.header-right, .header-left {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.sidebar-toggle {
    background: none;
    border: none;
    font-size: 1.2rem;
    color: var(--text-primary);
    cursor: pointer;
    display: none;
}

.app-brand {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.app-logo {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    overflow: hidden;
}

.app-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.theme-toggle {
    background: none;
    border: none;
    font-size: 1.2rem;
    color: var(--text-primary);
    cursor: pointer;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.theme-toggle:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.user-drup {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    cursor: pointer;
    padding: 0.5rem 0.8rem;
    border-radius: 50px;
    transition: var(--transition);
}

.user-drup:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.user-avatar {
    width: 46px;
    
    border-radius: 50%;
    padding:5px;
    overflow: hidden;
}

.user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-name {
    font-size: 0.9rem;
    font-weight: 500;
}

.drup-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    background-color: var(--bg-primary);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    width: 200px;
    padding: 0.5rem 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: var(--transition);
    z-index: 1100;
}

.user-drup:hover .drup-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.drup-menu a {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.7rem 1.2rem;
    color: var(--text-primary);
    text-decoration: none;
    transition: var(--transition);
}

.drup-menu a:hover {
    background-color: var(--bg-secondary);
    color: var(--primary-color);
}

.drup-menu a i {
    width: 20px;
    text-align: center;
}

/* ==================== سایدبار ==================== */
.sidebar {
    width: var(--sidebar-width);
    background-color: var(--bg-primary);
    position: fixed;
    top: var(--header-height);
    right: 0;
    bottom: 0;
    overflow-y: auto;
    transition: var(--transition);
    box-shadow: var(--shadow-md);
    z-index: 900;
    display: flex;
    flex-direction: column;
}

.sidebar-header {
    padding: 1.2rem 1.5rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.sidebar-header h3 {
    font-size: 1rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
}



/* استایل‌های اصلی منو */
.main-menu {
    list-style: none;
    padding: 1rem 0;
}

.main-menu > li > a {
    display: flex;
    align-items: center;
    padding: 0.8rem 1rem;
    color: var(--text-primary);
    text-decoration: none;
    transition: var(--transition);
    border-right: 3px solid transparent;
}

.main-menu > li > a:hover {
    background-color: rgba(0, 0, 0, 0.03);
    color: var(--primary-color);
}

/* استایل حالت فعال */
.main-menu > li.active > a {
    background-color: rgba(240, 106, 0, 0.1);
    color: var(--primary-color);
    border-right:10px solid var(--text-primary);
}

/* آیکون‌ها */
.main-menu > li > a i {
    margin-left: 10px;
    font-size: 1.1rem;
    width: 24px;
    text-align: center;
}


.badge {
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
    border-radius: 50px;
    margin-right: 5px;
}

.badge.new {
    background-color: var(--accent-color);
    color: white;
}

.has-submenu {
    position: relative;
}

.submenu {
    list-style: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background-color: rgba(0, 0, 0, 0.02);
    padding-left: 0;
}

.dark-mode .submenu {
    background-color: rgba(255, 255, 255, 0.05);
}

.submenu li a {
    display: block;
    padding: 0.7rem 1.5rem 0.7rem 3.5rem;
    color: var(--text-secondary);
    text-decoration: none;
    transition: all 0.2s ease;
    font-size: 0.9rem;
    position: relative;
}

.submenu li a:hover {
    color: var(--primary-color);
    background-color: rgba(0, 0, 0, 0.03);
}

.submenu li a.active {
    color: var(--primary-color);
    font-weight: 500;
}

.submenu li a.active:before {
    content: '';
    position: absolute;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--primary-color);
}

/* ==================== محتوای اصلی ==================== */
.app-container {
	margin-right:var(--sidebar-width);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.main-content {
    margin-right: var(--sidebar-width);
    margin-top: var(--header-height);
    padding: 2rem;
    flex-grow: 1;
    transition: var(--transition);
    max-width: 1400px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* ==================== فوتر ==================== */
footer {
    background-color: var(--bg-primary);
    height: var(--footer-height);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
    transition: var(--transition);
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    padding: 0 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

.footer-right p {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.footer-left {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.version-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.status-dot.online {
    background-color: var(--success-color);
}

.status-dot.offline {
    background-color: var(--danger-color);
}

.footer-links {
    display: flex;
    gap: 1.5rem;
}

.footer-links a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.8rem;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.footer-links a:hover {
    color: var(--primary-color);
}

.footer-links a i {
    font-size: 0.9rem;
}

/* ==================== مودال‌ها ==================== */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    opacity: 0;
    transition: var(--transition);
}

.modal.active {
    display: flex;
    opacity: 1;
}

.modal-content {
    background-color: var(--bg-primary);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    transform: translateY(20px);
    transition: var(--transition);
}

.modal.active .modal-content {
    transform: translateY(0);
}

.status-modal {
    width: 350px;
    max-width: 90%;
    overflow: hidden;
}

.status-content {
    padding: 1.5rem;
    text-align: center;
}

.status-content i {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.status-content span {
    display: block;
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.status-content p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.6;
}

.status-content.online i {
    color: var(--success-color);
}

.status-content.offline i {
    color: var(--danger-color);
}



/* ==================== حالت موبایل ==================== */
@media screen and (max-width: 768px) {
    :root {
        --sidebar-width: 0;
    }
    
    .sidebar {
        width: 280px;
        right: -280px;
        z-index: 1100;
        box-shadow: 5px 0 15px rgba(0, 0, 0, 0.1);
    }
    
    .sidebar.active {
        right: 0;
    }
    
    .sidebar-toggle {
        display: block;
    }
    
    .main-content {
        margin-right: 0;
        padding: 1.5rem;
    }
    
    .header-container {
        padding: 0 1rem;
    }
    
    .app-brand h1 {
        display: none;
    }
    
    .user-name {
        display: none;
    }
    
    .drup-menu {
        left: auto;
        right: 0;
    }
    
    .footer-content {
        flex-direction: column;
        padding: 1rem;
        gap: 1rem;
        text-align: center;
    }
    
    .footer-left {
        flex-direction: column;
        gap: 0.9rem;
    }
    
    .footer-links {
        gap: 1rem;
    }
    
    .modal-content {
        width: 95%;
      }
    
    
}

/* ==========================================================================
   GLOBAL / SHELL  (mobile.css)
   source: css/mobile.css
   ========================================================================== */
@media screen and (max-width: 768px) {
    :root {
        --sidebar-width: 0;
    }
    
    header {
    background-color: var(--bg-primary);
    height: var(--header-height);
    box-shadow: var(--shadow-md);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    transition: var(--transition);
    height:70px;
    padding-top:0px;
}
    
    .sidebar {
        width: 250px;
        right: -280px;
        z-index: 9999;
        box-shadow: 5px 0 15px rgba(0, 0, 0, 0.1);
    }
    
    .sidebar.active {
        right: 0;
    }
    
    .sidebar-toggle {
        display: block;
    }
    
    .main-content {
        margin-right: 0;
        padding: 1.5rem;
    }
    
    .header-container {
        padding: 0 1rem;
    }
    
    .app-brand h1 {
        display: none;
    }
    
    .user-name {
        display: none;
    }
    
    .drup-menu {
        left: 0px;
        right:auto;
    }
    
    .footer-content {
        flex-direction: column;
        padding: 1rem;
        gap: 1rem;
        text-align: center;
    }
    
    .footer-left {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .footer-links {
        gap: 1rem;
    }
    
    .modal-content {
        width: 95%;
    }
}

/* ==========================================================================
   GLOBAL / SHELL  (persian-calc.css)
   source: css/persian-calc.css
   ========================================================================== */
/* استایل برای container اصلی */
.date-input-container {
    display: flex;
    align-items: stretch;
    width: 100%; /* عرض کلی را تنظیم کنید */
    border: 1px solid #ccc;
    border-radius: 4px;
    overflow: hidden;
}

/* استایل برای فیلد ورودی (کوچکتر) */
input.pdate {
    flex: 1;
    min-width: 0; /* برای جلوگیری از overflow */
    border: none;
    outline: none;
    padding: 8px 12px;
    text-align: center;
    margin: 0;
    height: auto;
}

/* استایل برای دکمه تقویم (بزرگتر) */
a.pcalBtn {
    flex: 0 0 60px; /* عرض ثابت برای دکمه */
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url("pcal.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px 24px; /* اندازه تصویر */
    background-color: #f8f9fa;
    border: none;
    border-left: 1px solid #ccc;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s;
    height: auto;
    margin: 0;
}

a.pcalBtn:hover {
    background-color: #e9ecef;
    box-shadow: none;
}

a.pcalBtn:focus {
    outline: none;
    background-color: #e9ecef;
}

input.valid {
	background-color: #e5fae2;
}

input.invalid {
	background-color: #fee5e7;
}

div.picker {
	direction: rtl;
	background-color: #fff;
	border: 2px solid #999999;
	position: absolute;
	padding: 3px;
	box-shadow: 1px 1px 2px rgba( 0, 0, 0, 0.3 );
	border-radius: 6px 0px 6px 6px;
}

div.picker table{
	border-collapse: collapse;
	border-spacing: 0px;
	border: 1px solid #bbb;
	background-color: #eee;
	font: 13px Tahoma;
}

div.picker td {
	width: 2em;
	border: 1px solid #bbb;
	text-align: center;
	padding: 0px;
}

div.picker div.navBack {
/*	float: right;
	uncommenting this line breaks IE display of element
	in some unknown situations !
*/
}

div.picker div.navBack a{
	float: right;
}

div.picker div.navFwd {
	float: left;
}

div.picker div.navFwd a {
	float: left;
}

div.picker span.navInfo {
	padding: 5px 0px;
	display: inline-block;
}

div.picker td.pickerHead a {
	padding: 5px;
}

div.picker td.pickerHead a.nav {
	display: block;
}

div.picker td.pickerHead a.monYear {
	display: inline-block;
	padding-left: 1px;
	padding-right: 1px;
}

div.picker a.weekday {
	display: block;
	padding: 2px 0px;
}

div.picker a.friday {
	background-color: #ffcccc;
}

div.picker a.selected {
	background-color: #CCFFCC;
}

div.picker a.today {
	background-color: #fff5cc;
}

div.picker td.calWeekdays {
	background-color: #BBBBBB;
	color: #FFFFFF;
	font-weight: bold;
	text-align: center;
	padding-top: 3px;
	padding-bottom: 2px;
}

div.picker td.pickerFoot a {
	display: block;
	padding: 2px;
}

div.picker a {
	text-decoration: none;
	color: #333;
	-moz-transition: all 0.1s cubic-bezier(0,1,1,0);
	-webkit-transition: all 0.1s cubic-bezier(0,1,1,0);
	-o-transition: all 0.1s cubic-bezier(0,1,1,0);
	transition: all 0.1s cubic-bezier(0,1,1,0);
}

div.picker a:hover {
	text-decoration: none;
	color: #004;
	background-color: #66CCFF;
}

div.monthYearPicker {
	background-color: #EEEEEE;
	border: solid 2px #999;
	border-radius: 3px;
	box-shadow: 1px 1px 2px rgba( 0, 0, 0, 0.3 );
	text-align: center;
	position: absolute;
	font: 13px Tahoma;
}

div.monthYearPicker a {
	text-decoration: none;
	color: #333;
	-moz-transition: all 0.1s cubic-bezier(0,1,1,0);
	-webkit-transition: all 0.1s cubic-bezier(0,1,1,0);
	-o-transition: all 0.1s cubic-bezier(0,1,1,0);
	transition: all 0.1s cubic-bezier(0,1,1,0);
	display: block;
	padding: 5px;
}

div.monthYearPicker a.selected {
	background-color: #CCFFCC;
}

div.monthYearPicker a:hover {
	text-decoration: none;
	color: #004;
	background-color: #66CCFF;
}

/* ==========================================================================
   GLOBAL / SHELL  (sidebar-locked.css)
   source: css/sidebar-locked.css
   ========================================================================== */
/* ===== Locked Menu Items ===== */
a.locked {
    opacity: 0.65;
    cursor: not-allowed;
    pointer-events: auto !important;
}

a.locked .icon-wrap {
    position: relative;
    display: inline-block;
}

a.locked .icon-wrap .lock-badge {
    position: absolute;
    top: -5px;
    right: -7px;
    font-size: 8px;
    color: #c0392b;
    background: transparent;
}

/* ===== Toast ===== */
#s_toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: #2d2d2d;
    color: #fff;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 13px;
    font-family: Vazirmatn, sans-serif;
    direction: rtl;
    white-space: nowrap;
    z-index: 99999;
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
    border-right: 4px solid #c0392b;
}

#s_toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ==========================================================================
   GLOBAL / SHELL  (header.php)
   source: includes/header.php
   ========================================================================== */
.connection-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 16px 20px;
    min-width: 300px;
    z-index: 10000;
    transform: translateX(400px);
    opacity: 0;
    transition: all 0.3s ease;
    direction: rtl;
}

.connection-notification.show {
    transform: translateX(0);
    opacity: 1;
}

.connection-notification.offline {
    background: #fff3cd;
    border-right: 4px solid #ffc107;
}

.connection-notification.online {
    background: #d4edda;
    border-right: 4px solid #28a745;
}

.notification-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.connection-notification i.fa-exclamation-circle {
    color: #ffc107;
    font-size: 20px;
}

.connection-notification i.fa-wifi {
    color: #28a745;
    font-size: 20px;
}

.notification-content span {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    color: #333;
}

.close-notification {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: #666;
    transition: color 0.2s;
    font-size: 16px;
}

.close-notification:hover {
    color: #333;
}

/* حالت موبایل */
@media (max-width: 768px) {
    .connection-notification {
        right: 10px;
        left: 10px;
        min-width: auto;
        top: 10px;
    }
}
        /* --- دکمه چت (بدون تغییر) --- */
        .chat-button {
            position: fixed;
            left: 10px;
            bottom: 10px;
            width: 50px;
            height: 50px;
            background: linear-gradient(145deg, #0e7a70, #2eb894);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
            transition: all 0.3s ease;
            text-decoration: none;
            z-index: 1000;
        }
        
        .chat-button i {
            font-size: 25px;
            color: white;
        }

        /* --- انیمیشن Pulse --- */
        .chat-button::before {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: linear-gradient(145deg, #0e7a70, #2eb894);
            z-index: -1;
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0% { transform: scale(1); opacity: 0.8; }
            100% { transform: scale(1.8); opacity: 0; }
        }

        /* --- انیمیشن Shake هنگام هاور --- */
        .chat-button:hover {
            transform: scale(1.1) rotate(5deg);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
        }

        .chat-button:hover i {
            animation: shake 0.5s ease-in-out;
        }

        @keyframes shake {
            0%, 100% { transform: rotate(0deg); }
            25% { transform: rotate(-10deg); }
            75% { transform: rotate(10deg); }
        }

        /* ==================== پاپآپ حبابی ==================== */
        .chat-popup {
            position: fixed;
            left: 70px;
            bottom: 25px;
            width: 200px;
            background: linear-gradient(145deg, #0e7a70, #2eb894);
            border-radius: 15px;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
            animation: popIn 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
            z-index: 999;
            
        }

        @keyframes popIn {
            0% {
                opacity: 0;
                transform: scale(0.3) translateX(20px);
            }
            70% {
                transform: scale(1.05) translateX(-5px);
            }
            100% {
                opacity: 1;
                transform: scale(1) translateX(0);
            }
        }

        /* مخفی کردن پاپآپ */
        .chat-popup.hidden {
            display: none;
        }

        /* بدنه پاپآپ */
        .popup-content {
            padding: 12px 15px;
            color: white;
            font-size: 13px;
            line-height: 1.5;
            position: relative;
        }

        .popup-content p {
            margin: 0;
        }

        /* دکمه بستن */
        .popup-close {
            position: absolute;
            top: 5px;
            left: 8px;
            background: rgba(255, 255, 255, 0.2);
            border: none;
            color: white;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            cursor: pointer;
            font-size: 12px;
            line-height: 1;
            transition: all 0.3s ease;
        }

        .popup-close:hover {
            background: rgba(255, 255, 255, 0.4);
            transform: rotate(90deg);
        }

        /* فلش حباب (مثلث کوچک) */
        .popup-arrow {
            position: absolute;
            left: -8px;
            bottom: 18px;
            width: 0;
            height: 0;
            border-top: 8px solid transparent;
            border-bottom: 8px solid transparent;
            border-right: 8px solid #0e7a70;
        }

/* ==========================================================================
   GLOBAL / SHELL  (index.php)
   source: index.php
   ========================================================================== */
.order-disabled {
  position: relative;
  width: 100%;
  min-height: 100px;
  pointer-events: none;
  max-width: 1200px;
  margin: 0 auto;
  overflow: hidden; /* اضافه شده برای جلوگیری از تاثیر منفی روی چیدمان */
}

.order-disabled::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 100;
  pointer-events: none;
}

.overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 1.5em;
  z-index: 101;
  text-align: center;
  pointer-events: none;
}

.order-disabled * {
  pointer-events: none;
  opacity: 0.9;
}

.alert-box {
  position: relative;
  padding: 16px 20px;
  margin: -100px;
  border-radius: 8px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  max-width: 600px;
  animation: fadeIn--global 0.3s ease-out;
  border-left: 4px solid;
  z-index: 102;
}
  
  /* انواع هشدار */
  .warning {
    background-color: #FFF3E0;
    border-color: #FFA000;
    color: #E65100;
  }
  
  .error {
    background-color: #FFEBEE;
    border-color: #F44336;
    color: #C62828;
  }
  
  .success {
    background-color: #E8F5E9;
    border-color: #4CAF50;
    color: #2E7D32;
  }
  
  .info {
    background-color: #E3F2FD;
    border-color: #2196F3;
    color: #1565C0;
  }
  
  .alert-icon {
    font-size: 40px;
    margin-top: 2px;
    flex-shrink: 0;
  }
  
  .alert-icon svg {
    width: 40px;
    height: 40px;
  }
  
  .alert-content {
    flex-grow: 1;
  }
  
  .alert-title {
    margin: 0 0 6px 0;
    font-size: 1em;
    font-weight: bold;
  }
  
  .alert-message {
    margin: 0;
    font-size: 0.80em;
    line-height: 1.5;
  }
  
  .alert-close {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    padding: 0;
    margin-left: 8px;
    color: inherit;
    opacity: 0.7;
    transition: opacity 0.2s;
    flex-shrink: 0;
  }
  
  .alert-close:hover {
    opacity: 1;
  }
  
  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }
  
  /* حالت ریسپانسیو */
  @media (max-width: 480px) {
    .alert-box {
      flex-direction: column;
      gap: 8px;
    }
    
    .alert-icon {
      align-self: center;
    }
  }  
  
  /* استایل بخش سفارشات */
#ordersContainer {
    position: relative;
    border-radius: var(--border-radius);
    border: 1px solid rgba(0, 0, 0, 0.1);
    background-color:transparent;;
    padding: 5px;
    margin: 0;
    transition: var(--transition);
    min-height: 200px;
    max-width: 1000px;
    width: calc(100% - 40px);
}

#ordersContainer .new {
    background-color: var(--bg-primary);
    position: absolute;
    top: -13px;
    right: 20px;
    font-family:BHoma;
    color: var(--primary-color);
    font-size: 1.1rem;
    padding: 0 10px;
    z-index: 1;
}

#ordersList {
    list-style: none;
    padding: 0;
    margin: 0;
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
}

#ordersList li {
    margin-bottom: 15px;
    padding: 15px;
    width: 100%;
    border-radius: var(--border-radius);
    background-color: var(--bg-secondary);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    position: relative;
}

#ordersList li:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

#ordersList p {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

#ordersList .fa-bell {
    color: var(--accent-color);
    font-size: 1.5rem;
    animation: bellShake 0.5s ease infinite;
}

@keyframes bellShake {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(15deg); }
    75% { transform: rotate(-15deg); }
}

#ordersList a.new {
    text-decoration: none;
    color: var(--success-color);
    padding: 8px;
    border: 2px solid var(--accent-color);
    border-radius: var(--border-radius);
    background-color: var(--bg-primary);
    font-weight: bold;
    transition: var(--transition);
    white-space: nowrap;
}

#ordersList a.new:hover {
    background-color: var(--success-color);
    color: white;
    border-color: var(--success-color);
}

#server_status {
    font-family:BHoma;
    padding: 5px;
    margin: 0;
    border-radius: var(--border-radius);
    text-align: center;
    background-color: var(--warning-color);
    color: var(--text-primary);
    font-weight: bold;
    font-size:10px;
}

/* استایل Popup */
.order-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: none;
    backdrop-filter: blur(3px);
}

.order-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 500px;
    background-color: var(--bg-primary);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    z-index: 10000;
    padding: 25px;
    display: none;
    animation: fadeIn--global 0.3s ease;
    border: 1px solid var(--primary-light);
}

.order-popup-content {
    text-align: center;
}

.order-popup h3 {
    color: var(--primary-color);
    margin-bottom: 20px;
    font-size: 1.5rem;
    border-bottom: 2px solid var(--primary-light);
    padding-bottom: 10px;
}

.order-popup .order-details {
    margin-bottom: 20px;
    color: var(--text-secondary);
    font-size: 1.1rem;
    line-height: 1.8;
}

.order-popup .order-details p {
    display: flex;
    justify-content: space-between;
    margin: 10px 0;
}

.order-popup .btn-confirm {
    background-color: var(--success-color);
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-weight: bold;
    transition: var(--transition);
    font-size: 1rem;
    margin-top: 10px;
    width: 100%;
    max-width: 300px;
}

.order-popup .btn-confirm:hover {
    background-color: var(--primary-dark);
    transform: translateY(-2px);
}

@keyframes fadeIn--global {
    from { opacity: 0; transform: translate(-50%, -60%); }
    to { opacity: 1; transform: translate(-50%, -50%); }
}

/* استایل دکمه اجازه پخش صدا */
#soundPermission {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 12px 20px;
    background-color: var(--primary-color);
    color: white;
    border-radius: var(--border-radius);
    cursor: pointer;
    z-index: 1000;
    box-shadow: var(--shadow-md);
    font-family:BHoma;
    font-size: 0.9rem;
    display: none;
}

/* حالت تاریک */
.dark-mode #ordersContainer {
    border-color: rgba(255, 255, 255, 0.1);
}

.dark-mode #ordersList li {
    background-color: var(--bg-dark);
}

.dark-mode #ordersList a.new {
    background-color: var(--bg-dark);
}

.dark-mode .order-popup {
    border-color: var(--primary-dark);
}

/* واکنشگرا برای موبایل */
@media (max-width: 768px) {
    #ordersContainer {
        padding: 15px;
        width: calc(100% - 30px);
        margin: 15px auto;
    }
    
    #ordersList li {
        padding: 12px;
    }
    
    #ordersList p {
        flex-direction: column;
        align-items: flex-end;
        gap: 8px;
    }
    
    #ordersList a.new {
        width: 100%;
        text-align: center;
        padding: 8px;
    }
    
    .order-popup {
        width: 95%;
        padding: 20px;
    }
    
    .order-popup h3 {
        font-size: 1.3rem;
    }
    
    .order-popup .order-details {
        font-size: 1rem;
    }
    
    .order-popup .btn-confirm {
        padding: 10px;
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    #ordersContainer .new {
        font-size: 1rem;
        right: 10px;
        top: -10px;
    }
    
    #ordersList .fa-bell {
        font-size: 1.2rem;
    }
    
    #server_status {
        font-size: 0.9rem;
        padding: 8px;
    }
}

/* dynamic state: was PHP echo inside CSS -> class on <main> */
:where(.order-service-on) .alert-box { display: none; }

/* ==========================================================================
   GLOBAL / SHELL  (free.php)
   source: includes/sidebar/free.php
   ========================================================================== */
li i {color:#FF6B35;}
li span {color:#068DF9;}

/* ==========================================================================
   SHARED COMPONENT  (account-warning.php)  -> body.page-employees, body.page-supplier, body.page-blog
   source: account-warning.php
   ========================================================================== */
/* کارت اصلی پیام */
    :where(body.page-employees, body.page-supplier, body.page-blog) .message-card {
      background: rgba(255, 255, 255, 0.9);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border: 1px solid rgba(255, 255, 255, 0.6);
      border-radius: 32px;
      padding: 2.5rem 2rem;
      width: 100%;
     align:center;
      text-align: center;
      direction: rtl;
      transition: transform 0.2s ease;
    }

    :where(body.page-employees, body.page-supplier, body.page-blog) .message-card:hover {
      transform: scale(1.01);
    }

    /* آیکون هشدار / قفل */
    :where(body.page-employees, body.page-supplier, body.page-blog) .icon-wrapper {
      background: #fee2e2;
      width: 80px;
      height: 80px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 1.5rem;
      box-shadow: 0 8px 12px -6px rgba(239, 68, 68, 0.2);
    }

    :where(body.page-employees, body.page-supplier, body.page-blog) .icon-wrapper i {
      font-size: 3rem;
      color: #dc2626;
    }

    /* عنوان اصلی */
    :where(body.page-employees, body.page-supplier, body.page-blog) h2 {
      font-size: 1.9rem;
      font-weight: 600;
      color: #1e293b;
      margin: 0 0 0.75rem 0;
      letter-spacing: -0.02em;
    }

    /* متن توضیحات */
    :where(body.page-employees, body.page-supplier, body.page-blog) .description {
      font-size: 1.1rem;
      line-height: 1.6;
      color: #475569;
      margin: 0 0 2rem 0;
      font-weight: 400;
    }

    /* کلمه کلیدی با رنگ متفاوت */
    :where(body.page-employees, body.page-supplier, body.page-blog) .highlight {
      color: #dc2626;
      font-weight: 600;
      background: #fee2e2;
      padding: 0.1rem 0.4rem;
      border-radius: 30px;
      display: inline-block;
    }

    /* دکمه ارتقاء */
    :where(body.page-employees, body.page-supplier, body.page-blog) .upgrade-btn {
      background: #3b82f6;
      color: white;
      border: none;
      padding: 0.9rem 2.2rem;
      border-radius: 50px;
      font-size: 1.1rem;
      font-weight: 500;
      font-family: inherit;
      cursor: pointer;
      box-shadow: 0 12px 18px -8px #1e4b8a70;
      transition: all 0.25s ease;
      border: 1px solid rgba(255, 255, 255, 0.3);
      width: 100%;
      max-width: 220px;
    }

    :where(body.page-employees, body.page-supplier, body.page-blog) .upgrade-btn:hover {
      background: #2563eb;
      transform: translateY(-3px);
      box-shadow: 0 20px 25px -8px #1e3a8a;
    }

    :where(body.page-employees, body.page-supplier, body.page-blog) .upgrade-btn:active {
      transform: translateY(1px);
      box-shadow: 0 8px 12px -6px #1e3a8a;
    }

    /* برای گوشی‌های کوچک */
    @media (max-width: 480px) {
      :where(body.page-employees, body.page-supplier, body.page-blog) .message-card {
        padding: 2rem 1.5rem;
      }
      :where(body.page-employees, body.page-supplier, body.page-blog) h2 {
        font-size: 1.6rem;
      }
    }

/* ==========================================================================
   SHARED COMPONENT  (clock.php)  -> body.page-orders
   source: includes/clock.php
   ========================================================================== */
:where(body.page-orders) .analog-clock-container {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 20px;
    width: 100%;
    height: 200px;
    margin:0;
    background-image: url('https://cdn.menusoft.ir/images/IMG_20260311_214738.jpg');
    background-size: cover;
    background-position: center;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(2px);
    overflow: hidden;
}

:where(body.page-orders) .analog-clock-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: 0;
}

:where(body.page-orders) .analog-clock {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.85);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    position: relative;
    border: 1px solid var(--primary-color);
    z-index: 1;
    backdrop-filter: blur(5px);
}

:where(body.page-orders) .clock-face {
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: 50%;
    background-image: url('../assets/images/1763163139149.png');
    background-position:fixed;
    background-size:100% 100%;
}

:where(body.page-orders) .hand {
    position: absolute;
    bottom: 50%;
    left: 50%;
    transform-origin: 50% 100%;
    border-radius: 4px;
    transition: transform 0.3s cubic-bezier(0.4, 2.3, 0.3, 1);
    z-index: 2;
}

:where(body.page-orders) .hour-hand {
    width: 4px;
    height: 35px;
    background: var(--primary-dark);
    margin-left: -2px;
}

:where(body.page-orders) .minute-hand {
    width: 3px;
    height: 45px;
    background: var(--primary-color);
    margin-left: -1.5px;
}

:where(body.page-orders) .second-hand {
    width: 2px;
    height: 50px;
    background: var(--accent-color);
    margin-left: -1px;
}

:where(body.page-orders) .center-circle {
    position: absolute;
    width: 10px;
    height: 10px;
    background: var(--danger-color);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    margin-left: -5px;
    margin-top: -5px;
    z-index: 10;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    border: 2px solid white;
}

:where(body.page-orders) .info-panel {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    height: 100%;
    flex: 1;
    z-index: 1;
}

:where(body.page-orders) .date-display {
	position:absolute;
    left:0px;
    bottom:0px;
    text-align: center;
    border-radius: 0px;
    backdrop-filter: blur(5px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    border-top-right-radius:5px;
}

:where(body.page-orders) .numeric-date {
    font-size: 0.8rem;
    font-weight: bold;
    color: #000;
    display: flex;
    justify-content: flex-end;
    gap: 0rem;
    
    
}

:where(body.page-orders) .numeric-date span {
    padding: 0.2rem 0.4rem;
    background: var(--primary-light);
    border-radius: 0px;
    min-width: 25px;
    text-align: center;
}

:where(body.page-orders) .text-date {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.3;
    display:none;
}

:where(body.page-orders) .server-status {
    font-size: 8px;
    color: #fff;
    background: rgba(0, 0, 0, 0.6);
    padding: 5px;
    text-align: center;
    display:none;
}

/* حالت تاریک */
:where(body.page-orders) .dark-mode .analog-clock {
    border-color: var(--primary-light);
    background-color: rgba(45, 52, 54, 0.9);
}

:where(body.page-orders) .dark-mode .clock-face {
    background-color: rgba(60, 60, 60, 0.9);
}

:where(body.page-orders) .dark-mode .hour-hand {
    background: var(--primary-light);
}

:where(body.page-orders) .dark-mode .date-display {
    background: rgba(30, 39, 46, 0.9);
    color: white;
}

:where(body.page-orders) .dark-mode .server-status {
    background: rgba(0, 0, 0, 0.8);
}

/* نشانگرهای ساعت */
:where(body.page-orders) .hour-marks {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display:none;
}

:where(body.page-orders) .hour-marks::before,
:where(body.page-orders) .hour-marks::after {
    content: '';
    position: absolute;
    background: #333;
    border-radius: 2px;
}

:where(body.page-orders) .hour-marks::before {
    width: 4px;
    height: 12px;
    top: 10px;
    left: 50%;
    margin-left: -2px;
}

:where(body.page-orders) .hour-marks::after {
    width: 12px;
    height: 4px;
    top: 50%;
    right: 10px;
    margin-top: -2px;
}

/* ==========================================================================
   SHARED COMPONENT  (get_order_details.php)  -> body.page-orders
   source: includes/get_order_details.php
   ========================================================================== */
:where(body.page-orders) #div1 {
            width: 100%;
            border: 0px solid #ddd;
            padding: 10px;
            line-height: 26px;
        }
        :where(body.page-orders) .title {
            text-align: center;
            margin-bottom: 10px;
        }
        :where(body.page-orders) #customers {
            border-collapse: collapse;
            width: 100%;
            font-size: 10px;
            margin: 10px 0;
        }
        :where(body.page-orders) #customers td, :where(body.page-orders) #customers th {
            border: 1px solid #ddd;
            padding: 5px;
            text-align: right;
        }
        :where(body.page-orders) .info-row {
            display: flex;
            margin-bottom: 5px;
            font-size: 10px;
        }
        :where(body.page-orders) .info-label {
            font-weight: bold;
            width: 40%;
        }
        :where(body.page-orders) .info-value {
            width: 60%;
        }
        :where(body.page-orders) .paid {
            color: green;
        }
        :where(body.page-orders) .unpaid {
            color: red;
        }
        :where(body.page-orders) .calld {
            text-align: center;
            margin-top: 10px;
        }
        :where(body.page-orders) hr {
            margin: 5px 0;
            border: 0.5px solid #ddd;
        }

/* ==========================================================================
   SHARED COMPONENT  (style.css)  -> body.page-supplier
   source: supplier/style.css
   ========================================================================== */
body:where(.page-supplier) {
    --primary-green: #10b981;
    --dark-green: #059669;
    --light-green: #d1fae5;
    --dark-bg: #1f2937;
    --darker-bg: #111827;
    --gray: #6b7280;
    --light-gray: #f3f4f6;
    --white: #ffffff;
    --danger: #ef4444;
    --warning: #f59e0b;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

body:where(.page-supplier), :where(body.page-supplier) * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body:where(.page-supplier) {
    font-family: 'Tahoma', 'Arial', sans-serif;
    direction: rtl;
    text-align: right;
    background-color: var(--light-gray);
    line-height: 1.6;
    color: var(--dark-bg);
}

:where(body.page-supplier) .container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
}

/* Header */
:where(body.page-supplier) .header {
    background: linear-gradient(135deg, var(--dark-bg) 0%, var(--darker-bg) 100%);
    color: var(--white);
    padding: 25px 30px;
    border-radius: 12px;
    margin-bottom: 30px;
    box-shadow: var(--shadow-lg);
}

:where(body.page-supplier) .header h1 {
    font-size: 28px;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 15px;
}

:where(body.page-supplier) .header h1 i {
    color: var(--primary-green);
}

/* Tabs */
:where(body.page-supplier) .tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 25px;
    background: var(--white);
    padding: 10px;
    border-radius: 12px;
    box-shadow: var(--shadow);
    flex-wrap: wrap;
}

:where(body.page-supplier) .tab-btn {
    flex: 1;
    min-width: 90px;
    padding: 14px 20px;
    border: none;
    background: transparent;
    color: var(--gray);
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
    border-radius: 8px;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

:where(body.page-supplier) .tab-btn:hover {
    background: var(--light-gray);
    color: var(--dark-bg);
}

:where(body.page-supplier) .tab-btn.active {
    background: var(--primary-green);
    color: var(--white);
    box-shadow: var(--shadow);
}

/* Tab Content */
:where(body.page-supplier) .tab-content {
    display: none;
}

:where(body.page-supplier) .tab-content.active {
    display: block;
    animation: fadeIn 0.3s;
}

/* Card */
:where(body.page-supplier) .card {
    background: var(--white);
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 25px;
    box-shadow: var(--shadow);
}

:where(body.page-supplier) .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--light-gray);
}

:where(body.page-supplier) .card-title {
    font-size: 20px;
    font-weight: bold;
    color: var(--dark-bg);
    display: flex;
    align-items: center;
    gap: 10px;
}

:where(body.page-supplier) .card-title i {
    color: var(--primary-green);
}

/* Buttons */
:where(body.page-supplier) .btn {
    padding: 10px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

:where(body.page-supplier) .btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

:where(body.page-supplier) .btn-primary {
    background: var(--primary-green);
    color: var(--white);
}

:where(body.page-supplier) .btn-primary:hover {
    background: var(--dark-green);
}

:where(body.page-supplier) .btn-secondary {
    background: var(--gray);
    color: var(--white);
}

:where(body.page-supplier) .btn-secondary:hover {
    background: var(--dark-bg);
}

:where(body.page-supplier) .btn-success {
    background: var(--primary-green);
    color: var(--white);
}

:where(body.page-supplier) .btn-danger {
    background: var(--danger);
    color: var(--white);
}

:where(body.page-supplier) .btn-sm {
    padding: 8px 16px;
    font-size: 13px;
}

/* Forms */
:where(body.page-supplier) .form-group {
    margin-bottom: 20px;
}

:where(body.page-supplier) .form-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--dark-bg);
    font-size: 14px;
}

:where(body.page-supplier) .form-control {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid var(--light-gray);
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.3s;
    background: var(--white);
}

:where(body.page-supplier) .form-control:focus {
    outline: none;
    border-color: var(--primary-green);
    box-shadow: 0 0 0 3px var(--light-green);
}

:where(body.page-supplier) .form-control:disabled {
    background: var(--light-gray);
    cursor: not-allowed;
}

:where(body.page-supplier) textarea.form-control {
    resize: vertical;
    min-height: 80px;
}

:where(body.page-supplier) select.form-control {
    cursor: pointer;
}

/* Grid System */
:where(body.page-supplier) .grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

:where(body.page-supplier) .grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

@media (max-width: 768px) {
    :where(body.page-supplier) .grid-2, :where(body.page-supplier) .grid-3 {
        grid-template-columns: 1fr;
    }
}

/* Table */
:where(body.page-supplier) .table-container {
    overflow-x: auto;
    margin-top: 20px;
}

:where(body.page-supplier) table {
    width: 100%;
    border-collapse: collapse;
    background: var(--white);
}

:where(body.page-supplier) thead {
    background: var(--dark-bg);
    color: var(--white);
}

:where(body.page-supplier) thead th {
    padding: 15px;
    font-weight: 600;
    text-align: right;
    font-size: 14px;
}

:where(body.page-supplier) tbody tr {
    border-bottom: 1px solid var(--light-gray);
    transition: all 0.2s;
}

:where(body.page-supplier) tbody tr:hover {
    background: var(--light-green);
}

:where(body.page-supplier) tbody td {
    padding: 15px;
    font-size: 14px;
}

:where(body.page-supplier) .table-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}



/* Alert */
:where(body.page-supplier) .alert {
    padding: 15px 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    display: none;
    align-items: center;
    gap: 10px;
    animation: slideDown--supplier 0.3s;
}

:where(body.page-supplier) .alert.show {
    display: flex;
}

@keyframes slideDown--supplier {
    from { transform: translateY(-20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

:where(body.page-supplier) .alert-success {
    background: var(--light-green);
    color: var(--dark-green);
    border: 1px solid var(--dark-green);
}

:where(body.page-supplier) .alert-danger {
    background: #fee2e2;
    color: var(--danger);
    border: 1px solid var(--danger);
}

/* Badge */
:where(body.page-supplier) .badge {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

:where(body.page-supplier) .badge-success {
    background: var(--light-green);
    color: var(--dark-green);
}

:where(body.page-supplier) .badge-danger {
    background: #fee2e2;
    color: var(--danger);
}

:where(body.page-supplier) .badge-warning {
    background: #fef3c7;
    color: var(--warning);
}

/* Search Box */
:where(body.page-supplier) .search-box {
    position: relative;
}

:where(body.page-supplier) .search-box i {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray);
}

:where(body.page-supplier) .search-box input {
    padding-right: 45px;
}

/* Item Row */
:where(body.page-supplier) .item-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1.5fr 1.5fr 50px;
    gap: 10px;
    align-items: end;
    padding: 15px;
    background: var(--light-gray);
    border-radius: 8px;
    margin-bottom: 15px;
}

:where(body.page-supplier) .remove-item-btn {
    background: var(--danger);
    color: var(--white);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    font-size: 16px;
}

:where(body.page-supplier) .remove-item-btn:hover {
    background: #dc2626;
    transform: scale(1.1);
}

/* Payment Fields */
:where(body.page-supplier) .payment-fields {
    display: none;
    margin-top: 20px;
    padding: 20px;
    background: var(--light-gray);
    border-radius: 8px;
}

:where(body.page-supplier) .payment-fields.active {
    display: block;
}

:where(body.page-supplier) .payment-fields h4 {
    margin-bottom: 15px;
    color: var(--dark-bg);
    font-size: 16px;
}

/* Empty State */
:where(body.page-supplier) .empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--gray);
}

:where(body.page-supplier) .empty-state i {
    font-size: 48px;
    margin-bottom: 15px;
    opacity: 0.5;
}

:where(body.page-supplier) .empty-state h3 {
    font-size: 18px;
    margin-bottom: 8px;
}

/* Loading */
:where(body.page-supplier) .loading {
    text-align: center;
    padding: 40px;
    color: var(--gray);
}

:where(body.page-supplier) .loading::after {
    content: " ...";
    animation: dots 1.5s infinite;
}

@keyframes dots {
    0%, 20% { content: " ."; }
    40% { content: " .."; }
    60%, 100% { content: " ..."; }
}

/* Report Summary */
:where(body.page-supplier) .report-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

:where(body.page-supplier) .summary-card {
    background: linear-gradient(135deg, var(--primary-green), var(--dark-green));
    color: var(--white);
    padding: 20px;
    border-radius: 12px;
    text-align: center;
}

:where(body.page-supplier) .summary-card h3 {
    font-size: 14px;
    margin-bottom: 10px;
    opacity: 0.9;
}

:where(body.page-supplier) .summary-card .value {
    font-size: 24px;
    font-weight: bold;
}

@media (max-width: 768px) {
    :where(body.page-supplier) .report-summary {
        grid-template-columns: repeat(2, 1fr);
    }
    
    :where(body.page-supplier) .item-row {
        grid-template-columns: 1fr;
    }
}

/* Utilities */
:where(body.page-supplier) .text-center { text-align: center; }
:where(body.page-supplier) .text-left { text-align: left; }
:where(body.page-supplier) .text-danger { color: var(--danger); }
:where(body.page-supplier) .text-success { color: var(--primary-green); }
:where(body.page-supplier) .text-gray { color: var(--gray); }
:where(body.page-supplier) .mt-10 { margin-top: 10px; }
:where(body.page-supplier) .mt-20 { margin-top: 20px; }
:where(body.page-supplier) .mb-20 { margin-bottom: 20px; }
:where(body.page-supplier) .hidden { display: none; }

/* ==========================================================================
   SHARED COMPONENT  (style.css)  -> body.page-seo
   source: seo/css/style.css
   ========================================================================== */
:where(body.page-seo) .search-box {
    padding: 30px;
    background-color: var(--bg-secondary);
    transition: var(--transition);
}

body:where(.page-seo).dark-mode .search-box {
    background-color: var(--bg-secondary);
}

:where(body.page-seo) .search-box form {
    display: flex;
    max-width: 600px;
    margin: 0 auto;
}

:where(body.page-seo) .search-box input {
    flex: 1;
    padding: 15px 20px;
    border: none;
    border-radius: var(--border-radius) 0 0 var(--border-radius);
    font-size: 1rem;
    outline: none;
    transition: var(--transition);
}

:where(body.page-seo) .search-box button {
    padding: 15px 30px;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
    cursor: pointer;
    font-size: 1rem;
    font-weight: bold;
    transition: var(--transition);
}

:where(body.page-seo) .search-box button:hover {
    background-color: var(--primary-dark);
}

:where(body.page-seo) .error-message {
    background-color: var(--danger-color);
    color: white;
    padding: 15px;
    margin: 20px;
    border-radius: var(--border-radius);
    text-align: center;
}

:where(body.page-seo) .loading {
    text-align: center;
    padding: 40px;
}

:where(body.page-seo) .spinner {
    width: 50px;
    height: 50px;
    border: 5px solid var(--bg-secondary);
    border-top: 5px solid var(--primary-color);
    border-radius: 50%;
    animation: spin--seo 1s linear infinite;
    margin: 0 auto 20px;
}

@keyframes spin--seo {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

:where(body.page-seo) .results {
    padding: 20px;
}

:where(body.page-seo) .result-section {
    margin-bottom: 40px;
}

:where(body.page-seo) .result-section h2 {
    color: var(--primary-color);
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--primary-light);
}

:where(body.page-seo) .overall-score {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 20px;
    background: linear-gradient(135deg, var(--primary-light), var(--primary-color));
    border-radius: var(--border-radius);
    color: white;
    text-align: center;
}

:where(body.page-seo) .score-circle {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    position: relative;
    box-shadow: var(--shadow-lg);
}

:where(body.page-seo) .score-circle::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    border-radius: 50%;
    background: conic-gradient(var(--success-color) 0%, var(--success-color) calc(var(--score) * 1%), var(--bg-secondary) calc(var(--score) * 1%), var(--bg-secondary) 100%);
    z-index: -1;
}

:where(body.page-seo) .score-circle span {
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--text-primary);
}

:where(body.page-seo) .score-description p {
    margin-bottom: 10px;
    font-size: 1.1rem;
}

:where(body.page-seo) .score-good {
    color: #fff;
    font-weight: bold;
}

:where(body.page-seo) .score-average {
    color: var(--warning-color);
    font-weight: bold;
}

:where(body.page-seo) .score-poor {
    color: var(--danger-color);
    font-weight: bold;
}

:where(body.page-seo) .chart-container {
    background-color: var(--bg-primary);
    border-radius: var(--border-radius);
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-sm);
}

:where(body.page-seo) .result-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

:where(body.page-seo) .result-card {
    background-color: var(--bg-primary);
    border-radius: var(--border-radius);
    padding: 20px;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    border-left: 4px solid var(--primary-color);
    overflow:scroll;
}

:where(body.page-seo) .result-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-5px);
}

:where(body.page-seo) .result-card.success {
    border-left-color: var(--success-color);
}

:where(body.page-seo) .result-card.warning {
    border-left-color: var(--warning-color);
}

:where(body.page-seo) .result-card.danger {
    border-left-color: var(--danger-color);
}

:where(body.page-seo) .result-card.info {
    border-left-color: var(--info-color);
}

:where(body.page-seo) .result-card h3 {
    color: var(--text-primary);
    margin-bottom: 15px;
}

:where(body.page-seo) .result-card p {
    margin-bottom: 10px;
}

:where(body.page-seo) .result-card ul {
    margin: 10px 0;
    padding-right: 20px;
}

:where(body.page-seo) .result-card li {
    margin-bottom: 5px;
    font-size: 0.9rem;
}

:where(body.page-seo) .recommendation {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--bg-secondary);
}

:where(body.page-seo) .recommendation h4 {
    color: var(--primary-color);
    margin-bottom: 8px;
}



/* رسپانسیو */
@media (max-width: 768px) {
    :where(body.page-seo) .search-box form {
        flex-direction: column;
    }
    
    :where(body.page-seo) .search-box input,
    :where(body.page-seo) .search-box button {
        width: 100%;
        border-radius: var(--border-radius);
        margin-bottom: 10px;
    }
    
    :where(body.page-seo) .result-cards {
        grid-template-columns: 1fr;
    }
    
    :where(body.page-seo) .header h1 {
        font-size: 1.8rem;
    }
    
    :where(body.page-seo) .overall-score {
        flex-direction: column;
    }
    
    :where(body.page-seo) .score-circle {
        width: 120px;
        height: 120px;
    }
    
    :where(body.page-seo) .score-circle span {
        font-size: 2rem;
    }
}

/* استایل‌های قبلی... */

:where(body.page-seo) .issues-container {
    margin-top: 30px;
}

:where(body.page-seo) .issues-container h3 {
    color: var(--primary-color);
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--primary-light);
}

:where(body.page-seo) .issue-card {
    background-color: var(--bg-primary);
    border-radius: var(--border-radius);
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    border-left: 4px solid var(--primary-color);
    overflow:scroll;
}

:where(body.page-seo) .issue-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}

:where(body.page-seo) .issue-card.danger {
    border-left-color: var(--danger-color);
}

:where(body.page-seo) .issue-card.warning {
    border-left-color: var(--warning-color);
}

:where(body.page-seo) .issue-card.info {
    border-left-color: var(--info-color);
}

:where(body.page-seo) .issue-card h4 {
    color: var(--text-primary);
    margin-bottom: 15px;
    font-size: 1.2rem;
}

:where(body.page-seo) .issue-card p {
    margin-bottom: 10px;
}

:where(body.page-seo) .issue-card ul {
    margin: 10px 0;
    padding-right: 20px;
}

:where(body.page-seo) .issue-card li {
    margin-bottom: 5px;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* رسپانسیو */
@media (max-width: 768px) {
    :where(body.page-seo) .issue-card {
        padding: 15px;
    }
    
    :where(body.page-seo) .issue-card h4 {
        font-size: 1.1rem;
    }
}

/* ==========================================================================
   PAGES  (each section scoped to body.page-<name>)
   ========================================================================== */

/* ==========================================================================
   PAGE: accesses
   source: pages/accesses.php
   ========================================================================== */
/* ───── Tabs ───── */
:where(body.page-accesses) .tabs-wrapper {
    background: var(--bg-primary);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    max-width: 100vw;                /* جلوگیری از گسترش بیش از حد */
}
:where(body.page-accesses) .tabs-nav {
    display: flex;
    flex-wrap: nowrap;              /* تب‌ها در یک خط باقی بمانند */
    overflow-x: auto;               /* اسکرول افقی فعال */
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;          /* مخفی کردن اسکرول‌بار */
    border-bottom: 2px solid var(--bg-secondary);
}
:where(body.page-accesses) .tabs-nav::-webkit-scrollbar {
    display: none;                  /* مخفی کردن در مرورگرهای Webkit */
}
:where(body.page-accesses) .tab-btn {
    flex-shrink: 0;                 /* اندازه ثابت، جمع نشود */
    white-space: nowrap;            /* متن نشکند */
    padding: 1rem 1.5rem;
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'vazir', sans-serif;
    font-size: 0.95rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    transition: var(--transition);
    position: relative;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
}
:where(body.page-accesses) .tab-btn i { font-size: 1rem; }
:where(body.page-accesses) .tab-btn:hover { color: var(--primary-color); background: rgba(240, 106, 0,0.04); }
:where(body.page-accesses) .tab-btn.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
    background: rgba(240, 106, 0,0.06);
    font-weight: 600;
}
:where(body.page-accesses) .tab-badge {
    background: var(--primary-color);
    color: #fff;
    font-size: 0.7rem;
    padding: 1px 7px;
    border-radius: 50px;
    min-width: 22px;
    text-align: center;
    flex-shrink: 0;                /* بدج هم کوچک نشود */
}

/* تنظیمات موبایل برای تب‌ها */
@media (max-width: 480px) {
    :where(body.page-accesses) .tab-btn {
        padding: 0.75rem 0.8rem;
        font-size: 0.8rem;
        gap: 0.4rem;
    }
    :where(body.page-accesses) .tab-btn i { font-size: 0.9rem; }
    :where(body.page-accesses) .tab-badge {
        font-size: 0.65rem;
        padding: 1px 5px;
        min-width: 18px;
    }
}

:where(body.page-accesses) .tab-panel { display: none; padding: 1.5rem; }
:where(body.page-accesses) .tab-panel.active { display: block; }

/* ───── Toolbar ───── */
:where(body.page-accesses) .panel-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    gap: 1rem;
    flex-wrap: wrap;
}
:where(body.page-accesses) .search-box {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--bg-secondary);
    border-radius: 50px;
    padding: 0.5rem 1rem;
    flex: 1;
    max-width: 320px;
    min-width: 200px;              /* جلوگیری از جمع‌شدگی بیش از حد */
}
:where(body.page-accesses) .search-box i { color: var(--text-light); }
:where(body.page-accesses) .search-box input {
    border: none;
    background: none;
    font-family: 'vazir', sans-serif;
    font-size: 0.9rem;
    color: var(--text-primary);
    width: 100%;
    outline: none;
}

/* ───── Buttons ───── */
:where(body.page-accesses) .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.2rem;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-family: 'vazir', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    transition: var(--transition);
    white-space: nowrap;
}
:where(body.page-accesses) .btn-primary { background: var(--primary-color); color: #fff; }
:where(body.page-accesses) .btn-primary:hover { background: var(--primary-dark); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(240, 106, 0,0.35); }
:where(body.page-accesses) .btn-success { background: var(--success-color); color: #fff; }
:where(body.page-accesses) .btn-success:hover { background: #00a381; transform: translateY(-1px); }
:where(body.page-accesses) .btn-danger  { background: var(--danger-color); color: #fff; }
:where(body.page-accesses) .btn-danger:hover  { background: #b71c1c; transform: translateY(-1px); }
:where(body.page-accesses) .btn-warning { background: var(--warning-color); color: var(--text-primary); }
:where(body.page-accesses) .btn-warning:hover { background: #f9bc00; transform: translateY(-1px); }
:where(body.page-accesses) .btn-outline {
    background: transparent;
    color: var(--primary-color);
    border: 1.5px solid var(--primary-color);
}
:where(body.page-accesses) .btn-outline:hover { background: var(--primary-color); color: #fff; }
:where(body.page-accesses) .btn-sm { padding: 0.35rem 0.8rem; font-size: 0.8rem; }
:where(body.page-accesses) .btn-icon { padding: 0.45rem; border-radius: 8px; background: var(--bg-secondary); color: var(--text-secondary); border: none; cursor: pointer; transition: var(--transition); }
:where(body.page-accesses) .btn-icon:hover { background: var(--primary-color); color: #fff; }

/* ───── Staff Grid (بهبود واکنش‌گرایی) ───── */
:where(body.page-accesses) .staff-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
}
@media (max-width: 360px) {
    :where(body.page-accesses) .staff-grid {
        grid-template-columns: 1fr;
    }
}

:where(body.page-accesses) .staff-card {
    background: var(--bg-primary);
    border-radius: var(--border-radius);
    border: 1.5px solid transparent;
    box-shadow: var(--shadow-sm);
    padding: 1.2rem;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}
:where(body.page-accesses) .staff-card:hover {
    border-color: var(--primary-light);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
:where(body.page-accesses) .staff-card::before {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 4px; height: 100%;
    background: linear-gradient(to bottom, var(--primary-color), var(--primary-light));
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
}

:where(body.page-accesses) .staff-card-header {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 0.8rem;
}
:where(body.page-accesses) .staff-avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1.1rem;
    flex-shrink: 0;
}
:where(body.page-accesses) .staff-avatar.delivery {
    background: linear-gradient(135deg, var(--secondary-color), #55efc4);
}
:where(body.page-accesses) .staff-name { font-size: 0.95rem; font-weight: 600; color: var(--text-primary); }
:where(body.page-accesses) .staff-post {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 50px;
    margin-top: 3px;
    background: rgba(240, 106, 0,0.12);
    color: var(--primary-color);
}
:where(body.page-accesses) .staff-post.delivery-badge {
    background: rgba(0,184,148,0.12);
    color: var(--secondary-color);
}

:where(body.page-accesses) .staff-info { margin: 0.7rem 0; }
:where(body.page-accesses) .staff-info-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    color: var(--text-secondary);
    padding: 3px 0;
}
:where(body.page-accesses) .staff-info-row i { color: var(--primary-light); width: 16px; text-align: center; }

:where(body.page-accesses) .staff-actions {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.8rem;
    flex-wrap: wrap;
}

/* ───── Access List ───── */
:where(body.page-accesses) .access-list { display: flex; flex-direction: column; gap: 0.8rem; }

:where(body.page-accesses) .access-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--bg-secondary);
    border-radius: 10px;
    padding: 0.9rem 1.2rem;
    transition: var(--transition);
}
:where(body.page-accesses) .access-item:hover { background: rgba(240, 106, 0,0.07); }
:where(body.page-accesses) .access-avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--info-color), #74b9ff);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1rem;
    flex-shrink: 0;
}
:where(body.page-accesses) .access-info { flex: 1; }
:where(body.page-accesses) .access-name { font-size: 0.9rem; font-weight: 600; }
:where(body.page-accesses) .access-meta { font-size: 0.78rem; color: var(--text-secondary); margin-top: 2px; display: flex; gap: 0.8rem; flex-wrap: wrap; }
:where(body.page-accesses) .access-meta span { display: flex; align-items: center; gap: 3px; }
:where(body.page-accesses) .access-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }
:where(body.page-accesses) .access-badge {
    display: inline-flex; align-items: center; gap: 4px;
    background: rgba(9,132,227,0.12); color: var(--info-color);
    font-size: 0.75rem; padding: 3px 10px; border-radius: 50px;
    white-space: nowrap;
}

/* ───── Empty State ───── */
:where(body.page-accesses) .empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-light);
}
:where(body.page-accesses) .empty-state i { font-size: 3rem; margin-bottom: 1rem; opacity: 0.4; }
:where(body.page-accesses) .empty-state p { font-size: 0.9rem; }

/* ───── Loading ───── */
:where(body.page-accesses) .loading-spinner {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    gap: 0.8rem;
    color: var(--text-secondary);
}
:where(body.page-accesses) .spinner {
    width: 24px; height: 24px;
    border: 3px solid var(--bg-secondary);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ───── Modal ───── */
:where(body.page-accesses) .modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(4px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0; visibility: hidden;
    transition: var(--transition);
    padding: 1rem;
}
:where(body.page-accesses) .modal-overlay.open { opacity: 1; visibility: visible; }

:where(body.page-accesses) .modal-box {
    background: var(--bg-primary);
    border-radius: 16px;
    box-shadow: 0 25px 60px rgba(0,0,0,0.2);
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    transform: translateY(20px) scale(0.97);
    transition: var(--transition);
}
:where(body.page-accesses) .modal-overlay.open .modal-box { transform: translateY(0) scale(1); }

:where(body.page-accesses) .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.2rem 1.5rem;
    border-bottom: 1px solid var(--bg-secondary);
}
:where(body.page-accesses) .modal-title {
    display: flex; align-items: center; gap: 0.6rem;
    font-size: 1rem; font-weight: 600;
}
:where(body.page-accesses) .modal-title i { color: var(--primary-color); }
:where(body.page-accesses) .modal-close {
    background: var(--bg-secondary);
    border: none; cursor: pointer;
    width: 32px; height: 32px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-secondary);
    transition: var(--transition);
}
:where(body.page-accesses) .modal-close:hover { background: var(--danger-color); color: #fff; }

:where(body.page-accesses) .modal-body { padding: 1.5rem; }
:where(body.page-accesses) .modal-footer {
    display: flex; gap: 0.6rem; justify-content: flex-end;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--bg-secondary);
    flex-wrap: wrap;
}

/* ───── Form ───── */
:where(body.page-accesses) .form-group { margin-bottom: 1rem; }
:where(body.page-accesses) .form-label {
    display: block;
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 0.4rem;
    font-weight: 500;
}
:where(body.page-accesses) .form-label span.req { color: var(--danger-color); margin-right: 2px; }
:where(body.page-accesses) .form-control {
    width: 100%;
    padding: 0.65rem 0.9rem;
    border: 1.5px solid #e0e0e0;
    border-radius: 8px;
    font-family: 'vazir', sans-serif;
    font-size: 0.9rem;
    color: var(--text-primary);
    background: var(--bg-secondary);
    transition: var(--transition);
    outline: none;
}
:where(body.page-accesses) .form-control:focus {
    border-color: var(--primary-color);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(240, 106, 0,0.12);
}
:where(body.page-accesses) .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
@media (max-width: 480px) {
    :where(body.page-accesses) .form-row { grid-template-columns: 1fr; }
}

/* ───── Alert ───── */
:where(body.page-accesses) .alert {
    padding: 0.8rem 1rem;
    border-radius: 8px;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1rem;
}
:where(body.page-accesses) .alert-danger  { background: rgba(214,48,49,0.1);  color: var(--danger-color);  }
:where(body.page-accesses) .alert-success { background: rgba(0,184,148,0.1);  color: var(--success-color); }
:where(body.page-accesses) .alert-info    { background: rgba(9,132,227,0.1);   color: var(--info-color);    }

/* ───── Confirm Modal ───── */
:where(body.page-accesses) .confirm-icon {
    text-align: center; padding: 1rem 0 0.5rem;
    font-size: 2.8rem;
}
:where(body.page-accesses) .confirm-text {
    text-align: center;
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.7;
    padding: 0 1rem;
}

/* ───── Grant Access special ───── */
:where(body.page-accesses) .grant-preview {
    background: rgba(240, 106, 0,0.06);
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 1.2rem;
    border: 1px dashed var(--primary-light);
}
:where(body.page-accesses) .grant-preview-row {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.85rem; color: var(--text-secondary);
    padding: 2px 0;
}
:where(body.page-accesses) .grant-preview-row strong { color: var(--text-primary); }

/* ───── Toast ───── */
:where(body.page-accesses) #toast-container {
    position: fixed;
    bottom: 2rem; left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
}
:where(body.page-accesses) .toast {
    background: var(--bg-dark);
    color: #fff;
    padding: 0.7rem 1.4rem;
    border-radius: 50px;
    font-size: 0.875rem;
    box-shadow: var(--shadow-lg);
    display: flex; align-items: center; gap: 0.6rem;
    animation: slideUp 0.3s ease;
    white-space: nowrap;
}
:where(body.page-accesses) .toast.success { background: var(--success-color); }
:where(body.page-accesses) .toast.error   { background: var(--danger-color); }
@keyframes slideUp { from { opacity:0; transform: translateY(10px); } to { opacity:1; transform: translateY(0); } }

/* ==========================================================================
   PAGE: add-copon
   source: pages/add-copon.php
   ========================================================================== */
:where(body.page-add-copon) .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        :where(body.page-add-copon) .coupon-management {
            background: var(--bg-primary);
            border-radius: var(--border-radius);
            box-shadow: var(--shadow-md);
            padding: 20px;
            margin-bottom: 30px;
        }

        :where(body.page-add-copon) h1, :where(body.page-add-copon) h2, :where(body.page-add-copon) h3 {
            color: var(--primary-dark);
            margin-bottom: 20px;
        }

        :where(body.page-add-copon) h1 i, :where(body.page-add-copon) h2 i {
            margin-left: 10px;
        }

        :where(body.page-add-copon) .coupon-form {
            background: var(--bg-secondary);
            padding: 20px;
            border-radius: var(--border-radius);
            margin-bottom: 30px;
            box-shadow: var(--shadow-sm);
        }

        :where(body.page-add-copon) .form-row {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin-bottom: 15px;
        }

        :where(body.page-add-copon) .form-group {
            flex: 1;
            min-width: 200px;
        }

        :where(body.page-add-copon) label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: var(--text-secondary);
        }

        :where(body.page-add-copon) input, :where(body.page-add-copon) select {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid var(--text-light);
            border-radius: var(--border-radius);
            background: var(--bg-primary);
            color: var(--text-primary);
            transition: var(--transition);
        }

        :where(body.page-add-copon) input:focus, :where(body.page-add-copon) select:focus {
            border-color: var(--primary-color);
            outline: none;
            box-shadow: 0 0 0 3px rgba(240, 106, 0, 0.2);
        }

        :where(body.page-add-copon) button, :where(body.page-add-copon) .btn {
            border: none;
            padding: 10px 20px;
            border-radius: var(--border-radius);
            cursor: pointer;
            font-size: 16px;
            font-weight: 600;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            transition: var(--transition);
        }

        :where(body.page-add-copon) .btn-primary {
            background: var(--primary-color);
            color: white;
        }

        :where(body.page-add-copon) .btn-primary:hover {
            background: var(--primary-dark);
        }

        :where(body.page-add-copon) .btn-danger {
            background: var(--danger-color);
            color: white;
        }

        :where(body.page-add-copon) .btn-danger:hover {
            background: #c0392b;
        }

        :where(body.page-add-copon) .btn-secondary {
            background: var(--secondary-color);
            color: white;
        }

        :where(body.page-add-copon) .btn-secondary:hover {
            background: #00a383;
        }

        :where(body.page-add-copon) .btn-warning {
            background: var(--warning-color);
            color: var(--text-primary);
        }

        :where(body.page-add-copon) .btn-warning:hover {
            background: #f39c12;
        }

        :where(body.page-add-copon) table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
            box-shadow: var(--shadow-sm);
        }

        :where(body.page-add-copon) th, :where(body.page-add-copon) td {
            padding: 12px 15px;
            text-align: center;
            border: 1px solid var(--text-light);
        }

        :where(body.page-add-copon) th {
            background-color: var(--bg-secondary);
            font-weight: 600;
            color: var(--text-secondary);
        }

        :where(body.page-add-copon) tr:nth-child(even) {
            background-color: var(--bg-secondary);
        }

        :where(body.page-add-copon) .actions {
            display: flex;
            gap: 8px;
            justify-content: center;
        }

        :where(body.page-add-copon) .alert {
            padding: 12px 15px;
            border-radius: var(--border-radius);
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        :where(body.page-add-copon) .alert-success {
            background: rgba(0, 184, 148, 0.2);
            color: var(--success-color);
            border-left: 4px solid var(--success-color);
        }

        :where(body.page-add-copon) .alert-danger {
            background: rgba(214, 48, 49, 0.2);
            color: var(--danger-color);
            border-left: 4px solid var(--danger-color);
        }

        :where(body.page-add-copon) .alert-warning {
            background: rgba(253, 203, 110, 0.2);
            color: #d35400;
            border-left: 4px solid #f39c12;
        }

        :where(body.page-add-copon) .expired {
            color: var(--danger-color);
        }

        :where(body.page-add-copon) .active {
            color: var(--success-color);
        }

        :where(body.page-add-copon) .rmmodal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            justify-content: center;
            align-items: center;
        }

        :where(body.page-add-copon) .modal-content {
            background: var(--bg-primary);
            padding: 20px;
            border-radius: var(--border-radius);
            width: 90%;
            max-width: 500px;
            box-shadow: var(--shadow-lg);
        }

        :where(body.page-add-copon) .modal-actions {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            margin-top: 20px;
        }

        /* استایل‌های جدید برای کارت پرینت */
        :where(body.page-add-copon) .coupon-card {
            width: 80mm;
            height: 50mm;
            background: #fff;
            border-radius: 10px;
            padding: 15px;
            color: #000;
            text-align: center;
            border:1.5px solid #000;
            
            position: relative;
            overflow: hidden;
            margin: 20px auto;
        }

        :where(body.page-add-copon) .coupon-card::before {
            content: "";
            position: absolute;
            top: -10px;
            right: -10px;
            width: 50px;
            height: 50px;
            background: ;
            border-radius: 50%;
        }

        :where(body.page-add-copon) .coupon-card::after {
            content: "";
            position: absolute;
            bottom: -20px;
            left: -20px;
            width: 80px;
            height: 80px;
            background: ;
            border-radius: 50%;
        }

        :where(body.page-add-copon) .coupon-title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 7px;
            text-transform: uppercase;
        }

        :where(body.page-add-copon) .coupon-code {
            font-size: 24px;
            font-weight: bold;
            letter-spacing: 3px;
            margin: 15px 0;
            padding: 10px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 5px;
            display: inline-block;
            font-family: "Times New Roman", Times, serif;
        }

        :where(body.page-add-copon) .coupon-footer {
            font-size: 15px;
            margin-top: 15px;
            opacity: 0.8;
        }

        :where(body.page-add-copon) .coupon-print-container {
            width: 100%;
            display: flex;
            justify-content: center;
        }

        @media print {
            body:where(.page-add-copon) * {
                visibility: hidden;
            }
            :where(body.page-add-copon) .coupon-print-container, :where(body.page-add-copon) .coupon-print-container * {
                visibility: visible;
            }
            :where(body.page-add-copon) .coupon-print-container {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                color:#000;
                background-color:#fff;
            }
            :where(body.page-add-copon) .no-print {
                display: none !important;
            }
        }

        @media (max-width: 768px) {
            :where(body.page-add-copon) .form-group {
                min-width: 100%;
            }
            
            :where(body.page-add-copon) .actions {
                flex-direction: column;
            }
            
            :where(body.page-add-copon) .modal-content {
                width: 95%;
            }

            :where(body.page-add-copon) .coupon-card {
                width: 90%;
                height: auto;
                padding: 10px;
            }
        }

/* ==========================================================================
   PAGE: add-domain
   source: pages/add-domain.php
   ========================================================================== */
:where(body.page-add-domain) .card {
            background-color: var(--bg-primary);
            border-radius: var(--border-radius);
            box-shadow: var(--shadow-md);
            padding: 25px;
            margin-bottom: 30px;
        }

        :where(body.page-add-domain) h1, :where(body.page-add-domain) h2, :where(body.page-add-domain) h3 {
            color: var(--primary-dark);
            margin-top: 0;
        }

        :where(body.page-add-domain) .form-group {
            margin-bottom: 20px;
        }

        :where(body.page-add-domain) label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: var(--text-secondary);
        }

        :where(body.page-add-domain) input[type="text"],
        :where(body.page-add-domain) input[type="password"],
        :where(body.page-add-domain) select {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: var(--border-radius);
            font-size: 16px;
            transition: var(--transition);
        }

        :where(body.page-add-domain) input[type="text"]:focus,
        :where(body.page-add-domain) input[type="password"]:focus,
        :where(body.page-add-domain) select:focus {
            border-color: var(--primary-light);
            box-shadow: 0 0 0 3px rgba(240, 106, 0, 0.1);
            outline: none;
        }

        :where(body.page-add-domain) button {
            background-color: var(--primary-color);
            color: white;
            border: none;
            padding: 12px 25px;
            border-radius: var(--border-radius);
            cursor: pointer;
            font-size: 16px;
            font-weight: 600;
            transition: var(--transition);
        }

        :where(body.page-add-domain) button:hover {
            background-color: var(--primary-dark);
        }

        :where(body.page-add-domain) .btn-danger {
            background-color: var(--danger-color);
        }

        :where(body.page-add-domain) .btn-danger:hover {
            background-color: #c0392b;
        }

        :where(body.page-add-domain) .btn-success {
            background-color: var(--success-color);
        }

        :where(body.page-add-domain) .btn-success:hover {
            background-color: #00a383;
        }

        :where(body.page-add-domain) .alert {
            padding: 15px;
            border-radius: var(--border-radius);
            margin-bottom: 20px;
            display: none;
        }

        :where(body.page-add-domain) .alert-success {
            background-color: rgba(0, 184, 148, 0.1);
            color: var(--success-color);
            border: 1px solid rgba(0, 184, 148, 0.3);
        }

        :where(body.page-add-domain) .alert-danger {
            background-color: rgba(214, 48, 49, 0.1);
            color: var(--danger-color);
            border: 1px solid rgba(214, 48, 49, 0.3);
        }

        :where(body.page-add-domain) table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }

        :where(body.page-add-domain) th, :where(body.page-add-domain) td {
            padding: 12px 15px;
            text-align: right;
            border-bottom: 1px solid #eee;
        }

        :where(body.page-add-domain) th {
            background-color: var(--primary-color);
            color: white;
        }

        :where(body.page-add-domain) tr:hover {
            background-color: rgba(240, 106, 0, 0.05);
        }

        :where(body.page-add-domain) .actions {
            display: flex;
            gap: 10px;
        }
        
        /* اضافه کردن به استایل‌های موجود */
:where(body.page-add-domain) .delete-domain[disabled] {
    cursor: not-allowed;
    opacity: 0.7;
}

:where(body.page-add-domain) .loading {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 3px solid rgba(255,255,255,.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 1s ease-in-out infinite;
    margin-left: 5px;
    vertical-align: middle;
}

/* ==========================================================================
   PAGE: ads-banners
   source: pages/ads-banners.php
   ========================================================================== */
/* ========== متغیرهای محلی ========== */
:where(body.page-ads-banners) .banners-page {
    --card-bg: var(--bg-primary);
    --input-border: rgba(240, 106, 0, 0.2);
    --input-focus: var(--primary-color);
    --slide-bg: var(--bg-secondary);
}

/* ========== هدر صفحه ========== */
:where(body.page-ads-banners) .page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
}

:where(body.page-ads-banners) .page-header h1 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

:where(body.page-ads-banners) .page-header h1 i {
    color: var(--primary-color);
}

/* ========== کارت ========== */
:where(body.page-ads-banners) .card {
    background: var(--bg-primary);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    margin-bottom: 1.5rem;
    transition: var(--transition);
}

:where(body.page-ads-banners) .card-header {
    padding: 1.2rem 1.5rem;
    border-bottom: 1px solid rgba(240, 106, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

:where(body.page-ads-banners) .card-header h2 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

:where(body.page-ads-banners) .card-header h2 i {
    color: var(--primary-color);
    font-size: 1rem;
}

:where(body.page-ads-banners) .card-body {
    padding: 1.5rem;
}

/* ========== لیست بنرها ========== */
:where(body.page-ads-banners) .banner-list-empty {
    text-align: center;
    padding: 2.5rem;
    color: var(--text-light);
}

:where(body.page-ads-banners) .banner-list-empty i {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
    display: block;
    opacity: 0.4;
}

:where(body.page-ads-banners) .banner-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.2rem;
    border-radius: 10px;
    margin-bottom: 0.75rem;
    background: var(--bg-secondary);
    border: 1px solid rgba(240, 106, 0, 0.08);
    transition: var(--transition);
}

:where(body.page-ads-banners) .banner-item:hover {
    border-color: rgba(240, 106, 0, 0.25);
    box-shadow: var(--shadow-sm);
}

:where(body.page-ads-banners) .banner-item:last-child {
    margin-bottom: 0;
}

:where(body.page-ads-banners) .banner-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

:where(body.page-ads-banners) .banner-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(240, 106, 0, 0.12);
    color: var(--primary-color);
    padding: 0.3rem 0.75rem;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
}

:where(body.page-ads-banners) .banner-anim-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(0, 184, 148, 0.1);
    color: var(--secondary-color);
    padding: 0.3rem 0.75rem;
    border-radius: 50px;
    font-size: 0.8rem;
}

:where(body.page-ads-banners) .status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.75rem;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
}

:where(body.page-ads-banners) .status-badge.active {
    background: rgba(0, 184, 148, 0.15);
    color: var(--success-color);
}

:where(body.page-ads-banners) .status-badge.inactive {
    background: rgba(214, 48, 49, 0.1);
    color: var(--danger-color);
}

:where(body.page-ads-banners) .banner-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

:where(body.page-ads-banners) .btn-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    transition: var(--transition);
    text-decoration: none;
}

:where(body.page-ads-banners) .btn-icon.toggle {
    background: rgba(253, 203, 110, 0.15);
    color: var(--warning-color);
}

:where(body.page-ads-banners) .btn-icon.toggle:hover {
    background: rgba(253, 203, 110, 0.3);
}

:where(body.page-ads-banners) .btn-icon.edit {
    background: rgba(9, 132, 227, 0.12);
    color: var(--info-color);
}

:where(body.page-ads-banners) .btn-icon.edit:hover {
    background: rgba(9, 132, 227, 0.25);
}

:where(body.page-ads-banners) .btn-icon.delete {
    background: rgba(214, 48, 49, 0.1);
    color: var(--danger-color);
}

:where(body.page-ads-banners) .btn-icon.delete:hover {
    background: rgba(214, 48, 49, 0.2);
}

/* ========== فرم ========== */
:where(body.page-ads-banners) .form-section-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-light);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(240, 106, 0, 0.1);
}

:where(body.page-ads-banners) .form-group {
    margin-bottom: 1.2rem;
}

:where(body.page-ads-banners) .form-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

:where(body.page-ads-banners) .form-control {
    width: 100%;
    padding: 0.65rem 1rem;
    border: 1.5px solid var(--input-border);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-family: 'vazir', sans-serif;
    font-size: 0.9rem;
    transition: var(--transition);
    outline: none;
    box-sizing: border-box;
}

:where(body.page-ads-banners) .form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(240, 106, 0, 0.12);
    background: var(--bg-primary);
}

:where(body.page-ads-banners) select.form-control {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236c5ce7' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 1rem center;
    padding-left: 2.5rem;
}

:where(body.page-ads-banners) .form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
}

/* ========== چک‌باکس سفارشی ========== */
:where(body.page-ads-banners) .checkbox-group {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
    padding: 0.65rem 1rem;
    border: 1.5px solid var(--input-border);
    border-radius: 8px;
    background: var(--bg-secondary);
    transition: var(--transition);
    user-select: none;
}

:where(body.page-ads-banners) .checkbox-group:hover {
    border-color: var(--primary-color);
    background: rgba(240, 106, 0, 0.05);
}

:where(body.page-ads-banners) .checkbox-group input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary-color);
    cursor: pointer;
    flex-shrink: 0;
}

:where(body.page-ads-banners) .checkbox-group .checkbox-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* ========== آپلود فایل سفارشی ========== */
:where(body.page-ads-banners) .file-upload-wrapper {
    position: relative;
}

:where(body.page-ads-banners) .file-upload-area {
    border: 2px dashed rgba(240, 106, 0, 0.3);
    border-radius: 10px;
    padding: 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: var(--transition);
    background: var(--bg-secondary);
    position: relative;
    overflow: hidden;
}

:where(body.page-ads-banners) .file-upload-area:hover {
    border-color: var(--primary-color);
    background: rgba(240, 106, 0, 0.04);
}

:where(body.page-ads-banners) .file-upload-area.dragover {
    border-color: var(--primary-color);
    background: rgba(240, 106, 0, 0.08);
}

:where(body.page-ads-banners) .file-upload-area input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

:where(body.page-ads-banners) .file-upload-icon {
    font-size: 2rem;
    color: var(--primary-light);
    margin-bottom: 0.5rem;
}

:where(body.page-ads-banners) .file-upload-text {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

:where(body.page-ads-banners) .file-upload-text strong {
    color: var(--primary-color);
}

:where(body.page-ads-banners) .file-upload-preview {
    margin-top: 0.75rem;
    display: none;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.9rem;
    background: rgba(240, 106, 0, 0.08);
    border-radius: 8px;
    font-size: 0.82rem;
    color: var(--primary-color);
}

:where(body.page-ads-banners) .file-upload-preview.visible {
    display: flex;
}

:where(body.page-ads-banners) .file-current {
    margin-top: 0.6rem;
    font-size: 0.78rem;
    color: var(--text-light);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* ========== تنظیمات اسلایدر ========== */
:where(body.page-ads-banners) .slider-settings-box {
    display: none;
    background: rgba(240, 106, 0, 0.04);
    border: 1px solid rgba(240, 106, 0, 0.12);
    border-radius: 10px;
    padding: 1.2rem;
    margin-bottom: 1.2rem;
}

/* ========== اسلایدهای تصویری/متنی ========== */
:where(body.page-ads-banners) .slides-section {
    display: none;
}

:where(body.page-ads-banners) .slides-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

:where(body.page-ads-banners) .slides-header h3 {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

:where(body.page-ads-banners) .slides-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1rem;
}

:where(body.page-ads-banners) .slide-item {
    background: var(--bg-secondary);
    border: 1px solid rgba(240, 106, 0, 0.1);
    border-radius: 10px;
    padding: 1.2rem;
    position: relative;
    transition: var(--transition);
}

:where(body.page-ads-banners) .slide-item:hover {
    border-color: rgba(240, 106, 0, 0.25);
}

:where(body.page-ads-banners) .slide-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(240, 106, 0, 0.08);
}

:where(body.page-ads-banners) .slide-number {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--primary-color);
    background: rgba(240, 106, 0, 0.1);
    padding: 0.2rem 0.65rem;
    border-radius: 50px;
}

:where(body.page-ads-banners) .slide-remove-btn {
    width: 28px;
    height: 28px;
    border: none;
    background: rgba(214, 48, 49, 0.1);
    color: var(--danger-color);
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    transition: var(--transition);
}

:where(body.page-ads-banners) .slide-remove-btn:hover {
    background: rgba(214, 48, 49, 0.2);
}

/* ========== دکمه‌های اصلی ========== */
:where(body.page-ads-banners) .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.4rem;
    border-radius: 8px;
    border: none;
    font-family: 'vazir', sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
}

:where(body.page-ads-banners) .btn-primary {
    background: var(--primary-color);
    color: white;
}

:where(body.page-ads-banners) .btn-primary:hover {
    background: var(--primary-dark);
    box-shadow: 0 4px 12px rgba(240, 106, 0, 0.35);
    transform: translateY(-1px);
}

:where(body.page-ads-banners) .btn-outline {
    background: transparent;
    color: var(--text-secondary);
    border: 1.5px solid rgba(0,0,0,0.12);
}

:where(body.page-ads-banners) .btn-outline:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

:where(body.page-ads-banners) .btn-ghost {
    background: rgba(240, 106, 0, 0.08);
    color: var(--primary-color);
    border: 1px dashed rgba(240, 106, 0, 0.3);
    width: 100%;
    justify-content: center;
    padding: 0.65rem;
}

:where(body.page-ads-banners) .btn-ghost:hover {
    background: rgba(240, 106, 0, 0.14);
}

:where(body.page-ads-banners) .btn-danger-outline {
    background: transparent;
    color: var(--danger-color);
    border: 1.5px solid rgba(214, 48, 49, 0.25);
}

:where(body.page-ads-banners) .btn-danger-outline:hover {
    background: rgba(214, 48, 49, 0.08);
}

:where(body.page-ads-banners) .form-actions {
    display: flex;
    gap: 0.75rem;
    padding-top: 1.2rem;
    border-top: 1px solid rgba(240, 106, 0, 0.08);
    margin-top: 1.2rem;
}

/* ========== لودینگ ========== */
:where(body.page-ads-banners) .loading-row {
    display: flex;
    gap: 0.5rem;
    padding: 1.5rem;
    justify-content: center;
}

:where(body.page-ads-banners) .loading-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary-light);
    animation: pulse--ads-banners 1.2s ease-in-out infinite;
}

:where(body.page-ads-banners) .loading-dot:nth-child(2) { animation-delay: 0.2s; }
:where(body.page-ads-banners) .loading-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes pulse--ads-banners {
    0%, 80%, 100% { transform: scale(0.7); opacity: 0.4; }
    40% { transform: scale(1); opacity: 1; }
}

/* ========== رنگ‌پیکر ========== */
:where(body.page-ads-banners) .color-input-group {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    border: 1.5px solid var(--input-border);
    border-radius: 8px;
    padding: 0.4rem 0.8rem;
    background: var(--bg-secondary);
    transition: var(--transition);
}

:where(body.page-ads-banners) .color-input-group:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(240, 106, 0, 0.12);
}

:where(body.page-ads-banners) .color-input-group input[type="color"] {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    padding: 0;
    background: none;
}

:where(body.page-ads-banners) .color-input-group input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
:where(body.page-ads-banners) .color-input-group input[type="color"]::-webkit-color-swatch { border: none; border-radius: 5px; }

:where(body.page-ads-banners) .color-hex-text {
    font-size: 0.82rem;
    color: var(--text-secondary);
    font-family: monospace;
}

/* موبایل */
@media (max-width: 768px) {
    :where(body.page-ads-banners) .form-row {
        grid-template-columns: 1fr;
    }

    :where(body.page-ads-banners) .banner-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    :where(body.page-ads-banners) .form-actions {
        flex-direction: column;
    }

    :where(body.page-ads-banners) .btn {
        justify-content: center;
    }
}

/* ========== دکمه راهنما ========== */
:where(body.page-ads-banners) .btn-help {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 1rem;
    border-radius: 50px;
    border: 1.5px solid rgba(240, 106, 0, 0.35);
    background: rgba(240, 106, 0, 0.08);
    color: var(--primary-color);
    font-family: 'vazir', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

:where(body.page-ads-banners) .btn-help:hover {
    background: rgba(240, 106, 0, 0.16);
    border-color: var(--primary-color);
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(240, 106, 0, 0.2);
}

/* ========== مودال راهنما ========== */
:where(body.page-ads-banners) .help-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(3px);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

:where(body.page-ads-banners) .help-modal-overlay.open {
    display: flex;
}

:where(body.page-ads-banners) .help-modal {
    background: var(--bg-primary);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    width: 100%;
    max-width: 620px;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    animation: modalIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes modalIn {
    from { opacity: 0; transform: scale(0.92) translateY(16px); }
    to   { opacity: 1; transform: scale(1)    translateY(0);    }
}

:where(body.page-ads-banners) .help-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.2rem 1.5rem;
    border-bottom: 1px solid rgba(240, 106, 0, 0.1);
    flex-shrink: 0;
}

:where(body.page-ads-banners) .help-modal-header h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

:where(body.page-ads-banners) .help-modal-header h3 i {
    color: var(--primary-color);
}

:where(body.page-ads-banners) .help-modal-close {
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(214, 48, 49, 0.1);
    color: var(--danger-color);
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    transition: var(--transition);
}

:where(body.page-ads-banners) .help-modal-close:hover {
    background: rgba(214, 48, 49, 0.2);
}

:where(body.page-ads-banners) .help-modal-body {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
}

/* تب‌ها */
:where(body.page-ads-banners) .help-tabs {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 1.4rem;
    background: var(--bg-secondary);
    padding: 0.35rem;
    border-radius: 10px;
}

:where(body.page-ads-banners) .help-tab-btn {
    flex: 1;
    padding: 0.5rem 0.75rem;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--text-secondary);
    font-family: 'vazir', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}

:where(body.page-ads-banners) .help-tab-btn.active {
    background: var(--bg-primary);
    color: var(--primary-color);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

:where(body.page-ads-banners) .help-tab-panel {
    display: none;
}

:where(body.page-ads-banners) .help-tab-panel.active {
    display: block;
}

/* کارت‌های نوع بنر */
:where(body.page-ads-banners) .banner-type-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem;
    margin-bottom: 1rem;
}

:where(body.page-ads-banners) .banner-type-card {
    background: var(--bg-secondary);
    border: 1.5px solid rgba(240, 106, 0, 0.1);
    border-radius: 12px;
    padding: 1.1rem;
    transition: var(--transition);
}

:where(body.page-ads-banners) .banner-type-card:hover {
    border-color: rgba(240, 106, 0, 0.3);
}

:where(body.page-ads-banners) .banner-type-card .btc-icon {
    font-size: 1.6rem;
    margin-bottom: 0.5rem;
    display: block;
}

:where(body.page-ads-banners) .banner-type-card .btc-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.3rem;
}

:where(body.page-ads-banners) .banner-type-card .btc-desc {
    font-size: 0.78rem;
    color: var(--text-light);
    line-height: 1.6;
}

/* مراحل راهنما */
:where(body.page-ads-banners) .help-steps {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

:where(body.page-ads-banners) .help-step {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 0.9rem 1rem;
    background: var(--bg-secondary);
    border-radius: 10px;
    border: 1px solid rgba(240, 106, 0, 0.08);
    transition: var(--transition);
}

:where(body.page-ads-banners) .help-step:hover {
    border-color: rgba(240, 106, 0, 0.2);
}

:where(body.page-ads-banners) .help-step-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--primary-color);
    color: white;
    font-size: 0.78rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

:where(body.page-ads-banners) .help-step-text .hst-title {
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.2rem;
}

:where(body.page-ads-banners) .help-step-text .hst-desc {
    font-size: 0.78rem;
    color: var(--text-light);
    line-height: 1.6;
}

/* نکته */
:where(body.page-ads-banners) .help-tip {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.85rem 1rem;
    background: rgba(253, 203, 110, 0.1);
    border: 1px solid rgba(253, 203, 110, 0.3);
    border-radius: 10px;
    margin-top: 1rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

:where(body.page-ads-banners) .help-tip i {
    color: var(--warning-color);
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: 1px;
}

:where(body.page-ads-banners) .help-modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid rgba(240, 106, 0, 0.08);
    display: flex;
    justify-content: flex-end;
    flex-shrink: 0;
}

@media (max-width: 500px) {
    :where(body.page-ads-banners) .banner-type-grid { grid-template-columns: 1fr; }
    :where(body.page-ads-banners) .help-tabs { flex-wrap: wrap; }
}

/* ==========================================================================
   PAGE: ai
   source: pages/ai.php
   ========================================================================== */
:where(body.page-ai) .ai-panel-wrap { max-width: 780px; margin: 0 auto; }

    :where(body.page-ai) .ai-tabs {
        display: flex;
        gap: 0.5rem;
        margin-bottom: 1.2rem;
        border-bottom: 1px solid rgba(0,0,0,0.08);
    }
    :where(body.page-ai) .ai-tab-btn {
        background: none;
        border: none;
        cursor: pointer;
        padding: 0.8rem 1.4rem;
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--text-secondary);
        border-bottom: 3px solid transparent;
        transition: var(--transition);
    }
    :where(body.page-ai) .ai-tab-btn:hover { color: var(--primary-color); }
    :where(body.page-ai) .ai-tab-btn.active {
        color: var(--primary-color);
        border-bottom-color: var(--primary-color);
    }

    :where(body.page-ai) .ai-tab-panel { display: none; }
    :where(body.page-ai) .ai-tab-panel.active { display: block; }

    :where(body.page-ai) .ai-status-pill {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        font-size: 0.8rem;
        font-weight: 600;
        padding: 0.3rem 0.8rem;
        border-radius: 50px;
    }
    :where(body.page-ai) .ai-status-pill.on  { background: rgba(0,184,148,0.12); color: var(--success-color); }
    :where(body.page-ai) .ai-status-pill.off { background: rgba(214,48,49,0.1);  color: var(--danger-color); }
    :where(body.page-ai) .ai-status-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

    :where(body.page-ai) .ai-switch { position: relative; display: inline-block; width: 50px; height: 28px; flex-shrink: 0; }
    :where(body.page-ai) .ai-switch input { opacity: 0; width: 0; height: 0; }
    :where(body.page-ai) .ai-switch .slider {
        position: absolute; cursor: pointer; inset: 0;
        background-color: #ccc; transition: var(--transition); border-radius: 999px;
    }
    :where(body.page-ai) .ai-switch .slider:before {
        position: absolute; content: ""; height: 20px; width: 20px; right: 4px; bottom: 4px;
        background-color: #fff; transition: var(--transition); border-radius: 50%;
    }
    :where(body.page-ai) .ai-switch input:checked + .slider { background-color: var(--primary-color); }
    :where(body.page-ai) .ai-switch input:checked + .slider:before { transform: translateX(-22px); }

    :where(body.page-ai) .ai-field { margin-bottom: 1.3rem; }
    :where(body.page-ai) .ai-field label {
        display: block; font-size: 0.85rem; font-weight: 600;
        margin-bottom: 0.5rem; color: var(--text-primary);
    }
    :where(body.page-ai) .ai-field small.hint { display: block; color: var(--text-secondary); font-size: 0.78rem; margin-top: 0.4rem; }
    :where(body.page-ai) .ai-input, :where(body.page-ai) .ai-textarea, :where(body.page-ai) .ai-select {
        width: 100%; padding: 0.75rem 1rem; border: 1px solid rgba(0,0,0,0.12);
        border-radius: var(--border-radius); font-size: 0.9rem; background: var(--bg-secondary);
        color: var(--text-primary); transition: var(--transition);
    }
    :where(body.page-ai) .ai-input:focus, :where(body.page-ai) .ai-textarea:focus, :where(body.page-ai) .ai-select:focus {
        outline: none; border-color: var(--primary-color); background: var(--bg-primary);
    }
    :where(body.page-ai) .ai-textarea { resize: vertical; min-height: 90px; }

    :where(body.page-ai) .ai-token-row { position: relative; }
    :where(body.page-ai) .ai-token-row .ai-toggle-eye {
        position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
        background: none; border: none; cursor: pointer; color: var(--text-secondary); font-size: 0.95rem;
    }

    :where(body.page-ai) .ai-count { font-size: 0.75rem; color: var(--text-light); text-align: left; margin-top: 0.35rem; }
    :where(body.page-ai) .ai-count.warn { color: var(--danger-color); }

    :where(body.page-ai) .ai-alert { padding: 0.9rem 1.1rem; border-radius: var(--border-radius); font-size: 0.85rem; margin-bottom: 1.2rem; }
    :where(body.page-ai) .ai-alert.success { background: rgba(0,184,148,0.1); color: var(--success-color); }
    :where(body.page-ai) .ai-alert.error   { background: rgba(214,48,49,0.1); color: var(--danger-color); }
    :where(body.page-ai) .ai-alert ul { margin: 0.3rem 1.1rem 0 0; padding: 0; }

    :where(body.page-ai) .ai-save-btn {
        background: var(--primary-color); color: #fff; border: none; border-radius: var(--border-radius);
        padding: 0.85rem 2rem; font-size: 0.9rem; font-weight: 700; cursor: pointer; transition: var(--transition);
    }
    :where(body.page-ai) .ai-save-btn:hover { background: var(--primary-dark); }

    :where(body.page-ai) .ai-guide h4 { margin: 1.2rem 0 0.5rem; color: var(--primary-color); font-size: 0.95rem; }
    :where(body.page-ai) .ai-guide p, :where(body.page-ai) .ai-guide li { color: var(--text-secondary); font-size: 0.85rem; line-height: 1.9; }
    :where(body.page-ai) .ai-guide ol, :where(body.page-ai) .ai-guide ul { padding-right: 1.3rem; margin: 0.4rem 0; }
    :where(body.page-ai) .ai-guide .step-num {
        display: inline-flex; align-items: center; justify-content: center;
        width: 22px; height: 22px; border-radius: 50%; background: var(--primary-light);
        color: #fff; font-size: 0.75rem; font-weight: 700; margin-left: 0.5rem;
    }
    :where(body.page-ai) .ai-guide code {
        background: rgba(0,0,0,0.06); padding: 0.15rem 0.4rem; border-radius: 4px; font-size: 0.8rem;
        direction: ltr; display: inline-block;
    }

/* ==========================================================================
   PAGE: banners
   source: pages/banners.php
   ========================================================================== */
:where(body.page-banners) .slideshow {
    position: relative;
    width: 100%;
    max-width: 1600px;
    overflow: hidden;
    aspect-ratio: 3.5 / 1;   /* حالت موبایل */
    border-radius: 16px;
    background: #FF6B35;
  }
  @media (min-width: 768px) {
    :where(body.page-banners) .slideshow {
      aspect-ratio: 6 / 1;  /* توی تبلت/دسکتاپ ارتفاع کمتر */
    }
  }
  :where(body.page-banners) .slideshow img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 600px;
    object-fit: contain;
  }

/* ==========================================================================
   PAGE: blog
   source: pages/blog.php
   ========================================================================== */
:where(body.page-blog) .user-menu {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }

        :where(body.page-blog) .card {
            background: var(--bg-primary);
            border-radius: var(--border-radius);
            box-shadow: var(--shadow-sm);
            margin-bottom: 20px;
            overflow: hidden;
            transition: var(--transition);
        }

        :where(body.page-blog) .card:hover {
            box-shadow: var(--shadow-md);
        }

        :where(body.page-blog) .card-header {
            padding: 15px 20px;
            border-bottom: 1px solid var(--bg-secondary);
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: var(--bg-secondary);
        }

        :where(body.page-blog) .card-header h2 {
            font-size: 1.4rem;
            color: var(--text-primary);
            margin: 0;
        }

        :where(body.page-blog) .card-body {
            padding: 20px;
        }

        :where(body.page-blog) .form-group {
            margin-bottom: 20px;
        }

        :where(body.page-blog) .form-label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: var(--text-primary);
        }

        :where(body.page-blog) .form-control {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: var(--border-radius);
            background: var(--bg-primary);
            color: var(--text-primary);
            transition: var(--transition);
            font-family: inherit;
        }

        :where(body.page-blog) .form-control:focus {
            outline: none;
            border-color: var(--primary-light);
            box-shadow: 0 0 0 3px rgba(240, 106, 0, 0.1);
        }

        :where(body.page-blog) textarea.form-control {
            min-height: 150px;
            resize: vertical;
        }

        :where(body.page-blog) .form-check {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        :where(body.page-blog) .form-check-input {
            width: 18px;
            height: 18px;
            accent-color: var(--primary-color);
        }

        :where(body.page-blog) .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 10px 20px;
            border: none;
            border-radius: var(--border-radius);
            font-weight: 500;
            cursor: pointer;
            transition: var(--transition);
            text-decoration: none;
            gap: 8px;
            font-family: inherit;
        }

        :where(body.page-blog) .btn-primary {
            background: var(--primary-color);
            color: white;
        }

        :where(body.page-blog) .btn-primary:hover {
            background: var(--primary-dark);
        }

        :where(body.page-blog) .btn-success {
            background: var(--success-color);
            color: white;
        }

        :where(body.page-blog) .btn-success:hover {
            background: #00a382;
        }

        :where(body.page-blog) .btn-danger {
            background: var(--danger-color);
            color: white;
        }

        :where(body.page-blog) .btn-danger:hover {
            background: #c62a2a;
        }

        :where(body.page-blog) .btn-secondary {
            background: #6c757d;
            color: white;
        }

        :where(body.page-blog) .btn-secondary:hover {
            background: #5a6268;
        }

        :where(body.page-blog) .btn-sm {
            padding: 6px 12px;
            font-size: 0.875rem;
        }

        :where(body.page-blog) .table {
            width: 100%;
            border-collapse: collapse;
        }

        :where(body.page-blog) .table th, :where(body.page-blog) .table td {
            padding: 12px 15px;
            text-align: right;
            border-bottom: 1px solid var(--bg-secondary);
        }

        :where(body.page-blog) .table th {
            background: var(--bg-secondary);
            font-weight: 600;
            color: var(--text-primary);
        }

        :where(body.page-blog) .table tr:hover {
            background: rgba(240, 106, 0, 0.05);
        }

        :where(body.page-blog) .badge {
            padding: 5px 10px;
            border-radius: 20px;
            font-size: 0.75rem;
            font-weight: 600;
        }

        :where(body.page-blog) .badge-success {
            background: rgba(0, 184, 148, 0.2);
            color: var(--success-color);
        }

        :where(body.page-blog) .badge-warning {
            background: rgba(253, 203, 110, 0.2);
            color: var(--warning-color);
        }

        :where(body.page-blog) .alert {
            padding: 12px 15px;
            border-radius: var(--border-radius);
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        :where(body.page-blog) .alert-success {
            background: rgba(0, 184, 148, 0.1);
            color: var(--success-color);
            border: 1px solid rgba(0, 184, 148, 0.2);
        }

        :where(body.page-blog) .alert-danger {
            background: rgba(214, 48, 49, 0.1);
            color: var(--danger-color);
            border: 1px solid rgba(214, 48, 49, 0.2);
        }

        :where(body.page-blog) .tabs {
            display: flex;
            border-bottom: 1px solid var(--bg-secondary);
            margin-bottom: 20px;
        }

        :where(body.page-blog) .tab {
            padding: 10px 20px;
            cursor: pointer;
            color: var(--text-secondary);
            transition: var(--transition);
            border-bottom: 2px solid transparent;
        }

        :where(body.page-blog) .tab.active {
            color: var(--primary-color);
            border-bottom-color: var(--primary-color);
        }

        :where(body.page-blog) .tab:hover {
            color: var(--primary-color);
        }

        :where(body.page-blog) .tab-content {
            display: none;
        }

        :where(body.page-blog) .tab-content.active {
            display: block;
        }

        :where(body.page-blog) #loading {
            display: none;
            text-align: center;
            padding: 20px;
        }

        :where(body.page-blog) .spinner {
            border: 4px solid rgba(0, 0, 0, 0.1);
            border-left-color: var(--primary-color);
            border-radius: 50%;
            width: 30px;
            height: 30px;
            animation: spin 1s linear infinite;
            margin: 0 auto;
        }

        :where(body.page-blog) .bmodal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
            z-index: 1000;
            overflow-y: auto;
        }

        :where(body.page-blog) .modal-content {
            background-color: white;
            margin: 5% auto;
            padding: 25px;
            width: 90%;
            max-width: 800px;
            border-radius: var(--border-radius);
            max-height: 85vh;
            overflow-y: auto;
            position: relative;
            box-shadow: 0 10px 25px rgba(0,0,0,0.2);
        }

        :where(body.page-blog) .close {
            position: absolute;
            top: 15px;
            left: 15px;
            font-size: 28px;
            cursor: pointer;
            color: #777;
            transition: var(--transition);
        }

        :where(body.page-blog) .close:hover {
            color: var(--danger-color);
        }

        :where(body.page-blog) .mt-2 {
            margin-top: 0.5rem;
        }
        :where(body.page-blog) .mt-3 {
            margin-top: 1rem;
        }
        :where(body.page-blog) .text-center {
            text-align: center;
        }

        /* استایل‌های زیبا برای فایل آپلود */
        :where(body.page-blog) .file-upload {
            position: relative;
            overflow: hidden;
            margin-bottom: 15px;
        }

        :where(body.page-blog) .file-upload-input {
            position: absolute;
            top: 0;
            right: 0;
            margin: 0;
            padding: 0;
            font-size: 20px;
            cursor: pointer;
            opacity: 0;
            height: 100%;
            width: 100%;
        }

        :where(body.page-blog) .file-upload-label {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 20px;
            border: 2px dashed #ddd;
            border-radius: var(--border-radius);
            background-color: #f9f9f9;
            cursor: pointer;
            transition: var(--transition);
            text-align: center;
            min-height: 120px;
        }

        :where(body.page-blog) .file-upload-label:hover {
            border-color: var(--primary-light);
            background-color: #f0f0f0;
        }

        :where(body.page-blog) .file-upload-icon {
            font-size: 2rem;
            color: var(--primary-color);
            margin-bottom: 10px;
        }

        :where(body.page-blog) .file-upload-text {
            color: #666;
            font-size: 0.9rem;
        }

        :where(body.page-blog) .file-upload-button {
            margin-top: 10px;
            background: var(--primary-light);
            color: white;
            padding: 6px 12px;
            border-radius: var(--border-radius);
            font-size: 0.8rem;
        }

        :where(body.page-blog) .file-preview {
            margin-top: 15px;
            text-align: center;
        }

        :where(body.page-blog) .file-preview img, :where(body.page-blog) .file-preview video {
            max-width: 100%;
            max-height: 200px;
            border-radius: var(--border-radius);
            box-shadow: var(--shadow-sm);
        }

        :where(body.page-blog) .file-name {
            display: block;
            margin-top: 8px;
            font-size: 0.9rem;
            color: #666;
        }

        @media (max-width: 768px) {
            :where(body.page-blog) .container {
                padding: 15px;
            }
            
            :where(body.page-blog) .user-menu {
                flex-direction: column;
                align-items: flex-start;
            }
            
            :where(body.page-blog) .card-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 10px;
            }
            
            :where(body.page-blog) .modal-content {
                width: 95%;
                margin: 10% auto;
                padding: 15px;
            }
            
            :where(body.page-blog) .tabs {
                flex-wrap: wrap;
            }
            
            :where(body.page-blog) .tab {
                padding: 8px 12px;
            }
        }

/* ==========================================================================
   PAGE: call-service
   source: pages/call-service.php
   ========================================================================== */
/* استایل‌های ساده و شیک */
    :where(body.page-call-service) .admin-container {
        max-width: 1200px;
        margin: 20px auto;
        padding: 20px;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    :where(body.page-call-service) .status-card {
        background: #fff;
        border-radius: 12px;
        padding: 25px;
        margin-bottom: 20px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        border: 1px solid #e1e5e9;
    }

    :where(body.page-call-service) .status-header {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 20px;
    }

    :where(body.page-call-service) .status-header h2 {
        margin: 0;
        color: #2c3e50;
        font-size: 20px;
        font-weight: 600;
    }

    :where(body.page-call-service) .status-icon {
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    :where(body.page-call-service) .connection-status {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 15px;
    }

    :where(body.page-call-service) .status-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #e74c3c;
    }

    :where(body.page-call-service) .status-dot.connected {
        background: #27ae60;
        animation: pulse--call-service 2s infinite;
    }

    @keyframes pulse--call-service {
        0% { 
            opacity: 1;
            box-shadow: 0 0 0 0 rgba(39, 174, 96, 0.7);
        }
        70% { 
            opacity: 0.7;
            box-shadow: 0 0 0 10px rgba(39, 174, 96, 0);
        }
        100% { 
            opacity: 1;
            box-shadow: 0 0 0 0 rgba(39, 174, 96, 0);
        }
    }

    /* استایل کارت‌های آمار */
    :where(body.page-call-service) .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 20px;
        margin-bottom: 20px;
    }

    :where(body.page-call-service) .stat-card {
        background: #fff;
        border-radius: 12px;
        padding: 20px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        border: 1px solid #e1e5e9;
        text-align: center;
    }

    :where(body.page-call-service) .stat-icon {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 15px;
        font-size: 20px;
    }

    :where(body.page-call-service) .stat-value {
        font-size: 28px;
        font-weight: bold;
        color: #2c3e50;
        margin-bottom: 5px;
    }

    :where(body.page-call-service) .stat-label {
        font-size: 14px;
        color: #7f8c8d;
        font-weight: 500;
    }

    /* استایل جدول */
    :where(body.page-call-service) .table-container {
        background: #fff;
        border-radius: 12px;
        padding: 25px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        border: 1px solid #e1e5e9;
        overflow-x: auto;
    }

    :where(body.page-call-service) .stats-table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 10px;
    }

    :where(body.page-call-service) .stats-table th {
        background: #f8f9fa;
        padding: 12px 15px;
        text-align: right;
        font-weight: 600;
        color: #2c3e50;
        border-bottom: 2px solid #e1e5e9;
    }

    :where(body.page-call-service) .stats-table td {
        padding: 12px 15px;
        border-bottom: 1px solid #e1e5e9;
        text-align: right;
    }

    :where(body.page-call-service) .stats-table tr:hover {
        background: #f8f9fa;
    }

    :where(body.page-call-service) .call-status {
        padding: 4px 8px;
        border-radius: 6px;
        font-size: 12px;
        font-weight: 600;
    }

    :where(body.page-call-service) .status-answered {
        background: #d4edda;
        color: #155724;
    }

    :where(body.page-call-service) .status-missed {
        background: #f8d7da;
        color: #721c24;
    }

    :where(body.page-call-service) .status-rejected {
        background: #fff3cd;
        color: #856404;
    }

    :where(body.page-call-service) .status-completed {
        background: #cce7ff;
        color: #004085;
    }

    /* سرویس تماس */
    :where(body.page-call-service) .call-service-toggle {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-top: 20px;
        padding-top: 20px;
        border-top: 1px solid #e1e5e9;
    }

    :where(body.page-call-service) .toggle-switch {
        position: relative;
        display: inline-block;
        width: 50px;
        height: 28px;
    }

    :where(body.page-call-service) .toggle-switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    :where(body.page-call-service) .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #e74c3c;
        transition: .3s;
        border-radius: 28px;
    }

    :where(body.page-call-service) .slider:before {
        position: absolute;
        content: "";
        height: 20px;
        width: 20px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        transition: .3s;
        border-radius: 50%;
    }

    :where(body.page-call-service) input:checked + .slider {
        background-color: #27ae60;
    }

    :where(body.page-call-service) input:checked + .slider:before {
        transform: translateX(22px);
    }

    /* نوتیفیکیشن */
    :where(body.page-call-service) .notification {
        position: fixed;
        top: 20px;
        left: 50%;
        transform: translateX(-50%);
        padding: 12px 20px;
        border-radius: 8px;
        color: white;
        font-weight: 600;
        z-index: 10000;
        box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        display: flex;
        align-items: center;
        gap: 8px;
        animation: slideInDown 0.3s ease-out;
    }

    @keyframes slideInDown {
        from {
            transform: translateX(-50%) translateY(-100%);
            opacity: 0;
        }
        to {
            transform: translateX(-50%) translateY(0);
            opacity: 1;
        }
    }

    :where(body.page-call-service) .notification-success {
        background: #27ae60;
    }

    :where(body.page-call-service) .notification-error {
        background: #e74c3c;
    }

    :where(body.page-call-service) .notification-info {
        background: #3498db;
    }

    /* اطلاعات سرویس */
    :where(body.page-call-service) .service-info {
        background: #f8f9fa;
        border-radius: 12px;
        padding: 20px;
        margin-top: 20px;
        border: 1px solid #e1e5e9;
        font-size: 14px;
        line-height: 1.6;
    }

    :where(body.page-call-service) .service-info h4 {
        margin: 0 0 10px 0;
        color: #2c3e50;
        font-size: 16px;
    }

    :where(body.page-call-service) .warning-text {
        color: #e74c3c;
        font-weight: 600;
    }

    :where(body.page-call-service) .success-text {
        color: #27ae60;
        font-weight: 600;
    }

    /* واکنش‌گرایی */
    @media (max-width: 768px) {
        :where(body.page-call-service) .admin-container {
            padding: 15px;
            margin: 10px auto;
        }

        :where(body.page-call-service) .stats-grid {
            grid-template-columns: 1fr;
        }

        :where(body.page-call-service) .status-card {
            padding: 20px;
        }
    }

    @media (max-width: 480px) {
        :where(body.page-call-service) .status-card {
            padding: 15px;
        }

        :where(body.page-call-service) .table-container {
            padding: 15px;
        }
    }

/* ==========================================================================
   PAGE: customers
   source: pages/customers.php
   ========================================================================== */
/* استایل‌های اختصاصی برای صفحه کاربران */
        :where(body.page-customers) .users-section {
            background-color: var(--bg-primary);
            border-radius: var(--border-radius);
            box-shadow: var(--shadow-sm);
            padding: 1rem;
            margin-bottom: 1rem;
            
        }
        
        :where(body.page-customers) .search-box {
            display: flex;
            gap: 1rem;
            margin-bottom: 1.5rem;
        }
        
        :where(body.page-customers) .search-input {
            flex: 1;
            padding: 0.75rem 1rem;
            border: 1px solid var(--bg-secondary);
            border-radius: var(--border-radius);
            background-color: var(--bg-primary);
            color: var(--text-primary);
            transition: var(--transition);
            font-family: inherit;
        }
        
        :where(body.page-customers) .search-input:focus {
            outline: none;
            border-color: var(--primary-light);
            box-shadow: 0 0 0 3px rgba(240, 106, 0, 0.1);
        }
        
        :where(body.page-customers) .search-btn {
            padding: 0.75rem 1.5rem;
            background-color: var(--primary-color);
            color: white;
            border: none;
            border-radius: var(--border-radius);
            cursor: pointer;
            transition: var(--transition);
            font-family: inherit;
        }
        
        :where(body.page-customers) .search-btn:hover {
            background-color: var(--primary-dark);
        }
        
        :where(body.page-customers) .users-table {
            width: 100%;
            border-collapse: collapse;
            margin: 0.5rem;
 
        }
        
        :where(body.page-customers) .users-table th {
            background-color: var(--primary-color);
            color: white;
            padding: 1rem;
            text-align: right;
            font-weight: normal;
        }
        
        :where(body.page-customers) .users-table td {
            padding: 1rem;
            border-bottom: 1px solid var(--bg-secondary);
            color: var(--text-secondary);
        }
        
        :where(body.page-customers) .users-table tr:last-child td {
            border-bottom: none;
        }
        
        :where(body.page-customers) .users-table tr:hover td {
            background-color: rgba(0, 0, 0, 0.03);
        }
        
        :where(body.page-customers) .user-name {
            font-weight: 500;
            color: var(--text-primary);
        }
        
        :where(body.page-customers) .user-mobile {
            direction: ltr;
            text-align: left;
        }
        
        :where(body.page-customers) .load-more-container {
            text-align: center;
            margin-top: 1.5rem;
        }
        
        :where(body.page-customers) .load-more-btn {
            padding: 0.75rem 1.5rem;
            background-color: var(--primary-color);
            color: white;
            border: none;
            border-radius: var(--border-radius);
            cursor: pointer;
            transition: var(--transition);
            font-family: inherit;
        }
        
        :where(body.page-customers) .load-more-btn:hover {
            background-color: var(--primary-dark);
        }
        
        :where(body.page-customers) .load-more-btn:disabled {
            background-color: var(--text-light);
            cursor: not-allowed;
        }
        
        :where(body.page-customers) .loading-spinner {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 3px solid rgba(255,255,255,.3);
            border-radius: 50%;
            border-top-color: white;
            animation: spin 1s ease-in-out infinite;
            margin-right: 0.5rem;
            vertical-align: middle;
        }
        
        :where(body.page-customers) .results-info {
            color: var(--text-secondary);
            margin-bottom: 1rem;
            font-size: 0.9rem;
        }
        
        :where(body.page-customers) .no-results {
            text-align: center;
            padding: 2rem;
            color: var(--text-secondary);
        }
        
        /* حالت تاریک */
        :where(body.page-customers) .dark-mode .users-section {
            background-color: var(--bg-dark);
        }
        
        :where(body.page-customers) .dark-mode .search-input {
            background-color: var(--bg-dark);
            border-color: var(--bg-secondary);
            color: var(--text-primary);
        }
        
        :where(body.page-customers) .dark-mode .users-table td {
            border-color: var(--bg-secondary);
        }
        
        :where(body.page-customers) .dark-mode .users-table tr:hover td {
            background-color: rgba(255, 255, 255, 0.05);
        }
        :where(body.page-customers) .compact-user-card {
            width: 100%;
            height: 130px;
            background-color: var(--card-bg);
            border-radius: var(--border-radius);
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
            display: flex;
            overflow: hidden;
            transition: all 0.3s;
        }

        :where(body.page-customers) .dark-mode .compact-user-card {
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
        }

        :where(body.page-customers) .u-avatar {
            width: 30%;
            height: 100%;
            background-color: #eee;
            background-image: var(--avatar-img);
            background-size: 100% 100%;
            background-position: fixed;
            flex-shrink: 0;
            opacity:0.1;
        }

        :where(body.page-customers) .user-info {
            flex: 1;
            padding: 10px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        :where(body.page-customers) .user-id {
            
            color: var(--text-secondary);
            font-weight: 500;
        }

        :where(body.page-customers) .u-name {
      
            font-weight: 700;
            color: var(--text-primary);
            margin: 5px 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        :where(body.page-customers) .user-phone {
            
            color: var(--text-secondary);
            display: flex;
            align-items: center;
            margin-bottom: 3px;
        }

        :where(body.page-customers) .user-phone::before {
            content: "📱";
            margin-left: 3px;
            
        }

        :where(body.page-customers) .last-login {
            
            color: var(--text-secondary);
            display: flex;
            align-items: center;
        }

        :where(body.page-customers) .last-login::before {
            content: "🕒";
            margin-left: 3px;
            
        }
        
        /* استایل دکمه‌های خروجی */
:where(body.page-customers) .export-buttons {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

:where(body.page-customers) .export-btn {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: var(--transition);
    font-family: inherit;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

:where(body.page-customers) .excel-btn {
    background-color: #21a366;
    color: white;
}

:where(body.page-customers) .excel-btn:hover {
    background-color: #1a8a54;
}

:where(body.page-customers) .text-btn {
    background-color: #6c757d;
    color: white;
}

:where(body.page-customers) .text-btn:hover {
    background-color: #5a6268;
}

/* ==========================================================================
   PAGE: dashboard
   source: pages/dashboard.php, pages/include_rating.php, pages/include_stats.php, pages/include_status.php
   ========================================================================== */
/* --- from pages/dashboard.php --- */
:where(body.page-dashboard) #loader {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: #fff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      z-index: 9999999;
      transition: opacity 0.5s ease, visibility 0.5s ease;
    }

    :where(body.page-dashboard) .spinner {
      width: 60px;
      height: 60px;
      border: 5px solid rgba(255, 255, 255, 0.3);
      border-top: 5px solid #4fc3f7;
      border-radius: 50%;
      animation: spin--dashboard 1.2s linear infinite;
      margin-bottom: 20px;
    }

    :where(body.page-dashboard) .loading-text {
      font-size: 1rem;
      font-weight: 600;
      text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
      letter-spacing: 1px;
      animation: pulse--dashboard 2s infinite;
    }

    @keyframes spin--dashboard {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    @keyframes pulse--dashboard {
      0%, 100% { opacity: 0.7; }
      50% { opacity: 1; }
    }

    :where(body.page-dashboard) .content {
      color: white;
      text-align: center;
      padding: 20px;
      max-width: 800px;
      animation: fadeIn--dashboard 1s ease;
    }

    @keyframes fadeIn--dashboard {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }
:where(body.page-dashboard) .msd-container {
    background-color: var(--bg-primary);
            border-radius: var(--border-radius);
            padding: 20px;
            box-shadow: var(--shadow-sm);
            transition: var(--transition);
}

:where(body.page-dashboard) .msd-container:hover {
    transform: perspective(1000px) translateZ(10px);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.25), 0 10px 20px rgba(0, 0, 0, 0.2);
}

:where(body.page-dashboard) .msd-header {
    backdrop-filter: blur(12px);
    padding: 22px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

:where(body.page-dashboard) .msd-title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #000;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    letter-spacing: 0.5px;
}

:where(body.page-dashboard) .msd-body {
    padding: 5px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(18px);
}

:where(body.page-dashboard) .msd-content {
    text-align: center;
    color: #000;
}

:where(body.page-dashboard) .msd-content p {
    margin: 18px 0;
    line-height: 1.7;
    font-size: 16px;
    opacity: 0.95;
    font-weight: 400;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

:where(body.page-dashboard) .msd-button {
    background-color: #36A9AE;
  background-image: linear-gradient(#37ADB2, #329CA0);
  border: 1px solid #2A8387;
  border-radius: 4px;
  box-shadow: rgba(0, 0, 0, 0.12) 0 1px 1px;
  color: #FFFFFF;
  cursor: pointer;
  display: block;
  font-size: 17px;
  line-height: 100%;
  margin: 0;
  outline: 0;
  padding: 11px 15px 12px;
  text-align: center;
  transition: box-shadow .05s ease-in-out,opacity .05s ease-in-out;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  width: 100%;
}

:where(body.page-dashboard) .msd-button:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(255, 255, 255, 0.2), transparent);
    clip-path: polygon(0 0, 100% 0, 100% 70%, 0 100%);
    z-index: 1;
}

:where(body.page-dashboard) .msd-button-primary {
    background: rgba(219, 168, 0, 0.95);
    color: white;
}

:where(body.page-dashboard) .msd-button-primary:hover {
    background: rgba(219, 168, 0, 1);
    transform: translateY(-3px) translateZ(5px);
    box-shadow: 0 10px 30px rgba(219, 168, 0, 0.5), 
                inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

:where(body.page-dashboard) .msd-button-success {
    background: rgba(0, 128, 0, 0.95);
    color: white;
}

:where(body.page-dashboard) .msd-button-success:hover {
    background: rgba(0, 128, 0, 1);
    
    box-shadow: 0 10px 30px rgba(0, 128, 0, 0.5), 
                inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

:where(body.page-dashboard) .msd-button-info {
    background: rgba(50, 74, 185, 0.95);
    color: white;
}

:where(body.page-dashboard) .msd-button-info:hover {
    background: rgba(50, 74, 185, 1);
    
    box-shadow: 0 10px 30px rgba(50, 74, 185, 0.5), 
                inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

:where(body.page-dashboard) .msd-countdown {
    background: rgba(255, 255, 255, 0.15);
    padding: 18px;
    border-radius: 14px;
    margin: 18px 0;
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

:where(body.page-dashboard) .msd-countdown-value {
    background: rgba(255, 255, 255, 0.25);
    padding: 7px 14px;
    border-radius: 10px;
    font-weight: 700;
    margin: 0 3px;
    font-family: 'Courier New', monospace;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

:where(body.page-dashboard) .msd-warning {
    background: rgba(248, 215, 218, 0.25);
    color: #000;
    padding: 5px;
    border-radius: 10px;
    border: 1px solid rgba(255, 107, 107, 0.35);
    backdrop-filter: blur(12px);
    margin:5px;
    
}

:where(body.page-dashboard) .msd-phone {
    direction: ltr;
    font-family: 'Courier New', monospace;
    font-weight: 700;
    letter-spacing: 1.2px;
    font-size: 17px;
}

:where(body.page-dashboard) .msd-status {
    background-color: var(--bg-primary);
            border-radius: var(--border-radius);
            padding: 10px;
            transition: var(--transition);
}

:where(body.page-dashboard) .msd-status h4 {
    margin: 0 0 18px 0;
    color: #000;
    font-weight: 700;
    font-size: 18px;
    
}

:where(body.page-dashboard) .msd-time {
    font-size: 16px;
    font-weight: 700;
}

:where(body.page-dashboard) .msd-time span {
    padding: 5px 5px;
    border-radius: 8px;
    margin: 0 3px;
    background:#fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

@keyframes pulse--dashboard {
    0% { transform: scale(1); }
    50% { transform: scale(1.03); }
    100% { transform: scale(1); }
}

:where(body.page-dashboard) .msd-container {
    animation: fadeInUp 0.7s ease-out;
}

:where(body.page-dashboard) .msd-highlight {
    color: red;
    font-weight: bold;
    
}

:where(body.page-dashboard) .msd-icon {
    font-size: 18px;
    margin-left: 6px;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2));
}

:where(body.page-dashboard) a {
text-decoration:none;
	}
/* --- from pages/dashboard.php --- */
:where(body.page-dashboard) .paydiv { display:none; }
   :where(body.page-dashboard) .calldiv { display:block; }
/* --- from pages/dashboard.php --- */
:where(body.page-dashboard) .paydiv { display:block; }
   :where(body.page-dashboard) .calldiv { display:none; }
/* --- from pages/dashboard.php --- */
:where(body.page-dashboard) .paydiv { display:block; }
   :where(body.page-dashboard) .calldiv { display:none; }
/* --- from pages/dashboard.php --- */
:where(body.page-dashboard) .paydiv { display:block; }
   :where(body.page-dashboard) .calldiv { display:none; }
/* --- from pages/dashboard.php --- */
:where(body.page-dashboard) .paydiv { display:block; }
   :where(body.page-dashboard) .calldiv { display:none; }
/* --- from pages/dashboard.php --- */
:where(body.page-dashboard) .paydiv { display:block; }
   :where(body.page-dashboard) .calldiv { display:none; }
/* --- from pages/dashboard.php --- */
:where(body.page-dashboard) .paydiv { display:block; }
   :where(body.page-dashboard) .calldiv { display:none; }
/* --- from pages/include_rating.php --- */
:where(body.page-dashboard) .container {
            max-width: 1200px;
            margin: 0 auto;
        }



        :where(body.page-dashboard) .title {
            font-size: 24px;
            font-weight: 600;
            color: var(--primary-color);
        }

        :where(body.page-dashboard) .stats-container {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
            margin-bottom: 30px;
        }

        :where(body.page-dashboard) .stat-card {
            background-color: var(--bg-primary);
            border-radius: var(--border-radius);
            padding: 20px;
            box-shadow: var(--shadow-sm);
            transition: var(--transition);
        }

        :where(body.page-dashboard) .stat-card:hover {
            box-shadow: var(--shadow-md);
            transform: translateY(-3px);
        }

        :where(body.page-dashboard) .stat-title {
            font-size: 16px;
            color: var(--text-secondary);
            margin-bottom: 10px;
        }

        :where(body.page-dashboard) .stat-value {
            font-size: 28px;
            font-weight: 700;
            color: var(--primary-color);
        }

        :where(body.page-dashboard) .star {
            color: var(--warning-color);
            margin: 0 2px;
        }

        :where(body.page-dashboard) .products-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }

        :where(body.page-dashboard) .products-list {
            background-color: var(--bg-primary);
            border-radius: var(--border-radius);
            padding: 20px;
            box-shadow: var(--shadow-sm);
        }

        :where(body.page-dashboard) .list-title {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid var(--bg-secondary);
            color: var(--primary-color);
        }

        :where(body.page-dashboard) .product-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 0;
            border-bottom: 1px solid var(--bg-secondary);
        }

        :where(body.page-dashboard) .product-name {
            font-weight: 500;
        }

        :where(body.page-dashboard) .product-rating {
            display: flex;
            align-items: center;
        }

        :where(body.page-dashboard) .rating-value {
            margin-left: 8px;
            font-weight: 600;
            color: var(--text-secondary);
        }

        :where(body.page-dashboard) .no-data {
            text-align: center;
            padding: 20px;
            color: var(--text-light);
        }

        @media (max-width: 768px) {
            :where(body.page-dashboard) .stats-container, :where(body.page-dashboard) .products-container {
                grid-template-columns: 1fr;
            }
        }
/* --- from pages/include_stats.php --- */
:where(body.page-dashboard) .container {
            max-width: 1200px;
            margin: 0 auto;
        }
        :where(body.page-dashboard) .title {
            font-size: 24px;
            font-weight: 600;
            color: var(--primary-color);
        }
        :where(body.page-dashboard) .stats-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 30px;
            background-color: var(--bg-primary);
            border-radius: var(--border-radius);
            overflow: hidden;
            box-shadow: var(--shadow-sm);
        }
        :where(body.page-dashboard) .stats-table thead {
            background-color: var(--primary-color);
            color: #fff;
        }
        :where(body.page-dashboard) .stats-table th,
        :where(body.page-dashboard) .stats-table td {
            padding: 15px 20px;
            text-align: center;
            border-bottom: 1px solid #eee;
        }
        :where(body.page-dashboard) .stats-table th {
            font-weight: 600;
            font-size: 16px;
        }
        :where(body.page-dashboard) .stats-table tbody tr:hover {
            background-color: #f8f9fa;
            transition: var(--transition);
        }
        :where(body.page-dashboard) .stats-table tbody tr:last-child td {
            border-bottom: none;
        }
        :where(body.page-dashboard) .stat-value {
            font-size: 20px;
            font-weight: 700;
            color: var(--primary-color);
        }
        :where(body.page-dashboard) .stat-subtext {
            font-size: 13px;
            color: var(--text-light);
        }
        :where(body.page-dashboard) .conversion-rate {
            font-weight: 600;
            color: var(--success-color);
        }
        :where(body.page-dashboard) .date-display {
            text-align: center;
            margin-bottom: 20px;
            font-size: 18px;
            color: var(--text-secondary);
        }
        @media (max-width: 768px) {
            :where(body.page-dashboard) .stats-table {
                font-size: 14px;
            }
            :where(body.page-dashboard) .stats-table th,
            :where(body.page-dashboard) .stats-table td {
                padding: 12px 10px;
            }
        }
/* --- from pages/include_stats.php --- */
:where(body.page-dashboard) .stat-box {
            background: var(--bg-secondary);
            padding: 15px 25px;
            border-radius: 8px;
            text-align: center;
            border: 1px solid var(--border-color);
        }
        
        :where(body.page-dashboard) .stat-value {
            font-size: 1.8rem;
            font-weight: bold;
            color: var(--primary-color);
        }
        
        :where(body.page-dashboard) .stat-label {
            font-size: 0.85rem;
            color: var(--text-secondary);
            margin-top: 5px;
        }
        
        :where(body.page-dashboard) .info-row {
            display: flex;
            gap: 30px;
            flex-wrap: wrap;
            margin-top: 15px;
        }
        
        :where(body.page-dashboard) .info-item {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        :where(body.page-dashboard) .info-item span:first-child {
            color: var(--text-secondary);
        }
        
        :where(body.page-dashboard) .uptime-display {
            font-family: 'Courier New', monospace;
            direction: ltr;
            display: inline-block;
            color: var(--text-primary);
        }
        
        :where(body.page-dashboard) .section {
            margin-bottom: 25px;
        }
        
        :where(body.page-dashboard) .section h2 {
            margin-bottom: 15px;
            font-size: 1.1rem;
            color: var(--text-primary);
        }
        
        :where(body.page-dashboard) .monitor-table {
            width: 100%;
            border-collapse: collapse;
            background: var(--bg-primary);
            border-radius: var(--border-radius);
            overflow: hidden;
            box-shadow: var(--shadow-sm);
        }
        
        :where(body.page-dashboard) .monitor-table thead {
            background-color: var(--primary-color);
            color: #fff;
        }
        
        :where(body.page-dashboard) .monitor-table th,
        :where(body.page-dashboard) .monitor-table td {
            padding: 15px 18px;
            text-align: center;
            border-bottom: 1px solid var(--border-color);
        }
        
        :where(body.page-dashboard) .monitor-table th {
            font-weight: 600;
            font-size: 14px;
        }
        
        :where(body.page-dashboard) .monitor-table td {
            font-size: 14px;
            color: var(--text-primary);
        }
        
        :where(body.page-dashboard) .monitor-table tbody tr:hover {
            background-color: var(--bg-secondary);
            transition: var(--transition);
        }
        
        :where(body.page-dashboard) .monitor-table tbody tr:last-child td {
            border-bottom: none;
        }
        
        :where(body.page-dashboard) .badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 14px;
            border-radius: 20px;
            font-size: 13px;
            font-weight: 500;
        }
        
        :where(body.page-dashboard) .badge.online {
            background: rgba(34, 197, 94, 0.1);
            color: var(--success-color);
        }
        
        :where(body.page-dashboard) .badge.offline {
            background: rgba(239, 68, 68, 0.1);
            color: var(--danger-color);
        }
        
        :where(body.page-dashboard) .badge.connecting {
            background: rgba(245, 158, 11, 0.1);
            color: var(--warning-color);
        }
        
        :where(body.page-dashboard) .dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: currentColor;
        }
        
        :where(body.page-dashboard) .badge.online .dot {
            animation: pulse--dashboard 2s infinite;
        }
        
        @keyframes pulse--dashboard {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.4; }
        }
        
        :where(body.page-dashboard) .conn-bar {
            width: 80px;
            height: 5px;
            background: var(--border-color);
            border-radius: 3px;
            overflow: hidden;
            display: inline-block;
            vertical-align: middle;
            margin-right: 8px;
        }
        
        :where(body.page-dashboard) .conn-bar-fill {
            height: 100%;
            background: var(--primary-color);
            border-radius: 3px;
            transition: width 0.3s;
        }
        
        :where(body.page-dashboard) .refresh-btn {
            background: var(--primary-color);
            color: white;
            border: none;
            padding: 10px 25px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 0.9rem;
            transition: var(--transition);
        }
        
        :where(body.page-dashboard) .refresh-btn:hover {
            background: #2563eb;
            box-shadow: var(--shadow-md);
        }
        
        
        
        @media (max-width: 768px) {
            :where(body.page-dashboard) .header {
                flex-direction: column;
                text-align: center;
            }
            
            :where(body.page-dashboard) .header-stats {
                width: 100%;
                justify-content: center;
            }
            
            :where(body.page-dashboard) .monitor-table {
                font-size: 13px;
            }
            
            :where(body.page-dashboard) .monitor-table th,
            :where(body.page-dashboard) .monitor-table td {
                padding: 12px 8px;
            }
            
            :where(body.page-dashboard) .info-row {
                justify-content: center;
            }
        }
/* --- from pages/include_status.php --- */
:where(body.page-dashboard) .checkbox-container {
    background-color: var(--bg-primary);
            border-radius: var(--border-radius);
            padding: 20px;
            box-shadow: var(--shadow-sm);
            transition: var(--transition);
            text-align: center;
        }

:where(body.page-dashboard) .checkbox-card {
    background-color: var(--bg-secondary);
    border-radius: var(--border-radius);
    padding: 16px;
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: var(--transition);
}

:where(body.page-dashboard) .checkbox-label {
    color: var(--text-primary);
    font-weight: 500;
    margin-right: 12px;
}

:where(body.page-dashboard) .checkbox-toggle {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 30px;
}

:where(body.page-dashboard) .checkbox-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

:where(body.page-dashboard) .checkbox-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--danger-color);
    transition: var(--transition);
    border-radius: 34px;
}

:where(body.page-dashboard) .checkbox-slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: var(--transition);
    border-radius: 50%;
}

:where(body.page-dashboard) input:checked + .checkbox-slider {
    background-color: var(--success-color);
}

:where(body.page-dashboard) input:checked + .checkbox-slider:before {
    transform: translateX(30px);
}

:where(body.page-dashboard) .checkbox-status {
    position: absolute;
    right: -70px;
    top: 5px;
    color: var(--text-primary);
    font-size: 14px;
    width: 60px;
    text-align: center;
}

:where(body.page-dashboard) input:not(:checked) ~ .checkbox-status:after {
    content: attr(data-inactive);
    color: var(--danger-color);
}

:where(body.page-dashboard) input:checked ~ .checkbox-status:after {
    content: attr(data-active);
    color: var(--success-color);
}

:where(body.page-dashboard) .checkbox-status-message {
    text-align: center;
    color: var(--text-secondary);
    font-size: 13px;
    min-height: 18px;
}

/* Dark mode compatibility */
:where(body.page-dashboard) .dark-mode .checkbox-card {
    background-color: var(--bg-dark);
}

:where(body.page-dashboard) .dark-mode .checkbox-label {
    color: var(--text-secondary);
}
body:where(.page-dashboard) {
  --input-color: #99A3BA;
  --input-border: #CDD9ED;
  --input-background: #fff;
  --input-placeholder: #CBD1DC;
  --input-border-focus: #275EFE;
  --group-color: var(--input-color);
  --group-border: var(--input-border);
  --group-background: #EEF4FF;
  --group-color-focus: #fff;
  --group-border-focus: var(--input-border-focus);
  --group-background-focus: #678EFE;
}

:where(body.page-dashboard) .form-field {
  display: block;
  width: 100%;
  padding: 8px 16px;
  line-height: 25px;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  border-radius: 6px;
  -webkit-appearance: none;
  color: var(--input-color);
  border: 1px solid var(--input-border);
  background: var(--input-background);
  transition: border 0.3s ease;
}
:where(body.page-dashboard) .form-field::-moz-placeholder {
  color: var(--input-placeholder);
}
:where(body.page-dashboard) .form-field:-ms-input-placeholder {
  color: var(--input-placeholder);
}
:where(body.page-dashboard) .form-field::placeholder {
  color: var(--input-placeholder);
}
:where(body.page-dashboard) .form-field:focus {
  outline: none;
  border-color: var(--input-border-focus);
}

:where(body.page-dashboard) .form-group {
  position: relative;
  display: flex;
  width: 100%;
}
:where(body.page-dashboard) .form-group > span,
:where(body.page-dashboard) .form-group .form-field {
  white-space: nowrap;
  display: block;
}
:where(body.page-dashboard) .form-group > span:not(:first-child):not(:last-child),
:where(body.page-dashboard) .form-group .form-field:not(:first-child):not(:last-child) {
  border-radius: 0;
}
:where(body.page-dashboard) .form-group > span:first-child,
:where(body.page-dashboard) .form-group .form-field:first-child {
  border-radius: 6px 0 0 6px;
}
:where(body.page-dashboard) .form-group > span:last-child,
:where(body.page-dashboard) .form-group .form-field:last-child {
  border-radius: 0 6px 6px 0;
}
:where(body.page-dashboard) .form-group > span:not(:first-child),
:where(body.page-dashboard) .form-group .form-field:not(:first-child) {
  margin-left: -1px;
}
:where(body.page-dashboard) .form-group .form-field {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  width: 1%;
  margin-top: 0;
  margin-bottom: 0;
}
:where(body.page-dashboard) .form-group > span {
  text-align: center;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 25px;
  color: var(--group-color);
  background: var(--group-background);
  border: 1px solid var(--group-border);
  transition: background 0.3s ease, border 0.3s ease, color 0.3s ease;
}
:where(body.page-dashboard) .form-group:focus-within > span {
  color: var(--group-color-focus);
  background: var(--group-background-focus);
  border-color: var(--group-border-focus);
}

/* ==========================================================================
   PAGE: dashboard-data
   source: pages/dashboard-data.php
   ========================================================================== */
:where(body.page-dashboard-data) .msd-container {
    background-color: var(--bg-primary);
            border-radius: var(--border-radius);
            padding: 20px;
            box-shadow: var(--shadow-sm);
            transition: var(--transition);
}

:where(body.page-dashboard-data) .msd-container:hover {
    transform: perspective(1000px) translateZ(10px);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.25), 0 10px 20px rgba(0, 0, 0, 0.2);
}

:where(body.page-dashboard-data) .msd-header {
    backdrop-filter: blur(12px);
    padding: 22px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

:where(body.page-dashboard-data) .msd-title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #000;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    letter-spacing: 0.5px;
}

:where(body.page-dashboard-data) .msd-body {
    padding: 5px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(18px);
}

:where(body.page-dashboard-data) .msd-content {
    text-align: center;
    color: #000;
}

:where(body.page-dashboard-data) .msd-content p {
    margin: 18px 0;
    line-height: 1.7;
    font-size: 16px;
    opacity: 0.95;
    font-weight: 400;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

:where(body.page-dashboard-data) .msd-button {
    background-color: #36A9AE;
  background-image: linear-gradient(#37ADB2, #329CA0);
  border: 1px solid #2A8387;
  border-radius: 4px;
  box-shadow: rgba(0, 0, 0, 0.12) 0 1px 1px;
  color: #FFFFFF;
  cursor: pointer;
  display: block;
  font-size: 17px;
  line-height: 100%;
  margin: 0;
  outline: 0;
  padding: 11px 15px 12px;
  text-align: center;
  transition: box-shadow .05s ease-in-out,opacity .05s ease-in-out;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  width: 100%;
}

:where(body.page-dashboard-data) .msd-button:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(255, 255, 255, 0.2), transparent);
    clip-path: polygon(0 0, 100% 0, 100% 70%, 0 100%);
    z-index: 1;
}

:where(body.page-dashboard-data) .msd-button-primary {
    background: rgba(219, 168, 0, 0.95);
    color: white;
}

:where(body.page-dashboard-data) .msd-button-primary:hover {
    background: rgba(219, 168, 0, 1);
    transform: translateY(-3px) translateZ(5px);
    box-shadow: 0 10px 30px rgba(219, 168, 0, 0.5), 
                inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

:where(body.page-dashboard-data) .msd-button-success {
    background: rgba(0, 128, 0, 0.95);
    color: white;
}

:where(body.page-dashboard-data) .msd-button-success:hover {
    background: rgba(0, 128, 0, 1);
    transform: translateY(-3px) translateZ(5px);
    box-shadow: 0 10px 30px rgba(0, 128, 0, 0.5), 
                inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

:where(body.page-dashboard-data) .msd-button-info {
    background: rgba(50, 74, 185, 0.95);
    color: white;
}

:where(body.page-dashboard-data) .msd-button-info:hover {
    background: rgba(50, 74, 185, 1);
    transform: translateY(-3px) translateZ(5px);
    box-shadow: 0 10px 30px rgba(50, 74, 185, 0.5), 
                inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

:where(body.page-dashboard-data) .msd-countdown {
    background: rgba(255, 255, 255, 0.15);
    padding: 18px;
    border-radius: 14px;
    margin: 18px 0;
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

:where(body.page-dashboard-data) .msd-countdown-value {
    background: rgba(255, 255, 255, 0.25);
    padding: 7px 14px;
    border-radius: 10px;
    font-weight: 700;
    margin: 0 3px;
    font-family: 'Courier New', monospace;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

:where(body.page-dashboard-data) .msd-warning {
    background: rgba(248, 215, 218, 0.25);
    color: #000;
    padding: 5px;
    border-radius: 10px;
    border: 1px solid rgba(255, 107, 107, 0.35);
    backdrop-filter: blur(12px);
    margin:5px;
    
}

:where(body.page-dashboard-data) .msd-phone {
    direction: ltr;
    font-family: 'Courier New', monospace;
    font-weight: 700;
    letter-spacing: 1.2px;
    font-size: 17px;
}

:where(body.page-dashboard-data) .msd-status {
    background-color: var(--bg-primary);
            border-radius: var(--border-radius);
            padding: 10px;
            transition: var(--transition);
}

:where(body.page-dashboard-data) .msd-status h4 {
    margin: 0 0 18px 0;
    color: #000;
    font-weight: 700;
    font-size: 18px;
    
}

:where(body.page-dashboard-data) .msd-time {
    font-size: 16px;
    font-weight: 700;
}

:where(body.page-dashboard-data) .msd-time span {
    padding: 5px 5px;
    border-radius: 8px;
    margin: 0 3px;
    background:#fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* انیمیشن‌ها */
@keyframes fadeInUp {
    from { 
        opacity: 0; 
        transform: translateY(25px) perspective(1000px) rotateX(5deg); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0) perspective(1000px) rotateX(0); 
    }
}

@keyframes pulse--dashboard-data {
    0% { transform: scale(1); }
    50% { transform: scale(1.03); }
    100% { transform: scale(1); }
}

:where(body.page-dashboard-data) .msd-container {
    animation: fadeInUp 0.7s ease-out;
}

/* هایلایت متن */
:where(body.page-dashboard-data) .msd-highlight {
    color: red;
    font-weight: bold;
    
}

/* آیکون‌ها */
:where(body.page-dashboard-data) .msd-icon {
    font-size: 18px;
    margin-left: 6px;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2));
}

:where(body.page-dashboard-data) a {
text-decoration:none;
	}

/* ==========================================================================
   PAGE: delivery-zone
   source: pages/delivery-zone.php
   ========================================================================== */
:where(body.page-delivery-zone) #sidebar {
            background: #fff;
            border-left: 1px solid #ddd;
            padding: 15px;
            box-shadow: -2px 0 10px rgba(0,0,0,0.05);
        }
        :where(body.page-delivery-zone) #sidebar h2 {
            font-size: 18px;
            text-align: center;
            margin: 0 0 15px 0;
            color: #333;
        }
        :where(body.page-delivery-zone) #controls {
            margin-bottom: 15px;
            display: flex;
            gap: 10px;
            justify-content: center;
        }
        :where(body.page-delivery-zone) button {
            padding: 8px 15px;
            cursor: pointer;
            background-color: #00b894;
            color: white;
            border: none;
            border-radius: 5px;
            font-family: inherit;
            font-size: 13px;
            transition: 0.2s;
        }

        :where(body.page-delivery-zone) button:hover { background-color: #019875; }
        :where(body.page-delivery-zone) button.danger { background-color: #ff7675; }
        :where(body.page-delivery-zone) button.danger:hover { background-color: #d63031; }
        :where(body.page-delivery-zone) button.warning { background-color: #fdcb6e; color: #333; }
        :where(body.page-delivery-zone) button.warning:hover { background-color: #e1b12c; }
        :where(body.page-delivery-zone) button:disabled { background-color: #ccc; cursor: not-allowed; }

        :where(body.page-delivery-zone) #region-list {
            flex-grow: 1;
            overflow-y: auto;
            list-style: none;
            padding: 0;
            margin: 0;
        }

        :where(body.page-delivery-zone) .region-item {
            background: #fff;
            margin-bottom: 10px;
            padding: 12px;
            border-radius: 8px;
            border: 1px solid #eee;
            box-shadow: 0 2px 4px rgba(0,0,0,0.02);
            transition: all 0.2s;
        }

        :where(body.page-delivery-zone) .region-item:hover {
            border-color: #00b894;
            transform: translateY(-2px);
        }

        :where(body.page-delivery-zone) .region-item.inactive {
            border-left: 4px solid #b2bec3;
            background-color: #f1f2f6;
        }
        
        :where(body.page-delivery-zone) .region-item.active {
            border-left: 4px solid #00b894;
        }

        :where(body.page-delivery-zone) .region-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 5px;
        }

        :where(body.page-delivery-zone) .region-name { font-weight: bold; font-size: 14px; }
        :where(body.page-delivery-zone) .region-fare { font-size: 12px; color: #636e72; }
        
        :where(body.page-delivery-zone) .region-actions {
            display: flex;
            gap: 5px;
            margin-top: 8px;
            justify-content: flex-end;
        }

        :where(body.page-delivery-zone) .btn-sm { padding: 4px 8px; font-size: 11px; }

        /* --- استایل نقشه --- */
        :where(body.page-delivery-zone) #map {
            height: 400px;
            width: 100%;
        }

        /* --- استایل مودال (پنجره ویرایش/ایجاد) --- */
        :where(body.page-delivery-zone) .modal-overlay {
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: #fff;
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 99999999;
        }
        
        :where(body.page-delivery-zone) .rgmodal {
            background: white;
            padding: 20px;
            border-radius: 8px;
            width: 300px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }
        
        :where(body.page-delivery-zone) .modal h3 { margin-top: 0; text-align: center; }
        
        :where(body.page-delivery-zone) .form-group { margin-bottom: 15px; }
        :where(body.page-delivery-zone) .form-group label { display: block; margin-bottom: 5px; font-size: 13px; }
        :where(body.page-delivery-zone) .form-group input, :where(body.page-delivery-zone) .form-group select {
            width: 100%;
            padding: 8px;
            box-sizing: border-box;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        
        :where(body.page-delivery-zone) .modal-buttons {
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
        }

/* ==========================================================================
   PAGE: discounts
   source: pages/discounts.php
   ========================================================================== */
:where(body.page-discounts) .page-wrapper {
    flex: 1;
    padding: 28px 24px;
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
}

/* ══════════════════════════════════════════
   هدر صفحه
══════════════════════════════════════════ */
:where(body.page-discounts) .page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
    flex-wrap: wrap;
    gap: 12px;
}
:where(body.page-discounts) .page-header-right {
    display: flex;
    align-items: center;
    gap: 14px;
}
:where(body.page-discounts) .page-icon {
    width: 52px; height: 52px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px;
    box-shadow: 0 4px 14px rgba(240, 106, 0,.35);
}
:where(body.page-discounts) .page-title h1 {
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}
:where(body.page-discounts) .page-title p {
    font-size: .83rem;
    color: var(--text-secondary);
    margin-top: 3px;
}
:where(body.page-discounts) .header-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ══════════════════════════════════════════
   آمار سریع
══════════════════════════════════════════ */
:where(body.page-discounts) .stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px,1fr));
    gap: 16px;
    margin-bottom: 26px;
}
:where(body.page-discounts) .stat-card {
    background: var(--bg-primary);
    border-radius: var(--border-radius);
    padding: 18px 20px;
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(240, 106, 0,.08);
    display: flex;
    align-items: center;
    gap: 14px;
    transition: var(--transition);
}
:where(body.page-discounts) .stat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
:where(body.page-discounts) .stat-icon {
    width: 46px; height: 46px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}
:where(body.page-discounts) .stat-icon.purple  { background: rgba(240, 106, 0,.12); }
:where(body.page-discounts) .stat-icon.green   { background: rgba(0,184,148,.12); }
:where(body.page-discounts) .stat-icon.orange  { background: rgba(253,203,110,.18); }
:where(body.page-discounts) .stat-icon.pink    { background: rgba(253,121,168,.12); }
:where(body.page-discounts) .stat-value { font-size: 1.5rem; font-weight: 700; line-height: 1; }
:where(body.page-discounts) .stat-label { font-size: .78rem; color: var(--text-secondary); margin-top: 4px; }

/* ══════════════════════════════════════════
   کارت
══════════════════════════════════════════ */
:where(body.page-discounts) .card {
    background: var(--bg-primary);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(240, 106, 0,.07);
    overflow: hidden;
    margin-bottom: 22px;
}
:where(body.page-discounts) .card-header {
    padding: 18px 22px;
    border-bottom: 1px solid rgba(240, 106, 0,.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
:where(body.page-discounts) .card-title {
    font-size: 1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}
:where(body.page-discounts) .card-title .icon { font-size: 1.1rem; }
:where(body.page-discounts) .card-body { padding: 22px; }

/* ══════════════════════════════════════════
   فرم اعمال تخفیف
══════════════════════════════════════════ */
:where(body.page-discounts) .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}
@media(max-width:700px) { :where(body.page-discounts) .form-grid { grid-template-columns: 1fr; } }

:where(body.page-discounts) .form-group { display: flex; flex-direction: column; gap: 7px; }
:where(body.page-discounts) .form-group.full { grid-column: 1 / -1; }

:where(body.page-discounts) .form-label {
    font-size: .83rem;
    font-weight: 600;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 5px;
}
:where(body.page-discounts) .form-label .req { color: var(--danger-color); }

:where(body.page-discounts) .form-control {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid rgba(240, 106, 0,.2);
    border-radius: 10px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-family: 'vazir';
    font-size: .9rem;
    transition: var(--transition);
    outline: none;
    direction: rtl;
}
:where(body.page-discounts) .form-control:focus {
    border-color: var(--primary-color);
    background: var(--bg-primary);
    box-shadow: 0 0 0 3px rgba(240, 106, 0,.12);
}
:where(body.page-discounts) .form-control:disabled { opacity: .5; cursor: not-allowed; }

/* Input با واحد - RTL: واحد سمت چپ */
:where(body.page-discounts) .input-unit-wrap { position: relative; }
:where(body.page-discounts) .input-unit-wrap .form-control { padding-left: 74px; }
:where(body.page-discounts) .input-unit {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 64px;
    background: linear-gradient(135deg,var(--primary-color),var(--primary-light));
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    border-radius: 10px 0 0 10px;
    transition: var(--transition);
    pointer-events: none;
}

/* Radio target */
:where(body.page-discounts) .target-group {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
:where(body.page-discounts) .target-option {
    flex: 1;
    min-width: 120px;
}
:where(body.page-discounts) .target-option input[type="radio"] { display: none; }
:where(body.page-discounts) .target-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 10px;
    border: 2px solid rgba(240, 106, 0,.2);
    border-radius: 12px;
    cursor: pointer;
    transition: var(--transition);
    text-align: center;
    font-size: .82rem;
    color: var(--text-secondary);
    background: var(--bg-secondary);
}
:where(body.page-discounts) .target-label .t-icon { font-size: 1.5rem; }
:where(body.page-discounts) .target-option input:checked + .target-label {
    border-color: var(--primary-color);
    background: rgba(240, 106, 0,.08);
    color: var(--primary-color);
    font-weight: 700;
    box-shadow: 0 2px 10px rgba(240, 106, 0,.15);
}
:where(body.page-discounts) .target-label:hover { border-color: var(--primary-light); }

/* محصولات چک‌باکس */
:where(body.page-discounts) .products-search-wrap { margin-bottom: 12px; position: relative; }
:where(body.page-discounts) .products-search-wrap .form-control { padding-right: 40px; }
:where(body.page-discounts) .search-icon {
    position: absolute;
    right: 12px; top: 50%;
    transform: translateY(-50%);
    color: var(--text-light);
    font-size: 1rem;
    pointer-events: none;
}
:where(body.page-discounts) .product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
    gap: 8px;
    max-height: 260px;
    overflow-y: auto;
    padding: 4px 2px;
    scrollbar-width: thin;
    scrollbar-color: var(--primary-light) transparent;
}
:where(body.page-discounts) .product-cb-item { display: flex; }
:where(body.page-discounts) .product-cb-item input[type="checkbox"] { display: none; }
:where(body.page-discounts) .product-cb-label {
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid rgba(240, 106, 0,.15);
    border-radius: 10px;
    cursor: pointer;
    transition: var(--transition);
    background: var(--bg-secondary);
    font-size: .82rem;
}
:where(body.page-discounts) .product-cb-label .cb-name { font-weight: 600; color: var(--text-primary); }
:where(body.page-discounts) .product-cb-label .cb-price { color: var(--text-secondary); font-size: .75rem; }
:where(body.page-discounts) .product-cb-label .cb-discount-badge {
    font-size: .7rem;
    padding: 2px 7px;
    border-radius: 20px;
    background: rgba(0,184,148,.12);
    color: var(--success-color);
    width: fit-content;
}
:where(body.page-discounts) .product-cb-item input:checked + .product-cb-label {
    border-color: var(--primary-color);
    background: rgba(240, 106, 0,.07);
    box-shadow: 0 2px 8px rgba(240, 106, 0,.12);
}
:where(body.page-discounts) .product-cb-item input:checked + .product-cb-label .cb-name { color: var(--primary-color); }
:where(body.page-discounts) .select-all-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    font-size: .82rem;
    color: var(--text-secondary);
}
:where(body.page-discounts) .select-all-wrap a { color: var(--primary-color); cursor: pointer; text-decoration: none; }
:where(body.page-discounts) .select-all-wrap a:hover { text-decoration: underline; }
:where(body.page-discounts) .selected-count {
    font-size: .78rem;
    padding: 3px 10px;
    background: rgba(240, 106, 0,.1);
    color: var(--primary-color);
    border-radius: 20px;
    font-weight: 700;
    display: none;
}
:where(body.page-discounts) .selected-count.visible { display: inline-block; }

/* فرم اکشن بار */
:where(body.page-discounts) .form-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(240, 106, 0,.08);
}

/* ══════════════════════════════════════════
   دکمه‌ها
══════════════════════════════════════════ */
:where(body.page-discounts) .btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 20px;
    border: none;
    border-radius: 10px;
    font-family: 'vazir';
    font-size: .88rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
    text-decoration: none;
}
:where(body.page-discounts) .btn:disabled { opacity: .55; cursor: not-allowed; }
:where(body.page-discounts) .btn-primary {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: #fff;
    box-shadow: 0 4px 14px rgba(240, 106, 0,.35);
}
:where(body.page-discounts) .btn-primary:hover:not(:disabled) { box-shadow: 0 6px 20px rgba(240, 106, 0,.5); transform: translateY(-1px); }

:where(body.page-discounts) .btn-success {
    background: linear-gradient(135deg, var(--success-color), #00a381);
    color: #fff;
    box-shadow: 0 4px 14px rgba(0,184,148,.3);
}
:where(body.page-discounts) .btn-success:hover:not(:disabled) { transform: translateY(-1px); }

:where(body.page-discounts) .btn-danger {
    background: linear-gradient(135deg, var(--danger-color), #b71c1c);
    color: #fff;
    box-shadow: 0 4px 14px rgba(214,48,49,.3);
}
:where(body.page-discounts) .btn-danger:hover:not(:disabled) { transform: translateY(-1px); }

:where(body.page-discounts) .btn-secondary {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border: 1.5px solid rgba(240, 106, 0,.18);
}
:where(body.page-discounts) .btn-secondary:hover:not(:disabled) { background: rgba(240, 106, 0,.08); color: var(--primary-color); }

:where(body.page-discounts) .btn-ghost {
    background: transparent;
    color: var(--text-secondary);
    border: 1.5px solid rgba(240, 106, 0,.15);
}
:where(body.page-discounts) .btn-ghost:hover:not(:disabled) { color: var(--primary-color); border-color: var(--primary-color); }

:where(body.page-discounts) .btn-sm { padding: 6px 12px; font-size: .78rem; border-radius: 8px; }
:where(body.page-discounts) .btn-icon-only {
    width: 34px; height: 34px;
    padding: 0;
    border-radius: 8px;
    justify-content: center;
}

/* ══════════════════════════════════════════
   فیلتر جدول
══════════════════════════════════════════ */
:where(body.page-discounts) .table-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
:where(body.page-discounts) .table-filter-group { display: flex; gap: 8px; flex-wrap: wrap; }
:where(body.page-discounts) .filter-chip {
    padding: 6px 14px;
    border: 1.5px solid rgba(240, 106, 0,.2);
    border-radius: 20px;
    font-size: .78rem;
    cursor: pointer;
    transition: var(--transition);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-family: 'vazir';
}
:where(body.page-discounts) .filter-chip.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
    font-weight: 700;
}
:where(body.page-discounts) .filter-chip:hover:not(.active) { border-color: var(--primary-light); color: var(--primary-color); }

:where(body.page-discounts) .table-search-wrap { position: relative; flex: 1; min-width: 180px; max-width: 280px; }
:where(body.page-discounts) .table-search-wrap .form-control { padding-right: 38px; }

/* ══════════════════════════════════════════
   جدول محصولات
══════════════════════════════════════════ */
:where(body.page-discounts) .table-wrap {
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--primary-light) transparent;
}
:where(body.page-discounts) table {
    width: 100%;
    border-collapse: collapse;
    font-size: .87rem;
}
:where(body.page-discounts) thead tr {
    background: rgba(240, 106, 0,.05);
}
:where(body.page-discounts) thead th {
    padding: 13px 16px;
    text-align: right;
    font-weight: 700;
    color: var(--text-secondary);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    white-space: nowrap;
    border-bottom: 2px solid rgba(240, 106, 0,.1);
}
:where(body.page-discounts) tbody tr {
    border-bottom: 1px solid rgba(240, 106, 0,.06);
    transition: var(--transition);
}
:where(body.page-discounts) tbody tr:hover { background: rgba(240, 106, 0,.04); }
:where(body.page-discounts) tbody tr.row-discounted { background: rgba(0,184,148,.03); }
:where(body.page-discounts) tbody tr.row-discounted:hover { background: rgba(0,184,148,.07); }
:where(body.page-discounts) tbody td {
    padding: 13px 16px;
    color: var(--text-primary);
    vertical-align: middle;
}
:where(body.page-discounts) .td-product { font-weight: 600; }
:where(body.page-discounts) .td-price { font-feature-settings: "tnum"; direction: ltr; text-align: right; }
:where(body.page-discounts) .td-final { font-weight: 700; color: var(--success-color); }
:where(body.page-discounts) .td-final.no-discount { color: var(--text-primary); font-weight: 400; }

/* Badge تخفیف */
:where(body.page-discounts) .badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: .75rem;
    font-weight: 700;
    white-space: nowrap;
}
:where(body.page-discounts) .badge-percent { background: rgba(240, 106, 0,.12); color: var(--primary-color); }
:where(body.page-discounts) .badge-fixed   { background: rgba(0,184,148,.12);  color: var(--success-color); }
:where(body.page-discounts) .badge-none    { background: rgba(178,190,195,.15); color: var(--text-light); }
:where(body.page-discounts) .badge-active  { background: rgba(0,184,148,.1); color: var(--success-color); }

/* ستون عملیات */
:where(body.page-discounts) .td-actions { display: flex; gap: 6px; align-items: center; }
:where(body.page-discounts) .action-btn {
    width: 32px; height: 32px;
    border: none; border-radius: 8px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: .9rem;
    transition: var(--transition);
    background: var(--bg-secondary);
    color: var(--text-secondary);
}
:where(body.page-discounts) .action-btn:hover { transform: scale(1.1); }
:where(body.page-discounts) .action-btn.edit:hover   { background: rgba(240, 106, 0,.15); color: var(--primary-color); }
:where(body.page-discounts) .action-btn.cancel:hover { background: rgba(214,48,49,.12); color: var(--danger-color); }

/* Empty state */
:where(body.page-discounts) .empty-state {
    text-align: center;
    padding: 48px 20px;
    color: var(--text-light);
}
:where(body.page-discounts) .empty-state .empty-icon { font-size: 3rem; margin-bottom: 14px; opacity: .5; }
:where(body.page-discounts) .empty-state p { font-size: .92rem; }

/* Loading skeleton */
:where(body.page-discounts) .skeleton {
    background: linear-gradient(90deg, rgba(240, 106, 0,.06) 25%, rgba(240, 106, 0,.12) 50%, rgba(240, 106, 0,.06) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite;
    border-radius: 6px;
}
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
:where(body.page-discounts) .skeleton-row td > span {
    display: block; height: 14px;
    border-radius: 4px;
}

/* ══════════════════════════════════════════
   Modal
══════════════════════════════════════════ */
:where(body.page-discounts) .modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
}
:where(body.page-discounts) .modal-overlay.open { opacity: 1; visibility: visible; }
:where(body.page-discounts) .Dmodal {
    background: var(--bg-primary);
    border-radius: 18px;
    padding: 28px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 20px 60px rgba(0,0,0,.2);
    transform: scale(.92) translateY(20px);
    transition: var(--transition);
    direction: rtl;
}
:where(body.page-discounts) .modal-overlay.open .modal { transform: scale(1) translateY(0); }
:where(body.page-discounts) .modal-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 22px;
}
:where(body.page-discounts) .modal-title {
    font-size: 1.05rem; font-weight: 700;
    display: flex; align-items: center; gap: 8px;
}
:where(body.page-discounts) .modal-close {
    width: 32px; height: 32px; border: none; border-radius: 8px;
    background: var(--bg-secondary); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; color: var(--text-secondary);
    transition: var(--transition);
}
:where(body.page-discounts) .modal-close:hover { background: rgba(214,48,49,.1); color: var(--danger-color); }
:where(body.page-discounts) .modal-form { display: flex; flex-direction: column; gap: 16px; }
:where(body.page-discounts) .modal-actions { display: flex; gap: 10px; margin-top: 6px; }
:where(body.page-discounts) .modal-actions .btn { flex: 1; justify-content: center; }

/* نوع تخفیف در مودال */
:where(body.page-discounts) .type-toggle { display: flex; gap: 0; border: 1.5px solid rgba(240, 106, 0,.2); border-radius: 10px; overflow: hidden; }
:where(body.page-discounts) .type-toggle input { display: none; }
:where(body.page-discounts) .type-toggle label {
    flex: 1; text-align: center;
    padding: 9px 10px;
    font-size: .82rem; cursor: pointer;
    transition: var(--transition);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-family: 'vazir'; font-weight: 600;
}
:where(body.page-discounts) .type-toggle input:checked + label {
    background: var(--primary-color);
    color: #fff;
}

/* ══════════════════════════════════════════
   Toast
══════════════════════════════════════════ */
:where(body.page-discounts) #toast-container {
    position: fixed;
    top: 24px; left: 24px;
    z-index: 999999;
    display: flex; flex-direction: column; gap: 10px;
    direction: rtl;
}
:where(body.page-discounts) .toast {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 18px;
    border-radius: 12px;
    background: var(--bg-primary);
    box-shadow: 0 8px 32px rgba(0,0,0,.18);
    font-size: .88rem; color: var(--text-primary);
    min-width: 260px; max-width: 380px;
    border-right: 4px solid var(--primary-color);
    animation: toastIn .35s ease;
    font-family: 'vazir';
}
:where(body.page-discounts) .toast.success { border-right-color: var(--success-color); }
:where(body.page-discounts) .toast.error   { border-right-color: var(--danger-color); }
:where(body.page-discounts) .toast.warning { border-right-color: var(--warning-color); }
:where(body.page-discounts) .toast-icon { font-size: 1.3rem; flex-shrink: 0; }
:where(body.page-discounts) .toast-msg { flex: 1; }
:where(body.page-discounts) .toast-close { cursor: pointer; opacity: .5; font-size: .8rem; }
:where(body.page-discounts) .toast-close:hover { opacity: 1; }
@keyframes toastIn { from{opacity:0;transform:translateX(-20px)} to{opacity:1;transform:none} }
@keyframes toastOut { from{opacity:1;transform:none} to{opacity:0;transform:translateX(-20px)} }

/* ══════════════════════════════════════════
   تیغه تأیید حذف
══════════════════════════════════════════ */
:where(body.page-discounts) .confirm-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(3px);
    display: flex; align-items: center; justify-content: center;
    z-index: 1100;
    opacity: 0; visibility: hidden; transition: var(--transition);
}
:where(body.page-discounts) .confirm-overlay.open { opacity: 1; visibility: visible; }
:where(body.page-discounts) .confirm-box {
    background: var(--bg-primary); border-radius: 16px;
    padding: 28px; max-width: 360px; width: 90%;
    text-align: center; direction: rtl;
    box-shadow: 0 20px 60px rgba(0,0,0,.2);
    transform: scale(.9); transition: var(--transition);
}
:where(body.page-discounts) .confirm-overlay.open .confirm-box { transform: scale(1); }
:where(body.page-discounts) .confirm-icon { font-size: 2.8rem; margin-bottom: 14px; }
:where(body.page-discounts) .confirm-title { font-size: 1.05rem; font-weight: 700; margin-bottom: 8px; }
:where(body.page-discounts) .confirm-msg { font-size: .87rem; color: var(--text-secondary); margin-bottom: 22px; }
:where(body.page-discounts) .confirm-actions { display: flex; gap: 10px; justify-content: center; }
:where(body.page-discounts) .confirm-actions .btn { min-width: 110px; justify-content: center; }

/* ══════════════════════════════════════════
   درصد پیشرفت
══════════════════════════════════════════ */
:where(body.page-discounts) .progress-pill {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .75rem; color: var(--success-color); font-weight: 700;
}
:where(body.page-discounts) .progress-pill::before {
    content: ''; width: 8px; height: 8px; border-radius: 50%;
    background: var(--success-color);
    animation: pulse--discounts 1.5s infinite;
}
@keyframes pulse--discounts {
    0%,100%{box-shadow:0 0 0 0 rgba(0,184,148,.4)}
    50%{box-shadow:0 0 0 5px rgba(0,184,148,0)}
}

/* ══════════════════════════════════════════
   Responsive
══════════════════════════════════════════ */
@media(max-width:768px) {
    :where(body.page-discounts) .page-wrapper { padding: 16px 12px; }
    :where(body.page-discounts) .page-header { flex-direction: column; align-items: flex-start; }
    :where(body.page-discounts) .stats-row { grid-template-columns: 1fr 1fr; }
    :where(body.page-discounts) .product-grid { grid-template-columns: 1fr 1fr; }
    :where(body.page-discounts) thead th:nth-child(4), :where(body.page-discounts) tbody td:nth-child(4) { display: none; }
}
@media(max-width:480px) {
    :where(body.page-discounts) .stats-row { grid-template-columns: 1fr; }
    :where(body.page-discounts) .target-group { flex-direction: column; }
    :where(body.page-discounts) .product-grid { grid-template-columns: 1fr; }
    :where(body.page-discounts) thead th:nth-child(3), :where(body.page-discounts) tbody td:nth-child(3) { display: none; }
}

/* ==========================================================================
   PAGE: download
   source: pages/download.php
   ========================================================================== */
body:where(.page-download) {
  --primary:    #E8631A;
  --primary-dk: #C4501A;
  --dark:       #2C1A0E;
  --cream:      #FDF6EE;
  --g100:       #F5F0EA;
  --g200:       #EDE5D8;
  --g400:       #B0957A;
  --g600:       #7A5C40;
  --text:       #2C1A0E;
  --muted:      #7A5C40;
  --radius:     12px;
  --sh:         0 2px 12px rgba(44,26,14,.07);
  --sh2:        0 8px 28px rgba(44,26,14,.13);
  --ease:       .26s cubic-bezier(.4,0,.2,1);
}

body:where(.page-download) {
  margin:0;
}

/* ── HEADER ── */
:where(body.page-download) .hd {
  background: var(--dark);
  padding: 36px 20px 32px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
:where(body.page-download) .hd::before {
  content:'';
  position:absolute;inset:0;
  background: radial-gradient(ellipse at 50% -10%, rgba(232,99,26,.4) 0%, transparent 65%);
  pointer-events:none;
}
:where(body.page-download) .hd h1 {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  position: relative;
}
:where(body.page-download) .hd h1 span { color: var(--primary); }
:where(body.page-download) .hd p {
  font-size: 13px;
  color: rgba(255,255,255,.5);
  margin-top: 5px;
  position: relative;
}

/* ── PLATFORM TABS ── */
:where(body.page-download) .pt-nav {
  display: flex;
  max-width: 700px;
  margin: 24px auto 0;
  padding: 0 16px;
  gap: 8px;
}
:where(body.page-download) .pt-btn {
  flex: 1;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 11px 6px;
  border-radius: var(--radius);
  background: #fff;
  color: var(--muted);
  box-shadow: var(--sh);
  border: 1.5px solid var(--g200);
  transition: all var(--ease);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
:where(body.page-download) .pt-btn i { font-size: 15px; }
:where(body.page-download) .pt-btn:hover { border-color: var(--primary); color: var(--primary); }
:where(body.page-download) .pt-btn.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  box-shadow: 0 4px 14px rgba(232,99,26,.3);
}

/* ── PANE ── */
:where(body.page-download) .pane { display: none; padding: 20px 16px 48px; max-width: 700px; margin: 0 auto; }
:where(body.page-download) .pane.active { display: block; animation: up .3s ease both; }
@keyframes up { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

/* ── APP TABS (inside pane) ── */
:where(body.page-download) .app-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 20px;
  border-bottom: 2px solid var(--g200);
  padding-bottom: 0;
}
:where(body.page-download) .app-tab {
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 18px;
  background: transparent;
  color: var(--muted);
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: all var(--ease);
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
:where(body.page-download) .app-tab:hover { color: var(--primary); }
:where(body.page-download) .app-tab.active { color: var(--primary); border-bottom-color: var(--primary); }

/* ── APP PANE ── */
:where(body.page-download) .app-pane { display: none; }
:where(body.page-download) .app-pane.active { display: block; animation: up .25s ease both; }

/* ── CARD ── */
:where(body.page-download) .card {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--sh);
  border: 1.5px solid var(--g200);
  overflow: hidden;
  margin-bottom: 14px;
}
:where(body.page-download) .card-head {
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1.5px solid var(--g100);
}
:where(body.page-download) .card-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
:where(body.page-download) .card-head h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  flex: 1;
}
:where(body.page-download) .card-head h3 small {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
  margin-top: 1px;
}
:where(body.page-download) .card-body { padding: 16px 18px; }

/* ── DOWNLOAD BUTTONS ── */
:where(body.page-download) .dl-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 4px;
}
:where(body.page-download) .dl-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: all var(--ease);
}
:where(body.page-download) .dl-btn.primary { background: var(--primary); color: #fff; }
:where(body.page-download) .dl-btn.primary:hover { background: var(--primary-dk); transform: translateY(-2px); box-shadow: 0 4px 14px rgba(232,99,26,.3); }
:where(body.page-download) .dl-btn.outline { background: #fff; color: var(--primary); border: 1.5px solid var(--primary); }
:where(body.page-download) .dl-btn.outline:hover { background: var(--primary); color: #fff; transform: translateY(-2px); }
:where(body.page-download) .dl-btn.gray { background: var(--g100); color: var(--text); }
:where(body.page-download) .dl-btn.gray:hover { background: var(--g200); transform: translateY(-2px); }

/* ── STEPS ── */
:where(body.page-download) .steps { list-style: none; display: flex; flex-direction: column; gap: 8px; }
:where(body.page-download) .steps li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13px;
  color: var(--muted);
}
:where(body.page-download) .step-num {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ── PERMS ── */
:where(body.page-download) .perms { list-style: none; display: flex; flex-direction: column; gap: 6px; }
:where(body.page-download) .perms li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: var(--muted);
  background: var(--g100);
  padding: 9px 12px;
  border-radius: 8px;
}
:where(body.page-download) .perms li i { color: var(--primary); font-size: 12px; flex-shrink: 0; }

/* ── NOTICE ── */
:where(body.page-download) .notice {
  display: flex;
  gap: 10px;
  background: #FFF8F0;
  border: 1.5px solid rgba(232,99,26,.2);
  border-radius: 9px;
  padding: 12px 14px;
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 12px;
}
:where(body.page-download) .notice i { color: var(--primary); flex-shrink: 0; margin-top: 2px; }

/* ── COMING SOON ── */
:where(body.page-download) .coming-soon {
  text-align: center;
  padding: 32px 20px;
  color: var(--g400);
}
:where(body.page-download) .coming-soon i { font-size: 36px; margin-bottom: 12px; display: block; opacity: .4; }
:where(body.page-download) .coming-soon p { font-size: 13px; }

/* ── PWA CARD ── */
:where(body.page-download) .pwa-url {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--g100);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 10px;
  font-size: 13px;
  color: var(--text);
  font-weight: 500;
}
:where(body.page-download) .pwa-url i { color: var(--primary); }
:where(body.page-download) .pwa-url a { color: var(--primary); text-decoration: none; direction: ltr; font-size: 12px; }
:where(body.page-download) .pwa-url a:hover { text-decoration: underline; }

/* ── SECTION LABEL ── */
:where(body.page-download) .sec-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: .4px;
  text-transform: uppercase;
  margin: 16px 0 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
:where(body.page-download) .sec-label::after { content:''; flex:1; height:1px; background:var(--g200); }

/* ── MORE LINK ── */
:where(body.page-download) .more-link {
  text-align: center;
  padding: 8px;
}
:where(body.page-download) .more-link a {
  color: var(--muted);
  font-size: 12.5px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color var(--ease);
}
:where(body.page-download) .more-link a:hover { color: var(--primary); }

/* ── FOOTER ── */
:where(body.page-download) .ft {
  text-align: center;
  padding: 16px;
  font-size: 12px;
  color: var(--g400);
  border-top: 1px solid var(--g200);
}

@media(max-width:480px) {
  :where(body.page-download) .pt-btn span { display: none; }
  :where(body.page-download) .app-tab { padding: 9px 12px; font-size: 12px; }
  :where(body.page-download) .dl-row { flex-direction: column; }
  :where(body.page-download) .dl-btn { width: 100%; justify-content: center; }
}

/* ==========================================================================
   PAGE: employees
   source: pages/employees.php
   ========================================================================== */
body:where(.page-employees){--primary:#f06a00;--primary-dark:#4a3ab5;--success:#00b894;--danger:#d63031;--warning:#fdcb6e;--info:#0984e3;--bg:#f8f9fa;--card-bg:#fff;--text:#2d3436;--text-muted:#636e72;--border:#e0e0e0;--radius:10px;--shadow:0 2px 12px rgba(0,0,0,.09);--shadow-lg:0 8px 32px rgba(0,0,0,.14);--transition:.2s ease}
:where(body.page-employees) input,:where(body.page-employees) select,:where(body.page-employees) button{font-family:inherit;font-size:1rem}
:where(body.page-employees) .tabs-wrap{background:var(--card-bg);border-bottom:2px solid var(--border);position:sticky;top:0;z-index:100;box-shadow:0 2px 8px rgba(0,0,0,.06)}
:where(body.page-employees) .tabs{display:flex;max-width:960px;margin:0 auto}
:where(body.page-employees) .tab-btn{flex:1;padding:16px 12px;border:none;background:none;cursor:pointer;font-size:1rem;font-weight:600;color:var(--text-muted);border-bottom:3px solid transparent;transition:var(--transition);display:flex;align-items:center;justify-content:center;gap:8px}
:where(body.page-employees) .tab-btn:hover{color:var(--primary);background:rgba(240, 106, 0,.05)}
:where(body.page-employees) .tab-btn.active{color:var(--primary);border-bottom-color:var(--primary)}
:where(body.page-employees) .tab-content{display:none;animation:fadeIn--employees .25s ease}
:where(body.page-employees) .tab-content.active{display:block}
@keyframes fadeIn--employees{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
:where(body.page-employees) .page-wrap{max-width:960px;margin:0 auto;padding:24px 16px}
:where(body.page-employees) .card{background:var(--card-bg);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px;margin-bottom:24px}
:where(body.page-employees) .card-title{font-size:1.15rem;font-weight:700;color:var(--primary-dark);padding-bottom:14px;border-bottom:1px solid var(--border);margin-bottom:20px;display:flex;align-items:center;gap:8px}
:where(body.page-employees) .card-title i{color:var(--primary)}
:where(body.page-employees) .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:600px){:where(body.page-employees) .form-grid{grid-template-columns:1fr}}
:where(body.page-employees) .form-group{display:flex;flex-direction:column;gap:6px}
:where(body.page-employees) .form-group.full-width{grid-column:1/-1}
:where(body.page-employees) label{font-size:.875rem;font-weight:600;color:var(--text-muted)}
:where(body.page-employees) .form-control{padding:10px 14px;border:1.5px solid var(--border);border-radius:8px;background:var(--bg);color:var(--text);transition:var(--transition);width:100%;box-sizing:border-box}
:where(body.page-employees) .form-control:focus{outline:none;border-color:var(--primary);background:#fff;box-shadow:0 0 0 3px rgba(240, 106, 0,.12)}
:where(body.page-employees) .form-control[readonly]{cursor:pointer}
:where(body.page-employees) .ltr{direction:ltr;text-align:left}
:where(body.page-employees) .amount-words{font-size:.78rem;color:var(--primary);margin-top:3px;min-height:16px}
:where(body.page-employees) .date-input-container{position:relative}
:where(body.page-employees) .btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:10px 20px;border:none;border-radius:8px;font-size:.95rem;font-weight:600;cursor:pointer;transition:var(--transition)}
:where(body.page-employees) .btn:hover{filter:brightness(.92);transform:translateY(-1px)}
:where(body.page-employees) .btn-primary{background:var(--primary);color:#fff}
:where(body.page-employees) .btn-success{background:var(--success);color:#fff}
:where(body.page-employees) .btn-danger{background:var(--danger);color:#fff}
:where(body.page-employees) .btn-warning{background:var(--warning);color:var(--text)}
:where(body.page-employees) .btn-secondary{background:#f0f0f0;color:var(--text)}
:where(body.page-employees) .btn-info{background:var(--info);color:#fff}
:where(body.page-employees) .btn-sm{padding:6px 12px;font-size:.82rem;border-radius:6px}
:where(body.page-employees) .btn-block{width:100%}
:where(body.page-employees) .table-wrap{overflow-x:auto;border-radius:8px}
:where(body.page-employees) .table{width:100%;border-collapse:collapse}
:where(body.page-employees) .table th{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;padding:12px 14px;text-align:right;font-size:.875rem;font-weight:600}
:where(body.page-employees) .table td{padding:11px 14px;text-align:right;border-bottom:1px solid var(--border);font-size:.9rem;vertical-align:middle}
:where(body.page-employees) .table tr:hover td{background:rgba(240, 106, 0,.04)}
:where(body.page-employees) .actions{display:flex;gap:6px;justify-content:flex-end}

/* کارت کارمند */
:where(body.page-employees) .emp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px}
:where(body.page-employees) .emp-card{background:var(--card-bg);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;border-right:4px solid var(--primary);transition:var(--transition)}
:where(body.page-employees) .emp-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
:where(body.page-employees) .emp-card.delivery-card{border-right-color:var(--info)}
:where(body.page-employees) .emp-name{font-size:1.05rem;font-weight:700;margin-bottom:6px;color:var(--primary-dark)}
:where(body.page-employees) .emp-post-badge{display:inline-block;padding:2px 10px;border-radius:20px;font-size:.75rem;font-weight:700;margin-bottom:10px;background:rgba(240, 106, 0,.1);color:var(--primary)}
:where(body.page-employees) .emp-post-badge.delivery{background:rgba(9,132,227,.12);color:var(--info)}
:where(body.page-employees) .emp-detail{display:flex;align-items:center;gap:7px;font-size:.85rem;color:var(--text-muted);margin-bottom:6px}
:where(body.page-employees) .emp-detail i{width:16px;color:var(--primary);flex-shrink:0}
:where(body.page-employees) .emp-card.delivery-card .emp-detail i{color:var(--info)}
:where(body.page-employees) .emp-actions{display:flex;gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid var(--border);flex-wrap:wrap}

/* سوئیچ کارمند/پیک */
:where(body.page-employees) .person-type-switch{display:flex;border-radius:8px;overflow:hidden;border:1.5px solid var(--border);background:var(--bg)}
:where(body.page-employees) .pts-btn{flex:1;padding:9px 14px;border:none;background:none;cursor:pointer;font-size:.9rem;font-weight:600;color:var(--text-muted);transition:var(--transition)}
:where(body.page-employees) .pts-btn.active{background:var(--primary);color:#fff}
:where(body.page-employees) .pts-btn.active.delivery{background:var(--info)}

/* تب‌های بالا */
:where(body.page-employees) .section-tabs{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap}
:where(body.page-employees) .sec-tab{padding:8px 18px;border:2px solid var(--border);background:var(--bg);border-radius:20px;cursor:pointer;font-weight:600;font-size:.875rem;color:var(--text-muted);transition:var(--transition)}
:where(body.page-employees) .sec-tab.active{border-color:var(--primary);background:rgba(240, 106, 0,.08);color:var(--primary)}
:where(body.page-employees) .sec-tab.active.delivery{border-color:var(--info);background:rgba(9,132,227,.08);color:var(--info)}

/* مودال */
:where(body.page-employees) .modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:1000;opacity:0;visibility:hidden;transition:var(--transition)}
:where(body.page-employees) .modal-overlay.show{opacity:1;visibility:visible}
:where(body.page-employees) .modal-box{background:var(--card-bg);border-radius:var(--radius);width:100%;max-width:500px;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-lg);transform:translateY(-20px);transition:var(--transition)}
:where(body.page-employees) .modal-overlay.show .modal-box{transform:translateY(0)}
:where(body.page-employees) .modal-header{padding:18px 22px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}
:where(body.page-employees) .modal-header h3{font-size:1.05rem;font-weight:700;color:var(--primary-dark)}
:where(body.page-employees) .modal-body{padding:22px}
:where(body.page-employees) .modal-footer{padding:14px 22px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:10px}
:where(body.page-employees) .btn-close-modal{background:none;border:none;cursor:pointer;font-size:1.3rem;color:var(--text-muted);line-height:1}
:where(body.page-employees) .btn-close-modal:hover{color:var(--danger)}
:where(body.page-employees) #pwdModal .modal-box{max-width:360px}
:where(body.page-employees) .pwd-icon{text-align:center;font-size:2.5rem;color:var(--warning);margin-bottom:10px}
:where(body.page-employees) .pwd-warning{font-size:.875rem;color:var(--text-muted);text-align:center;margin-bottom:18px}

/* توست */
:where(body.page-employees) .toast-wrap{position:fixed;bottom:24px;right:24px;z-index:9999;display:flex;flex-direction:column;gap:10px}
:where(body.page-employees) .toast{padding:13px 20px;border-radius:8px;color:#fff;font-size:.9rem;box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:10px;min-width:260px;animation:slideIn .3s ease}
:where(body.page-employees) .toast.success{background:var(--success)}
:where(body.page-employees) .toast.error{background:var(--danger)}
:where(body.page-employees) .toast.warning{background:#e17055}
@keyframes slideIn{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:translateX(0)}}

/* گزارش */
:where(body.page-employees) .report-box{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-top:20px}
:where(body.page-employees) .report-header{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;padding:16px 22px}
:where(body.page-employees) .report-header h3{font-size:1.1rem;font-weight:700}
:where(body.page-employees) .report-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;background:var(--border)}
:where(body.page-employees) .summary-item{background:var(--card-bg);padding:16px 20px;text-align:center}
:where(body.page-employees) .summary-label{font-size:.78rem;color:var(--text-muted);margin-bottom:5px}
:where(body.page-employees) .summary-value{font-size:1.1rem;font-weight:700;color:var(--primary-dark)}
:where(body.page-employees) .summary-value.positive{color:var(--success)}
:where(body.page-employees) .summary-value.negative{color:var(--danger)}
:where(body.page-employees) .print-btn-wrap{text-align:center;margin-top:16px}
@media print{:where(body.page-employees) .tabs-wrap,:where(body.page-employees) .no-print{display:none!important}:where(body.page-employees) .tab-content{display:block!important}:where(body.page-employees) #tab-advances,:where(body.page-employees) #tab-employees{display:none!important}body:where(.page-employees){background:#fff}}

/* لودر / خالی */
:where(body.page-employees) .loader{display:none;text-align:center;padding:30px;color:var(--text-muted)}
:where(body.page-employees) .loader.show{display:block}
:where(body.page-employees) .spinner{width:36px;height:36px;border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin--employees .7s linear infinite;margin:0 auto 10px}
@keyframes spin--employees{to{transform:rotate(360deg)}}
:where(body.page-employees) .empty-state{text-align:center;padding:40px;color:var(--text-muted)}
:where(body.page-employees) .empty-state i{font-size:2.5rem;margin-bottom:12px;opacity:.4;display:block}
:where(body.page-employees) .field-error{border-color:var(--danger)!important;box-shadow:0 0 0 3px rgba(214,48,49,.12)!important}

/* وضعیت فعال پیک */
:where(body.page-employees) .status-badge{display:inline-block;padding:2px 9px;border-radius:20px;font-size:.75rem;font-weight:600}
:where(body.page-employees) .status-badge.active{background:rgba(0,184,148,.12);color:var(--success)}
:where(body.page-employees) .status-badge.inactive{background:rgba(214,48,49,.1);color:var(--danger)}

/* ==========================================================================
   PAGE: financial_report
   source: pages/financial_report.php
   ========================================================================== */
body:where(.page-financial_report) {
  --primary:      #f06a00;
  --primary-dark: #4a3ab5;
  --success:      #00b894;
  --danger:       #d63031;
  --warning:      #f39c12;
  --info:         #0984e3;
  --bg:           #f0f2f5;
  --card:         #ffffff;
  --text:         #2d3436;
  --muted:        #636e72;
  --border:       #e0e0e0;
  --radius:       12px;
  --shadow:       0 2px 16px rgba(0,0,0,.08);
  --shadow-lg:    0 8px 32px rgba(0,0,0,.13);
  --transition:   .2s ease;
}

:where(body.page-financial_report) input, :where(body.page-financial_report) select, :where(body.page-financial_report) button { font-family: inherit; font-size: 1rem; }

/* ── Wrapper ── */
:where(body.page-financial_report) .wrap { max-width: 900px; margin: 0 auto; padding: 28px 16px; }

/* ── Page header ── */
:where(body.page-financial_report) .page-header {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 28px;
}
:where(body.page-financial_report) .page-icon {
  width: 52px; height: 52px; border-radius: 14px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; flex-shrink: 0;
}
:where(body.page-financial_report) .page-title { font-size: 1.4rem; font-weight: 700; color: var(--primary-dark); }
:where(body.page-financial_report) .page-sub   { font-size: .85rem; color: var(--muted); margin-top: 3px; }

/* ── Card ── */
:where(body.page-financial_report) .card {
  background: var(--card); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 24px; margin-bottom: 22px;
}
:where(body.page-financial_report) .card-title {
  font-size: 1rem; font-weight: 700; color: var(--primary-dark);
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 14px; border-bottom: 1px solid var(--border); margin-bottom: 20px;
}
:where(body.page-financial_report) .card-title i { color: var(--primary); }

/* ── Form grid ── */
:where(body.page-financial_report) .form-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 14px; align-items: end; }
@media(max-width:600px){ :where(body.page-financial_report) .form-row { grid-template-columns: 1fr; } }
:where(body.page-financial_report) .form-group { display: flex; flex-direction: column; gap: 6px; }
:where(body.page-financial_report) label { font-size: .82rem; font-weight: 600; color: var(--muted); }
:where(body.page-financial_report) .form-control {
  padding: 10px 14px; border: 1.5px solid var(--border);
  border-radius: 9px; background: #fafafa; color: var(--text);
  transition: var(--transition); width: 100%;
}
:where(body.page-financial_report) .form-control:focus { outline: none; border-color: var(--primary); background: #fff; box-shadow: 0 0 0 3px rgba(240, 106, 0,.12); }
:where(body.page-financial_report) .form-control[readonly] { cursor: pointer; }
:where(body.page-financial_report) .date-wrap { position: relative; }

/* ── Buttons ── */
:where(body.page-financial_report) .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 22px; border: none; border-radius: 9px;
  font-size: .95rem; font-weight: 700; cursor: pointer; transition: var(--transition);
  white-space: nowrap;
}
:where(body.page-financial_report) .btn:hover { filter: brightness(.93); transform: translateY(-1px); }
:where(body.page-financial_report) .btn-primary { background: var(--primary); color: #fff; }
:where(body.page-financial_report) .btn-outline  { background: #fff; color: var(--primary); border: 1.5px solid var(--primary); }
:where(body.page-financial_report) .btn-print    { background: var(--info); color: #fff; }

/* ── Stats grid ── */
:where(body.page-financial_report) .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin-bottom: 22px; }
:where(body.page-financial_report) .stat-card {
  background: var(--card); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 20px 18px;
  display: flex; align-items: center; gap: 14px;
  transition: var(--transition);
}
:where(body.page-financial_report) .stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
:where(body.page-financial_report) .stat-icon {
  width: 48px; height: 48px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; flex-shrink: 0;
}
:where(body.page-financial_report) .stat-icon.green  { background: rgba(0,184,148,.13);  color: var(--success); }
:where(body.page-financial_report) .stat-icon.blue   { background: rgba(9,132,227,.13);  color: var(--info); }
:where(body.page-financial_report) .stat-icon.orange { background: rgba(243,156,18,.15); color: var(--warning); }
:where(body.page-financial_report) .stat-icon.red    { background: rgba(214,48,49,.12);  color: var(--danger); }
:where(body.page-financial_report) .stat-icon.purple { background: rgba(240, 106, 0,.13); color: var(--primary); }
:where(body.page-financial_report) .stat-label { font-size: .78rem; color: var(--muted); margin-bottom: 4px; }
:where(body.page-financial_report) .stat-value { font-size: 1.05rem; font-weight: 700; color: var(--text); line-height: 1.3; }
:where(body.page-financial_report) .stat-count { font-size: .72rem; color: var(--muted); margin-top: 2px; }

/* ── Balance box ── */
:where(body.page-financial_report) .balance-box {
  border-radius: var(--radius); padding: 22px 26px;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px;
  margin-bottom: 22px;
}
:where(body.page-financial_report) .balance-box.positive { background: linear-gradient(135deg, #00b894, #00a381); color: #fff; }
:where(body.page-financial_report) .balance-box.negative { background: linear-gradient(135deg, #d63031, #b71c1c); color: #fff; }
:where(body.page-financial_report) .balance-label { font-size: .9rem; opacity: .9; margin-bottom: 4px; }
:where(body.page-financial_report) .balance-value { font-size: 1.75rem; font-weight: 800; }
:where(body.page-financial_report) .balance-meta  { font-size: .82rem; opacity: .85; margin-top: 4px; }
:where(body.page-financial_report) .balance-sign-icon { font-size: 2.5rem; opacity: .35; }

/* ── Income/Expense row ── */
:where(body.page-financial_report) .ie-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 22px;
}
@media(max-width:500px){ :where(body.page-financial_report) .ie-row { grid-template-columns: 1fr; } }
:where(body.page-financial_report) .ie-box {
  border-radius: var(--radius); padding: 18px 20px;
  display: flex; align-items: center; gap: 12px;
}
:where(body.page-financial_report) .ie-box.income  { background: rgba(0,184,148,.09);  border: 1.5px solid rgba(0,184,148,.25); }
:where(body.page-financial_report) .ie-box.expense { background: rgba(214,48,49,.08);  border: 1.5px solid rgba(214,48,49,.2); }
:where(body.page-financial_report) .ie-icon { font-size: 1.4rem; }
:where(body.page-financial_report) .ie-box.income  .ie-icon { color: var(--success); }
:where(body.page-financial_report) .ie-box.expense .ie-icon { color: var(--danger); }
:where(body.page-financial_report) .ie-label { font-size: .8rem; color: var(--muted); margin-bottom: 3px; }
:where(body.page-financial_report) .ie-value { font-size: 1.1rem; font-weight: 700; }
:where(body.page-financial_report) .ie-box.income  .ie-value { color: var(--success); }
:where(body.page-financial_report) .ie-box.expense .ie-value { color: var(--danger); }

/* ── Period badge ── */
:where(body.page-financial_report) .period-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(240, 106, 0,.1); color: var(--primary);
  border-radius: 20px; padding: 5px 14px; font-size: .82rem; font-weight: 600;
}

/* ── Loader ── */
:where(body.page-financial_report) .loader { text-align: center; padding: 40px; color: var(--muted); display: none; }
:where(body.page-financial_report) .loader.show { display: block; }
:where(body.page-financial_report) .spinner {
  width: 40px; height: 40px; border: 3px solid var(--border);
  border-top-color: var(--primary); border-radius: 50%;
  animation: spin .7s linear infinite; margin: 0 auto 12px;
}

/* ── Empty / Error ── */
:where(body.page-financial_report) .empty { text-align: center; padding: 48px 20px; color: var(--muted); }
:where(body.page-financial_report) .empty i { font-size: 2.8rem; display: block; margin-bottom: 14px; opacity: .3; }
:where(body.page-financial_report) .empty p { font-size: .9rem; }
:where(body.page-financial_report) .err-box {
  background: rgba(214,48,49,.08); border: 1px solid rgba(214,48,49,.25);
  color: var(--danger); border-radius: 10px; padding: 14px 18px;
  display: flex; align-items: center; gap: 10px; font-size: .9rem;
}

/* ── Print ── */
:where(body.page-financial_report) .no-print { }
@media print {
  :where(body.page-financial_report) .no-print, :where(body.page-financial_report) .btn { display: none !important; }
  body:where(.page-financial_report) { background: #fff; }
  :where(body.page-financial_report) .wrap { padding: 0; max-width: 100%; }
  :where(body.page-financial_report) .stat-card, :where(body.page-financial_report) .balance-box, :where(body.page-financial_report) .ie-box { box-shadow: none !important; }
}

/* ==========================================================================
   PAGE: help
   source: pages/help.php
   ========================================================================== */
/* ─── HEADER ─── */
  :where(body.page-help) .ms-header {
   
    padding: 36px 24px 28px;
    text-align: center;
    position: relative;
    overflow: hidden;
  }
  :where(body.page-help) .ms-header::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at 50% 0%, rgba(232,99,26,.35) 0%, transparent 70%);
    pointer-events: none;
  }
  :where(body.page-help) .ms-header h1 {
    font-size: 22px;
    font-weight: 700;
    color: #000;
    letter-spacing: .5px;
    position: relative;
  }
  :where(body.page-help) .ms-header h1 span { color: #000; }
  :where(body.page-help) .ms-header p {
    font-size: 13px;
    color: #000;
    margin-top: 6px;
    position: relative;
  }

  /* ─── SEARCH ─── */
  :where(body.page-help) .ms-search-wrap {
    padding: 20px 16px 8px;
    max-width: 560px;
    margin: 0 auto;
  }
  :where(body.page-help) .ms-search {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1.5px solid var(--gray-200);
    border-radius: 50px;
    padding: 0 18px;
    gap: 10px;
    box-shadow: var(--shadow);
    transition: border-color var(--transition), box-shadow var(--transition);
  }
  :where(body.page-help) .ms-search:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(232,99,26,.12);
  }
  :where(body.page-help) .ms-search i { color: var(--gray-400); font-size: 13px; }
  :where(body.page-help) .ms-search input {
    flex: 1;
    border: none;
    outline: none;
    font-family: inherit;
    font-size: 13px;
    padding: 12px 0;
    background: transparent;
    color: var(--text);
    direction: rtl;
  }
  :where(body.page-help) .ms-search input::placeholder { color: var(--gray-400); }

  /* ─── MAIN TABS ─── */
  :where(body.page-help) .ms-tabs-nav {
    display: flex;
    gap: 0;
    padding: 16px 16px 0;
    max-width: 1100px;
    margin: 0 auto;
    border-bottom: 2px solid var(--gray-200);
  }
  :where(body.page-help) .ms-tab-btn {
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    padding: 10px 22px;
    font-weight: 600;
    background: transparent;
    color: var(--text-muted);
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: all var(--transition);
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
  }
  :where(body.page-help) .ms-tab-btn:hover { color: var(--primary); }
  :where(body.page-help) .ms-tab-btn.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
  }
  :where(body.page-help) .ms-tab-btn i { font-size: 13px; }

  /* tab panes */
  :where(body.page-help) .ms-tab-pane { display: none; }
  :where(body.page-help) .ms-tab-pane.active { display: block; }

  /* empty tab */
  :where(body.page-help) .ms-empty-tab {
    text-align: center;
    padding: 80px 20px;
    color: var(--gray-400);
  }
  :where(body.page-help) .ms-empty-tab i { font-size: 48px; margin-bottom: 16px; display: block; opacity: .4; }
  :where(body.page-help) .ms-empty-tab h3 { font-size: 16px; font-weight: 600; color: var(--gray-600); margin-bottom: 8px; }
  :where(body.page-help) .ms-empty-tab p  { font-size: 13px; }

  /* ─── GRID ─── */
  :where(body.page-help) .ms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px;
    padding: 8px 16px 40px;
    max-width: 1100px;
    margin: 0 auto;
  }

  /* ─── CARD ─── */
  :where(body.page-help) .ms-card {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: box-shadow var(--transition), transform var(--transition);
    border: 1.5px solid transparent;
  }
  :where(body.page-help) .ms-card:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
    border-color: var(--gray-200);
  }
  :where(body.page-help) .ms-card.hidden { display: none; }

  :where(body.page-help) .ms-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    cursor: pointer;
    user-select: none;
    position: relative;
  }
  :where(body.page-help) .ms-icon-wrap {
    width: 40px; height: 40px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
    transition: transform var(--transition);
  }
  :where(body.page-help) .ms-card:hover .ms-icon-wrap { transform: scale(1.1) rotate(-3deg); }

  :where(body.page-help) .ms-card-title {
    flex: 1;
    font-weight: 600;
    font-size: 14px;
    color: var(--text);
  }
  :where(body.page-help) .ms-card-title small {
    display: block;
    font-size: 11px;
    font-weight: 400;
    color: var(--text-muted);
    margin-top: 1px;
  }

  :where(body.page-help) .ms-chevron {
    color: var(--gray-400);
    font-size: 11px;
    transition: transform var(--transition);
    flex-shrink: 0;
  }
  :where(body.page-help) .ms-card.open .ms-chevron { transform: rotate(180deg); }

  /* badge */
  :where(body.page-help) .ms-badge {
    font-size: 10px;
    padding: 2px 9px;
    border-radius: 20px;
    font-weight: 600;
    letter-spacing: .2px;
    flex-shrink: 0;
  }
  :where(body.page-help) .ms-badge.free { background: #E8F5E9; color: #2E7D32; }
  :where(body.page-help) .ms-badge.premium { background: #FFF3E0; color: #E65100; }

  /* ─── BODY ─── */
  :where(body.page-help) .ms-card-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.45s cubic-bezier(.4,0,.2,1), opacity 0.3s ease;
    opacity: 0;
  }
  :where(body.page-help) .ms-card.open .ms-card-body {
    max-height: 1200px;
    opacity: 1;
  }
  :where(body.page-help) .ms-card-inner {
    padding: 0 18px 20px;
    border-top: 1.5px solid var(--gray-100);
  }

  /* ─── SECTION TITLE ─── */
  :where(body.page-help) .ms-section-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin: 16px 0 8px;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  :where(body.page-help) .ms-section-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--gray-200);
  }

  /* ─── LIST ─── */
  :where(body.page-help) .ms-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 6px;
  }
  :where(body.page-help) .ms-list li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.6;
  }
  :where(body.page-help) .ms-list li i {
    color: var(--primary);
    font-size: 10px;
    margin-top: 5px;
    flex-shrink: 0;
  }

  /* ─── PROSE ─── */
  :where(body.page-help) .ms-prose {
    font-size: 13px;
    color: var(--text-muted);
    margin: 10px 0;
    line-height: 1.7;
  }

  /* tip box */
  :where(body.page-help) .ms-tip {
    background: var(--gray-100);
    border-right: 3px solid var(--primary);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 12.5px;
    color: var(--text-muted);
    margin-top: 12px;
    display: flex;
    gap: 8px;
    align-items: flex-start;
  }
  :where(body.page-help) .ms-tip i { color: var(--primary); margin-top: 2px; flex-shrink: 0; }

  /* code */
  :where(body.page-help) code {
    background: var(--gray-100);
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 12px;
    color: var(--primary-dk);
    font-family: monospace;
  }

  /* ─── EMPTY STATE ─── */
  :where(body.page-help) .ms-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--gray-400);
    display: none;
    grid-column: 1/-1;
  }
  :where(body.page-help) .ms-empty i { font-size: 32px; margin-bottom: 10px; display: block; }
  :where(body.page-help) .ms-empty.show { display: block; }

  /* ─── FOOTER ─── */
  :where(body.page-help) .ms-footer {
    text-align: center;
    padding: 20px;
    font-size: 12px;
    color: var(--gray-400);
    border-top: 1px solid var(--gray-200);
  }

  /* animation */
  @keyframes fadeIn--help {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  :where(body.page-help) .ms-card { animation: fadeIn--help .3s ease both; }
  :where(body.page-help) .ms-card:nth-child(1)  { animation-delay: .02s }
  :where(body.page-help) .ms-card:nth-child(2)  { animation-delay: .04s }
  :where(body.page-help) .ms-card:nth-child(3)  { animation-delay: .06s }
  :where(body.page-help) .ms-card:nth-child(4)  { animation-delay: .08s }
  :where(body.page-help) .ms-card:nth-child(5)  { animation-delay: .10s }
  :where(body.page-help) .ms-card:nth-child(6)  { animation-delay: .12s }
  :where(body.page-help) .ms-card:nth-child(7)  { animation-delay: .14s }
  :where(body.page-help) .ms-card:nth-child(8)  { animation-delay: .16s }
  :where(body.page-help) .ms-card:nth-child(9)  { animation-delay: .18s }
  :where(body.page-help) .ms-card:nth-child(10) { animation-delay: .20s }
  :where(body.page-help) .ms-card:nth-child(11) { animation-delay: .22s }
  :where(body.page-help) .ms-card:nth-child(12) { animation-delay: .24s }
  :where(body.page-help) .ms-card:nth-child(13) { animation-delay: .26s }
  :where(body.page-help) .ms-card:nth-child(14) { animation-delay: .28s }
  :where(body.page-help) .ms-card:nth-child(15) { animation-delay: .30s }
  :where(body.page-help) .ms-card:nth-child(16) { animation-delay: .32s }
  :where(body.page-help) .ms-card:nth-child(17) { animation-delay: .34s }
  :where(body.page-help) .ms-card:nth-child(18) { animation-delay: .36s }
  :where(body.page-help) .ms-card:nth-child(19) { animation-delay: .38s }
  :where(body.page-help) .ms-card:nth-child(20) { animation-delay: .40s }
  :where(body.page-help) .ms-card:nth-child(21) { animation-delay: .42s }
  :where(body.page-help) .ms-card:nth-child(22) { animation-delay: .44s }

  @media(max-width: 480px) {
    :where(body.page-help) .ms-grid { grid-template-columns: 1fr; }
    :where(body.page-help) .ms-header h1 { font-size: 18px; }
  }

/* ==========================================================================
   PAGE: landing
   source: pages/landing.php
   ========================================================================== */
body:where(.page-landing) {
            --primary: #6366f1;
            --primary-dark: #4f46e5;
            --primary-light: #818cf8;
            --secondary: #10b981;
            --danger: #ef4444;
            --warning: #f59e0b;
            --bg-primary: #ffffff;
            --bg-secondary: #f8fafc;
            --bg-tertiary: #f1f5f9;
            --text-primary: #1e293b;
            --text-secondary: #64748b;
            --text-tertiary: #94a3b8;
            --border: #e2e8f0;
            --border-hover: #cbd5e1;
            --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
            --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
            --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
            --radius-sm: 6px;
            --radius-md: 8px;
            --radius-lg: 12px;
            --radius-xl: 16px;
            --transition: all 0.2s ease;
        }
        
        
        /* Header Section */
        :where(body.page-landing) .page-header {
            background: var(--bg-primary);
            border-radius: var(--radius-xl);
            padding: 2rem;
            margin-bottom: 2rem;
            box-shadow: var(--shadow-xl);
            text-align: center;
        }
        
        :where(body.page-landing) .page-title {
            font-size: 2rem;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 0.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.75rem;
        }
        
        :where(body.page-landing) .page-title i {
            color: var(--primary);
        }
        
        :where(body.page-landing) .page-subtitle {
            color: var(--text-secondary);
            font-size: 1rem;
        }
        
        /* Alert Container */
        :where(body.page-landing) .alert-container {
            position: fixed;
            top: 2rem;
            left: 50%;
            transform: translateX(-50%);
            z-index: 9999;
            min-width: 300px;
            max-width: 500px;
        }
        
        :where(body.page-landing) .alert {
            padding: 1rem 1.5rem;
            border-radius: var(--radius-md);
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            gap: 0.75rem;
            box-shadow: var(--shadow-lg);
            animation: slideDown 0.3s ease;
        }
        
        @keyframes slideDown {
            from {
                opacity: 0;
                transform: translateY(-20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        :where(body.page-landing) .alert-success {
            background: #ecfdf5;
            border: 1px solid #10b981;
            color: #065f46;
        }
        
        :where(body.page-landing) .alert-danger {
            background: #fef2f2;
            border: 1px solid #ef4444;
            color: #991b1b;
        }
        
        :where(body.page-landing) .alert-close {
            margin-right: auto;
            background: none;
            border: none;
            font-size: 1.25rem;
            cursor: pointer;
            opacity: 0.6;
            transition: var(--transition);
        }
        
        :where(body.page-landing) .alert-close:hover {
            opacity: 1;
        }
        
        /* Main Card */
        :where(body.page-landing) .main-card {
            background: var(--bg-primary);
            border-radius: var(--radius-xl);
            box-shadow: var(--shadow-xl);
            overflow: hidden;
        }
        
        :where(body.page-landing) .card-header {
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
            color: white;
            padding: 1.5rem 2rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        :where(body.page-landing) .card-header-title {
            font-size: 1.25rem;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        :where(body.page-landing) .preview-link {
            background: rgba(255, 255, 255, 0.2);
            color: white;
            padding: 0.5rem 1.25rem;
            border-radius: var(--radius-md);
            text-decoration: none;
            font-weight: 500;
            transition: var(--transition);
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        :where(body.page-landing) .preview-link:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: translateY(-2px);
        }
        
        /* Main Tabs */
        :where(body.page-landing) .main-tabs-container {
            background: var(--bg-secondary);
            border-bottom: 2px solid var(--border);
        }
        
        :where(body.page-landing) .main-tabs {
            display: flex;
            list-style: none;
            padding: 0 2rem;
            gap: 0.5rem;
            overflow-x: auto;
        }
        
        :where(body.page-landing) .main-tab-link {
            background: none;
            border: none;
            padding: 1rem 1.5rem;
            color: var(--text-secondary);
            font-weight: 500;
            cursor: pointer;
            transition: var(--transition);
            border-bottom: 3px solid transparent;
            white-space: nowrap;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        :where(body.page-landing) .main-tab-link:hover {
            color: var(--text-primary);
            background: rgba(99, 102, 241, 0.05);
        }
        
        :where(body.page-landing) .main-tab-link.active {
            color: var(--primary);
            border-bottom-color: var(--primary);
            background: rgba(99, 102, 241, 0.05);
        }
        
        /* Settings Tabs */
        :where(body.page-landing) .settings-sidebar {
            background: var(--bg-secondary);
            padding: 1.5rem;
            border-left: 1px solid var(--border);
            height: 100%;
            min-height: 600px;
        }
        
        :where(body.page-landing) .settings-tabs {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 0.25rem;
        }
        
        :where(body.page-landing) .settings-tab-link {
            background: none;
            border: none;
            padding: 0.875rem 1.25rem;
            color: var(--text-secondary);
            font-weight: 500;
            cursor: pointer;
            transition: var(--transition);
            border-radius: var(--radius-md);
            text-align: right;
            width: 100%;
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }
        
        :where(body.page-landing) .settings-tab-link:hover {
            background: var(--bg-primary);
            color: var(--text-primary);
        }
        
        :where(body.page-landing) .settings-tab-link.active {
            background: var(--primary);
            color: white;
            box-shadow: var(--shadow-md);
        }
        
        :where(body.page-landing) .settings-tab-link i {
            width: 20px;
            text-align: center;
        }
        
        /* Content Area */
        :where(body.page-landing) .tab-content {
            display: none;
        }
        
        :where(body.page-landing) .tab-content.active {
            display: block;
        }
        
        :where(body.page-landing) .settings-layout {
            display: grid;
            grid-template-columns: 250px 1fr;
            gap: 0;
        }
        
        :where(body.page-landing) .settings-content-area {
            padding: 2rem;
            background: var(--bg-primary);
        }
        
        :where(body.page-landing) .settings-tab-pane {
            display: none;
            animation: fadeIn 0.3s ease;
        }
        
        :where(body.page-landing) .settings-tab-pane.active {
            display: block;
        }
        
        :where(body.page-landing) .section-header {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            margin-bottom: 1.5rem;
            padding-bottom: 1rem;
            border-bottom: 2px solid var(--border);
        }
        
        :where(body.page-landing) .section-header i {
            color: var(--primary);
            font-size: 1.5rem;
        }
        
        :where(body.page-landing) .section-title {
            font-size: 1.5rem;
            font-weight: 600;
            color: var(--text-primary);
        }
        
        /* Form Elements */
        :where(body.page-landing) .form-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 1.5rem;
            margin-bottom: 2rem;
        }
        
        :where(body.page-landing) .form-group {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }
        
        :where(body.page-landing) .form-label {
            font-weight: 500;
            color: var(--text-primary);
            font-size: 0.9rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        :where(body.page-landing) .form-label i {
            color: var(--primary);
            font-size: 0.875rem;
        }
        
        :where(body.page-landing) .form-control,
        :where(body.page-landing) .form-select {
            padding: 0.75rem 1rem;
            border: 2px solid var(--border);
            border-radius: var(--radius-md);
            font-size: 0.95rem;
            transition: var(--transition);
            background: var(--bg-primary);
            color: var(--text-primary);
        }
        
        :where(body.page-landing) .form-control:focus,
        :where(body.page-landing) .form-select:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
        }
        
        :where(body.page-landing) .form-control:hover,
        :where(body.page-landing) .form-select:hover {
            border-color: var(--border-hover);
        }
        
        :where(body.page-landing) textarea.form-control {
            min-height: 120px;
            resize: vertical;
        }
        
        /* Color Input */
        :where(body.page-landing) .color-input-group {
            display: flex;
            gap: 0.75rem;
            align-items: center;
        }
        
        :where(body.page-landing) .color-input-wrapper {
            position: relative;
            flex: 1;
        }
        
        :where(body.page-landing) input[type="color"] {
            position: absolute;
            opacity: 0;
            width: 100%;
            height: 100%;
            cursor: pointer;
        }
        
        :where(body.page-landing) .color-preview-box {
            width: 100%;
            height: 48px;
            border: 2px solid var(--border);
            border-radius: var(--radius-md);
            cursor: pointer;
            transition: var(--transition);
            position: relative;
            overflow: hidden;
        }
        
        :where(body.page-landing) .color-preview-box:hover {
            border-color: var(--primary);
            box-shadow: var(--shadow-md);
        }
        
        :where(body.page-landing) .color-preview-box::after {
            content: attr(data-color);
            position: absolute;
            bottom: 0;
            right: 0;
            left: 0;
            background: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 0.25rem;
            font-size: 0.75rem;
            text-align: center;
        }
        
        /* Range Input */
        :where(body.page-landing) .range-group {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }
        
        :where(body.page-landing) .range-input-wrapper {
            display: flex;
            align-items: center;
            gap: 1rem;
        }
        
        :where(body.page-landing) .form-range {
            flex: 1;
            height: 6px;
            border-radius: 3px;
            background: var(--bg-tertiary);
            outline: none;
            -webkit-appearance: none;
            appearance: none;
        }
        
        :where(body.page-landing) .form-range::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: var(--primary);
            cursor: pointer;
            box-shadow: var(--shadow-md);
            transition: var(--transition);
        }
        
        :where(body.page-landing) .form-range::-webkit-slider-thumb:hover {
            transform: scale(1.2);
            box-shadow: var(--shadow-lg);
        }
        
        :where(body.page-landing) .form-range::-moz-range-thumb {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: var(--primary);
            cursor: pointer;
            box-shadow: var(--shadow-md);
            border: none;
        }
        
        :where(body.page-landing) .range-value {
            min-width: 80px;
            padding: 0.5rem 0.75rem;
            background: var(--bg-secondary);
            border-radius: var(--radius-md);
            font-weight: 600;
            color: var(--primary);
            text-align: center;
            font-size: 0.9rem;
        }
        
        /* Buttons */
        :where(body.page-landing) .btn {
            padding: 0.75rem 1.5rem;
            border: none;
            border-radius: var(--radius-md);
            font-weight: 500;
            cursor: pointer;
            transition: var(--transition);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            text-decoration: none;
        }
        
        :where(body.page-landing) .btn-primary {
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
            color: white;
            box-shadow: var(--shadow-md);
        }
        
        :where(body.page-landing) .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-lg);
        }
        
        :where(body.page-landing) .btn-success {
            background: var(--secondary);
            color: white;
            box-shadow: var(--shadow-md);
        }
        
        :where(body.page-landing) .btn-success:hover {
            background: #059669;
            transform: translateY(-2px);
            box-shadow: var(--shadow-lg);
        }
        
        :where(body.page-landing) .btn-danger {
            background: var(--danger);
            color: white;
        }
        
        :where(body.page-landing) .btn-danger:hover {
            background: #dc2626;
        }
        
        :where(body.page-landing) .btn-lg {
            padding: 1rem 2rem;
            font-size: 1.05rem;
        }
        
        :where(body.page-landing) .btn-sm {
            padding: 0.5rem 1rem;
            font-size: 0.875rem;
        }
        
        :where(body.page-landing) .action-buttons {
            display: flex;
            gap: 1rem;
            justify-content: center;
            padding: 2rem;
            background: var(--bg-secondary);
            border-top: 2px solid var(--border);
            position: sticky;
            bottom: 0;
        }
        
        /* Layout Selector */
        :where(body.page-landing) .layout-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 1rem;
            margin-top: 1rem;
        }
        
        :where(body.page-landing) .layout-option {
            border: 2px solid var(--border);
            border-radius: var(--radius-lg);
            padding: 1rem;
            cursor: pointer;
            transition: var(--transition);
            text-align: center;
            background: var(--bg-primary);
        }
        
        :where(body.page-landing) .layout-option:hover {
            border-color: var(--primary-light);
            transform: translateY(-4px);
            box-shadow: var(--shadow-md);
        }
        
        :where(body.page-landing) .layout-option.selected {
            border-color: var(--primary);
            background: rgba(99, 102, 241, 0.05);
            box-shadow: var(--shadow-md);
        }
        
        :where(body.page-landing) .layout-preview {
            height: 100px;
            margin-bottom: 0.75rem;
            border-radius: var(--radius-md);
            background: var(--bg-secondary);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 0.5rem;
        }
        
        :where(body.page-landing) .layout-header,
        :where(body.page-landing) .layout-footer {
            height: 15px;
            background: var(--border-hover);
            border-radius: var(--radius-sm);
        }
        
        :where(body.page-landing) .layout-content {
            flex: 1;
            background: var(--border);
            border-radius: var(--radius-sm);
            margin: 0.25rem 0;
        }
        
        :where(body.page-landing) .layout-label {
            font-weight: 500;
            color: var(--text-secondary);
        }
        
        :where(body.page-landing) .layout-option.selected .layout-label {
            color: var(--primary);
        }
        
        /* Animation Preview */
        :where(body.page-landing) .animation-preview-box {
            background: var(--bg-secondary);
            border: 2px dashed var(--border);
            border-radius: var(--radius-lg);
            padding: 3rem;
            text-align: center;
            margin-top: 1rem;
        }
        
        :where(body.page-landing) .animation-demo {
            width: 120px;
            height: 120px;
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
            border-radius: var(--radius-lg);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: 600;
            font-size: 1.25rem;
            margin: 0 auto 1.5rem;
            box-shadow: var(--shadow-lg);
        }
        
        /* Media Upload */
        :where(body.page-landing) .upload-area {
            background: var(--bg-secondary);
            border: 2px dashed var(--border);
            border-radius: var(--radius-lg);
            padding: 2rem;
            margin-bottom: 2rem;
            transition: var(--transition);
        }
        
        :where(body.page-landing) .upload-area:hover {
            border-color: var(--primary);
            background: rgba(99, 102, 241, 0.02);
        }
        
        :where(body.page-landing) .upload-form-grid {
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 1rem;
            align-items: end;
        }
        
        /* Media Grid */
        :where(body.page-landing) .media-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            gap: 1rem;
            padding: 1rem;
            background: var(--bg-secondary);
            border-radius: var(--radius-lg);
            max-height: 500px;
            overflow-y: auto;
        }
        
        :where(body.page-landing) .media-item {
            position: relative;
            border-radius: var(--radius-md);
            overflow: hidden;
            aspect-ratio: 1;
            background: var(--bg-primary);
            border: 2px solid var(--border);
            transition: var(--transition);
        }
        
        :where(body.page-landing) .media-item:hover {
            border-color: var(--primary);
            transform: scale(1.05);
            box-shadow: var(--shadow-lg);
        }
        
        :where(body.page-landing) .media-thumb {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        :where(body.page-landing) .media-delete {
            position: absolute;
            top: 0.5rem;
            left: 0.5rem;
            background: rgba(239, 68, 68, 0.9);
            color: white;
            border: none;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: var(--transition);
        }
        
        :where(body.page-landing) .media-item:hover .media-delete {
            opacity: 1;
        }
        
        :where(body.page-landing) .media-delete:hover {
            background: var(--danger);
            transform: scale(1.1);
        }
        
        :where(body.page-landing) .media-name {
            position: absolute;
            bottom: 0;
            right: 0;
            left: 0;
            background: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 0.5rem;
            font-size: 0.75rem;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }
        
        :where(body.page-landing) .video-indicator {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            font-size: 2rem;
            text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
        }
        
        /* Slider Design Options */
        :where(body.page-landing) .slider-designs {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1rem;
            margin-top: 1rem;
        }
        
        :where(body.page-landing) .slider-design {
            border: 2px solid var(--border);
            border-radius: var(--radius-lg);
            padding: 1rem;
            cursor: pointer;
            transition: var(--transition);
            text-align: center;
        }
        
        :where(body.page-landing) .slider-design:hover {
            border-color: var(--primary-light);
            transform: translateY(-4px);
            box-shadow: var(--shadow-md);
        }
        
        :where(body.page-landing) .slider-design.selected {
            border-color: var(--primary);
            background: rgba(99, 102, 241, 0.05);
        }
        
        :where(body.page-landing) .slider-preview {
            height: 120px;
            border-radius: var(--radius-md);
            margin-bottom: 0.75rem;
            position: relative;
            overflow: hidden;
        }
        
        :where(body.page-landing) .design-1 .slider-preview {
            background: linear-gradient(135deg, #1e7bff 0%, #02174a 100%);
        }
        
        :where(body.page-landing) .design-2 .slider-preview {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        }
        
        :where(body.page-landing) .design-3 .slider-preview {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
        }
        
        :where(body.page-landing) .design-4 .slider-preview {
            background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
        }
        
        /* Background Preview */
        :where(body.page-landing) .bg-preview {
            width: 100%;
            height: 180px;
            border-radius: var(--radius-lg);
            background-size: cover;
            background-position: center;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: 600;
            text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
            border: 2px solid var(--border);
            background-color: var(--bg-secondary);
        }
        
        /* Checkbox Styles */
        :where(body.page-landing) .checkbox-group {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 0.75rem;
            padding: 1rem;
            background: var(--bg-secondary);
            border-radius: var(--radius-md);
        }
        
        :where(body.page-landing) .checkbox-item {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.5rem;
            border-radius: var(--radius-sm);
            transition: var(--transition);
        }
        
        :where(body.page-landing) .checkbox-item:hover {
            background: var(--bg-primary);
        }
        
        :where(body.page-landing) .checkbox-item input[type="checkbox"] {
            width: 18px;
            height: 18px;
            cursor: pointer;
            accent-color: var(--primary);
        }
        
        :where(body.page-landing) .checkbox-item label {
            cursor: pointer;
            font-size: 0.9rem;
        }
        
        /* Loading Spinner */
        :where(body.page-landing) .spinner {
            display: inline-block;
            width: 1rem;
            height: 1rem;
            border: 2px solid currentColor;
            border-radius: 50%;
            border-right-color: transparent;
            animation: spin 0.75s linear infinite;
        }
        
        /* Empty State */
        :where(body.page-landing) .empty-state {
            text-align: center;
            padding: 3rem;
            color: var(--text-secondary);
        }
        
        :where(body.page-landing) .empty-state i {
            font-size: 3rem;
            color: var(--text-tertiary);
            margin-bottom: 1rem;
        }
        
        /* Responsive */
        
        /* Mobile Settings Selector */
        :where(body.page-landing) .mobile-settings-selector {
            display: none;
            padding: 1rem;
            background: var(--bg-secondary);
            border-bottom: 2px solid var(--border);
        }
        
        :where(body.page-landing) .mobile-settings-selector select {
            width: 100%;
            padding: 0.875rem 1rem;
            font-size: 1rem;
            font-weight: 500;
            border: 2px solid var(--border);
            border-radius: var(--radius-md);
            background: var(--bg-primary);
            color: var(--text-primary);
            cursor: pointer;
            transition: var(--transition);
        }
        
        :where(body.page-landing) .mobile-settings-selector select:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
        }
        
        :where(body.page-landing) .mobile-settings-selector label {
            display: block;
            margin-bottom: 0.5rem;
            color: var(--text-secondary);
            font-weight: 600;
            font-size: 0.875rem;
        }
        
        @media (max-width: 1024px) {
            :where(body.page-landing) .settings-layout {
                grid-template-columns: 1fr;
            }
            
            :where(body.page-landing) .settings-sidebar {
                border-left: none;
                border-bottom: 1px solid var(--border);
                min-height: auto;
            }
            
            :where(body.page-landing) .settings-tabs {
                flex-direction: row;
                overflow-x: auto;
                gap: 0.5rem;
                padding-bottom: 0.5rem;
            }
            
            :where(body.page-landing) .settings-tabs::-webkit-scrollbar {
                height: 4px;
            }
            
            :where(body.page-landing) .settings-tabs::-webkit-scrollbar-track {
                background: var(--bg-tertiary);
                border-radius: 2px;
            }
            
            :where(body.page-landing) .settings-tabs::-webkit-scrollbar-thumb {
                background: var(--primary);
                border-radius: 2px;
            }
            
            :where(body.page-landing) .settings-tab-link {
                white-space: nowrap;
                padding: 0.75rem 1rem;
                font-size: 0.875rem;
            }
        }
        
        @media (max-width: 768px) {
            /* Hide sidebar tabs on mobile */
            :where(body.page-landing) .settings-sidebar {
                display: none;
            }
            
            /* Show mobile selector */
            :where(body.page-landing) .mobile-settings-selector {
                display: block;
            }
            
            :where(body.page-landing) .settings-layout {
                grid-template-columns: 1fr;
            }
            
            body:where(.page-landing) {
                padding: 0.5rem 0;
            }
            
            :where(body.page-landing) .container {
                padding: 0 0.5rem;
            }
            
            :where(body.page-landing) .page-header {
                padding: 1rem;
                margin-bottom: 1rem;
            }
            
            :where(body.page-landing) .page-title {
                font-size: 1.25rem;
            }
            
            :where(body.page-landing) .page-subtitle {
                font-size: 0.875rem;
            }
            
            :where(body.page-landing) .card-header {
                flex-direction: column;
                gap: 0.75rem;
                text-align: center;
                padding: 1rem;
            }
            
            :where(body.page-landing) .card-header-title {
                font-size: 1rem;
            }
            
            :where(body.page-landing) .main-tabs {
                padding: 0 0.5rem;
            }
            
            :where(body.page-landing) .main-tab-link {
                padding: 0.875rem 1rem;
                font-size: 0.875rem;
            }
            
            :where(body.page-landing) .settings-content-area {
                padding: 1rem;
            }
            
            :where(body.page-landing) .section-header {
                margin-bottom: 1rem;
            }
            
            :where(body.page-landing) .section-title {
                font-size: 1.125rem;
            }
            
            :where(body.page-landing) .form-grid {
                grid-template-columns: 1fr;
                gap: 1rem;
            }
            
            :where(body.page-landing) .form-label {
                font-size: 0.875rem;
            }
            
            :where(body.page-landing) .form-control,
            :where(body.page-landing) .form-select {
                font-size: 0.875rem;
                padding: 0.625rem 0.875rem;
            }
            
            :where(body.page-landing) .action-buttons {
                flex-direction: column;
                padding: 1rem;
            }
            
            :where(body.page-landing) .btn-lg {
                padding: 0.875rem 1.5rem;
                font-size: 1rem;
            }
            
            :where(body.page-landing) .upload-form-grid {
                grid-template-columns: 1fr;
                gap: 1rem;
            }
            
            :where(body.page-landing) .upload-area {
                padding: 1.5rem;
            }
            
            :where(body.page-landing) .upload-icon {
                font-size: 2.5rem;
            }
            
            :where(body.page-landing) .layout-grid {
                grid-template-columns: 1fr;
            }
            
            :where(body.page-landing) .slider-designs {
                grid-template-columns: repeat(2, 1fr);
            }
            
            :where(body.page-landing) .media-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 1rem;
            }
            
            :where(body.page-landing) .info-banner {
                padding: 0.875rem 1rem;
                font-size: 0.875rem;
                margin-bottom: 1rem;
            }
        }
        
        /* Info Banner */
        :where(body.page-landing) .info-banner {
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
            color: white;
            padding: 1rem 1.5rem;
            border-radius: var(--radius-md);
            margin-bottom: 1.5rem;
            display: flex;
            align-items: center;
            gap: 1rem;
        }
        
        :where(body.page-landing) .info-banner i {
            font-size: 1.5rem;
        }
        
        /* Utility Classes */
        :where(body.page-landing) .text-center { text-align: center; }
        :where(body.page-landing) .mb-2 { margin-bottom: 0.5rem; }
        :where(body.page-landing) .mb-3 { margin-bottom: 1rem; }
        :where(body.page-landing) .mb-4 { margin-bottom: 1.5rem; }
        :where(body.page-landing) .mt-2 { margin-top: 0.5rem; }
        :where(body.page-landing) .mt-3 { margin-top: 1rem; }
        :where(body.page-landing) .w-100 { width: 100%; }

/* ==========================================================================
   PAGE: logo-settings
   source: pages/logo-settings.php
   ========================================================================== */
:where(body.page-logo-settings) .container {
            max-width: 800px;
            margin: 30px auto;
            background-color: var(--bg-primary);
            border-radius: var(--border-radius);
            box-shadow: var(--shadow-md);
            overflow: hidden;
        }
        
        :where(body.page-logo-settings) .tabs {
            display: flex;
            background-color: var(--bg-secondary);
        }
        
        :where(body.page-logo-settings) .tab-btn {
            flex: 1;
            padding: 15px;
            text-align: center;
            cursor: pointer;
            border: none;
            background: none;
            font-weight: 600;
            color: var(--text-secondary);
            transition: var(--transition);
            border-bottom: 3px solid transparent;
        }
        
        :where(body.page-logo-settings) .tab-btn.active {
            color: var(--primary-color);
            border-bottom: 3px solid var(--primary-color);
            background-color: var(--bg-primary);
        }
        
        :where(body.page-logo-settings) .tab-content {
            padding: 30px;
            display: none;
        }
        
        :where(body.page-logo-settings) .tab-content.active {
            display: block;
        }
        
        :where(body.page-logo-settings) .upload-title {
            text-align: center;
            margin-bottom: 20px;
            color: var(--primary-dark);
        }
        
        :where(body.page-logo-settings) .upload-form {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        
        :where(body.page-logo-settings) .form-group {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        
        :where(body.page-logo-settings) .form-group label {
            font-weight: 600;
            color: var(--text-secondary);
        }
        
        :where(body.page-logo-settings) .file-input-wrapper {
            position: relative;
            overflow: hidden;
            display: inline-block;
            width: 100%;
        }
        
        :where(body.page-logo-settings) .file-input-button {
            border: 2px dashed var(--primary-light);
            border-radius: var(--border-radius);
            padding: 40px 20px;
            text-align: center;
            cursor: pointer;
            transition: var(--transition);
            background-color: var(--bg-secondary);
        }
        
        :where(body.page-logo-settings) .file-input-button:hover {
            border-color: var(--primary-color);
            background-color: rgba(240, 106, 0, 0.05);
        }
        
        :where(body.page-logo-settings) .file-input-button i {
            font-size: 24px;
            color: var(--primary-color);
            margin-bottom: 10px;
        }
        
        :where(body.page-logo-settings) .file-input-button p {
            color: var(--text-secondary);
        }
        
        :where(body.page-logo-settings) .file-input {
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
            width: 100%;
            height: 100%;
            cursor: pointer;
        }
        
        :where(body.page-logo-settings) .file-name {
            margin-top: 10px;
            font-size: 14px;
            color: var(--text-secondary);
            text-align: center;
        }
        
        :where(body.page-logo-settings) .submit-btn {
            background-color: var(--primary-color);
            color: white;
            border: none;
            padding: 12px;
            border-radius: var(--border-radius);
            cursor: pointer;
            font-weight: 600;
            transition: var(--transition);
        }
        
        :where(body.page-logo-settings) .submit-btn:hover {
            background-color: var(--primary-dark);
        }
        
        :where(body.page-logo-settings) .submit-btn:disabled {
            background-color: var(--text-light);
            cursor: not-allowed;
        }
        
        :where(body.page-logo-settings) .delete-btn {
            background-color: var(--danger-color);
            color: white;
            border: none;
            padding: 12px;
            border-radius: var(--border-radius);
            cursor: pointer;
            font-weight: 600;
            transition: var(--transition);
            margin-top: 10px;
        }
        
        :where(body.page-logo-settings) .delete-btn:hover {
            background-color: #c0392b;
        }
        
        :where(body.page-logo-settings) .spinner {
            display: none;
            width: 40px;
            height: 40px;
            margin: 0 auto;
            border: 4px solid var(--primary-light);
            border-radius: 50%;
            border-top: 4px solid var(--primary-color);
            animation: spin--logo-settings 1s linear infinite;
        }
        
        @keyframes spin--logo-settings {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        /* Popup Styles */
        :where(body.page-logo-settings) .popup-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            opacity: 0;
            visibility: hidden;
            transition: var(--transition);
        }
        
        :where(body.page-logo-settings) .popup-overlay.active {
            opacity: 1;
            visibility: visible;
        }
        
        :where(body.page-logo-settings) .popup {
            background-color: var(--bg-primary);
            border-radius: var(--border-radius);
            box-shadow: var(--shadow-lg);
            width: 90%;
            max-width: 400px;
            padding: 25px;
            text-align: center;
            transform: translateY(20px);
            transition: var(--transition);
        }
        
        :where(body.page-logo-settings) .popup-overlay.active .popup {
            transform: translateY(0);
        }
        
        :where(body.page-logo-settings) .popup-icon {
            font-size: 48px;
            margin-bottom: 20px;
        }
        
        :where(body.page-logo-settings) .popup-icon.success {
            color: var(--success-color);
        }
        
        :where(body.page-logo-settings) .popup-icon.error {
            color: var(--danger-color);
        }
        
        :where(body.page-logo-settings) .popup-title {
            font-size: 20px;
            margin-bottom: 15px;
            color: var(--text-primary);
        }
        
        :where(body.page-logo-settings) .popup-message {
            color: var(--text-secondary);
            margin-bottom: 20px;
            line-height: 1.6;
        }
        
        :where(body.page-logo-settings) .popup-btn {
            background-color: var(--primary-color);
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: var(--border-radius);
            cursor: pointer;
            font-weight: 600;
            transition: var(--transition);
        }
        
        :where(body.page-logo-settings) .popup-btn:hover {
            background-color: var(--primary-dark);
        }

/* ==========================================================================
   PAGE: menu-items
   source: pages/menu-items.php
   ========================================================================== */
:where(body.page-menu-items) .category-menu-container {
            position: relative;
            margin-bottom: 20px;
        }

        :where(body.page-menu-items) .category-menu {
            display: flex;
            overflow-x: auto;
            gap: 10px;
            padding: 15px 10px;
            margin-bottom: 20px;
            background-color: var(--bg-primary);
            border-radius: var(--border-radius);
            box-shadow: var(--shadow-sm);
            scroll-behavior: smooth;
        }

        :where(body.page-menu-items) .category-item {
            padding: 8px 15px;
            background-color: var(--bg-secondary);
            border-radius: var(--border-radius);
            cursor: pointer;
            transition: var(--transition);
            white-space: nowrap;
            font-size: 14px;
            font-weight: 500;
            border: 1px solid transparent;
            flex-shrink: 0;
        }

        :where(body.page-menu-items) .category-item:hover {
            background-color: rgba(var(--primary-light), 0.2);
            border-color: var(--primary-color);
        }

        :where(body.page-menu-items) .category-item.active {
            background-color: var(--primary-color);
            color: white;
            box-shadow: var(--shadow-sm);
        }

        /* ================================================ */
        /* جدول محصولات */
        /* ================================================ */
        :where(body.page-menu-items) .menu-table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0 10px;
            margin: 20px 0;
            background-color: var(--bg-primary);
            border-radius: var(--border-radius);
            overflow: hidden;
            box-shadow: var(--shadow-sm);
        }

        :where(body.page-menu-items) .menu-table th {
            background-color: var(--primary-color);
            color: white;
            padding: 12px 15px;
            text-align: right;
            font-weight: 500;
            font-size: 14px;
            position: sticky;
            top: 0;
        }

        :where(body.page-menu-items) .menu-table td {
            padding: 15px;
            text-align: right;
            background-color: var(--bg-primary);
            border-bottom: 1px solid var(--bg-secondary);
        }

        :where(body.page-menu-items) .menu-table tr:hover td {
            background-color: rgba(var(--primary-light), 0.05);
        }

        /* انیمیشن‌ها */
        @keyframes fadeInRow {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @keyframes fadeOutRow {
            from { opacity: 1; transform: translateY(0); }
            to { opacity: 0; transform: translateY(-10px); }
        }

        :where(body.page-menu-items) .menu-table tr.new-item {
            animation: fadeInRow 0.5s ease;
        }

        :where(body.page-menu-items) .menu-table tr.removing-item {
            animation: fadeOutRow 0.3s ease;
        }

        /* ================================================ */
        /* تصاویر */
        /* ================================================ */
        :where(body.page-menu-items) .menu-image-wrapper {
            background: none;
            border: none;
            padding: 0;
            cursor: pointer;
            display: block;
        }

        :where(body.page-menu-items) .menu-image {
            width: 80px;
            height: 80px;
            object-fit: cover;
            border-radius: var(--border-radius);
            box-shadow: var(--shadow-sm);
            transition: var(--transition);
        }

        :where(body.page-menu-items) .menu-image:hover {
            transform: scale(1.05);
            box-shadow: var(--shadow-md);
        }

        /* ================================================ */
        /* گالری چند تصویری محصول (مودال imageModal) */
        /* ================================================ */
        :where(body.page-menu-items) .image-gallery {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-bottom: 20px;
        }

        :where(body.page-menu-items) .gallery-item {
            position: relative;
            width: 80px;
            height: 80px;
        }

        :where(body.page-menu-items) .gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: var(--border-radius);
            box-shadow: var(--shadow-sm);
        }

        :where(body.page-menu-items) .gallery-item .delete-image-btn {
            position: absolute;
            top: -6px;
            left: -6px;
            width: 22px;
            height: 22px;
            background-color: var(--danger-color);
            color: white;
            border: none;
            border-radius: 50%;
            font-size: 11px;
            line-height: 1;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: var(--shadow-sm);
            padding: 0;
        }

        :where(body.page-menu-items) .gallery-item .main-badge {
            position: absolute;
            bottom: -6px;
            right: -6px;
            background-color: var(--primary-color);
            color: white;
            font-size: 9px;
            padding: 2px 6px;
            border-radius: 8px;
            white-space: nowrap;
        }

        :where(body.page-menu-items) .gallery-empty-text {
            color: var(--text-secondary);
            font-size: 13px;
            margin-bottom: 15px;
        }

        /* ================================================ */
        /* دکمه‌ها */
        /* ================================================ */
        :where(body.page-menu-items) .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 10px 20px;
            border-radius: var(--border-radius);
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: var(--transition);
            text-decoration: none;
            border: none;
            outline: none;
            gap: 8px;
        }

        :where(body.page-menu-items) .btn-primary {
            background-color: var(--primary-color);
            color: white;
            box-shadow: var(--shadow-sm);
        }

        :where(body.page-menu-items) .btn-primary:hover {
            background-color: var(--primary-dark);
            box-shadow: var(--shadow-md);
        }

        :where(body.page-menu-items) .btn-danger {
            background-color: var(--danger-color);
            color: white;
        }

        :where(body.page-menu-items) .btn-danger:hover {
            background-color: #c0392b;
        }

        :where(body.page-menu-items) .btn-success {
            background-color: var(--success-color);
            color: white;
        }

        :where(body.page-menu-items) .action-icon {
            background: none;
            border: none;
            padding: 8px;
            cursor: pointer;
            border-radius: 50%;
            transition: var(--transition);
            font-size: 16px;
        }

        :where(body.page-menu-items) .edit-icon {
            color: var(--primary-color);
        }

        :where(body.page-menu-items) .edit-icon:hover {
            background-color: rgba(var(--primary-light), 0.1);
        }

        :where(body.page-menu-items) .delete-icon {
            color: var(--danger-color);
        }

        :where(body.page-menu-items) .delete-icon:hover {
            background-color: rgba(231, 76, 60, 0.1);
        }

        /* ================================================ */
        /* مودال‌ها */
        /* ================================================ */
        :where(body.page-menu-items) .modal {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.6);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 10000;
            padding: 20px;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        :where(body.page-menu-items) .modal.active {
            display: flex;
            opacity: 1;
        }

        :where(body.page-menu-items) .modal-content {
            background-color: var(--bg-primary);
            border-radius: var(--border-radius);
            box-shadow: var(--shadow-lg);
            width: 100%;
            max-width: 500px;
            max-height: 90vh;
            overflow-y: auto;
            position: relative;
            transform: translateY(-20px);
            transition: transform 0.3s ease;
        }

        :where(body.page-menu-items) .modal.active .modal-content {
            transform: translateY(0);
        }

        :where(body.page-menu-items) .modal-header {
            padding: 20px;
            border-bottom: 1px solid var(--bg-secondary);
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        :where(body.page-menu-items) .modal-title {
            font-size: 18px;
            font-weight: 600;
            color: var(--text-primary);
        }

        :where(body.page-menu-items) .modal-close {
            background: none;
            border: none;
            font-size: 24px;
            cursor: pointer;
            color: var(--text-secondary);
            transition: var(--transition);
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
        }

        :where(body.page-menu-items) .modal-close:hover {
            background-color: var(--bg-secondary);
            color: var(--danger-color);
        }

        :where(body.page-menu-items) .modal-body {
            padding: 20px;
        }

        :where(body.page-menu-items) .modal-footer {
            padding: 20px;
            border-top: 1px solid var(--bg-secondary);
            display: flex;
            justify-content: flex-end;
            gap: 10px;
        }

        /* ================================================ */
        /* فرم‌ها */
        /* ================================================ */
        :where(body.page-menu-items) .form-group {
            margin-bottom: 20px;
        }

        :where(body.page-menu-items) .form-label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: var(--text-primary);
        }

        :where(body.page-menu-items) .form-control {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid var(--bg-secondary);
            border-radius: var(--border-radius);
            font-size: 14px;
            transition: var(--transition);
        }

        :where(body.page-menu-items) .form-control:focus {
            border-color: var(--primary-color);
            outline: none;
            box-shadow: 0 0 0 3px rgba(var(--primary-light), 0.2);
        }

        /* ================================================ */
        /* Switch (موجود/ناموجود) */
        /* ================================================ */
        :where(body.page-menu-items) .switch {
            position: relative;
            display: inline-block;
            width: 80px;
            height: 34px;
        }

        :where(body.page-menu-items) .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        :where(body.page-menu-items) .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: var(--danger-color);
            transition: var(--transition);
            border-radius: 34px;
        }

        :where(body.page-menu-items) .slider:before {
            position: absolute;
            content: "";
            height: 26px;
            width: 26px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            transition: var(--transition);
            border-radius: 50%;
        }

        :where(body.page-menu-items) input:checked + .slider {
            background-color: var(--success-color);
        }

        :where(body.page-menu-items) input:checked + .slider:before {
            transform: translateX(48px);
        }

        :where(body.page-menu-items) .slider-text {
            position: absolute;
            color: white;
            font-size: 12px;
            font-weight: 500;
            top: 50%;
            transform: translateY(-50%);
            transition: var(--transition);
        }

        :where(body.page-menu-items) .slider-text-on {
            left: 10px;
            opacity: 0;
        }

        :where(body.page-menu-items) .slider-text-off {
            right: 10px;
            opacity: 1;
        }

        :where(body.page-menu-items) input:checked ~ .slider .slider-text-on {
            opacity: 1;
        }

        :where(body.page-menu-items) input:checked ~ .slider .slider-text-off {
            opacity: 0;
        }

        /* ================================================ */
        /* Empty State */
        /* ================================================ */
        :where(body.page-menu-items) .empty-state {
            text-align: center;
            padding: 60px 20px;
            background-color: var(--bg-secondary);
            border-radius: var(--border-radius);
            margin: 20px 0;
        }

        :where(body.page-menu-items) .empty-state-icon {
            font-size: 48px;
            color: var(--text-secondary);
            margin-bottom: 20px;
        }

        :where(body.page-menu-items) .empty-state-text {
            color: var(--text-secondary);
            font-size: 16px;
            line-height: 1.8;
        }

        /* ================================================ */
        /* Toast Notifications */
        /* ================================================ */
        :where(body.page-menu-items) .toast-notification {
            position: fixed;
            bottom: 20px;
            right: 20px;
            padding: 15px 25px;
            border-radius: var(--border-radius);
            color: white;
            font-size: 14px;
            box-shadow: var(--shadow-lg);
            transform: translateY(100px);
            opacity: 0;
            transition: all 0.3s ease;
            z-index: 10001;
            max-width: 350px;
        }

        :where(body.page-menu-items) .toast-notification.show {
            transform: translateY(0);
            opacity: 1;
        }

        :where(body.page-menu-items) .toast-notification.success {
            background-color: var(--success-color);
        }

        :where(body.page-menu-items) .toast-notification.error {
            background-color: var(--danger-color);
        }

        :where(body.page-menu-items) .toast-notification.warning {
            background-color: var(--warning-color);
        }

        /* ================================================ */
        /* Loading */
        /* ================================================ */
        :where(body.page-menu-items) .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 9999;
        }

        :where(body.page-menu-items) .loading-overlay.active {
            display: flex;
        }

        :where(body.page-menu-items) .loading-content {
            background-color: white;
            padding: 30px;
            border-radius: var(--border-radius);
            text-align: center;
            box-shadow: var(--shadow-lg);
        }

        :where(body.page-menu-items) .spinner {
            border: 4px solid var(--bg-secondary);
            border-top: 4px solid var(--primary-color);
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin--menu-items 1s linear infinite;
            margin: 0 auto 15px;
        }

        @keyframes spin--menu-items {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* ================================================ */
        /* جستجو */
        /* ================================================ */
        :where(body.page-menu-items) .search-container {
            position: relative;
            margin-bottom: 20px;
            max-width: 500px;
            margin-right: auto;
            margin-left: auto;
        }

        :where(body.page-menu-items) .search-input {
            width: 100%;
            padding: 12px 45px 12px 15px;
            border: 1px solid var(--bg-secondary);
            border-radius: var(--border-radius);
            background-color: var(--bg-primary);
            color: var(--text-primary);
            transition: var(--transition);
            font-size: 14px;
            box-shadow: var(--shadow-sm);
        }

        :where(body.page-menu-items) .search-input:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(var(--primary-light), 0.2);
            outline: none;
        }

        :where(body.page-menu-items) .search-icon {
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-secondary);
        }

        /* ================================================ */
        /* Utilities */
        /* ================================================ */
        :where(body.page-menu-items) .text-center {
            text-align: center;
        }

        :where(body.page-menu-items) .mt-3 {
            margin-top: 15px;
        }

        :where(body.page-menu-items) .divider {
            border: none;
            border-top: 1px solid var(--bg-secondary);
            margin: 30px 0;
        }

        :where(body.page-menu-items) .current-menu {
            font-size: 18px;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 20px;
            padding: 15px;
            background-color: var(--bg-primary);
            border-radius: var(--border-radius);
            box-shadow: var(--shadow-sm);
            text-align: center;
        }

        :where(body.page-menu-items) .action-buttons {
            display: flex;
            gap: 10px;
            justify-content: center;
        }

        :where(body.page-menu-items) .menu-name {
            background: none;
            border: none;
            color: var(--primary-color);
            cursor: pointer;
            font-weight: 500;
            text-decoration: none;
            transition: var(--transition);
            font-size: 14px;
            padding: 0;
        }

        :where(body.page-menu-items) .menu-name:hover {
            text-decoration: underline;
            color: var(--primary-dark);
        }

        /* ================================================ */
        /* Responsive */
        /* ================================================ */
        @media (max-width: 768px) {
            :where(body.page-menu-items) .menu-table th,
            :where(body.page-menu-items) .menu-table td {
                padding: 10px 8px;
                font-size: 13px;
            }
            
            :where(body.page-menu-items) .category-item {
                padding: 6px 12px;
                font-size: 13px;
            }
            
            :where(body.page-menu-items) .modal-content {
                margin: 10px;
                max-height: calc(100vh - 20px);
                max-width: calc(100vw - 20px);
            }
        }

/* ==========================================================================
   PAGE: menu-itemsv1
   source: pages/menu-itemsv1.php
   ========================================================================== */
/* استایل‌های پایه */
    :where(body.page-menu-itemsv1) .category-menu-container {
        position: relative;
        margin-bottom: 20px;
    }

    :where(body.page-menu-itemsv1) .category-menu {
        display: flex;
        overflow-x: auto;
        gap: 10px;
        padding: 15px 10px;
        margin-bottom: 20px;
        background-color: var(--bg-primary);
        border-radius: var(--border-radius);
        box-shadow: var(--shadow-sm);
        scroll-behavior: smooth;
        scrollbar-width: thin;
        -ms-overflow-style: none;
    }

    :where(body.page-menu-itemsv1) .category-menu::-webkit-scrollbar {
        height: 6px;
    }

    :where(body.page-menu-itemsv1) .category-menu::-webkit-scrollbar-track {
        background: var(--bg-secondary);
        border-radius: 3px;
    }

    :where(body.page-menu-itemsv1) .category-menu::-webkit-scrollbar-thumb {
        background: var(--primary-color);
        border-radius: 3px;
    }

    :where(body.page-menu-itemsv1) .category-item {
        padding: 8px 15px;
        background-color: var(--bg-secondary);
        border-radius: var(--border-radius);
        cursor: pointer;
        transition: var(--transition);
        white-space: nowrap;
        font-size: 14px;
        font-weight: 500;
        border: 1px solid transparent;
        flex-shrink: 0;
    }

    :where(body.page-menu-itemsv1) .category-item:hover {
        background-color: rgba(var(--primary-light), 0.2);
        border-color: var(--primary-color);
    }

    :where(body.page-menu-itemsv1) .category-item.active {
        background-color: var(--primary-color);
        color: white;
        box-shadow: var(--shadow-sm);
    }

    /* استایل جدول */
    :where(body.page-menu-itemsv1) .menu-table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0 10px;
        margin: 20px 0;
        background-color: var(--bg-primary);
        border-radius: var(--border-radius);
        overflow: hidden;
        box-shadow: var(--shadow-sm);
    }

    :where(body.page-menu-itemsv1) .menu-table th {
        background-color: var(--primary-color);
        color: white;
        padding: 12px 15px;
        text-align: right;
        font-weight: 500;
        font-size: 14px;
        position: sticky;
        top: 0;
    }

    :where(body.page-menu-itemsv1) .menu-table td {
        padding: 15px;
        text-align: right;
        background-color: var(--bg-primary);
        border-bottom: 1px solid var(--bg-secondary);
    }

    :where(body.page-menu-itemsv1) .menu-table tr:first-child td {
        border-top: 1px solid var(--bg-secondary);
    }

    :where(body.page-menu-itemsv1) .menu-table tr:hover td {
        background-color: rgba(var(--primary-light), 0.05);
    }

    /* انیمیشن برای ردیف‌های جدید */

    :where(body.page-menu-itemsv1) .menu-table tr.new-item {
        animation: fadeInRow 0.5s ease;
    }

    :where(body.page-menu-itemsv1) .menu-table tr.removing-item {
        animation: fadeOutRow 0.3s ease;
    }

    /* استایل دکمه‌ها */
    :where(body.page-menu-itemsv1) .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 10px 20px;
        border-radius: var(--border-radius);
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: var(--transition);
        text-decoration: none;
        border: none;
        outline: none;
        gap: 8px;
    }

    :where(body.page-menu-itemsv1) .btn-primary {
        background-color: var(--primary-color);
        color: white;
        box-shadow: var(--shadow-sm);
    }

    :where(body.page-menu-itemsv1) .btn-primary:hover {
        background-color: var(--primary-dark);
        box-shadow: var(--shadow-md);
    }

    :where(body.page-menu-itemsv1) .btn-outline {
        background-color: transparent;
        border: 1px solid var(--primary-color);
        color: var(--primary-color);
    }

    :where(body.page-menu-itemsv1) .btn-outline:hover {
        background-color: rgba(var(--primary-light), 0.1);
    }

    :where(body.page-menu-itemsv1) .btn-danger {
        background-color: var(--danger-color);
        color: white;
    }

    :where(body.page-menu-itemsv1) .btn-danger:hover {
        background-color: #c0392b;
    }

    :where(body.page-menu-itemsv1) .btn-success {
        background-color: var(--success-color);
        color: white;
    }

    :where(body.page-menu-itemsv1) .btn-success:hover {
        background-color: #00a884;
    }

    :where(body.page-menu-itemsv1) .btn-sm {
        padding: 8px 15px;
        font-size: 13px;
    }

    /* استایل مودال - بهبود یافته */
    :where(body.page-menu-itemsv1) .modal {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.6);
        display: none;
        align-items: center;
        justify-content: center;
        z-index: 10000;
        padding: 20px;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    :where(body.page-menu-itemsv1) .modal.active {
        display: flex;
        opacity: 1;
        animation: modalFadeIn 0.3s ease;
    }

    :where(body.page-menu-itemsv1) .modal-content {
        background-color: var(--bg-primary);
        border-radius: var(--border-radius);
        box-shadow: var(--shadow-lg);
        width: 100%;
        max-width: 500px;
        max-height: 90vh;
        overflow-y: auto;
        position: relative;
        transform: translateY(-20px);
        transition: transform 0.3s ease;
    }

    :where(body.page-menu-itemsv1) .modal.active .modal-content {
        transform: translateY(0);
    }

    @keyframes modalFadeIn {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }

    :where(body.page-menu-itemsv1) .modal-header {
        padding: 20px;
        border-bottom: 1px solid var(--bg-secondary);
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    :where(body.page-menu-itemsv1) .modal-title {
        font-size: 18px;
        font-weight: 600;
        color: var(--text-primary);
    }

    :where(body.page-menu-itemsv1) .modal-close {
        background: none;
        border: none;
        font-size: 24px;
        cursor: pointer;
        color: var(--text-secondary);
        transition: var(--transition);
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
    }

    :where(body.page-menu-itemsv1) .modal-close:hover {
        background-color: var(--bg-secondary);
        color: var(--danger-color);
    }

    :where(body.page-menu-itemsv1) .modal-body {
        padding: 20px;
    }

    :where(body.page-menu-itemsv1) .modal-footer {
        padding: 20px;
        border-top: 1px solid var(--bg-secondary);
        display: flex;
        justify-content: flex-end;
        gap: 10px;
    }

    /* استایل فرم */
    :where(body.page-menu-itemsv1) .form-group {
        margin-bottom: 20px;
    }

    :where(body.page-menu-itemsv1) .form-label {
        display: block;
        margin-bottom: 8px;
        font-weight: 500;
        color: var(--text-primary);
    }

    :where(body.page-menu-itemsv1) .form-control {
        width: 100%;
        padding: 12px 15px;
        border: 1px solid var(--bg-secondary);
        border-radius: var(--border-radius);
        background-color: var(--bg-primary);
        color: var(--text-primary);
        transition: var(--transition);
        font-size: 14px;
        font-family: inherit;
    }

    :where(body.page-menu-itemsv1) .form-control:focus {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 3px rgba(var(--primary-light), 0.2);
        outline: none;
    }

    /* استایل آپلود فایل */
    :where(body.page-menu-itemsv1) .file-upload {
        position: relative;
        display: inline-block;
        width: 100%;
    }

    :where(body.page-menu-itemsv1) .file-upload-input {
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
        width: 100%;
        height: 100%;
        cursor: pointer;
    }

    :where(body.page-menu-itemsv1) .file-upload-label {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 30px;
        border: 2px dashed var(--bg-secondary);
        border-radius: var(--border-radius);
        background-color: var(--bg-primary);
        text-align: center;
        cursor: pointer;
        transition: var(--transition);
    }

    :where(body.page-menu-itemsv1) .file-upload-label:hover {
        border-color: var(--primary-color);
        background-color: rgba(var(--primary-light), 0.05);
    }

    :where(body.page-menu-itemsv1) .file-upload-icon {
        font-size: 40px;
        color: var(--primary-color);
        margin-bottom: 10px;
    }

    :where(body.page-menu-itemsv1) .file-upload-text {
        color: var(--text-secondary);
        font-size: 14px;
    }

    /* استایل‌های سفارشی */
    :where(body.page-menu-itemsv1) .section-title {
        font-size: 24px;
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: 20px;
    }

    :where(body.page-menu-itemsv1) .help-link {
        color: var(--success-color);
        font-size: 14px;
        margin-right: 15px;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        text-decoration: none;
    }

    :where(body.page-menu-itemsv1) .help-link:hover {
        text-decoration: underline;
    }

    :where(body.page-menu-itemsv1) .divider {
        height: 2px;
        background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
        margin: 25px 0;
        border: none;
    }

    :where(body.page-menu-itemsv1) .empty-state {
        text-align: center;
        padding: 40px 20px;
        background-color: var(--bg-primary);
        border-radius: var(--border-radius);
        box-shadow: var(--shadow-sm);
    }

    :where(body.page-menu-itemsv1) .empty-state-icon {
        font-size: 48px;
        color: var(--text-light);
        margin-bottom: 15px;
    }

    :where(body.page-menu-itemsv1) .empty-state-text {
        color: var(--text-secondary);
        font-size: 16px;
        margin-bottom: 15px;
    }

    :where(body.page-menu-itemsv1) .menu-image {
        width: 50px;
        height: 50px;
        object-fit: cover;
        border-radius: 8px;
        transition: var(--transition);
        cursor: pointer;
    }

    :where(body.page-menu-itemsv1) .menu-image:hover {
        transform: scale(1.05);
        box-shadow: var(--shadow-sm);
    }

    :where(body.page-menu-itemsv1) .menu-name {
        color: var(--primary-color);
        font-weight: 500;
        cursor: pointer;
        transition: var(--transition);
        text-decoration: none;
        border: none;
        background: none;
        font-size: 14px;
        text-align: right;
        display: inline;
    }

    :where(body.page-menu-itemsv1) .menu-name:hover {
        color: var(--primary-dark);
        text-decoration: underline;
    }

    :where(body.page-menu-itemsv1) .action-icon {
        font-size: 18px;
        cursor: pointer;
        transition: var(--transition);
        padding: 8px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
    }

    :where(body.page-menu-itemsv1) .edit-icon {
        color: var(--success-color);
    }

    :where(body.page-menu-itemsv1) .edit-icon:hover {
        background-color: rgba(var(--success-color), 0.1);
    }

    :where(body.page-menu-itemsv1) .delete-icon {
        color: var(--danger-color);
    }

    :where(body.page-menu-itemsv1) .delete-icon:hover {
        background-color: rgba(var(--danger-color), 0.1);
    }

    :where(body.page-menu-itemsv1) .loading-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 40px;
        text-align: center;
    }

    :where(body.page-menu-itemsv1) .loading-gif {
        width: 150px;
        height: 150px;
        object-fit: contain;
    }

    :where(body.page-menu-itemsv1) .loading-text {
        margin-top: 20px;
        color: var(--text-secondary);
    }

    /* استایل سوئیچ وضعیت */
    :where(body.page-menu-itemsv1) .switch {
        position: relative;
        display: inline-block;
        width: 60px;
        height: 30px;
    }

    :where(body.page-menu-itemsv1) .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    :where(body.page-menu-itemsv1) .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: var(--danger-color);
        transition: .4s;
        border-radius: 34px;
    }

    :where(body.page-menu-itemsv1) .slider:before {
        position: absolute;
        content: "";
        height: 22px;
        width: 22px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        transition: .4s;
        border-radius: 50%;
    }

    :where(body.page-menu-itemsv1) input:checked + .slider {
        background-color: var(--success-color);
    }

    :where(body.page-menu-itemsv1) input:checked + .slider:before {
        transform: translateX(30px);
    }

    :where(body.page-menu-itemsv1) .slider-text {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        font-size: 10px;
        font-weight: bold;
        color: white;
        width: 100%;
        text-align: center;
        pointer-events: none;
    }

    :where(body.page-menu-itemsv1) .slider-text-on {
        right: 10px;
        display: none;
    }

    :where(body.page-menu-itemsv1) .slider-text-off {
        left: 10px;
    }

    :where(body.page-menu-itemsv1) input:checked + .slider .slider-text-on {
        display: block;
    }

    :where(body.page-menu-itemsv1) input:checked + .slider .slider-text-off {
        display: none;
    }

    /* استایل پیش‌بارگذاری */
    :where(body.page-menu-itemsv1) #preloader-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--bg-primary);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 9999;
        transition: opacity 0.5s ease;
    }

    :where(body.page-menu-itemsv1) .preloader-gif {
        width: 200px;
        height: 200px;
        object-fit: contain;
    }

    :where(body.page-menu-itemsv1) .preloader-text {
        margin-top: 20px;
        color: var(--text-primary);
        font-weight: bold;
        text-align: center;
    }

    /* استایل بازگشت */
    :where(body.page-menu-itemsv1) .back-link {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        color: var(--primary-color);
        text-decoration: none;
        margin-bottom: 15px;
        transition: var(--transition);
    }

    :where(body.page-menu-itemsv1) .back-link:hover {
        color: var(--primary-dark);
        text-decoration: underline;
    }

    /* استایل منوی فعلی */
    :where(body.page-menu-itemsv1) .current-menu {
        font-size: 18px;
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: 20px;
        padding: 15px;
        background-color: var(--bg-primary);
        border-radius: var(--border-radius);
        box-shadow: var(--shadow-sm);
        text-align: center;
    }

    /* استایل نوتیفیکیشن */
    :where(body.page-menu-itemsv1) .toast-notification {
        position: fixed;
        bottom: 20px;
        right: 20px;
        padding: 15px 25px;
        border-radius: var(--border-radius);
        color: white;
        font-size: 14px;
        box-shadow: var(--shadow-lg);
        transform: translateY(100px);
        opacity: 0;
        transition: all 0.3s ease;
        z-index: 10001;
        max-width: 350px;
    }

    :where(body.page-menu-itemsv1) .toast-notification.show {
        transform: translateY(0);
        opacity: 1;
    }

    :where(body.page-menu-itemsv1) .toast-notification.success {
        background-color: var(--success-color);
    }

    :where(body.page-menu-itemsv1) .toast-notification.error {
        background-color: var(--danger-color);
    }

    /* استایل جستجو */
    :where(body.page-menu-itemsv1) .search-container {
        position: relative;
        margin-bottom: 20px;
        max-width: 500px;
        margin-right: auto;
        margin-left: auto;
    }

    :where(body.page-menu-itemsv1) .search-input {
        width: 100%;
        padding: 12px 45px 12px 15px;
        border: 1px solid var(--bg-secondary);
        border-radius: var(--border-radius);
        background-color: var(--bg-primary);
        color: var(--text-primary);
        transition: var(--transition);
        font-size: 14px;
        box-shadow: var(--shadow-sm);
    }

    :where(body.page-menu-itemsv1) .search-input:focus {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 3px rgba(var(--primary-light), 0.2);
        outline: none;
    }

    :where(body.page-menu-itemsv1) .search-icon {
        position: absolute;
        left: 15px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--text-secondary);
    }

    :where(body.page-menu-itemsv1) .search-loading {
        position: absolute;
        left: 15px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--primary-color);
        display: none;
    }

    :where(body.page-menu-itemsv1) .search-results-count {
        text-align: center;
        color: var(--text-secondary);
        margin-bottom: 15px;
        font-size: 14px;
        padding: 10px;
        background-color: rgba(var(--primary-light), 0.1);
        border-radius: var(--border-radius);
    }

    /* استایل برای نمایش دسته‌بندی در نتایج جستجو */
    :where(body.page-menu-itemsv1) .category-badge {
        display: inline-block;
        padding: 4px 8px;
        background-color: var(--primary-color);
        color: white;
        border-radius: 12px;
        font-size: 12px;
        font-weight: 500;
    }

    /* استایل برای حالت‌های مختلف نمایش */
    :where(body.page-menu-itemsv1) .search-mode-indicator {
        text-align: center;
        margin-bottom: 15px;
        padding: 10px;
        background-color: rgba(var(--primary-light), 0.1);
        border-radius: var(--border-radius);
        color: var(--primary-color);
        font-weight: 500;
    }

    /* استایل‌های جدید برای بهبود نمایش */
    :where(body.page-menu-itemsv1) .table-responsive {
        overflow-x: auto;
        border-radius: var(--border-radius);
        box-shadow: var(--shadow-sm);
    }

    :where(body.page-menu-itemsv1) .text-center {
        text-align: center;
    }

    :where(body.page-menu-itemsv1) .mt-3 {
        margin-top: 15px;
    }

    :where(body.page-menu-itemsv1) .action-buttons {
        display: flex;
        gap: 10px;
        justify-content: center;
    }

    :where(body.page-menu-itemsv1) .menu-image-wrapper {
        background: none;
        border: none;
        padding: 0;
        cursor: pointer;
    }

    /* استایل برای نمایش دسته‌بندی در نتایج جستجو */
    :where(body.page-menu-itemsv1) .search-category-badge {
        display: inline-block;
        padding: 4px 8px;
        background-color: var(--primary-color);
        color: white;
        border-radius: 12px;
        font-size: 12px;
        font-weight: 500;
        margin-top: 5px;
    }

    /* بهبود نمایش در موبایل */
    @media (max-width: 768px) {
        :where(body.page-menu-itemsv1) .menu-table th,
        :where(body.page-menu-itemsv1) .menu-table td {
            padding: 10px 8px;
            font-size: 13px;
        }
        
        :where(body.page-menu-itemsv1) .category-item {
            padding: 6px 12px;
            font-size: 13px;
        }
        
        :where(body.page-menu-itemsv1) .modal-content {
            margin: 10px;
            max-height: calc(100vh - 20px);
            max-width: calc(100vw - 20px);
        }
        
        :where(body.page-menu-itemsv1) .action-buttons {
            flex-direction: column;
            gap: 5px;
        }
        
        :where(body.page-menu-itemsv1) .modal-footer {
            flex-direction: column;
        }
        
        :where(body.page-menu-itemsv1) .modal-footer .btn {
            width: 100%;
            margin-bottom: 5px;
        }
    }

    /* جلوگیری از اسکرول بدن هنگامی که مودال باز است */
    body:where(.page-menu-itemsv1).modal-open {
        overflow: hidden;
    }

/* ==========================================================================
   PAGE: menu-products
   source: pages/menu-products.php
   ========================================================================== */
/* استایل‌های پایه */
    :where(body.page-menu-products) .category-table {
        width: 100%;
        border-collapse: collapse;
        margin: 20px 0;
        background-color: var(--bg-primary);
        border-radius: var(--border-radius);
        overflow: hidden;
        box-shadow: var(--shadow-sm);
    }
    
    :where(body.page-menu-products) .category-table th {
        background-color: var(--primary-color);
        color: white;
        padding: 15px;
        text-align: right;
        font-weight: 500;
        font-size: 14px;
    }
    
    :where(body.page-menu-products) .category-table td {
        padding: 15px;
        text-align: right;
        border-bottom: 1px solid var(--bg-secondary);
    }
    
    :where(body.page-menu-products) .category-table tr:hover td {
        background-color: rgba(var(--primary-light), 0.05);
    }
    
    :where(body.page-menu-products) .category-table tr:last-child td {
        border-bottom: none;
    }
    
    /* استایل دکمه‌ها */
    :where(body.page-menu-products) .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 8px 15px;
        border-radius: var(--border-radius);
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
        transition: var(--transition);
        text-decoration: none;
        border: none;
        outline: none;
        gap: 5px;
    }
    
    :where(body.page-menu-products) .btn-primary {
        background-color: var(--primary-color);
        color: white;
        box-shadow: var(--shadow-sm);
    }
    
    :where(body.page-menu-products) .btn-primary:hover {
        background-color: var(--primary-dark);
        box-shadow: var(--shadow-md);
    }
    
    :where(body.page-menu-products) .btn-outline {
        background-color: transparent;
        border: 1px solid var(--primary-color);
        color: var(--primary-color);
    }
    
    :where(body.page-menu-products) .btn-outline:hover {
        background-color: rgba(var(--primary-light), 0.1);
    }
    
    :where(body.page-menu-products) .btn-danger {
        background-color: var(--danger-color);
        color: white;
    }
    
    :where(body.page-menu-products) .btn-danger:hover {
        background-color: #c0392b;
    }
    
    :where(body.page-menu-products) .btn-success {
        background-color: var(--success-color);
        color: white;
    }
    
    :where(body.page-menu-products) .btn-success:hover {
        background-color: #00a884;
    }
    
    :where(body.page-menu-products) .btn-sm {
        padding: 6px 12px;
        font-size: 12px;
    }
    
    /* استایل مودال */
    :where(body.page-menu-products) .modal {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        visibility: hidden;
        transition: var(--transition);
        z-index: 1000;
        padding: 20px;
    }
    
    :where(body.page-menu-products) .modal.active {
        opacity: 1;
        visibility: visible;
    }
    
    :where(body.page-menu-products) .modal-content {
        background-color: var(--bg-primary);
        border-radius: var(--border-radius);
        box-shadow: var(--shadow-lg);
        width: 100%;
        max-width: 500px;
        max-height: 90vh;
        overflow-y: auto;
        position: relative;
        animation: modalFadeIn--menu-products 0.3s ease;
    }
    
    @keyframes modalFadeIn--menu-products {
        from {
            transform: translateY(-20px);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }
    
    :where(body.page-menu-products) .modal-header {
        padding: 20px;
        border-bottom: 1px solid var(--bg-secondary);
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    
    :where(body.page-menu-products) .modal-title {
        font-size: 18px;
        font-weight: 600;
        color: var(--text-primary);
    }
    
    :where(body.page-menu-products) .modal-close {
        background: none;
        border: none;
        font-size: 24px;
        cursor: pointer;
        color: var(--text-secondary);
        transition: var(--transition);
    }
    
    :where(body.page-menu-products) .modal-close:hover {
        color: var(--danger-color);
    }
    
    :where(body.page-menu-products) .modal-body {
        padding: 20px;
    }
    
    :where(body.page-menu-products) .modal-footer {
        padding: 20px;
        border-top: 1px solid var(--bg-secondary);
        display: flex;
        justify-content: flex-end;
        gap: 10px;
    }
    
    /* استایل فرم */
    :where(body.page-menu-products) .form-group {
        margin-bottom: 20px;
    }
    
    :where(body.page-menu-products) .form-label {
        display: block;
        margin-bottom: 8px;
        font-weight: 500;
        color: var(--text-primary);
    }
    
    :where(body.page-menu-products) .form-control {
        width: 100%;
        padding: 12px 15px;
        border: 1px solid var(--bg-secondary);
        border-radius: var(--border-radius);
        background-color: var(--bg-primary);
        color: var(--text-primary);
        transition: var(--transition);
        font-size: 14px;
    }
    
    :where(body.page-menu-products) .form-control:focus {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 3px rgba(var(--primary-light), 0.3);
        outline: none;
    }
    
    /* استایل آپلود فایل */
    :where(body.page-menu-products) .file-upload {
        position: relative;
        display: inline-block;
        width: 100%;
    }
    
    :where(body.page-menu-products) .file-upload-input {
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
        width: 100%;
        height: 100%;
        cursor: pointer;
    }
    
    :where(body.page-menu-products) .file-upload-label {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 30px;
        border: 2px dashed var(--bg-secondary);
        border-radius: var(--border-radius);
        background-color: var(--bg-primary);
        text-align: center;
        cursor: pointer;
        transition: var(--transition);
    }
    
    :where(body.page-menu-products) .file-upload-label:hover {
        border-color: var(--primary-color);
        background-color: rgba(var(--primary-light), 0.05);
    }
    
    :where(body.page-menu-products) .file-upload-icon {
        font-size: 40px;
        color: var(--primary-color);
        margin-bottom: 10px;
    }
    
    :where(body.page-menu-products) .file-upload-text {
        color: var(--text-secondary);
        font-size: 14px;
    }
    
    /* استایل‌های سفارشی */
    :where(body.page-menu-products) .section-title {
        font-size: 24px;
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: 20px;
    }
    
    :where(body.page-menu-products) .help-link {
        color: var(--success-color);
        font-size: 14px;
        margin-right: 15px;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 5px;
    }
    
    :where(body.page-menu-products) .divider {
        height: 2px;
        background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
        margin: 25px 0;
        border: none;
    }
    
    :where(body.page-menu-products) .empty-state {
        text-align: center;
        padding: 40px 20px;
        background-color: var(--bg-primary);
        border-radius: var(--border-radius);
        box-shadow: var(--shadow-sm);
    }
    
    :where(body.page-menu-products) .empty-state-icon {
        font-size: 48px;
        color: var(--text-light);
        margin-bottom: 15px;
    }
    
    :where(body.page-menu-products) .empty-state-text {
        color: var(--text-secondary);
        font-size: 16px;
    }
    
    :where(body.page-menu-products) .category-image {
        width: 60px;
        height: 60px;
        object-fit: cover;
        border-radius: 8px;
        transition: var(--transition);
    }
    
    :where(body.page-menu-products) .category-image:hover {
        transform: scale(1.1);
        box-shadow: var(--shadow-sm);
    }
    
    :where(body.page-menu-products) .action-buttons {
        display: flex;
        gap: 8px;
        justify-content: center;
        flex-wrap: wrap;
    }
    
    :where(body.page-menu-products) .loading-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 40px;
        text-align: center;
    }
    
    :where(body.page-menu-products) .loading-gif {
        width: 150px;
        height: 150px;
        object-fit: contain;
    }
    
    :where(body.page-menu-products) .loading-text {
        margin-top: 20px;
        color: var(--text-secondary);
    }
    
    /* استایل پیش‌بارگذاری */
    :where(body.page-menu-products) #preloader-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--bg-primary);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 9999;
        transition: opacity 0.5s ease;
    }
    
    :where(body.page-menu-products) .preloader-gif {
        width: 200px;
        height: 200px;
        object-fit: contain;
    }
    
    :where(body.page-menu-products) .preloader-text {
        margin-top: 20px;
        color: var(--text-primary);
        font-weight: bold;
        text-align: center;
    }
    
    /* استایل نوتیفیکیشن */
    :where(body.page-menu-products) .toast-notification {
        position: fixed;
        bottom: 20px;
        right: 20px;
        padding: 15px 25px;
        border-radius: var(--border-radius);
        color: white;
        font-size: 14px;
        box-shadow: var(--shadow-lg);
        transform: translateY(100px);
        opacity: 0;
        transition: all 0.3s ease;
        z-index: 9999;
    }
    
    :where(body.page-menu-products) .toast-notification.show {
        transform: translateY(0);
        opacity: 1;
    }
    
    :where(body.page-menu-products) .toast-notification.success {
        background-color: var(--success-color);
    }
    
    :where(body.page-menu-products) .toast-notification.error {
        background-color: var(--danger-color);
    }

/* ==========================================================================
   PAGE: menu-template
   source: pages/menu-template.php
   ========================================================================== */
/* ===== LAYOUT ===== */
    :where(body.page-menu-template) .theme-manager-wrap {
        max-width: 1100px;
        margin: -25px;
        padding: 24px 16px;
        font-family: inherit;
    }

    /* ===== TABS ===== */
    :where(body.page-menu-template) .tm-card {
        background-color: var(--bg-primary);
        border-radius: var(--border-radius);
        box-shadow: var(--shadow-md);
        overflow: hidden;
        margin-bottom: 28px;
    }

    :where(body.page-menu-template) .tm-card-header {
        background-color: var(--primary-color);
        padding: 0 20px;
        display: flex;
        align-items: flex-end;
        gap: 4px;
    }

    :where(body.page-menu-template) .tm-tabs {
        list-style: none;
        display: flex;
        padding: 0;
        margin: 0;
        gap: 4px;
    }

    :where(body.page-menu-template) .tm-tab-btn {
        padding: 12px 22px;
        background: rgba(255,255,255,0.12);
        color: rgba(255,255,255,0.85);
        border: none;
        border-radius: 8px 8px 0 0;
        cursor: pointer;
        font-size: 0.92rem;
        font-weight: 500;
        transition: background 0.2s, color 0.2s;
        font-family: inherit;
    }

    :where(body.page-menu-template) .tm-tab-btn.active {
        background: var(--bg-primary);
        color: var(--primary-color);
        font-weight: 700;
    }

    :where(body.page-menu-template) .tm-tab-btn:not(.active):hover {
        background: rgba(255,255,255,0.22);
        color: #fff;
    }

    /* ===== ALERT ===== */
    :where(body.page-menu-template) .tm-alert {
        display: none;
        padding: 12px 16px;
        border-radius: var(--border-radius);
        margin-bottom: 20px;
        background-color: var(--warning-color);
        color: var(--text-primary);
        font-size: 0.9rem;
        border-right: 4px solid var(--primary-color);
    }

    :where(body.page-menu-template) .tm-alert.show { display: block; }

    /* ===== TAB CONTENT ===== */
    :where(body.page-menu-template) .tm-tab-content { padding: 24px 20px 20px; }

    :where(body.page-menu-template) .tm-pane { display: none; }
    :where(body.page-menu-template) .tm-pane.active { display: block; }

    /* ===== THEME GRID (2 columns) ===== */
    :where(body.page-menu-template) .tm-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }

    @media (max-width: 640px) {
        :where(body.page-menu-template) .tm-grid { grid-template-columns: 1fr; }
    }

    /* ===== THEME ROW CARD ===== */
    :where(body.page-menu-template) .tm-theme-card {
        display: flex;
        flex-direction: row;
        background: var(--bg-primary);
        border-radius: calc(var(--border-radius) + 2px);
        box-shadow: var(--shadow-sm);
        border: 2px solid #ddd;
        overflow: hidden;
        cursor: pointer;
        transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
        position: relative;
    }

    :where(body.page-menu-template) .tm-theme-card:hover {
        transform: translateY(-3px);
        box-shadow: var(--shadow-lg);
    }

    :where(body.page-menu-template) .tm-theme-card.selected {
        border-color: var(--primary-color);
    }

    :where(body.page-menu-template) .tm-theme-card.disabled {
        opacity: 0.48;
        cursor: not-allowed;
        pointer-events: none;
    }

    /* Preview image column */
    :where(body.page-menu-template) .tm-theme-preview {
        width: 110px;
        min-width: 110px;
        height: 100%;
        
        position: relative;
        overflow: hidden;
        background: var(--bg-secondary, #f0f0f0);
        flex-shrink: 0;
    }

    :where(body.page-menu-template) .tm-theme-preview img {
        width: 100%;
        height: 100%;
        object-fit: fixed;
        display: block;
        max-height: 120px;
    }

    /* Info column */
    :where(body.page-menu-template) .tm-theme-info {
        padding: 10px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        flex: 1;
        min-width: 0;
    }

    :where(body.page-menu-template) .tm-theme-name {
        font-size: 1rem;
        font-weight: 700;
        color: var(--primary-color);
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    :where(body.page-menu-template) .tm-theme-id {
        font-size: 0.78rem;
        color: var(--text-light, #999);
        font-family: monospace;
        background: var(--bg-secondary, #f5f5f5);
        display: inline-block;
        padding: 2px 7px;
        border-radius: 4px;
        width: fit-content;
    }

    :where(body.page-menu-template) .tm-theme-meta {
        font-size: 0.8rem;
        color: var(--text-secondary);
        margin: 0;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    :where(body.page-menu-template) .tm-theme-meta span {
        background: var(--bg-secondary, #f0f0f0);
        padding: 1px 8px;
        border-radius: 20px;
        font-size: 0.76rem;
    }

    :where(body.page-menu-template) .tm-theme-desc {
        font-size: 0.78rem;
        color: var(--text-secondary);
        line-height: 1.5;
        margin: 2px 0 0;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    :where(body.page-menu-template) .tm-active-badge {
        position: absolute;
        top: 8px;
        left: 8px;
        background: var(--success-color, #28a745);
        color: #fff;
        font-size: 0.7rem;
        font-weight: 700;
        padding: 3px 9px;
        border-radius: 20px;
        z-index: 2;
        box-shadow: 0 2px 6px rgba(0,0,0,0.18);
    }

    /* ===== CURRENT THEME BOX ===== */
    :where(body.page-menu-template) .tm-current-box {
        margin-top: 24px;
        border-top: 1px solid var(--border-color, #e0e0e0);
        padding-top: 20px;
    }

    :where(body.page-menu-template) .tm-current-title {
        text-align: center;
        font-size: 1rem;
        font-weight: 700;
        color: var(--primary-color);
        margin-bottom: 14px;
    }

    :where(body.page-menu-template) .tm-current-card {
        background: var(--bg-primary);
        border-radius: var(--border-radius);
        box-shadow: var(--shadow-sm);
        padding: 18px 20px;
        display: flex;
        align-items: center;
        gap: 16px;
    }

    :where(body.page-menu-template) .tm-current-img {
        width: 72px;
        height: 72px;
        object-fit: cover;
        border-radius: var(--border-radius);
        border: 2px solid var(--primary-color);
        flex-shrink: 0;
    }

    :where(body.page-menu-template) .tm-current-details { flex: 1; }

    :where(body.page-menu-template) .tm-current-details h5 {
        margin: 0 0 6px;
        font-size: 1.05rem;
        color: var(--primary-color);
    }

    :where(body.page-menu-template) .tm-current-details p {
        margin: 2px 0;
        font-size: 0.82rem;
        color: var(--text-secondary);
    }

    :where(body.page-menu-template) .tm-settings-btn {
        display: inline-block;
        margin-top: 8px;
        text-decoration: none;
        background: var(--primary-color);
        color: #fff;
        padding: 5px 14px;
        border-radius: 6px;
        font-size: 0.8rem;
        transition: opacity 0.2s;
    }

    :where(body.page-menu-template) .tm-settings-btn:hover { opacity: 0.85; }

    /* ===== SPINNER ===== */
    :where(body.page-menu-template) .tm-spinner {
        display: inline-block;
        width: 1rem;
        height: 1rem;
        border: 2px solid currentColor;
        border-right-color: transparent;
        border-radius: 50%;
        animation: tm-spin 0.75s linear infinite;
        margin-left: 8px;
    }

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

    /* Dark mode overrides */
    body:where(.page-menu-template).dark-mode .tm-theme-id,
    body:where(.page-menu-template).dark-mode .tm-theme-meta span {
        background: rgba(255,255,255,0.08);
    }

/* ==========================================================================
   PAGE: merchant-settings
   source: pages/merchant-settings.php
   ========================================================================== */
:where(body.page-merchant-settings) .container {
            max-width: 1000px;
            margin: 30px auto;
            background-color: var(--bg-primary);
            border-radius: var(--border-radius);
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }
        
        :where(body.page-merchant-settings) .tabs {
            display: flex;
            background-color: var(--bg-secondary);
            overflow-x: auto;
            white-space: nowrap;
        }
        
        :where(body.page-merchant-settings) .tab-btn {
            flex: 1;
            min-width: 120px;
            padding: 15px;
            text-align: center;
            cursor: pointer;
            border: none;
            background: none;
            font-weight: 600;
            color: var(--text-secondary);
            transition: var(--transition);
            border-bottom: 3px solid transparent;
        }
        
        :where(body.page-merchant-settings) .tab-btn.active {
            color: var(--primary-color);
            border-bottom: 3px solid var(--primary-color);
            background-color: var(--bg-primary);
        }
        
        :where(body.page-merchant-settings) .tab-content {
            padding: 30px;
            display: none;
        }
        
        :where(body.page-merchant-settings) .tab-content.active {
            display: block;
        }
        
        :where(body.page-merchant-settings) .section-title {
            text-align: center;
            margin-bottom: 20px;
            color: var(--primary-dark);
        }
        
        :where(body.page-merchant-settings) .payment-method {
            margin-bottom: 30px;
        }
        
        :where(body.page-merchant-settings) .method-title {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }
        
        :where(body.page-merchant-settings) .method-icon {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            margin-left: 10px;
            font-size: 20px;
            color: white;
        }
        
        :where(body.page-merchant-settings) .zarinpal-icon { background-color: var(--zarinpal-color); }
        :where(body.page-merchant-settings) .enamad-icon { background-color: var(--enamad-color); }
        :where(body.page-merchant-settings) .payping-icon { background-color: var(--payping-color); }
        :where(body.page-merchant-settings) .saman-icon { background-color: var(--saman-color); }
        :where(body.page-merchant-settings) .mellat-icon { background-color: var(--mellat-color); }
        :where(body.page-merchant-settings) .asanpardakht-icon { background-color: var(--asanpardakht-color); }
        :where(body.page-merchant-settings) .sep-icon { background-color: var(--sep-color); }
        
        :where(body.page-merchant-settings) .form-group {
            margin-bottom: 20px;
        }
        
        :where(body.page-merchant-settings) .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: var(--text-secondary);
        }
        
        :where(body.page-merchant-settings) .form-control {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: var(--border-radius);
            transition: var(--transition);
        }
        
        :where(body.page-merchant-settings) .form-control:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 2px rgba(240, 106, 0, 0.2);
        }
        
        :where(body.page-merchant-settings) textarea.form-control {
            min-height: 100px;
            resize: vertical;
        }
        
        :where(body.page-merchant-settings) .submit-btn {
            background-color: var(--primary-color);
            color: white;
            border: none;
            padding: 12px 25px;
            border-radius: var(--border-radius);
            cursor: pointer;
            font-weight: 600;
            transition: var(--transition);
            display: block;
            margin: 20px auto 0;
        }
        
        :where(body.page-merchant-settings) .submit-btn:hover {
            background-color: var(--primary-dark);
        }
        
        :where(body.page-merchant-settings) .spinner {
            display: none;
            width: 40px;
            height: 40px;
            margin: 20px auto;
            border: 4px solid var(--primary-light);
            border-radius: 50%;
            border-top: 4px solid var(--primary-color);
            animation: spin--merchant-settings 1s linear infinite;
        }
        
        @keyframes spin--merchant-settings {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        :where(body.page-merchant-settings) .popup-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            opacity: 0;
            visibility: hidden;
            transition: var(--transition);
        }
        
        :where(body.page-merchant-settings) .popup-overlay.active {
            opacity: 1;
            visibility: visible;
        }
        
        :where(body.page-merchant-settings) .popup {
            background-color: var(--bg-primary);
            border-radius: var(--border-radius);
            box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
            width: 90%;
            max-width: 400px;
            padding: 25px;
            text-align: center;
            transform: translateY(20px);
            transition: var(--transition);
        }
        
        :where(body.page-merchant-settings) .popup-overlay.active .popup {
            transform: translateY(0);
        }
        
        :where(body.page-merchant-settings) .popup-icon {
            font-size: 48px;
            margin-bottom: 20px;
        }
        
        :where(body.page-merchant-settings) .popup-icon.success {
            color: var(--success-color);
        }
        
        :where(body.page-merchant-settings) .popup-icon.error {
            color: var(--danger-color);
        }
        
        :where(body.page-merchant-settings) .popup-title {
            font-size: 20px;
            margin-bottom: 15px;
        }
        
        :where(body.page-merchant-settings) .popup-message {
            color: var(--text-secondary);
            margin-bottom: 20px;
            line-height: 1.6;
        }
        
        :where(body.page-merchant-settings) .popup-btn {
            background-color: var(--primary-color);
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: var(--border-radius);
            cursor: pointer;
            font-weight: 600;
            transition: var(--transition);
        }
        
        :where(body.page-merchant-settings) .popup-btn:hover {
            background-color: var(--primary-dark);
        }
        
        :where(body.page-merchant-settings) .info-box {
            background-color: var(--bg-secondary);
            padding: 15px;
            border-radius: var(--border-radius);
            margin-bottom: 20px;
            font-size: 14px;
            color: var(--text-secondary);
            border-right: 3px solid var(--primary-light);
        }

/* ==========================================================================
   PAGE: oes
   source: pages/oes.php
   ========================================================================== */
/* ══ OES PANEL — سازگار با CSS اصلی ══ */
body:where(.page-oes) {
  --oes-accent:    var(--primary-color,    #f06a00);
  --oes-accent-d:  var(--primary-dark,     #d65a00);
  --oes-green:     var(--success-color,    #00b894);
  --oes-red:       var(--danger-color,     #d63031);
  --oes-blue:      var(--info-color,       #0984e3);
  --oes-yellow:    var(--warning-color,    #fdcb6e);
  --oes-bg:        var(--bg-secondary,     #f5f6fa);
  --oes-surface:   var(--bg-primary,       #ffffff);
  --oes-surface2:  var(--bg-secondary,     #f5f6fa);
  --oes-border:    rgba(0,0,0,0.08);
  --oes-text:      var(--text-primary,     #2d3436);
  --oes-muted:     var(--text-secondary,   #636e72);
  --oes-radius:    var(--border-radius,    12px);
  --oes-r-sm:      8px;
}

/* Dark mode از کلاس اصلی */
:where(body.page-oes) .dark-mode {
  --oes-border: rgba(255,255,255,0.08);
}

/* ══ TABS ══ */
:where(body.page-oes) .oes-tabs {
  display:flex;
  background:var(--oes-surface);
  border-bottom:1px solid var(--oes-border);
  position:sticky;
  top:var(--header-height, 90px);
  z-index:200;
}
:where(body.page-oes) .tab-btn {
  flex:1;padding:10px 0;border:none;background:none;
  color:var(--oes-muted);font-family:'vazir',sans-serif;font-size:0.78rem;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  gap:4px;border-bottom:2px solid transparent;transition:all 0.15s;
}
:where(body.page-oes) .tab-btn.active {
  color:var(--oes-accent);
  border-bottom-color:var(--oes-accent);
  background:rgba(240, 106, 0,0.05);
}
:where(body.page-oes) .tab-badge {
  background:var(--oes-accent);color:white;font-size:0.68rem;
  padding:1px 6px;border-radius:20px;font-weight:700;
  min-width:18px;text-align:center;
}

/* ══ CONTENT ══ */
:where(body.page-oes) .oes-content { padding:1rem; }
:where(body.page-oes) .tab-panel   { display:none; animation:fadeIn--oes 0.2s ease; }
:where(body.page-oes) .tab-panel.active { display:block; }
@keyframes fadeIn--oes { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:translateY(0)} }

/* ══ ORDER TYPE ══ */
:where(body.page-oes) .order-type-row {
  display:grid;grid-template-columns:1fr 1fr;
  gap:.75rem;margin-bottom:1rem;
}
:where(body.page-oes) .order-type-card {
  padding:.6rem;border:2px solid var(--oes-border);
  border-radius:var(--oes-radius);background:var(--oes-surface2);
  cursor:pointer;text-align:center;transition:all .2s;
  display:flex;flex-direction:column;align-items:center;
  gap:.4rem;font-size:.82rem;color:var(--oes-muted);
}
:where(body.page-oes) .order-type-card:hover  { border-color:var(--oes-accent); color:var(--oes-accent); }
:where(body.page-oes) .order-type-card.selected {
  border-color:var(--oes-accent);
  background:rgba(240, 106, 0,.1);
  color:var(--oes-accent);font-weight:700;
}
:where(body.page-oes) .order-type-card .ot-icon { font-size:1.6rem; }

/* ══ CUSTOMER SEARCH ══ */
:where(body.page-oes) .customer-box {
  background:var(--oes-surface);border:1px solid var(--oes-border);
  border-radius:var(--oes-radius);padding:1rem;margin-bottom:1rem;
}
:where(body.page-oes) .cust-search-wrap { position:relative; }
:where(body.page-oes) .cust-input {
  width:100%;background:var(--oes-surface2);
  border:1.5px solid var(--oes-border);border-radius:var(--oes-r-sm);
  color:var(--oes-text);font-family:'vazir',sans-serif;font-size:.85rem;
  padding:.6rem .9rem;outline:none;transition:border-color .15s;
}
:where(body.page-oes) .cust-input:focus { border-color:rgba(240, 106, 0,.5); }
:where(body.page-oes) .cust-results {
  position:absolute;top:calc(100% + 4px);right:0;left:0;
  background:var(--oes-surface);border:1.5px solid var(--oes-border);
  border-radius:var(--oes-r-sm);z-index:500;max-height:240px;
  overflow-y:auto;box-shadow:0 8px 24px rgba(0,0,0,.14);display:none;
}
:where(body.page-oes) .cust-results.open { display:block; }
:where(body.page-oes) .cust-result-item {
  padding:.65rem 1rem;cursor:pointer;font-size:.82rem;
  border-bottom:1px solid var(--oes-border);transition:background .12s;
}
:where(body.page-oes) .cust-result-item:last-child { border-bottom:none; }
:where(body.page-oes) .cust-result-item:hover { background:rgba(240, 106, 0,.07); }
:where(body.page-oes) .cust-result-name  { font-weight:700;color:var(--oes-text); }
:where(body.page-oes) .cust-result-sub   { color:var(--oes-muted);font-size:.75rem;margin-top:2px; }
:where(body.page-oes) .selected-customer {
  background:rgba(240, 106, 0,.08);
  border:1.5px solid rgba(240, 106, 0,.3);
  border-radius:var(--oes-r-sm);padding:.6rem .9rem;
  font-size:.82rem;display:flex;align-items:center;
  justify-content:space-between;
}
:where(body.page-oes) .selected-customer .sc-name  { font-weight:700;color:var(--oes-accent); }
:where(body.page-oes) .selected-customer .sc-clear {
  background:none;border:none;color:var(--oes-muted);cursor:pointer;font-size:1rem;
}

/* ══ FORM ══ */
:where(body.page-oes) .oes-form-group { margin-bottom:.85rem; }
:where(body.page-oes) .oes-form-label {
  display:block;font-size:.78rem;color:var(--oes-muted);
  font-weight:600;margin-bottom:4px;
}
:where(body.page-oes) .oes-form-input {
  width:100%;background:var(--oes-surface2);
  border:1.5px solid var(--oes-border);border-radius:var(--oes-r-sm);
  color:var(--oes-text);font-family:'vazir',sans-serif;font-size:.85rem;
  padding:.6rem .9rem;outline:none;transition:border-color .15s;
}
:where(body.page-oes) .oes-form-input:focus        { border-color:rgba(240, 106, 0,.5); }
:where(body.page-oes) .oes-form-input::placeholder { color:var(--oes-muted); }

/* ══ MENU PANEL ══ */
:where(body.page-oes) .menu-panel {
  background:var(--oes-surface);border:1px solid var(--oes-border);
  border-radius:var(--oes-radius);overflow:hidden;margin-bottom:5rem;
}
:where(body.page-oes) .panel-head {
  padding:.65rem 1rem;border-bottom:1px solid var(--oes-border);
  font-size:.8rem;font-weight:700;color:var(--oes-muted);
  display:flex;align-items:center;justify-content:space-between;
}
:where(body.page-oes) .cat-scroll {
  display:flex;gap:6px;padding:.55rem 1rem;overflow-x:auto;
  border-bottom:1px solid var(--oes-border);scrollbar-width:none;
}
:where(body.page-oes) .cat-scroll::-webkit-scrollbar { display:none; }
:where(body.page-oes) .cat-chip {
  flex-shrink:0;padding:4px 12px;border-radius:20px;
  border:1px solid var(--oes-border);background:var(--oes-surface2);
  color:var(--oes-muted);font-family:'vazir',sans-serif;font-size:.78rem;
  cursor:pointer;transition:all .15s;
}
:where(body.page-oes) .cat-chip.active {
  background:rgba(240, 106, 0,.15);
  border-color:var(--oes-accent);color:var(--oes-accent);
}
:where(body.page-oes) .products-grid {
  display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));
  gap:8px;padding:.75rem;
}
:where(body.page-oes) .product-card {
  background:var(--oes-surface2);border:1px solid var(--oes-border);
  border-radius:var(--oes-r-sm);padding:10px;cursor:pointer;
  transition:all .15s;display:flex;flex-direction:column;gap:4px;
}
:where(body.page-oes) .product-card:hover {
  border-color:var(--oes-accent);transform:translateY(-1px);
  box-shadow:0 4px 14px rgba(240, 106, 0,.15);
}
:where(body.page-oes) .product-card:active { transform:scale(.97); }
:where(body.page-oes) .product-name  { font-size:.8rem;font-weight:600;line-height:1.3;color:var(--oes-text); }
:where(body.page-oes) .product-price { font-size:.75rem;color:var(--oes-accent);font-weight:700;margin-top:auto; }
:where(body.page-oes) .product-plus  {
  width:24px;height:24px;border-radius:50%;
  background:rgba(240, 106, 0,.15);color:var(--oes-accent);
  border:none;display:flex;align-items:center;justify-content:center;
  font-size:1rem;margin-right:auto;cursor:pointer;
}
:where(body.page-oes) .product-plus:hover { background:var(--oes-accent);color:white; }
:where(body.page-oes) .skeleton {
  background:linear-gradient(90deg,var(--oes-surface2) 25%,var(--oes-surface) 50%,var(--oes-surface2) 75%);
  background-size:200% 100%;animation:shimmer--oes 1.5s infinite;
  border-radius:6px;height:60px;
}
@keyframes shimmer--oes { to{background-position:-200% 0} }

/* ══ FLOATING CART ══ */
:where(body.page-oes) .cart-fab {
  position:fixed;bottom:1.5rem;right:1rem;
  background:linear-gradient(135deg,var(--oes-accent),var(--oes-accent-d));
  color:#fff;border:none;border-radius:50px;
  padding:.7rem 1.2rem .7rem 1rem;
  font-family:'vazir',sans-serif;font-size:.88rem;font-weight:700;
  cursor:pointer;display:flex;align-items:center;gap:.55rem;
  box-shadow:0 6px 22px rgba(240, 106, 0,.45);
  transform:translateY(100px);opacity:0;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1),opacity .3s;
  z-index:800;
}
:where(body.page-oes) .cart-fab.visible { transform:translateY(0);opacity:1; }
:where(body.page-oes) .cart-fab .cart-count {
  background:#fff;color:var(--oes-accent);border-radius:20px;
  font-size:.72rem;font-weight:800;padding:1px 7px;
  min-width:20px;text-align:center;
}

/* ══ CART SHEET ══ */
:where(body.page-oes) .oes-overlay {
  position:fixed;inset:0;background:rgba(0,0,0,.55);
  z-index:9000;display:none;align-items:flex-end;justify-content:center;
}
:where(body.page-oes) .oes-overlay.open { display:flex; }
:where(body.page-oes) .sheet {
  background:var(--oes-surface);border-radius:22px 22px 0 0;
  border-top:1px solid var(--oes-border);width:100%;max-width:560px;
  max-height:92vh;display:flex;flex-direction:column;
  animation:sheetUp .3s cubic-bezier(.34,1.2,.64,1);
}
@keyframes sheetUp { from{transform:translateY(100%)} to{transform:translateY(0)} }
:where(body.page-oes) .sheet-handle {
  width:36px;height:4px;background:var(--oes-border);
  border-radius:2px;margin:.85rem auto .6rem;
}
:where(body.page-oes) .sheet-head {
  padding:.6rem 1rem .7rem;border-bottom:1px solid var(--oes-border);
  display:flex;align-items:center;justify-content:space-between;
}
:where(body.page-oes) .sheet-head h3 { font-size:.95rem;font-weight:700; }
:where(body.page-oes) .sheet-body { flex:1;overflow-y:auto;padding:.75rem 1rem; }
:where(body.page-oes) .sheet-foot { padding:.75rem 1rem;border-top:1px solid var(--oes-border); }
:where(body.page-oes) .cart-empty {
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:2rem;gap:8px;
  color:var(--oes-muted);font-size:.82rem;
}
:where(body.page-oes) .cart-empty i { font-size:2.5rem;opacity:.3; }
:where(body.page-oes) .cart-item {
  display:flex;align-items:center;gap:8px;padding:8px 0;
  border-bottom:1px solid var(--oes-border);
}
:where(body.page-oes) .cart-item:last-child { border-bottom:none; }
:where(body.page-oes) .cart-item-name  { flex:1;font-size:.82rem;line-height:1.3; }
:where(body.page-oes) .qty-ctrl {
  display:flex;align-items:center;gap:4px;
  background:var(--oes-surface2);border-radius:20px;padding:2px;
}
:where(body.page-oes) .qty-btn {
  width:24px;height:24px;border:none;background:none;
  color:var(--oes-muted);cursor:pointer;border-radius:50%;
  font-size:1.1rem;line-height:1;display:flex;align-items:center;
  justify-content:center;transition:all .12s;
}
:where(body.page-oes) .qty-btn:hover { background:var(--oes-accent);color:white; }
:where(body.page-oes) .qty-num { width:22px;text-align:center;font-size:.82rem;font-weight:700; }
:where(body.page-oes) .cart-item-price-input {
  width:72px;background:var(--oes-surface2);
  border:1.5px solid var(--oes-border);border-radius:var(--oes-r-sm);
  color:var(--oes-accent);font-family:'vazir',sans-serif;
  font-size:.78rem;font-weight:600;padding:2px 5px;outline:none;
  direction:ltr;text-align:right;transition:border-color .15s;
}
:where(body.page-oes) .cart-item-price-input:focus { border-color:var(--oes-accent); }
:where(body.page-oes) .price-edited-dot {
  width:6px;height:6px;background:var(--oes-yellow);
  border-radius:50%;flex-shrink:0;display:inline-block;margin-left:2px;
}
:where(body.page-oes) .fare-row { display:flex;align-items:center;gap:.5rem;margin-bottom:.6rem; }
:where(body.page-oes) .fare-row label { font-size:.78rem;color:var(--oes-muted);white-space:nowrap; }
:where(body.page-oes) .fare-input {
  flex:1;background:var(--oes-surface2);border:1.5px solid var(--oes-border);
  border-radius:var(--oes-r-sm);color:var(--oes-text);font-family:'vazir',sans-serif;
  font-size:.85rem;padding:.45rem .7rem;outline:none;direction:ltr;text-align:right;
}
:where(body.page-oes) .fare-input:focus { border-color:rgba(240, 106, 0,.5); }
:where(body.page-oes) .notes-input {
  width:100%;background:var(--oes-surface2);border:1px solid var(--oes-border);
  border-radius:var(--oes-r-sm);color:var(--oes-text);font-family:'vazir',sans-serif;
  font-size:.8rem;padding:7px 10px;resize:none;outline:none;
  transition:border-color .15s;margin-bottom:.6rem;
}
:where(body.page-oes) .notes-input:focus        { border-color:rgba(240, 106, 0,.4); }
:where(body.page-oes) .notes-input::placeholder { color:var(--oes-muted); }
:where(body.page-oes) .discount-section {
  margin-top:.6rem;padding:.55rem .8rem;
  background:rgba(0,184,148,.06);
  border:1px solid rgba(0,184,148,.2);border-radius:var(--oes-r-sm);
}
:where(body.page-oes) .discount-row { display:flex;align-items:center;gap:6px;margin-bottom:4px; }
:where(body.page-oes) .discount-type-select {
  background:var(--oes-surface2);border:1.5px solid var(--oes-border);
  border-radius:var(--oes-r-sm);color:var(--oes-text);
  font-family:'vazir',sans-serif;font-size:.78rem;padding:3px 6px;
  outline:none;cursor:pointer;flex-shrink:0;
}
:where(body.page-oes) .discount-value-input {
  flex:1;background:var(--oes-surface2);border:1.5px solid var(--oes-border);
  border-radius:var(--oes-r-sm);color:var(--oes-text);
  font-family:'vazir',sans-serif;font-size:.82rem;padding:3px 8px;
  outline:none;direction:ltr;text-align:right;min-width:0;
}
:where(body.page-oes) .discount-value-input:focus { border-color:rgba(0,184,148,.5); }
:where(body.page-oes) .discount-clear-btn {
  width:22px;height:22px;border:none;background:none;
  color:var(--oes-muted);cursor:pointer;font-size:.9rem;
  display:flex;align-items:center;justify-content:center;border-radius:4px;
}
:where(body.page-oes) .discount-clear-btn:hover { color:var(--oes-red); }
:where(body.page-oes) .discount-summary    { font-size:.74rem;color:var(--oes-muted); }
:where(body.page-oes) .discount-amount-label { color:var(--oes-green);font-weight:700; }
:where(body.page-oes) .total-row {
  display:flex;justify-content:space-between;align-items:center;
  font-size:.85rem;margin-bottom:.6rem;
}
:where(body.page-oes) .total-amount { color:var(--oes-accent);font-weight:700;font-size:1rem; }
:where(body.page-oes) .btn-submit {
  width:100%;padding:.65rem;
  background:linear-gradient(135deg,var(--oes-accent),var(--oes-accent-d));
  border:none;border-radius:var(--oes-r-sm);color:white;
  font-family:'vazir',sans-serif;font-size:.88rem;font-weight:700;
  cursor:pointer;transition:all .15s;
  display:flex;align-items:center;justify-content:center;gap:6px;
}
:where(body.page-oes) .btn-submit:hover:not(:disabled) { opacity:.9; }
:where(body.page-oes) .btn-submit:disabled { opacity:.5;cursor:not-allowed; }

/* ══ ORDERS LIST ══ */
:where(body.page-oes) .orders-header {
  display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;
}
:where(body.page-oes) .refresh-btn {
  padding:6px 14px;background:var(--oes-surface2);
  border:1px solid var(--oes-border);border-radius:var(--oes-r-sm);
  color:var(--oes-muted);font-family:'vazir',sans-serif;font-size:.78rem;
  cursor:pointer;display:flex;align-items:center;gap:5px;
}
:where(body.page-oes) .refresh-btn:hover { color:var(--oes-text); }
:where(body.page-oes) .order-card {
  background:var(--oes-surface);border:1px solid var(--oes-border);
  border-radius:var(--oes-radius);padding:1rem;margin-bottom:.75rem;
}
:where(body.page-oes) .order-card-head {
  display:flex;align-items:center;justify-content:space-between;margin-bottom:.6rem;
}
:where(body.page-oes) .order-inv   { font-size:.78rem;color:var(--oes-muted);font-family:monospace; }
:where(body.page-oes) .status-badge { padding:3px 10px;border-radius:20px;font-size:.72rem;font-weight:700; }
:where(body.page-oes) .status-pending   { background:rgba(253,203,110,.15);color:#e6a817;border:1px solid rgba(253,203,110,.3); }
:where(body.page-oes) .status-confirmed { background:rgba(9,132,227,.15);color:var(--oes-blue);border:1px solid rgba(9,132,227,.3); }
:where(body.page-oes) .status-served    { background:rgba(0,184,148,.15);color:var(--oes-green);border:1px solid rgba(0,184,148,.3); }
:where(body.page-oes) .status-cancelled { background:rgba(214,48,49,.12);color:var(--oes-red);border:1px solid rgba(214,48,49,.25); }
:where(body.page-oes) .order-meta {
  display:flex;gap:10px;margin-bottom:.5rem;
  font-size:.78rem;color:var(--oes-muted);flex-wrap:wrap;
}
:where(body.page-oes) .order-meta span { display:flex;align-items:center;gap:3px; }
:where(body.page-oes) .order-items-list {
  font-size:.78rem;color:var(--oes-muted);margin-bottom:.5rem;
  line-height:1.8;border-top:1px solid var(--oes-border);padding-top:.5rem;
}
:where(body.page-oes) .order-total {
  display:flex;justify-content:space-between;align-items:center;font-size:.82rem;
}
:where(body.page-oes) .order-total-amount { color:var(--oes-accent);font-weight:700; }
:where(body.page-oes) .order-actions      { display:flex;gap:6px; }
:where(body.page-oes) .btn-cancel-order {
  padding:4px 10px;background:rgba(214,48,49,.1);
  border:1px solid rgba(214,48,49,.25);border-radius:var(--oes-r-sm);
  color:var(--oes-red);font-family:'vazir',sans-serif;font-size:.75rem;cursor:pointer;
}
:where(body.page-oes) .btn-cancel-order:hover { background:rgba(214,48,49,.2); }
:where(body.page-oes) .btn-edit-order {
  padding:4px 10px;background:rgba(9,132,227,.1);
  border:1px solid rgba(9,132,227,.25);border-radius:var(--oes-r-sm);
  color:var(--oes-blue);font-family:'vazir',sans-serif;font-size:.75rem;
  cursor:pointer;display:flex;align-items:center;gap:3px;
}
:where(body.page-oes) .btn-edit-order:hover { background:rgba(9,132,227,.2); }
:where(body.page-oes) .order-type-pill { font-size:.7rem;padding:2px 8px;border-radius:20px;font-weight:600; }
:where(body.page-oes) .pill-delivery   { background:rgba(0,184,148,.12);color:var(--oes-green); }
:where(body.page-oes) .pill-takeaway   { background:rgba(253,203,110,.12);color:#e6a817; }

/* ══ EDIT MODAL ══ */
:where(body.page-oes) .oes-modal-overlay {
  position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9100;
  display:none;align-items:center;justify-content:center;padding:1rem;
}
:where(body.page-oes) .oes-modal-overlay.open { display:flex; }
:where(body.page-oes) .modal-box {
  background:var(--oes-surface);border:1px solid var(--oes-border);
  border-radius:18px;width:100%;max-width:560px;max-height:90vh;
  display:flex;flex-direction:column;
  animation:modalIn--oes .3s cubic-bezier(.34,1.56,.64,1);
}
@keyframes modalIn--oes { from{opacity:0;transform:scale(.92)} to{opacity:1;transform:scale(1)} }
:where(body.page-oes) .modal-head {
  padding:1rem 1.2rem;border-bottom:1px solid var(--oes-border);
  display:flex;align-items:center;justify-content:space-between;
  font-weight:700;font-size:.95rem;flex-shrink:0;
}
:where(body.page-oes) .modal-body { flex:1;overflow-y:auto;padding:1rem 1.2rem; }
:where(body.page-oes) .modal-foot {
  padding:.8rem 1.2rem;border-top:1px solid var(--oes-border);
  display:flex;gap:8px;justify-content:flex-end;flex-shrink:0;
}
:where(body.page-oes) .btn-oes-secondary {
  padding:.55rem 1.2rem;background:var(--oes-surface2);
  border:1px solid var(--oes-border);border-radius:var(--oes-r-sm);
  color:var(--oes-muted);font-family:'vazir',sans-serif;font-size:.85rem;cursor:pointer;
}
:where(body.page-oes) .btn-oes-primary {
  padding:.55rem 1.2rem;
  background:linear-gradient(135deg,var(--oes-accent),var(--oes-accent-d));
  border:none;border-radius:var(--oes-r-sm);color:white;
  font-family:'vazir',sans-serif;font-size:.85rem;font-weight:700;cursor:pointer;
}
:where(body.page-oes) .btn-oes-primary:disabled { opacity:.5;cursor:not-allowed; }
:where(body.page-oes) .btn-icon-oes {
  width:34px;height:34px;border:1px solid var(--oes-border);
  background:var(--oes-surface2);border-radius:var(--oes-r-sm);
  color:var(--oes-muted);cursor:pointer;display:flex;
  align-items:center;justify-content:center;transition:all 0.15s;
}
:where(body.page-oes) .btn-icon-oes:hover { color:var(--oes-text);border-color:rgba(128,128,128,0.3); }
:where(body.page-oes) .section-label { font-size:.75rem;color:var(--oes-muted);font-weight:600;margin-bottom:.4rem; }
:where(body.page-oes) .edit-item-row {
  display:flex;align-items:center;gap:8px;padding:8px 0;
  border-bottom:1px solid var(--oes-border);
}
:where(body.page-oes) .edit-item-row:last-child { border-bottom:none; }
:where(body.page-oes) .edit-item-name  { flex:1;font-size:.82rem; }
:where(body.page-oes) .edit-item-price { font-size:.75rem;color:var(--oes-muted); }
:where(body.page-oes) .add-item-grid {
  display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));
  gap:6px;max-height:180px;overflow-y:auto;
}
:where(body.page-oes) .add-item-btn {
  background:var(--oes-surface2);border:1px solid var(--oes-border);
  border-radius:var(--oes-r-sm);padding:7px 8px;
  font-family:'vazir',sans-serif;font-size:.75rem;
  cursor:pointer;text-align:center;color:var(--oes-text);
}
:where(body.page-oes) .add-item-btn:hover { border-color:var(--oes-accent);color:var(--oes-accent); }

/* ══ CASHIER NOTIFICATION ══ */
:where(body.page-oes) #cashierNotifContainer {
  position:fixed;top:calc(var(--header-height, 90px) + 14px);left:1rem;
  z-index:9999;display:flex;flex-direction:column;gap:8px;pointer-events:none;
}
:where(body.page-oes) .cashier-notif {
  background:var(--oes-surface);border:1.5px solid rgba(240, 106, 0,.4);
  border-radius:14px;padding:.7rem 1rem;display:flex;align-items:center;gap:.7rem;
  box-shadow:0 6px 24px rgba(240, 106, 0,.2);min-width:220px;max-width:300px;
  pointer-events:auto;animation:cnSlideIn .3s cubic-bezier(.34,1.2,.64,1);
}
:where(body.page-oes) .cashier-notif.cancelled { border-color:rgba(214,48,49,.4);box-shadow:0 6px 24px rgba(214,48,49,.15); }
@keyframes cnSlideIn { from{opacity:0;transform:translateX(-30px)} to{opacity:1;transform:translateX(0)} }
:where(body.page-oes) .cn-icon  { font-size:1.4rem;flex-shrink:0; }
:where(body.page-oes) .cn-body  { flex:1;min-width:0; }
:where(body.page-oes) .cn-title { font-size:.82rem;font-weight:700;color:var(--oes-text); }
:where(body.page-oes) .cn-sub   { font-size:.73rem;color:var(--oes-muted);margin-top:2px; }
:where(body.page-oes) .cn-close { background:none;border:none;color:var(--oes-muted);cursor:pointer;font-size:.9rem;flex-shrink:0;padding:2px; }

/* ══ TOAST ══ */
:where(body.page-oes) .toast-wrap {
  position:fixed;bottom:5.5rem;left:50%;transform:translateX(-50%);
  z-index:9999;pointer-events:none;display:flex;flex-direction:column;
  gap:8px;align-items:center;
}
:where(body.page-oes) .toast {
  padding:10px 20px;border-radius:30px;font-size:.83rem;font-weight:600;
  animation:toastIn--oes .25s ease;pointer-events:auto;max-width:320px;text-align:center;
}
:where(body.page-oes) .toast.success { background:var(--oes-green);color:white; }
:where(body.page-oes) .toast.error   { background:var(--oes-red);color:white; }
:where(body.page-oes) .toast.info    { background:var(--oes-surface2);color:var(--oes-text);border:1px solid var(--oes-border); }
@keyframes toastIn--oes { from{opacity:0;transform:translateY(10px) scale(.95)} to{opacity:1;transform:translateY(0) scale(1)} }
:where(body.page-oes) .spin { animation:spin--oes .7s linear infinite; }
@keyframes spin--oes { to{transform:rotate(360deg)} }

/* ==========================================================================
   PAGE: orders
   source: pages/orders.php
   ========================================================================== */
:where(body.page-orders) h1 {
            color: var(--primary-dark);
            text-align: center;
            margin-bottom: 30px;
        }
        
        :where(body.page-orders) table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
            background-color: var(--bg-primary);
            border-radius: var(--border-radius);
            overflow: hidden;
        }
        
        :where(body.page-orders) th, :where(body.page-orders) td {
            padding: 12px 15px;
            text-align: right;
            border-bottom: 1px solid var(--bg-secondary);
        }
        
        :where(body.page-orders) th {
            background-color: var(--primary-color);
            color: white;
            font-weight: bold;
        }
        
        :where(body.page-orders) tr:hover {
            background-color: var(--bg-secondary);
        }
        
        :where(body.page-orders) .order-row {
            cursor: pointer;
            transition: var(--transition);
        }
        
        :where(body.page-orders) .order-row:hover {
            background-color: var(--primary-light);
            color: white;
        }
        
        :where(body.page-orders) .paid {
            color: var(--success-color);
            font-weight: bold;
        }
        
        :where(body.page-orders) .unpaid {
            color: var(--danger-color);
            font-weight: bold;
        }
        
        /* مودال */
        :where(body.page-orders) .day-order-modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            overflow-y: auto;
        }
        
        :where(body.page-orders) .modal-content {
            background-color: var(--bg-primary);
            margin: 5% auto;
            padding: 20px;
            border-radius: var(--border-radius);
            box-shadow: var(--shadow-lg);
            width: 80%;
            max-width: 800px;
            position: relative;
        }
        
        :where(body.page-orders) .close {
            position: absolute;
            top: 10px;
            left: 10px;
            font-size: 24px;
            font-weight: bold;
            cursor: pointer;
            color: var(--text-secondary);
        }
        
        :where(body.page-orders) .close:hover {
            color: var(--danger-color);
        }
        
        :where(body.page-orders) .modal-header {
            border-bottom: 1px solid var(--bg-secondary);
            padding-bottom: 10px;
            margin-bottom: 20px;
        }
        
        :where(body.page-orders) .modal-title {
            color: var(--primary-dark);
            margin: 0;
        }
        
        :where(body.page-orders) .modal-body {
            margin-bottom: 20px;
        }
        
        :where(body.page-orders) .info-row {
            display: flex;
            margin-bottom: 10px;
        }
        
        :where(body.page-orders) .info-label {
            font-weight: bold;
            width: 150px;
            color: var(--text-secondary);
        }
        
        :where(body.page-orders) .info-value {
            flex: 1;
        }
        
        :where(body.page-orders) .items-table {
            width: 100%;
            margin-top: 20px;
        }
        
        :where(body.page-orders) .print-btn {
            background-color: var(--primary-color);
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: var(--border-radius);
            cursor: pointer;
            font-size: 16px;
            transition: var(--transition);
            margin-top: 20px;
        }
        
        :where(body.page-orders) .print-btn:hover {
            background-color: var(--primary-dark);
        }
        
        /* استایل‌های جدید برای بخش چاپ */
        :where(body.page-orders) .delivery {display:block;}
        :where(body.page-orders) .in-person {display:none;}
        
        @media print {
            body:where(.page-orders) * {
                visibility: hidden;
                line-height:40px;
            }
            :where(body.page-orders) .print-section, :where(body.page-orders) .print-section * {
                visibility: visible;
            }
            :where(body.page-orders) .print-section {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                margin: 0;
                padding: 20px;
                font-size: 14px;
            }
            :where(body.page-orders) .no-print {
                display: none !important;
            }
            :where(body.page-orders) table {
                page-break-inside: auto;
            }
            :where(body.page-orders) tr {
                page-break-inside: avoid;
                page-break-after: auto;
            }
        }

/* ==========================================================================
   PAGE: orders-history
   source: pages/orders-history.php
   ========================================================================== */
:where(body.page-orders-history) .container {
        
        margin: -20px;
    }
    
    :where(body.page-orders-history) .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30px;
        padding-bottom: 15px;
        border-bottom: 1px solid var(--text-light);
    }

    :where(body.page-orders-history) .header h1 {
        color: var(--primary-dark);
    }

    /* تب‌ها */
    :where(body.page-orders-history) .tabs {
        display: flex;
        margin-bottom: 20px;
        border-bottom: 1px solid var(--text-light);
    }

    :where(body.page-orders-history) .tab {
        padding: 10px 20px;
        cursor: pointer;
        border-bottom: 3px solid transparent;
        transition: var(--transition);
    }

    :where(body.page-orders-history) .tab.active {
        border-bottom: 3px solid var(--primary-color);
        color: var(--primary-color);
        font-weight: 600;
    }

    :where(body.page-orders-history) .tab:hover:not(.active) {
        background-color: var(--bg-secondary);
    }

    /* فرم فیلترها */
    :where(body.page-orders-history) .filter-form {
        display: flex;
        gap: 10px;
        margin-bottom: 20px;
        flex-wrap: wrap;
        align-items: center;
        background-color: var(--bg-primary);
        padding: 15px;
        border-radius: var(--border-radius);
        box-shadow: var(--shadow-sm);
    }

    :where(body.page-orders-history) .filter-group {
        display: flex;
        align-items: center;
        gap: 5px;
    }

    :where(body.page-orders-history) .filter-group label {
        font-size: 14px;
        color: var(--text-secondary);
    }

    :where(body.page-orders-history) .filter-form select, :where(body.page-orders-history) .filter-form input {
        padding: 8px 12px;
        border-radius: var(--border-radius);
        border: 1px solid var(--text-light);
        background-color: var(--bg-primary);
        color: var(--text-primary);
        transition: var(--transition);
    }

    :where(body.page-orders-history) .filter-form select:focus, :where(body.page-orders-history) .filter-form input:focus {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 2px var(--primary-light);
    }

    :where(body.page-orders-history) .filter-form button {
        padding: 8px 15px;
        background-color: var(--primary-color);
        color: white;
        border: none;
        border-radius: var(--border-radius);
        cursor: pointer;
        transition: var(--transition);
    }

    :where(body.page-orders-history) .filter-form button:hover {
        background-color: var(--primary-dark);
    }

    :where(body.page-orders-history) .reset-btn {
        background-color: var(--danger-color) !important;
    }

    /* جدول سفارشات */
    :where(body.page-orders-history) .orders-table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 20px;
        background-color: var(--bg-primary);
        box-shadow: var(--shadow-md);
        border-radius: var(--border-radius);
        overflow: hidden;
        padding:0px;
    }

    :where(body.page-orders-history) .orders-table th, :where(body.page-orders-history) .orders-table td {
        padding: 12px 15px;
        text-align: right;
        border-bottom: 1px solid var(--bg-secondary);
    }

    :where(body.page-orders-history) .orders-table th {
        background-color: var(--primary-color);
        color: white;
        font-weight: 600;
    }

    :where(body.page-orders-history) .orders-table tr:hover {
        background-color: var(--bg-secondary);
    }

    :where(body.page-orders-history) .status-paid {
        color: var(--success-color);
        font-weight: 600;
    }

    :where(body.page-orders-history) .status-unpaid {
        color: var(--danger-color);
        font-weight: 600;
    }

    :where(body.page-orders-history) .action-btn {
        padding: 5px 10px;
        border-radius: var(--border-radius);
        border: none;
        cursor: pointer;
        transition: var(--transition);
        margin-left: 5px;
        font-size: 14px;
    }

    :where(body.page-orders-history) .view-btn {
        background-color: var(--info-color);
        color: white;
    }

    :where(body.page-orders-history) .print-btn {
        background-color: var(--secondary-color);
        color: white;
    }

    :where(body.page-orders-history) .view-btn:hover, :where(body.page-orders-history) .print-btn:hover {
        opacity: 0.9;
        transform: translateY(-2px);
    }

    :where(body.page-orders-history) .no-orders {
        text-align: center;
        padding: 30px;
        background-color: var(--bg-primary);
        border-radius: var(--border-radius);
        box-shadow: var(--shadow-sm);
        color: var(--text-secondary);
    }

    /* مودال */
    :where(body.page-orders-history) .oh-modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 1000;
        justify-content: center;
        align-items: center;
    }

    :where(body.page-orders-history) .modal-content {
        background-color: var(--bg-primary);
        width: 80%;
        max-width: 800px;
        border-radius: var(--border-radius);
        box-shadow: var(--shadow-lg);
        padding: 20px;
        max-height: 80vh;
        overflow-y: auto;
    }

    :where(body.page-orders-history) .modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        padding-bottom: 10px;
        border-bottom: 1px solid var(--bg-secondary);
    }

    :where(body.page-orders-history) .modal-header h2 {
        color: var(--primary-dark);
    }

    :where(body.page-orders-history) .close-btn {
        background: none;
        border: none;
        font-size: 24px;
        cursor: pointer;
        color: var(--text-secondary);
    }

    :where(body.page-orders-history) .close-btn:hover {
        color: var(--danger-color);
    }

    :where(body.page-orders-history) .order-details {
        margin-bottom: 20px;
    }

    :where(body.page-orders-history) .order-details p {
        margin-bottom: 8px;
    }

    :where(body.page-orders-history) .order-items {
        width: 100%;
        border-collapse: collapse;
        margin-top: 15px;
    }

    :where(body.page-orders-history) .order-items th, :where(body.page-orders-history) .order-items td {
        padding: 10px;
        text-align: right;
        border-bottom: 1px solid var(--bg-secondary);
    }

    :where(body.page-orders-history) .order-items th {
        background-color: var(--primary-light);
        color: var(--text-primary);
    }

    :where(body.page-orders-history) .modal-footer {
        display: flex;
        justify-content: flex-end;
        gap: 10px;
        margin-top: 20px;
        padding-top: 15px;
        border-top: 1px solid var(--bg-secondary);
    }

    /* استایل برای پرینت */
    @media print {
    body:where(.page-orders-history) * {
        visibility: hidden;
    }
    :where(body.page-orders-history) .print-section, :where(body.page-orders-history) .print-section * {
        visibility: visible;
    }
    :where(body.page-orders-history) .print-section {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        margin: 0;
        padding: 20px;
        font-size: 14px;
    }
    :where(body.page-orders-history) .no-print {
        display: none !important;
    }
    :where(body.page-orders-history) table {
        page-break-inside: auto;
    }
    :where(body.page-orders-history) tr {
        page-break-inside: avoid;
        page-break-after: auto;
    }
}

    /* ریسپانسیو */
    @media (max-width: 768px) {
        :where(body.page-orders-history) .orders-table {
            display: block;
            overflow-x: auto;
        }
        
        :where(body.page-orders-history) .filter-form {
            flex-direction: column;
            align-items: flex-start;
        }
        
        :where(body.page-orders-history) .modal-content {
            width: 95%;
        }
        
        :where(body.page-orders-history) .tabs {
            overflow-x: auto;
            white-space: nowrap;
        }
    }
:where(body.page-orders-history) .delivery {display:block;}
	:where(body.page-orders-history) .in-person {display:none;}

/* ==========================================================================
   PAGE: owner
   source: pages/owner.php
   ========================================================================== */
/* ========== استایل‌های اختصاصی صفحه owner ========== */
:where(body.page-owner) .owner-container {
    padding: 1rem 0;
}

/* تب‌ها */
:where(body.page-owner) .tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}
:where(body.page-owner) .tab {
    background: var(--bg-primary);
    border: none;
    padding: 0.6rem 1.2rem;
    border-radius: 50px;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--text-secondary);
    transition: var(--transition);
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
:where(body.page-owner) .tab:hover {
    color: var(--primary-color);
    box-shadow: var(--shadow-md);
}
:where(body.page-owner) .tab.active {
    background: var(--primary-color);
    color: #fff;
    box-shadow: var(--shadow-md);
}

/* بخش فیلترها */
:where(body.page-owner) .filters {
    display: flex;
    gap: 0.8rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}
:where(body.page-owner) .filters input,
:where(body.page-owner) .filters select {
    padding: 0.6rem 1rem;
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,0.1);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: 'vazir';
    transition: var(--transition);
    flex: 1;
    min-width: 180px;
}
:where(body.page-owner) .filters input:focus,
:where(body.page-owner) .filters select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(240, 106, 0,0.2);
}

/* لیست کاربران */
:where(body.page-owner) .user-list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

/* کارت کاربر */
:where(body.page-owner) .user-card {
    background: var(--bg-primary);
    border-radius: var(--border-radius);
    padding: 1rem 1.2rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: var(--transition);
}
:where(body.page-owner) .user-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
:where(body.page-owner) .user-card-img img {
    width: 45px;
    height: 45px;
    object-fit: contain;
    border-radius: 8px;
}
:where(body.page-owner) .user-card-info {
    flex: 1;
}
:where(body.page-owner) .user-card-name {
    font-size: 1rem;
    margin-bottom: 0.3rem;
    color: var(--text-primary);
}
:where(body.page-owner) .user-card-meta {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
:where(body.page-owner) .badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.7rem;
    border-radius: 50px;
    font-size: 0.75rem;
    color: #fff;
    white-space: nowrap;
}
:where(body.page-owner) .user-card-arrow {
    color: var(--text-light);
    font-size: 1rem;
}

/* حالت خالی */
:where(body.page-owner) .empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-light);
}
:where(body.page-owner) .empty-state i {
    font-size: 3rem;
    margin-bottom: 1rem;
    display: block;
}

/* مودال */
:where(body.page-owner) .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    opacity: 0;
    transition: var(--transition);
}
:where(body.page-owner) .modal-overlay.active {
    display: flex;
    opacity: 1;
}
:where(body.page-owner) .modal-card {
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--bg-primary);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    transform: translateY(20px);
    transition: var(--transition);
}
:where(body.page-owner) .modal-overlay.active .modal-card {
    transform: translateY(0);
}

/* ساختار paragraph برای مودال (مطابق با استایل‌های داده شده) */
:where(body.page-owner) .modal-card .p-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
:where(body.page-owner) .modal-card .p-title {
    margin: 0;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
:where(body.page-owner) .modal-card .p-body {
    padding: 1.5rem;
}
:where(body.page-owner) .modal-card .p-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid rgba(0,0,0,0.05);
    display: flex;
    justify-content: flex-end;
    gap: 0.8rem;
}

/* دکمه‌ها */
:where(body.page-owner) .btn-close-modal {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-secondary);
    transition: var(--transition);
}
:where(body.page-owner) .btn-close-modal:hover {
    color: var(--danger-color);
}
:where(body.page-owner) .btn-cancel {
    background: var(--bg-secondary);
    border: none;
    padding: 0.6rem 1.5rem;
    border-radius: 8px;
    cursor: pointer;
    color: var(--text-secondary);
    transition: var(--transition);
}
:where(body.page-owner) .btn-cancel:hover {
    background: var(--text-light);
}
:where(body.page-owner) .btn-save {
    background: var(--primary-color);
    color: #fff;
    border: none;
    padding: 0.6rem 1.5rem;
    border-radius: 8px;
    cursor: pointer;
    transition: var(--transition);
}
:where(body.page-owner) .btn-save:hover {
    background: var(--primary-dark);
}

/* فرم داخل مودال */
:where(body.page-owner) .form-group {
    margin-bottom: 1rem;
}
:where(body.page-owner) .form-group label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
}
:where(body.page-owner) .form-group input,
:where(body.page-owner) .form-group select {
    width: 100%;
    padding: 0.6rem 0.8rem;
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,0.1);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: 'vazir';
}
:where(body.page-owner) .form-group input:focus,
:where(body.page-owner) .form-group select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(240, 106, 0,0.2);
}

/* نگهدارنده نقشه */
:where(body.page-owner) #mapContainer {
    height: 250px;
    border-radius: var(--border-radius);
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.1);
    margin-top: 0.5rem;
}

/* واکنش‌گرایی */
@media screen and (max-width: 768px) {
    :where(body.page-owner) .tabs {
        gap: 0.3rem;
    }
    :where(body.page-owner) .tab {
        padding: 0.5rem 1rem;
        font-size: 0.8rem;
    }
    :where(body.page-owner) .filters {
        flex-direction: column;
    }
    :where(body.page-owner) .filters input,
    :where(body.page-owner) .filters select {
        min-width: auto;
        width: 100%;
    }
    :where(body.page-owner) .modal-card {
        width: 95%;
    }
}

/* ==========================================================================
   PAGE: payment-methods
   source: pages/payment-methods.php
   ========================================================================== */
:where(body.page-payment-methods) .stats-container {
    margin-bottom: 30px;
}

:where(body.page-payment-methods) .stat-card {
    background-color: var(--bg-primary);
    border-radius: var(--border-radius);
    padding: 20px;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

:where(body.page-payment-methods) .stat-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}

:where(body.page-payment-methods) .stat-card h3 {
    margin-top: 0;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
}

:where(body.page-payment-methods) .payment-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 300px;
    margin: 0 auto 20px;
}

:where(body.page-payment-methods) .payment-card {
    background-color: var(--bg-primary);
    border-radius: var(--border-radius);
    padding: 16px;
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: var(--transition);
}

:where(body.page-payment-methods) .payment-label {
    color: var(--text-primary);
    font-weight: 500;
    margin-right: 12px;
}

:where(body.page-payment-methods) .payment-toggle {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 30px;
}

:where(body.page-payment-methods) .payment-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

:where(body.page-payment-methods) .payment-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transition: var(--transition);
    border-radius: 34px;
}

:where(body.page-payment-methods) .payment-slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: var(--transition);
    border-radius: 50%;
}

/* استایل مخصوص پرداخت آنلاین */
:where(body.page-payment-methods) .onlinepay-slider {
    background-color: var(--danger-color);
}

:where(body.page-payment-methods) input:checked + .onlinepay-slider {
    background-color: var(--info-color);
}

:where(body.page-payment-methods) input:disabled + .onlinepay-slider {
    background-color: var(--text-light);
    cursor: not-allowed;
}

/* استایل مخصوص پرداخت در محل */
:where(body.page-payment-methods) .pospay-slider {
    background-color: var(--danger-color);
}

:where(body.page-payment-methods) input:checked + .pospay-slider {
    background-color: var(--secondary-color);
}

/* استایل مخصوص تحویل حضوری */
:where(body.page-payment-methods) .in-person-slider {
    background-color: var(--danger-color);
}

:where(body.page-payment-methods) input:checked + .in-person-slider {
    background-color: var(--success-color);
}

/* استایل مخصوص تحویل پیک */
:where(body.page-payment-methods) .delivery-slider {
    background-color: var(--danger-color);
}

:where(body.page-payment-methods) input:checked + .delivery-slider {
    background-color: var(--warning-color);
}

/* استایل وضعیت */
:where(body.page-payment-methods) .payment-status {
    position: absolute;
    right: -70px;
    top: 5px;
    color: var(--text-primary);
    font-size: 14px;
    width: 60px;
    text-align: center;
}

:where(body.page-payment-methods) input:not(:checked) ~ .payment-status:after {
    content: attr(data-inactive);
    color: var(--danger-color);
}

:where(body.page-payment-methods) input:checked ~ .onlinepay-status:after {
    content: attr(data-active);
    color: var(--info-color);
}

:where(body.page-payment-methods) input:checked ~ .pospay-status:after {
    content: attr(data-active);
    color: var(--secondary-color);
}

:where(body.page-payment-methods) input:checked ~ .in-person-status:after {
    content: attr(data-active);
    color: var(--success-color);
}

:where(body.page-payment-methods) input:checked ~ .delivery-status:after {
    content: attr(data-active);
    color: var(--warning-color);
}

/* پیام وضعیت */
:where(body.page-payment-methods) .payment-status-message {
    text-align: center;
    color: var(--text-secondary);
    font-size: 13px;
    min-height: 18px;
}

:where(body.page-payment-methods) .payment-warning {
    color: var(--warning-color);
}

/* حالت تاریک */
:where(body.page-payment-methods) .dark-mode .payment-card {
    background-color: var(--bg-dark);
}

:where(body.page-payment-methods) .dark-mode .payment-label {
    color: var(--text-secondary);
}

:where(body.page-payment-methods) .dark-mode .stat-card h3 {
    color: var(--text-secondary);
    border-bottom-color: var(--border-dark);
}

/* ==========================================================================
   PAGE: plans
   source: pages/plans.php
   ========================================================================== */
:where(body.page-plans) .plans-tabs { display:flex; gap:8px; margin-bottom:20px; border-bottom:2px solid #eee; }
    :where(body.page-plans) .plans-tab { flex:1; text-align:center; padding:14px 8px; cursor:pointer; font-weight:700; font-size:15px; color:#888; border-bottom:3px solid transparent; transition:all .2s ease; background:none; border-top:none; border-left:none; border-right:none; }
    :where(body.page-plans) .plans-tab.active { color:#4a90e2; border-bottom-color:#4a90e2; }
    :where(body.page-plans) .plans-tab .current-badge { display:inline-block; background:#4caf50; color:#fff; font-size:10px; padding:2px 7px; border-radius:20px; margin-right:4px; vertical-align:middle; }
    :where(body.page-plans) .plan-panel { display:none; }
    :where(body.page-plans) .plan-panel.active { display:block; }
    :where(body.page-plans) .product-card { background:linear-gradient(135deg,#f5f7fa 0%,#e4edf5 100%); border-radius:16px; box-shadow:0 8px 24px rgba(0,0,0,0.08); padding:24px; max-width:420px; margin:0 auto; font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif; border:1px solid rgba(255,255,255,0.5); position:relative; overflow:hidden; }
    :where(body.page-plans) .product-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; position:relative; z-index:1; }
    :where(body.page-plans) .product-title { font-size:20px; font-weight:700; color:#2d3748; }
    :where(body.page-plans) .product-badge { background:linear-gradient(135deg,#4a90e2 0%,#357abd 100%); color:#fff; padding:4px 12px; border-radius:20px; font-size:13px; font-weight:600; }
    :where(body.page-plans) .product-price { background:#fff; padding:20px; border-radius:12px; margin-bottom:20px; text-align:center; box-shadow:0 4px 12px rgba(0,0,0,0.05); border:1px solid rgba(0,0,0,0.05); position:relative; z-index:1; }
    :where(body.page-plans) .price-amount { font-size:26px; font-weight:800; color:#2d3748; margin-bottom:4px; }
    :where(body.page-plans) .price-period { font-size:14px; color:#718096; font-weight:500; }
    :where(body.page-plans) .features { list-style:none; padding:0; margin:0; position:relative; z-index:1; max-height:420px; overflow-y:auto; }
    :where(body.page-plans) .features li { padding:9px 0; border-bottom:1px solid rgba(0,0,0,0.05); font-size:13.5px; display:flex; align-items:center; gap:8px; }
    :where(body.page-plans) .features li:last-child { border-bottom:none; }
    :where(body.page-plans) .features li.included { color:#2d3748; }
    :where(body.page-plans) .features li.included i { color:#4caf50; }
    :where(body.page-plans) .features li.excluded { color:#aab1bb; text-decoration:line-through; }
    :where(body.page-plans) .features li.excluded i { color:#d0d5db; }
    :where(body.page-plans) .features li i { width:16px; text-align:center; flex-shrink:0; }
    :where(body.page-plans) .buy-button { width:100%; padding:14px; background:linear-gradient(135deg,#4a90e2 0%,#357abd 100%); color:#fff; border:none; border-radius:10px; font-size:16px; font-weight:600; margin-top:20px; cursor:pointer; box-shadow:0 4px 12px rgba(74,144,226,0.3); }
    :where(body.page-plans) .buy-button:disabled { background:#ccc; cursor:not-allowed; box-shadow:none; }
    :where(body.page-plans) .bazaarpay-badge { display:flex; align-items:center; justify-content:center; gap:6px; margin-top:10px; font-size:12px; color:#888; }
    :where(body.page-plans) .current-plan-box { background:#e8f5e9; border:2px solid #4caf50; border-radius:16px; padding:24px; text-align:center; max-width:420px; margin:0 auto; }
    :where(body.page-plans) .current-plan-box .icon { font-size:44px; margin-bottom:10px; }
    :where(body.page-plans) .current-plan-box h3 { color:#2e7d32; margin-bottom:6px; }
    :where(body.page-plans) .current-plan-box p { color:#555; font-size:14px; }
    :where(body.page-plans) .free-note { text-align:center; color:#888; font-size:14px; max-width:420px; margin:0 auto; }

/* ==========================================================================
   PAGE: qr-code
   source: pages/qr-code.php
   ========================================================================== */
:where(body.page-qr-code) .container {
            padding: 2rem;
            max-width: 1200px;
            margin: 0 auto;
        }
        
        :where(body.page-qr-code) .card {
            background-color: var(--bg-primary);
            border-radius: var(--border-radius);
            box-shadow: var(--shadow-md);
            border: none;
            margin-bottom: 2rem;
        }
        
        :where(body.page-qr-code) .card-header {
            background-color: var(--bg-primary);
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
            padding: 1.25rem 1.5rem;
            border-radius: var(--border-radius) var(--border-radius) 0 0 !important;
        }
        
        :where(body.page-qr-code) .card-body {
            padding: 1.5rem;
        }
        
        :where(body.page-qr-code) .form-control, :where(body.page-qr-code) .form-select {
            background-color: var(--bg-primary);
            color: var(--text-primary);
            border: 1px solid var(--text-light);
            border-radius: var(--border-radius);
            padding: 1rem 1rem;
            transition: var(--transition);
            font-family: 'BHoma', Arial, sans-serif;
        }
        
        :where(body.page-qr-code) .form-control:focus, :where(body.page-qr-code) .form-select:focus {
            background-color: var(--bg-primary);
            color: var(--text-primary);
            border-color: var(--primary-color);
            box-shadow: 0 0 0 0.25rem rgba(240, 106, 0, 0.25);
        }
        
        :where(body.page-qr-code) .form-label {
            margin-bottom: 0.5rem;
            color: var(--text-primary);
            font-weight: 500;
        }
        
        :where(body.page-qr-code) .btn {
            border-radius: var(--border-radius);
            padding: 0.5rem 1.25rem;
            transition: var(--transition);
            font-weight: 500;
            font-family: 'BHoma', Arial, sans-serif;
        }
        
        :where(body.page-qr-code) .btn-primary {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
        }
        
        :where(body.page-qr-code) .btn-primary:hover {
            background-color: var(--primary-dark);
            border-color: var(--primary-dark);
        }
        
        :where(body.page-qr-code) .btn-success {
            background-color: var(--success-color);
            border-color: var(--success-color);
        }
        
        :where(body.page-qr-code) .btn-outline-primary {
            color: var(--primary-color);
            border-color: var(--primary-color);
        }
        
        :where(body.page-qr-code) .btn-outline-primary:hover {
            background-color: var(--primary-color);
            color: white;
        }
        
        :where(body.page-qr-code) .color-preview {
            width: 25px;
            height: 25px;
            display: inline-block;
            border: 1px solid var(--text-light);
            border-radius: 4px;
            margin-left: 5px;
            vertical-align: middle;
        }
        
        :where(body.page-qr-code) output {
            background-color: var(--bg-primary);
            color: var(--text-primary);
            padding: 0.25rem 0.5rem;
            border-radius: var(--border-radius);
            border: 1px solid var(--text-light);
            margin-right: 10px;
            font-family: 'BHoma', Arial, sans-serif;
        }
        
        :where(body.page-qr-code) .input-group-text {
            background-color: var(--bg-secondary);
            color: var(--text-primary);
            border: 1px solid var(--text-light);
            font-family: 'BHoma', Arial, sans-serif;
        }
        
        :where(body.page-qr-code) .input-group .form-control {
            flex: 1;
        }
        
        :where(body.page-qr-code) .qr-preview-container {
            border: 1px solid var(--text-light);
            border-radius: var(--border-radius);
            padding: 1rem;
            background-color: var(--bg-primary);
            margin-top: 1rem;
        }
        
        :where(body.page-qr-code) .qr-preview {
            max-width: 100%;
            height: auto;
            display: block;
            margin: 0 auto;
        }
        
        :where(body.page-qr-code) .form-range::-webkit-slider-thumb {
            background: var(--primary-color);
        }
        
        :where(body.page-qr-code) .form-range::-moz-range-thumb {
            background: var(--primary-color);
        }
        
        :where(body.page-qr-code) .form-range::-ms-thumb {
            background: var(--primary-color);
        }
        
        :where(body.page-qr-code) .alert {
            border-radius: var(--border-radius);
            font-family: 'BHoma', Arial, sans-serif;
        }
        
        /* استایل‌های مخصوص QR */
        :where(body.page-qr-code) .qr-frame-none {
            border: none;
        }
        
        :where(body.page-qr-code) .qr-frame-solid {
            border: 5px solid var(--text-primary);
        }
        
        :where(body.page-qr-code) .qr-frame-dotted {
            border: 5px dotted var(--text-primary);
        }
        
        :where(body.page-qr-code) .qr-frame-dashed {
            border: 5px dashed var(--text-primary);
        }
        
        :where(body.page-qr-code) .qr-frame-double {
            border: 5px double var(--text-primary);
        }
        
        :where(body.page-qr-code) .qr-frame-groove {
            border: 5px groove var(--text-primary);
        }
        
        :where(body.page-qr-code) .qr-frame-ridge {
            border: 5px ridge var(--text-primary);
        }
        
        :where(body.page-qr-code) .qr-frame-inset {
            border: 5px inset var(--text-primary);
        }
        
        :where(body.page-qr-code) .qr-frame-outset {
            border: 5px outset var(--text-primary);
        }
        /*********** Baseline, reset styles ***********/
:where(body.page-qr-code) input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
  width: 50%;
}

/* Removes default focus */
:where(body.page-qr-code) input[type="range"]:focus {
  outline: none;
}

/******** Chrome, Safari, Opera and Edge Chromium styles ********/
/* slider track */
:where(body.page-qr-code) input[type="range"]::-webkit-slider-runnable-track {
  background-color: #add8e6;
  border-radius: 0.5rem;
  height: 1rem;
}

/* slider thumb */
:where(body.page-qr-code) input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  margin-top: -8px; /* Centers thumb on the track */
  background-color: #ff1e00;
  border-radius: 0.5rem;
  height: 2rem;
  width: 2rem;
}

:where(body.page-qr-code) input[type="range"]:focus::-webkit-slider-thumb {
  outline: 3px solid #ff1e00;
  outline-offset: 0.125rem;
}

/*********** Firefox styles ***********/
/* slider track */
:where(body.page-qr-code) input[type="range"]::-moz-range-track {
  background-color: #add8e6;
  border-radius: 0.5rem;
  height: 1rem;
}

/* slider thumb */
:where(body.page-qr-code) input[type="range"]::-moz-range-thumb {
  background-color: #ff1e00;
  border: none; /*Removes extra border that FF applies*/
  border-radius: 0.5rem;
  height: 2rem;
  width: 2rem;
}

:where(body.page-qr-code) input[type="range"]:focus::-moz-range-thumb{
  outline: 3px solid #ff1e00;
  outline-offset: 0.125rem;
}
        
        /* استایل‌های ریسپانسیو */
        @media (max-width: 768px) {
            :where(body.page-qr-code) .container {
                padding: 1rem;
            }
            
            :where(body.page-qr-code) .card-body {
                padding: 1rem;
            }
            
            :where(body.page-qr-code) .btn {
                width: 100%;
                margin-bottom: 0.5rem;
            }
        }

/* ==========================================================================
   PAGE: qr-themes
   source: pages/qr-themes.php
   ========================================================================== */
:where(body.page-qr-themes) .form-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 1rem;
    background-color: var(--bg-secondary);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
}

:where(body.page-qr-themes) .input-group {
    margin-bottom: 1.5rem;
    position: relative;
}

:where(body.page-qr-themes) .input-label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
}

:where(body.page-qr-themes) .input-field {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    border: 1px solid var(--text-light);
    border-radius: var(--border-radius);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: var(--transition);
    box-sizing: border-box;
}

:where(body.page-qr-themes) .input-field:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(240, 106, 0, 0.2);
}
        :where(body.page-qr-themes) .loading {
            display: none;
            text-align: center;
            margin: 20px 0;
        }
        
:where(body.page-qr-themes) .iframe-wrapper {
  width: 100%;
  height: 185mm; /* ارتفاع ثابت */
  position: relative;
  overflow: hidden;
  background: #f5f5f5; /* پس‌زمینه موقت برای دیدن محدوده */
}

:where(body.page-qr-themes) #previewFrame {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: center;
  border: none;
}
        
        :where(body.page-qr-themes) .submit-btn {
    background-color: var(--primary-color);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: var(--transition);
    display: inline-block;
    margin-top: 1rem;
    box-shadow: var(--shadow-sm);
}

:where(body.page-qr-themes) .submit-btn:hover {
    background-color: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

:where(body.page-qr-themes) .submit-btn:active {
    transform: translateY(0);
}

/* ==========================================================================
   PAGE: restaurant-location
   source: pages/restaurant-location.php
   ========================================================================== */
:where(body.page-restaurant-location) .container {
        max-width: 1000px;
        margin: 0px;
        background: var(--bg-primary);
        padding: 5px;
        border-radius: var(--border-radius);
        box-shadow: var(--shadow-md);
    }
    :where(body.page-restaurant-location) h2 {
        color: var(--primary-color);
        text-align: center;
        margin-bottom: 30px;
    }

    :where(body.page-restaurant-location) .search-container {
        margin-bottom: 20px;
        display: flex;
        gap: 10px;
    }

    :where(body.page-restaurant-location) .search-input {
        flex: 1;
        padding: 12px 15px;
        border: 1px solid var(--text-light);
        border-radius: var(--border-radius);
        font-size: 15px;
        box-shadow: var(--shadow-sm);
    }

    :where(body.page-restaurant-location) .btn-search {
        background-color: var(--primary-color);
        color: white;
        padding: 12px 25px;
        border: none;
        border-radius: var(--border-radius);
        cursor: pointer;
        font-weight: bold;
        transition: var(--transition);
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 15px;
        box-shadow: var(--shadow-sm);
    }

    :where(body.page-restaurant-location) .btn-search:hover {
        background-color: #2980b9;
        box-shadow: var(--shadow-md);
    }

    :where(body.page-restaurant-location) #map {
        height: 500px;
        width: 100%;
        border-radius: var(--border-radius);
        margin-bottom: 20px;
        border: 1px solid var(--text-light);
    }

    :where(body.page-restaurant-location) .button-group {
        display: flex;
        gap: 15px;
        justify-content: center;
        margin-top: 20px;
    }

    :where(body.page-restaurant-location) .sbutton {
        padding: 12px 25px;
        border: none;
        border-radius: var(--border-radius);
        cursor: pointer;
        font-weight: bold;
        transition: var(--transition);
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 15px;
        box-shadow: var(--shadow-sm);
    }

    :where(body.page-restaurant-location) .btn-save {
        background-color: var(--success-color);
        color: white;
    }

    :where(body.page-restaurant-location) .btn-save:hover {
        background-color: #00a884;
        box-shadow: var(--shadow-md);
    }

    :where(body.page-restaurant-location) .btn-reset {
        background-color: var(--danger-color);
        color: white;
    }

    :where(body.page-restaurant-location) .btn-reset:hover {
        background-color: #c0392b;
        box-shadow: var(--shadow-md);
    }

    :where(body.page-restaurant-location) .status-message {
        margin-top: 20px;
        padding: 15px;
        border-radius: var(--border-radius);
        display: none;
        text-align: center;
        font-weight: 500;
    }

    :where(body.page-restaurant-location) .success {
        background-color: rgba(0, 184, 148, 0.2);
        color: var(--success-color);
        display: block;
        border: 1px solid var(--success-color);
    }

    :where(body.page-restaurant-location) .error {
        background-color: rgba(214, 48, 49, 0.2);
        color: var(--danger-color);
        display: block;
        border: 1px solid var(--danger-color);
    }

    :where(body.page-restaurant-location) .hidden {
        display: none;
    }

    @media (max-width: 768px) {
        :where(body.page-restaurant-location) #map {
            height: 400px;
        }

        :where(body.page-restaurant-location) .search-container {
            flex-direction: column;
        }

        :where(body.page-restaurant-location) .button-group {
            flex-direction: column;
        }

        :where(body.page-restaurant-location) .sbutton {
            width: 100%;
            justify-content: center;
        }
    }

/* ==========================================================================
   PAGE: restaurant-settings
   source: pages/restaurant-settings.php
   ========================================================================== */
/* استایل‌های فرم */
:where(body.page-restaurant-settings) .form-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem;
    background-color: var(--bg-secondary);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
}

:where(body.page-restaurant-settings) .input-group {
    margin-bottom: 1.5rem;
    position: relative;
}

:where(body.page-restaurant-settings) .input-label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
}

:where(body.page-restaurant-settings) .input-field {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    border: 1px solid var(--text-light);
    border-radius: var(--border-radius);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: var(--transition);
    box-sizing: border-box;
}

:where(body.page-restaurant-settings) .input-field:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(240, 106, 0, 0.2);
}

:where(body.page-restaurant-settings) .input-field[style*="direction:rtl"] {
    text-align: right;
}

:where(body.page-restaurant-settings) .input-field[style*="direction:ltr"] {
    text-align: left;
}

:where(body.page-restaurant-settings) .submit-btn {
    background-color: var(--primary-color);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: var(--transition);
    display: inline-block;
    margin-top: 1rem;
    box-shadow: var(--shadow-sm);
}

:where(body.page-restaurant-settings) .submit-btn:hover {
    background-color: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

:where(body.page-restaurant-settings) .submit-btn:active {
    transform: translateY(0);
}

:where(body.page-restaurant-settings) .alert {
    padding: 1rem;
    border-radius: var(--border-radius);
    margin-bottom: 1.5rem;
    display: none;
}

:where(body.page-restaurant-settings) .alert-success {
    background-color: var(--success-color);
    color: white;
}

:where(body.page-restaurant-settings) .alert-error {
    background-color: var(--danger-color);
    color: white;
}

/* ==========================================================================
   PAGE: reviews
   source: pages/reviews.php
   ========================================================================== */
:where(body.page-reviews) .container {
        max-width: 1200px;
        margin: 0 auto;
    }
    
    :where(body.page-reviews) .tabs {
        display: flex;
        margin-bottom: 20px;
        border-bottom: 1px solid var(--text-light);
    }
    
    :where(body.page-reviews) .tab {
        padding: 10px 20px;
        cursor: pointer;
        border: 1px solid transparent;
        border-bottom: none;
        border-radius: var(--border-radius) var(--border-radius) 0 0;
        margin-left: 5px;
        transition: var(--transition);
    }
    
    :where(body.page-reviews) .tab.active {
        background: var(--bg-primary);
        border-color: var(--text-light);
        border-bottom: 1px solid var(--bg-primary);
        margin-bottom: -1px;
        color: var(--primary-color);
        font-weight: bold;
    }
    
    :where(body.page-reviews) .tab:hover:not(.active) {
        background: var(--bg-secondary);
    }
    
    :where(body.page-reviews) .tab-content {
        display: none;
        background: var(--bg-primary);
        padding: 20px;
        border-radius: 0 var(--border-radius) var(--border-radius) var(--border-radius);
        box-shadow: var(--shadow-sm);
    }
    
    :where(body.page-reviews) .tab-content.active {
        display: block;
    }
    
    :where(body.page-reviews) .comment-card {
        background: var(--bg-primary);
        border-radius: var(--border-radius);
        padding: 20px;
        margin-bottom: 20px;
        box-shadow: var(--shadow-sm);
    }
    
    :where(body.page-reviews) .comment-header {
        display: flex;
        justify-content: space-between;
        margin-bottom: 15px;
    }
    
    :where(body.page-reviews) .comment-user {
        display: flex;
        align-items: center;
    }
    
    :where(body.page-reviews) .user-av {
        width: 40px;
        height: 40px;
        background: var(--primary-light);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 10px;
        color: var(--primary-dark);
        font-weight: bold;
    }
    
    :where(body.page-reviews) .comment-content {
        margin: 15px 0;
        line-height: 1.8;
    }
    
    :where(body.page-reviews) .comment-reply {
        background: var(--bg-secondary);
        padding: 15px;
        border-radius: var(--border-radius);
        margin-top: 15px;
        border-right: 3px solid var(--success-color);
    }
    
    :where(body.page-reviews) .comment-actions {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 15px;
    }
    
    :where(body.page-reviews) .status-badge {
        padding: 5px 10px;
        border-radius: 20px;
        font-size: 0.8rem;
    }
    
    :where(body.page-reviews) .badge-success {
        background: rgba(0, 184, 148, 0.2);
        color: var(--success-color);
    }
    
    :where(body.page-reviews) .badge-danger {
        background: rgba(214, 48, 49, 0.2);
        color: var(--danger-color);
    }
    
    :where(body.page-reviews) .btn {
        padding: 8px 15px;
        border-radius: var(--border-radius);
        border: none;
        cursor: pointer;
        transition: var(--transition);
        display: inline-flex;
        align-items: center;
        gap: 5px;
    }
    
    :where(body.page-reviews) .btn-success {
        background: var(--success-color);
        color: white;
    }
    
    :where(body.page-reviews) .btn-info {
        background: var(--info-color);
        color: white;
    }
    
    :where(body.page-reviews) .btn-danger {
        background: var(--danger-color);
        color: white;
    }
    
    :where(body.page-reviews) .btn:hover {
        opacity: 0.9;
    }
    
    :where(body.page-reviews) .pagination {
        display: flex;
        justify-content: center;
        margin-top: 20px;
        gap: 5px;
    }
    
    :where(body.page-reviews) .page-link {
        padding: 8px 15px;
        border-radius: var(--border-radius);
        border: 1px solid var(--text-light);
        text-decoration: none;
        color: var(--primary-color);
    }
    
    :where(body.page-reviews) .page-link.active {
        background: var(--primary-color);
        color: white;
        border-color: var(--primary-color);
    }
    
    :where(body.page-reviews) .no-comments {
        text-align: center;
        padding: 50px 20px;
        color: var(--text-secondary);
    }
    
    /* Modal Styles */
    :where(body.page-reviews) .modal {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        display: none;
        align-items: center;
        justify-content: center;
        z-index: 1000;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    :where(body.page-reviews) .modal.active {
        display: flex;
        opacity: 1;
    }

    :where(body.page-reviews) .modal-content {
        background: var(--bg-primary);
        border-radius: var(--border-radius);
        width: 90%;
        max-width: 500px;
        padding: 25px;
        box-shadow: var(--shadow-lg);
        transform: translateY(20px);
        transition: transform 0.3s ease;
    }

    :where(body.page-reviews) .modal.active .modal-content {
        transform: translateY(0);
    }

    :where(body.page-reviews) .modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        padding-bottom: 10px;
        border-bottom: 1px solid var(--bg-secondary);
    }

    :where(body.page-reviews) .modal-title {
        font-size: 1.3rem;
        color: var(--primary-color);
    }

    :where(body.page-reviews) .modal-close {
        background: none;
        border: none;
        font-size: 1.5rem;
        cursor: pointer;
        color: var(--text-secondary);
        transition: var(--transition);
    }

    :where(body.page-reviews) .modal-close:hover {
        color: var(--danger-color);
        transform: rotate(90deg);
    }

    :where(body.page-reviews) .modal-body {
        margin-bottom: 20px;
    }

    :where(body.page-reviews) .modal-footer {
        display: flex;
        justify-content: flex-end;
        gap: 10px;
    }

    :where(body.page-reviews) .form-group {
        margin-bottom: 15px;
    }

    :where(body.page-reviews) .form-label {
        display: block;
        margin-bottom: 8px;
        font-weight: 500;
        color: var(--text-primary);
    }

    :where(body.page-reviews) .form-control {
        width: 100%;
        padding: 10px 15px;
        border-radius: var(--border-radius);
        border: 1px solid var(--text-light);
        background: var(--bg-primary);
        color: var(--text-primary);
        transition: var(--transition);
    }

    :where(body.page-reviews) .form-control:focus {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 3px rgba(240, 106, 0, 0.2);
    }

    :where(body.page-reviews) textarea.form-control {
        min-height: 120px;
        resize: vertical;
    }
    
    @media (max-width: 768px) {
        :where(body.page-reviews) .comment-header {
            flex-direction: column;
            gap: 10px;
        }
        
        :where(body.page-reviews) .comment-actions {
            flex-direction: column;
            gap: 10px;
        }
    }
    
    /* Loading spinner */
    :where(body.page-reviews) .spinner {
        animation: rotate 2s linear infinite;
        width: 20px;
        height: 20px;
        display: inline-block;
    }
    
    :where(body.page-reviews) .spinner .path {
        stroke: #ffffff;
        stroke-linecap: round;
        animation: dash 1.5s ease-in-out infinite;
    }
    
    @keyframes rotate {
        100% {
            transform: rotate(360deg);
        }
    }
    
    @keyframes dash {
        0% {
            stroke-dasharray: 1, 150;
            stroke-dashoffset: 0;
        }
        50% {
            stroke-dasharray: 90, 150;
            stroke-dashoffset: -35;
        }
        100% {
            stroke-dasharray: 90, 150;
            stroke-dashoffset: -124;
        }
    }
    
    /* Toast notification */
    :where(body.page-reviews) .toast {
        position: fixed;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        padding: 12px 24px;
        border-radius: var(--border-radius);
        box-shadow: var(--shadow-lg);
        z-index: 9999;
        transition: all 0.3s ease;
        opacity: 0;
    }
    
    :where(body.page-reviews) .toast.show {
        opacity: 1;
    }
    
    :where(body.page-reviews) .toast.success {
        background-color: var(--success-color);
        color: white;
    }
    
    :where(body.page-reviews) .toast.error {
        background-color: var(--danger-color);
        color: white;
    }

/* ==========================================================================
   PAGE: sales-report
   source: pages/sales-report.php
   ========================================================================== */
/* استایل‌های اضافی برای صفحه گزارش فروش */
        :where(body.page-sales-report) .stats-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }
        
        :where(body.page-sales-report) .stat-card {
            background-color: var(--bg-primary);
            border-radius: var(--border-radius);
            padding: 20px;
            box-shadow: var(--shadow-md);
            transition: var(--transition);
        }
        
        :where(body.page-sales-report) .stat-card:hover {
            box-shadow: var(--shadow-lg);
            transform: translateY(-5px);
        }
        
        :where(body.page-sales-report) .stat-card h3 {
            margin-bottom: 15px;
            color: var(--text-secondary);
            font-size: 1rem;
        }
        
        :where(body.page-sales-report) .stat-value {
            font-size: 2rem;
            font-weight: bold;
            color: var(--primary-color);
            margin-bottom: 10px;
        }
        
        :where(body.page-sales-report) .stat-details {
            display: flex;
            justify-content: space-between;
            font-size: 0.9rem;
            color: var(--text-secondary);
            margin-bottom: 5px;
        }
        
        :where(body.page-sales-report) .stat-change {
            display: flex;
            align-items: center;
            font-size: 0.9rem;
        }
        
        :where(body.page-sales-report) .stat-change.positive {
            color: var(--success-color);
        }
        
        :where(body.page-sales-report) .stat-change.negative {
            color: var(--danger-color);
        }
        
        :where(body.page-sales-report) .stat-change i {
            margin-left: 5px;
        }
        
        :where(body.page-sales-report) .chart-container {
            background-color: var(--bg-primary);
            border-radius: var(--border-radius);
            padding: 20px;
            box-shadow: var(--shadow-md);
            margin-bottom: 30px;
        }
        
        :where(body.page-sales-report) .chart-title {
            margin-bottom: 20px;
            color: var(--text-primary);
        }
        
        :where(body.page-sales-report) .sales-breakdown {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
        }
        
        :where(body.page-sales-report) .breakdown-card {
            background-color: var(--bg-primary);
            border-radius: var(--border-radius);
            padding: 20px;
            box-shadow: var(--shadow-md);
        }
        
        :where(body.page-sales-report) .breakdown-card h3 {
            margin-bottom: 15px;
            color: var(--text-secondary);
            font-size: 1rem;
        }
        
        :where(body.page-sales-report) .breakdown-item {
            margin-bottom: 15px;
        }
        
        :where(body.page-sales-report) .breakdown-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 5px;
        }
        
        :where(body.page-sales-report) .breakdown-name {
            font-weight: 500;
        }
        
        :where(body.page-sales-report) .breakdown-value {
            font-weight: bold;
            color: var(--primary-color);
        }
        
        :where(body.page-sales-report) .breakdown-bar {
            height: 8px;
            background-color: var(--bg-secondary);
            border-radius: 4px;
            overflow: hidden;
        }
        
        :where(body.page-sales-report) .breakdown-progress {
            height: 100%;
            border-radius: 4px;
        }
        
        :where(body.page-sales-report) .popular-products {
            background-color: var(--bg-primary);
            border-radius: var(--border-radius);
            padding: 20px;
            box-shadow: var(--shadow-md);
            margin-top: 20px;
        }
        
        :where(body.page-sales-report) .product-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 0;
            border-bottom: 1px solid var(--bg-secondary);
        }
        
        :where(body.page-sales-report) .product-name {
            flex-grow: 1;
        }
        
        :where(body.page-sales-report) .product-quantity {
            font-weight: bold;
            color: var(--primary-color);
            margin-left: 10px;
        }
        
        :where(body.page-sales-report) .tabs {
            display: flex;
            margin-bottom: 20px;
            border-bottom: 1px solid var(--bg-secondary);
        }
        
        :where(body.page-sales-report) .tab {
            padding: 10px 20px;
            cursor: pointer;
            border-bottom: 2px solid transparent;
            transition: var(--transition);
        }
        
        :where(body.page-sales-report) .tab.active {
            border-bottom-color: var(--primary-color);
            color: var(--primary-color);
            font-weight: 500;
        }
        
        :where(body.page-sales-report) .tab-content {
            display: none;
        }
        
        :where(body.page-sales-report) .tab-content.active {
            display: block;
        }
        
        :where(body.page-sales-report) .report-form {
            background-color: var(--bg-primary);
            border-radius: var(--border-radius);
            padding: 20px;
            box-shadow: var(--shadow-md);
            margin-bottom: 30px;
        }
        
        :where(body.page-sales-report) .form-group {
            margin-bottom: 15px;
        }
        
        :where(body.page-sales-report) .form-row {
            display: flex;
            gap: 15px;
            margin-bottom: 15px;
        }
        
        :where(body.page-sales-report) .form-control {
            width: 100%;
            padding: 10px;
            border: 1px solid var(--bg-secondary);
            border-radius: var(--border-radius);
            background-color: var(--bg-secondary);
            color: var(--text-primary);
        }
        
        :where(body.page-sales-report) .form-label {
            display: block;
            margin-bottom: 5px;
            font-weight: 500;
        }
        
        :where(body.page-sales-report) .btn {
            padding: 10px 20px;
            background-color: var(--primary-color);
            color: white;
            border: none;
            border-radius: var(--border-radius);
            cursor: pointer;
            transition: var(--transition);
        }
        
        :where(body.page-sales-report) .btn:hover {
            background-color: var(--primary-dark);
        }
        
        :where(body.page-sales-report) .report-summary {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 15px;
            margin-bottom: 20px;
        }
        
        :where(body.page-sales-report) .report-summary-item {
            background-color: var(--bg-secondary);
            padding: 15px;
            border-radius: var(--border-radius);
        }
        
        :where(body.page-sales-report) .report-summary-title {
            font-size: 0.9rem;
            color: var(--text-secondary);
            margin-bottom: 5px;
        }
        
        :where(body.page-sales-report) .report-summary-value {
            font-size: 1.2rem;
            font-weight: bold;
            color: var(--primary-color);
        }
        
        :where(body.page-sales-report) .report-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        
        :where(body.page-sales-report) .report-table th, 
        :where(body.page-sales-report) .report-table td {
            padding: 12px 15px;
            text-align: right;
            border-bottom: 1px solid var(--bg-secondary);
        }
        
        :where(body.page-sales-report) .report-table th {
            background-color: var(--bg-secondary);
            font-weight: 500;
        }
        
        :where(body.page-sales-report) .report-table tr:hover {
            background-color: var(--bg-secondary);
        }
        
        /* استایل تقویم شمسی */
        :where(body.page-sales-report) .calendar-container {
            position: relative;
            display: inline-block;
            width: 100%;
        }
        
        :where(body.page-sales-report) .calendar {
            position: absolute;
            top: 100%;
            left: 0;
            z-index: 1000;
            background-color: var(--bg-primary);
            border: 1px solid var(--bg-secondary);
            border-radius: var(--border-radius);
            box-shadow: var(--shadow-lg);
            padding: 10px;
            display: none;
        }
        
        :where(body.page-sales-report) .calendar-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }
        
        :where(body.page-sales-report) .calendar-body {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 5px;
        }
        
        :where(body.page-sales-report) .calendar-day-header {
            text-align: center;
            font-weight: bold;
            padding: 5px;
        }
        
        :where(body.page-sales-report) .calendar-day {
            text-align: center;
            padding: 5px;
            cursor: pointer;
            border-radius: var(--border-radius);
        }
        
        :where(body.page-sales-report) .calendar-day:hover {
            background-color: var(--primary-color);
            color: white;
        }
        
        :where(body.page-sales-report) .calendar-day.disabled {
            color: var(--text-secondary);
            cursor: not-allowed;
        }
        
        :where(body.page-sales-report) .calendar-day.selected {
            background-color: var(--primary-color);
            color: white;
        }
        
        :where(body.page-sales-report) .calendar-nav {
            cursor: pointer;
            padding: 5px;
        }
        
        :where(body.page-sales-report) .calendar-nav:hover {
            color: var(--primary-color);
        }

/* ==========================================================================
   PAGE: security-settings
   source: pages/security-settings.php
   ========================================================================== */
:where(body.page-security-settings) .container {
            max-width: 800px;
            margin: 30px auto;
            background-color: var(--bg-primary);
            border-radius: var(--border-radius);
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            padding: 30px;
        }
        
        :where(body.page-security-settings) .section-title {
            text-align: center;
            margin-bottom: 30px;
            color: var(--primary-dark);
        }
        
        :where(body.page-security-settings) .security-notice {
            background-color: rgba(214, 48, 49, 0.1);
            color: var(--danger-color);
            padding: 15px;
            border-radius: var(--border-radius);
            margin-bottom: 30px;
            border-right: 3px solid var(--danger-color);
        }
        
        :where(body.page-security-settings) .form-group {
            margin-bottom: 20px;
        }
        
        :where(body.page-security-settings) .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: var(--text-secondary);
        }
        
        :where(body.page-security-settings) .form-control {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: var(--border-radius);
            transition: var(--transition);
        }
        
        :where(body.page-security-settings) .form-control:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 2px rgba(240, 106, 0, 0.2);
        }
        
        :where(body.page-security-settings) .password-wrapper {
            position: relative;
        }
        
        :where(body.page-security-settings) .toggle-password {
            position: absolute;
            top: 50%;
            left: 10px;
            transform: translateY(-50%);
            cursor: pointer;
            color: var(--text-secondary);
            user-select: none;
        }
        
        :where(body.page-security-settings) .password-wrapper input {
            padding-left: 40px !important;
        }
        
        :where(body.page-security-settings) .submit-btn {
            background-color: var(--primary-color);
            color: white;
            border: none;
            padding: 12px 25px;
            border-radius: var(--border-radius);
            cursor: pointer;
            font-weight: 600;
            transition: var(--transition);
            display: block;
            margin: 0 auto;
        }
        
        :where(body.page-security-settings) .submit-btn:hover {
            background-color: var(--primary-dark);
        }
        
        :where(body.page-security-settings) .spinner {
            display: none;
            width: 40px;
            height: 40px;
            margin: 20px auto;
            border: 4px solid var(--primary-light);
            border-radius: 50%;
            border-top: 4px solid var(--primary-color);
            animation: spin--security-settings 1s linear infinite;
        }
        
        @keyframes spin--security-settings {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        :where(body.page-security-settings) .popup-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            opacity: 0;
            visibility: hidden;
            transition: var(--transition);
        }
        
        :where(body.page-security-settings) .popup-overlay.active {
            opacity: 1;
            visibility: visible;
        }
        
        :where(body.page-security-settings) .popup {
            background-color: var(--bg-primary);
            border-radius: var(--border-radius);
            box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
            width: 90%;
            max-width: 400px;
            padding: 25px;
            text-align: center;
            transform: translateY(20px);
            transition: var(--transition);
        }
        
        :where(body.page-security-settings) .popup-overlay.active .popup {
            transform: translateY(0);
        }
        
        :where(body.page-security-settings) .popup-icon {
            font-size: 48px;
            margin-bottom: 20px;
        }
        
        :where(body.page-security-settings) .popup-icon.success {
            color: var(--success-color);
        }
        
        :where(body.page-security-settings) .popup-icon.error {
            color: var(--danger-color);
        }
        
        :where(body.page-security-settings) .popup-title {
            font-size: 20px;
            margin-bottom: 15px;
        }
        
        :where(body.page-security-settings) .popup-message {
            color: var(--text-secondary);
            margin-bottom: 20px;
            line-height: 1.6;
        }
        
        :where(body.page-security-settings) .popup-btn {
            background-color: var(--primary-color);
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: var(--border-radius);
            cursor: pointer;
            font-weight: 600;
            transition: var(--transition);
        }
        
        :where(body.page-security-settings) .popup-btn:hover {
            background-color: var(--primary-dark);
        }

/* ==========================================================================
   PAGE: send-notification
   source: pages/send-notification.php
   ========================================================================== */
/* استایل‌های پایه */
:where(body.page-send-notification) .notification-container {
    padding:0px;
    font-family: 'shabnam', sans-serif;
    direction: rtl;
    max-width: 800px;
    margin:-10px;
    
}

:where(body.page-send-notification) .notification-header {
    margin-bottom: 20px;
}

:where(body.page-send-notification) .notification-title {
    font-size: 1.4rem;
    color: var(--text-primary);
    font-weight: bold;
}

/* راهنمای درون صفحه */
:where(body.page-send-notification) .modern-help-box {
    background-color: var(--bg-secondary);
    border-radius: var(--border-radius);
    padding: 20px;
    margin-bottom: 25px;
    border-right: 4px solid var(--info-color);
    box-shadow: var(--shadow-sm);
}

:where(body.page-send-notification) .modern-help-box h3 {
    color: var(--info-color);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

:where(body.page-send-notification) .modern-help-box ul {
    padding-right: 20px;
    list-style-type: disc;
    color: var(--text-secondary);
    line-height: 1.8;
}

:where(body.page-send-notification) .modern-help-box li {
    margin-bottom: 8px;
}

/* فرم مدرن */
:where(body.page-send-notification) .notification-form-container {
    position: relative;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
    padding: 25px;
    width: 100%;
    background: var(--bg-primary);
    margin-top: 20px;
}

:where(body.page-send-notification) .modern-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

:where(body.page-send-notification) .form-group {
    width: 100%;
}

:where(body.page-send-notification) .modern-form input,
:where(body.page-send-notification) .modern-form textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--text-light);
    border-radius: var(--border-radius);
    resize: vertical;
    transition: var(--transition);
}

:where(body.page-send-notification) .modern-form input:focus,
:where(body.page-send-notification) .modern-form textarea:focus {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 0 3px rgba(240, 106, 0, 0.1);
}

:where(body.page-send-notification) .submit-btn {
    width: 100%;
    background-color: var(--success-color);
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: 1rem;
    transition: var(--transition);
}

:where(body.page-send-notification) .submit-btn:hover {
    background-color: var(--primary-dark);
}

/* استایل‌های مودال */
:where(body.page-send-notification) .modal-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

:where(body.page-send-notification) .modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    cursor: pointer;
}

:where(body.page-send-notification) .modal-content {
    position: relative;
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    background: var(--bg-primary);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    padding: 30px;
    overflow-y: auto;
    text-align: center;
    z-index: 1001;
    animation: modalFadeIn--send-notification 0.3s ease-out;
}

@keyframes modalFadeIn--send-notification {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

:where(body.page-send-notification) .status-message {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 25px;
}

:where(body.page-send-notification) .success-message {
    color: var(--success-color);
}

:where(body.page-send-notification) .error-message {
    color: var(--danger-color);
}

:where(body.page-send-notification) .modal-close-btn {
    display: inline-block;
    width: 120px;
    height: 40px;
    padding: 10px;
    background-color: var(--primary-color);
    color: white;
    font-size: 15px;
    border-radius: 6px;
    cursor: pointer;
    transition: var(--transition);
    margin: 0 auto;
    display: block;
    border: none;
}

:where(body.page-send-notification) .modal-close-btn:hover {
    background-color: var(--primary-dark);
}

/* لودر */
:where(body.page-send-notification) .loader {
    border: 5px solid var(--bg-secondary);
    border-top: 5px solid var(--primary-color);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin--send-notification 1s linear infinite;
    margin: 0 auto 20px;
}

@keyframes spin--send-notification {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

:where(body.page-send-notification) .loading-message {
    font-size: 1.1rem;
    color: var(--text-primary);
}

/* واکنش‌گرایی */
@media (max-width: 768px) {
    :where(body.page-send-notification) .notification-container {
        padding: 15px;
    }
    
    :where(body.page-send-notification) .modal-content {
        width: 95%;
        padding: 20px;
    }
    
    :where(body.page-send-notification) .modern-help-box {
        padding: 15px;
    }
}

/* ==========================================================================
   PAGE: seo-settings
   source: pages/seo-settings.php
   ========================================================================== */
:where(body.page-seo-settings) .container {
            max-width: 800px;
            margin: 30px auto;
            background-color: var(--bg-primary);
            border-radius: var(--border-radius);
            box-shadow: var(--shadow-md);
            overflow: hidden;
        }
        
        :where(body.page-seo-settings) .tabs {
            display: flex;
            background-color: var(--bg-secondary);
        }
        
        :where(body.page-seo-settings) .tab-btn {
            flex: 1;
            padding: 15px;
            text-align: center;
            cursor: pointer;
            border: none;
            background: none;
            font-weight: 600;
            color: var(--text-secondary);
            transition: var(--transition);
            border-bottom: 3px solid transparent;
        }
        
        :where(body.page-seo-settings) .tab-btn.active {
            color: var(--primary-color);
            border-bottom: 3px solid var(--primary-color);
            background-color: var(--bg-primary);
        }
        
        :where(body.page-seo-settings) .tab-content {
            padding: 30px;
            display: none;
        }
        
        :where(body.page-seo-settings) .tab-content.active {
            display: block;
        }
        
        :where(body.page-seo-settings) .section-title {
            text-align: center;
            margin-bottom: 20px;
            color: var(--primary-dark);
        }
        
        :where(body.page-seo-settings) .info-box {
            background-color: var(--bg-secondary);
            padding: 15px;
            border-radius: var(--border-radius);
            margin-bottom: 20px;
            font-size: 14px;
            color: var(--text-secondary);
            border-right: 3px solid var(--primary-light);
        }
        
        :where(body.page-seo-settings) .edit-form {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        
        :where(body.page-seo-settings) .form-group {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        
        :where(body.page-seo-settings) .form-group label {
            font-weight: 600;
            color: var(--text-secondary);
        }
        
        :where(body.page-seo-settings) .form-control {
            padding: 12px;
            border: 1px solid var(--primary-light);
            border-radius: var(--border-radius);
            transition: var(--transition);
            background-color: var(--bg-primary);
            color: var(--text-primary);
        }
        
        :where(body.page-seo-settings) .form-control:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 2px rgba(240, 106, 0, 0.2);
        }
        
        :where(body.page-seo-settings) textarea.form-control {
            min-height: 120px;
            resize: vertical;
        }
        
        :where(body.page-seo-settings) .submit-btn {
            background-color: var(--primary-color);
            color: white;
            border: none;
            padding: 12px;
            border-radius: var(--border-radius);
            cursor: pointer;
            font-weight: 600;
            transition: var(--transition);
        }
        
        :where(body.page-seo-settings) .submit-btn:hover {
            background-color: var(--primary-dark);
        }
        
        :where(body.page-seo-settings) .spinner {
            display: none;
            width: 40px;
            height: 40px;
            margin: 0 auto;
            border: 4px solid var(--primary-light);
            border-radius: 50%;
            border-top: 4px solid var(--primary-color);
            animation: spin--seo-settings 1s linear infinite;
        }
        
        @keyframes spin--seo-settings {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        /* Popup Styles */
        :where(body.page-seo-settings) .popup-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            opacity: 0;
            visibility: hidden;
            transition: var(--transition);
        }
        
        :where(body.page-seo-settings) .popup-overlay.active {
            opacity: 1;
            visibility: visible;
        }
        
        :where(body.page-seo-settings) .popup {
            background-color: var(--bg-primary);
            border-radius: var(--border-radius);
            box-shadow: var(--shadow-lg);
            width: 90%;
            max-width: 400px;
            padding: 25px;
            text-align: center;
            transform: translateY(20px);
            transition: var(--transition);
        }
        
        :where(body.page-seo-settings) .popup-overlay.active .popup {
            transform: translateY(0);
        }
        
        :where(body.page-seo-settings) .popup-icon {
            font-size: 48px;
            margin-bottom: 20px;
        }
        
        :where(body.page-seo-settings) .popup-icon.success {
            color: var(--success-color);
        }
        
        :where(body.page-seo-settings) .popup-icon.error {
            color: var(--danger-color);
        }
        
        :where(body.page-seo-settings) .popup-title {
            font-size: 20px;
            margin-bottom: 15px;
            color: var(--text-primary);
        }
        
        :where(body.page-seo-settings) .popup-message {
            color: var(--text-secondary);
            margin-bottom: 20px;
            line-height: 1.6;
        }
        
        :where(body.page-seo-settings) .popup-btn {
            background-color: var(--primary-color);
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: var(--border-radius);
            cursor: pointer;
            font-weight: 600;
            transition: var(--transition);
        }
        
        :where(body.page-seo-settings) .popup-btn:hover {
            background-color: var(--primary-dark);
        }
        
        :where(body.page-seo-settings) .domain-status {
            margin-top: 5px;
            font-size: 13px;
            padding: 5px;
            border-radius: 4px;
        }
        
        :where(body.page-seo-settings) .domain-available {
            background-color: rgba(0, 184, 148, 0.1);
            color: var(--success-color);
        }
        
        :where(body.page-seo-settings) .domain-taken {
            background-color: rgba(214, 48, 49, 0.1);
            color: var(--danger-color);
        }

/* ==========================================================================
   PAGE: sessions
   source: pages/sessions.php
   ========================================================================== */
:where(body.page-sessions) .header {
            background: white;
            padding: 20px;
            border-radius: 15px;
            margin-bottom: 20px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.1);
        }
        
        :where(body.page-sessions) .header h1 {
            color: #1e7bff;
            margin-bottom: 10px;
        }
        
        :where(body.page-sessions) .header p {
            color: #666;
        }
        
        :where(body.page-sessions) .session-card {
            background: white;
            border-radius: 15px;
            padding: 20px;
            margin-bottom: 15px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: transform 0.2s;
        }
        
        :where(body.page-sessions) .session-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.15);
        }
        
        :where(body.page-sessions) .session-card.current {
            border: 2px solid #1e7bff;
            background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
        }
        
        :where(body.page-sessions) .session-info {
            flex: 1;
        }
        
        :where(body.page-sessions) .session-badge {
            display: inline-block;
            padding: 5px 10px;
            background: #1e7bff;
            color: white;
            border-radius: 20px;
            font-size: 12px;
            margin-bottom: 10px;
        }
        
        :where(body.page-sessions) .device-name {
            font-size: 18px;
            font-weight: bold;
            color: #333;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        :where(body.page-sessions) .device-icon {
            font-size: 24px;
        }
        
        :where(body.page-sessions) .session-details {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 10px;
            margin-top: 10px;
        }
        
        :where(body.page-sessions) .detail-item {
            display: flex;
            align-items: center;
            gap: 8px;
            color: #666;
            font-size: 14px;
        }
        
        :where(body.page-sessions) .detail-item i {
            color: #1e7bff;
        }
        
        :where(body.page-sessions) .session-actions {
            display: flex;
            gap: 10px;
        }
        
        :where(body.page-sessions) .btn {
            padding: 10px 20px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.3s;
            text-decoration: none;
            display: inline-block;
        }
        
        :where(body.page-sessions) .btn-danger {
            background: #ff4757;
            color: white;
        }
        
        :where(body.page-sessions) .btn-danger:hover {
            background: #ee5a6f;
            transform: scale(1.05);
        }
        
        :where(body.page-sessions) .btn-primary {
            background: #1e7bff;
            color: white;
        }
        
        :where(body.page-sessions) .btn-primary:hover {
            background: #02174a;
        }
        
        :where(body.page-sessions) .btn:disabled {
            background: #ccc;
            cursor: not-allowed;
            transform: none;
        }
        
        :where(body.page-sessions) .empty-state {
            text-align: center;
            padding: 60px 20px;
            background: white;
            border-radius: 15px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.1);
        }
        
        :where(body.page-sessions) .empty-state i {
            font-size: 64px;
            color: #ddd;
            margin-bottom: 20px;
        }
        
        :where(body.page-sessions) .back-link {
            display: inline-block;
            margin-bottom: 20px;
            color: white;
            text-decoration: none;
            padding: 10px 20px;
            background: rgba(255,255,255,0.2);
            border-radius: 8px;
            transition: all 0.3s;
        }
        
        :where(body.page-sessions) .back-link:hover {
            background: rgba(255,255,255,0.3);
        }
        
        @media (max-width: 768px) {
            :where(body.page-sessions) .session-card {
                flex-direction: column;
                gap: 15px;
            }
            
            :where(body.page-sessions) .session-actions {
                width: 100%;
                justify-content: center;
            }
        }

/* ==========================================================================
   PAGE: social-links
   source: pages/social-links.php
   ========================================================================== */
:where(body.page-social-links) .container {
            max-width: 800px;
            margin: 30px auto;
            background-color: var(--bg-primary);
            border-radius: var(--border-radius);
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }
        
        :where(body.page-social-links) .tabs {
            display: flex;
            background-color: var(--bg-secondary);
        }
        
        :where(body.page-social-links) .tab-btn {
            flex: 1;
            padding: 15px;
            text-align: center;
            cursor: pointer;
            border: none;
            background: none;
            font-weight: 600;
            color: var(--text-secondary);
            transition: var(--transition);
            border-bottom: 3px solid transparent;
        }
        
        :where(body.page-social-links) .tab-btn.active {
            color: var(--primary-color);
            border-bottom: 3px solid var(--primary-color);
            background-color: var(--bg-primary);
        }
        
        :where(body.page-social-links) .tab-content {
            padding: 30px;
            display: none;
        }
        
        :where(body.page-social-links) .tab-content.active {
            display: block;
        }
        
        :where(body.page-social-links) .social-icon {
            font-size: 24px;
            margin-left: 10px;
            vertical-align: middle;
        }
        
        :where(body.page-social-links) .form-group {
            margin-bottom: 20px;
        }
        
        :where(body.page-social-links) .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: var(--text-secondary);
        }
        
        :where(body.page-social-links) .form-control {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: var(--border-radius);
            transition: var(--transition);
            direction:ltr;
            font-family: 'Times New Roman', serif;
        }
        
        :where(body.page-social-links) .form-control:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 2px rgba(240, 106, 0, 0.2);
        }
        
        :where(body.page-social-links) .submit-btn {
            background-color: var(--primary-color);
            color: white;
            border: none;
            padding: 12px 25px;
            border-radius: var(--border-radius);
            cursor: pointer;
            font-weight: 600;
            transition: var(--transition);
            display: block;
            margin: 0 auto;
        }
        
        :where(body.page-social-links) .submit-btn:hover {
            background-color: var(--primary-dark);
        }
        
        :where(body.page-social-links) .spinner {
            display: none;
            width: 40px;
            height: 40px;
            margin: 20px auto;
            border: 4px solid var(--primary-light);
            border-radius: 50%;
            border-top: 4px solid var(--primary-color);
            animation: spin--social-links 1s linear infinite;
        }
        
        @keyframes spin--social-links {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        :where(body.page-social-links) .popup-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            opacity: 0;
            visibility: hidden;
            transition: var(--transition);
        }
        
        :where(body.page-social-links) .popup-overlay.active {
            opacity: 1;
            visibility: visible;
        }
        
        :where(body.page-social-links) .popup {
            background-color: var(--bg-primary);
            border-radius: var(--border-radius);
            box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
            width: 90%;
            max-width: 400px;
            padding: 25px;
            text-align: center;
            transform: translateY(20px);
            transition: var(--transition);
        }
        
        :where(body.page-social-links) .popup-overlay.active .popup {
            transform: translateY(0);
        }
        
        :where(body.page-social-links) .popup-icon {
            font-size: 48px;
            margin-bottom: 20px;
        }
        
        :where(body.page-social-links) .popup-icon.success {
            color: var(--success-color);
        }
        
        :where(body.page-social-links) .popup-icon.error {
            color: var(--danger-color);
        }
        
        :where(body.page-social-links) .popup-title {
            font-size: 20px;
            margin-bottom: 15px;
        }
        
        :where(body.page-social-links) .popup-message {
            color: var(--text-secondary);
            margin-bottom: 20px;
            line-height: 1.6;
        }
        
        :where(body.page-social-links) .popup-btn {
            background-color: var(--primary-color);
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: var(--border-radius);
            cursor: pointer;
            font-weight: 600;
            transition: var(--transition);
        }
        
        :where(body.page-social-links) .popup-btn:hover {
            background-color: var(--primary-dark);
        }

/* ==========================================================================
   PAGE: supplier
   source: pages/supplier.php
   ========================================================================== */
/* =====================================================
   Supplier Module — Component Styles
===================================================== */

/* ── Tabs ── */
:where(body.page-supplier) .tabs {
    display: flex;
    gap: 6px;
    padding: 16px 0 0 0;
    border-bottom: 2px solid rgba(0,0,0,0.07);
    margin-bottom: 24px;
    flex-wrap: wrap;
}
:where(body.page-supplier) .tab-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.95rem;
    border-radius: 10px 10px 0 0;
    cursor: pointer;
    transition: var(--transition);
    font-family: BHoma, inherit;
    position: relative;
    bottom: -2px;
    border-bottom: 2px solid transparent;
}
:where(body.page-supplier) .tab-btn:hover { color: var(--primary-color); background: rgba(240, 106, 0,0.06); }
:where(body.page-supplier) .tab-btn.active {
    color: var(--primary-color);
    background: var(--bg-primary);
    border-bottom: 2px solid var(--primary-color);
    font-weight: 600;
}
:where(body.page-supplier) .tab-content { display: none; }
:where(body.page-supplier) .tab-content.active { display: block; }

/* ── Card ── */
:where(body.page-supplier) .card {
    background: var(--bg-primary);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    padding: 20px;
    margin-bottom: 20px;
}
:where(body.page-supplier) .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    flex-wrap: wrap;
    gap: 10px;
}
:where(body.page-supplier) .card-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}
:where(body.page-supplier) .card-title i { color: var(--primary-color); }

/* ── Buttons ── */
:where(body.page-supplier) .btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
    font-family: BHoma, inherit;
    text-decoration: none;
    white-space: nowrap;
}
:where(body.page-supplier) .btn:active { transform: scale(0.97); }
:where(body.page-supplier) .btn-primary   { background: var(--primary-color);   color: #fff; }
:where(body.page-supplier) .btn-primary:hover   { background: var(--primary-dark); box-shadow: var(--shadow-md); }
:where(body.page-supplier) .btn-secondary { background: var(--bg-secondary);    color: var(--text-primary); border: 1px solid rgba(0,0,0,0.1); }
:where(body.page-supplier) .btn-secondary:hover { background: #dfe6e9; }
:where(body.page-supplier) .btn-success   { background: var(--success-color);   color: #fff; }
:where(body.page-supplier) .btn-success:hover   { background: #00a381; box-shadow: var(--shadow-md); }
:where(body.page-supplier) .btn-danger    { background: var(--danger-color);    color: #fff; }
:where(body.page-supplier) .btn-danger:hover    { background: #b71c1c; box-shadow: var(--shadow-md); }
:where(body.page-supplier) .btn-warning   { background: var(--warning-color);   color: var(--text-primary); }
:where(body.page-supplier) .btn-sm { padding: 6px 12px; font-size: 0.82rem; border-radius: 6px; }

/* ── Form Controls ── */
:where(body.page-supplier) .form-group { margin-bottom: 14px; }
:where(body.page-supplier) .form-label {
    display: block;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 6px;
}
:where(body.page-supplier) .required { color: var(--danger-color); }
:where(body.page-supplier) .form-control {
    width: 100%;
    padding: 9px 12px;
    border: 1.5px solid rgba(0,0,0,0.12);
    border-radius: 8px;
    font-size: 0.92rem;
    color: var(--text-primary);
    background: var(--bg-primary);
    transition: var(--transition);
    font-family: BHoma, inherit;
    direction: rtl;
    box-sizing: border-box;
}
:where(body.page-supplier) .form-control:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(240, 106, 0,0.15);
}
:where(body.page-supplier) .form-control[readonly] { background: var(--bg-secondary); cursor: pointer; }
:where(body.page-supplier) textarea.form-control { resize: vertical; min-height: 80px; }
:where(body.page-supplier) select.form-control { cursor: pointer; }

/* ── Password Input Wrapper ── */
:where(body.page-supplier) .pwd-input-wrap {
    position: relative;
}
:where(body.page-supplier) .pwd-input-wrap .form-control {
    padding-left: 40px;
}
:where(body.page-supplier) .pwd-toggle-btn {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 0.9rem;
    padding: 4px;
    line-height: 1;
}
:where(body.page-supplier) .pwd-toggle-btn:hover { color: var(--primary-color); }

/* ── Search Box ── */
:where(body.page-supplier) .search-box {
    position: relative;
    display: flex;
    align-items: center;
}
:where(body.page-supplier) .search-box i {
    position: absolute;
    right: 12px;
    color: var(--text-light);
    pointer-events: none;
    font-size: 0.9rem;
}
:where(body.page-supplier) .search-box .form-control { padding-right: 36px; }

/* ── Filter Bar ── */
:where(body.page-supplier) .filter-bar {
    background: var(--bg-secondary);
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 18px;
    border: 1px solid rgba(0,0,0,0.06);
}
:where(body.page-supplier) .filter-bar .grid-4 { align-items: end; }
:where(body.page-supplier) .filter-bar .form-group { margin-bottom: 0; }

/* ── Table ── */
:where(body.page-supplier) .table-container {
    overflow-x: auto;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,0.07);
}
:where(body.page-supplier) .table-container table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}
:where(body.page-supplier) .table-container thead th {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-weight: 600;
    padding: 12px 14px;
    text-align: right;
    border-bottom: 2px solid rgba(0,0,0,0.07);
    white-space: nowrap;
}
:where(body.page-supplier) .table-container tbody td {
    padding: 11px 14px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    color: var(--text-primary);
    vertical-align: middle;
}
:where(body.page-supplier) .table-container tbody tr:last-child td { border-bottom: none; }
:where(body.page-supplier) .table-container tbody tr:hover { background: rgba(240, 106, 0,0.04); }
:where(body.page-supplier) .table-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* ── Grid Layouts ── */
:where(body.page-supplier) .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
:where(body.page-supplier) .grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
:where(body.page-supplier) .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
:where(body.page-supplier) .grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
@media (max-width: 1100px) {
    :where(body.page-supplier) .grid-5 { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 900px) {
    :where(body.page-supplier) .grid-4, :where(body.page-supplier) .grid-5 { grid-template-columns: 1fr 1fr; }
    :where(body.page-supplier) .grid-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
    :where(body.page-supplier) .grid-2, :where(body.page-supplier) .grid-3, :where(body.page-supplier) .grid-4, :where(body.page-supplier) .grid-5 { grid-template-columns: 1fr; }
}

/* ── Summary Cards (Reports) ── */
:where(body.page-supplier) .summary-card {
    background: var(--bg-primary);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: var(--transition);
}
:where(body.page-supplier) .summary-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
:where(body.page-supplier) .summary-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}
:where(body.page-supplier) .summary-icon.blue    { background: rgba(9,132,227,0.12);   color: var(--info-color); }
:where(body.page-supplier) .summary-icon.green   { background: rgba(0,184,148,0.12);   color: var(--success-color); }
:where(body.page-supplier) .summary-icon.success { background: rgba(0,184,148,0.12);   color: var(--success-color); }
:where(body.page-supplier) .summary-icon.danger  { background: rgba(214,48,49,0.12);   color: var(--danger-color); }
:where(body.page-supplier) .summary-icon.warning { background: rgba(253,203,110,0.2);  color: #d4a017; }
:where(body.page-supplier) .summary-title { font-size: 0.82rem; color: var(--text-secondary); margin-bottom: 4px; }
:where(body.page-supplier) .summary-value { font-size: 1.25rem; font-weight: 700; color: var(--text-primary); }

/* ── Modal ── */
:where(body.page-supplier) .modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 2000;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
:where(body.page-supplier) .modal.show { display: flex; opacity: 1; }
:where(body.page-supplier) .modal.show .modal-content { transform: translateY(0); }
:where(body.page-supplier) .modal-content {
    width: 90%;
    max-width: 680px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    background: var(--bg-primary);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg, 0 20px 60px rgba(0,0,0,0.2));
    transform: translateY(-16px);
    transition: transform 0.25s ease;
    overflow: hidden;
}
:where(body.page-supplier) .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    flex-shrink: 0;
}
:where(body.page-supplier) .modal-header h2 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
:where(body.page-supplier) .modal-body {
    padding: 20px;
    overflow-y: auto;
    flex-grow: 1;
}
:where(body.page-supplier) .modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid rgba(0,0,0,0.08);
    flex-shrink: 0;
}
:where(body.page-supplier) .close-modal {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-secondary);
    cursor: pointer;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 4px;
    transition: var(--transition);
}
:where(body.page-supplier) .close-modal:hover { background: rgba(0,0,0,0.07); color: var(--text-primary); }

/* ── Password Confirm Modal ── */
:where(body.page-supplier) .pwd-modal-content {
    max-width: 420px;
}
:where(body.page-supplier) .pwd-modal-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: rgba(214,48,49,0.1);
    color: var(--danger-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin: 0 auto 16px;
}
:where(body.page-supplier) .pwd-modal-title {
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
}
:where(body.page-supplier) .pwd-modal-desc {
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 20px;
}
:where(body.page-supplier) .pwd-error {
    display: none;
    background: rgba(214,48,49,0.08);
    border: 1px solid rgba(214,48,49,0.25);
    color: var(--danger-color);
    border-radius: 8px;
    padding: 9px 14px;
    font-size: 0.85rem;
    margin-top: 10px;
    text-align: center;
}
:where(body.page-supplier) .pwd-error.show { display: block; }

/* ── Payment Fields (toggle) ── */
:where(body.page-supplier) .payment-fields {
    display: none;
    border: 1.5px dashed rgba(240, 106, 0,0.3);
    border-radius: 10px;
    padding: 16px;
    margin-top: 14px;
    background: rgba(240, 106, 0,0.04);
}
:where(body.page-supplier) .payment-fields.active { display: block; }
:where(body.page-supplier) .payment-fields h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    color: var(--primary-color);
    margin-bottom: 14px;
}

/* ── Invoice Item Row ── */
:where(body.page-supplier) .item-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1.5fr 1.5fr auto;
    gap: 10px;
    align-items: end;
    padding: 12px;
    background: var(--bg-secondary);
    border-radius: 8px;
    margin-bottom: 10px;
}
:where(body.page-supplier) .remove-item-btn {
    background: rgba(214,48,49,0.1);
    color: var(--danger-color);
    border: none;
    border-radius: 7px;
    width: 36px;
    height: 36px;
    cursor: pointer;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    margin-bottom: 2px;
}
:where(body.page-supplier) .remove-item-btn:hover { background: var(--danger-color); color: #fff; }
@media (max-width: 700px) {
    :where(body.page-supplier) .item-row { grid-template-columns: 1fr 1fr; }
}

/* ── Date Input Container ── */
:where(body.page-supplier) .date-input-container { position: relative; }

/* ── Badges ── */
:where(body.page-supplier) .badge-success, :where(body.page-supplier) .badge-danger, :where(body.page-supplier) .badge-warning {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 50px;
    font-size: 0.78rem;
    font-weight: 600;
}
:where(body.page-supplier) .badge-success { background: rgba(0,184,148,0.12); color: var(--success-color); }
:where(body.page-supplier) .badge-danger  { background: rgba(214,48,49,0.12); color: var(--danger-color); }
:where(body.page-supplier) .badge-warning { background: rgba(253,203,110,0.2); color: #9a7000; }

/* ── Alert ── */
:where(body.page-supplier) .alert {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 0.92rem;
    margin-bottom: 14px;
    opacity: 0;
    transform: translateY(-8px);
    transition: all 0.3s ease;
}
:where(body.page-supplier) .alert.show { opacity: 1; transform: translateY(0); }
:where(body.page-supplier) .alert-success { background: rgba(0,184,148,0.12); color: var(--success-color); border: 1px solid rgba(0,184,148,0.3); }
:where(body.page-supplier) .alert-danger  { background: rgba(214,48,49,0.1);  color: var(--danger-color);  border: 1px solid rgba(214,48,49,0.25); }
:where(body.page-supplier) .alert-warning { background: rgba(253,203,110,0.2); color: #9a7000; border: 1px solid rgba(253,203,110,0.4); }

/* ── Empty State ── */
:where(body.page-supplier) .empty-state {
    text-align: center;
    padding: 40px 20px !important;
    color: var(--text-light);
}
:where(body.page-supplier) .empty-state i { font-size: 2.5rem; display: block; margin-bottom: 12px; opacity: 0.5; }
:where(body.page-supplier) .empty-state h3 { font-size: 1rem; color: var(--text-secondary); margin-bottom: 6px; }
:where(body.page-supplier) .empty-state p  { font-size: 0.85rem; }

/* ── Loading State ── */
:where(body.page-supplier) .loading { text-align: center; padding: 30px !important; color: var(--text-light); font-style: italic; }

/* ── Divider ── */
:where(body.page-supplier) .section-divider {
    height: 1px;
    background: rgba(0,0,0,0.07);
    margin: 20px 0;
}

/* ── Helpers ── */
:where(body.page-supplier) .mt-20 { margin-top: 20px; }
:where(body.page-supplier) .mb-0  { margin-bottom: 0 !important; }
:where(body.page-supplier) .text-left { text-align: left; }
:where(body.page-supplier) .text-success { color: var(--success-color); }
:where(body.page-supplier) .text-danger  { color: var(--danger-color); }

/* ── Invoice Form Inline Header ── */
:where(body.page-supplier) .inline-form-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 18px;
    margin-bottom: 20px;
    border-bottom: 2px solid rgba(240, 106, 0,0.12);
}
:where(body.page-supplier) .inline-form-header .form-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: rgba(240, 106, 0,0.12);
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}
:where(body.page-supplier) .inline-form-header h2 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
}
:where(body.page-supplier) .inline-form-header p {
    margin: 2px 0 0;
    font-size: 0.83rem;
    color: var(--text-secondary);
}

/* ── Mobile Calendar Overlay ── */
:where(body.page-supplier) #cal-mobile-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 1800;
}
:where(body.page-supplier) #cal-mobile-overlay.active { display: block; }

/* ── Responsive Tweaks ── */
@media (max-width: 768px) {
    :where(body.page-supplier) .tabs { gap: 4px; }
    :where(body.page-supplier) .tab-btn { padding: 8px 14px; font-size: 0.85rem; }
    :where(body.page-supplier) .card { padding: 14px; }
    :where(body.page-supplier) .modal-content { max-width: 100%; width: 100%; border-radius: 16px 16px 0 0; max-height: 92vh; align-self: flex-end; }
    :where(body.page-supplier) .modal { align-items: flex-end; }
    :where(body.page-supplier) .item-row { grid-template-columns: 1fr 1fr; }
    :where(body.page-supplier) .summary-card { padding: 14px; }
}

/* ── Print ── */
@media print {
    :where(body.page-supplier) .tabs, :where(body.page-supplier) .btn, :where(body.page-supplier) .filter-bar, :where(body.page-supplier) .table-actions, :where(body.page-supplier) .modal, :where(body.page-supplier) nav, :where(body.page-supplier) header, :where(body.page-supplier) aside { display: none !important; }
    body:where(.page-supplier) { background: #fff !important; }
    :where(body.page-supplier) .card { box-shadow: none !important; border: 1px solid #ddd; }
}

/* ==========================================================================
   PAGE: support
   source: pages/support.php
   ========================================================================== */
:where(body.page-support) .chat-container {
            margin:-20px;
        }
        :where(body.page-support) .chat-messages {
            flex: 1;
            overflow-y: auto;
            padding: 20px;
            background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AkEEjIZW2XZ3QAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAANElEQVQ4y2NgGAXDFmzatMmKAQ38v2nTpv8w/KgBxGtG1IxRM0bNGDVj1IxRM0bNGDVj1AwAzXoKZQ0jPF8AAAAASUVORK5CYII=');
            background-attachment: fixed;
            margin-bottom: 50px;
        }

        :where(body.page-support) .message {
            margin-bottom: 15px;
            width: 100%;
            position: relative;
            display: flex;
        }

        :where(body.page-support) .message.sent {
            justify-content: flex-start;
        }

        :where(body.page-support) .message.received {
            justify-content: flex-end;
        }

        :where(body.page-support) .message-inner {
            max-width: 100%;
            padding: 12px;
            border-radius: var(--border-radius);
            position: relative;
            word-wrap: break-word;
            box-shadow: var(--shadow-sm);
            transition: var(--transition);
        }

        :where(body.page-support) .received .message-inner {
            background-color: var(--bg-primary);
            border-top-left-radius: 0;
            width:95%;
        }

        :where(body.page-support) .sent .message-inner {
            background-color: var(--primary-light);
            color: var(--text-primary);
            border-bottom-right-radius: 0;
            width:95%;
        }
        :where(body.page-support) .message-time {
            font-size: 0.7rem;
            color: var(--text-secondary);
            margin-top: 5px;
            text-align: left;
            direction: ltr;
            display: inline-block;
        }
        :where(body.page-support) .sent .message-time {
            color: var(--primary-dark);
        }
        :where(body.page-support) .message-actions {
            position: absolute;
            top: 0;
            opacity: 1;
            display: flex;
            gap: 5px;
        }
        :where(body.page-support) .received .message-actions {
            right: -30px;
        }
        :where(body.page-support) .sent .message-actions {
            left: 40px;
            z-index:100;
        }
        :where(body.page-support) .message:hover .message-actions {
            opacity: 1;
        }
        :where(body.page-support) .action-btn {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: var(--primary-light);
            color: #fff;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: var(--transition);
        }

        :where(body.page-support) .action-btn:hover {
            background-color: var(--primary-color);
            color: white;
        }

        :where(body.page-support) .file-message {
            display: flex;
            flex-direction: column;
            padding: 10px;
            background-color: rgba(255, 255, 255, 0.2);
            border-radius: 10px;
            margin-top: 5px;
            cursor: pointer;
            transition: var(--transition);
        }

        :where(body.page-support) .file-message:hover {
            background-color: rgba(255, 255, 255, 0.3);
        }

        :where(body.page-support) .file-preview {
            width: 100%;
            max-height: 200px;
            border-radius: 8px;
            overflow: hidden;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: rgba(0, 0, 0, 0.1);
        }

        :where(body.page-support) .file-preview img {
            max-width: 100%;
            max-height: 200px;
            object-fit: contain;
        }

        :where(body.page-support) .file-preview video {
            max-width: 100%;
            max-height: 200px;
        }

        :where(body.page-support) .file-icon {
            font-size: 3rem;
            color: var(--primary-color);
            margin: 10px 0;
        }

        :where(body.page-support) .file-info {
            display: flex;
            flex-direction: column;
        }

        :where(body.page-support) .file-name {
            font-weight: bold;
            margin-bottom: 5px;
            color: var(--text-primary);
            word-break: break-all;
        }

        :where(body.page-support) .file-size {
            font-size: 0.8rem;
            color: var(--text-secondary);
        }

        :where(body.page-support) .file-download {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            margin-top: 10px;
            color: var(--primary-color);
            text-decoration: none;
            font-size: 0.9rem;
        }

        :where(body.page-support) .typing-indicator {
            display: flex;
            border-radius: 15px;
            font-size: 0.8rem;
            color: green;
        }

        :where(body.page-support) .typing-dots {
            display: inline-flex;
            align-items: center;
            height: 10px;
        }

        :where(body.page-support) .typing-dots span {
            width: 5px;
            height: 5px;
            margin: 0 2px;
            background-color: green;
            border-radius: 50%;
            display: inline-block;
            opacity: 0.4;
        }

        :where(body.page-support) .typing-dots span:nth-child(1) {
            animation: typingAnimation 1s infinite;
        }

        :where(body.page-support) .typing-dots span:nth-child(2) {
            animation: typingAnimation 1s infinite 0.2s;
        }

        :where(body.page-support) .typing-dots span:nth-child(3) {
            animation: typingAnimation 1s infinite 0.4s;
        }

        @keyframes typingAnimation {
            0% {
                opacity: 0.4;
                transform: translateY(0);
            }
            50% {
                opacity: 1;
                transform: translateY(-3px);
            }
            100% {
                opacity: 0.4;
                transform: translateY(0);
            }
        }

        :where(body.page-support) .input-area {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: var(--bg-primary);
            padding: 10px 15px;
            border-top: 1px solid var(--bg-secondary);
            display: flex;
            align-items: center;
            gap: 10px;
            z-index: 100;
        }

        :where(body.page-support) .message-input-container {
            flex: 1;
        }

        :where(body.page-support) #message-input {
            width: 100%;
            border-radius: 20px;
            border: 1px solid var(--bg-secondary);
            padding: 12px 15px;
            resize: none;
            background-color: var(--bg-primary);
            color: var(--text-primary);
            transition: var(--transition);
            max-height: 120px;
            overflow-y: auto;
        }

        :where(body.page-support) #message-input:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 2px rgba(240, 106, 0, 0.2);
        }

        :where(body.page-support) .send-button {
            width: 45px;
            height: 45px;
            border-radius: 50%;
            background-color: var(--primary-color);
            color: white;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: var(--transition);
        }

        :where(body.page-support) .send-button:hover {
            background-color: var(--primary-dark);
        }

        :where(body.page-support) .send-button:disabled {
            background-color: var(--text-light);
            cursor: not-allowed;
        }

        :where(body.page-support) .file-upload-button {
            width: 45px;
            height: 45px;
            border-radius: 50%;
            background-color: var(--bg-secondary);
            color: var(--primary-color);
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            position: relative;
            transition: var(--transition);
        }

        :where(body.page-support) .file-upload-button:hover {
            background-color: var(--primary-light);
            color: white;
        }

        :where(body.page-support) #file-input {
            position: absolute;
            opacity: 0;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            cursor: pointer;
        }

        :where(body.page-support) .file-name-display {
            font-size: 0.9rem;
            color: var(--text-secondary);
            margin-right: 10px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 150px;
            display: none;
        }

        :where(body.page-support) .file-cancel-btn {
            background: none;
            border: none;
            color: var(--danger-color);
            cursor: pointer;
            font-size: 1rem;
            display: none;
        }

        /* مودال‌ها */
        :where(body.page-support) .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.7);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 2000;
            opacity: 0;
            visibility: hidden;
            transition: var(--transition);
        }

        :where(body.page-support) .modal-overlay.active {
            opacity: 1;
            visibility: visible;
        }

        :where(body.page-support) .modal-content {
            background-color: var(--bg-primary);
            border-radius: var(--border-radius);
            box-shadow: var(--shadow-lg);
            transform: translateY(20px);
            transition: var(--transition);
            width: 90%;
            max-width: 500px;
            max-height: 90vh;
            overflow: auto;
        }

        :where(body.page-support) .modal-overlay.active .modal-content {
            transform: translateY(0);
        }

        :where(body.page-support) .modal-header {
            padding: 15px 20px;
            border-bottom: 1px solid var(--bg-secondary);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        :where(body.page-support) .modal-title {
            font-size: 1.2rem;
            font-weight: bold;
        }

        :where(body.page-support) .modal-close {
            background: none;
            border: none;
            font-size: 1.5rem;
            cursor: pointer;
            color: var(--text-secondary);
        }

        :where(body.page-support) .modal-body {
            padding: 20px;
        }

        :where(body.page-support) .modal-footer {
            padding: 15px 20px;
            border-top: 1px solid var(--bg-secondary);
            display: flex;
            justify-content: flex-end;
            gap: 10px;
        }
        
        :where(body.page-support) .form-control {
        box-shadow: var(--shadow-lg);
        width:100%;
        padding:5px;
        margin:5px;
        border-radius:5px;
        }

        :where(body.page-support) .btn {
            padding: 8px 16px;
            border-radius: var(--border-radius);
            border: none;
            cursor: pointer;
            transition: var(--transition);
        }

        :where(body.page-support) .btn-primary {
            background-color: var(--primary-color);
            color: white;
        }

        :where(body.page-support) .btn-primary:hover {
            background-color: var(--primary-dark);
        }

        :where(body.page-support) .btn-secondary {
            background-color: var(--bg-secondary);
            color: var(--text-primary);
        }

        :where(body.page-support) .btn-secondary:hover {
            background-color: var(--text-light);
        }

        /* حالت موبایل */
        @media screen and (max-width: 768px) {
            :where(body.page-support) .message-inner {
                max-width: 90%;
            }
            
            :where(body.page-support) .file-name-display {
                max-width: 100px;
            }
            
            :where(body.page-support) .chat-header .admin-name {
                font-size: 1rem;
            }
            
            :where(body.page-support) .chat-header .admin-status {
                display: none;
            }
        }

/* ==========================================================================
   PAGE: theme-settings
   source: includes/themes-settings/canopy.php, includes/themes-settings/free.php, includes/themes-settings/minimal-new.php, includes/themes-settings/minimal.php
   ========================================================================== */
/* --- from includes/themes-settings/canopy.php --- */
/* ============================================================
   MenuSoft Theme Panel — v3.0 Pro  |  RTL
============================================================ */
body:where(.page-theme-settings), :where(body.page-theme-settings) *, body:where(.page-theme-settings)::before, :where(body.page-theme-settings) *::before, body:where(.page-theme-settings)::after, :where(body.page-theme-settings) *::after { box-sizing: border-box; margin: 0; padding: 0; }

:where(body.page-theme-settings) .ms-wrap {
    --ms-radius: 14px;
    --ms-radius-sm: 8px;
    --ms-radius-lg: 20px;
    --ms-trans: all .2s cubic-bezier(.4,0,.2,1);
    font-family: inherit;
    direction: rtl;
    padding: 1.25rem;
    margin: -28px;
    position: relative;
    z-index: 1;
}

/* ─── هدر ─── */
:where(body.page-theme-settings) .ms-header {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: .75rem; padding: 1rem 1.25rem;
    background: var(--bg-primary); border-radius: var(--ms-radius);
    box-shadow: var(--shadow-md); margin-bottom: 1rem;
    border-bottom: 3px solid var(--primary-color);
}
:where(body.page-theme-settings) .ms-header-left { display: flex; align-items: center; gap: .75rem; }
:where(body.page-theme-settings) .ms-header-icon {
    width: 42px; height: 42px;
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color,#8bc34a));
    border-radius: 12px; display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1.1rem; box-shadow: 0 4px 12px rgba(0,0,0,.2); flex-shrink: 0;
}
:where(body.page-theme-settings) .ms-header h1 { font-size: 1rem; font-weight: 700; color: var(--text-primary); margin: 0; }
:where(body.page-theme-settings) .ms-header-sub { font-size: .72rem; color: var(--text-light); margin-top: .1rem; }

/* ─── alert ─── */
:where(body.page-theme-settings) .ms-alert {
    display: flex; align-items: center; gap: .6rem;
    padding: .75rem 1rem; border-radius: var(--ms-radius-sm);
    margin-bottom: .9rem; font-size: .85rem;
}
:where(body.page-theme-settings) .ms-alert.success { background: rgba(0,184,148,.08); color: var(--success-color); border: 1px solid rgba(0,184,148,.2); }
:where(body.page-theme-settings) .ms-alert.error   { background: rgba(214,48,49,.07);  color: var(--danger-color);  border: 1px solid rgba(214,48,49,.18); }

/* ─── ناوبری تب‌ها ─── */
:where(body.page-theme-settings) .ms-nav {
    display: flex; flex-wrap: nowrap; overflow-x: auto;
    gap: .25rem; padding: .4rem .5rem;
    background: var(--bg-primary); border-radius: var(--ms-radius);
    box-shadow: var(--shadow-sm); margin-bottom: 1rem; scrollbar-width: thin;
}
:where(body.page-theme-settings) .ms-nav::-webkit-scrollbar { height: 3px; }
:where(body.page-theme-settings) .ms-nav::-webkit-scrollbar-thumb { background: var(--text-light); border-radius: 99px; }
:where(body.page-theme-settings) .ms-nav-btn {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .42rem .8rem; white-space: nowrap;
    background: none; border: none; border-radius: var(--ms-radius-sm);
    color: var(--text-secondary); font-family: inherit; font-size: .8rem;
    cursor: pointer; transition: var(--ms-trans); flex-shrink: 0;
}
:where(body.page-theme-settings) .ms-nav-btn i { font-size: .8rem; opacity: .75; }
:where(body.page-theme-settings) .ms-nav-btn:hover { background: var(--bg-secondary); color: var(--primary-color); }
:where(body.page-theme-settings) .ms-nav-btn.active { background: var(--primary-color); color: #fff; font-weight: 600; box-shadow: 0 2px 8px rgba(0,0,0,.2); }
:where(body.page-theme-settings) .ms-nav-btn.active i { opacity: 1; }

/* ─── محتوای تب ─── */
:where(body.page-theme-settings) .ms-pane { display: none; }
:where(body.page-theme-settings) .ms-pane.active { display: block; animation: msFadeIn .2s ease; }
@keyframes msFadeIn { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:translateY(0)} }

/* ─── گرید ─── */
:where(body.page-theme-settings) .ms-grid-2   { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }
:where(body.page-theme-settings) .ms-grid-3   { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .85rem; }
:where(body.page-theme-settings) .ms-grid-4   { display: grid; grid-template-columns: repeat(4,1fr); gap: .85rem; }
:where(body.page-theme-settings) .ms-grid-auto{ display: grid; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); gap: .75rem; }
:where(body.page-theme-settings) .ms-grid-colors { display: grid; grid-template-columns: repeat(auto-fill,minmax(200px,1fr)); gap: .7rem; }
@media(max-width:960px){ :where(body.page-theme-settings) .ms-grid-3{grid-template-columns:1fr 1fr} :where(body.page-theme-settings) .ms-grid-4{grid-template-columns:1fr 1fr} }
@media(max-width:700px){ :where(body.page-theme-settings) .ms-grid-2,:where(body.page-theme-settings) .ms-grid-3,:where(body.page-theme-settings) .ms-grid-4{grid-template-columns:1fr} }

/* ─── کارت ─── */
:where(body.page-theme-settings) .ms-card {
    background: var(--bg-primary); border-radius: var(--ms-radius);
    box-shadow: var(--shadow-md); padding: 1rem 1.15rem; margin-bottom: .85rem;
}
:where(body.page-theme-settings) .ms-card-title {
    font-size: .88rem; font-weight: 700; color: var(--text-primary);
    margin-bottom: .85rem; padding-bottom: .5rem;
    border-bottom: 1.5px solid var(--bg-secondary);
    display: flex; align-items: center; gap: .45rem;
}
:where(body.page-theme-settings) .ms-card-title i { color: var(--primary-color); font-size: .85rem; }
:where(body.page-theme-settings) .ms-sub-title {
    font-size: .7rem; font-weight: 700; color: var(--text-light);
    letter-spacing: .4px; text-transform: uppercase;
    margin: .85rem 0 .5rem; padding-bottom: .3rem;
    border-bottom: 1px dashed var(--bg-secondary);
    display: flex; align-items: center; gap: .35rem;
}

/* ─── فرم ─── */
:where(body.page-theme-settings) .ms-field { margin-bottom: .7rem; }
:where(body.page-theme-settings) .ms-label { display: block; font-size: .75rem; font-weight: 600; color: var(--text-secondary); margin-bottom: .28rem; }
:where(body.page-theme-settings) .ms-hint  { font-size: .68rem; color: var(--text-light); margin-top: .18rem; line-height: 1.4; }

:where(body.page-theme-settings) .ms-select, :where(body.page-theme-settings) .ms-input {
    width: 100%; padding: .44rem .7rem;
    background: var(--bg-secondary); border: 1.5px solid transparent;
    border-radius: var(--ms-radius-sm); color: var(--text-primary);
    font-family: inherit; font-size: .84rem; transition: var(--ms-trans);
    outline: none; -webkit-appearance: none; appearance: none;
}
:where(body.page-theme-settings) .ms-select:focus, :where(body.page-theme-settings) .ms-input:focus {
    border-color: var(--primary-color); background: var(--bg-primary);
    box-shadow: 0 0 0 3px rgba(240, 106, 0,.1);
}
:where(body.page-theme-settings) .ms-textarea {
    width: 100%; padding: .5rem .7rem; background: var(--bg-secondary);
    border: 1.5px solid transparent; border-radius: var(--ms-radius-sm);
    color: var(--text-primary); font-family: monospace; font-size: .8rem;
    resize: vertical; transition: var(--ms-trans); outline: none; direction: ltr;
}
:where(body.page-theme-settings) .ms-textarea:focus { border-color: var(--primary-color); background: var(--bg-primary); box-shadow: 0 0 0 3px rgba(240, 106, 0,.1); }

/* ─── font select با پیش‌نمایش ─── */
:where(body.page-theme-settings) .ms-font-select-wrap { position: relative; }
:where(body.page-theme-settings) .ms-font-select-wrap .ms-select { padding-left: 2.4rem; }
:where(body.page-theme-settings) .ms-font-preview-badge {
    position: absolute; left: .5rem; top: 50%; transform: translateY(-50%);
    font-size: .95rem; pointer-events: none; color: var(--text-primary);
    font-weight: 700;
}
:where(body.page-theme-settings) .ms-font-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: .6rem;
    padding: .75rem; background: var(--bg-secondary); border-radius: var(--ms-radius-sm);
    margin-bottom: .5rem;
}
:where(body.page-theme-settings) .ms-font-row-label {
    font-size: .7rem; font-weight: 700; color: var(--text-light);
    margin-bottom: .3rem; display: flex; align-items: center; gap: .3rem;
}
:where(body.page-theme-settings) .ms-font-row-label i { color: var(--primary-color); }
@media(max-width:700px){ :where(body.page-theme-settings) .ms-font-row { grid-template-columns: 1fr; } }

/* ─── سوئیچ ─── */
:where(body.page-theme-settings) .ms-switch { display: inline-flex; align-items: center; gap: .55rem; cursor: pointer; margin-bottom: .65rem; user-select: none; }
:where(body.page-theme-settings) .ms-switch input { display: none; }
:where(body.page-theme-settings) .ms-switch-track {
    width: 36px; height: 20px; background: var(--text-light);
    border-radius: 10px; position: relative; transition: var(--ms-trans); flex-shrink: 0;
}
:where(body.page-theme-settings) .ms-switch-track::after {
    content: ''; position: absolute; width: 14px; height: 14px;
    background: #fff; border-radius: 50%; top: 3px; right: 3px;
    transition: var(--ms-trans); box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
:where(body.page-theme-settings) .ms-switch input:checked + .ms-switch-track { background: var(--primary-color); }
:where(body.page-theme-settings) .ms-switch input:checked + .ms-switch-track::after { right: calc(100% - 17px); }
:where(body.page-theme-settings) .ms-switch-label { font-size: .84rem; color: var(--text-primary); }

/* ─── چک‌باکس ─── */
:where(body.page-theme-settings) .ms-check { display: flex; align-items: center; gap: .5rem; margin-bottom: .45rem; cursor: pointer; }
:where(body.page-theme-settings) .ms-check input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--primary-color); cursor: pointer; flex-shrink: 0; }
:where(body.page-theme-settings) .ms-check span { font-size: .84rem; color: var(--text-primary); }

/* ─── رنج ─── */
:where(body.page-theme-settings) .ms-range-row { display: flex; align-items: center; gap: .6rem; }
:where(body.page-theme-settings) .ms-range { flex: 1; accent-color: var(--primary-color); height: 3px; cursor: pointer; border-radius: 2px; }
:where(body.page-theme-settings) .ms-range-val { font-size: .75rem; font-weight: 700; color: var(--primary-color); min-width: 48px; text-align: left; background: var(--bg-secondary); padding: .2rem .4rem; border-radius: 5px; }

/* ─── رنگ‌ساز ─── */
:where(body.page-theme-settings) .ms-color-row { display: flex; align-items: center; gap: .45rem; }
:where(body.page-theme-settings) .ms-color-pick { width: 32px; height: 32px; border: 2px solid var(--bg-secondary); border-radius: 8px; cursor: pointer; padding: 2px; background: var(--bg-secondary); flex-shrink: 0; transition: var(--ms-trans); }
:where(body.page-theme-settings) .ms-color-pick:hover { border-color: var(--primary-color); }
:where(body.page-theme-settings) .ms-color-txt { flex: 1; padding: .36rem .6rem; background: var(--bg-secondary); border: 1.5px solid transparent; border-radius: var(--ms-radius-sm); color: var(--text-primary); font-family: monospace; font-size: .78rem; outline: none; transition: var(--ms-trans); }
:where(body.page-theme-settings) .ms-color-txt:focus { border-color: var(--primary-color); }
:where(body.page-theme-settings) .ms-color-card { background: var(--bg-primary); border-radius: var(--ms-radius); box-shadow: var(--shadow-sm); padding: .7rem .85rem; transition: var(--ms-trans); border: 1.5px solid transparent; }
:where(body.page-theme-settings) .ms-color-card:hover { box-shadow: var(--shadow-md); border-color: var(--primary-color); transform: translateY(-2px); }
:where(body.page-theme-settings) .ms-color-name { font-size: .72rem; color: var(--text-secondary); font-weight: 600; margin-bottom: .3rem; display: flex; align-items: center; gap: .3rem; }
:where(body.page-theme-settings) .ms-color-badge { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

/* ─── opacity strip ─── */
:where(body.page-theme-settings) .ms-opacity-row { display: flex; align-items: center; gap: .5rem; margin-top: .4rem; padding: .5rem .65rem; background: var(--bg-secondary); border-radius: var(--ms-radius-sm); }
:where(body.page-theme-settings) .ms-opacity-label { font-size: .72rem; color: var(--text-light); white-space: nowrap; }

/* ─── انتخاب تصویر ─── */
:where(body.page-theme-settings) .ms-img-pick { display: flex; align-items: stretch; gap: .5rem; }
:where(body.page-theme-settings) .ms-img-preview { width: 56px; height: 56px; border-radius: var(--ms-radius-sm); object-fit: cover; flex-shrink: 0; background: var(--bg-secondary); border: 1.5px dashed var(--text-light); display: flex; align-items: center; justify-content: center; color: var(--text-light); font-size: .9rem; overflow: hidden; }
:where(body.page-theme-settings) .ms-img-preview img { width: 100%; height: 100%; object-fit: cover; }
:where(body.page-theme-settings) .ms-img-inputs { flex: 1; display: flex; flex-direction: column; gap: .35rem; }
:where(body.page-theme-settings) .ms-btn-pick-img { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .7rem; background: rgba(9,132,227,.12); border: 1.5px solid rgba(9,132,227,.25); border-radius: var(--ms-radius-sm); color: var(--info-color,#0984e3); font-family: inherit; font-size: .75rem; font-weight: 600; cursor: pointer; transition: var(--ms-trans); white-space: nowrap; }
:where(body.page-theme-settings) .ms-btn-pick-img:hover { background: rgba(9,132,227,.2); }

/* ─── آیکون دسته ─── */
:where(body.page-theme-settings) .ms-icon-card { background: var(--bg-primary); border-radius: var(--ms-radius); box-shadow: var(--shadow-sm); padding: .7rem .85rem; }
:where(body.page-theme-settings) .ms-icon-card label { display: block; font-size: .78rem; color: var(--text-secondary); font-weight: 600; margin-bottom: .3rem; }

/* ─── لوگو preview ─── */
:where(body.page-theme-settings) .ms-logo-preview-wrap { display: flex; align-items: center; justify-content: center; padding: 1.25rem; background: var(--bg-secondary); border-radius: var(--ms-radius); margin-bottom: .85rem; }
:where(body.page-theme-settings) .ms-logo-preview {
    background: var(--bg-primary); display: flex; align-items: center; justify-content: center;
    overflow: hidden; transition: var(--ms-trans);
    font-size: .75rem; color: var(--text-light); font-weight: 600;
}
:where(body.page-theme-settings) .ms-logo-preview img { width: 100%; height: 100%; object-fit: cover; }

/* ─── دکمه رسانه ─── */
:where(body.page-theme-settings) .ms-btn-media { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .8rem; background: var(--info-color,#0984e3); color: #fff; border: none; border-radius: var(--ms-radius-sm); font-family: inherit; font-size: .78rem; font-weight: 600; cursor: pointer; transition: var(--ms-trans); margin-bottom: .7rem; }
:where(body.page-theme-settings) .ms-btn-media:hover { filter: brightness(1.1); }

/* ─── disabled ─── */
:where(body.page-theme-settings) .ms-disabled { opacity: .4; pointer-events: none; transition: var(--ms-trans); user-select: none; }

/* ─── دکمه ذخیره ─── */
:where(body.page-theme-settings) .ms-save-bar { text-align: center; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--bg-secondary); }
:where(body.page-theme-settings) .ms-btn-save { display: inline-flex; align-items: center; gap: .55rem; padding: .7rem 2.8rem; background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color,#8bc34a) 100%); color: #fff; border: none; border-radius: var(--ms-radius); font-family: inherit; font-size: .95rem; font-weight: 700; cursor: pointer; box-shadow: 0 4px 18px rgba(0,0,0,.25); transition: var(--ms-trans); }
:where(body.page-theme-settings) .ms-btn-save:hover { filter: brightness(1.08); transform: translateY(-2px); box-shadow: 0 6px 22px rgba(0,0,0,.3); }
:where(body.page-theme-settings) .ms-btn-save:active { transform: translateY(0); }

/* ─── separator ─── */
:where(body.page-theme-settings) .ms-sep { height: 1px; background: var(--bg-secondary); margin: .7rem 0; }

/* ─── مودال ─── */
:where(body.page-theme-settings) .ms-modal-bg { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 2000; justify-content: center; align-items: center; padding: 1rem; backdrop-filter: blur(4px); }
:where(body.page-theme-settings) .ms-modal-bg.open { display: flex; }
:where(body.page-theme-settings) .ms-modal { background: var(--bg-primary); border-radius: var(--ms-radius-lg); box-shadow: var(--shadow-lg); width: 100%; max-width: 900px; max-height: 90vh; display: flex; flex-direction: column; animation: msModalIn .22s cubic-bezier(.34,1.56,.64,1); overflow: hidden; }
@keyframes msModalIn { from{opacity:0;transform:scale(.94) translateY(12px)} to{opacity:1;transform:scale(1) translateY(0)} }
:where(body.page-theme-settings) .ms-modal-head { display: flex; justify-content: space-between; align-items: center; padding: .85rem 1.15rem; border-bottom: 1px solid var(--bg-secondary); flex-shrink: 0; }
:where(body.page-theme-settings) .ms-modal-head h5 { font-size: .92rem; font-weight: 700; color: var(--text-primary); margin: 0; display: flex; align-items: center; gap: .4rem; }
:where(body.page-theme-settings) .ms-modal-head h5 i { color: var(--primary-color); }
:where(body.page-theme-settings) .ms-modal-close { background: none; border: none; font-size: 1.1rem; color: var(--text-secondary); cursor: pointer; padding: .2rem .4rem; border-radius: 6px; transition: var(--ms-trans); }
:where(body.page-theme-settings) .ms-modal-close:hover { background: var(--bg-secondary); color: var(--danger-color); }
:where(body.page-theme-settings) .ms-modal-body { padding: .9rem 1.15rem; overflow-y: auto; flex: 1; }
:where(body.page-theme-settings) .ms-modal-foot { padding: .65rem 1.15rem; border-top: 1px solid var(--bg-secondary); display: flex; justify-content: flex-end; flex-shrink: 0; }
:where(body.page-theme-settings) .ms-media-toolbar { display: flex; gap: .45rem; flex-wrap: wrap; margin-bottom: .85rem; }
:where(body.page-theme-settings) .ms-btn-upload { display: inline-flex; align-items: center; gap: .38rem; padding: .4rem .8rem; background: var(--primary-color); color: #fff; border: none; border-radius: var(--ms-radius-sm); font-family: inherit; font-size: .78rem; font-weight: 600; cursor: pointer; transition: var(--ms-trans); }
:where(body.page-theme-settings) .ms-btn-upload:hover { filter: brightness(1.1); }
:where(body.page-theme-settings) .ms-media-label { font-size: .78rem; font-weight: 700; color: var(--text-secondary); margin: .75rem 0 .45rem; }
:where(body.page-theme-settings) .ms-media-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(128px,1fr)); gap: .55rem; }
:where(body.page-theme-settings) .ms-media-item { background: var(--bg-secondary); border-radius: var(--ms-radius-sm); overflow: hidden; transition: var(--ms-trans); cursor: pointer; }
:where(body.page-theme-settings) .ms-media-item:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
:where(body.page-theme-settings) .ms-media-item img, :where(body.page-theme-settings) .ms-media-item video { width: 100%; height: 88px; object-fit: cover; display: block; }
:where(body.page-theme-settings) .ms-media-info { padding: .35rem .45rem; }
:where(body.page-theme-settings) .ms-media-name { font-size: .67rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: .3rem; }
:where(body.page-theme-settings) .ms-media-actions { display: flex; gap: .25rem; }
:where(body.page-theme-settings) .ms-media-btn { flex: 1; padding: .26rem 0; border: none; border-radius: 5px; font-size: .65rem; cursor: pointer; font-family: inherit; transition: var(--ms-trans); display: flex; align-items: center; justify-content: center; }
:where(body.page-theme-settings) .ms-media-btn.set-img    { background: rgba(0,184,148,.12); color: var(--success-color); }
:where(body.page-theme-settings) .ms-media-btn.add-slide  { background: rgba(240, 106, 0,.1);  color: var(--primary-color); }
:where(body.page-theme-settings) .ms-media-btn.set-vid    { background: rgba(9,132,227,.12);  color: var(--info-color,#0984e3); }
:where(body.page-theme-settings) .ms-media-btn.set-header { background: rgba(253,203,110,.12);color: #e67e22; }
:where(body.page-theme-settings) .ms-media-btn.set-footer { background: rgba(162,155,254,.12);color: #ffa24d; }
:where(body.page-theme-settings) .ms-media-btn.del        { background: rgba(214,48,49,.1);   color: var(--danger-color); }
:where(body.page-theme-settings) .ms-media-btn:hover { filter: brightness(1.15); }
:where(body.page-theme-settings) .ms-btn-close-modal { padding: .4rem .85rem; background: var(--bg-secondary); border: none; border-radius: var(--ms-radius-sm); color: var(--text-secondary); font-family: inherit; font-size: .8rem; cursor: pointer; transition: var(--ms-trans); }
:where(body.page-theme-settings) .ms-btn-close-modal:hover { background: var(--bg-secondary); color: var(--danger-color); }

/* ─── padding grid 3col ─── */
:where(body.page-theme-settings) .ms-pad-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .5rem; }
@media(max-width:600px){ :where(body.page-theme-settings) .ms-pad-grid { grid-template-columns: 1fr 1fr; } }

/* ─── logo shape btn group ─── */
:where(body.page-theme-settings) .ms-shape-group { display: flex; gap: .4rem; }
:where(body.page-theme-settings) .ms-shape-btn {
    flex: 1; padding: .55rem .3rem; text-align: center; cursor: pointer;
    background: var(--bg-secondary); border: 2px solid transparent;
    border-radius: var(--ms-radius-sm); font-size: .72rem; color: var(--text-secondary);
    transition: var(--ms-trans); user-select: none;
}
:where(body.page-theme-settings) .ms-shape-btn i { display: block; font-size: 1.3rem; margin-bottom: .2rem; }
:where(body.page-theme-settings) .ms-shape-btn.active { border-color: var(--primary-color); color: var(--primary-color); background: rgba(240, 106, 0,.07); }

/* ─── icon position preview ─── */
:where(body.page-theme-settings) .ms-icon-pos-group { display: flex; gap: .4rem; flex-wrap: wrap; }
:where(body.page-theme-settings) .ms-icon-pos-btn {
    flex: 1; min-width: 70px; padding: .5rem .3rem; text-align: center; cursor: pointer;
    background: var(--bg-secondary); border: 2px solid transparent;
    border-radius: var(--ms-radius-sm); font-size: .72rem; color: var(--text-secondary);
    transition: var(--ms-trans); user-select: none; display: flex; align-items: center; justify-content: center; gap: .3rem;
}
:where(body.page-theme-settings) .ms-icon-pos-btn.active { border-color: var(--primary-color); color: var(--primary-color); background: rgba(240, 106, 0,.07); }
/* icon-top: آیکون بالا، متن پایین */
:where(body.page-theme-settings) .ms-icon-pos-btn[data-pos="top"]    { flex-direction: column; }
:where(body.page-theme-settings) .ms-icon-pos-btn[data-pos="bottom"] { flex-direction: column-reverse; }
:where(body.page-theme-settings) .ms-icon-pos-btn[data-pos="right"]  { flex-direction: row; }
:where(body.page-theme-settings) .ms-icon-pos-btn[data-pos="left"]   { flex-direction: row-reverse; }
:where(body.page-theme-settings) .ms-icon-pos-btn i { font-size: .9rem; }

/* ─── border sides selector ─── */
:where(body.page-theme-settings) .ms-border-sides-row { display: flex; gap: .4rem; flex-wrap: wrap; }
:where(body.page-theme-settings) .ms-border-side-btn {
    flex: 1; min-width: 60px; padding: .45rem .3rem; text-align: center; cursor: pointer;
    background: var(--bg-secondary); border: 2px solid transparent;
    border-radius: var(--ms-radius-sm); font-size: .7rem; color: var(--text-secondary);
    transition: var(--ms-trans); user-select: none;
}
:where(body.page-theme-settings) .ms-border-side-btn.active { border-color: var(--primary-color); color: var(--primary-color); background: rgba(240, 106, 0,.07); }

/* ─── conditional sub-group toggle ─── */
:where(body.page-theme-settings) .ms-sub-group { margin-top: .5rem; padding: .6rem .75rem; background: var(--bg-secondary); border-radius: var(--ms-radius-sm); }

/* ─── zero-gap note hint ─── */
:where(body.page-theme-settings) .ms-zero-gap-hint {
    font-size: .68rem; color: var(--text-light); padding: .3rem .5rem;
    background: rgba(240, 106, 0,.07); border-radius: 5px; margin-top: .35rem;
    display: flex; align-items: center; gap: .3rem;
}
/* --- from includes/themes-settings/free.php --- */
:where(body.page-theme-settings) .container {
        max-width: 1200px;
        margin: -25px;
        padding: 10px;
    }
    :where(body.page-theme-settings) .card {
        background-color: var(--bg-primary);
        border: none;
        border-radius: var(--border-radius);
        box-shadow: var(--shadow-md);
        transition: var(--transition);
        padding: 20px;
        margin-bottom: 20px;
    }
    :where(body.page-theme-settings) .card-header {
        background-color: var(--primary-color);
        color: white;
        border-radius: var(--border-radius) var(--border-radius) 0 0 !important;
        padding: 15px 20px;
        margin-bottom: 20px;
    }
    :where(body.page-theme-settings) .card-title {
        margin-bottom: 0;
        font-weight: 600;
    }
    
    :where(body.page-theme-settings) .form-label {
        font-weight: 500;
        color: var(--text-secondary);
        margin-bottom: 8px;
        display: block;
    }
    
    :where(body.page-theme-settings) .form-select, :where(body.page-theme-settings) .form-control {
        background-color: var(--bg-primary);
        border: 1px solid var(--text-light);
        color: var(--text-primary);
        border-radius: var(--border-radius);
        padding: 10px 15px;
        transition: var(--transition);
        width: 100%;
        margin-bottom: 15px;
    }
    
    :where(body.page-theme-settings) .form-select:focus, :where(body.page-theme-settings) .form-control:focus {
        border-color: var(--primary-light);
        box-shadow: 0 0 0 0.25rem rgba(240, 106, 0, 0.25);
        outline: none;
    }
    
    :where(body.page-theme-settings) .color-preview {
        width: 50px;
        height: 50px;
        border-radius: var(--border-radius);
        display: inline-block;
        margin-right: 10px;
        vertical-align: middle;
        border: 1px solid var(--text-light);
        transition: var(--transition);
    }
    
    :where(body.page-theme-settings) .btn {
        display: inline-block;
        padding: 10px 20px;
        border-radius: var(--border-radius);
        transition: var(--transition);
        border: none;
        cursor: pointer;
        text-align: center;
        font-weight: 500;
    }
    
    :where(body.page-theme-settings) .btn-primary {
        background-color: var(--primary-color);
        color: white;
    }
    
    :where(body.page-theme-settings) .btn-primary:hover {
        background-color: var(--primary-dark);
    }
    
    :where(body.page-theme-settings) .alert {
        padding: 15px;
        border-radius: var(--border-radius);
        margin-bottom: 20px;
        position: relative;
    }
    
    :where(body.page-theme-settings) .alert-success {
        background-color: rgba(0, 184, 148, 0.2);
        border: 1px solid var(--success-color);
        color: var(--success-color);
    }
    
    :where(body.page-theme-settings) .alert-danger {
        background-color: rgba(214, 48, 49, 0.2);
        border: 1px solid var(--danger-color);
        color: var(--danger-color);
    }
    
    :where(body.page-theme-settings) .btn-close {
        background: none;
        border: none;
        cursor: pointer;
        position: absolute;
        top: 10px;
        left: 10px;
        font-size: 18px;
    }
    
    :where(body.page-theme-settings) .d-none {
        display: none;
    }
    
    :where(body.page-theme-settings) .d-flex {
        display: flex;
    }
    
    :where(body.page-theme-settings) .align-items-center {
        align-items: center;
    }
    
    :where(body.page-theme-settings) .w-100 {
        width: 100%;
    }
    
    :where(body.page-theme-settings) .mt-3 {
        margin-top: 1rem;
    }
    
    :where(body.page-theme-settings) .mb-3 {
        margin-bottom: 1rem;
    }
    :where(body.page-theme-settings) iframe {
            width: 100%;
            height: 300px;
            border: 0px;
            margin-top: 10px;
            margin-bottom: -30px;
        }
/* --- from includes/themes-settings/minimal-new.php --- */
:where(body.page-theme-settings) .container {
            max-width: 1000px;
            margin: 0 auto;
            background-color: var(--bg-primary);
            border-radius: var(--border-radius);
            box-shadow: var(--shadow-lg);
            padding: 30px;
        }
        
        :where(body.page-theme-settings) h1 {
            text-align: center;
            margin-bottom: 30px;
            color: var(--primary-color);
        }
        
        :where(body.page-theme-settings) .form-group {
            margin-bottom: 20px;
        }
        
        :where(body.page-theme-settings) label {
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
            color: var(--text-secondary);
        }
        
        :where(body.page-theme-settings) input[type="text"],
        :where(body.page-theme-settings) input[type="url"],
        :where(body.page-theme-settings) select,
        :where(body.page-theme-settings) textarea {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid var(--text-light);
            border-radius: var(--border-radius);
            font-size: 16px;
            transition: var(--transition);
            background-color: var(--bg-primary);
            color: var(--text-primary);
        }
        
        :where(body.page-theme-settings) input[type="text"]:focus,
        :where(body.page-theme-settings) input[type="url"]:focus,
        :where(body.page-theme-settings) select:focus,
        :where(body.page-theme-settings) textarea:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px var(--primary-light);
        }
        
        :where(body.page-theme-settings) .color-options {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }
        
        :where(body.page-theme-settings) .color-option {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            cursor: pointer;
            transition: var(--transition);
            border: 3px solid transparent;
        }
        
        :where(body.page-theme-settings) .color-option:hover {
            transform: scale(1.1);
        }
        
        :where(body.page-theme-settings) .color-option.selected {
            border-color: var(--bg-dark);
            transform: scale(1.1);
        }
        
        :where(body.page-theme-settings) .btn {
            padding: 12px 25px;
            border: none;
            border-radius: var(--border-radius);
            cursor: pointer;
            font-size: 16px;
            font-weight: bold;
            transition: var(--transition);
        }
        
        :where(body.page-theme-settings) .btn-primary {
            background-color: var(--primary-color);
            color: white;
        }
        
        :where(body.page-theme-settings) .btn-primary:hover {
            background-color: var(--primary-dark);
        }
        
        :where(body.page-theme-settings) .btn-secondary {
            background-color: var(--secondary-color);
            color: white;
        }
        
        :where(body.page-theme-settings) .btn-secondary:hover {
            background-color: #00a382;
        }
        
        :where(body.page-theme-settings) .form-actions {
            display: flex;
            justify-content: flex-end;
            gap: 15px;
            margin-top: 30px;
        }
        
        :where(body.page-theme-settings) .alert {
            padding: 15px;
            border-radius: var(--border-radius);
            margin-bottom: 20px;
            display: none;
        }
        
        :where(body.page-theme-settings) .alert-success {
            background-color: rgba(0, 184, 148, 0.2);
            color: var(--success-color);
            border: 1px solid var(--success-color);
        }
        
        :where(body.page-theme-settings) .alert-error {
            background-color: rgba(214, 48, 49, 0.2);
            color: var(--danger-color);
            border: 1px solid var(--danger-color);
        }
        
        :where(body.page-theme-settings) .theme-style-options {
            display: flex;
            gap: 15px;
        }
        
        :where(body.page-theme-settings) .theme-style-option {
            flex: 1;
            text-align: center;
            padding: 15px;
            border: 2px solid var(--text-light);
            border-radius: var(--border-radius);
            cursor: pointer;
            transition: var(--transition);
        }
        
        :where(body.page-theme-settings) .theme-style-option:hover {
            border-color: var(--primary-color);
        }
        
        :where(body.page-theme-settings) .theme-style-option.selected {
            border-color: var(--primary-color);
            background-color: var(--primary-light);
            color: white;
        }
        
        :where(body.page-theme-settings) .switch {
            position: relative;
            display: inline-block;
            width: 60px;
            height: 30px;
        }
        
        :where(body.page-theme-settings) .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        
        :where(body.page-theme-settings) .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: var(--text-light);
            transition: .4s;
            border-radius: 34px;
        }
        
        :where(body.page-theme-settings) .slider:before {
            position: absolute;
            content: "";
            height: 22px;
            width: 22px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }
        
        :where(body.page-theme-settings) input:checked + .slider {
            background-color: var(--primary-color);
        }
        
        :where(body.page-theme-settings) input:checked + .slider:before {
            transform: translateX(30px);
        }
        
        :where(body.page-theme-settings) .toggle-container {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        :where(body.page-theme-settings) iframe {
            width: 100%;
            height: 300px;
            border: 0px;
            margin-top: 10px;
            margin-bottom: -30px;
        }
/* --- from includes/themes-settings/minimal.php --- */
:where(body.page-theme-settings) .container {
        max-width: 1200px;
        margin: -25px;
        padding: 10px;
    }
    :where(body.page-theme-settings) .card {
        background-color: var(--bg-primary);
        border: none;
        border-radius: var(--border-radius);
        box-shadow: var(--shadow-md);
        transition: var(--transition);
        padding: 20px;
        margin-bottom: 20px;
    }
    :where(body.page-theme-settings) .card-header {
        background-color: var(--primary-color);
        color: white;
        border-radius: var(--border-radius) var(--border-radius) 0 0 !important;
        padding: 15px 20px;
        margin-bottom: 20px;
    }
    :where(body.page-theme-settings) .card-title {
        margin-bottom: 0;
        font-weight: 600;
    }
    
    :where(body.page-theme-settings) .form-label {
        font-weight: 500;
        color: var(--text-secondary);
        margin-bottom: 8px;
        display: block;
    }
    
    :where(body.page-theme-settings) .form-select, :where(body.page-theme-settings) .form-control {
        background-color: var(--bg-primary);
        border: 1px solid var(--text-light);
        color: var(--text-primary);
        border-radius: var(--border-radius);
        padding: 10px 15px;
        transition: var(--transition);
        width: 100%;
        margin-bottom: 15px;
    }
    
    :where(body.page-theme-settings) .form-select:focus, :where(body.page-theme-settings) .form-control:focus {
        border-color: var(--primary-light);
        box-shadow: 0 0 0 0.25rem rgba(240, 106, 0, 0.25);
        outline: none;
    }
    
    :where(body.page-theme-settings) .color-preview {
        width: 50px;
        height: 50px;
        border-radius: var(--border-radius);
        display: inline-block;
        margin-right: 10px;
        vertical-align: middle;
        border: 1px solid var(--text-light);
        transition: var(--transition);
    }
    
    :where(body.page-theme-settings) .btn {
        display: inline-block;
        padding: 10px 20px;
        border-radius: var(--border-radius);
        transition: var(--transition);
        border: none;
        cursor: pointer;
        text-align: center;
        font-weight: 500;
    }
    
    :where(body.page-theme-settings) .btn-primary {
        background-color: var(--primary-color);
        color: white;
    }
    
    :where(body.page-theme-settings) .btn-primary:hover {
        background-color: var(--primary-dark);
    }
    
    :where(body.page-theme-settings) .alert {
        padding: 15px;
        border-radius: var(--border-radius);
        margin-bottom: 20px;
        position: relative;
    }
    
    :where(body.page-theme-settings) .alert-success {
        background-color: rgba(0, 184, 148, 0.2);
        border: 1px solid var(--success-color);
        color: var(--success-color);
    }
    
    :where(body.page-theme-settings) .alert-danger {
        background-color: rgba(214, 48, 49, 0.2);
        border: 1px solid var(--danger-color);
        color: var(--danger-color);
    }
    
    :where(body.page-theme-settings) .btn-close {
        background: none;
        border: none;
        cursor: pointer;
        position: absolute;
        top: 10px;
        left: 10px;
        font-size: 18px;
    }
    
    :where(body.page-theme-settings) .d-none {
        display: none;
    }
    
    :where(body.page-theme-settings) .d-flex {
        display: flex;
    }
    
    :where(body.page-theme-settings) .align-items-center {
        align-items: center;
    }
    
    :where(body.page-theme-settings) .w-100 {
        width: 100%;
    }
    
    :where(body.page-theme-settings) .mt-3 {
        margin-top: 1rem;
    }
    
    :where(body.page-theme-settings) .mb-3 {
        margin-bottom: 1rem;
    }
    :where(body.page-theme-settings) iframe {
            width: 100%;
            height: 300px;
            border: 0px;
            margin-top: 10px;
            margin-bottom: -30px;
        }

/* ==========================================================================
   PAGE: trial
   source: pages/trial.php
   ========================================================================== */
:where(body.page-trial) .card {
            background: var(--bg-primary);
            border-radius: var(--border-radius);
            padding: 25px;
            margin-bottom: 25px;
            box-shadow: var(--shadow-sm);
            border: 1px solid rgba(0,0,0,0.05);
            transition: var(--transition);
        }
        
        :where(body.page-trial) .card-title {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            color: var(--primary-color);
        }
        
        :where(body.page-trial) .card-title i {
            margin-left: 10px;
            font-size: 24px;
        }
        
        :where(body.page-trial) .features {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
            margin-bottom: 25px;
        }
        
        :where(body.page-trial) .feature {
            display: flex;
            align-items: center;
        }
        
        :where(body.page-trial) .feature i {
            color: var(--success-color);
            margin-left: 10px;
        }
        
        :where(body.page-trial) .btn {
            background-color: var(--primary-color);
            color: white;
            border: none;
            padding: 14px 20px;
            border-radius: var(--border-radius);
            cursor: pointer;
            font-size: 16px;
            width: 100%;
            transition: var(--transition);
            font-weight: 600;
        }
        
        :where(body.page-trial) .btn:hover {
            background-color: var(--primary-dark);
            transform: translateY(-2px);
            box-shadow: var(--shadow-md);
        }
        
        :where(body.page-trial) .btn:disabled {
            background-color: var(--text-light);
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }
        
        :where(body.page-trial) .btn-premium {
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
            padding: 16px;
            font-size: 18px;
        }
        
        :where(body.page-trial) .message {
            padding: 15px;
            margin: 20px 0;
            border-radius: var(--border-radius);
            text-align: center;
            font-weight: 500;
        }
        
        :where(body.page-trial) .success {
            background-color: rgba(0, 184, 148, 0.1);
            color: var(--success-color);
            border: 1px solid rgba(0, 184, 148, 0.2);
        }
        
        :where(body.page-trial) .error {
            background-color: rgba(214, 48, 49, 0.1);
            color: var(--danger-color);
            border: 1px solid rgba(214, 48, 49, 0.2);
        }
        
        :where(body.page-trial) .info {
            background-color: rgba(9, 132, 227, 0.1);
            color: var(--info-color);
            border: 1px solid rgba(9, 132, 227, 0.2);
        }
        
        :where(body.page-trial) .countdown {
            font-size: 20px;
            text-align: center;
            margin-top: 20px;
            padding: 20px;
            background: linear-gradient(135deg, rgba(9, 132, 227, 0.1) 0%, rgba(162, 155, 254, 0.1) 100%);
            border-radius: var(--border-radius);
            font-weight: 600;
            color: var(--primary-color);
        }
        
        :where(body.page-trial) .countdown-value {
            font-size: 24px;
            color: var(--primary-dark);
            direction: ltr;
            display: inline-block;
            padding: 5px 10px;
            background: var(--bg-primary);
            border-radius: 5px;
            margin: 0 5px;
            min-width: 40px;
            box-shadow: var(--shadow-sm);
        }
        
        :where(body.page-trial) .status-indicator {
            display: inline-block;
            padding: 5px 15px;
            border-radius: 20px;
            font-size: 14px;
            font-weight: 500;
        }
        
        :where(body.page-trial) .status-active {
            background-color: rgba(0, 184, 148, 0.1);
            color: var(--success-color);
        }
        
        :where(body.page-trial) .status-inactive {
            background-color: rgba(214, 48, 49, 0.1);
            color: var(--danger-color);
        }
        
        :where(body.page-trial) .user-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 20px;
            border-bottom: 1px solid rgba(0,0,0,0.05);
        }
        
        :where(body.page-trial) .user-detail {
            display: flex;
            flex-direction: column;
        }
        
        :where(body.page-trial) .user-detail span:first-child {
            font-size: 14px;
            color: var(--text-secondary);
        }
        
        :where(body.page-trial) .user-detail span:last-child {
            font-size: 16px;
            font-weight: 600;
            color: var(--text-primary);
        }
        
        :where(body.page-trial) .history-item {
            border: 1px solid rgba(0,0,0,0.05);
            border-radius: var(--border-radius);
            padding: 15px;
            margin-bottom: 15px;
            background: var(--bg-secondary);
            transition: var(--transition);
        }
        
        :where(body.page-trial) .history-date {
            font-size: 14px;
            color: var(--text-secondary);
        }
        
        :where(body.page-trial) .history-status {
            display: inline-block;
            padding: 3px 10px;
            border-radius: 15px;
            font-size: 12px;
            margin-right: 10px;
        }
        
        @media (max-width: 768px) {
            :where(body.page-trial) .features {
                grid-template-columns: 1fr;
            }
            
            :where(body.page-trial) .user-info {
                flex-direction: column;
                align-items: flex-start;
            }
            
            :where(body.page-trial) .user-detail {
                margin-bottom: 15px;
            }
        }

/* ==========================================================================
   PAGE: tutorials
   source: pages/tutorials.php
   ========================================================================== */
:where(body.page-tutorials) .tutorials-hero {
    text-align: center;
    padding: 2.5rem 1rem 1.5rem;
}
:where(body.page-tutorials) .tutorials-hero h1 {
    font-size: 1.6rem;
    margin-bottom: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
}
:where(body.page-tutorials) .tutorials-hero p { color: var(--text-secondary); font-size: 0.95rem; }

:where(body.page-tutorials) .category-filters {
    display: flex;
    gap: 0.6rem;
    justify-content: center;
    flex-wrap: wrap;
    margin: 1rem 0 2rem;
}
:where(body.page-tutorials) .category-chip {
    padding: 0.5rem 1.1rem;
    border-radius: 50px;
    background-color: var(--bg-primary);
    box-shadow: var(--shadow-sm);
    font-size: 0.85rem;
    cursor: pointer;
    transition: var(--transition);
    color: var(--text-secondary);
}
:where(body.page-tutorials) .category-chip:hover, :where(body.page-tutorials) .category-chip.active {
    background-color: var(--primary-color);
    color: #fff;
}

:where(body.page-tutorials) .tutorials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.4rem;
    padding: 0 1rem 3rem;
    max-width: 1200px;
    margin-left: -20px;
    margin-right: -20px;
}

:where(body.page-tutorials) .tut-card {
    background-color: var(--bg-primary);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
    padding: 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: var(--transition);
}
:where(body.page-tutorials) .tut-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}
:where(body.page-tutorials) .tut-card-icon {
    width: 60px; height: 60px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem;
    margin: 0 auto 1rem;
}
:where(body.page-tutorials) .tut-card h3 { font-size: 1rem; margin-bottom: 0.5rem; }
:where(body.page-tutorials) .tut-card p { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.7; margin-bottom: 0.8rem; }
:where(body.page-tutorials) .tut-card .steps-badge {
    font-size: 0.75rem;
    color: var(--primary-color);
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

/* ==================== ویزارد نمایش مراحل ==================== */
:where(body.page-tutorials) .wizard-modal .modal-content {
    width: 640px;
    max-width: 95%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    
}

:where(body.page-tutorials) .wizard-progress {
    display: flex;
    gap: 0.4rem;
    padding: 1rem 1.5rem 0;
}
:where(body.page-tutorials) .wizard-progress .dot {
    flex: 1;
    height: 5px;
    border-radius: 50px;
    background-color: var(--bg-secondary);
    transition: var(--transition);
}
:where(body.page-tutorials) .wizard-progress .dot.done { background-color: var(--primary-color); }

:where(body.page-tutorials) .wizard-body {
    padding: 1.5rem;
    overflow-y: auto;
    flex-grow: 1;
}

:where(body.page-tutorials) .wizard-step-number {
    font-size: 0.8rem;
    color: var(--primary-color);
    font-weight: 600;
    margin-bottom: 0.4rem;
}

:where(body.page-tutorials) .wizard-step-title {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 0.8rem;
}

:where(body.page-tutorials) .wizard-step-image {
    width: 100%;
    border-radius: 10px;
    margin-bottom: 1rem;
    box-shadow: var(--shadow-sm);
}

:where(body.page-tutorials) .wizard-step-content {
    line-height: 1.9;
    color: var(--text-secondary);
    font-size: 0.92rem;
    margin-bottom: 1rem;
}

:where(body.page-tutorials) .wizard-step-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: rgba(0,184,148,0.1);
    color: var(--secondary-color);
    padding: 0.6rem 1.1rem;
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.85rem;
    transition: var(--transition);
}
:where(body.page-tutorials) .wizard-step-link:hover { background-color: var(--secondary-color); color: #fff; }

:where(body.page-tutorials) .wizard-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-top: 1px solid rgba(0,0,0,0.05);
}

:where(body.page-tutorials) .wizard-nav-btn {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border: none;
    padding: 0.6rem 1.3rem;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: var(--transition);
}
:where(body.page-tutorials) .wizard-nav-btn.primary { background-color: var(--primary-color); color: #fff; }
:where(body.page-tutorials) .wizard-nav-btn:disabled { opacity: 0.4; cursor: not-allowed; }

:where(body.page-tutorials) .wizard-step-count {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* ==========================================================================
   PAGE: tv-menu
   source: pages/tv-menu.php
   ========================================================================== */
body:where(.page-tv-menu) {
    --primary: var(--primary-color, #f06a00);
    --success: var(--success-color, #00b894);
    --danger: var(--danger-color, #d63031);
    --info: var(--info-color, #0984e3);
    --text-dark: var(--text-primary, #2d3436);
    --text-medium: var(--text-secondary, #636e72);
    --text-muted: var(--text-light, #b2bec3);
    --bg-white: var(--bg-primary, #ffffff);
    --bg-light: var(--bg-secondary, #f5f6fa);
    --radius: var(--border-radius, 12px);
    --shadow-s: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.1));
    --shadow-m: var(--shadow-md, 0 4px 6px rgba(0, 0, 0, 0.1));
    --shadow-l: var(--shadow-lg, 0 10px 15px rgba(0, 0, 0, 0.1));
}



:where(body.page-tv-menu) .container { max-width: 1400px; margin: 0 auto; }

:where(body.page-tv-menu) .page-header {
    background: white;
    border-radius: 12px;
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 10px 15px rgba(0,0,0,0.1);
}

:where(body.page-tv-menu) .page-header h1 {
    font-size: 32px;
    color: #1f2937;
    display: flex;
    align-items: center;
    gap: 15px;
}

:where(body.page-tv-menu) .card {
    background: white;
    border-radius: 12px;
    margin-bottom: 20px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

:where(body.page-tv-menu) .card-header {
    background: linear-gradient(135deg, var(--primary), #4f46e5);
    color: white;
    padding: 20px 25px;
    border-radius: 12px 12px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

:where(body.page-tv-menu) .card-body { padding: 25px; }

:where(body.page-tv-menu) .btn {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s;
}

:where(body.page-tv-menu) .btn:hover { transform: translateY(-2px); }

:where(body.page-tv-menu) .btn-primary { background: var(--primary); color: white; }
:where(body.page-tv-menu) .btn-success { background: var(--success); color: white; }
:where(body.page-tv-menu) .btn-danger { background: var(--danger); color: white; }
:where(body.page-tv-menu) .btn-info { background: var(--info); color: white; }
:where(body.page-tv-menu) .btn-secondary { background: #6b7280; color: white; }
:where(body.page-tv-menu) .btn-lg { padding: 14px 28px; font-size: 16px; }

:where(body.page-tv-menu) .row { display: flex; flex-wrap: wrap; margin: 0 -10px; }
:where(body.page-tv-menu) .col-3 { width: 25%; padding: 0 10px; }
:where(body.page-tv-menu) .col-4 { width: 33.333%; padding: 0 10px; }
:where(body.page-tv-menu) .col-5th { width: 20%; padding: 0 10px; }
:where(body.page-tv-menu) .col-6 { width: 50%; padding: 0 10px; }

:where(body.page-tv-menu) .form-control, :where(body.page-tv-menu) .form-select {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    
    font-size: 14px;
    margin-top: 8px;
}

:where(body.page-tv-menu) .form-control:focus, :where(body.page-tv-menu) .form-select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

:where(body.page-tv-menu) .form-range {
    width: 100%;
    height: 6px;
    background: #f3f4f6;
    border-radius: 3px;
    margin-top: 10px;
}

:where(body.page-tv-menu) .form-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    background: var(--primary);
    border-radius: 50%;
    cursor: pointer;
}

:where(body.page-tv-menu) .form-control-color {
    width: 100%;
    height: 50px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    margin-top: 8px;
}

:where(body.page-tv-menu) label {
    display: block;
    font-weight: 600;
    color: #374151;
    font-size: 14px;
    margin-bottom: 5px;
}

:where(body.page-tv-menu) .tabs {
    display: flex;
    gap: 5px;
    border-bottom: 2px solid #e5e7eb;
    margin-bottom: 25px;
}

:where(body.page-tv-menu) .tab-btn {
    padding: 12px 20px;
    background: none;
    border: none;
    color: #6b7280;
    
    font-weight: 600;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
}

:where(body.page-tv-menu) .tab-btn.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

:where(body.page-tv-menu) .tab-content { display: none; }
:where(body.page-tv-menu) .tab-content.active { display: block; animation: fadeIn 0.3s; }

:where(body.page-tv-menu) .display-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

:where(body.page-tv-menu) .display-item {
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.3s;
}

:where(body.page-tv-menu) .display-item:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
}

:where(body.page-tv-menu) .display-item.active {
    border-color: var(--primary);
    background: #f0f1ff;
}

:where(body.page-tv-menu) .checks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
}

:where(body.page-tv-menu) .check-item {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

:where(body.page-tv-menu) .check-item input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--primary);
}

:where(body.page-tv-menu) .category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
}

:where(body.page-tv-menu) .category-card {
    padding: 15px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
}

:where(body.page-tv-menu) .category-card:hover, :where(body.page-tv-menu) .category-card.selected {
    border-color: var(--primary);
    background: #f0f1ff;
}

:where(body.page-tv-menu) .modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

:where(body.page-tv-menu) .tv-modal.tv-show { display: flex; }

:where(body.page-tv-menu) .modal-dialog {
    background: white;
    border-radius: 12px;
    max-width: 600px;
    width: 90%;
}

:where(body.page-tv-menu) .modal-header {
    padding: 20px 25px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
}

:where(body.page-tv-menu) .modal-body { padding: 25px; }
:where(body.page-tv-menu) .modal-footer {
    padding: 20px 25px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

:where(body.page-tv-menu) .modal-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #6b7280;
}

:where(body.page-tv-menu) .alert {
    padding: 15px 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    animation: slideDown 0.3s;
}

:where(body.page-tv-menu) .alert-success {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid var(--success);
}

:where(body.page-tv-menu) .alert-danger {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid var(--danger);
}

:where(body.page-tv-menu) .form-footer {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 2px solid #e5e7eb;
    text-align: center;
}

:where(body.page-tv-menu) h4 {
    color: #1f2937;
    font-size: 18px;
    margin: 20px 0 15px 0;
    padding-bottom: 10px;
    border-bottom: 2px solid #e5e7eb;
}

/* استایل‌های لیست محصولات */
:where(body.page-tv-menu) .products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 15px;
    margin-top: 15px;
}

:where(body.page-tv-menu) .product-item {
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

:where(body.page-tv-menu) .product-item:hover {
    border-color: #6366f1;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
    transform: translateY(-2px);
}

:where(body.page-tv-menu) .product-item.selected {
    border-color: #6366f1;
    background: #eef2ff;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

:where(body.page-tv-menu) .product-item img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 10px;
}

:where(body.page-tv-menu) .product-item .no-image {
    width: 100%;
    height: 120px;
    background: #f3f4f6;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    color: #9ca3af;
    font-size: 40px;
}

:where(body.page-tv-menu) .product-item .product-info h5 {
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 8px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

:where(body.page-tv-menu) .product-item .product-info .price {
    font-size: 13px;
    font-weight: 500;
    color: #10b981;
    margin: 0;
}

:where(body.page-tv-menu) .category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
}


@media (max-width: 768px) {
    :where(body.page-tv-menu) .col-3, :where(body.page-tv-menu) .col-4, :where(body.page-tv-menu) .col-5th, :where(body.page-tv-menu) .col-6 { width: 100%; }
}

/* ==================== Enhanced Styles ==================== */

/* Version Badge */
:where(body.page-tv-menu) .version-badge {
    display: inline-block;
    padding: 4px 12px;
    background: linear-gradient(135deg, #1e7bff 0%, #02174a 100%);
    color: white;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    margin-left: 10px;
}

/* Progress Bar */
:where(body.page-tv-menu) .progress {
    width: 100%;
    height: 20px;
    background: #e0e0e0;
    border-radius: 10px;
    overflow: hidden;
    margin-top: 10px;
}

:where(body.page-tv-menu) .progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #1e7bff 0%, #02174a 100%);
    transition: width 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 12px;
}

/* Media Library */
:where(body.page-tv-menu) #tvMediaLibraryModal {
    display: none;
}

:where(body.page-tv-menu) #tvMediaLibraryModal.show {
    display: flex !important;
}

:where(body.page-tv-menu) .media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
    margin-top: 15px;
    max-height: 500px;
    overflow-y: auto;
}

:where(body.page-tv-menu) .media-item {
    position: relative;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    background: white;
}

:where(body.page-tv-menu) .media-item:hover {
    border-color: #1e7bff;
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

:where(body.page-tv-menu) .media-item img,
:where(body.page-tv-menu) .media-item video {
    width: 100%;
    height: 120px;
    object-fit: cover;
    display: block;
}

:where(body.page-tv-menu) .media-name {
    padding: 8px;
    font-size: 12px;
    background: #f8f9fa;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

:where(body.page-tv-menu) .media-item .btn-delete {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.9);
    border: none;
    color: white;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

:where(body.page-tv-menu) .media-item:hover .btn-delete {
    display: flex;
}

/* Uploaded Preview */
:where(body.page-tv-menu) .uploaded-preview {
    margin-top: 15px;
    position: relative;
}

:where(body.page-tv-menu) .uploaded-preview img,
:where(body.page-tv-menu) .uploaded-preview video {
    max-width: 200px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Enhanced Range Input */
:where(body.page-tv-menu) input[type="range"]::-webkit-slider-thumb {
    cursor: pointer;
    background: linear-gradient(135deg, #1e7bff 0%, #02174a 100%);
}

:where(body.page-tv-menu) input[type="range"]::-moz-range-thumb {
    cursor: pointer;
    background: linear-gradient(135deg, #1e7bff 0%, #02174a 100%);
}

/* Col-5th for 5 columns */
:where(body.page-tv-menu) .col-5th {
    flex: 0 0 20%;
    max-width: 20%;
    padding: 0 10px;
}

@media (max-width: 768px) {
    :where(body.page-tv-menu) .col-5th {
        flex: 0 0 50%;
        max-width: 50%;
    }
}



/* ==================== TV Modal Styles (Unique Classes) ==================== */
:where(body.page-tv-menu) .tv-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    padding: 20px;
    overflow-y: auto;
}

:where(body.page-tv-menu) .tv-modal.tv-show {
    display: flex !important;
    opacity: 1;
}

:where(body.page-tv-menu) .tv-modal-dialog {
    background: var(--bg-primary, #ffffff);
    border-radius: var(--border-radius, 12px);
    max-width: 800px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg, 0 10px 30px rgba(0,0,0,0.3));
    transform: translateY(20px);
    transition: transform 0.3s ease;
    margin: auto;
}

:where(body.page-tv-menu) .tv-modal.tv-show .tv-modal-dialog {
    transform: translateY(0);
}

:where(body.page-tv-menu) .tv-modal-header {
    padding: 20px 25px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-primary, #ffffff);
    border-radius: var(--border-radius, 12px) var(--border-radius, 12px) 0 0;
}

:where(body.page-tv-menu) .tv-modal-header h3 {
    margin: 0;
    font-size: 20px;
    color: var(--text-primary, #2d3436);
    display: flex;
    align-items: center;
    gap: 10px;
}

:where(body.page-tv-menu) .tv-modal-body {
    padding: 25px;
    background: var(--bg-primary, #ffffff);
}

:where(body.page-tv-menu) .tv-modal-footer {
    padding: 20px 25px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    background: var(--bg-primary, #ffffff);
    border-radius: 0 0 var(--border-radius, 12px) var(--border-radius, 12px);
}

:where(body.page-tv-menu) .tv-modal-close {
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: var(--text-secondary, #636e72);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s;
    line-height: 1;
}

:where(body.page-tv-menu) .tv-modal-close:hover {
    background: var(--bg-secondary, #f5f6fa);
    color: var(--text-primary, #2d3436);
    transform: rotate(90deg);
}

@media (max-width: 768px) {
    :where(body.page-tv-menu) .tv-modal {
        padding: 10px;
    }
    
    :where(body.page-tv-menu) .tv-modal-dialog {
        max-width: 100%;
        margin: 0;
    }
    
    :where(body.page-tv-menu) .tv-modal-header,
    :where(body.page-tv-menu) .tv-modal-body,
    :where(body.page-tv-menu) .tv-modal-footer {
        padding: 15px;
    }
    
    :where(body.page-tv-menu) .tv-modal-header h3 {
        font-size: 18px;
    }
}

/* ==================== Mobile Responsive Fixes ==================== */
@media (max-width: 768px) {
    :where(body.page-tv-menu) .card-header {
        flex-direction: column;
        gap: 15px;
        align-items: flex-start !important;
    }
    
    :where(body.page-tv-menu) .card-header > div {
        width: 100%;
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
    }
    
    :where(body.page-tv-menu) .display-grid {
        grid-template-columns: 1fr !important;
    }
    
    :where(body.page-tv-menu) .tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 5px;
    }
    
    :where(body.page-tv-menu) .tab-btn {
        white-space: nowrap;
        font-size: 13px;
        padding: 10px 15px;
    }
    
    :where(body.page-tv-menu) .row {
        flex-direction: column;
    }
    
    :where(body.page-tv-menu) .col-3, :where(body.page-tv-menu) .col-4, :where(body.page-tv-menu) .col-5th, :where(body.page-tv-menu) .col-6 {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 15px;
    }
    
    :where(body.page-tv-menu) .btn {
        width: 100%;
        justify-content: center;
    }
    
    :where(body.page-tv-menu) h4 {
        font-size: 16px;
    }
    
    :where(body.page-tv-menu) .page-header h1 {
        font-size: 24px;
    }
    
    /* مخفی کردن لیست نمایشگرها وقتی پنل تنظیمات باز است */
    :where(body.page-tv-menu) #displaysList.mobile-hide {
        display: none !important;
    }
    
    :where(body.page-tv-menu) #settingsPanel {
        padding: 0;
    }
    
    :where(body.page-tv-menu) .checks-grid {
        grid-template-columns: 1fr !important;
    }
    
    :where(body.page-tv-menu) .category-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    :where(body.page-tv-menu) .products-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 480px) {
    :where(body.page-tv-menu) .card-body {
        padding: 15px;
    }
    
    :where(body.page-tv-menu) .page-header {
        padding: 20px 15px;
    }
    
    :where(body.page-tv-menu) .btn {
        padding: 8px 16px;
        font-size: 14px;
    }
    
    :where(body.page-tv-menu) .btn-lg {
        padding: 10px 20px;
        font-size: 15px;
    }
}

/* ==========================================================================
   PAGE: user-images
   source: pages/user-images.php
   ========================================================================== */
:where(body.page-user-images) .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        :where(body.page-user-images) .tabs {
            display: flex;
            border-bottom: 2px solid var(--primary-light);
            margin-bottom: 20px;
        }

        :where(body.page-user-images) .tab-btn {
            padding: 10px 20px;
            background: none;
            border: none;
            cursor: pointer;
            font-size: 16px;
            color: var(--text-secondary);
            transition: var(--transition);
            position: relative;
        }

        :where(body.page-user-images) .tab-btn.active {
            color: var(--primary-color);
            font-weight: bold;
        }

        :where(body.page-user-images) .tab-btn.active::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 100%;
            height: 2px;
            background-color: var(--primary-color);
        }

        :where(body.page-user-images) .tab-content {
            display: none;
            background-color: var(--bg-primary);
            padding: 20px;
            border-radius: var(--border-radius);
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        :where(body.page-user-images) .tab-content.active {
            display: block;
        }

        :where(body.page-user-images) .upload-section {
            border: 2px dashed var(--primary-light);
            padding: 30px;
            text-align: center;
            border-radius: var(--border-radius);
            margin-bottom: 30px;
            transition: var(--transition);
        }

        :where(body.page-user-images) .upload-section:hover {
            border-color: var(--primary-color);
            background-color: rgba(240, 106, 0, 0.05);
        }

        :where(body.page-user-images) .upload-icon {
            font-size: 48px;
            color: var(--primary-light);
            margin-bottom: 15px;
        }

        :where(body.page-user-images) #fileInput {
            display: none;
        }

        :where(body.page-user-images) .btn {
            background-color: var(--primary-color);
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: var(--border-radius);
            cursor: pointer;
            font-size: 16px;
            transition: var(--transition);
            display: inline-block;
        }

        :where(body.page-user-images) .btn:hover {
            background-color: var(--primary-dark);
        }

        :where(body.page-user-images) .btn-secondary {
            background-color: var(--secondary-color);
        }

        :where(body.page-user-images) .btn-secondary:hover {
            background-color: #00a383;
        }

        :where(body.page-user-images) .gallery {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 15px;
            margin-top: 30px;
        }

        :where(body.page-user-images) .image-card {
            position: relative;
            border-radius: var(--border-radius);
            overflow: hidden;
            box-shadow: 0 3px 6px rgba(0,0,0,0.1);
            transition: var(--transition);
            aspect-ratio: 1/1;
        }

        :where(body.page-user-images) .image-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }

        :where(body.page-user-images) .image-card img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        :where(body.page-user-images) .delete-btn {
            position: absolute;
            top: 10px;
            left: 10px;
            background-color: rgba(214, 48, 49, 0.8);
            color: white;
            border: none;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            opacity: 0;
            transition: var(--transition);
        }

        :where(body.page-user-images) .image-card:hover .delete-btn {
            opacity: 1;
        }

        :where(body.page-user-images) .progress-container {
            width: 100%;
            background-color: #f1f1f1;
            border-radius: var(--border-radius);
            margin: 15px 0;
            display: none;
        }

        :where(body.page-user-images) .progress-bar {
            height: 8px;
            background-color: var(--secondary-color);
            border-radius: var(--border-radius);
            width: 0%;
            transition: width 0.3s ease;
        }

        :where(body.page-user-images) .alert {
            padding: 10px;
            border-radius: var(--border-radius);
            margin: 10px 0;
            display: none;
        }

        :where(body.page-user-images) .alert-success {
            background-color: rgba(0, 184, 148, 0.2);
            color: var(--secondary-color);
        }

        :where(body.page-user-images) .alert-error {
            background-color: rgba(214, 48, 49, 0.2);
            color: #d63031;
        }

        :where(body.page-user-images) .pagination {
            display: flex;
            justify-content: center;
            margin-top: 20px;
            gap: 5px;
        }

        :where(body.page-user-images) .page-btn {
            padding: 5px 10px;
            border: 1px solid var(--primary-light);
            background: none;
            cursor: pointer;
            border-radius: 4px;
        }

        :where(body.page-user-images) .page-btn.active {
            background-color: var(--primary-color);
            color: white;
            border-color: var(--primary-color);
        }

        :where(body.page-user-images) .max-images-alert {
            background-color: rgba(252, 92, 101, 0.2);
            color: #fc5c65;
            padding: 10px;
            border-radius: var(--border-radius);
            margin-bottom: 15px;
            display: none;
        }

/* ==========================================================================
   PAGE: visits-report
   source: pages/visits-report.php
   ========================================================================== */
body:where(.page-visits-report) {
            --primary-color: #4a6bff;
            --secondary-color: #6c757d;
            --success-color: #28a745;
            --danger-color: #dc3545;
            --warning-color: #ffc107;
            --info-color: #17a2b8;
            --light-color: #f8f9fa;
            --dark-color: #343a40;
            --bg-color: #ffffff;
            --text-color: #212529;
            --border-color: #dee2e6;
            --card-bg: #ffffff;
            --card-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
        }

        :where(body.page-visits-report) .dark-mode {
            --primary-color: #5d7eff;
            --secondary-color: #868e96;
            --success-color: #2ecc71;
            --danger-color: #e74c3c;
            --warning-color: #f39c12;
            --info-color: #3498db;
            --light-color: #495057;
            --dark-color: #f8f9fa;
            --bg-color: #1a1a1a;
            --text-color: #f8f9fa;
            --border-color: #495057;
            --card-bg: #2d2d2d;
            --card-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.5);
        }

        

        :where(body.page-visits-report) .container {
            max-width: 1200px;
            margin: 0 auto;
        }

        :where(body.page-visits-report) .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
            padding-bottom: 15px;
            border-bottom: 1px solid var(--border-color);
        }

        :where(body.page-visits-report) .title {
            font-size: 24px;
            font-weight: bold;
        }



        :where(body.page-visits-report) .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }

        :where(body.page-visits-report) .stat-card {
            background-color: var(--card-bg);
            border-radius: 10px;
            padding: 20px;
            box-shadow: var(--card-shadow);
            transition: transform 0.3s ease;
        }

        :where(body.page-visits-report) .stat-card:hover {
            transform: translateY(-5px);
        }

        :where(body.page-visits-report) .stat-title {
            font-size: 16px;
            color: var(--secondary-color);
            margin-bottom: 10px;
        }

        :where(body.page-visits-report) .stat-value {
            font-size: 28px;
            font-weight: bold;
            color: var(--primary-color);
        }

        :where(body.page-visits-report) .stat-change {
            font-size: 14px;
            margin-top: 5px;
        }

        :where(body.page-visits-report) .positive {
            color: var(--success-color);
        }

        :where(body.page-visits-report) .negative {
            color: var(--danger-color);
        }

        :where(body.page-visits-report) .neutral {
            color: var(--secondary-color);
        }

        :where(body.page-visits-report) .tabs {
            display: flex;
            border-bottom: 1px solid var(--border-color);
            margin-bottom: 20px;
        }

        :where(body.page-visits-report) .tab {
            padding: 10px 20px;
            cursor: pointer;
            border-bottom: 2px solid transparent;
            transition: all 0.3s ease;
        }

        :where(body.page-visits-report) .tab.active {
            border-bottom: 2px solid var(--primary-color);
            color: var(--primary-color);
            font-weight: bold;
        }

        :where(body.page-visits-report) .tab-content {
            display: none;
        }

        :where(body.page-visits-report) .tab-content.active {
            display: block;
        }

        :where(body.page-visits-report) .chart-container {
            background-color: var(--card-bg);
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 30px;
            box-shadow: var(--card-shadow);
        }

        :where(body.page-visits-report) .chart-title {
            font-size: 18px;
            margin-bottom: 15px;
            color: var(--primary-color);
        }

        :where(body.page-visits-report) .no-data {
            text-align: center;
            padding: 20px;
            color: var(--secondary-color);
            font-style: italic;
        }

        @media (max-width: 768px) {
            :where(body.page-visits-report) .stats-grid {
                grid-template-columns: 1fr;
            }
            
            :where(body.page-visits-report) .tabs {
                overflow-x: auto;
                white-space: nowrap;
            }
        }

/* ==========================================================================
   PAGE: wallet
   source: pages/wallet.php
   ========================================================================== */
:where(body.page-wallet) .cards-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 25px;
        margin-bottom: 40px;
        max-width: 1400px;
        margin: 0 auto;
    }
    :where(body.page-wallet) .card {
        background: white;
        border-radius: 20px;
        padding: 30px;
        box-shadow: 0 15px 50px rgba(0,0,0,0.2);
        transition: transform 0.3s ease;
    }
    :where(body.page-wallet) .card:hover { transform: translateY(-5px); }
    :where(body.page-wallet) .card.wallet-card { border-top: 5px solid #28a745; }
    :where(body.page-wallet) .card.sms-card    { border-top: 5px solid #17a2b8; }

    :where(body.page-wallet) .card-header {
        display: flex; align-items: center; gap: 15px;
        margin-bottom: 25px; padding-bottom: 15px;
        border-bottom: 2px solid #f8f9fa;
    }
    :where(body.page-wallet) .card-icon {
        width: 60px; height: 60px; border-radius: 15px;
        display: flex; align-items: center; justify-content: center;
        font-size: 24px; color: white;
    }
    :where(body.page-wallet) .wallet-card .card-icon { background: linear-gradient(135deg, #28a745, #20c997); }
    :where(body.page-wallet) .sms-card    .card-icon { background: linear-gradient(135deg, #17a2b8, #138496); }

    :where(body.page-wallet) .card-title    { font-size: 24px; font-weight: 700; color: #2d3436; }
    :where(body.page-wallet) .card-subtitle { color: #636e72; font-size: 14px; }

    :where(body.page-wallet) .amount-display {
        font-size: 42px; font-weight: 800; text-align: center;
        margin: 20px 0; padding: 20px; border-radius: 15px;
        transition: all 0.4s ease;
    }
    :where(body.page-wallet) .wallet-card .amount-display { color: #28a745; background: rgba(40,167,69,0.1); }
    :where(body.page-wallet) .sms-card    .amount-display { color: #17a2b8; background: rgba(23,162,184,0.1); }

    :where(body.page-wallet) .amount-label { font-size: 16px; color: #636e72; text-align: center; margin-top: 10px; }
    :where(body.page-wallet) .amount-label small { font-size: 13px; color: #adb5bd; }

    :where(body.page-wallet) .info-row {
        display: flex; justify-content: space-between; align-items: center;
        padding: 12px 0; border-bottom: 1px solid #f8f9fa;
    }
    :where(body.page-wallet) .info-row:last-child { border-bottom: none; }
    :where(body.page-wallet) .info-label {
        color: #495057; font-size: 15px;
        display: flex; align-items: center; gap: 8px;
    }
    :where(body.page-wallet) .info-value { color: #2d3436; font-weight: 600; font-size: 17px; }

    :where(body.page-wallet) .btn {
        display: block; width: 100%; padding: 18px; border: none;
        border-radius: 12px; font-size: 17px; font-weight: 700;
        cursor: pointer; transition: all 0.3s ease;
        text-align: center; text-decoration: none; margin-top: 20px;
    }
    :where(body.page-wallet) .btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; }
    :where(body.page-wallet) .btn-primary {
        background: linear-gradient(135deg, #17a2b8, #138496);
        color: white; box-shadow: 0 8px 25px rgba(23,162,184,0.3);
    }
    :where(body.page-wallet) .btn-primary:not(:disabled):hover {
        background: linear-gradient(135deg, #138496, #117a8b);
        transform: translateY(-3px); box-shadow: 0 12px 30px rgba(23,162,184,0.4);
    }
    :where(body.page-wallet) .btn-success {
        background: linear-gradient(135deg, #28a745, #20c997);
        color: white; box-shadow: 0 8px 25px rgba(40,167,69,0.3);
    }
    :where(body.page-wallet) .btn-success:hover {
        background: linear-gradient(135deg, #20c997, #1ea87a);
        transform: translateY(-3px); box-shadow: 0 12px 30px rgba(40,167,69,0.4);
    }
    :where(body.page-wallet) .btn-warning {
        background: linear-gradient(135deg, #ffc107, #ff9800);
        color: white; box-shadow: 0 8px 25px rgba(255,193,7,0.3);
    }
    :where(body.page-wallet) .btn-warning:hover {
        background: linear-gradient(135deg, #ff9800, #f57c00);
        transform: translateY(-3px); box-shadow: 0 12px 30px rgba(255,193,7,0.4);
    }

    /* ── Modal ── */
    :where(body.page-wallet) .w-modal {
        display: none; position: fixed; z-index: 1000;
        left: 0; top: 0; width: 100%; height: 100%;
        overflow: auto; background: rgba(0,0,0,0.6);
        backdrop-filter: blur(5px); animation: fadeIn--wallet 0.3s ease;
    }
    @keyframes fadeIn--wallet  { from{opacity:0} to{opacity:1} }
    @keyframes slideUp--wallet { from{transform:translateY(50px);opacity:0} to{transform:translateY(0);opacity:1} }

    :where(body.page-wallet) .modal-content {
        background: #fff; margin: 5% auto; padding: 0;
        border-radius: 20px; width: 90%; max-width: 600px;
        box-shadow: 0 20px 60px rgba(0,0,0,0.3); animation: slideUp--wallet 0.3s ease;
    }
    :where(body.page-wallet) .modal-header {
        background: linear-gradient(135deg, #1e7bff 0%, #02174a 100%);
        color: white; padding: 25px 30px; border-radius: 20px 20px 0 0;
        display: flex; justify-content: space-between; align-items: center;
    }
    :where(body.page-wallet) .modal-header h2 { font-size: 22px; font-weight: 700; }
    :where(body.page-wallet) .modal-body { padding: 30px; }
    :where(body.page-wallet) .close {
        color: white; font-size: 32px; font-weight: bold;
        cursor: pointer; transition: transform 0.3s; line-height: 1;
    }
    :where(body.page-wallet) .close:hover { transform: rotate(90deg); }

    /* ── Quick Buttons ── */
    :where(body.page-wallet) .quick-buttons {
        display: grid; grid-template-columns: repeat(3,1fr);
        gap: 12px; margin: 20px 0;
    }
    :where(body.page-wallet) .quick-btn {
        background: #f8f9fa; border: 2px solid #e9ecef; border-radius: 12px;
        padding: 15px 10px; text-align: center; cursor: pointer;
        transition: all 0.3s; font-weight: 600; color: #495057;
    }
    :where(body.page-wallet) .quick-btn:hover:not(.disabled) {
        background: #e9ecef; border-color: #17a2b8;
        color: #17a2b8; transform: scale(1.05);
    }
    :where(body.page-wallet) .quick-btn.selected {
        background: #17a2b8; border-color: #17a2b8;
        color: white; transform: scale(1.05);
    }
    :where(body.page-wallet) .quick-btn.disabled { opacity: 0.45; cursor: not-allowed; }
    :where(body.page-wallet) .quick-btn.disabled:hover { transform: none; }
    :where(body.page-wallet) .sms-count { font-size: 22px; font-weight: 700; margin-bottom: 4px; }
    :where(body.page-wallet) .sms-price { font-size: 12px; color: #6c757d; }
    :where(body.page-wallet) .quick-btn.selected .sms-price { color: rgba(255,255,255,0.85); }

    /* ── Form ── */
    :where(body.page-wallet) .form-group { margin-bottom: 22px; }
    :where(body.page-wallet) .form-label { display: block; margin-bottom: 8px; font-weight: 600; color: #495057; }
    :where(body.page-wallet) .form-control {
        width: 100%; padding: 16px 20px; border: 2px solid #e9ecef;
        border-radius: 12px; font-size: 18px; transition: border-color 0.3s;
        text-align: center; box-sizing: border-box;
    }
    :where(body.page-wallet) .form-control:focus { outline: none; border-color: #17a2b8; }
    :where(body.page-wallet) .max-info { text-align: center; color: #6c757d; margin-top: 10px; font-size: 13px; }

    /* ── Alerts ── */
    :where(body.page-wallet) .alert {
        padding: 18px 20px; border-radius: 12px; margin-bottom: 20px;
        border-right: 5px solid; animation: slideUp--wallet 0.3s ease;
        display: flex; align-items: flex-start; gap: 10px;
    }
    :where(body.page-wallet) .alert i { margin-top: 2px; flex-shrink: 0; }
    :where(body.page-wallet) .alert-success { background: rgba(40,167,69,0.1); border-color: #28a745; color: #155724; }
    :where(body.page-wallet) .alert-error   { background: rgba(220,53,69,0.1); border-color: #dc3545; color: #721c24; }
    :where(body.page-wallet) .alert-warning { background: rgba(255,193,7,0.1); border-color: #ffc107; color: #856404; }

    /* ── Summary Box ── */
    :where(body.page-wallet) .summary-box {
        background: #f8f9fa; border-radius: 14px;
        padding: 18px 20px; margin-bottom: 20px;
    }

    /* ── Payment Amounts ── */
    :where(body.page-wallet) .payment-amounts {
        display: grid; grid-template-columns: repeat(3,1fr);
        gap: 12px; margin: 20px 0;
    }
    :where(body.page-wallet) .amount-btn {
        background: #f8f9fa; border: 2px solid #e9ecef; border-radius: 12px;
        padding: 18px 10px; text-align: center; cursor: pointer;
        transition: all 0.3s; font-weight: 600; color: #495057;
    }
    :where(body.page-wallet) .amount-btn:hover { background: #e9ecef; border-color: #28a745; color: #28a745; transform: scale(1.05); }
    :where(body.page-wallet) .amount-btn.selected { background: #28a745; border-color: #28a745; color: white; transform: scale(1.05); }
    :where(body.page-wallet) .amount-btn .sms-price { color: #6c757d; }
    :where(body.page-wallet) .amount-btn.selected .sms-price { color: rgba(255,255,255,0.8); }

    /* ── Help ── */
    :where(body.page-wallet) .help-section { margin-bottom: 20px; }
    :where(body.page-wallet) .help-section h3 { color: #2d3436; margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
    :where(body.page-wallet) .help-section h3 i { color: #1e7bff; }
    :where(body.page-wallet) .help-section p { color: #636e72; line-height: 1.8; }
    :where(body.page-wallet) .help-section ul { list-style: none; padding-right: 0; }
    :where(body.page-wallet) .help-section ul li {
        color: #636e72; padding: 8px 0 8px 0; padding-right: 28px;
        position: relative;
    }
    :where(body.page-wallet) .help-section ul li::before {
        content: "✓"; position: absolute; right: 0;
        color: #28a745; font-weight: bold; font-size: 16px;
    }

    /* ── Spinner ── */
    :where(body.page-wallet) .spinner {
        display: inline-block; width: 16px; height: 16px;
        border: 2px solid rgba(255,255,255,0.4);
        border-top-color: white; border-radius: 50%;
        animation: spin 0.7s linear infinite; vertical-align: middle; margin-left: 6px;
    }

    /* ── Toast ── */
    :where(body.page-wallet) #wToast {
        position: fixed; bottom: 30px; right: 30px; z-index: 9999;
        padding: 16px 24px; border-radius: 14px; color: white;
        font-size: 15px; font-weight: 600; min-width: 280px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.25);
        transform: translateY(80px); opacity: 0;
        transition: all 0.4s cubic-bezier(0.34,1.56,0.64,1);
        display: flex; align-items: center; gap: 12px;
    }
    :where(body.page-wallet) #wToast.show { transform: translateY(0); opacity: 1; }
    :where(body.page-wallet) #wToast.success { background: linear-gradient(135deg, #28a745, #20c997); }
    :where(body.page-wallet) #wToast.error   { background: linear-gradient(135deg, #dc3545, #c82333); }
    :where(body.page-wallet) #wToast i { font-size: 20px; }

    @media (max-width: 768px) {
        :where(body.page-wallet) .cards-container { grid-template-columns: 1fr; }
        :where(body.page-wallet) .quick-buttons, :where(body.page-wallet) .payment-amounts { grid-template-columns: repeat(2,1fr); }
        :where(body.page-wallet) .amount-display { font-size: 32px; }
        :where(body.page-wallet) .modal-content { width: 95%; margin: 8% auto; }
    }
    @media (max-width: 480px) {
        :where(body.page-wallet) .quick-buttons, :where(body.page-wallet) .payment-amounts { grid-template-columns: 1fr; }
    }

/* ==========================================================================
   PAGE: working-hours
   source: pages/working-hours.php
   ========================================================================== */
body:where(.page-working-hours), :where(body.page-working-hours) * {
font-family:BHoma;
}

/* ==========================================================================
   PAGE: dashboard (redesign)  -> body.page-dashboard
   source: pages/dashboard.php (classes ds-*)
   ========================================================================== */
/* ===== Dashboard redesign (ds-*) — logo palette, mobile-first ===== */
:where(body.page-dashboard) .ds { display: grid; gap: 10px; }
:where(body.page-dashboard) .ds * { box-sizing: border-box; }

/* hero */
:where(body.page-dashboard) .ds-hero {
    display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: center;
    padding: 14px 16px; border-radius: 16px;
    background: linear-gradient(135deg, var(--brand-navy) 0%, #0a2f8f 100%);
    color: #fff; position: relative; overflow: hidden;
}
:where(body.page-dashboard) .ds-hero::after {
    content: ""; position: absolute; inset: auto -40px -60px auto; width: 180px; height: 180px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,122,0,.45), rgba(255,122,0,0) 70%); pointer-events: none;
}
:where(body.page-dashboard) .ds-hello { margin: 0; font-size: 1.15rem; font-weight: 700; color: #fff; }
:where(body.page-dashboard) .ds-date { margin: 4px 0 0; font-size: .8rem; color: rgba(255,255,255,.72); }
:where(body.page-dashboard) .ds-date i { color: var(--brand-yellow); margin-left: 4px; }
:where(body.page-dashboard) .ds-store {
    display: flex; align-items: center; gap: 12px; padding: 8px 12px; z-index: 1;
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 14px;
}
:where(body.page-dashboard) .ds-store-text { display: grid; line-height: 1.5; }
:where(body.page-dashboard) .ds-store-label { font-size: .72rem; color: rgba(255,255,255,.7); }
:where(body.page-dashboard) .ds-store-state { font-size: .9rem; font-weight: 700; }
:where(body.page-dashboard) .ds-store-state::after { content: "غیرفعال"; color: #ffb4b4; }
:where(body.page-dashboard) .ds-store-input { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
:where(body.page-dashboard) .ds-store { position: relative; }
:where(body.page-dashboard) .ds-store-input:checked ~ .ds-store-text .ds-store-state::after { content: "فعال"; color: #5eead4; }
:where(body.page-dashboard) .ds-switch { position: relative; display: inline-block; width: 52px; height: 30px; flex: none; }
:where(body.page-dashboard) .ds-switch-track { position: absolute; inset: 0; border-radius: 30px; background: rgba(255,255,255,.22); transition: background .2s; }
:where(body.page-dashboard) .ds-switch-track::after {
    content: ""; position: absolute; top: 3px; right: 3px; width: 24px; height: 24px; border-radius: 50%;
    background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.3); transition: transform .2s;
}
:where(body.page-dashboard) .ds-switch { cursor: pointer; }
:where(body.page-dashboard) .ds-store-input:checked ~ .ds-switch .ds-switch-track { background: #12a594; }
:where(body.page-dashboard) .ds-store-input:checked ~ .ds-switch .ds-switch-track::after { transform: translateX(-22px); }
:where(body.page-dashboard) .ds-store-msg { grid-column: 1 / -1; font-size: .78rem; color: rgba(255,255,255,.85); min-height: 0; z-index: 1; }
:where(body.page-dashboard) .ds-store-msg:empty { display: none; }

/* KPI cards */
:where(body.page-dashboard) .ds-kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
:where(body.page-dashboard) .ds-kpi {
    display: grid; grid-template-columns: auto 1fr; grid-template-areas: "icon label" "value value" "sub sub";
    align-items: center; gap: 4px 8px; padding: 12px;
    background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 14px;
    color: var(--text-primary); text-decoration: none; box-shadow: var(--shadow-sm);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
:where(body.page-dashboard) a.ds-kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--primary-light); }
:where(body.page-dashboard) .ds-kpi-icon { grid-area: icon; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: .95rem; }
:where(body.page-dashboard) .ds-kpi-label { grid-area: label; font-size: .78rem; color: var(--text-secondary); font-weight: 500; }
:where(body.page-dashboard) .ds-kpi-value { grid-area: value; font-size: 1.35rem; font-weight: 700; line-height: 1.3; letter-spacing: -.2px; overflow-wrap: anywhere; }
:where(body.page-dashboard) .ds-kpi-value small { font-size: .72rem; font-weight: 500; color: var(--text-secondary); }
:where(body.page-dashboard) .ds-kpi-sub { grid-area: sub; font-size: .72rem; color: var(--text-light); }
:where(body.page-dashboard) .ds-kpi-sub i { font-size: .6rem; margin-right: 2px; }
:where(body.page-dashboard) .ds-kpi--sales  .ds-kpi-icon { background: rgba(240,106,0,.12);  color: #f06a00; }
:where(body.page-dashboard) .ds-kpi--visits .ds-kpi-icon { background: rgba(30,123,255,.12); color: #1e7bff; }
:where(body.page-dashboard) .ds-kpi--wallet .ds-kpi-icon { background: rgba(18,165,148,.12); color: #12a594; }
:where(body.page-dashboard) .ds-kpi--sms    .ds-kpi-icon { background: rgba(0,200,255,.14);  color: #0099c7; }

:where(body.page-dashboard) .ds-kpi--comments .ds-kpi-icon { background: rgba(124,92,255,.12); color: #6a4cf0; }
:where(body.page-dashboard) .ds-kpi--unread   .ds-kpi-icon { background: rgba(240,106,0,.12);  color: #f06a00; }
:where(body.page-dashboard) .ds-kpi--cats     .ds-kpi-icon { background: rgba(30,123,255,.12); color: #1e7bff; }
:where(body.page-dashboard) .ds-kpi--products .ds-kpi-icon { background: rgba(18,165,148,.12); color: #12a594; }

/* هشدار: موجودی کیف پول / پیامک صفر -> قرمز + چشمک */
:where(body.page-dashboard) .ds-kpi--zero {
    border-color: var(--danger-color); background: rgba(229,72,77,.08);
    animation: ds-blink-red 1.1s ease-in-out infinite;
}
:where(body.page-dashboard) .ds-kpi--zero .ds-kpi-icon { background: var(--danger-color); color: #fff; }
:where(body.page-dashboard) .ds-kpi--zero .ds-kpi-value,
:where(body.page-dashboard) .ds-kpi--zero .ds-kpi-value small,
:where(body.page-dashboard) .ds-kpi--zero .ds-kpi-label,
:where(body.page-dashboard) .ds-kpi--zero .ds-kpi-sub { color: var(--danger-color); }
@keyframes ds-blink-red {
    0%, 100% { background: rgba(229,72,77,.08); box-shadow: 0 0 0 0 rgba(229,72,77,0); }
    50%      { background: rgba(229,72,77,.22); box-shadow: 0 0 0 4px rgba(229,72,77,.35); }
}

/* نظر خوانده‌نشده -> چشمک نارنجی */
:where(body.page-dashboard) .ds-kpi--blink {
    border-color: var(--brand-orange);
    animation: ds-blink-orange 1.1s ease-in-out infinite;
}
:where(body.page-dashboard) .ds-kpi--blink .ds-kpi-icon { background: var(--brand-orange); color: #fff; }
:where(body.page-dashboard) .ds-kpi--blink .ds-kpi-value { color: var(--brand-orange); }
@keyframes ds-blink-orange {
    0%, 100% { background: var(--bg-primary); box-shadow: 0 0 0 0 rgba(240,106,0,0); }
    50%      { background: rgba(240,106,0,.14); box-shadow: 0 0 0 4px rgba(240,106,0,.3); }
}
@media (prefers-reduced-motion: reduce) {
    :where(body.page-dashboard) .ds-kpi--zero, :where(body.page-dashboard) .ds-kpi--blink { animation: none; }
}

/* popup هشدار (پیامک صفر / نظر خوانده‌نشده) */
:where(body.page-dashboard) .ds-modal {
    position: fixed; inset: 0; z-index: 9500; display: flex; align-items: center; justify-content: center;
    padding: 16px; background: rgba(8,16,40,.6); backdrop-filter: blur(3px);
}
:where(body.page-dashboard) .ds-modal[hidden], :where(body.page-dashboard) .ds-modal-box[hidden] { display: none; }
body.ds-modal-open { overflow: hidden; }
:where(body.page-dashboard) .ds-modal-box {
    --mc: var(--primary-color);
    width: 100%; max-width: 440px; max-height: 92vh; overflow-y: auto; padding: 24px 20px 18px; text-align: center;
    background: var(--bg-primary); color: var(--text-primary); border-radius: 18px; border-top: 5px solid var(--mc);
    box-shadow: 0 20px 60px rgba(0,0,0,.35); animation: ds-modal-in .22s ease-out;
}
:where(body.page-dashboard) .ds-modal-box--danger { --mc: var(--danger-color); }
:where(body.page-dashboard) .ds-modal-box--info { --mc: var(--brand-orange); }
:where(body.page-dashboard) .ds-modal-icon {
    display: inline-grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; font-size: 1.6rem;
    background: var(--mc); color: #fff; margin-bottom: 8px;
}
:where(body.page-dashboard) .ds-modal-box--danger .ds-modal-icon { animation: ds-blink-red 1.1s ease-in-out infinite; }
:where(body.page-dashboard) .ds-modal-title { margin: 4px 0 6px; font-size: 1.25rem; color: var(--mc); }
:where(body.page-dashboard) .ds-modal-lead { margin: 0 0 12px; font-size: 1rem; font-weight: 700; }
:where(body.page-dashboard) .ds-modal-list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; text-align: right; }
:where(body.page-dashboard) .ds-modal-list li {
    position: relative; padding: 9px 34px 9px 12px; border-radius: 10px; font-size: .86rem; line-height: 1.7;
    background: var(--bg-secondary);
}
:where(body.page-dashboard) .ds-modal-list li::before {
    content: "\2715"; position: absolute; right: 12px; top: 8px; color: var(--mc); font-size: .8rem; font-weight: 700;
}
:where(body.page-dashboard) .ds-modal-box--info .ds-modal-list li::before { content: "\2022"; font-size: 1.2rem; top: 4px; }
:where(body.page-dashboard) .ds-modal-note { margin: 0 0 14px; font-weight: 700; color: var(--mc); }
:where(body.page-dashboard) .ds-modal-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
:where(body.page-dashboard) .ds-modal-actions .ds-btn { flex: 1 1 140px; }
:where(body.page-dashboard) .ds-btn--danger { background: var(--danger-color); border-color: var(--danger-color); }
:where(body.page-dashboard) .ds-btn--danger:hover { background: #c93338; border-color: #c93338; }
@keyframes ds-modal-in { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    :where(body.page-dashboard) .ds-modal-box, :where(body.page-dashboard) .ds-modal-box--danger .ds-modal-icon { animation: none; }
}

/* plan card */
:where(body.page-dashboard) .ds-plan {
    display: grid; gap: 12px; padding: 16px; border-radius: 16px;
    background: var(--bg-primary); border: 1px solid var(--border-color); box-shadow: var(--shadow-sm);
}
:where(body.page-dashboard) .ds-plan-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
:where(body.page-dashboard) .ds-plan-badge {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px;
    font-weight: 700; font-size: .85rem; color: #fff;
    background: linear-gradient(90deg, var(--brand-orange), var(--brand-yellow)); color: #3a2200;
}
:where(body.page-dashboard) .ds-plan--pro .ds-plan-badge { background: linear-gradient(90deg, var(--brand-blue), var(--brand-cyan)); color: #00183f; }
:where(body.page-dashboard) .ds-plan--free .ds-plan-badge { background: var(--bg-secondary); color: var(--text-secondary); border: 1px solid var(--border-color); }
:where(body.page-dashboard) .ds-plan-sub { font-size: .78rem; color: var(--text-secondary); }
:where(body.page-dashboard) .ds-plan-body { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: center; }
:where(body.page-dashboard) .ds-ring {
    --p: 50%; width: 104px; height: 104px; border-radius: 50%; flex: none; display: grid; place-items: center;
    background: conic-gradient(var(--brand-orange) var(--p), var(--border-color) 0);
}
:where(body.page-dashboard) .ds-ring-in {
    width: 82px; height: 82px; border-radius: 50%; background: var(--bg-primary);
    display: grid; place-content: center; text-align: center; line-height: 1.2;
}
:where(body.page-dashboard) .ds-ring-in b { font-size: 1.3rem; color: var(--text-primary); }
:where(body.page-dashboard) .ds-ring-in small { font-size: .62rem; color: var(--text-secondary); }
:where(body.page-dashboard) .ds-count { display: grid; grid-template-columns: repeat(4, minmax(58px, 1fr)); gap: 8px; flex: 1 1 260px; max-width: 420px; }
:where(body.page-dashboard) .ds-tile {
    display: grid; justify-items: center; gap: 2px; padding: 10px 4px; border-radius: 12px;
    background: linear-gradient(180deg, var(--brand-navy), var(--brand-navy-deep)); color: #fff;
}
:where(body.page-dashboard) .ds-tile b { font-size: 1.4rem; line-height: 1.2; font-variant-numeric: tabular-nums; color: var(--brand-yellow); }
:where(body.page-dashboard) .ds-tile small { font-size: .68rem; color: rgba(255,255,255,.7); }
:where(body.page-dashboard) .ds-plan-label { margin: 0; text-align: center; font-size: .82rem; color: var(--text-secondary); }
:where(body.page-dashboard) .ds-warn { margin: 0; padding: 10px 12px; border-radius: 12px; font-size: .85rem; background: rgba(229,72,77,.1); color: var(--danger-color); }

/* buttons + link row */
:where(body.page-dashboard) .ds-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 16px;
    border-radius: 12px; border: 1px solid var(--primary-color); background: var(--primary-color); color: #fff;
    font-family: inherit; font-weight: 700; font-size: .85rem; text-decoration: none; cursor: pointer;
    transition: background-color .15s ease, transform .15s ease;
}
:where(body.page-dashboard) .ds-btn:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
:where(body.page-dashboard) .ds-btn:active { transform: scale(.98); }
:where(body.page-dashboard) .ds-btn--ghost { background: transparent; color: var(--primary-color); }
:where(body.page-dashboard) .ds-btn--ghost:hover { background: var(--primary-soft); color: var(--primary-dark); }
:where(body.page-dashboard) .ds-plan > .ds-btn { justify-self: center; min-width: 180px; }
:where(body.page-dashboard) .ds-link {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px;
    background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 14px;
}
:where(body.page-dashboard) .ds-link-label { font-size: .8rem; color: var(--text-secondary); font-weight: 500; flex: 1 1 100%; }
:where(body.page-dashboard) .ds-link-label i { color: var(--primary-color); margin-left: 4px; }
:where(body.page-dashboard) .ds-link-input {
    flex: 1 1 200px; min-width: 0; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border-color);
    background: var(--bg-secondary); color: var(--text-primary); font-family: Verdana, sans-serif; font-size: .8rem; font-weight: 700;
}

@media (min-width: 769px) {
    :where(body.page-dashboard) .ds { gap: 14px; }
    :where(body.page-dashboard) .ds-hero { padding: 20px 24px; }
    :where(body.page-dashboard) .ds-hello { font-size: 1.4rem; }
    :where(body.page-dashboard) .ds-kpis { grid-template-columns: repeat(4, 1fr); gap: 14px; }
    :where(body.page-dashboard) .ds-kpi { padding: 16px; }
    :where(body.page-dashboard) .ds-kpi-value { font-size: 1.55rem; }
    :where(body.page-dashboard) .ds-plan { padding: 22px; }
    :where(body.page-dashboard) .ds-link-label { flex: none; }
}

/* ==========================================================================
   THEME: SariPik  (visual-only layer: colors, borders, shadows, radius, fonts)
   Palette comes from the logo: navy chrome + orange/yellow primary + cyan/blue.
   Does not touch layout, except the mobile spacing block at the bottom.
   Remove this whole section to go back to the previous look. Prefix
   body.is-app beats the per-page sections without !important.
   ========================================================================== */
body.is-app {
    -webkit-font-smoothing: antialiased;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    font-weight: var(--fw-regular);
}
/* weights: Regular for text, Medium for labels/nav, Bold for titles/actions */
body.is-app h1, body.is-app h2, body.is-app h3, body.is-app h4,
body.is-app th, body.is-app strong, body.is-app b,
body.is-app .card-title, body.is-app .modal-header h2, body.is-app .modal-header h3 { font-weight: var(--fw-bold); }
body.is-app .main-menu a, body.is-app .submenu a, body.is-app .form-label,
body.is-app label, body.is-app .tab-btn, body.is-app .badge, body.is-app .user-name { font-weight: var(--fw-medium); }

/* ---- topbar ---- */
body.is-app header {
    background: linear-gradient(90deg, var(--brand-navy-deep) 0%, var(--brand-navy) 100%);
    color: #fff;
    border-bottom: 0;
    box-shadow: 0 6px 20px rgba(2, 23, 74, 0.18);
}
body.is-app header::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
    background: linear-gradient(90deg, var(--brand-orange), var(--brand-yellow) 50%, var(--brand-cyan));
}
body.is-app header .app-brand h1,
body.is-app header .user-name,
body.is-app header .sidebar-toggle,
body.is-app header .header-left > a,
body.is-app header #time { color: #fff; }
body.is-app header i { color: var(--brand-yellow); }
body.is-app header .sidebar-toggle { background: rgba(255,255,255,.08); border: 0; border-radius: var(--radius-sm); }
body.is-app header .user-avatar { border: 2px solid var(--brand-orange); }
body.is-app .drup-menu { background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: var(--border-radius); box-shadow: var(--shadow-lg); }
body.is-app .drup-menu a { color: var(--text-primary); font-weight: var(--fw-medium); }
body.is-app .drup-menu a i { color: var(--primary-color); }
body.is-app .drup-menu a:hover { background: var(--primary-soft); color: var(--primary-color); }

/* ---- sidebar ---- */
body.is-app .sidebar {
    background: linear-gradient(180deg, var(--brand-navy) 0%, var(--brand-navy-deep) 100%);
    border: 0;
    box-shadow: -6px 0 24px rgba(2, 23, 74, 0.12);
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.18) transparent;
}
body.is-app .sidebar-header { border-bottom-color: rgba(255,255,255,.08); }
body.is-app .sidebar-header h3 { color: rgba(255,255,255,.5); }
body.is-app .sidebar .main-menu > li > a {
    color: rgba(255,255,255,.78);
    margin: 2px 10px;
    border-radius: 10px;
    border-right: 3px solid transparent;
}
body.is-app .sidebar .main-menu li span { color: inherit; }
body.is-app .sidebar .main-menu li i { color: var(--brand-orange); }
body.is-app .sidebar .main-menu > li > a:hover { background: rgba(255,255,255,.07); color: #fff; }
body.is-app .sidebar .main-menu > li.active > a {
    background: linear-gradient(90deg, rgba(255,122,0,.22), rgba(255,196,0,.06));
    color: #fff;
    border-right: 3px solid var(--brand-orange);
    font-weight: var(--fw-bold);
}
body.is-app .sidebar .main-menu > li.active > a i { color: var(--brand-yellow); }
body.is-app .sidebar .submenu { background: rgba(0,0,0,.22); border-radius: 10px; margin: 0 10px; }
body.is-app .sidebar .submenu li a { color: rgba(255,255,255,.66); border-radius: 8px; }
body.is-app .sidebar .submenu li a:hover { color: #fff; background: rgba(255,255,255,.06); }
body.is-app .sidebar .submenu li.active > a,
body.is-app .sidebar .submenu li a.active { color: var(--brand-yellow); background: rgba(255,196,0,.08); }

/* ---- surfaces (cards, panels, modals) ---- */
body.is-app .card,
body.is-app .ms-card,
body.is-app .stat-card,
body.is-app .page-header,
body.is-app .modal-content,
body.is-app .popup-content,
body.is-app .order-popup {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
}
body.is-app .modal-content,
body.is-app .order-popup { box-shadow: var(--shadow-lg); }
body.is-app .card-header,
body.is-app .modal-header,
body.is-app .modal-footer { border-color: var(--border-color); background: transparent; }
body.is-app .modal-overlay,
body.is-app .popup-overlay { background-color: rgba(16, 16, 24, 0.45); backdrop-filter: blur(4px); }
body.is-app .stat-icon { border-radius: 10px; box-shadow: none; }

/* ---- buttons: flat, one accent ---- */
body.is-app .btn,
body.is-app .submit-btn {
    border-radius: var(--radius-sm);
    box-shadow: none;
    font-weight: 600;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
body.is-app .btn:active,
body.is-app .submit-btn:active { transform: scale(.98); }
body.is-app .btn-primary,
body.is-app .submit-btn {
    background-image: none;
    background-color: var(--primary-color);
    border: 1px solid var(--primary-color);
    color: #fff;
}
body.is-app .btn-primary:hover,
body.is-app .submit-btn:hover { background-image: none; background-color: var(--primary-dark); border-color: var(--primary-dark); box-shadow: none; transform: none; }
body.is-app .btn-success { background-image: none; background-color: var(--success-color); border: 1px solid var(--success-color); color: #fff; }
body.is-app .btn-danger  { background-image: none; background-color: var(--danger-color);  border: 1px solid var(--danger-color);  color: #fff; }
body.is-app .btn-success:hover,
body.is-app .btn-danger:hover { background-image: none; filter: brightness(.94); box-shadow: none; transform: none; }
body.is-app .btn-secondary {
    background-image: none;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}
body.is-app .btn-secondary:hover { background-image: none; background-color: var(--bg-secondary); }

/* ---- form fields ---- */
body.is-app .form-control,
body.is-app .form-select,
body.is-app input[type="text"],
body.is-app input[type="number"],
body.is-app input[type="tel"],
body.is-app input[type="email"],
body.is-app input[type="password"],
body.is-app input[type="search"],
body.is-app select,
body.is-app textarea {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
body.is-app .form-control:focus,
body.is-app .form-select:focus,
body.is-app input:focus,
body.is-app select:focus,
body.is-app textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-soft);
}
body.is-app ::placeholder { color: var(--text-light); }
body.is-app .form-label { color: var(--text-secondary); font-weight: 500; }

/* ---- tables ---- */
body.is-app table { border-color: var(--border-color); }
body.is-app .menu-table th,
body.is-app .stats-table th,
body.is-app table th {
    background-color: var(--bg-secondary);
    color: var(--text-secondary);
    font-weight: 600;
    border-color: var(--border-color);
}
body.is-app .menu-table td,
body.is-app .stats-table td,
body.is-app table td { border-color: var(--border-color); }
body.is-app .menu-table tbody tr:hover,
body.is-app .stats-table tbody tr:hover { background-color: var(--primary-soft); }

/* ---- tabs, badges, alerts, toasts ---- */
body.is-app .tab-btn { background: transparent; border-color: transparent; color: var(--text-secondary); box-shadow: none; }
body.is-app .tab-btn:hover { color: var(--primary-color); }
body.is-app .tab-btn.active { background: var(--primary-soft); color: var(--primary-color); border-color: transparent; font-weight: var(--fw-bold); }
body.is-app .badge { border-radius: 999px; font-weight: 600; }
body.is-app .alert,
body.is-app .toast-notification,
body.is-app .toast { border-radius: var(--radius-sm); box-shadow: var(--shadow-md); }
body.is-app .empty-state { color: var(--text-light); }

/* ---- details ---- */
body.is-app a { transition: color .15s ease; }
body.is-app * { scrollbar-width: thin; scrollbar-color: var(--border-color) transparent; }

/* ---- mobile: minimum padding, content uses the full width ---- */
@media screen and (max-width: 768px) {
    body.is-app .main-content { padding: 8px 6px; }
    body.is-app .header-container { padding: 0 10px; }
    body.is-app .container { padding-left: 6px; padding-right: 6px; max-width: 100%; }
    body.is-app .ms-card,
    body.is-app .stat-card { padding: 12px; }
    body.is-app .card-header,
    body.is-app .page-header,
    body.is-app .modal-header,
    body.is-app .modal-footer { padding: 10px 12px; }
    body.is-app .card-body,
    body.is-app .modal-body { padding: 12px; }
    body.is-app .modal-content { width: 98%; }
    body.is-app .sidebar { width: 270px; }
}

/* ==========================================================================
   POLISH: oes (quick order screen) - visual refinement, same markup/JS
   ========================================================================== */
body.page-oes .oes-shell { margin: -20px; }
body.page-oes {
    --oes-border: var(--border-color);
    --oes-muted: var(--text-secondary);
    --oes-radius: 16px;
    --oes-r-sm: 12px;
}
/* tabs: segmented pill bar */
body.page-oes .oes-tabs {
    margin: 10px 12px 0; padding: 4px; gap: 4px; border: 1px solid var(--border-color);
    border-radius: 16px; background: var(--bg-primary); box-shadow: var(--shadow-md);
}
body.page-oes .oes-tabs .tab-btn {
    border: 0; border-radius: 12px; padding: 10px 6px; font-size: .84rem; font-weight: var(--fw-medium);
    background: transparent; color: var(--text-secondary);
}
body.page-oes .oes-tabs .tab-btn.active {
    background: linear-gradient(135deg, var(--brand-orange), var(--primary-color)); color: #fff;
    font-weight: var(--fw-bold); box-shadow: 0 4px 14px rgba(240,106,0,.35);
}
body.page-oes .tab-badge { background: var(--brand-yellow); color: #3a2200; }
body.page-oes .oes-tabs .tab-btn.active .tab-badge { background: #fff; color: var(--primary-dark); }
body.page-oes .oes-content { padding: 10px 12px 96px; }

/* order type */
body.page-oes .order-type-card {
    border: 1.5px solid var(--border-color); border-radius: 16px; background: var(--bg-primary);
    padding: 12px 8px; color: var(--text-secondary); box-shadow: var(--shadow-sm); font-weight: var(--fw-medium);
}
body.page-oes .order-type-card .ot-icon {
    width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center;
    background: var(--bg-secondary); font-size: 1.5rem; transition: background .15s;
}
body.page-oes .order-type-card.selected {
    border-color: var(--primary-color); color: var(--primary-dark); font-weight: var(--fw-bold);
    background: linear-gradient(180deg, rgba(255,196,0,.10), rgba(240,106,0,.10));
    box-shadow: 0 0 0 3px var(--primary-soft);
}
body.page-oes .order-type-card.selected .ot-icon { background: rgba(240,106,0,.14); }

/* cards / panels */
body.page-oes .customer-box,
body.page-oes .menu-panel {
    background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 18px;
    box-shadow: var(--shadow-sm); overflow: visible;
}
body.page-oes .panel-head { font-weight: var(--fw-bold); color: var(--text-primary); }
body.page-oes .cust-input,
body.page-oes .oes-form-input,
body.page-oes .fare-input,
body.page-oes .notes-input {
    background: var(--bg-secondary); border: 1.5px solid transparent; border-radius: 12px; box-shadow: none;
}
body.page-oes .cust-input:focus,
body.page-oes .oes-form-input:focus,
body.page-oes .fare-input:focus,
body.page-oes .notes-input:focus { border-color: var(--primary-color); background: var(--bg-primary); box-shadow: 0 0 0 3px var(--primary-soft); }
body.page-oes .selected-customer { border-radius: 12px; background: var(--primary-soft); border-color: rgba(240,106,0,.3); }

/* categories */
body.page-oes .cat-chip {
    border-radius: 999px; border: 1px solid var(--border-color); background: var(--bg-primary);
    color: var(--text-secondary); font-weight: var(--fw-medium); padding: 6px 14px;
}
body.page-oes .cat-chip.active {
    background: var(--brand-navy); border-color: var(--brand-navy); color: #fff; font-weight: var(--fw-bold);
}

/* products */
body.page-oes .products-grid { gap: 10px; }
body.page-oes .product-card {
    background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 16px;
    padding: 12px; box-shadow: var(--shadow-sm);
}
body.page-oes .product-card:hover { border-color: var(--primary-light); box-shadow: 0 8px 22px rgba(240,106,0,.16); }
body.page-oes .product-name { font-weight: var(--fw-medium); }
body.page-oes .product-price { color: var(--primary-color); font-weight: var(--fw-bold); }
body.page-oes .product-plus { background: var(--primary-soft); color: var(--primary-color); width: 28px; height: 28px; }
body.page-oes .product-plus:hover { background: var(--primary-color); color: #fff; }

/* floating cart + sheet */
body.page-oes .cart-fab {
    background: linear-gradient(135deg, var(--brand-orange), #e85d04); border-radius: 18px;
    box-shadow: 0 10px 28px rgba(240,106,0,.45);
}
body.page-oes .cart-fab .cart-count { background: var(--brand-yellow); color: #3a2200; }
body.page-oes .oes-overlay,
body.page-oes .oes-modal-overlay { background: rgba(2,23,74,.55); backdrop-filter: blur(4px); }
body.page-oes .sheet { border-radius: 24px 24px 0 0; box-shadow: 0 -12px 40px rgba(2,23,74,.25); }
body.page-oes .sheet-handle { width: 44px; height: 5px; border-radius: 5px; background: var(--border-color); }
body.page-oes .sheet-head h3 { font-weight: var(--fw-bold); }
body.page-oes .total-amount { color: var(--brand-navy); font-weight: var(--fw-bold); font-size: 1.1rem; }
.dark-mode body.page-oes .total-amount,
body.page-oes.dark-mode .total-amount { color: var(--brand-yellow); }
body.page-oes .btn-submit,
body.page-oes .btn-oes-primary {
    background: linear-gradient(135deg, var(--brand-orange), var(--primary-color)); border: 0; color: #fff;
    border-radius: 14px; font-weight: var(--fw-bold); box-shadow: 0 8px 20px rgba(240,106,0,.30);
}
body.page-oes .btn-submit:disabled,
body.page-oes .btn-oes-primary:disabled { background: var(--border-color); color: var(--text-light); box-shadow: none; }
body.page-oes .btn-oes-secondary { border-radius: 14px; }
body.page-oes .qty-btn { border-radius: 10px; }
body.page-oes .discount-section { border-radius: 14px; }

/* today's orders */
body.page-oes .order-card {
    background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 16px; box-shadow: var(--shadow-sm);
}
body.page-oes .order-inv { font-weight: var(--fw-bold); }
body.page-oes .status-badge { border-radius: 999px; font-weight: var(--fw-bold); }
body.page-oes .order-total-amount { color: var(--brand-navy); font-weight: var(--fw-bold); }
body.page-oes .refresh-btn { border-radius: 12px; }
body.page-oes .modal-box { border-radius: 20px; }
body.page-oes .toast { border-radius: 14px; }

@media screen and (max-width: 768px) {
    body.page-oes .oes-shell { margin: -8px -6px; }
}

/* ==========================================================================
   LATE OVERRIDES  (new-order-api.php)
   source: includes/new-order-api.php
   ========================================================================== */
/* ========== NOrder- استایل‌های اختصاصی ========== */
#NOrder-popup {
    position: fixed;
    top: 20px;
    left: 20px;
    background: linear-gradient(135deg, #0a1929 0%, #1a365d 50%, #0a1929 100%);
    background-size: 200% 200%;
    animation: NOrder-gradientShift 3s ease infinite, NOrder-slideIn 0.3s ease;
    color: #fff;
    padding: 10px 16px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    z-index: 10001;
    cursor: pointer;
    display: none;
    font-family: Tahoma, sans-serif;
    font-size: 13px;
    max-width: 400px;
    white-space: normal;
    word-break: break-word;
    border: 1px solid rgba(255,255,255,0.1);
}
#NOrder-popup:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.5);
}
@keyframes NOrder-gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@keyframes NOrder-slideIn {
    from { transform: translateX(-100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.NOrder-modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.6);
    z-index: 10000;
    align-items: center;
    justify-content: center;
}
.NOrder-modal-overlay.active {
    display: flex;
}
.NOrder-modal-content {
    background: #fff;
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    max-height: 85vh;
    overflow-y: auto;
    padding: 20px;
    position: relative;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    font-family: Tahoma, sans-serif;
    direction: rtl;
}
.NOrder-modal-close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 22px;
    cursor: pointer;
    color: #666;
    background: none;
    border: none;
}
.NOrder-modal-close:hover { color: #333; }

.NOrder-modal-order-summary {
    background: #f8f9fa;
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 15px;
    text-align: center;
}
.NOrder-modal-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 15px;
}
.NOrder-modal-btn {
    padding: 10px 18px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    color: white;
    transition: all 0.2s;
}
.NOrder-modal-btn:hover { opacity: 0.9; transform: translateY(-1px); }
.NOrder-btn-cash { background: #28a745; }
.NOrder-btn-kitchen { background: #f0ad4e; color: #000; }
.NOrder-btn-both { background: #6f42c1; }
.NOrder-btn-confirm { background: #17a2b8; }