/* منع pinch-zoom و double-tap zoom على iOS بشكل شامل
           pan-x pan-y = تمرير فقط بدون pinch-zoom (manipulation تشمل pinch-zoom!) */
        html, body {
            touch-action: pan-x pan-y;
        }
        * {
            touch-action: pan-x pan-y;
        }

        /* هوية جوف — ألوان القهوة والترابية */
        :root {
            --primary-color: #6D4D3D;
            --primary-light: #8B5C3F;
            --primary-dark: #5C3A2F;
            --bg-color: #EDE8E0;
            --card-bg: #FFFFFF;
            --text-primary: #5C3A2F;
            --text-secondary: #765C4F;
            --border-color: #D3B294;
            --accent-beige: #EAE4DC;
            --success-color: #5a7d5a;
            --warning-color: #b8860b;
            --danger-color: #a84343;
        }
        
        [data-theme="dark"] {
            --primary-color: #D3B294;
            --primary-light: #E8D5C4;
            --primary-dark: #AD8B6A;
            --bg-color: #2D1F18;
            --card-bg: #3D2A22;
            --text-primary: #EDE8E0;
            --text-secondary: #B8A898;
            --border-color: #5C4235;
            --accent-beige: #4A3328;
            --success-color: #81c784;
            --warning-color: #ffb74d;
            --danger-color: #e57373;
            /* أسطح إضافية للوضع الليلي */
            --surface-dim: #35261e;
            --surface-raised: #4A3328;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Tajawal', sans-serif;
        }
        
        body {
            font-family: 'Tajawal', sans-serif;
            background: var(--bg-color);
            min-height: 100vh;
            padding: 20px;
            transition: background-color 0.3s ease, color 0.3s ease;
            color: var(--text-primary);
        }
        
        body.modal-open {
            overflow: hidden;
            position: fixed;
            width: 100%;
        }
        
        body.image-modal-open {
            overflow: hidden;
            position: fixed;
            width: 100%;
            height: 100%;
        }
        
        .offline-banner {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 10000;
            background: var(--warning-color);
            color: #fff;
            padding: 12px 20px;
            text-align: center;
            font-weight: 600;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.15);
        }
        .offline-banner.hidden { display: none !important; }
        body.offline-active { padding-top: 52px; }

        /* ===== بانر الإعلانات ===== */
        .announcement-banner {
            position: relative;
            width: auto;
            margin: 0 -20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 11px 18px;
            font-size: 14px;
            font-weight: 500;
            animation: annSlideDown 0.4s cubic-bezier(0.22,1,0.36,1);
            overflow: hidden;
        }
        .announcement-banner.hidden { display: none !important; }
        .announcement-banner.slide-out {
            animation: annSlideUp 0.35s ease forwards;
        }
        @keyframes annSlideDown {
            from { opacity: 0; transform: translateY(-100%); max-height: 0; padding-top: 0; padding-bottom: 0; }
            to   { opacity: 1; transform: translateY(0);    max-height: 80px; }
        }
        @keyframes annSlideUp {
            to { opacity: 0; transform: translateY(-100%); max-height: 0; padding-top: 0; padding-bottom: 0; }
        }
        /* أنواع الإعلان */
        .announcement-banner.type-info        { background: linear-gradient(135deg, #1565C0, #1976D2); color: #fff; }
        .announcement-banner.type-discount    { background: linear-gradient(135deg, #2E7D32, #43A047); color: #fff; }
        .announcement-banner.type-occasion    { background: linear-gradient(135deg, var(--primary-dark), var(--primary-color)); color: #EDE8E0; }
        .announcement-banner.type-maintenance { background: linear-gradient(135deg, #BF360C, #E53935); color: #fff; }
        /* داكن */
        [data-theme="dark"] .announcement-banner.type-info        { background: linear-gradient(135deg, #0D47A1, #1565C0); }
        [data-theme="dark"] .announcement-banner.type-discount    { background: linear-gradient(135deg, #1B5E20, #2E7D32); }
        [data-theme="dark"] .announcement-banner.type-occasion    { background: linear-gradient(135deg, #3E2723, #5C3A2F); }
        [data-theme="dark"] .announcement-banner.type-maintenance { background: linear-gradient(135deg, #7F0000, #C62828); }

        .announcement-inner {
            display: flex;
            align-items: center;
            gap: 10px;
            flex: 1;
            min-width: 0;
        }
        .announcement-icon {
            font-size: 17px;
            flex-shrink: 0;
            opacity: 0.92;
        }
        .announcement-text {
            font-size: 13.5px;
            line-height: 1.4;
            flex: 1;
        }
        .announcement-close {
            background: rgba(255,255,255,0.18);
            border: none;
            color: inherit;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 13px;
            flex-shrink: 0;
            transition: background 0.2s;
        }
        .announcement-close:hover { background: rgba(255,255,255,0.32); }

        /* قسم إعدادات الإعلان */
        .announcement-admin-card {
            background: var(--accent-beige);
            border-radius: 14px;
            padding: 16px;
            border: 1px solid var(--border-color);
        }
        [data-theme="dark"] .announcement-admin-card { background: var(--surface-dim); }
        .ann-type-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 8px;
            margin-top: 8px;
        }
        .ann-type-btn {
            display: flex;
            align-items: center;
            gap: 7px;
            padding: 9px 12px;
            border-radius: 10px;
            border: 2px solid var(--border-color);
            background: var(--card-bg);
            color: var(--text-secondary);
            cursor: pointer;
            font-size: 13px;
            font-weight: 600;
            transition: all 0.2s;
            font-family: 'Tajawal', sans-serif;
        }
        .ann-type-btn i { font-size: 16px; }
        .ann-type-btn[data-type="info"].active        { border-color: #1976D2; color: #1976D2; background: #E3F2FD; }
        .ann-type-btn[data-type="discount"].active    { border-color: #43A047; color: #2E7D32; background: #E8F5E9; }
        .ann-type-btn[data-type="occasion"].active    { border-color: var(--primary-color); color: var(--primary-dark); background: var(--accent-beige); }
        .ann-type-btn[data-type="maintenance"].active { border-color: #E53935; color: #BF360C; background: #FFEBEE; }
        [data-theme="dark"] .ann-type-btn[data-type="info"].active        { background: rgba(25,118,210,0.2);  color: #90caf9; border-color: #90caf9; }
        [data-theme="dark"] .ann-type-btn[data-type="discount"].active    { background: rgba(67,160,71,0.2);   color: #a5d6a7; border-color: #a5d6a7; }
        [data-theme="dark"] .ann-type-btn[data-type="maintenance"].active { background: rgba(229,57,53,0.2);   color: #ef9a9a; border-color: #ef9a9a; }
        .ann-current-preview {
            margin-top: 12px;
            padding: 10px 14px;
            border-radius: 10px;
            font-size: 13px;
            border: 1px solid var(--border-color);
            color: var(--text-secondary);
        }
        .ann-current-preview.hidden { display: none; }
        
        .container {
            max-width: 900px;
            margin: 0 auto;
        }
        
        /* Login Screen */
        /* شاشة التحميل — تمنع وميض شاشة الدخول */
        #appLoadingScreen {
            position: fixed;
            inset: 0;
            background: var(--bg-color);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: 9999;
            transition: opacity 0.3s ease;
        }
        #appLoadingScreen.fade-out {
            opacity: 0;
            pointer-events: none;
        }
        #appLoadingScreen.hidden { display: none; }
        .app-loading-logo {
            width: 80px;
            height: 80px;
            border-radius: 20px;
            margin-bottom: 20px;
            object-fit: contain;
        }
        .app-loading-spinner {
            width: 36px;
            height: 36px;
            border: 3px solid var(--border-color);
            border-top-color: var(--primary-color);
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
        }
        @keyframes spin { to { transform: rotate(360deg); } }
        .app-loading-text {
            margin-top: 14px;
            font-size: 14px;
            color: var(--text-secondary);
            font-family: 'Tajawal', sans-serif;
        }

        .login-screen {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            padding: 20px;
        }
        
        .login-card {
            background: var(--card-bg);
            padding: 50px 40px;
            border-radius: 20px;
            box-shadow: 0 20px 60px rgba(108, 77, 61, 0.2);
            text-align: center;
            max-width: 400px;
            width: 100%;
        }
        
        .logo-container {
            margin-bottom: 20px;
        }
        
        .app-logo {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            object-fit: cover;
            border: 4px solid var(--primary-color);
            background: var(--card-bg);
        }
        
        .logo {
            font-size: 48px;
            font-weight: 700;
            color: var(--primary-color);
            margin-bottom: 10px;
        }
        
        .tagline {
            color: var(--text-secondary);
            margin-bottom: 40px;
            font-size: 16px;
        }
        
        .btn-google {
            width: 100%;
            padding: 15px;
            background: var(--card-bg);
            border: 2px solid var(--border-color);
            border-radius: 10px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            transition: all 0.3s;
            font-family: 'Tajawal', sans-serif;
            color: var(--text-primary);
        }
        
        .btn-google:hover:not(:disabled) {
            border-color: var(--primary-color);
            background: var(--bg-color);
        }

        .btn-google:disabled {
            opacity: 0.45;
            cursor: not-allowed;
        }

        /* ── تبويبات مودال الدخول ── */
        .auth-tab {
            flex: 1;
            padding: 9px 12px;
            border: 1.5px solid var(--border-color);
            border-radius: 10px;
            background: var(--bg-color);
            color: var(--text-secondary);
            font-family: 'Tajawal', sans-serif;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            transition: all .2s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
        }
        .auth-tab.active {
            background: var(--primary-color);
            border-color: var(--primary-color);
            color: #fff;
        }
        .auth-tab:hover:not(.active) {
            border-color: var(--primary-color);
            color: var(--primary-color);
        }
        .alert-success {
            background: #e8f5e9;
            color: #2e7d32;
            border: 1px solid #a5d6a7;
        }
        [data-theme="dark"] .alert-success {
            background: #1b3a1e;
            color: #81c784;
            border-color: #388e3c;
        }

        .terms-label {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            margin-bottom: 16px;
            cursor: pointer;
            text-align: right;
        }

        .terms-label input[type="checkbox"] {
            width: 18px;
            height: 18px;
            accent-color: var(--primary-color);
            margin-top: 3px;
            flex-shrink: 0;
            cursor: pointer;
        }

        .terms-label span {
            font-size: 13px;
            color: var(--text-secondary);
            line-height: 1.6;
        }

        .terms-label a {
            color: var(--primary-color);
            font-weight: 600;
            text-decoration: none;
        }

        .terms-label a:hover { text-decoration: underline; }

        .btn-guest-login {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 8px 14px;
            background: var(--primary-color);
            color: white;
            border: none;
            border-radius: 10px;
            font-family: 'Tajawal', sans-serif;
            font-size: 14px;
            font-weight: 700;
            cursor: pointer;
            transition: background 0.2s;
            white-space: nowrap;
        }
        .btn-guest-login:hover { background: var(--primary-dark); }

        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            20% { transform: translateX(-6px); }
            40% { transform: translateX(6px); }
            60% { transform: translateX(-4px); }
            80% { transform: translateX(4px); }
        }
        
        .alert {
            padding: 15px;
            border-radius: 10px;
            margin-top: 20px;
            font-size: 14px;
            background: #ffebee;
            color: #c62828;
            border: 1px solid #ef5350;
        }
        
        .hidden {
            display: none !important;
        }
        
        /* Header */
        .header {
            background: var(--card-bg);
            padding: 14px 20px 10px;
            margin: 0 -20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 16px;
            flex-wrap: wrap;
        }
        
        .header-top {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
        }
        
        .header-logo {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid var(--primary-color);
            cursor: pointer;
        }
        
        .app-title {
            font-size: 28px;
            font-weight: 700;
            color: var(--primary-color);
            cursor: pointer;
        }
        
        .header-actions {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 15px;
            position: sticky;
            top: 0;
            z-index: 100;
            background: var(--card-bg);
            padding: 10px 20px;
            margin: 0 -20px 10px;
            border-bottom: 1px solid var(--border-color);
            box-shadow: 0 2px 8px rgba(0,0,0,0.06);
        }
        
        .icon-btn {
            background: none;
            border: none;
            cursor: pointer;
            font-size: 22px;
            color: var(--text-secondary);
            padding: 8px;
            border-radius: 8px;
            transition: all 0.3s;
        }
        
        .icon-btn:hover {
            background: var(--bg-color);
            color: var(--primary-color);
        }

        /* زر الثيم */
        .theme-toggle-btn { position: relative; }
        .theme-toggle-btn #themeToggleIcon { transition: transform 0.35s ease; }
        .theme-toggle-btn:hover #themeToggleIcon { transform: rotate(20deg); }
        .theme-btn-active { color: var(--primary-color) !important; }
        .theme-btn-active:hover { color: var(--primary-color) !important; }
        /* أيقونة الشمس صفراء */
        .theme-toggle-btn .bi-sun-fill { color: #f5a623; }
        /* أيقونة القمر بلون المتجر */
        .theme-toggle-btn .bi-moon-fill { color: var(--primary-color); }
        
        .user-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border: 2px solid var(--primary-color);
        }
        
        /* Stats Card */
        .stats-card {
            background: var(--card-bg);
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.1);
            margin-bottom: 20px;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 20px;
        }
        
        .stat-item {
            text-align: center;
        }
        
        .stat-value {
            font-size: 32px;
            font-weight: 700;
            color: var(--primary-color);
            margin-bottom: 5px;
        }
        
        .stat-label {
            font-size: 14px;
            color: var(--text-secondary);
        }
        
        .stat-value.profit {
            color: var(--success-color);
        }
        
        .stat-value.cost {
            color: var(--warning-color);
        }
        
        .stat-value.urgent {
            color: var(--danger-color);
        }
        
        /* Search Bar */
        .search-bar {
            background: var(--card-bg);
            padding: 15px 20px;
            border-radius: 12px;
            box-shadow: 0 3px 10px rgba(0,0,0,0.1);
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .search-input {
            flex: 1;
            padding: 12px 15px;
            border: 2px solid var(--border-color);
            border-radius: 10px;
            font-family: 'Tajawal', sans-serif;
            font-size: 15px;
            background: var(--card-bg);
            color: var(--text-primary);
            transition: border-color 0.3s;
        }
        
        .search-input:focus {
            outline: none;
            border-color: var(--primary-color);
        }
        
        .search-icon {
            font-size: 20px;
            color: var(--primary-color);
        }

        /* مقترحات البحث */
        .search-bar { position: relative; }
        .search-suggestions {
            position: absolute;
            top: calc(100% + 6px);
            right: 0; left: 0;
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            box-shadow: 0 8px 24px rgba(0,0,0,0.12);
            z-index: 999;
            overflow: hidden;
            animation: suggFadeIn .15s ease;
        }
        @keyframes suggFadeIn { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } }
        .search-sugg-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 16px;
            cursor: pointer;
            font-size: 14px;
            color: var(--text-primary);
            border-bottom: 1px solid var(--border-color);
            transition: background .15s;
        }
        .search-sugg-item:last-child { border-bottom: none; }
        .search-sugg-item:hover, .search-sugg-item.active {
            background: var(--bg-color);
        }
        .search-sugg-img {
            width: 36px; height: 36px;
            border-radius: 8px;
            object-fit: cover;
            flex-shrink: 0;
            background: var(--bg-color);
        }
        .search-sugg-name { flex: 1; font-weight: 600; }
        .search-sugg-price { font-size: 13px; color: var(--primary-color); font-weight: 700; white-space: nowrap; }
        .search-sugg-highlight { color: var(--primary-color); }

        /* Last Backup Banner */
        .last-backup-banner {
            background: #e8f5e9;
            color: #2e7d32;
            padding: 8px 14px;
            margin: 0 -20px 12px;
            border-radius: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            font-size: 13px;
        }
        .last-backup-banner.hidden {
            display: none;
        }
        [data-theme="dark"] .last-backup-banner {
            background: rgba(46, 125, 50, 0.25);
            color: #a5d6a7;
        }

        /* Urgent Alert */
        .urgent-alert {
            background: linear-gradient(135deg, #a84343 0%, #6D4D3D 100%);
            color: white;
            padding: 15px 20px;
            border-radius: 12px;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-shadow: 0 5px 15px rgba(244, 67, 54, 0.3);
            animation: pulse-urgent 2s infinite;
            cursor: pointer;
        }
        
        @keyframes pulse-urgent {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.02); }
        }
        
        .urgent-alert-content {
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: 600;
        }
        
        .urgent-badge {
            background: white;
            color: var(--danger-color);
            padding: 5px 12px;
            border-radius: 20px;
            font-weight: 700;
            font-size: 14px;
        }

        /* ========== الوضع الليلي — تجاوزات متناسقة ========== */
        [data-theme="dark"] .login-card,
        [data-theme="dark"] .stats-card,
        [data-theme="dark"] .search-bar,
        [data-theme="dark"] .modal {
            box-shadow: 0 4px 20px rgba(0,0,0,0.35);
        }
        [data-theme="dark"] .order-card,
        [data-theme="dark"] .side-costs-card {
            box-shadow: 0 2px 12px rgba(0,0,0,0.25);
        }
        [data-theme="dark"] .urgent-badge {
            background: var(--card-bg);
            color: var(--danger-color);
        }
        [data-theme="dark"] .alert {
            background: rgba(229, 115, 115, 0.2);
            color: #e57373;
            border-color: var(--danger-color);
        }
        [data-theme="dark"] .order-card-completed {
            background: var(--surface-dim);
            border-right-color: var(--text-secondary);
        }
        [data-theme="dark"] .order-card-completed .order-info h3,
        [data-theme="dark"] .order-card-completed .order-info p,
        [data-theme="dark"] .order-card-completed .order-price,
        [data-theme="dark"] .order-card-completed .delivery-date,
        [data-theme="dark"] .order-card-completed .order-price {
            color: var(--text-secondary);
        }
        [data-theme="dark"] .order-card-expand-hint {
            color: var(--text-secondary);
        }
        [data-theme="dark"] .order-card-collapse-btn {
            border-color: var(--border-color);
            color: var(--text-secondary);
        }
        [data-theme="dark"] .order-card-collapse-btn:hover {
            background: var(--surface-raised);
            color: var(--text-primary);
        }
        [data-theme="dark"] .order-card-collapsed-clickable:hover {
            background: rgba(255,255,255,0.06);
        }
        [data-theme="dark"] .status-new { background: var(--surface-raised); color: var(--primary-color); }
        [data-theme="dark"] .status-working { background: rgba(255, 167, 38, 0.2); color: var(--warning-color); }
        [data-theme="dark"] .status-delivery { background: rgba(171, 71, 188, 0.2); color: #ce93d8; }
        [data-theme="dark"] .status-completed { background: rgba(129, 199, 132, 0.2); color: var(--success-color); }
        [data-theme="dark"] .status-cancelled { background: rgba(96, 125, 139, 0.25); color: #90a4ae; }
        [data-theme="dark"] .status-pending { background: rgba(255, 193, 7, 0.2); color: var(--warning-color); }
        [data-theme="dark"] .btn-status-new { background: var(--surface-raised); color: var(--primary-color); }
        [data-theme="dark"] .btn-status-working { background: rgba(255, 167, 38, 0.2); color: var(--warning-color); }
        [data-theme="dark"] .btn-status-delivery { background: rgba(171, 71, 188, 0.2); color: #ce93d8; }
        [data-theme="dark"] .btn-status-completed { background: rgba(129, 199, 132, 0.2); color: var(--success-color); }
        [data-theme="dark"] .btn-delete {
            background: rgba(229, 115, 115, 0.25);
            color: var(--danger-color);
        }
        [data-theme="dark"] .btn-delete:hover {
            background: rgba(229, 115, 115, 0.4);
        }
        [data-theme="dark"] .order-card.urgent {
            background: linear-gradient(to left, rgba(229, 115, 115, 0.12) 0%, var(--card-bg) 20%);
        }
        [data-theme="dark"] .modal-overlay {
            background: rgba(0, 0, 0, 0.65);
        }
        [data-theme="dark"] .add-btn {
            box-shadow: 0 4px 16px rgba(0,0,0,0.35);
        }
        [data-theme="dark"] .add-btn:hover {
            box-shadow: 0 6px 20px rgba(0,0,0,0.45);
        }
        [data-theme="dark"] .side-costs-add-btn {
            background: rgba(255, 183, 77, 0.15);
        }
        [data-theme="dark"] .side-costs-add-btn:hover {
            background: rgba(255, 183, 77, 0.25);
        }

        /* صندوق طلب الإلغاء في تفاصيل الطلب */
        .order-cancel-box {
            background: #fff8e1;
            border: 1px solid #ffe082;
            padding: 12px 14px;
            border-radius: 10px;
            margin-top: 6px;
            font-size: 14px;
            line-height: 1.7;
        }
        [data-theme="dark"] .order-cancel-box {
            background: rgba(255, 224, 130, 0.08);
            border-color: rgba(255, 224, 130, 0.25);
            color: var(--text-primary);
        }
        .order-cancel-box .order-box-admin-note {
            margin-top: 8px;
            padding-top: 8px;
            border-top: 1px dashed #ffe082;
            font-size: 13px;
            color: #7a5c00;
        }
        [data-theme="dark"] .order-cancel-box .order-box-admin-note {
            border-top-color: rgba(255, 224, 130, 0.25);
            color: #ffd54f;
        }

        /* صندوق طلب الإرجاع في تفاصيل الطلب */
        .order-return-box {
            background: #e8f4fd;
            border: 1px solid #90caf9;
            padding: 12px 14px;
            border-radius: 10px;
            margin-top: 6px;
            font-size: 14px;
            line-height: 1.8;
        }
        [data-theme="dark"] .order-return-box {
            background: rgba(144, 202, 249, 0.08);
            border-color: rgba(144, 202, 249, 0.25);
            color: var(--text-primary);
        }
        .order-return-box .order-box-admin-note {
            margin-top: 8px;
            padding-top: 8px;
            border-top: 1px dashed #90caf9;
            font-size: 13px;
            color: #1565c0;
        }
        [data-theme="dark"] .order-return-box .order-box-admin-note {
            border-top-color: rgba(144, 202, 249, 0.25);
            color: #90caf9;
        }

        /* Side Costs Card */
        .side-costs-card {
            background: var(--card-bg);
            border-radius: 12px;
            padding: 16px;
            margin-bottom: 20px;
            box-shadow: 0 3px 10px rgba(0,0,0,0.08);
            border-right: 4px solid var(--warning-color);
        }
        .side-costs-header {
            margin-bottom: 14px;
        }
        .side-costs-title-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 8px;
        }
        .side-costs-title {
            font-size: 17px;
            color: var(--text-primary);
            margin: 0;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .side-costs-title i {
            color: var(--warning-color);
        }
        .side-costs-total {
            font-size: 18px;
            font-weight: 700;
            color: var(--warning-color);
        }
        .side-costs-hint {
            font-size: 12px;
            color: var(--text-secondary);
            margin: 6px 0 12px 0;
        }
        .side-costs-add-btn {
            width: 100%;
            padding: 12px 16px;
            background: rgba(255, 152, 0, 0.15);
            color: var(--warning-color);
            border: 1px dashed var(--warning-color);
            border-radius: 10px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            font-family: 'Tajawal', sans-serif;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            transition: all 0.2s;
        }
        .side-costs-add-btn:hover {
            background: rgba(255, 152, 0, 0.25);
        }
        .side-costs-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .side-costs-empty {
            text-align: center;
            color: var(--text-secondary);
            font-size: 13px;
            padding: 16px;
            margin: 0;
        }
        .side-cost-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            padding: 12px 14px;
            background: var(--bg-color);
            border-radius: 10px;
            border-right: 3px solid var(--warning-color);
        }
        .side-cost-item-info {
            flex: 1;
            min-width: 0;
        }
        .side-cost-item-name {
            font-weight: 600;
            color: var(--text-primary);
            font-size: 14px;
            margin-bottom: 2px;
        }
        .side-cost-item-date {
            font-size: 12px;
            color: var(--text-secondary);
        }
        .side-cost-item-amount {
            font-weight: 700;
            color: var(--warning-color);
            font-size: 15px;
        }
        .side-cost-item-delete {
            background: none;
            border: none;
            color: var(--text-secondary);
            cursor: pointer;
            padding: 6px;
            border-radius: 8px;
            transition: color 0.2s, background 0.2s;
        }
        .side-cost-item-delete:hover {
            color: var(--danger-color);
            background: rgba(244, 67, 54, 0.1);
        }
        .modal.modal-sm { max-width: 380px; }
        
        /* Add Button */
        .add-btn {
            width: 100%;
            padding: 18px;
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
            color: white;
            border: none;
            border-radius: 12px;
            font-size: 18px;
            font-weight: 600;
            cursor: pointer;
            margin-bottom: 20px;
            font-family: 'Tajawal', sans-serif;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            box-shadow: 0 5px 15px rgba(108, 77, 61, 0.35);
            transition: all 0.3s;
        }
        
        .add-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 7px 20px rgba(108, 77, 61, 0.4);
        }
        
        /* Orders List */
        .orders-list {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }
        
        .order-card {
            background: var(--card-bg);
            padding: 20px;
            border-radius: 12px;
            box-shadow: 0 3px 10px rgba(0,0,0,0.1);
            transition: all 0.3s;
            border-right: 4px solid var(--primary-color);
        }
        
        .order-card.urgent {
            border-right: 4px solid var(--danger-color);
            background: linear-gradient(to left, rgba(244, 67, 54, 0.05) 0%, var(--card-bg) 20%);
        }
        
        @media (hover: hover) {
            .order-card:hover {
                transform: translateY(-3px);
                box-shadow: 0 5px 20px rgba(0,0,0,0.15);
            }
        }

        /* زر حذف الطلب على البطاقة */
        .order-card-delete-btn {
            background: none;
            border: 1.5px solid rgba(231,76,60,0.35);
            color: #e74c3c;
            border-radius: 8px;
            padding: 5px 9px;
            font-size: 14px;
            cursor: pointer;
            transition: background 0.18s, color 0.18s, border-color 0.18s;
            line-height: 1;
        }
        .order-card-delete-btn:hover {
            background: #e74c3c;
            color: #fff;
            border-color: #e74c3c;
        }
        [data-theme="dark"] .order-card-delete-btn {
            border-color: rgba(231,76,60,0.4);
            color: #ff6b6b;
        }
        [data-theme="dark"] .order-card-delete-btn:hover {
            background: #c0392b;
            color: #fff;
            border-color: #c0392b;
        }
        
        /* Completed orders: gray & collapsible */
        .order-card-completed {
            background: #f5f5f5;
            border-right-color: #9e9e9e;
        }
        .order-card-completed .order-info h3,
        .order-card-completed .order-info p,
        .order-card-completed .order-price,
        .order-card-completed .delivery-date {
            color: #757575;
        }
        .order-card-completed .order-price { color: #616161; }
        .order-card-completed.order-card-collapsed {
            padding: 8px 12px;
        }
        .order-card-completed.order-card-collapsed:hover {
            transform: none;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        }
        .order-card-completed.order-card-collapsed .order-card-collapsed-body {
            display: none;
        }
        .order-card-completed.order-card-collapsed .order-card-collapse-btn-wrap {
            display: none;
        }
        .order-card-completed.order-card-collapsed .order-card-full-header {
            display: none;
        }
        .order-card-completed:not(.order-card-collapsed) .order-card-collapsed-clickable {
            display: none;
        }
        .order-card-completed:not(.order-card-collapsed) .order-card-expand-hint {
            display: none;
        }
        .order-card-collapsed-header-only {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
        }
        .order-card-collapsed-header-only .order-info h3 {
            font-size: 15px;
            margin-bottom: 2px;
        }
        .order-card-collapsed-header-only .order-info p {
            font-size: 13px;
            margin-bottom: 0;
        }
        .order-card-collapsed-header-only .order-price {
            font-size: 16px;
        }
        .order-card-collapsed-clickable {
            cursor: pointer;
            padding: 4px 0;
            margin: -4px 0;
            border-radius: 8px;
            transition: background 0.2s;
        }
        .order-card-collapsed-clickable:hover {
            background: rgba(0,0,0,0.04);
        }
        .order-card-expand-hint {
            font-size: 11px;
            color: #9e9e9e;
            margin-top: 6px;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .order-card-expand-hint i {
            font-size: 14px;
        }
        .order-card-collapse-btn-wrap {
            margin-top: 10px;
        }
        .order-card-collapse-btn {
            background: transparent;
            border: 1px solid #bdbdbd;
            color: #616161;
            padding: 6px 14px;
            border-radius: 8px;
            font-size: 13px;
            cursor: pointer;
            font-family: 'Tajawal', sans-serif;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }
        .order-card-collapse-btn:hover {
            background: #eeeeee;
            color: #424242;
        }
        
        .order-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 15px;
        }
        
        .order-info h3 {
            font-size: 20px;
            color: var(--text-primary);
            margin-bottom: 5px;
        }
        
        .order-info p {
            color: var(--text-secondary);
            font-size: 14px;
            margin-bottom: 3px;
        }
        
        .order-price {
            text-align: left;
            font-size: 24px;
            font-weight: 700;
            color: var(--primary-color);
        }
        
        .delivery-date {
            background: var(--bg-color);
            padding: 8px 12px;
            border-radius: 8px;
            font-size: 13px;
            color: var(--primary-color);
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            margin-top: 8px;
        }
        
        .urgent-label {
            background: linear-gradient(135deg, #a84343 0%, #6D4D3D 100%);
            color: white;
            padding: 8px 15px;
            border-radius: 20px;
            font-size: 13px;
            font-weight: 700;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            margin-top: 8px;
            margin-right: 8px;
            animation: blink 1.5s infinite;
        }
        
        @keyframes blink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.7; }
        }
        
        /* Status Badge */
        .status-badge {
            padding: 6px 14px;
            border-radius: 20px;
            font-size: 13px;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            margin-top: 8px;
        }
        
        .status-new {
            background: var(--accent-beige);
            color: var(--primary-color);
        }
        
        .status-working {
            background: #fff3e0;
            color: #f57c00;
        }
        
        .status-delivery {
            background: #f3e5f5;
            color: #7b1fa2;
        }
        
        .status-completed {
            background: #e8f5e9;
            color: #388e3c;
        }
        
        .status-cancelled {
            background: #eceff1;
            color: #607d8b;
        }
        .status-pending {
            background: #fff8e1;
            color: #f9a825;
        }
        
        .detail-row-copy {
            cursor: pointer;
            padding: 4px 0;
            border-radius: 6px;
        }
        .detail-row-copy:hover { background: var(--bg-color); }
        .detail-row-copy:active { opacity: 0.8; }
        
        .btn-change-status {
            width: 100%;
            padding: 12px 16px;
            border: none;
            border-radius: 10px;
            font-family: 'Tajawal', sans-serif;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        
        .btn-change-status:active {
            transform: scale(0.98);
        }
        
        .btn-status-new {
            background: var(--accent-beige);
            color: var(--primary-color);
        }
        
        .btn-status-working {
            background: #fff3e0;
            color: #f57c00;
        }
        
        .btn-status-delivery {
            background: #f3e5f5;
            color: #7b1fa2;
        }
        
        .btn-status-completed {
            background: #e8f5e9;
            color: #388e3c;
        }
        
        .order-details {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
            gap: 15px;
            padding: 15px 0;
            border-top: 1px solid var(--border-color);
            border-bottom: 1px solid var(--border-color);
            margin-bottom: 15px;
        }
        
        .detail-item {
            text-align: center;
        }
        
        .detail-label {
            font-size: 12px;
            color: var(--text-secondary);
            margin-bottom: 5px;
        }
        
        .detail-value {
            font-size: 17px;
            font-weight: 600;
            color: var(--text-primary);
        }
        
        .detail-value.cost {
            color: var(--warning-color);
        }
        
        .detail-value.profit {
            color: var(--success-color);
        }
        
        .order-notes {
            color: var(--text-secondary);
            font-size: 14px;
            background: var(--bg-color);
            padding: 10px;
            border-radius: 8px;
            margin-bottom: 15px;
        }
        
        .order-actions {
            display: flex;
            gap: 10px;
        }
        
        .btn-action {
            flex: 1;
            padding: 10px;
            border: none;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            font-family: 'Tajawal', sans-serif;
            transition: all 0.2s;
        }
        
        .btn-edit {
            background: var(--accent-beige);
            color: var(--primary-color);
        }
        
        .btn-edit:hover {
            background: var(--border-color);
        }
        
        .btn-delete {
            background: #ffebee;
            color: #c62828;
        }
        
        .btn-delete:hover {
            background: #ffcdd2;
        }
        
        /* Modal */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
            padding: 20px;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }
        
        .modal-overlay.hidden {
            display: none;
        }
        
        .modal {
            background: var(--card-bg);
            border-radius: 20px;
            width: 100%;
            max-width: 500px;
            max-height: 85vh;
            overflow-y: auto;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
            -webkit-overflow-scrolling: touch;
            position: relative;
        }
        
        .modal-header {
            padding: 25px;
            border-bottom: 1px solid var(--border-color);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .modal-title {
            font-size: 24px;
            font-weight: 700;
            color: var(--text-primary);
        }
        
        .btn-close {
            background: none;
            border: none;
            font-size: 28px;
            cursor: pointer;
            color: var(--text-secondary);
            padding: 0;
            width: 32px;
            height: 32px;
        }
        
        .modal-body {
            padding: 25px;
        }
        
        .form-group {
            margin-bottom: 20px;
        }

        .checkout-location-warning {
            background: #fff8e1;
            border: 1.5px solid #f6c000;
            border-radius: 8px;
            color: #7a5800;
            font-size: 13px;
            font-weight: 600;
            padding: 10px 14px;
            margin-bottom: 12px;
            line-height: 1.6;
            text-align: right;
        }
        [data-theme="dark"] .checkout-location-warning {
            background: rgba(246,192,0,0.1);
            border-color: rgba(246,192,0,0.35);
            color: #ffd54f;
        }
        
        .form-label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: var(--text-primary);
            font-size: 15px;
        }
        
        .form-label .required {
            color: var(--danger-color);
            margin-right: 3px;
        }
        
        .form-input,
        .form-textarea {
            width: 100%;
            padding: 12px 15px;
            border: 2px solid var(--border-color);
            border-radius: 10px;
            font-family: 'Tajawal', sans-serif;
            font-size: 15px;
            transition: border-color 0.3s;
            background: var(--card-bg);
            color: var(--text-primary);
        }
        
        .form-input[type="date"],
        .form-input[type="datetime-local"] {
            appearance: none;
            -webkit-appearance: none;
            direction: ltr;
            text-align: right;
        }
        
        .form-input[type="date"]::-webkit-calendar-picker-indicator,
        .form-input[type="datetime-local"]::-webkit-calendar-picker-indicator {
            cursor: pointer;
        }
        
        .form-input:focus,
        .form-textarea:focus {
            outline: none;
            border-color: var(--primary-color);
        }
        
        .form-textarea {
            resize: vertical;
            min-height: 80px;
        }
        
        .cost-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
        }
        
        .btn-primary {
            width: 100%;
            padding: 15px;
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
            color: white;
            border: none;
            border-radius: 10px;
            font-size: 17px;
            font-weight: 600;
            cursor: pointer;
            font-family: 'Tajawal', sans-serif;
            transition: transform 0.2s;
        }
        
        .btn-primary:hover {
            transform: translateY(-2px);
        }
        
        /* Settings Modal */
        .settings-list { display: flex; flex-direction: column; gap: 15px; }
        .setting-item { display: flex; justify-content: space-between; align-items: center; padding: 15px; background: var(--bg-color); border-radius: 10px; }
        .setting-label { font-weight: 600; color: var(--text-primary); }

        /* ===== Settings Accordion ===== */
        .settings-modal { max-width: 520px; }
        .settings-modal-body { padding: 0 !important; }
        .settings-accordion { display: flex; flex-direction: column; }

        .settings-section { border-bottom: 1px solid var(--border-color); }
        .settings-section:last-child { border-bottom: none; }

        .settings-section-header {
            width: 100%;
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 15px 20px;
            background: none;
            border: none;
            cursor: pointer;
            text-align: right;
            font-family: 'Tajawal', sans-serif;
            transition: background 0.15s;
        }
        .settings-section-header:hover { background: var(--accent-beige); }
        [data-theme="dark"] .settings-section-header:hover { background: var(--surface-dim); }

        .settings-section-icon {
            width: 36px;
            height: 36px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            flex-shrink: 0;
        }

        /* أيقونات أقسام الإعدادات — ألوان تتكيف مع الوضعين */
        .settings-icon-orange { background: #FFF3E0; color: #E65100; }
        .settings-icon-blue   { background: #E3F2FD; color: #1565C0; }
        .settings-icon-green  { background: #E8F5E9; color: #2E7D32; }
        .settings-icon-purple { background: #F3E5F5; color: #6A1B9A; }
        .settings-icon-gray   { background: #ECEFF1; color: #37474F; }
        [data-theme="dark"] .settings-icon-orange { background: rgba(230,81,0,0.18);  color: #ffb74d; }
        [data-theme="dark"] .settings-icon-blue   { background: rgba(21,101,192,0.18); color: #90caf9; }
        [data-theme="dark"] .settings-icon-green  { background: rgba(46,125,50,0.18); color: #a5d6a7; }
        [data-theme="dark"] .settings-icon-purple { background: rgba(106,27,154,0.18); color: #ce93d8; }
        [data-theme="dark"] .settings-icon-gray   { background: rgba(55,71,79,0.25);  color: #b0bec5; }

        /* صندوق تنبيه أصفر — (نموذج الإلغاء / تفاصيل الطلب) */
        .info-box-warning {
            background: #fff8e1;
            border: 1px solid #ffe082;
            border-radius: 10px;
            padding: 12px 14px;
            margin-bottom: 18px;
            font-size: 13px;
            color: #7a5c00;
            line-height: 1.6;
        }
        .info-box-warning > i { color: #f9a825; margin-left: 4px; }
        [data-theme="dark"] .info-box-warning {
            background: rgba(255,224,130,0.08);
            border-color: rgba(255,224,130,0.25);
            color: var(--text-primary);
        }
        [data-theme="dark"] .info-box-warning > i { color: #ffb74d; }

        /* صندوق تحذير برتقالي — (نموذج الإرجاع) */
        .info-box-notice {
            background: #fff3e0;
            border: 1px solid #ff9800;
            border-radius: 10px;
            padding: 12px 14px;
            margin-bottom: 18px;
            font-size: 13px;
            color: #4e2c00;
            line-height: 1.7;
        }
        .info-box-notice > i { color: #e65100; margin-left: 4px; }
        [data-theme="dark"] .info-box-notice {
            background: rgba(255,152,0,0.08);
            border-color: rgba(255,152,0,0.3);
            color: var(--text-primary);
        }
        [data-theme="dark"] .info-box-notice > i { color: #ffb74d; }

        /* شارة 2FA */
        .badge-2fa-on  { background: #e8f5e9; color: #2e7d32; padding: 5px 14px; border-radius: 20px; font-size: 13px; font-weight: 700; }
        .badge-2fa-off { background: #f5f5f5; color: #888; padding: 5px 14px; border-radius: 20px; font-size: 13px; font-weight: 700; border: 1px solid #e0e0e0; }
        [data-theme="dark"] .badge-2fa-on  { background: rgba(46,125,50,0.2);  color: #a5d6a7; }
        [data-theme="dark"] .badge-2fa-off { background: rgba(255,255,255,0.06); color: var(--text-secondary); border-color: var(--border-color); }
        .settings-section-title {
            flex: 1;
            font-size: 15px;
            font-weight: 700;
            color: var(--text-primary);
        }
        .settings-section-chevron {
            font-size: 13px;
            color: var(--text-secondary);
            transition: transform 0.3s ease;
            flex-shrink: 0;
        }
        .settings-section.open .settings-section-chevron {
            transform: rotate(180deg);
        }

        .settings-section-body {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
            padding: 0 20px;
        }
        .settings-section.open .settings-section-body {
            padding: 4px 20px 20px;
        }

        .settings-field { margin-bottom: 6px; }
        .settings-field:last-child { margin-bottom: 0; }

        .settings-hint {
            font-size: 12px;
            color: var(--text-secondary);
            margin: 4px 0 6px;
            line-height: 1.5;
        }

        .btn-sm { padding: 8px 14px; font-size: 13px; }

        /* ===== أزرار تبويب محرر الصفحات ===== */
        .page-tab-btn {
            padding: 7px 13px;
            border: 1.5px solid var(--border-color);
            border-radius: 8px;
            background: var(--bg-color);
            color: var(--text-secondary);
            font-family: 'Tajawal', sans-serif;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
        }
        .page-tab-btn:hover { border-color: var(--primary-color); color: var(--primary-color); }
        .page-tab-btn.active {
            background: var(--primary-color);
            color: #fff;
            border-color: var(--primary-color);
        }
        /* Quill overrides */
        .ql-toolbar.ql-snow { border-radius: 10px 10px 0 0; border-color: var(--border-color) !important; background: var(--bg-color); direction: ltr; }
        .ql-container.ql-snow { border-radius: 0 0 10px 10px; border-color: var(--border-color) !important; background: var(--card-bg); }
        .ql-editor { font-family: 'Tajawal', sans-serif !important; font-size: 15px; line-height: 1.8; min-height: 280px; direction: rtl; text-align: right; color: var(--text-primary); }
        .ql-editor p, .ql-editor li { color: var(--text-primary); }
        [data-theme="dark"] .ql-toolbar.ql-snow { background: #3D2A22; }
        [data-theme="dark"] .ql-toolbar button, [data-theme="dark"] .ql-toolbar .ql-picker { color: var(--text-primary) !important; filter: invert(0.8); }
        [data-theme="dark"] .ql-container.ql-snow { background: #2D1F18; }
        
        .toggle-switch {
            position: relative;
            width: 50px;
            height: 26px;
            background: #ccc;
            border-radius: 26px;
            cursor: pointer;
            transition: background 0.3s;
        }
        
        .toggle-switch.active {
            background: var(--primary-color);
        }
        
        .toggle-switch::after {
            content: '';
            position: absolute;
            top: 3px;
            right: 3px;
            width: 20px;
            height: 20px;
            background: white;
            border-radius: 50%;
            transition: transform 0.3s;
        }
        
        .toggle-switch.active::after {
            transform: translateX(-24px);
        }
        
        .logo-upload {
            text-align: center;
            margin: 20px 0;
        }
        
        .preview-logo {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            object-fit: cover;
            border: 3px solid var(--primary-color);
            margin-bottom: 15px;
            background: var(--card-bg);
        }
        
        .file-input {
            display: none;
        }
        
        .btn-upload {
            padding: 10px 20px;
            background: var(--primary-color);
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-family: 'Tajawal', sans-serif;
            font-weight: 600;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            transition: all 0.3s;
        }
        
        .btn-upload:hover {
            background: var(--primary-dark);
            transform: translateY(-2px);
        }
        .btn-upload-secondary {
            background: var(--bg-color);
            color: var(--primary-color);
            border: 2px solid var(--border-color);
        }
        .btn-upload-secondary:hover {
            background: var(--border-color);
        }
        .product-thumb-wrap {
            position: relative;
            width: 80px;
            height: 80px;
        }
        .product-thumb-wrap img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 8px;
            border: 2px solid var(--border-color);
        }
        .product-thumb-wrap .product-thumb-remove {
            position: absolute;
            top: 4px;
            left: 4px;
            width: 24px;
            height: 24px;
            border: none;
            border-radius: 50%;
            background: rgba(0,0,0,0.6);
            color: #fff;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            padding: 0;
        }
        /* Image Preview */
        .image-preview-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
            gap: 10px;
            margin-top: 10px;
        }
        
        .image-preview-item {
            position: relative;
            width: 100%;
            padding-bottom: 100%;
            border-radius: 10px;
            overflow: hidden;
            border: 2px solid var(--border-color);
        }
        
        .image-preview-item img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .image-preview-remove {
            position: absolute;
            top: 5px;
            right: 5px;
            background: var(--danger-color);
            color: white;
            border: none;
            border-radius: 50%;
            width: 25px;
            height: 25px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            z-index: 10;
            box-shadow: 0 2px 5px rgba(0,0,0,0.3);
        }
        
        .image-preview-remove:hover {
            background: #d32f2f;
        }
        
        /* Order Images Gallery */
        .order-images {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
            gap: 8px;
            margin-bottom: 15px;
            position: relative;
        }
        
        .order-images-header {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 10px;
            color: var(--text-secondary);
            font-size: 13px;
            font-weight: 600;
        }
        
        .order-image-item {
            position: relative;
            width: 100%;
            padding-bottom: 100%;
            border-radius: 8px;
            overflow: hidden;
            border: 2px solid var(--border-color);
            cursor: pointer;
            transition: transform 0.2s;
            background: var(--bg-color);
        }
        
        .order-image-item:hover {
            transform: scale(1.05);
            border-color: var(--primary-color);
        }
        
        .order-image-item img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .image-counter {
            position: absolute;
            bottom: 5px;
            left: 5px;
            background: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 3px 8px;
            border-radius: 12px;
            font-size: 11px;
            font-weight: 600;
        }
        
        /* Image Modal */
        .image-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.95);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: 9999;
            padding: 0;
            animation: fadeIn 0.3s ease;
            touch-action: manipulation;
            -webkit-overflow-scrolling: touch;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        .image-modal-content {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 60px 20px 80px;
            max-width: 100%;
            overflow: auto;
        }
        
        .image-modal-img-wrap {
            display: inline-block;
            line-height: 0;
            border-radius: 8px;
            overflow: hidden;
            position: relative;
            cursor: zoom-in;
            user-select: none;
        }
        .image-modal-img-wrap img {
            pointer-events: none;
            transform-origin: center center;
        }
        .image-modal-content img {
            max-width: 100%;
            max-height: 100%;
            width: auto;
            height: auto;
            border-radius: 10px;
            box-shadow: 0 10px 50px rgba(0,0,0,0.5);
            pointer-events: none;
            user-select: none;
        }
        
        .image-modal-close {
            position: fixed;
            top: 15px;
            right: 15px;
            background: rgba(255, 255, 255, 0.95);
            color: #333;
            border: none;
            border-radius: 50%;
            width: 48px;
            height: 48px;
            min-width: 48px;
            min-height: 48px;
            cursor: pointer;
            font-size: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
            box-shadow: 0 4px 15px rgba(0,0,0,0.4);
            z-index: 10001;
            -webkit-tap-highlight-color: transparent;
            touch-action: manipulation;
        }
        
        .image-modal-close:hover,
        .image-modal-close:active {
            background: var(--danger-color);
            color: white;
            transform: scale(1.05);
        }
        [data-theme="dark"] .image-modal-close {
            background: rgba(45, 31, 24, 0.92);
            color: #EDE8E0;
        }

        /* أيقونات وسائل الدفع — نمط بطاقة ناعمة */
        .pay-badge {
            background: var(--card-bg);
            border: 1.5px solid var(--border-color);
            border-radius: 10px;
            height: 36px;
            min-width: 56px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 4px;
            padding: 0 10px;
            flex-shrink: 0;
            box-shadow: 0 1px 4px rgba(0,0,0,0.07);
            transition: box-shadow 0.2s, transform 0.15s;
        }
        .pay-badge:hover { box-shadow: 0 3px 10px rgba(0,0,0,0.12); transform: translateY(-1px); }
        .footer-pay-badges {
            display: flex;
            gap: 7px;
            align-items: center;
            margin-top: 8px;
            flex-wrap: wrap;
        }
        .checkout-payment-badges {
            display: flex;
            gap: 7px;
            align-items: center;
            justify-content: center;
            margin-top: 10px;
            flex-wrap: wrap;
            padding: 10px 0 2px;
            border-top: 1px solid var(--border-color);
        }

        /* Google Pay badge */
        .pay-badge-gpay {
            background: #fff;
            border-radius: 5px;
            height: 26px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
            padding: 0 8px;
            flex-shrink: 0;
            border: 1.5px solid #dadce0;
        }
        [data-theme="dark"] .pay-badge-gpay {
            background: #3D2A22;
            border-color: var(--border-color);
        }
        .pay-badge-gpay .gpay-text {
            color: #3c4043;
            font-size: 11px;
            font-weight: 600;
            font-family: Arial, sans-serif;
        }
        [data-theme="dark"] .pay-badge-gpay .gpay-text {
            color: var(--text-secondary);
        }
        
        .image-modal-close-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 16px 20px;
            padding-bottom: max(16px, env(safe-area-inset-bottom));
            background: rgba(0, 0, 0, 0.85);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10001;
        }
        
        .image-modal-close-btn {
            width: 100%;
            max-width: 280px;
            padding: 16px 24px;
            background: var(--primary-color);
            color: white;
            border: none;
            border-radius: 12px;
            font-size: 18px;
            font-weight: 700;
            font-family: 'Tajawal', sans-serif;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            -webkit-tap-highlight-color: transparent;
            touch-action: manipulation;
            transition: transform 0.2s, background 0.2s;
        }
        
        .image-modal-close-btn:hover,
        .image-modal-close-btn:active {
            background: var(--primary-dark);
            transform: scale(1.02);
        }
        
        /* Shabasa Badge */
        .shabasa-badge {
            background: linear-gradient(135deg, #673ab7 0%, #9c27b0 100%);
            color: white;
            padding: 8px 15px;
            border-radius: 20px;
            font-size: 13px;
            font-weight: 700;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            margin-top: 8px;
            margin-right: 8px;
        }
        
        /* Empty State */
        .empty-state {
            background: var(--card-bg);
            padding: 60px 20px;
            border-radius: 15px;
            text-align: center;
            box-shadow: 0 3px 10px rgba(0,0,0,0.1);
        }
        .products-loading-spinner {
            width: 40px;
            height: 40px;
            border: 3px solid var(--border-color);
            border-top-color: var(--primary-color);
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
            margin: 0 auto 20px;
        }

        /* ===== Skeleton Loading ===== */
        @keyframes skeleton-shimmer {
            0%   { background-position: 200% center; }
            100% { background-position: -200% center; }
        }
        .skeleton-card {
            background: var(--card-bg);
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(92,58,47,0.06);
        }
        .skeleton-img {
            width: 100%;
            aspect-ratio: 1;
            background: linear-gradient(90deg, var(--border-color) 25%, var(--bg-color) 50%, var(--border-color) 75%);
            background-size: 200% 100%;
            animation: skeleton-shimmer 1.4s ease-in-out infinite;
        }
        .skeleton-body {
            padding: 12px;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .skeleton-line {
            border-radius: 6px;
            background: linear-gradient(90deg, var(--border-color) 25%, var(--bg-color) 50%, var(--border-color) 75%);
            background-size: 200% 100%;
            animation: skeleton-shimmer 1.4s ease-in-out infinite;
        }
        .skeleton-line.title  { height: 14px; width: 70%; }
        .skeleton-line.price  { height: 14px; width: 40%; }
        .skeleton-line.btn    { height: 36px; width: 100%; border-radius: 10px; margin-top: 4px; }
        
        .empty-icon {
            font-size: 80px;
            opacity: 0.3;
            margin-bottom: 20px;
        }
        
        .empty-text {
            font-size: 18px;
            color: var(--text-secondary);
        }
        
        /* ========== متجر جوف: منتجات + سلة ========== */
        .store-nav {
            display: flex;
            gap: 8px;
            margin-bottom: 20px;
            flex-wrap: wrap;
            overflow-x: auto;
            scrollbar-width: none;
            -webkit-overflow-scrolling: touch;
        }
        .store-nav::-webkit-scrollbar { display: none; }
        .store-nav-btn {
            padding: 10px 16px;
            border: 2px solid var(--border-color);
            border-radius: 10px;
            background: var(--card-bg);
            color: var(--text-primary);
            font-family: 'Tajawal', sans-serif;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 6px;
            transition: all 0.2s;
            white-space: nowrap;
            flex-shrink: 0;
        }
        .store-nav-btn.active {
            background: var(--primary-color);
            color: white;
            border-color: var(--primary-color);
        }
        .store-nav-btn:hover:not(.active) {
            border-color: var(--primary-color);
            color: var(--primary-color);
        }
        .products-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
            gap: 18px;
        }
        .product-card {
            background: var(--card-bg);
            border-radius: 14px;
            overflow: hidden;
            box-shadow: 0 4px 14px rgba(0,0,0,0.08);
            transition: transform 0.2s, box-shadow 0.2s;
            border: 2px solid var(--border-color);
            display: flex;
            flex-direction: column;
        }
        @media (hover: hover) {
            .product-card:hover {
                transform: translateY(-4px);
                box-shadow: 0 8px 24px rgba(108, 77, 61, 0.18);
            }
        }
        .product-card-image {
            width: 100%;
            aspect-ratio: 1;
            object-fit: cover;
            background: var(--bg-color);
        }

        /* ===== العلامة المائية على صور المنتجات ===== */
        .product-card-image-wrap::before,
        .img-watermark-wrap::after {
            content: '';
            position: absolute;
            inset: 0;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='90'%3E%3Ctext x='100' y='52' text-anchor='middle' font-family='Georgia%2CArial%2Csans-serif' font-size='14' font-weight='700' fill='%23000000' opacity='0.13' transform='rotate(-30 100 45)'%3EJawf.ae%3C%2Ftext%3E%3C%2Fsvg%3E");
            background-repeat: repeat;
            pointer-events: none;
            z-index: 3;
        }
        .img-watermark-wrap {
            position: relative;
            overflow: hidden;
            display: block;
        }
        .product-card-body {
            padding: 14px;
            text-align: center;
            display: flex;
            flex-direction: column;
            flex-grow: 1;
        }
        .product-card-name {
            font-size: 16px;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 6px;
            line-height: 1.3;
        }
        .price-original {
            text-decoration: line-through;
            color: var(--text-secondary);
            font-size: 0.9em;
            margin-left: 6px;
        }
        .product-card-price-wrap { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; justify-content: center; }
        .product-card-discount-badge {
            background: var(--danger-color);
            color: #fff;
            font-size: 12px;
            font-weight: 800;
            font-family: 'Tajawal', sans-serif;
            padding: 4px 9px;
            border-radius: 6px;
            letter-spacing: 0;
            direction: ltr;
            display: inline-block;
        }
        .product-quick-view .price-original { font-size: 16px; }
        .product-quick-view .product-card-discount-badge { font-size: 13px; padding: 5px 12px; }
        .product-card-price {
            font-size: 18px;
            font-weight: 700;
            color: var(--primary-color);
            margin-bottom: 10px;
        }
        .product-card-add {
            width: 100%;
            padding: 10px;
            margin-top: auto;
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
            color: white;
            border: none;
            border-radius: 10px;
            font-family: 'Tajawal', sans-serif;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            transition: transform 0.2s;
        }
        .product-card-add:hover {
            transform: scale(1.02);
        }

        /* ===== أزرار الكمية على البطاقة ===== */
        .card-qty-control {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: var(--bg-color);
            border: 2px solid var(--primary-color);
            border-radius: 10px;
            overflow: hidden;
            width: 100%;
        }
        .card-qty-btn {
            background: none;
            border: none;
            cursor: pointer;
            color: var(--primary-color);
            font-size: 18px;
            width: 42px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.18s;
            font-family: 'Tajawal', sans-serif;
            flex-shrink: 0;
        }
        .card-qty-btn:hover { background: var(--primary-color); color: #fff; }
        .card-qty-btn:active { background: var(--primary-dark); color: #fff; transform: scale(0.93); }
        .card-qty-num {
            font-size: 16px;
            font-weight: 700;
            font-family: 'Tajawal', sans-serif;
            color: var(--primary-color);
            min-width: 28px;
            text-align: center;
        }
        /* ===== زر المفضلة (Wishlist) ===== */
        .card-wishlist-btn {
            position: absolute;
            top: 8px;
            left: 8px;
            width: 34px;
            height: 34px;
            border-radius: 50%;
            background: rgba(255,255,255,0.92);
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            color: #ccc;
            box-shadow: 0 2px 8px rgba(0,0,0,0.12);
            transition: color 0.2s, transform 0.2s;
            z-index: 3;
        }
        [data-theme="dark"] .card-wishlist-btn {
            background: rgba(40,30,25,0.88);
        }
        .card-wishlist-btn:hover { transform: scale(1.15); }
        .card-wishlist-btn.active { color: #e74c3c; }
        .card-wishlist-btn.active i::before { content: "\f415"; } /* bi-heart-fill */

        /* ===== منتجات مشابهة ===== */
        .related-section { margin-top: 20px; border-top: 1px solid var(--border-color); padding-top: 16px; }
        .related-title { font-size: 14px; font-weight: 700; color: var(--text-secondary); margin-bottom: 12px; display: flex; align-items: center; gap: 6px; }
        .related-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
        .related-card {
            cursor: pointer;
            border-radius: 12px;
            overflow: hidden;
            background: var(--bg-color);
            border: 1px solid var(--border-color);
            transition: transform 0.2s, box-shadow 0.2s;
        }
        @media (hover: hover) { .related-card:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(92,58,47,0.12); } }
        .related-card-img { position: relative; aspect-ratio: 1; overflow: hidden; }
        .related-card-img img { width: 100%; height: 100%; object-fit: cover; }
        .related-out-badge { position: absolute; inset: 0; background: rgba(0,0,0,0.35); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 20px; }
        .related-card-name { font-size: 12px; font-weight: 600; padding: 6px 8px 2px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .related-card-price { font-size: 12px; font-weight: 700; color: var(--primary-color); padding: 0 8px 8px; }
        .related-card-price span { font-size: 10px; font-weight: 400; }

        /* زر مشاركة في Quick View */
        .qv-share-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 7px 14px;
            border-radius: 20px;
            border: 1.5px solid var(--border-color);
            background: transparent;
            color: var(--text-secondary);
            font-size: 13px;
            cursor: pointer;
            transition: all 0.2s;
        }
        .qv-share-btn:hover { border-color: var(--primary-color); color: var(--primary-color); }

        /* زر المفضلة في Quick View */
        .qv-wishlist-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 7px 14px;
            border-radius: 20px;
            border: 1.5px solid var(--border-color);
            background: transparent;
            color: var(--text-secondary);
            font-size: 13px;
            cursor: pointer;
            transition: all 0.2s;
        }
        .qv-wishlist-btn:hover { border-color: #e74c3c; color: #e74c3c; }
        .qv-wishlist-btn.active { border-color: #e74c3c; color: #e74c3c; background: rgba(231,76,60,0.07); }

        /* شريط actions في Quick View */
        .qv-action-bar {
            display: flex;
            gap: 8px;
            margin: 10px 0 2px;
            flex-wrap: wrap;
            justify-content: center;
        }

        /* زر أبلغني عند التوفر */
        .btn-notify-stock {
            width: 100%;
            padding: 11px;
            border-radius: 12px;
            border: 2px dashed var(--primary-color);
            background: transparent;
            color: var(--primary-color);
            font-size: 14px;
            font-weight: 700;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            transition: all 0.2s;
            margin-top: 10px;
        }
        .btn-notify-stock:hover { background: var(--primary-color); color: #fff; }
        .btn-notify-stock.active { background: var(--primary-color); color: #fff; border-style: solid; }
        .card-notify-btn {
            width: 100%;
            padding: 9px;
            border-radius: 10px;
            border: 1.5px dashed var(--primary-color);
            background: transparent;
            color: var(--primary-color);
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            margin-top: 6px;
            transition: all 0.2s;
        }
        .card-notify-btn:hover { background: var(--primary-color); color: #fff; }
        .card-notify-btn.active { background: var(--primary-color); color: #fff; border-style: solid; }

        /* ===== كاونتر عد تنازلي ===== */
        .offer-countdown-banner {
            background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
            color: #fff;
            text-align: center;
            padding: 10px 16px;
            font-size: 14px;
            font-weight: 700;
            letter-spacing: 0.3px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            border-radius: 12px;
            margin-bottom: 16px;
        }
        .offer-countdown-banner .countdown-blocks {
            display: flex;
            gap: 6px;
            align-items: center;
        }
        .countdown-block {
            display: flex;
            flex-direction: column;
            align-items: center;
            background: rgba(255,255,255,0.18);
            border-radius: 8px;
            padding: 4px 8px;
            min-width: 38px;
        }
        .countdown-block .cnt-num {
            font-size: 18px;
            font-weight: 900;
            line-height: 1;
        }
        .countdown-block .cnt-label {
            font-size: 9px;
            opacity: 0.85;
            margin-top: 1px;
        }
        .countdown-sep { font-size: 18px; font-weight: 900; opacity: 0.7; margin-bottom: 10px; }

        /* ===== Push Notification Subscribe Button ===== */
        .btn-push-subscribe {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 9px 18px;
            border-radius: 20px;
            border: 1.5px solid var(--primary-color);
            background: transparent;
            color: var(--primary-color);
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
        }
        .btn-push-subscribe:hover { background: var(--primary-color); color: #fff; }
        .btn-push-subscribe.active { background: var(--primary-color); color: #fff; }

        /* ===== زر السلة العائم ===== */
        @keyframes cart-pop {
            0%   { transform: scale(1); }
            40%  { transform: scale(1.28); }
            70%  { transform: scale(0.92); }
            100% { transform: scale(1); }
        }
        @keyframes float-in {
            from { opacity: 0; transform: scale(0.6) translateY(20px); }
            to   { opacity: 1; transform: scale(1) translateY(0); }
        }
        .floating-cart-btn {
            position: fixed;
            bottom: 28px;
            left: 28px;
            z-index: 1100;
            width: 58px;
            height: 58px;
            border-radius: 50%;
            background: var(--primary-color);
            color: #fff;
            border: none;
            font-size: 22px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 6px 24px rgba(109,77,61,0.35);
            transition: background 0.2s, box-shadow 0.2s, opacity 0.2s, transform 0.2s;
            animation: float-in 0.4s cubic-bezier(.34,1.56,.64,1) both;
        }
        .floating-cart-btn:hover {
            background: var(--primary-dark, #5a3d30);
            box-shadow: 0 8px 32px rgba(109,77,61,0.45);
            transform: translateY(-2px);
        }
        .floating-cart-btn:active { transform: scale(0.94); }
        .floating-cart-btn.cart-pop { animation: cart-pop 0.35s ease; }
        .floating-cart-btn.cart-drawer-open {
            opacity: 0;
            pointer-events: none;
            transform: scale(0.7);
        }
        .floating-ig-btn.cart-drawer-open {
            opacity: 0;
            pointer-events: none;
            transform: scale(0.7) translateY(10px);
        }
        body.modal-active .floating-ig-btn,
        body.modal-active .floating-cart-btn {
            opacity: 0 !important;
            pointer-events: none;
        }
        .floating-cart-badge {
            position: absolute;
            top: -4px;
            right: -4px;
            background: #e74c3c;
            color: #fff;
            font-size: 11px;
            font-weight: 800;
            min-width: 20px;
            height: 20px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 5px;
            border: 2px solid #fff;
            line-height: 1;
            pointer-events: none;
        }
        .floating-cart-badge.hidden { display: none; }
        [data-theme="dark"] .floating-cart-btn {
            box-shadow: 0 6px 24px rgba(0,0,0,0.45);
        }
        [data-theme="dark"] .floating-cart-badge {
            border-color: var(--card-bg);
        }
        /* على الشاشات الكبيرة يصغر قليلاً */
        @media (min-width: 768px) {
            .floating-cart-btn { width: 52px; height: 52px; font-size: 20px; bottom: 32px; left: 32px; }
        }

        /* ===== زر Instagram العائم ===== */
        @keyframes ig-pulse {
            0%,100% { box-shadow: 0 6px 24px rgba(214,36,159,0.45); }
            50%      { box-shadow: 0 6px 32px rgba(214,36,159,0.75), 0 0 0 8px rgba(214,36,159,0.12); }
        }
        .floating-ig-btn {
            position: fixed;
            bottom: 28px;
            right: 28px;
            z-index: 1100;
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 0 18px 0 14px;
            height: 52px;
            border-radius: 26px;
            background: linear-gradient(135deg, #833ab4 0%, #fd1d1d 50%, #fcb045 100%);
            color: #fff;
            font-size: 22px;
            text-decoration: none;
            box-shadow: 0 6px 24px rgba(214,36,159,0.45);
            animation: float-in 0.5s cubic-bezier(.34,1.56,.64,1) 0.3s both, ig-pulse 2.8s ease-in-out 1.5s infinite;
            transition: transform 0.2s, box-shadow 0.2s;
            white-space: nowrap;
            font-family: 'Tajawal', sans-serif;
        }
        .floating-ig-btn:hover {
            transform: translateY(-3px) scale(1.04);
            box-shadow: 0 10px 36px rgba(214,36,159,0.6);
            animation: none;
        }
        .floating-ig-btn:active { transform: scale(0.95); }
        .floating-ig-btn .bi-instagram { font-size: 22px; flex-shrink: 0; }
        .floating-ig-label {
            font-size: 13px;
            font-weight: 700;
            letter-spacing: 0.2px;
        }
        /* على الشاشات الصغيرة جداً — نخفي النص ونبقي الأيقونة فقط */
        @media (max-width: 380px) {
            .floating-ig-btn { padding: 0; width: 52px; justify-content: center; border-radius: 50%; }
            .floating-ig-label { display: none; }
        }
        @media (min-width: 768px) {
            .floating-ig-btn { bottom: 32px; right: 32px; height: 52px; font-size: 22px; }
        }

        /* ===== صفحة الملف الشخصي ===== */
        .profile-page { display: flex; flex-direction: column; gap: 14px; max-width: 500px; margin: 0 auto; padding-bottom: 30px; }
        .profile-card {
            background: var(--card-bg);
            border-radius: 18px;
            padding: 20px;
            display: flex;
            gap: 16px;
            align-items: center;
            box-shadow: 0 2px 12px rgba(92,58,47,0.08);
        }
        .profile-avatar-wrap {
            flex-shrink: 0;
            position: relative;
            display: inline-block;
        }
        .profile-avatar-wrap:hover .profile-avatar-edit { opacity: 1; }
        .profile-avatar {
            width: 72px; height: 72px;
            border-radius: 50%;
            object-fit: cover;
            border: 3px solid var(--primary-color);
            display: block;
            transition: filter 0.2s;
        }
        .profile-avatar-wrap:hover .profile-avatar { filter: brightness(0.7); }
        .profile-avatar-edit {
            position: absolute;
            inset: 0;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(0,0,0,0.38);
            color: #fff;
            font-size: 20px;
            opacity: 0;
            transition: opacity 0.2s;
            pointer-events: none;
        }
        .profile-info { flex: 1; min-width: 0; }
        .profile-name { font-size: 18px; font-weight: 800; color: var(--text-primary); margin-bottom: 3px; }
        .profile-email { font-size: 13px; color: var(--text-secondary); margin-bottom: 6px; word-break: break-all; }
        .profile-provider-badge { display: flex; gap: 6px; flex-wrap: wrap; }
        .provider-badge {
            display: inline-flex; align-items: center; gap: 4px;
            padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 600;
        }
        .provider-badge.google { background: rgba(66,133,244,0.12); color: #4285F4; }
        .provider-badge.email  { background: rgba(109,77,61,0.12); color: var(--primary-color); }
        .profile-stats {
            display: grid; grid-template-columns: repeat(4,1fr); gap: 10px;
        }
        @media (max-width: 360px) {
            .profile-stats { grid-template-columns: repeat(2,1fr); }
        }
        .profile-stat-box {
            background: var(--card-bg); border-radius: 14px; padding: 14px 8px;
            text-align: center; box-shadow: 0 2px 8px rgba(92,58,47,0.06);
            cursor: pointer; transition: transform 0.15s, box-shadow 0.15s;
        }
        .profile-stat-box:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(92,58,47,0.13); }
        .profile-stat-box:active { transform: scale(0.96); }
        .profile-stat-icon { font-size: 16px; margin-bottom: 4px; line-height: 1; }
        .profile-stat-num { font-size: 20px; font-weight: 900; color: var(--primary-color); }
        .profile-stat-lbl { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }
        .profile-section-card {
            background: var(--card-bg); border-radius: 14px;
            padding: 16px; box-shadow: 0 2px 8px rgba(92,58,47,0.06);
        }
        .profile-danger-card { border: 1.5px solid rgba(220,53,69,0.25); }
        .profile-loyalty-card { border: 1.5px solid var(--primary-color); background: linear-gradient(135deg, var(--card-bg) 80%, rgba(109,77,61,0.06)); }
        .profile-section-title { font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
        .btn-outline {
            padding: 8px 18px; border-radius: 10px;
            border: 1.5px solid var(--primary-color);
            background: transparent; color: var(--primary-color);
            font-size: 13px; font-weight: 600; cursor: pointer;
            display: inline-flex; align-items: center; gap: 6px;
            transition: all 0.2s;
        }
        .btn-outline:hover { background: var(--primary-color); color: #fff; }
        .btn-outline.active { background: var(--primary-color); color: #fff; }
        .btn-danger {
            padding: 8px 18px; border-radius: 10px;
            border: 1.5px solid var(--danger-color);
            background: transparent; color: var(--danger-color);
            font-size: 13px; font-weight: 600; cursor: pointer;
            display: inline-flex; align-items: center; gap: 6px;
            transition: all 0.2s;
        }
        .btn-danger:hover { background: var(--danger-color); color: #fff; }

        /* ===== Wishlist Page ===== */
        .wishlist-empty {
            text-align: center;
            padding: 60px 20px;
            color: var(--text-secondary);
        }
        .wishlist-empty i { font-size: 60px; opacity: 0.25; display: block; margin-bottom: 12px; }

        /* شارة "كتابة/حفر بالليزر متاح" على بطاقة المنتج */
        .product-card-engravable {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: 11px;
            font-weight: 600;
            color: var(--text-secondary);
            margin-bottom: 7px;
            opacity: 0.8;
        }
        .product-card-engravable i {
            font-size: 12px;
            color: var(--primary-color);
            opacity: 1;
        }

        /* أيقونة مودال كتابة/حفر بالليزر */
        .engraving-modal-icon {
            width: 56px;
            height: 56px;
            border-radius: 50%;
            background: rgba(109,77,61,0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto;
            font-size: 24px;
            color: var(--primary-color);
        }
        [data-theme="dark"] .engraving-modal-icon {
            background: rgba(211,178,148,0.18);
            color: #D3B294;
        }

        /* pill التكلفة */
        .engraving-cost-pill {
            display: inline-block;
            background: rgba(109,77,61,0.1);
            color: var(--primary-color);
            font-size: 13px;
            font-weight: 700;
            padding: 4px 14px;
            border-radius: 20px;
            margin: 0;
        }
        [data-theme="dark"] .engraving-cost-pill {
            background: rgba(211,178,148,0.18);
            color: #D3B294;
        }

        /* زر "بدون كتابة/حفر بالليزر" */
        .btn-engrave-skip {
            width: 100%;
            margin-top: 8px;
            padding: 11px;
            border-radius: 10px;
            border: 1.5px solid var(--border-color);
            background: transparent;
            color: var(--text-secondary);
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            font-family: inherit;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
        }
        .btn-engrave-skip:hover {
            border-color: var(--primary-color);
            color: var(--primary-color);
            background: var(--primary-light, rgba(109,77,61,0.06));
        }
        [data-theme="dark"] .btn-engrave-skip {
            border-color: rgba(255,255,255,0.15);
        }
        [data-theme="dark"] .btn-engrave-skip:hover {
            border-color: var(--primary-color);
            background: rgba(211,178,148,0.1);
        }
        .product-card-out-of-stock {
            width: 100%;
            padding: 10px;
            margin-top: auto;
            background: var(--surface-dim, #eee);
            color: var(--text-secondary);
            border-radius: 10px;
            font-weight: 600;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            font-size: 14px;
        }
        .product-card-no-stock .product-card-out-of-stock { background: rgba(168, 67, 67, 0.15); color: var(--danger-color); }
        /* شارة الأكثر مبيعاً */
        .best-seller-badge {
            position: absolute;
            top: 10px;
            right: 10px;
            z-index: 3;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            background: rgba(180, 130, 40, 0.92);
            color: #fff;
            font-size: 0.7rem;
            font-weight: 700;
            padding: 4px 10px;
            border-radius: 20px;
            backdrop-filter: blur(4px);
            box-shadow: 0 2px 6px rgba(0,0,0,0.15);
            pointer-events: none;
        }
        .best-seller-badge .bi { font-size: 0.65rem; }
        [data-theme="dark"] .best-seller-badge {
            background: rgba(200, 155, 50, 0.9);
        }
        .low-stock-badge {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            background: rgba(239, 68, 68, 0.1);
            color: #dc2626;
            font-size: 0.72rem;
            font-weight: 700;
            padding: 3px 10px;
            border-radius: 20px;
            margin: 4px 0 5px;
            border: 1px solid rgba(239, 68, 68, 0.25);
            animation: lowStockPulse 2.5s ease-in-out infinite;
        }
        .low-stock-badge .bi { font-size: 0.8rem; }
        @keyframes lowStockPulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.6; }
        }
        [data-theme="dark"] .low-stock-badge {
            background: rgba(239, 68, 68, 0.15);
            color: #f87171;
            border-color: rgba(239, 68, 68, 0.3);
        }
        .quick-view-desc + .low-stock-badge,
        .low-stock-badge + .add-cart-qty-wrap { margin-top: 10px; }
        .add-cart-qty-wrap { text-align: center; }
        .add-cart-qty-wrap .qty-selector { margin: 0 auto; }
        /* مودال اختيار الكمية */
        .add-cart-qty-product {
            font-size: 18px;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 4px;
        }
        .add-cart-qty-price {
            font-size: 16px;
            color: var(--primary-color);
            font-weight: 600;
            margin-bottom: 16px;
        }
        .add-cart-qty-wrap .form-label {
            margin-bottom: 8px;
        }
        .qty-selector {
            display: flex;
            align-items: center;
            gap: 0;
            border: 2px solid var(--border-color);
            border-radius: 10px;
            overflow: hidden;
            width: fit-content;
        }
        .qty-btn {
            width: 44px;
            height: 44px;
            border: none;
            background: var(--bg-color);
            color: var(--primary-color);
            font-size: 20px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.2s;
        }
        .qty-btn:hover {
            background: var(--border-color);
        }
        .qty-input {
            width: 56px;
            height: 44px;
            border: none;
            border-left: 1px solid var(--border-color);
            border-right: 1px solid var(--border-color);
            text-align: center;
            font-size: 16px;
            font-weight: 600;
            font-family: 'Tajawal', sans-serif;
            background: var(--card-bg);
            color: var(--text-primary);
        }
        .qty-input::-webkit-inner-spin-button,
        .qty-input::-webkit-outer-spin-button { opacity: 0; }
        .cart-btn-wrap {
            position: relative;
        }
        .cart-badge {
            position: absolute;
            top: -4px;
            left: -4px;
            background: var(--danger-color);
            color: white;
            font-size: 11px;
            font-weight: 700;
            min-width: 18px;
            height: 18px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .cart-drawer-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.4);
            z-index: 1150;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s, visibility 0.3s;
        }
        .cart-drawer-overlay.open {
            opacity: 1;
            visibility: visible;
        }
        .cart-drawer {
            position: fixed;
            top: 0;
            right: 0;
            width: 100%;
            max-width: 380px;
            height: 100%;
            background: var(--card-bg);
            box-shadow: -5px 0 30px rgba(0,0,0,0.2);
            z-index: 1160;
            transform: translateX(100%);
            transition: transform 0.3s ease;
            display: flex;
            flex-direction: column;
        }
        .cart-drawer.open {
            transform: translateX(0);
        }
        .cart-drawer-header {
            padding: 20px;
            border-bottom: 1px solid var(--border-color);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .cart-drawer-title {
            font-size: 20px;
            font-weight: 700;
            color: var(--text-primary);
        }
        .cart-drawer-body {
            flex: 1;
            overflow-y: auto;
            padding: 16px;
        }
        .cart-item {
            display: flex;
            gap: 12px;
            padding: 12px;
            background: var(--bg-color);
            border-radius: 12px;
            margin-bottom: 10px;
            align-items: center;
        }
        .cart-item-image {
            width: 56px;
            height: 56px;
            border-radius: 10px;
            object-fit: cover;
            background: var(--card-bg);
        }
        .cart-item-info {
            flex: 1;
            min-width: 0;
        }
        .cart-item-name {
            font-weight: 600;
            color: var(--text-primary);
            font-size: 14px;
        }
        .cart-item-price {
            font-size: 13px;
            color: var(--primary-color);
            font-weight: 600;
        }
        .cart-item-engraving {
            font-size: 12px;
            color: var(--text-secondary);
            margin-top: 2px;
        }
        .summary-engraving { font-size: 13px; color: var(--text-secondary); }
        .cart-item-qty {
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .cart-item-qty button {
            width: 28px;
            height: 28px;
            border: none;
            border-radius: 8px;
            background: var(--primary-light);
            color: white;
            font-size: 16px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .cart-item-qty span {
            font-weight: 700;
            min-width: 24px;
            text-align: center;
        }
        .cart-item-remove {
            background: none;
            border: none;
            color: var(--text-secondary);
            padding: 4px;
            cursor: pointer;
            border-radius: 6px;
        }
        .cart-item-remove:hover {
            color: var(--danger-color);
            background: rgba(244, 67, 54, 0.1);
        }
        .cart-drawer-footer {
            padding: 20px;
            border-top: 1px solid var(--border-color);
        }
        .cart-total {
            font-size: 20px;
            font-weight: 700;
            color: var(--primary-color);
            margin-bottom: 14px;
            display: flex;
            justify-content: space-between;
        }
        .btn-checkout {
            width: 100%;
            padding: 16px;
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
            color: white;
            border: none;
            border-radius: 12px;
            font-size: 17px;
            font-weight: 700;
            font-family: 'Tajawal', sans-serif;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            transition: transform 0.2s;
        }
        .btn-checkout:hover {
            transform: translateY(-2px);
        }
        .cart-empty {
            text-align: center;
            padding: 40px 20px;
            color: var(--text-secondary);
        }
        .cart-empty i {
            font-size: 48px;
            opacity: 0.4;
            margin-bottom: 12px;
        }
        .my-orders-section { display: none; }
        .my-orders-section.active { display: block; }
        .store-section.active { display: block; }
        .store-section { display: none; }
        .admin-products-section { display: none; }
        .admin-products-section.active { display: block; }
        .admin-product-card {
            display: flex;
            align-items: center;
            gap: 16px;
            padding: 16px;
            background: var(--card-bg);
            border-radius: 12px;
            margin-bottom: 12px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.08);
            border: 1px solid var(--border-color);
        }
        .admin-product-card img {
            width: 64px;
            height: 64px;
            border-radius: 10px;
            object-fit: cover;
            background: var(--bg-color);
        }
        .admin-product-card-info { flex: 1; }
        .admin-product-card-name { font-weight: 700; font-size: 16px; margin-bottom: 4px; }
        .admin-product-card-price { color: var(--primary-color); font-weight: 600; }
        .admin-product-card-actions { display: flex; gap: 8px; }
        .admin-product-card-hidden { opacity: 0.85; border-right-color: var(--text-secondary); }
        .btn-add-product {
            width: 100%;
            padding: 14px;
            background: linear-gradient(135deg, var(--success-color) 0%, #2e7d32 100%);
            color: white;
            border: none;
            border-radius: 12px;
            font-size: 16px;
            font-weight: 600;
            font-family: 'Tajawal', sans-serif;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            margin-bottom: 20px;
        }
        .btn-add-product:hover { opacity: 0.95; transform: translateY(-1px); }

        /* ===== Timeline مرئي لحالة الطلب ===== */
        .order-timeline {
            display: flex;
            align-items: flex-start;
            justify-content: center;
            gap: 0;
            margin: 0 0 18px 0;
            padding: 14px 8px;
            background: var(--bg-color);
            border-radius: 14px;
            overflow-x: auto;
        }
        .order-timeline.cancelled-notice {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            color: var(--danger-color);
            font-weight: 700;
            font-size: 15px;
        }
        .tl-step {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            min-width: 56px;
            flex-shrink: 0;
        }
        .tl-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border: 2.5px solid var(--border-color);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 17px;
            background: var(--card-bg);
            color: var(--text-secondary);
            transition: all 0.3s;
        }
        .tl-label {
            font-size: 10px;
            color: var(--text-secondary);
            text-align: center;
            font-weight: 600;
            white-space: nowrap;
        }
        .tl-connector {
            flex: 1;
            height: 2.5px;
            background: var(--border-color);
            align-self: center;
            margin-bottom: 18px;
            min-width: 14px;
            transition: background 0.3s;
        }
        .tl-step.done .tl-icon {
            background: var(--primary-color);
            border-color: var(--primary-color);
            color: #fff;
        }
        .tl-step.done .tl-label { color: var(--primary-color); }
        .tl-step.active .tl-icon {
            background: var(--primary-light, #f3e9e1);
            border-color: var(--primary-color);
            color: var(--primary-color);
            box-shadow: 0 0 0 4px rgba(109,77,61,0.12);
            transform: scale(1.12);
        }
        .tl-step.active .tl-label { color: var(--primary-color); font-weight: 800; }
        .tl-connector.done { background: var(--primary-color); }

        /* تفاصيل الطلب (مودال) */
        .order-detail-modal .detail-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border-color); }
        .order-detail-modal .detail-row:last-child { border-bottom: none; }
        .order-detail-items { margin: 12px 0; padding: 12px; background: var(--bg-color); border-radius: 10px; }
        .order-detail-items li { padding: 6px 0; display: flex; justify-content: space-between; }
        .admin-orders-section { display: none; }
        .admin-orders-section.active { display: block; }
        .admin-order-card { background: var(--card-bg); border-radius: 12px; padding: 16px; margin-bottom: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.08); border-right: 4px solid var(--primary-color); cursor: pointer; }
        .admin-order-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.12); }
        .admin-order-card .order-meta { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 8px; }
        .admin-stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 20px; }
        .admin-stat-box { background: var(--card-bg); padding: 16px; border-radius: 12px; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
        .admin-stat-box .val { font-size: 24px; font-weight: 700; color: var(--primary-color); }
        .admin-stat-box .lbl { font-size: 13px; color: var(--text-secondary); margin-top: 4px; }
        .btn-approve-quick { padding: 6px 12px; border-radius: 8px; border: none; background: var(--success-color); color: #fff; font-family: 'Tajawal', sans-serif; font-weight: 600; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
        .btn-approve-quick:hover { filter: brightness(1.1); }
        .btn-approve-quick:active { transform: scale(0.98); }
        .btn-cycle-status { padding: 6px 12px; border-radius: 8px; border: 2px solid var(--primary-color); background: var(--card-bg); color: var(--primary-color); font-family: 'Tajawal', sans-serif; font-weight: 600; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: all 0.2s; }
        .btn-cycle-status:hover { background: var(--primary-color); color: #fff; }
        .btn-cycle-status:active { transform: scale(0.98); }
        .btn-cycle-status:disabled { opacity: 0.7; cursor: wait; }
        .admin-orders-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
        .filter-bar-row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:10px; }
        .filter-bar-row select { padding:8px 12px; border:1.5px solid var(--border-color); border-radius:10px; background:var(--card-bg); color:var(--text-primary); font-family:'Tajawal',sans-serif; font-size:14px; cursor:pointer; }
        .filter-bar-row select:focus { border-color:var(--primary-color); outline:none; }
        .filter-badge { display:inline-flex; align-items:center; gap:4px; padding:5px 12px; border-radius:20px; font-size:12px; font-weight:600; border:1.5px solid var(--border-color); background:var(--card-bg); color:var(--text-secondary); cursor:pointer; transition:all 0.15s; white-space:nowrap; }
        .filter-badge.active { background:var(--primary-color); color:white; border-color:var(--primary-color); }
        .filter-badge:hover:not(.active) { border-color:var(--primary-color); color:var(--primary-color); }
        .filter-group-label { font-size:12px; font-weight:700; color:var(--text-secondary); white-space:nowrap; }
        .filter-result-count { font-size:12px; color:var(--text-secondary); margin-bottom:8px; }
        .order-card.clickable { cursor: pointer; }
        .order-card.clickable:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.12); }

        /* ====== مودال نجاح الطلب — تصميم راقي ====== */
        .confetti-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10001; }
        .order-success-modal { max-width: 400px; padding: 0; border-radius: 24px; overflow: hidden; }
        .success-modal-inner { padding: 36px 28px 28px; text-align: center; }

        /* الأنيميشن الدائري */
        .success-check-wrap { margin: 0 auto 20px; width: 84px; height: 84px; }
        .success-check-svg { width: 84px; height: 84px; }
        .success-check-circle {
            stroke: var(--success-color); stroke-width: 2;
            stroke-dasharray: 166; stroke-dashoffset: 166;
            animation: successCircleDraw 0.7s cubic-bezier(0.65,0,0.45,1) forwards;
        }
        .success-check-mark {
            stroke: var(--success-color); stroke-width: 3.5;
            stroke-linecap: round; stroke-linejoin: round;
            stroke-dasharray: 48; stroke-dashoffset: 48;
            animation: successCheckDraw 0.4s 0.65s cubic-bezier(0.65,0,0.45,1) forwards;
        }
        @keyframes successCircleDraw { to { stroke-dashoffset: 0; } }
        @keyframes successCheckDraw  { to { stroke-dashoffset: 0; } }

        /* النصوص */
        .success-title { font-size: 24px; font-weight: 800; color: var(--text-primary); margin-bottom: 4px; }
        .success-subtitle { font-size: 14px; color: var(--text-secondary); margin-bottom: 20px; }

        /* رقم الطلب */
        .success-number-wrap {
            background: var(--surface-dim, rgba(0,0,0,0.04));
            border: 1px solid var(--border-color);
            border-radius: 14px; padding: 12px 16px; margin: 0 0 16px;
            cursor: pointer; transition: background 0.2s, border-color 0.2s;
        }
        .success-number-wrap:hover { background: var(--border-color); }
        .success-number-label { font-size: 0.68rem; color: var(--text-secondary); display: block; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 1px; }
        .success-number { font-size: 22px; color: var(--primary-color); font-weight: 800; letter-spacing: 3px; margin: 0; }
        .success-copy-hint { font-size: 0.66rem; color: var(--text-secondary); display: block; margin-top: 5px; opacity: 0.7; }

        /* ملخص الطلب */
        .success-summary {
            display: flex; justify-content: center; gap: 1px;
            background: var(--border-color); border-radius: 14px;
            overflow: hidden; margin-bottom: 16px; border: 1px solid var(--border-color);
        }
        .success-summary-item {
            flex: 1; display: flex; flex-direction: column; align-items: center;
            gap: 3px; padding: 12px 8px; background: var(--card-bg);
        }
        .success-summary-item:not(:last-child) { border-left: 1px solid var(--border-color); }
        .success-summary-icon { font-size: 18px; color: var(--primary-color); }
        .success-summary-num { font-size: 17px; font-weight: 800; color: var(--text-primary); }
        .success-summary-label { font-size: 0.65rem; color: var(--text-secondary); }

        /* الرسالة */
        .success-msg { color: var(--text-secondary); font-size: 0.88rem; margin-bottom: 20px; line-height: 1.7; }

        /* الأزرار */
        .success-actions { display: flex; flex-direction: column; gap: 10px; }
        .success-btn-primary { width: 100%; }
        .success-btn-secondary {
            width: 100%; padding: 12px; border: 1.5px solid var(--border-color);
            background: transparent; color: var(--text-secondary); border-radius: 12px;
            font-size: 15px; font-weight: 600; cursor: pointer; transition: all 0.2s;
            display: flex; align-items: center; justify-content: center; gap: 8px;
            font-family: inherit;
        }
        .success-btn-secondary:hover { background: var(--surface-dim); color: var(--text-primary); border-color: var(--primary-color); }
        /* تحميل */
        .btn-loading { pointer-events: none; opacity: 0.8; position: relative; }
        .btn-loading::after { content: ''; position: absolute; width: 20px; height: 20px; border: 2px solid rgba(255,255,255,0.5); border-top-color: #fff; border-radius: 50%; animation: spin 0.6s linear infinite; left: 50%; top: 50%; margin-left: -10px; margin-top: -10px; }
        @keyframes spin { to { transform: rotate(360deg); } }
        /* Toast */
        #toastContainer { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 9999; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
        .toast { background: var(--card-bg); color: var(--text-primary); padding: 14px 20px; border-radius: 12px; box-shadow: 0 6px 24px rgba(0,0,0,0.2); font-weight: 600; animation: toastIn 0.3s ease; display: flex; align-items: center; gap: 10px; }
        .toast i { font-size: 20px; }
        .toast:not(.toast-error):not(.toast-success):not(.toast-warning):not(.toast-info) i { color: var(--success-color); }
        .toast.toast-success i { color: var(--success-color); }
        .toast.toast-error i { color: var(--danger-color); }
        .toast.toast-warning i { color: #f59e0b; }
        .toast.toast-info i { color: #3b82f6; }
        @keyframes toastIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        .product-card-desc { font-size: 12px; color: var(--text-secondary); margin-top: 4px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
        .quick-view-desc { font-size: 13px; color: var(--text-secondary); margin: 8px 0 12px; line-height: 1.5; }
        .checkout-bank-box { background: var(--bg-color); border: 1px solid var(--border-color); border-radius: 12px; padding: 14px; margin: 14px 0; }
        .checkout-bank-title { font-weight: 700; color: var(--primary-color); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
        .checkout-bank-content { font-size: 14px; line-height: 1.6; }
        .checkout-bank-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid var(--border-color); }
        .checkout-bank-row:last-child { border-bottom: none; }
        .checkout-bank-label { font-weight: 600; color: var(--text-secondary); min-width: 100px; }
        .checkout-bank-value { flex: 1; word-break: break-all; }
        .btn-copy-bank { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px; border: 2px solid var(--primary-color); background: var(--card-bg); color: var(--primary-color); font-family: 'Tajawal', sans-serif; font-weight: 600; font-size: 13px; cursor: pointer; }
        .btn-copy-bank:hover { background: var(--primary-color); color: #fff; }
        .btn-copy-bank i { font-size: 16px; }
        .checkout-order-summary { background: var(--bg-color); border-radius: 12px; padding: 14px; margin-bottom: 16px; border: 1px solid var(--border-color); }
        .checkout-order-summary .summary-title { font-weight: 700; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
        .checkout-order-summary .summary-row { display: flex; justify-content: space-between; font-size: 14px; padding: 4px 0; }
        .checkout-order-summary .summary-total { font-weight: 700; color: var(--primary-color); font-size: 16px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border-color); }
        .checkout-divider { font-size: 12px; color: var(--text-secondary); margin: 16px 0 12px; display: flex; align-items: center; gap: 10px; }
        .checkout-divider::before, .checkout-divider::after { content: ''; flex: 1; height: 1px; background: var(--border-color); }

        /* ── Payment Method Tabs ── */
        .payment-method-tabs { display: flex; gap: 10px; margin-bottom: 14px; }
        .payment-tab {
            flex: 1; padding: 10px 12px; border: 2px solid var(--border-color);
            border-radius: 10px; background: var(--card-bg); color: var(--text-secondary);
            font-family: 'Tajawal', sans-serif; font-size: 14px; font-weight: 600;
            cursor: pointer; transition: all .2s; display: flex; align-items: center;
            justify-content: center; gap: 7px;
        }
        .payment-tab:hover { border-color: var(--primary-color); color: var(--primary-color); }
        .payment-tab.active {
            border-color: var(--primary-color); background: var(--primary-color);
            color: #fff; box-shadow: 0 2px 8px rgba(109,77,61,.25);
        }

        /* ── Ziina Info Box ── */
        .ziina-info-box {
            background: var(--bg-color); border: 1.5px solid #22c55e33;
            border-radius: 12px; padding: 16px; margin-bottom: 12px;
        }
        .ziina-info-header {
            display: flex; align-items: center; gap: 8px;
            font-weight: 700; font-size: 15px; color: var(--text-primary); margin-bottom: 12px;
        }
        .ziina-payment-icons { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; align-items: center; }
        .ziina-info-note { font-size: 12px; color: var(--text-secondary); margin: 0; line-height: 1.6; }
        /* ===== كوبونات الخصم ===== */
        .coupon-wrap { display: flex; gap: 8px; margin: 12px 0; }
        .coupon-input { flex: 1; padding: 10px 14px; border: 1.5px solid var(--border-color); border-radius: 10px; font-family: 'Tajawal', sans-serif; font-size: 14px; background: var(--card-bg); color: var(--text-primary); text-transform: uppercase; letter-spacing: 1px; transition: border-color 0.2s; }
        .coupon-input:focus { outline: none; border-color: var(--primary-color); }
        .coupon-btn { padding: 10px 18px; background: var(--primary-color); color: #fff; border: none; border-radius: 10px; font-family: 'Tajawal', sans-serif; font-size: 14px; font-weight: 600; cursor: pointer; transition: background 0.2s; white-space: nowrap; }
        .coupon-btn:hover { background: var(--primary-dark); }
        .coupon-applied { display: flex; align-items: center; justify-content: space-between; background: #e8f5e9; border: 1.5px solid #a5d6a7; border-radius: 10px; padding: 10px 14px; margin: 8px 0; font-size: 14px; }
        [data-theme="dark"] .coupon-applied { background: #1b3a1f; border-color: #4caf50; }
        .coupon-applied-label { color: #2e7d32; font-weight: 600; display: flex; align-items: center; gap: 6px; }
        [data-theme="dark"] .coupon-applied-label { color: #81c784; }
        .coupon-remove { background: none; border: none; color: #e53935; cursor: pointer; font-size: 18px; padding: 0 4px; line-height: 1; }
        .summary-discount { color: var(--success-color); font-weight: 600; }
        /* ===== قسم مراسلة العملاء ===== */
        .admin-messaging-section { display:none; padding-bottom:40px; }
        .admin-messaging-section .admin-section-header { margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid var(--border-color); }
        .messaging-compose-card {
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 16px;
            padding: 24px;
            margin-bottom: 20px;
        }
        .msg-recipient-tabs { display:flex; gap:8px; flex-wrap:wrap; }
        .msg-tab {
            flex:1; min-width:120px; padding:10px 12px;
            border:1.5px solid var(--border-color);
            background:var(--card-bg); color:var(--text-secondary);
            border-radius:10px; font-size:13px; font-weight:600;
            cursor:pointer; transition:all 0.2s; font-family:inherit;
            display:flex; align-items:center; justify-content:center; gap:6px;
        }
        .msg-tab:hover { border-color:var(--primary-color); color:var(--primary-color); }
        .msg-tab.active { background:var(--primary-color); color:#fff; border-color:var(--primary-color); }
        .msg-recipients-preview {
            background:var(--surface-dim,rgba(0,0,0,0.04));
            border:1px solid var(--border-color);
            border-radius:10px; padding:12px 16px;
            font-size:13px; color:var(--text-secondary);
            margin-bottom:16px; display:flex; align-items:center; gap:8px;
        }
        .msg-recipients-preview i { color:var(--primary-color); font-size:16px; }
        .messaging-log-card {
            background:var(--card-bg); border:1px solid var(--border-color);
            border-radius:16px; padding:20px 24px;
        }
        .msg-log-title { font-size:15px; font-weight:700; color:var(--text-primary); margin-bottom:12px; display:flex; align-items:center; gap:8px; }
        .msg-result-box {
            padding:14px 16px; border-radius:10px; font-size:14px; font-weight:600;
            display:flex; align-items:center; gap:10px;
        }
        .msg-result-box.success { background:rgba(34,197,94,0.1); color:#16a34a; border:1px solid rgba(34,197,94,0.25); }
        .msg-result-box.error   { background:rgba(239,68,68,0.1);  color:#dc2626; border:1px solid rgba(239,68,68,0.25); }
        [data-theme="dark"] .msg-result-box.success { color:#4ade80; }
        [data-theme="dark"] .msg-result-box.error   { color:#f87171; }
        @media (max-width: 480px) {
            .messaging-compose-card { padding: 16px 12px; }
            .msg-tab { min-width: calc(50% - 4px); font-size: 13px; padding: 9px 8px; }
        }

        /* ===== صفحة التحليلات ===== */
        .admin-analytics-section { display:none; }
        .admin-analytics-section.active { display:block; }
        .analytics-period-bar { display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap; }
        .analytics-kpi-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:12px; margin-bottom:24px; }
        .analytics-kpi { background:var(--card-bg); border:1px solid var(--border-color); border-radius:14px; padding:16px; text-align:center; position:relative; overflow:hidden; }
        .analytics-kpi::before { content:''; position:absolute; top:0; right:0; width:4px; height:100%; background:var(--primary-color); border-radius:0 14px 14px 0; }
        .analytics-kpi-num { font-size:28px; font-weight:800; color:var(--primary-color); line-height:1; }
        .analytics-kpi-label { font-size:12px; color:var(--text-secondary); margin-top:6px; }
        .analytics-kpi-sub { font-size:11px; color:var(--text-secondary); margin-top:2px; }
        .analytics-section-title { font-size:15px; font-weight:700; margin-bottom:12px; color:var(--text-primary); display:flex; align-items:center; gap:8px; }
        .analytics-chart-card { background:var(--card-bg); border:1px solid var(--border-color); border-radius:14px; padding:18px; margin-bottom:18px; }
        .analytics-bar-chart { display:flex; align-items:flex-end; gap:6px; height:140px; border-bottom:2px solid var(--border-color); padding-bottom:0; }
        .analytics-bar-wrap { display:flex; flex-direction:column; align-items:center; flex:1; height:100%; justify-content:flex-end; gap:4px; cursor:pointer; }
        .analytics-bar { width:100%; border-radius:6px 6px 0 0; background:var(--primary-color); opacity:0.85; transition:opacity 0.15s, height 0.4s; min-height:2px; }
        .analytics-bar-wrap:hover .analytics-bar { opacity:1; }
        .analytics-bar-label { font-size:10px; color:var(--text-secondary); text-align:center; margin-top:6px; white-space:nowrap; }
        .analytics-bar-val { font-size:10px; font-weight:700; color:var(--text-secondary); }
        .analytics-top-list { display:flex; flex-direction:column; gap:10px; }
        .analytics-top-item { display:flex; align-items:center; gap:12px; }
        .analytics-top-rank { width:24px; height:24px; border-radius:50%; background:var(--primary-color); color:white; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
        .analytics-top-bar-wrap { flex:1; }
        .analytics-top-name { font-size:13px; font-weight:600; margin-bottom:4px; }
        .analytics-top-bar-bg { height:8px; background:var(--bg-color); border-radius:4px; overflow:hidden; }
        .analytics-top-bar-fill { height:100%; background:var(--primary-color); border-radius:4px; transition:width 0.5s; }
        .analytics-top-stat { font-size:12px; color:var(--text-secondary); white-space:nowrap; text-align:left; }
        .analytics-donut-row { display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
        .analytics-donut-legend { display:flex; flex-direction:column; gap:8px; flex:1; }
        .analytics-donut-legend-item { display:flex; align-items:center; gap:8px; font-size:13px; }
        .analytics-donut-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
        .analytics-two-col { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
        @media(max-width:600px) { .analytics-two-col { grid-template-columns:1fr; } .analytics-kpi-num { font-size:22px; } }
        /* ===== صفحة إدارة التقييمات ===== */
        .admin-reviews-section { display:none; }
        .admin-reviews-section.active { display:block; }
        .reviews-stats-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:12px; margin-bottom:20px; }
        .reviews-stat-card { background:var(--card-bg); border:1px solid var(--border-color); border-radius:12px; padding:14px; text-align:center; }
        .reviews-stat-num { font-size:26px; font-weight:700; color:var(--primary-color); }
        .reviews-stat-label { font-size:12px; color:var(--text-secondary); margin-top:4px; }
        .admin-review-card { background:var(--card-bg); border:1px solid var(--border-color); border-radius:12px; padding:14px 16px; margin-bottom:10px; position:relative; }
        .admin-review-product { font-size:12px; font-weight:700; color:var(--primary-color); background:var(--bg-color); padding:3px 10px; border-radius:20px; display:inline-block; margin-bottom:8px; }
        .admin-review-header { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:6px; }
        .admin-review-name { font-weight:700; font-size:14px; }
        .admin-review-date { font-size:12px; color:var(--text-secondary); margin-right:auto; }
        .admin-review-comment { font-size:14px; color:var(--text-primary); line-height:1.6; margin-top:4px; padding:8px 10px; background:var(--bg-color); border-radius:8px; }
        .admin-review-delete { background:none; border:none; color:var(--danger-color); cursor:pointer; font-size:16px; padding:5px 8px; border-radius:6px; transition:background 0.15s; }
        .admin-review-delete:hover { background:rgba(168,67,67,0.1); }
        .admin-reply-btn { background:none; border:1.5px solid var(--primary-color); color:var(--primary-color); cursor:pointer; font-size:12px; padding:4px 10px; border-radius:6px; transition:background 0.15s; font-family:'Tajawal',sans-serif; }
        .admin-reply-btn:hover { background:rgba(109,77,61,0.08); }
        .admin-reply-display { margin-top:10px; background:linear-gradient(135deg,#f5f0eb,#ede0d4); border-right:3px solid var(--primary-color); border-radius:0 8px 8px 0; padding:10px 12px; }
        .admin-reply-form { margin-top:10px; padding:10px; background:var(--bg-color); border-radius:8px; border:1px dashed var(--border-color); }
        /* رد الأدمن في Quick View */
        .review-admin-reply { margin-top:8px; background:linear-gradient(135deg,#f5f0eb,#ede0d4); border-right:3px solid var(--primary-color); border-radius:0 8px 8px 0; padding:8px 12px; }
        .review-admin-reply-header { font-size:12px; font-weight:700; color:var(--primary-color); display:flex; align-items:center; gap:5px; margin-bottom:4px; }
        .review-admin-reply-text { font-size:13px; color:var(--text-color); line-height:1.6; }
        [data-theme="dark"] .admin-reply-display,
        [data-theme="dark"] .review-admin-reply { background:linear-gradient(135deg,rgba(109,77,61,0.18),rgba(109,77,61,0.08)); }
        .reviews-filter-bar { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; align-items:center; }
        .reviews-filter-bar select, .reviews-filter-bar input { padding:8px 12px; border:1.5px solid var(--border-color); border-radius:10px; background:var(--card-bg); color:var(--text-primary); font-family:'Tajawal',sans-serif; font-size:14px; }
        .reviews-product-summary { background:var(--card-bg); border:1px solid var(--border-color); border-radius:12px; padding:14px 16px; margin-bottom:10px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
        .reviews-product-bar { flex:1; min-width:120px; height:8px; background:var(--bg-color); border-radius:4px; overflow:hidden; }
        .reviews-product-bar-fill { height:100%; background:var(--primary-color); border-radius:4px; transition:width 0.4s; }
        /* ===== تقييمات المنتجات ===== */
        .stars-display { display:inline-flex; gap:2px; color:#f5a623; font-size:14px; }
        .stars-display.sm { font-size:12px; }
        .rating-count { font-size:12px; color:var(--text-secondary); margin-right:4px; }
        .product-card-rating { display:flex; align-items:center; gap:4px; margin-bottom:6px; min-height:18px; justify-content: center; }
        .review-star-btn { background:none; border:none; font-size:28px; cursor:pointer; color:#ddd; padding:2px; transition:color 0.15s; line-height:1; }
        .review-star-btn.active, .review-star-btn:hover { color:#f5a623; }
        .review-stars-row { display:flex; gap:4px; margin:10px 0; justify-content:center; }
        .review-card { background:var(--bg-color); border-radius:10px; padding:12px; margin-bottom:10px; }
        .review-card-header { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
        .review-card-name { font-weight:700; font-size:14px; }
        .review-card-date { font-size:12px; color:var(--text-secondary); margin-right:auto; }
        .review-card-comment { font-size:14px; color:var(--text-primary); line-height:1.6; }
        .review-btn { display:inline-flex; align-items:center; gap:6px; background:var(--primary-color); color:#fff; border:none; border-radius:10px; padding:10px 18px; font-family:'Tajawal',sans-serif; font-size:14px; font-weight:600; cursor:pointer; margin-top:10px; transition:background 0.2s; }
        .review-btn:hover { background:var(--primary-dark); }
        .reviews-section { margin-top:16px; border-top:1px solid var(--border-color); padding-top:14px; }
        .reviews-section-title { font-weight:700; font-size:15px; margin-bottom:10px; display:flex; align-items:center; gap:6px; }
        /* ===== إدارة كوبونات الأدمن ===== */
        .coupon-admin-card { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 12px; padding: 14px 16px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
        .coupon-admin-code { font-size: 16px; font-weight: 700; letter-spacing: 2px; color: var(--primary-color); background: var(--bg-color); padding: 4px 12px; border-radius: 8px; font-family: monospace; }
        .coupon-admin-info { flex: 1; font-size: 13px; color: var(--text-secondary); }
        .coupon-admin-actions { display: flex; gap: 8px; }
        .coupon-toggle { padding: 6px 12px; border-radius: 8px; border: 1.5px solid var(--border-color); background: none; cursor: pointer; font-size: 13px; font-family: 'Tajawal', sans-serif; font-weight: 600; transition: all 0.2s; }
        .coupon-toggle.active { background: var(--success-color); color: #fff; border-color: var(--success-color); }
        .coupon-toggle.inactive { background: var(--bg-color); color: var(--text-secondary); }
        /* معاينة المنتج */
        .product-quick-view .modal-body { text-align: center; }
        .product-quick-view .quick-view-image { width: 100%; max-height: 280px; object-fit: contain; border-radius: 12px; background: var(--bg-color); margin-bottom: 16px; }
        /* السماح بالزوم فقط على معرض الصور والصورة الكاملة */
        .quick-view-gallery,
        .quick-view-gallery img,
        .quick-view-gallery #quickViewGalleryImg,
        .image-modal-img-wrap,
        .image-modal-img-wrap img {
            touch-action: none !important;
        }
        /* شارة مستوى الزوم */
        .qv-zoom-badge {
            position: absolute;
            top: 8px;
            left: 8px;
            background: rgba(0,0,0,0.55);
            color: #fff;
            font-size: 12px;
            font-weight: 700;
            padding: 3px 9px;
            border-radius: 20px;
            opacity: 0;
            transform: scale(0.85);
            transition: opacity 0.2s, transform 0.2s;
            pointer-events: none;
            z-index: 10;
            font-family: 'Tajawal', sans-serif;
        }
        .qv-zoom-badge.visible { opacity: 1; transform: scale(1); }
        /* تلميح سحب الزوم */
        .quick-view-gallery { position: relative; max-height: 280px; margin-bottom: 16px; border-radius: 12px; overflow: hidden; background: var(--bg-color); cursor: zoom-in; user-select: none; }
        .quick-view-gallery:active { cursor: grabbing; }
        .quick-view-gallery img { width: 100%; max-height: 280px; object-fit: contain; display: block; transition: opacity 0.18s ease; pointer-events: none; }
        /* Slide animations */
        .quick-view-gallery img.slide-out-left  { animation: qvSlideOutLeft  0.18s ease forwards; }
        .quick-view-gallery img.slide-out-right { animation: qvSlideOutRight 0.18s ease forwards; }
        .quick-view-gallery img.slide-in-right  { animation: qvSlideInRight  0.28s ease forwards; }
        .quick-view-gallery img.slide-in-left   { animation: qvSlideInLeft   0.28s ease forwards; }
        @keyframes qvSlideOutLeft  { to { opacity: 0; transform: translateX(-18px); } }
        @keyframes qvSlideOutRight { to { opacity: 0; transform: translateX(18px); } }
        @keyframes qvSlideInRight  { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } }
        @keyframes qvSlideInLeft   { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: translateX(0); } }
        .quick-view-gallery-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: none; border-radius: 50%; background: rgba(0,0,0,0.45); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 18px; transition: background 0.2s; z-index: 4; }
        .quick-view-gallery-nav:hover { background: rgba(0,0,0,0.7); }
        .quick-view-gallery-nav.prev { right: 8px; }
        .quick-view-gallery-nav.next { left: 8px; }

        /* ===== شريط الصور المصغرة ===== */
        .qv-thumbs-strip {
            display: flex;
            gap: 8px;
            margin-top: 10px;
            overflow-x: auto;
            padding: 2px 4px 6px;
            scrollbar-width: none;
            justify-content: center;
        }
        .qv-thumbs-strip::-webkit-scrollbar { display: none; }
        .qv-thumb {
            flex: 0 0 62px;
            height: 62px;
            border-radius: 8px;
            overflow: hidden;
            cursor: pointer;
            position: relative;
            border: 2px solid transparent;
            transition: border-color 0.2s, opacity 0.2s;
        }
        .qv-thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            pointer-events: none;
        }
        /* الرمادي على الصور غير النشطة */
        .qv-thumb::after {
            content: '';
            position: absolute;
            inset: 0;
            background: rgba(180, 160, 140, 0.5);
            border-radius: 6px;
            transition: opacity 0.25s;
        }
        .qv-thumb.active {
            border-color: var(--primary-color);
        }
        .qv-thumb.active::after {
            opacity: 0;
        }
        .qv-thumb:hover::after {
            opacity: 0.2;
        }
        .quick-view-price-block { margin-bottom: 20px; }
        .product-quick-view .quick-view-name { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
        .product-quick-view .quick-view-price { font-size: 22px; font-weight: 700; color: var(--primary-color); margin-bottom: 20px; }
        .product-card-image-wrap { cursor: pointer; position: relative; overflow: hidden; }
        /* ===== كاروسيل بطاقة المنتج ===== */
        .card-img-slider {
            position: relative;
            width: 100%;
            overflow: hidden;
            cursor: pointer;
            touch-action: pan-y;
        }
        .card-img-track {
            display: flex;
            direction: ltr;
            transition: transform 0.32s cubic-bezier(.4,0,.2,1);
            will-change: transform;
        }
        .card-img-track .product-card-image {
            width: 100%;
            flex-shrink: 0;
        }
        /* نقاط التنقل */
        .card-img-dots {
            position: absolute;
            bottom: 7px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 5px;
            z-index: 3;
            pointer-events: none;
        }
        .card-img-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: rgba(255,255,255,0.55);
            transition: background 0.2s, transform 0.2s;
        }
        .card-img-dot.active {
            background: #fff;
            transform: scale(1.3);
        }
        /* أزرار السهم */
        .card-img-arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 4;
            background: rgba(0,0,0,0.38);
            border: none;
            color: #fff;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 13px;
            cursor: pointer;
            opacity: 0;
            transition: opacity 0.2s;
            padding: 0;
        }
        @media (hover: hover) { .product-card-image-wrap:hover .card-img-arrow { opacity: 1; } }
        .card-img-prev { right: 6px; }
        .card-img-next { left: 6px; }
        .product-card-image-wrap::after { content: 'عرض'; position: absolute; bottom: 8px; right: 8px; background: rgba(0,0,0,0.6); color: #fff; padding: 4px 10px; border-radius: 8px; font-size: 12px; font-weight: 600; z-index: 2; }

        /* ========== شريط مؤشرات الثقة ========== */
        .trust-bar {
            display: flex;
            justify-content: center;
            gap: 0;
            margin-top: 28px;
            padding: 14px 16px;
            border-top: 1px solid var(--border-color);
        }
        .trust-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            flex: 1;
            text-align: center;
            padding: 0 8px;
        }
        .trust-item i {
            font-size: 16px;
            color: var(--text-secondary);
        }
        .trust-item span {
            font-size: 11px;
            font-weight: 500;
            color: var(--text-secondary);
            line-height: 1.4;
            opacity: 0.8;
        }
        @media (max-width: 600px) {
            .trust-bar {
                flex-wrap: wrap;
                gap: 16px 0;
            }
            .trust-item {
                flex: 0 0 50%;
            }
        }

        /* ========== الفوتر — أسلوب أبّل (روابط فقط) ========== */
        .site-footer {
            margin: 48px -20px 0;
            padding: 0;
            border-top: 1px solid var(--border-color);
            background: var(--card-bg);
        }
        .footer-links-row {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
            gap: 32px 40px;
            max-width: 900px;
            margin: 0 auto;
            padding: 32px 24px 24px;
        }
        .footer-col h4 {
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--text-secondary);
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .footer-col a, .footer-col .footer-text {
            display: flex;
            align-items: center;
            gap: 7px;
            font-size: 14px;
            color: var(--text-primary);
            text-decoration: none;
            margin-bottom: 8px;
            transition: color 0.2s, gap 0.2s;
        }
        .footer-col a i, .footer-col .footer-text i {
            font-size: 14px;
            color: var(--primary-color);
            opacity: 0.7;
            flex-shrink: 0;
            transition: opacity 0.2s;
        }
        .footer-col a:hover { color: var(--primary-color); gap: 10px; }
        .footer-col a:hover i { opacity: 1; }
        .footer-col .footer-note { font-size: 13px; color: var(--text-secondary); }
        small.email-tag { display: block; font-size: 11px; color: var(--text-secondary); margin-top: 6px; margin-bottom: -2px; padding-right: 22px; font-weight: 400; line-height: 1.4; }
        .footer-copyright i { margin-left: 4px; color: var(--primary-color); }
        .footer-bar {
            background: var(--bg-color);
            padding: 16px 24px;
            text-align: center;
            border-top: 1px solid var(--border-color);
        }
        .footer-copyright {
            font-size: 13px;
            color: var(--text-secondary);
        }
        [data-theme="dark"] .site-footer { border-top-color: var(--border-color); }
        [data-theme="dark"] .footer-bar { background: var(--surface-dim); border-top-color: var(--border-color); }
        [data-theme="dark"] .footer-copyright { color: var(--text-secondary); }

        /* Responsive */
        @media (max-width: 600px) {
            .stats-card {
                grid-template-columns: 1fr;
            }
            
            .order-details {
                grid-template-columns: 1fr;
            }
            
            .order-header {
                flex-direction: column;
                gap: 10px;
            }
            
            .order-price {
                text-align: right;
            }
            
            .cost-grid {
                grid-template-columns: 1fr;
            }
            
            .order-images {
                grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
            }
            
            .image-preview-container {
                grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
            }
            
            .image-modal-close {
                top: 10px;
                right: 10px;
                width: 44px;
                height: 44px;
                min-width: 44px;
                min-height: 44px;
                font-size: 24px;
            }
            .products-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 12px;
            }
            .product-card-add {
                min-height: 44px;
                padding: 12px;
            }
            .cart-item {
                padding: 14px;
            }
            .cart-item-qty button {
                min-width: 36px;
                min-height: 36px;
            }
            .store-nav {
                flex-wrap: nowrap;
                padding-bottom: 4px;
            }
            .store-nav-btn {
                min-height: 44px;
                padding: 10px 14px;
                font-size: 13px;
            }
            .cart-drawer {
                max-width: 100%;
            }
            .site-footer { margin-top: 32px; }
            .footer-links-row { padding: 24px 16px 20px; gap: 24px 20px; }
            .footer-bar { padding: 12px 16px; }
        }