[class^="ri-"],[class*=" ri-"]{font-weight:400} :root{color-scheme:light dark;--font-sans:'IBM Plex Sans Arabic',sans-serif;--font-num:var(--font-sans);--primary:#1F75FE;--primary-dim:#1558c9;--primary-ghost:rgba(31,117,254,.10);--accent:#02AA94;--warn:#F59E0B;--danger:#EF4444;--success:#10B981;--bg:#F1F5F9;--surface:#FFFFFF;--surface2:#F8FAFC;--border:#E2E8F0;--border2:#CBD5E1;--text:#1E293B;--text2:#475569;--text3:#94A3B8;--sidebar-w:268px;--topbar-h:64px;--bottom-h:64px;--radius:0px;--space-page:16px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--shadow-xs:0 1px 2px rgba(15,23,42,.06);--shadow-sm:0 1px 3px rgba(15,23,42,.1),0 1px 2px rgba(15,23,42,.06);--shadow-md:0 4px 6px rgba(15,23,42,.07),0 2px 4px rgba(15,23,42,.06);--shadow-lg:0 10px 15px -3px rgba(15,23,42,.08),0 4px 6px -4px rgba(15,23,42,.06);--shadow-xl:0 20px 25px -5px rgba(15,23,42,.1),0 8px 10px -6px rgba(15,23,42,.06);--z-sticky:100;--z-overlay:999;--z-sidebar:1000;--z-modal:1100;--color-primary:var(--primary);--color-primary-hover:var(--primary-dim);--color-primary-subtle:var(--primary-ghost);--color-text-on-primary:#fff;--color-danger-hover:#a31f00;--color-success-hover:#059669;--color-warning-hover:#b45309;--chart-series-1:var(--primary);--chart-series-2:var(--accent);--chart-series-3:var(--success);--chart-series-4:#7C3AED;--chart-series-5:var(--warn);--color-bg:var(--bg);--color-surface:var(--surface);--color-surface-2:var(--surface2);--color-border:var(--border);--color-border-strong:var(--border2);--color-text:var(--text);--color-text-subtle:var(--text2);--color-text-muted:var(--text3);--text-secondary:var(--text2);--color-success:var(--success);--color-success-subtle:#D1FAE5;--color-warning:var(--warn);--color-warning-subtle:#FEF3C7;--color-danger:var(--danger);--color-danger-subtle:#FEE2E2;--color-success-border:#abf5d1;--color-warning-border:#f8d97e;--color-danger-border:#ffbdad;--color-primary-border:#adccff;--color-sidebar-bg:var(--surface);--color-sidebar-text:var(--text2);--color-sidebar-active:var(--primary);--color-sidebar-hover-bg:var(--primary-ghost);--color-scrim:rgba(15,23,42,.85);--color-scrim-strong:rgba(15,23,42,.95);--radius-xs:0px;--radius-sm:0px;--radius-md:0px;--radius-lg:0px;--radius-full:9999px;--color-primary-rgb:31,117,254;--color-bg-dark:#0F172A;--color-bg-dark-2:#1e293b;--color-primary-dark:#1558c9;--sidebar-width:var(--sidebar-w);--topbar-height:var(--topbar-h);font-family:var(--font-sans);font-size:var(--text-base);--text-xs:clamp(0.75rem,0.72rem+0.15vw,0.8125rem);--text-sm:clamp(0.8125rem,0.78rem+0.15vw,0.875rem);--text-base:clamp(0.875rem,0.85rem+0.18vw,1rem);--text-lg:clamp(1rem,0.95rem+0.25vw,1.125rem);--text-xl:clamp(1.125rem,1.08rem+0.3vw,1.25rem);--text-2xl:clamp(1.25rem,1.18rem+0.5vw,1.5rem);--text-3xl:clamp(1.5rem,1.35rem+1vw,2rem);--font-weight-regular:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--leading-tight:1.25;--leading-snug:1.375;--leading-normal:1.6;--leading-relaxed:1.75;--avatar-color-1:#1F75FE;--avatar-color-2:#02AA94;--avatar-color-3:#F59E0B;--avatar-color-4:#EF4444;--avatar-color-5:#8B5CF6;--avatar-color-6:#EC4899;--avatar-color-7:#0EA5E9;--avatar-color-8:#65A30D;--control-h-desktop:40px;--control-h-mobile:40px;--control-h:var(--control-h-desktop);--control-radius:var(--radius-sm,0);--control-padding-x:14px;--control-font-size:var(--text-sm,14px);--bp-xs:480px;--bp-sm:640px;--bp-md:768px;--bp-lg:1024px;--bp-xl:1280px;} @media(max-width:768px){:root{--control-h:40px;--control-padding-x:16px;--space-page:14px}} @media(max-width:480px){:root{--space-page:12px}} @media(prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark;--bg:#0F172A;--surface:#1E293B;--surface2:#334155;--border:#334155;--border2:#475569;--text:#F8FAFC;--text2:#CBD5E1;--text3:#94A3B8;--color-bg:#0F172A;--color-surface:#1E293B;--color-surface-2:#334155;--color-border:#334155;--color-border-strong:#475569;--color-text:#F8FAFC;--color-text-subtle:#CBD5E1;--color-text-muted:#94A3B8;--text-secondary:#CBD5E1;--color-sidebar-bg:#1E293B;--color-sidebar-text:#CBD5E1;--color-sidebar-hover-bg:rgba(31,117,254,.18);--color-topbar-bg:#1E293B;--primary-ghost:rgba(31,117,254,.18);--color-success-subtle:rgba(16,185,129,.18);--color-warning-subtle:rgba(245,158,11,.18);--color-danger-subtle:rgba(239,68,68,.18);--color-success-border:rgba(16,185,129,.4);--color-warning-border:rgba(245,158,11,.4);--color-danger-border:rgba(239,68,68,.4);--color-primary-border:rgba(31,117,254,.4);--color-success:#34D399;--color-warning:#FBBF24;--color-danger:#F87171;--color-primary:#60A5FA;--accent:#14D3B5;--color-primary-hover:#3b82f6;--color-danger-hover:#dc2626;--color-success-hover:#10b981;--color-warning-hover:#d97706;--color-text-on-primary:#0F172A;--chart-series-4:#a78bfa}} [data-theme="dark"]{color-scheme:dark;--bg:#0F172A;--surface:#1E293B;--surface2:#334155;--border:#334155;--border2:#475569;--text:#F8FAFC;--text2:#CBD5E1;--text3:#94A3B8;--color-bg:#0F172A;--color-surface:#1E293B;--color-surface-2:#334155;--color-border:#334155;--color-border-strong:#475569;--color-text:#F8FAFC;--color-text-subtle:#CBD5E1;--color-text-muted:#94A3B8;--text-secondary:#CBD5E1;--color-sidebar-bg:#1E293B;--color-sidebar-text:#CBD5E1;--color-sidebar-hover-bg:rgba(31,117,254,.18);--color-topbar-bg:#1E293B;--primary-ghost:rgba(31,117,254,.18);--color-success-subtle:rgba(16,185,129,.18);--color-warning-subtle:rgba(245,158,11,.18);--color-danger-subtle:rgba(239,68,68,.18);--color-success-border:rgba(16,185,129,.4);--color-warning-border:rgba(245,158,11,.4);--color-danger-border:rgba(239,68,68,.4);--color-primary-border:rgba(31,117,254,.4);--color-success:#34D399;--color-warning:#FBBF24;--color-danger:#F87171;--color-primary:#60A5FA;--accent:#14D3B5;--color-primary-hover:#3b82f6;--color-danger-hover:#dc2626;--color-success-hover:#10b981;--color-warning-hover:#d97706;--color-text-on-primary:#0F172A;--chart-series-4:#a78bfa} /* Dark Theme Comprehensive Layout & Card Overrides */ html[data-theme="dark"], [data-theme="dark"] body, [data-theme="dark"] .admin-layout, [data-theme="dark"] .dashboard-shell, [data-theme="dark"] .shell, [data-theme="dark"] .main, [data-theme="dark"] .admin-main, [data-theme="dark"] .content, [data-theme="dark"] .admin-content { background-color: var(--bg, #0F172A) !important; color: var(--text, #F8FAFC) !important; } [data-theme="dark"] .sidebar, [data-theme="dark"] .topbar, [data-theme="dark"] .filter-drawer, [data-theme="dark"] .gw-card, [data-theme="dark"] .c-panel, [data-theme="dark"] .panel, [data-theme="dark"] .form-panel, [data-theme="dark"] .form-card, [data-theme="dark"] .hero-card, [data-theme="dark"] .kpi-card, [data-theme="dark"] .welcome, [data-theme="dark"] .table-wrap, [data-theme="dark"] .table-card, [data-theme="dark"] .modal-panel, [data-theme="dark"] .modal-confirm-box, [data-theme="dark"] .colors-group-card, [data-theme="dark"] .gw-secrets-section, [data-theme="dark"] .email-preview-panel { background-color: var(--surface, #1E293B) !important; border-color: var(--border, #334155) !important; color: var(--text, #F8FAFC) !important; } [data-theme="dark"] .sidebar__header, [data-theme="dark"] .sidebar .nav a, [data-theme="dark"] .sidebar .brand, [data-theme="dark"] .topbar-brand, [data-theme="dark"] .filter-drawer__header, [data-theme="dark"] .gw-title h2, [data-theme="dark"] .panel-head h2, [data-theme="dark"] .section-header h3, [data-theme="dark"] .section-header h2, [data-theme="dark"] label, [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 { color: var(--text, #F8FAFC) !important; } [data-theme="dark"] p, [data-theme="dark"] .hint, [data-theme="dark"] .field-hint, [data-theme="dark"] .text-body-secondary, [data-theme="dark"] .text-caption { color: var(--text2, #CBD5E1) !important; } [data-theme="dark"] .sidebar .nav a:hover, [data-theme="dark"] .sidebar .nav a.active { background-color: rgba(31, 117, 254, 0.18) !important; color: var(--primary, #3b82f6) !important; } [data-theme="dark"] .gw-stats, [data-theme="dark"] .gw-secrets-list .key-row, [data-theme="dark"] .gw-logo, [data-theme="dark"] .key-status-grid, [data-theme="dark"] .filter-pill, [data-theme="dark"] .topbar-search, [data-theme="dark"] .badge-id, [data-theme="dark"] .key-row { background-color: var(--surface2, #334155) !important; border-color: var(--border, #334155) !important; color: var(--text, #F8FAFC) !important; } /* Dark Theme Explicit Overrides for Components & Controls */ [data-theme="dark"] .table-action-btn--secondary, [data-theme="dark"] .media-card-actions .button-secondary { background: var(--surface2) !important; color: var(--text) !important; border-color: var(--border2) !important; } [data-theme="dark"] .table-action-btn--secondary:hover, [data-theme="dark"] .media-card-actions .button-secondary:hover { background: var(--border2) !important; color: #ffffff !important; border-color: var(--text3) !important; } [data-theme="dark"] .table-wrap, [data-theme="dark"] .table-card { background: var(--surface); border-color: var(--border); } [data-theme="dark"] .table-toolbar { background: var(--surface); border-bottom-color: var(--border); } [data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]), [data-theme="dark"] select, [data-theme="dark"] textarea, [data-theme="dark"] .field-control, [data-theme="dark"] .form-control { background: var(--surface2) !important; color: var(--text) !important; border-color: var(--border2) !important; } [data-theme="dark"] select option { background: var(--surface) !important; color: var(--text) !important; } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: var(--text3) !important; } [data-theme="dark"] .badge.active, [data-theme="dark"] .badge--success { background: rgba(16,185,129,0.18) !important; color: #34d399 !important; border: 1px solid rgba(16,185,129,0.35) !important; } [data-theme="dark"] .badge.suspended, [data-theme="dark"] .badge.rejected, [data-theme="dark"] .badge--danger { background: rgba(239,68,68,0.18) !important; color: #f87171 !important; border: 1px solid rgba(239,68,68,0.35) !important; } [data-theme="dark"] .badge.draft, [data-theme="dark"] .badge.pending, [data-theme="dark"] .badge--warning { background: rgba(245,158,11,0.18) !important; color: #fbbf24 !important; border: 1px solid rgba(245,158,11,0.35) !important; } [data-theme="dark"] .c-panel, [data-theme="dark"] .panel, [data-theme="dark"] .form-card, [data-theme="dark"] .hero-card, [data-theme="dark"] .kpi-card, [data-theme="dark"] .welcome { background: var(--surface) !important; border-color: var(--border) !important; color: var(--text) !important; } /* suspended-page-card dark mode: موحّد داخل banner--page dark mode أعلاه */ [data-theme="dark"] .badge-id { background: var(--surface2) !important; color: var(--text2) !important; border-color: var(--border) !important; } [data-theme="dark"] .details-link, [data-theme="dark"] p a:not(.button):not(.primary-button):not(.nav-link) { color: var(--primary, #3b82f6) !important; } [data-theme="dark"] .topbar-search { background: var(--surface2) !important; border-color: var(--border) !important; } [data-theme="dark"] .topbar-search__results { background: var(--surface) !important; border-color: var(--border) !important; box-shadow: 0 16px 40px rgba(0,0,0,0.6) !important; } [data-theme="dark"] .topbar-search__item:hover, [data-theme="dark"] .topbar-search__item.is-active { background: var(--surface2) !important; } [data-theme="dark"] .action-toolbar { background: var(--surface) !important; border-top-color: var(--border) !important; } [data-theme="dark"] .pagination-wrapper { background: var(--surface) !important; border-color: var(--border) !important; } [data-theme="dark"] .pagination-buttons a.secondary { background: var(--surface2) !important; color: var(--text) !important; border-color: var(--border2) !important; } [data-theme="dark"] .pagination-buttons a.secondary:hover { background: var(--border2) !important; color: #ffffff !important; } /* ── Dark Mode Toggle & Topbar Icon Buttons (Shared across Auth, Landing & Control Panel) ── */ #theme-toggle-btn, .notif-bell-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: none !important; box-shadow: none !important; background: transparent !important; color: var(--text2); cursor: pointer; border-radius: var(--radius-sm,0); transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; font-size: 20px; box-sizing: border-box; -webkit-tap-highlight-color: transparent; } #theme-toggle-btn, #theme-toggle-btn:hover, #theme-toggle-btn:focus-visible, .notif-bell-btn, .notif-bell-btn:hover, .notif-bell-btn:focus-visible, [data-theme="dark"] #theme-toggle-btn, [data-theme="dark"] #theme-toggle-btn:hover, [data-theme="dark"] .notif-bell-btn, [data-theme="dark"] .notif-bell-btn:hover { border: none !important; box-shadow: none !important; } #theme-toggle-btn:hover, .notif-bell-btn:hover, .notif-bell-btn[aria-expanded="true"] { background: transparent !important; color: var(--primary, #1F75FE) !important; } #theme-toggle-btn:focus-visible, .notif-bell-btn:focus-visible { outline: 2px solid var(--primary, #1F75FE) !important; outline-offset: 2px !important; } #theme-toggle-btn i, .notif-bell-btn i { font-size: 20px; line-height: 1; } [data-theme="dark"] #theme-toggle-btn, [data-theme="dark"] .notif-bell-btn { background: transparent !important; color: var(--text); } [data-theme="dark"] #theme-toggle-btn:hover, [data-theme="dark"] .notif-bell-btn:hover { background: transparent !important; color: var(--primary, #1F75FE) !important; } /* Auth, Showcase, Landing & Consumer Account Dark Mode Overrides */ [data-theme="dark"] .auth-shell { background: var(--bg) !important; } [data-theme="dark"] .auth-panel { background: var(--surface) !important; color: var(--text) !important; } [data-theme="dark"] .auth-card h1, [data-theme="dark"] .auth-card h2 { color: var(--text) !important; } [data-theme="dark"] .auth-card > p { color: var(--text2) !important; } [data-theme="dark"] .auth-form .field-control, [data-theme="dark"] .auth-form input { background: var(--surface2) !important; color: var(--text) !important; border-color: var(--border2) !important; } [data-theme="dark"] .auth-form .field-control::placeholder { color: var(--text3) !important; } [data-theme="dark"] .auth-link { color: var(--text2) !important; } [data-theme="dark"] .auth-link a { color: var(--primary) !important; } [data-theme="dark"] .auth-brand.mobile-only { color: var(--text) !important; } [data-theme="dark"] .showcase-hero, [data-theme="dark"] .landing-section-white, [data-theme="dark"] .landing-section-gray { background: var(--bg) !important; color: var(--text) !important; } [data-theme="dark"] .showcase-card, [data-theme="dark"] .product-card, [data-theme="dark"] .landing-card, [data-theme="dark"] .landing-testimonial, [data-theme="dark"] .landing-faq-item, [data-theme="dark"] .rawabti-hero-widget, [data-theme="dark"] .topcar-filter-card, [data-theme="dark"] .topcar-details-card, [data-theme="dark"] .topcar-seller-card, [data-theme="dark"] .tc-cat-card, [data-theme="dark"] .tc-stat, [data-theme="dark"] .tc-service-card, [data-theme="dark"] .tc-step, [data-theme="dark"] .tc-about, [data-theme="dark"] .tc-faq-item, [data-theme="dark"] .tc-onboarding-card, [data-theme="dark"] .tc-cat-box, [data-theme="dark"] .tc-adtype-card, [data-theme="dark"] .tc-upload-zone, [data-theme="dark"] .tc-step-item, [data-theme="dark"] .topcar-empty-card, [data-theme="dark"] .tc-join-card, [data-theme="dark"] .pricing-card, [data-theme="dark"] .pricing-card-v2 { background: var(--surface) !important; border-color: var(--border) !important; color: var(--text) !important; } [data-theme="dark"] .rawabti-result-box { background: rgba(31, 117, 254, 0.15) !important; border-color: var(--color-primary-border, rgba(31, 117, 254, 0.4)) !important; color: var(--text) !important; } [data-theme="dark"] .showcase-card h3, [data-theme="dark"] .product-card__body h3, [data-theme="dark"] .landing-faq-q, [data-theme="dark"] .landing-testimonial-text { color: var(--text) !important; } [data-theme="dark"] .showcase-card p, [data-theme="dark"] .product-card__body p, [data-theme="dark"] .landing-faq-a { color: var(--text2) !important; } [data-theme="dark"] .account-shell, [data-theme="dark"] .account-panel, [data-theme="dark"] .account-card, [data-theme="dark"] .order-card { background: var(--surface) !important; border-color: var(--border) !important; color: var(--text) !important; } /* ── Unified Table Action Buttons (مرجع media-card-actions الرسمي) ── */ .table-actions, .media-card-actions { display: inline-flex; align-items: center; gap: 8px !important; flex-wrap: nowrap; } .media-card-actions { gap: 8px !important; padding: 10px 12px !important; } .media-card-actions > div, .media-card-actions .media-card-actions__group { display: flex !important; align-items: center !important; gap: 6px !important; } .table-action-btn, .media-card-actions .button { font-size: var(--text-xs, 12px) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; border-radius: var(--radius-sm,0) !important; cursor: pointer !important; text-decoration: none !important; border: 1px solid transparent !important; font-weight: 600 !important; line-height: 1 !important; white-space: nowrap !important; box-sizing: border-box !important; -webkit-tap-highlight-color: transparent; margin: 0 !important; } /* أزرار الجداول: مربعة 1:1 (أيقونة فقط) */ .table-action-btn { width:40px !important; height:40px !important; min-width:40px !important; min-height:40px !important; padding:0 !important; } /* أزرار بطاقات الوسائط: مستطيلة (أيقونة + نص) */ .media-card-actions .button { height:40px !important; min-height:40px !important; padding:0 10px !important; } @media(max-width: 640px) { .table-actions, .media-card-actions { gap: 6px !important; } .media-card-actions { padding: 8px 10px !important; } .media-card-actions > div, .media-card-actions .media-card-actions__group { gap: 4px !important; } .table-action-btn { width:40px !important; height:40px !important; min-width:40px !important; min-height:40px !important; } .media-card-actions .button { height:40px !important; min-height:40px !important; padding:0 8px !important; gap:4px !important; } } .table-action-btn i, .table-action-btn svg, .media-card-actions .button svg { font-size: 15px; flex-shrink: 0; line-height: 1; } .table-action-btn--secondary, .media-card-actions .button-secondary { background: var(--surface2, var(--color-surface-2, #f8fafc)); color: var(--text2, var(--color-text-subtle, #475569)); border-color: var(--border, var(--color-border, #e2e8f0)); } .table-action-btn--secondary:hover, .media-card-actions .button-secondary:hover { background: var(--border, var(--color-border, #cbd5e1)); color: var(--text, var(--color-text, #0f172a)); border-color: var(--border2, var(--color-border-strong, #94a3b8)); } .table-action-btn--primary { background: var(--primary, var(--color-primary, #1F75FE)) !important; color: #ffffff !important; border-color: var(--primary, var(--color-primary, #1F75FE)) !important; } .table-action-btn--primary:hover { background: var(--primary-dim, var(--color-primary-hover, #1558c9)) !important; border-color: var(--primary-dim, var(--color-primary-hover, #1558c9)) !important; } .table-action-btn--danger, .media-card-actions .button-danger { background: var(--danger, var(--color-danger, #ef4444)) !important; color: #ffffff !important; border-color: var(--danger, var(--color-danger, #ef4444)) !important; } .table-action-btn--danger:hover, .media-card-actions .button-danger:hover { background: var(--color-danger-hover, #dc2626) !important; border-color: var(--color-danger-hover, #dc2626) !important; } .table-action-btn--success, .media-card-actions .button-success { background: var(--success, var(--color-success, #10b981)) !important; color: #ffffff !important; border-color: var(--success, var(--color-success, #10b981)) !important; } .table-action-btn--success:hover, .media-card-actions .button-success:hover { background: var(--color-success-hover, #059669) !important; border-color: var(--color-success-hover, #059669) !important; } .table-action-btn--warning { background: var(--warn, var(--color-warning, #f59e0b)) !important; color: #ffffff !important; border-color: var(--warn, var(--color-warning, #f59e0b)) !important; } .table-action-btn--warning:hover { background: var(--color-warning-hover, #d97706) !important; border-color: var(--color-warning-hover, #d97706) !important; } .table-action-btn:focus-visible, .media-card-actions .button:focus-visible { outline: 2px solid var(--color-primary, #1F75FE) !important; outline-offset: 1px !important; } .table-action-btn:disabled, .table-action-btn[aria-disabled="true"], .media-card-actions .button:disabled { opacity: 0.55 !important; cursor: not-allowed !important; pointer-events: none !important; } .table-action-btn.is-loading i { animation: spin 1s infinite linear; } /* ── Typography System ───────────────────────────────────── */ .text-page-title { font-size: var(--text-2xl); font-weight: var(--font-weight-bold); line-height: var(--leading-tight); color: var(--color-text); } .text-section-title { font-size: var(--text-xl); font-weight: var(--font-weight-semibold); line-height: var(--leading-tight); color: var(--color-text); } .text-card-title { font-size: var(--text-lg); font-weight: var(--font-weight-semibold); line-height: var(--leading-snug); color: var(--color-text); } .text-body { font-size: var(--text-base); font-weight: var(--font-weight-regular); line-height: var(--leading-normal); color: var(--color-text); } .text-body-secondary { font-size: var(--text-sm); font-weight: var(--font-weight-regular); line-height: var(--leading-normal); color: var(--color-text-subtle); } .text-caption { font-size: var(--text-xs); font-weight: var(--font-weight-medium); line-height: var(--leading-normal); color: var(--color-text-muted); } *{box-sizing:border-box;touch-action:manipulation}[hidden]{display:none !important}body{margin:0;background:var(--color-bg);color:var(--color-text);overflow-x:clip;font-family:var(--font-sans);touch-action:manipulation}button,input,select,textarea,option,optgroup,a{font:inherit;font-family:inherit;touch-action:manipulation}select{line-height:normal;padding-top:0;padding-bottom:0;vertical-align:middle} @media(max-width:768px){input:not([type="checkbox"]):not([type="radio"]),select,textarea{font-size:16px !important}} @keyframes spin { 100% { transform: rotate(360deg); } } /* ── OTP Component Styles ── */ .otp-container{display:flex;flex-direction:column;gap:12px;width:100%;align-items:center;margin:12px 0} .otp-slots-wrap{display:flex;gap:8px;justify-content:center;width:100%;max-width:380px;direction:ltr} .otp-slot{width:46px;height:54px;border:2px solid var(--border, var(--color-border, #cbd5e1));border-radius:var(--radius-md,0);background:var(--surface, var(--color-surface, #fff));color:var(--text, var(--color-text, #0f172a));font-size:24px;font-weight:700;text-align:center;line-height:50px;cursor:pointer;transition:all 0.15s ease;user-select:none} .otp-slot--active{border-color:var(--primary, var(--color-primary, #1F75FE));box-shadow:0 0 0 3px rgba(31,117,254,0.15);transform:translateY(-2px)} .otp-slot--filled{border-color:var(--primary, var(--color-primary, #1F75FE));background:var(--surface2, var(--color-surface-2, #f8fafc))} .otp-slot--error{border-color:var(--danger, var(--color-danger, #ef4444));background:var(--color-danger-subtle,#fff5f5);color:var(--danger, var(--color-danger, #ef4444))} .otp-input-hidden{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none} .otp-status-msg{font-size:var(--text-xs, 12px);color:var(--text-secondary, #64748b);text-align:center;margin-top:4px} .otp-status-msg--error{color:var(--danger, #ef4444);font-weight:600} .sidebar-edge-toggle{position:absolute;bottom:calc(var(--bottom-h,64px) - 12px);top:auto;transform:none;inset-inline-end:-12.5px;z-index:calc(var(--z-sidebar) + 1);flex-shrink:0;width:25px;height:25px;border:1px solid var(--border,var(--color-border,#e2e8f0));background:var(--primary,var(--color-primary,#1F75FE));color:var(--color-primary-contrast,#ffffff);cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:50%;box-shadow:var(--shadow-sm,0 1px 3px rgba(0,0,0,0.1));font-size:16px;line-height:1;transition:background 0.15s,color 0.15s,border-color 0.15s,box-shadow 0.15s} .sidebar-edge-toggle:hover{background:var(--primary-dim,var(--color-primary-hover,var(--primary,var(--color-primary,#1F75FE))));color:var(--color-primary-contrast,#ffffff);border-color:var(--primary-dim,var(--color-primary-hover,var(--primary,var(--color-primary,#1F75FE))))} .sidebar-edge-toggle:focus{outline:2px solid var(--primary,var(--color-primary,#1F75FE));outline-offset:2px} .sidebar-edge-toggle:focus-visible{outline:2px solid var(--primary,var(--color-primary,#1F75FE));outline-offset:2px} .sidebar-edge-toggle:active{background:var(--primary,var(--color-primary,#1F75FE));color:var(--color-primary-contrast,#ffffff);border-color:var(--primary,var(--color-primary,#1F75FE));box-shadow:var(--shadow-sm,0 1px 3px rgba(0,0,0,0.1))} .sidebar-edge-toggle i,.sidebar-edge-toggle svg{transition:transform 0.25s cubic-bezier(0.4,0,0.2,1);display:inline-block;line-height:1;pointer-events:none} .sidebar-collapsed .sidebar-edge-toggle i,.sidebar-collapsed .sidebar-edge-toggle svg{transform:rotate(180deg)} /* ── Collapsed filter drawer ─────────────────────────────── */ .filter-collapsed{--filter-drawer-w:56px} @media(min-width:1024px){.filter-collapsed .shell.has-filter-aside{grid-template-columns:var(--sidebar-w) 1fr 56px}.sidebar-collapsed.filter-collapsed .shell.has-filter-aside{grid-template-columns:56px 1fr 56px}} .filter-collapsed .filter-drawer__header span,.filter-collapsed .filter-drawer__body,.filter-collapsed .filter-drawer__bottom,.filter-collapsed .filter-drawer__view-switch{display:none} .filter-collapsed .filter-drawer__header{justify-content:center;padding:0} .filter-collapsed .filter-drawer-edge-toggle i,.filter-collapsed .filter-drawer-edge-toggle svg{transform:rotate(180deg)} /* ── ContentPanel — مكوّن الحاوية الموحّد ────────────────── */ .c-panel,.panel{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden} .form-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:20px} .c-panel--form,.form-panel{padding:20px;display:grid;align-content:start;gap:16px} .c-panel--form h2,.form-panel h2{margin:0 0 4px;font-size:var(--text-base);font-weight:600} .c-panel__head,.panel-head{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--color-border)} .c-panel__section,.section-header{border-bottom:1px solid var(--color-border);padding-bottom:14px;margin-bottom:6px} .c-panel__section h3,.section-header h3{margin:0;font-size:var(--text-lg);color:var(--primary);font-weight:600} .c-panel__section .hint,.section-header .hint{margin:4px 0 0;font-size:var(--text-xs);color:var(--text3)} .c-panel--form label:not(.button):not(.button-primary):not(.primary-button):not(.btn),.form-panel label:not(.button):not(.button-primary):not(.primary-button):not(.btn){display:grid;gap:6px;font-weight:500;font-size:var(--text-sm);color:var(--color-text-subtle)} .c-panel--form input,.c-panel--form select,.form-panel input,.form-panel select,.field-control,.form-control,.field input,.field select{width:100%;height:var(--control-h);padding:0 var(--control-padding-x);border:1px solid var(--color-border-strong);border-radius:var(--control-radius);background:var(--color-surface);color:var(--color-text);font-size:var(--control-font-size);font-family:inherit;line-height:normal;box-sizing:border-box;outline:none} .c-panel--form textarea,.form-panel textarea,.field textarea,.field-control--textarea{width:100%;height:auto;min-height:calc(var(--control-h) * 2.5);padding:10px var(--control-padding-x);border:1px solid var(--color-border-strong);border-radius:var(--control-radius);background:var(--color-surface);color:var(--color-text);font-size:var(--control-font-size);font-family:inherit;line-height:1.5;box-sizing:border-box;outline:none;resize:vertical} .c-panel--form input:focus,.c-panel--form select:focus,.c-panel--form textarea:focus,.form-panel input:focus,.form-panel select:focus,.form-panel textarea:focus,.field-control:focus,.form-control:focus,.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--color-primary);box-shadow:0 0 0 2px var(--color-primary-subtle)} .settings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:20px} .c-panel--compact{padding:12px;gap:12px} .c-panel--full{max-width:none;width:100%} @media(max-width:899px){.c-panel--form,.form-panel{padding:16px}.c-panel--form input,.c-panel--form select,.c-panel--form textarea,.form-panel input,.form-panel select,.form-panel textarea{padding:11px 14px;min-height:44px}} /* ── User Menu ────────────────────────────────────────────── */ .user-menu{position:relative;flex-shrink:0} .user-menu__trigger{display:flex;align-items:center;gap:8px;height:36px;padding:0 10px;border:none;background:transparent;cursor:pointer;color:var(--text);font-size:var(--text-sm);font-weight:500;white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis} .user-menu__trigger:hover{background:transparent} .user-avatar{display:grid;place-items:center;width:26px;height:26px;background:var(--primary);color:#fff;font-size:var(--text-xs);font-weight:700;flex-shrink:0} .user-menu__dropdown{position:absolute;top:calc(100% + 4px);inset-inline-end:0;min-width:200px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-md);z-index:calc(var(--z-overlay) + 10);padding:4px} .user-menu__info{padding:10px 12px} .user-menu__info strong{display:block;font-size:var(--text-sm);color:var(--text);margin-bottom:2px} .user-menu__info span{font-size:var(--text-xs);color:var(--text3)} .user-menu__divider{border:none;border-top:1px solid var(--border);margin:4px 0} .user-menu__item{display:flex;align-items:center;width:100%;padding:8px 12px;border:none;background:none;color:var(--text);font-size:var(--text-sm);text-decoration:none;cursor:pointer;text-align:start;font-family:inherit} .user-menu__item:hover{background:transparent} .user-menu__item--danger{color:var(--danger)} .user-menu__item--danger:hover{background:var(--color-danger-subtle)} .user-menu__form{margin:0} /* ── Settings Layout (shared: admin + tenant + site-identity settings) ── */ .settings-split-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;align-items:start;width:100%;box-sizing:border-box} /* ── بطاقة رقم العميل (TNT-XXXXXXX) في صفحة الإعدادات ── */ .account-number-card{display:flex;align-items:center;gap:14px;padding:16px 18px;background:var(--color-primary-subtle,rgba(31,117,254,.08));border:1px solid var(--color-primary-subtle,rgba(31,117,254,.18));border-radius:var(--radius-md,0)} .account-number-card__icon{font-size:28px;color:var(--primary,var(--color-primary,#1F75FE));flex-shrink:0} .account-number-card__body{display:flex;flex-direction:column;gap:2px;min-width:0} .account-number-card__label{font-size:var(--text-xs,12px);font-weight:500;color:var(--text2,var(--color-text-subtle,#475569))} .account-number-card__value{font-size:var(--text-xl,20px);font-weight:700;color:var(--primary,var(--color-primary,#1F75FE));font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.03em;white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis} .settings-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;align-items:start} .span-full{grid-column:1/-1} @media(max-width:980px){.settings-split-grid{grid-template-columns:1fr !important;gap:16px !important}.settings-split-grid > *{grid-column:1/-1 !important;width:100% !important;min-width:0 !important}.settings-grid{grid-template-columns:1fr !important;gap:12px !important}} @media(max-width:560px){.settings-split-grid{grid-template-columns:1fr !important} /* بطاقة رقم العميل: أصغر على الشاشات الضيقة */ .account-number-card{padding:12px 14px;gap:10px} .account-number-card__icon{font-size:22px} .account-number-card__value{font-size:var(--text-lg,18px)} } .settings-toolbar-slot{display:contents} .settings-toolbar-slot.hidden{display:none} .settings-panel{display:none;animation:settingsFadeIn 0.12s ease} .settings-panel.active{display:block} @keyframes settingsFadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}} /* ── Auth Pages ───────────────────────────────────────────── */ .auth-shell{display:flex;flex-direction:row;min-height:100vh;background:var(--color-bg)} .auth-visual{flex:1;background:var(--theme-primary, var(--color-primary, #1f75fe));color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:clamp(40px, 8vw, 80px);position:relative;overflow:hidden;text-align:center;} .auth-visual::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 25% 15%, rgba(255,255,255,0.14) 0%, transparent 50%), linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(0,0,0,0.18) 100%);pointer-events:none;} .auth-visual::after{content:"";position:absolute;width:340px;height:340px;border-radius:50%;background:rgba(255,255,255,0.10);filter:blur(100px);top:8%;inset-inline-end:8%;pointer-events:none;opacity:0.55;} .auth-visual-header{display:flex;flex-direction:column;align-items:center;gap:16px;z-index:2} .auth-visual-header a{display:flex;flex-direction:column;align-items:center;gap:16px;text-decoration:none;color:inherit;transition:transform 0.2s ease;} .auth-visual-header a:hover{transform:scale(1.02);} .auth-visual-header .brand-logo{height:70px;width:auto;background:transparent;padding:0;flex-shrink:0;} .auth-visual-header .brand-mark{font-size:42px;width:70px;height:70px;display:flex;align-items:center;justify-content:center;background:var(--color-surface);color:var(--theme-primary, var(--color-primary));border-radius:var(--radius-md);box-shadow:var(--shadow-md);font-weight:700;} .auth-visual-header .auth-brand-initial{width:70px;height:70px;font-size:2rem;border-radius:var(--radius-md);} .auth-visual-header h2{font-size:var(--text-3xl);margin:0;font-weight:700;letter-spacing:-0.02em} .auth-visual-footer{font-size:var(--text-sm);opacity:0.9;z-index:2;font-weight:500;position:absolute;bottom:40px;left:0;right:0;} .auth-panel{flex:1;display:flex;flex-direction:column;padding:clamp(28px,6vw,80px);background:var(--color-surface);z-index:10;position:relative;justify-content:center;align-items:center;} .auth-brand.mobile-only{display:none;} .auth-footer.mobile-only{display:none;} .auth-card{max-width:440px;width:100%;margin:auto;} .auth-card h1{font-size:var(--text-3xl);margin:0 0 8px;color:var(--color-text);font-weight:700;line-height:1.3} .auth-card>p{color:var(--color-text-subtle);line-height:1.7;margin:0 0 24px;font-size:var(--text-base)} .auth-form{display:grid;gap:12px;margin-bottom:24px} .auth-form .field-control::placeholder{color:var(--color-text-muted)} /* ── Avatar (مركزي) ───────────────────────────────────────── */ .avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;background:var(--color-surface-2);color:#fff;font-weight:700;line-height:1;user-select:none;vertical-align:middle} .avatar--circle{border-radius:50%} .avatar--square{border-radius:var(--radius-sm)} .avatar--xs{width:20px;height:20px;font-size:9px} .avatar--sm{width:28px;height:28px;font-size:var(--text-xs)} .avatar--md{width:40px;height:40px;font-size:var(--text-sm)} .avatar--lg{width:56px;height:56px;font-size:var(--text-lg)} .avatar--xl{width:80px;height:80px;font-size:var(--text-2xl)} .avatar__img{width:100%;height:100%;object-fit:cover;display:block} .avatar__fallback{display:flex;align-items:center;justify-content:center;width:100%;height:100%} .avatar__fallback--icon svg{width:55%;height:55%} .avatar--c1{background:var(--avatar-color-1)} .avatar--c2{background:var(--avatar-color-2)} .avatar--c3{background:var(--avatar-color-3)} .avatar--c4{background:var(--avatar-color-4)} .avatar--c5{background:var(--avatar-color-5)} .avatar--c6{background:var(--avatar-color-6)} .avatar--c7{background:var(--avatar-color-7)} .avatar--c8{background:var(--avatar-color-8)} .avatar-row{display:inline-flex;align-items:center;gap:12px;min-width:0} .avatar-row>span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-inline-start:0} .avatar-row>img,.avatar-row>.avatar{flex-shrink:0} /* ── KPI Cards (central design system — admin/tenant/consumer) ─────────── */ .kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:16px;margin-bottom:24px} .kpi-card{background:var(--surface);border:1px solid var(--border);padding:18px 20px;display:flex;flex-direction:column;gap:8px;position:relative;overflow:hidden;border-radius:var(--radius-md);transition:border-color .2s,box-shadow .2s} .kpi-card:hover{box-shadow:0 4px 20px rgba(0,0,0,.06);border-color:var(--primary)} .kpi-card::after{content:'';position:absolute;inset-inline-start:0;top:0;bottom:0;width:3px;background:var(--primary)} .kpi-card--accent::after{background:var(--accent)} .kpi-card--warn::after{background:var(--warn)} .kpi-card--danger::after{background:var(--danger)} .kpi-card--success::after{background:var(--success)} .kpi-card--muted::after{background:var(--border2)} .kpi-icon{font-size:20px;margin-bottom:2px;color:var(--primary);width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);background:color-mix(in srgb,var(--primary) 12%,transparent)} .kpi-card--accent .kpi-icon{color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)} .kpi-card--warn .kpi-icon{color:var(--warn);background:color-mix(in srgb,var(--warn) 12%,transparent)} .kpi-card--danger .kpi-icon{color:var(--danger);background:color-mix(in srgb,var(--danger) 12%,transparent)} .kpi-card--success .kpi-icon{color:var(--success);background:color-mix(in srgb,var(--success) 12%,transparent)} .kpi-card--muted .kpi-icon{color:var(--text3);background:var(--surface2)} .kpi-label{font-size:var(--text-xs);color:var(--text3);font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .kpi-value{font-size:var(--text-3xl);font-weight:700;color:var(--text);font-family:var(--font-num);line-height:1.15;letter-spacing:-.02em} .kpi-card__footer{display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-height:18px} .kpi-delta{font-size:.78rem;color:var(--text3);font-weight:600;display:inline-flex;align-items:center;gap:4px} .kpi-delta i{font-size:14px} .kpi-delta.up{color:var(--success)} .kpi-delta.down{color:var(--danger)} .kpi-spark{margin-top:4px;height:28px;width:100%} .kpi-spark-svg{display:block;width:100%;height:28px;overflow:visible} /* ── Onboarding checklist (dashboard) ──────────────────────────────────── */ .onboarding-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px;margin-bottom:24px;box-shadow:0 2px 12px rgba(0,0,0,.04)} .onboarding-card__header{margin-bottom:20px} .onboarding-card__title-row{display:flex;align-items:center;gap:12px;margin-bottom:12px} .onboarding-card__icon{font-size:28px;color:var(--primary);flex-shrink:0} .onboarding-card__title{font-size:var(--text-xl);font-weight:700;margin:0} .onboarding-card__subtitle{font-size:var(--text-sm);color:var(--text3);margin:2px 0 0} .onboarding-card__progress{height:8px;background:var(--surface2);border-radius:var(--radius-full);overflow:hidden} .onboarding-card__progress-bar{height:100%;background:linear-gradient(90deg,var(--primary),var(--accent));border-radius:var(--radius-full);transition:width .4s ease} .onboarding-card__steps{display:flex;flex-direction:column;gap:8px} .onboarding-step{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--border);border-radius:var(--radius-md);text-decoration:none;color:inherit;transition:all .15s;position:relative} .onboarding-step:hover{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 4%,transparent)} .onboarding-step.is-done{opacity:.65} .onboarding-step.is-done .onboarding-step__title{text-decoration:line-through;color:var(--text3)} .onboarding-step__check{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;flex-shrink:0;background:var(--surface2);color:var(--text3)} .onboarding-step:not(.is-done) .onboarding-step__check{background:var(--primary);color:#fff} .onboarding-step.is-done .onboarding-step__check{background:var(--success);color:#fff} .onboarding-step__num{font-size:14px} .onboarding-step__body{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0} .onboarding-step__title{font-size:var(--text-sm);font-weight:700;color:var(--text)} .onboarding-step__desc{font-size:var(--text-xs);color:var(--text3)} .onboarding-step__arrow{font-size:18px;color:var(--text3);flex-shrink:0} /* ── Onboarding ready banner ───────────────────────────────────────────── */ .onboarding-ready{background:linear-gradient(135deg,color-mix(in srgb,var(--success) 12%,transparent),color-mix(in srgb,var(--primary) 8%,transparent));border:1px solid color-mix(in srgb,var(--success) 30%,transparent);border-radius:var(--radius-lg);padding:20px 24px;margin-bottom:24px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap} .onboarding-ready__content{display:flex;align-items:center;gap:14px;min-width:0} .onboarding-ready__icon{font-size:32px;color:var(--success);flex-shrink:0} .onboarding-ready__title{font-size:var(--text-lg);font-weight:700;margin:0} .onboarding-ready__desc{font-size:var(--text-sm);color:var(--text3);margin:4px 0 0} .onboarding-ready__link{color:var(--primary);font-weight:600;text-decoration:none} .onboarding-ready__link:hover{text-decoration:underline} /* ── Dashboard quick actions ───────────────────────────────────────────── */ .dash-quick-actions{margin-bottom:24px} .dash-quick-actions__title{font-size:var(--text-base);font-weight:700;margin:0 0 12px} .dash-quick-actions__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px} .dash-quick-action{display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px 12px;border:1px solid var(--border);border-radius:var(--radius-md);text-decoration:none;color:inherit;text-align:center;transition:all .15s} .dash-quick-action:hover{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 4%,transparent);transform:translateY(-2px)} .dash-quick-action__icon{font-size:24px;color:var(--primary)} .dash-quick-action__label{font-size:var(--text-sm);font-weight:600;color:var(--text)} /* ── Store URL card (dashboard) ────────────────────────────────────────── */ .store-url-card{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:16px 20px;margin-bottom:24px} .store-url-card__content{display:flex;align-items:center;gap:12px;min-width:0;flex:1} .store-url-card__icon{font-size:24px;color:var(--primary);flex-shrink:0} .store-url-card__body{display:flex;flex-direction:column;gap:2px;min-width:0} .store-url-card__label{font-size:var(--text-xs);color:var(--text3);font-weight:600} .store-url-card__url{font-size:var(--text-sm);color:var(--primary);font-weight:600;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .store-url-card__url:hover{text-decoration:underline} .store-url-card__actions{display:flex;gap:8px;flex-shrink:0} /* ── Onboarding + quick actions mobile responsive ──────────────────────── */ @media(max-width:640px){ .onboarding-card{padding:16px} .onboarding-card__title-row{flex-direction:column;align-items:flex-start;gap:8px} .onboarding-card__icon{font-size:24px} .onboarding-card__title{font-size:var(--text-base)} .onboarding-step{padding:10px 12px;gap:10px} .onboarding-step__check{width:28px;height:28px;font-size:14px} .onboarding-step__title{font-size:var(--text-xs)} .onboarding-step__desc{font-size:var(--text-xs)} .onboarding-ready{flex-direction:column;align-items:flex-start;gap:12px;padding:16px} .onboarding-ready__icon{font-size:24px} .dash-quick-actions__grid{grid-template-columns:repeat(3,1fr);gap:8px} .dash-quick-action{padding:12px 8px;gap:6px} .dash-quick-action__icon{font-size:20px} .dash-quick-action__label{font-size:var(--text-xs)} .store-url-card{flex-direction:column;align-items:flex-start;gap:12px} .store-url-card__actions{width:100%;justify-content:flex-end} } /* ── Chart panels (smooth wave line charts) ────────────────────────────── */ .chart-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(380px,100%),1fr));gap:16px;margin-bottom:24px} .chart-panel{min-width:0} .chart-body{padding:16px;min-height:220px;display:grid;align-items:center} .smooth-line-chart{display:block;width:100%;height:200px;overflow:visible} .smooth-line-chart line{stroke:var(--border2);stroke-width:.4} .smooth-line-chart text{font-size:3px;fill:var(--text3);font-family:var(--font-num)} .chart-point{opacity:0;transition:opacity .12s,r .12s;cursor:pointer} .smooth-line-chart:hover .chart-point,.chart-point:hover{opacity:1} .chart-point:hover{r:2.6} .chart-footer{display:flex;flex-wrap:wrap;gap:10px;padding:0 16px 16px;color:var(--text2);font-size:.8rem} .chart-footer span{display:inline-flex;align-items:center;gap:6px} .chart-footer i{width:10px;height:10px;display:inline-block;border-radius:2px} /* ── Bar breakdowns (replaces tables for categorical data) ─────────────── */ .analytics-bars{display:grid;gap:10px;align-self:stretch} .analytics-bar-row{display:grid;grid-template-columns:minmax(90px,1fr) minmax(120px,2fr) auto;align-items:center;gap:10px;min-width:0} .analytics-bar-row span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text2);font-size:.82rem} .analytics-bar-row div{height:9px;background:var(--surface2);border:1px solid var(--border);overflow:hidden;border-radius:4px} .analytics-bar-row b{display:block;height:100%;background:var(--primary);border-radius:3px;transition:width .3s} .analytics-bar-row strong{font-family:var(--font-num);font-size:.82rem;white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis} /* ── Analytics section (dashboard — central, no inline styles) ─────────── */ .analytics-section{display:grid;gap:var(--space-4);margin-top:var(--space-6)} .analytics-section__title{font-size:var(--text-md);font-weight:700;display:flex;align-items:center;gap:8px;margin:0} .analytics-section__title i{color:var(--primary)} .analytics-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)} .analytics-bar-label{display:inline-flex;align-items:center;gap:6px;font-size:var(--text-sm);font-weight:600;color:var(--text);white-space:nowrap} .analytics-bar-label i{color:var(--primary)} .analytics-bar-track{height:8px;border-radius:999px;background:var(--surface2);overflow:hidden} .analytics-bar-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--primary),color-mix(in srgb,var(--primary) 70%,#a855f7));transition:width .6s ease} .analytics-bar-value{text-align:end;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums} .analytics-publish-rate{display:flex;align-items:center;gap:10px;margin-top:16px;padding-top:16px;border-top:1px solid var(--border);flex-wrap:wrap} .analytics-rate-bar{flex:1;min-width:100px;height:8px;border-radius:999px;background:var(--surface2);overflow:hidden} .analytics-rate-fill{height:100%;border-radius:999px;background:var(--success)} .analytics-top-list{display:flex;flex-direction:column;gap:8px} /* ── Top Viewed Card Grid (mobile-first — image + name + views) ────────── */ .top-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} .top-card{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;text-decoration:none;color:inherit;transition:border-color .2s,box-shadow .2s,transform .2s} .top-card:hover{border-color:var(--primary);box-shadow:0 4px 16px rgba(0,0,0,.08);transform:translateY(-2px)} .top-card__rank{position:absolute;inset-block-start:8px;inset-inline-start:8px;z-index:2;display:flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 6px;border-radius:999px;background:rgba(0,0,0,.55);color:#fff;font-weight:800;font-size:var(--text-xs);font-family:var(--font-num);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)} .top-card__img{display:block;width:100%;aspect-ratio:1;object-fit:cover;background:var(--surface2);border-bottom:1px solid var(--border)} .top-card__img--placeholder{display:flex;align-items:center;justify-content:center;color:var(--text3);font-size:2rem} .top-card__body{display:flex;flex-direction:column;gap:4px;padding:10px 12px 12px;min-width:0} .top-card__name{font-size:var(--text-sm);font-weight:600;color:var(--text);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em;word-break:break-word} .top-card__views{display:inline-flex;align-items:center;gap:4px;font-size:var(--text-xs);font-weight:600;color:var(--text3);font-variant-numeric:tabular-nums} .top-card__views i{font-size:14px;color:var(--primary)} /* ── Top Viewed Thumbnail List (compact — small image + name + views) ──── */ .top-thumb-grid{display:flex;flex-direction:column;gap:8px} .top-thumb{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);text-decoration:none;color:inherit;transition:border-color .15s,background .15s} .top-thumb:hover{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 3%,transparent)} .top-thumb__img{width:40px;height:40px;flex-shrink:0;object-fit:cover;border-radius:var(--radius-sm);background:var(--surface2);border:1px solid var(--border)} .top-thumb__img--placeholder{display:flex;align-items:center;justify-content:center;color:var(--text3);font-size:18px} .top-thumb__body{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;position:relative} .top-thumb__rank{font-size:var(--text-xs);font-weight:800;color:var(--primary);font-family:var(--font-num)} .top-thumb__name{font-size:var(--text-sm);font-weight:600;color:var(--text);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .top-thumb__views{display:inline-flex;align-items:center;gap:4px;font-size:var(--text-xs);color:var(--text3);font-variant-numeric:tabular-nums} .top-thumb__views i{font-size:12px;color:var(--primary)} /* ── Progress Bars without rounded corners (sharp edges) ───────────────── */ .analytics-rate-bar--sharp{border-radius:0!important} .analytics-rate-fill--sharp{border-radius:0!important} .analytics-bar-row--sharp div{border-radius:0!important} .analytics-bar-row--sharp b{border-radius:0!important} @media(min-width:480px){.top-card-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}} @media(min-width:768px){.top-card-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}} @media(min-width:1024px){.top-card-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}} @media(min-width:1280px){.top-card-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:18px}} @media(max-width:768px){ .analytics-grid{grid-template-columns:1fr} .analytics-bar-row{grid-template-columns:110px 1fr 32px;gap:8px} } /* ── Color picker system (shared: admin /sites/site + tenant /app/branding) ── */ .colors-section-layout{display:grid;grid-template-columns:1.2fr 0.8fr;gap:24px;align-items:start} .colors-inputs-column{display:flex;flex-direction:column;gap:16px} .colors-group-card{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:16px} .colors-group-title{font-size:var(--text-xs);font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:.5px;margin:0 0 12px;border-bottom:1px solid var(--border);padding-bottom:6px} .colors-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px} .color-field{display:flex;flex-direction:column;gap:4px} .color-field label{font-size:var(--text-xs)!important;font-weight:500;color:var(--text2);margin-bottom:2px} .color-picker-input{width:100%;height:44px;padding:0;margin:0;border:1px solid var(--border);border-radius:0;cursor:pointer;flex-shrink:0;background:transparent;-webkit-appearance:none;appearance:none} .color-picker-input::-webkit-color-swatch-wrapper{padding:0;margin:0;border:none} .color-picker-input::-webkit-color-swatch{border:none;border-radius:0;width:100%;height:100%} .color-picker-input::-moz-color-swatch{border:none;border-radius:0;width:100%;height:100%} .color-picker-input::-moz-focus-inner{border:none;padding:0} .color-text-input{width:100%;height:32px!important;padding:0 10px!important;font-size:var(--text-xs)!important;font-family:'Courier New',monospace;font-weight:600;letter-spacing:.5px;border:1px solid var(--border)!important;border-top:none!important;border-radius:0!important;background:var(--surface)!important;box-shadow:none!important;text-align:center;text-transform:uppercase;color:var(--text)!important;outline:none;cursor:copy;transition:border-color .15s,background .15s} .color-text-input:focus{border-color:var(--primary)!important} .color-text-input.copied{background:var(--success)!important;color:#fff!important} .color-field__reset{position:absolute;inset-inline-end:4px;top:4px;background:var(--surface);border:1px solid var(--border);border-radius:4px;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text3);font-size:12px;padding:0;transition:color .15s,border-color .15s} .color-field__reset:hover{color:var(--danger);border-color:var(--danger)} .color-field{position:relative} /* Live preview panel (shared) */ .live-preview-panel{position:sticky;top:24px;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:16px;box-shadow:var(--shadow-sm)} /* Visual assets row (logo/favicon/font — shared) */ .visual-assets-row{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .visual-asset-card{display:flex;flex-direction:column;gap:8px;background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:16px} .visual-asset-card h4{margin:0;font-size:var(--text-sm);font-weight:600;color:var(--text)} .visual-asset-card .hint{margin:0 0 4px;font-size:var(--text-xs);color:var(--text3)} /* Branding badges (tenant inheritance status) */ .branding-badge{font-size:11px;padding:2px 8px;border-radius:6px;font-weight:600;display:inline-flex;align-items:center;gap:4px} .branding-badge--inherit{background:color-mix(in srgb,var(--primary) 10%,transparent);color:var(--primary)} .branding-badge--custom{background:color-mix(in srgb,var(--success) 12%,transparent);color:var(--success)} .branding-color-default{font-size:11px;color:var(--text3);font-family:monospace} /* Branding preview (tenant — live storefront mockup) */ .branding-preview{border-radius:var(--radius-md);padding:20px;margin-top:12px} .branding-preview-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:16px;border-bottom:1px solid var(--pv-border);margin-bottom:16px} .branding-preview-hero{text-align:center;padding:24px 0} .branding-preview-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px} @media(max-width:991px){ .colors-section-layout{grid-template-columns:1fr} .visual-assets-row{grid-template-columns:repeat(2,1fr)} } @media(max-width:600px){ .visual-assets-row{grid-template-columns:1fr} .branding-preview-cards{grid-template-columns:1fr} } /* ── Google services subheadings (admin /sites/site) ──────────────────── */ .google-service-group{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:16px} .google-service-title{font-size:var(--text-sm);font-weight:600;color:var(--text);margin:0 0 10px;display:flex;align-items:center;gap:6px} /* ── Email preview styling (admin /sites/site) ────────────────────────── */ .site-settings-form .email-preview-panel{background:var(--bg)} .site-settings-form .email-preview-toolbar{background:var(--surface);border-bottom:1px solid var(--border);padding:12px 16px} .site-settings-form .email-preview-toolbar button{background:var(--surface2);border:1px solid var(--border);color:var(--text2);border-radius:6px;font-weight:500} .site-settings-form .email-preview-toolbar button.active, .site-settings-form .email-preview-toolbar button:hover{background:var(--primary);color:#fff;border-color:var(--primary)} /* ── List panel (compact list replaces data tables) ────────────────────── */ .list-panel__body{display:flex;flex-direction:column} .list-panel__row{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border);min-width:0} .list-panel__row:last-child{border-bottom:0} .list-panel__icon{font-size:20px;color:var(--primary);flex-shrink:0;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);background:color-mix(in srgb,var(--primary) 10%,transparent)} .list-panel__content{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px} .list-panel__title{font-size:var(--text-sm);font-weight:600;color:var(--text);text-decoration:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .list-panel__title:hover{color:var(--primary)} .list-panel__sub{font-size:var(--text-xs);color:var(--text3);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* ── Responsive ────────────────────────────────────────────────────────── */ @media(max-width:640px){ .kpi-row{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important} .kpi-card{padding:12px 14px!important;gap:6px!important} .kpi-value{font-size:1.4rem!important;line-height:1.2!important} .kpi-icon{width:26px;height:26px;font-size:15px} .kpi-label{font-size:.72rem!important} .kpi-spark{height:22px} .chart-grid{grid-template-columns:1fr!important;gap:12px!important} .chart-body{min-height:180px;padding:12px} } /* ── Amount display ───────────────────────────────────────── */ .amount{font-family:var(--font-num);font-weight:600;font-variant-numeric:tabular-nums} /* ── Account Restriction Read-Only Banner ───────────────── */ .account-restriction-banner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 20px;margin-bottom:20px;border-radius:var(--radius-md,0);background:var(--color-amber-subtle,#fffbe5);border:1px solid var(--color-amber,#f59e0b);color:var(--text);font-size:var(--text-sm)} .account-restriction-banner--suspended{background:var(--color-danger-subtle,rgba(239,68,68,0.1));border-color:var(--danger,#ef4444)} .account-restriction-banner__content{display:flex;align-items:center;gap:12px;flex:1;min-width:0} .account-restriction-banner__icon{font-size:22px;flex-shrink:0;color:var(--color-amber,#d97706)} .account-restriction-banner--suspended .account-restriction-banner__icon{color:var(--danger,#ef4444)} .account-restriction-banner strong{display:block;font-weight:600;margin-bottom:2px;font-size:var(--text-base)} .account-restriction-banner p{margin:0;color:var(--text2);font-size:var(--text-xs);line-height:1.4} .account-restriction-banner__btn{flex-shrink:0;white-space:nowrap;text-decoration:none!important} .is-disabled-readonly{opacity:0.6!important;cursor:not-allowed!important;pointer-events:auto!important} @media(max-width:640px){.account-restriction-banner{flex-direction:column;align-items:stretch}.account-restriction-banner__btn{width:100%;text-align:center}} /* ── Banner System (النظام الموحّد الوحيد لكل التنبيهات/البطاقات) ── */ /* المصدر: packages/ui/src/views/banners.view.js — لا inline styles في أي مكان آخر */ /* notice + form-error + success-message = aliases لـ banner (توافق خلفي) */ .banner,.notice,.form-error,.success-message{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface);margin-bottom:16px;flex-wrap:wrap;font-size:var(--text-sm);line-height:1.6} .banner--info,.notice--info,.notice.info{background:var(--color-primary-subtle,rgba(31,117,254,.08));border-color:var(--color-primary-border,rgba(31,117,254,.3));color:var(--color-primary,var(--primary))} .banner--success,.notice--success,.notice.success,.success-message{background:var(--color-success-subtle,#e6f9ee);border-color:var(--color-success-border,#abf5d1);color:var(--color-success,var(--success))} .banner--warning,.notice--warning,.notice.warning{background:var(--color-warning-subtle,#fffbeb);border-color:var(--color-warning-border,#fde68a);color:var(--color-warning,var(--warn))} .banner--danger,.notice--danger,.notice--error,.notice.error,.form-error{background:var(--color-danger-subtle,#fef2f2);border-color:var(--color-danger-border,#ffbdad);color:var(--color-danger,var(--danger))} .banner__icon{flex-shrink:0;font-size:22px;display:flex;align-items:center;justify-content:center} .banner__content{flex:1;min-width:0} .banner__title{font-weight:700;font-size:var(--text-sm);margin:0 0 4px;display:block} .banner__desc{font-size:var(--text-xs);margin:0;line-height:1.5;opacity:.9} .banner__actions{display:flex;gap:8px;flex-shrink:0;flex-wrap:wrap;align-items:center} .banner__btn{flex-shrink:0;white-space:nowrap;text-decoration:none!important} /* variant aliases — notice بدون modifier = success (توافق خلفي) */ .notice:not(.notice--info):not(.notice--success):not(.notice--warning):not(.notice--danger):not(.notice--error):not(.notice--flush):not(.notice--lg):not(.notice--wide):not(.info):not(.success):not(.error){background:var(--color-success-subtle,#e6f9ee);border-color:var(--color-success-border,#abf5d1);color:var(--color-success,var(--success))} /* modifiers قديمة — توافق خلفي */ .notice--flush{margin-bottom:0} .notice--lg{margin-bottom:24px} .notice--wide{margin:0 auto 24px} /* بانر شامل (full-width في أعلى الصفحة) */ .banner--full{margin:0 0 24px 0;border-radius:0;border-inline:0;border-top:0} /* صفحة كاملة (full-page مثل suspended-page) */ .banner--page{max-width:680px;margin:48px auto;text-align:center;flex-direction:column;align-items:center;padding:44px 32px;box-shadow:0 10px 30px rgba(0,0,0,.05)} .banner--page .banner__icon{width:72px;height:72px;border-radius:50%;background:var(--color-danger-subtle,rgba(220,38,38,.1));font-size:36px} .banner--page .banner__title{font-size:22px;font-weight:800;margin:0 0 12px} .banner--page .banner__desc{font-size:15px;line-height:1.6;max-width:520px;margin-inline:auto} .banner--page .banner__actions{justify-content:center} /* Dark mode — ظلال أغمق + box-shadow أقوى */ [data-theme="dark"] .banner--page,[data-theme="dark"] .banner--full{box-shadow:0 10px 30px rgba(0,0,0,.5)} [data-theme="dark"] .banner--page .banner__icon{background:rgba(239,68,68,.18)} /* Responsive — mobile optimizations */ @media(max-width:640px){.banner,.notice,.form-error,.success-message{flex-direction:column;align-items:stretch;padding:10px 14px;gap:10px}.banner__actions{width:100%}.banner__btn{width:100%;text-align:center}.banner--page{margin:24px auto;padding:32px 20px}.banner--page .banner__icon{width:56px;height:56px;font-size:28px}.banner--page .banner__title{font-size:18px}.banner--page .banner__desc{font-size:14px}} @media(max-width:380px){.banner,.notice,.form-error,.success-message{padding:8px 12px;font-size:var(--text-xs)}.banner--page{padding:24px 16px;margin:16px auto}} /* ── PWA Install Banner (sticky سفلي — ستايل مركزي موحّد) ── */ /* يُحقن client-side فقط من app-pwa.js عند توفر beforeinstallprompt أو iOS. يستخدم نفس CSS variables المركزية — لا ألوان hardcoded. */ .pwa-install-banner{position:fixed;inset-block-end:0;inset-inline:0;z-index:var(--z-overlay,999);background:var(--surface,#fff);border-block-start:1px solid var(--border,#e2e8f0);box-shadow:0 -4px 16px rgba(15,23,42,.08);padding:12px clamp(12px,4vw,20px);display:none;align-items:center;gap:12px;animation:pwa-banner-slide-up .3s ease-out} .pwa-install-banner[hidden]{display:none} .pwa-install-banner:not([hidden]){display:flex} .pwa-install-banner__icon{flex-shrink:0;width:40px;height:40px;border-radius:var(--radius-full,9999px);background:var(--primary-ghost,rgba(31,117,254,.10));color:var(--primary,var(--color-primary));display:flex;align-items:center;justify-content:center;font-size:22px} .pwa-install-banner__content{flex:1;min-width:0} .pwa-install-banner__title{display:block;font-weight:700;font-size:var(--text-sm);color:var(--text);margin:0 0 2px} .pwa-install-banner__desc{display:block;font-size:var(--text-xs);color:var(--text2,#475569);margin:0;line-height:1.5} .pwa-install-banner__actions{display:flex;gap:8px;flex-shrink:0;align-items:center} .pwa-install-banner__btn{white-space:nowrap} @keyframes pwa-banner-slide-up{from{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}} /* Mobile — يأخذ عرض كامل + الأزرار تأخذ عرض كامل */ @media(max-width:640px){.pwa-install-banner{flex-wrap:wrap}.pwa-install-banner__actions{width:100%;justify-content:stretch}.pwa-install-banner__btn{flex:1;text-align:center}} /* Dark mode — ظل أغمق */ [data-theme="dark"] .pwa-install-banner,[data-theme="dark"]:not([data-theme="light"]) .pwa-install-banner{background:var(--surface,#1e293b);border-block-start-color:var(--border,#334155);box-shadow:0 -4px 16px rgba(0,0,0,.4)} /* احترام bottom-nav على الموبايل — يرتفع فوقه */ .ui-layout--has-bottom-nav .pwa-install-banner{inset-block-end:var(--bottom-h,64px)} /* ── Billing Hero Card (Widget — بطاقة حالة الاشتراك، ليست تنبيه) ── */ .billing-hero-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px;margin-bottom:28px;box-shadow:var(--shadow-sm);position:relative} .billing-hero__header{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:16px;margin-bottom:16px;border-bottom:1px solid var(--border);padding-bottom:16px} .billing-hero__identity{display:flex;align-items:center;gap:14px} .billing-hero__platform{margin-bottom:8px;display:inline-block} .billing-hero__sep{margin:0 8px;opacity:.5} .billing-hero__public-id{font-family:inherit;background:var(--primary-ghost,rgba(31,117,254,.08));color:var(--primary,var(--color-primary));font-weight:700;padding:3px 8px;border-radius:var(--radius-sm);font-size:.85em;border:1px solid var(--border);display:inline-block} .billing-hero__title{margin:0 0 4px;font-size:var(--text-xl);font-weight:700;color:var(--text)} .billing-hero__subtitle{margin:0;font-size:var(--text-sm);color:var(--text2)} .billing-hero__status{display:flex;flex-direction:column;align-items:flex-end;gap:6px} .billing-hero__badge{font-size:var(--text-xs);padding:4px 10px;font-weight:700} .billing-hero__plan{font-size:var(--text-lg);color:var(--text);font-weight:800} .billing-hero__metrics{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px} .billing-hero__metrics-row{display:flex;gap:24px;flex-wrap:wrap} .billing-hero__metric{display:block} .billing-hero__metric-label{display:block;font-size:var(--text-xs);color:var(--text2)} .billing-hero__metric-value{font-size:var(--text-sm);font-weight:700} .billing-hero__metric-value--accent{color:var(--primary,var(--color-primary))} .billing-hero__action-wrap{display:flex;align-items:center} .billing-hero__action{text-decoration:none;font-size:var(--text-xs);display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px} .billing-hero__cancel-notice{margin-top:12px;font-size:var(--text-xs);color:var(--warn,var(--color-warning));font-weight:600} /* ── Suspended Page Card: موحّد داخل banner--page أعلاه (dead code removed) ── */ /* ── Data Table Form Controls — توحيد ستايل الحقول داخل الجداول ── */ /* يطبق نفس ستايل field-control على أي input/select/textarea داخل .data-table حتى لو لم يحمل class="field-control" صراحةً (defensive fallback). أنماط الجداول الأساسية في table.styles.js — هنا فقط الـrefinements الإضافية. */ .data-table input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), .data-table select, .data-table textarea{ height:var(--control-h); padding:0 var(--control-padding-x); border-radius:var(--control-radius); font-size:var(--control-font-size); line-height:normal; } .data-table textarea{ height:auto; min-height:calc(var(--control-h) * 2.5); padding:10px var(--control-padding-x); line-height:1.5; resize:vertical; } .data-table input:focus, .data-table select:focus, .data-table textarea:focus{ border-color:var(--color-primary); box-shadow:0 0 0 2px var(--color-primary-subtle); } /* ── Form Field — ستايل مركزي للحقول داخل .form-field ────────── */ /* يطبق نفس ستايل field-control على input/select/textarea داخل .form-field حتى لو لم يحمل class="field-control" صراحةً. */ .form-field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px} .form-field > .label{font-size:var(--text-sm);font-weight:600;color:var(--color-text-subtle);user-select:none} .form-field input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), .form-field select, .form-field textarea{ width:100%; height:var(--control-h); padding:0 var(--control-padding-x); border:1px solid var(--color-border-strong); border-radius:var(--control-radius); background:var(--color-surface); color:var(--color-text); font-size:var(--control-font-size); font-family:inherit; line-height:normal; box-sizing:border-box; outline:none; transition:border-color 0.2s ease,box-shadow 0.2s ease; } .form-field textarea{ height:auto; min-height:calc(var(--control-h) * 2.5); padding:10px var(--control-padding-x); line-height:1.5; resize:vertical; } .form-field input:focus, .form-field select:focus, .form-field textarea:focus{ border-color:var(--color-primary); box-shadow:0 0 0 2px var(--color-primary-subtle); } .form-field input::placeholder, .form-field textarea::placeholder{color:var(--color-text-muted)} [data-theme="dark"] .form-field input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), [data-theme="dark"] .form-field select, [data-theme="dark"] .form-field textarea{ background:var(--surface2); color:var(--text); border-color:var(--border2); } /* ── Unified Page Container System ────────────────────────── */ .ui-page{ max-width:var(--page-width,1200px); margin:0 auto; padding:0 var(--space-page); width:100%; box-sizing:border-box; } .ui-page--narrow{--page-width:680px} .ui-page--medium{--page-width:900px} .ui-page--wide{--page-width:1200px} .ui-page--prose{--page-width:760px} /* ── Prose (legal/text pages) ── */ .ui-prose{font-size:var(--text-md,1rem);line-height:1.9;color:var(--color-text,var(--text,#1e293b))} .ui-prose h1{font-size:clamp(1.5rem,4vw,2rem);font-weight:800;margin:0 0 var(--space-5,20px);color:var(--color-text,var(--text));line-height:1.3} .ui-prose h2{font-size:var(--text-lg,1.125rem);font-weight:700;margin:var(--space-6,24px) 0 var(--space-3,12px);color:var(--color-text,var(--text));padding-bottom:8px;border-bottom:1px solid var(--color-border,var(--border,#e2e8f0))} .ui-prose h3{font-size:var(--text-md,1rem);font-weight:700;margin:var(--space-5,20px) 0 var(--space-2,8px);color:var(--color-text,var(--text))} .ui-prose p{margin:0 0 var(--space-4,16px);line-height:1.85} .ui-prose a{color:var(--color-primary,var(--primary,#1f75fe));text-decoration:underline} .ui-prose a:hover{text-decoration:none;opacity:0.8} .ui-prose ul,.ui-prose ol{margin:0 0 var(--space-4,16px);padding-inline-start:var(--space-5,20px)} .ui-prose li{margin-bottom:var(--space-2,8px);line-height:1.8} .ui-prose strong{font-weight:700;color:var(--color-text,var(--text))} /* ── Dashboard Shell ──────────────────────────────────────── */ @media(min-width:1024px){.dashboard-shell,.shell{display:grid;grid-template-columns:var(--sidebar-w) 1fr;grid-template-rows:1fr;min-height:100vh}.dashboard-shell.has-filter-aside,.shell.has-filter-aside{grid-template-columns:var(--sidebar-w) 1fr var(--filter-drawer-w,288px)}}@media(min-width:769px) and (max-width:1023px){.dashboard-shell,.shell{display:grid;grid-template-columns:var(--sidebar-w) 1fr;grid-template-rows:1fr;min-height:100vh}}@media(max-width:768px){.dashboard-shell,.shell{min-height:100vh}} .sidebar{position:fixed;inset-inline-start:0;top:0;bottom:0;width:var(--sidebar-w);background:var(--surface);border-inline-end:1px solid var(--border);display:flex;flex-direction:column;overflow:visible;z-index:var(--z-sidebar)} .nav{overflow-y:auto} .sidebar__header{height:64px;padding:0 8px;border-bottom:1px solid var(--border,var(--color-border,#e2e8f0));display:flex;align-items:center;flex-shrink:0;box-sizing:border-box} .brand{display:flex;align-items:center;gap:10px;width:100%;padding:6px !important;box-sizing:border-box} .brand-mark{display:grid;width:28px;height:28px;place-items:center;background:var(--primary,var(--color-primary,#1F75FE));color:#fff;font-weight:700;font-size:var(--text-xs,12px);border-radius:var(--radius-sm,0);flex-shrink:0;box-sizing:border-box} .brand-logo{width:28px;height:28px;object-fit:contain;border-radius:var(--radius-sm,0);flex-shrink:0;display:block} .brand-logo--default{width:28px;height:28px} .brand-logo--svg{background:transparent;padding:0;box-sizing:border-box} [data-theme="dark"] .brand-logo--svg{background:transparent} .brand-name{color:var(--text);font-weight:600;font-size:var(--text-base);transition:opacity 0.15s} .nav{padding:8px;display:flex;flex-direction:column;gap:2px;flex:1;overflow-y:auto} .nav a{display:flex;align-items:center;gap:10px;min-height:38px;padding:0 12px;color:var(--text2);text-decoration:none;font-size:var(--text-sm);border-radius:var(--radius-sm,0);position:relative} .nav a:hover{background:var(--primary-ghost);color:var(--primary)} .nav a[aria-current="page"]{background:var(--primary-ghost);color:var(--primary);font-weight:600} .nav-label{flex:1} .nav-icon{font-size:16px;flex-shrink:0;opacity:.75;display:inline-flex;align-items:center;vertical-align:middle;color:var(--primary,var(--color-primary,#1F75FE));font-weight:400} .nav a:hover .nav-icon,.nav a[aria-current="page"] .nav-icon{opacity:.75} /* ── Nav Accordion Groups (قوائم قابلة للطي) ──────────────────────────────── */ .nav-group{display:flex;flex-direction:column;flex-shrink:0} .nav-group-header{display:flex;align-items:center;gap:10px;width:100%;min-height:38px;padding:0 12px;border:0;background:transparent;color:var(--text2);font:inherit;font-size:var(--text-sm);font-weight:600;text-align:start;cursor:pointer;border-radius:var(--radius-sm,0);transition:background .15s,color .15s;position:relative} .nav-group-header:hover{background:var(--surface2);color:var(--text)} .nav-group-header .nav-icon{font-size:16px;opacity:.7} .nav-group-header:hover .nav-icon{opacity:.85} .nav-group-caret{font-size:18px;flex-shrink:0;margin-inline-start:auto;color:var(--text3);transition:transform .2s ease;opacity:.6} .nav-group[aria-expanded="true"] .nav-group-caret{transform:rotate(180deg)} .nav-group-items{display:flex;flex-direction:column;gap:1px;overflow:hidden;max-height:0;transition:max-height .25s ease;padding-top:0;padding-bottom:0} .nav-group[aria-expanded="true"] .nav-group-items{max-height:600px;padding-top:2px;padding-bottom:2px} .nav-group-items .nav-link{display:flex;align-items:center;gap:10px;min-height:36px;padding:0 12px 0 32px;color:var(--text2);text-decoration:none;font-size:var(--text-sm);border-radius:var(--radius-sm,0);position:relative;transition:background .15s,color .15s} .nav-group-items .nav-link:hover{background:var(--primary-ghost);color:var(--primary)} .nav-group-items .nav-link[aria-current="page"]{background:var(--primary-ghost);color:var(--primary);font-weight:600} .nav-group-items .nav-link .nav-icon{font-size:15px;opacity:.65} .nav-group-items .nav-link:hover .nav-icon,.nav-group-items .nav-link[aria-current="page"] .nav-icon{opacity:.85} /* الموبايل: عناصر الـaccordion أكبر للمس */ @media(max-width:768px){ .nav-group-header{min-height:48px;padding-inline:16px;font-size:var(--text-base,14px)} .nav-group-items .nav-link{min-height:44px;padding-inline-start:40px;font-size:var(--text-base,14px)} } .nav a.nav-item--trash,.nav--trash a{color:var(--danger,var(--color-danger));} .nav a.nav-item--trash:hover,.nav a.nav-item--trash:focus,.nav--trash a:hover,.nav--trash a:focus{background:var(--color-danger-subtle,rgba(239,68,68,.12))!important;color:var(--danger,var(--color-danger))} .nav a.nav-item--trash[aria-current="page"],.nav--trash a[aria-current="page"]{background:var(--color-danger-subtle,rgba(239,68,68,.12))!important;color:var(--danger,var(--color-danger));font-weight:600} /* ── "معاينة المعرض" nav link — opens public store in new tab ── */ .nav a.nav-item--preview{color:var(--success,#10b981);font-weight:600} .nav a.nav-item--preview:hover{background:color-mix(in srgb,var(--success,#10b981) 10%,transparent)!important;color:var(--success,#10b981)} .nav a.nav-item--preview .nav-icon{color:var(--success,#10b981);opacity:.9} @media(min-width:769px){.main{margin-inline-start:0;grid-column:2;grid-row:1;min-width:0;display:flex;flex-direction:column;min-height:100vh;transition:none}}@media(max-width:768px){.main{margin-inline-start:0;min-width:0;display:flex;flex-direction:column;min-height:100vh}} /* ── Topbar ───────────────────────────────────────────────── */ .topbar{position:sticky;top:0;z-index:calc(var(--z-sidebar) - 1);height:var(--topbar-h);display:flex;align-items:center;gap:12px;padding:0 24px;background:var(--surface);border-bottom:1px solid var(--border)} .topbar__end{margin-inline-start:auto;display:flex;align-items:center;gap:8px} .topbar-center{display:none} .topbar-brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--color-text)} .topbar-brand .brand-name{font-weight:600;font-size:var(--text-base)} .topbar-brand .brand-mark{width:24px;height:24px;font-size:var(--text-xs)} .topbar-brand img.brand-logo{height:26px} .topbar-brand--mobile{display:none} .topbar-search{position:relative;flex:1;display:flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;height:36px;max-width:480px} .topbar-search__icon{color:var(--text3);flex-shrink:0} .topbar-search__input{flex:1;background:none;border:none;outline:none;font-size:var(--text-base);color:var(--text);min-width:0} .topbar-search__input::placeholder{color:var(--text3)} /* Toggle دورة الفوترة — مركزي فوق شبكة الخطط، بطاقة واحدة لكل خطة */ .billing-cycle-toggle{display:inline-flex;gap:4px;padding:4px;margin:0 auto 24px;background:var(--surface2,var(--color-surface-2,#f8fafc));border:1px solid var(--border);border-radius:var(--radius-lg,0)} .billing-cycle-toggle__btn{min-width:104px;height:40px;padding:0 18px;border:0;border-radius:var(--radius-md,0);background:transparent;color:var(--text2);font:inherit;font-size:var(--text-sm);font-weight:600;cursor:pointer;transition:background .18s,color .18s} .billing-cycle-toggle__btn:hover{color:var(--text)} .billing-cycle-toggle__btn.is-active{background:var(--primary);color:#fff;box-shadow:var(--shadow-sm)} .billing-cycle-toggle__btn:focus-visible{outline:2px solid var(--primary);outline-offset:2px} /* نتائج البحث الفوري */ .topbar-search__results{position:absolute;top:calc(100% + 6px);inset-inline:0;z-index:600;max-height:min(70vh,460px);overflow-y:auto;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:0 12px 32px rgba(0,0,0,.16)} .topbar-search__results[hidden]{display:none} .topbar-search__group+.topbar-search__group{border-top:1px solid var(--border)} .topbar-search__group-head{padding:8px 12px 4px;font-size:var(--text-xs);font-weight:600;color:var(--text3)} .topbar-search__item{display:flex;align-items:baseline;gap:8px;padding:8px 12px;text-decoration:none;color:var(--text);font-size:var(--text-sm)} .topbar-search__item strong{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .topbar-search__item small{color:var(--text3);min-width:0;overflow:hidden;text-overflow:ellipsis} .topbar-search__item:hover,.topbar-search__item.is-active{background:var(--bg)} .topbar-search__meta{margin-inline-start:auto;color:var(--text2);font-size:var(--text-xs);white-space:nowrap} .topbar-search__all{display:block;padding:10px 12px;border-top:1px solid var(--border);text-align:center;font-size:var(--text-xs);color:var(--primary);text-decoration:none} .topbar-search__state{display:flex;align-items:center;justify-content:center;gap:8px;padding:16px 12px;color:var(--text3);font-size:var(--text-sm)} .topbar-search__state.is-error{color:var(--danger,#dc2626)} .topbar-search__spinner{width:14px;height:14px;border:2px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:topbar-search-spin .7s linear infinite} @keyframes topbar-search-spin{to{transform:rotate(360deg)}} /* ── Filter Drawer ─────────────────────────────────────── */ @media(min-width:1024px){.filter-drawer{position:fixed;top:0;bottom:0;inset-inline-start:auto;inset-inline-end:0;height:100vh;height:100dvh;z-index:999;transform:none;width:var(--filter-drawer-w,288px);overflow:visible;background:var(--surface);border-inline-start:1px solid var(--border);flex-shrink:0;display:flex;flex-direction:column;transition:width 0.28s cubic-bezier(0.4,0,0.2,1);box-sizing:border-box}.filter-drawer__close{display:none}.filter-drawer-backdrop{display:none!important}}@media(min-width:769px) and (max-width:1023px){.filter-drawer{position:fixed;top:0;bottom:0;left:auto;right:0;z-index:499;width:288px;min-width:0;overflow:visible;background:var(--surface);border-inline-start:1px solid var(--border);transform:translateX(100%);visibility:hidden;transition:transform 0.28s cubic-bezier(0.4,0,0.2,1),visibility 0.28s;flex-shrink:0;display:flex;flex-direction:column}.filter-drawer.is-open{transform:translateX(0);visibility:visible}}@media(max-width:768px){.filter-drawer{position:fixed;top:0;bottom:0;left:auto;right:0;z-index:499;width:288px;min-width:0;overflow:visible;background:var(--surface);border-inline-start:1px solid var(--border);transform:translateX(100%);visibility:hidden;transition:transform 0.28s cubic-bezier(0.4,0,0.2,1),visibility 0.28s;flex-shrink:0;display:flex;flex-direction:column}.filter-drawer.is-open{transform:translateX(0);visibility:visible}} .filter-drawer__header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 20px;height:var(--topbar-h,64px);border-bottom:1px solid var(--border);font-weight:600;font-size:var(--text-sm);color:var(--text);flex-shrink:0;white-space:nowrap;background:var(--surface);min-width:0;overflow:hidden;text-overflow:ellipsis} .filter-drawer__header-end{display:flex;align-items:center;gap:8px;flex-shrink:0} .filter-drawer__view-switch{flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:10px 20px;border-bottom:1px solid var(--border);background:var(--surface)} .filter-drawer__view-switch .view-switch{flex-shrink:0} .filter-drawer__close{display:none} /* الجسم يتمرر وحده؛ التذييل يبقى ملتصقاً بحافة الصفحة السفلى */ .filter-drawer__body{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding:20px} @media(min-width:900px){.filter-drawer,.filter-drawer__body,.topbar-filters-wrapper,.topbar-filters{scrollbar-width:none!important;-ms-overflow-style:none!important}.filter-drawer::-webkit-scrollbar,.filter-drawer__body::-webkit-scrollbar,.topbar-filters-wrapper::-webkit-scrollbar,.topbar-filters::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}} /* التذييل السفلي الأيسر — نفس هندسة .sidebar-account (أسفل اليمين) و .action-toolbar تماماً: 64px، حد علوي، flex-shrink:0، ملتصق بأسفل عمود الدرج ويلتقي مع شريط الإجراءات. */ .filter-drawer__bottom{position:relative;margin-top:auto;flex-shrink:0;border-top:1px solid var(--border,var(--color-border,#e2e8f0));height:var(--bottom-h,64px);min-height:var(--bottom-h,64px);padding:0 12px;display:flex;align-items:center;gap:8px;box-sizing:border-box;background:var(--surface);z-index:2;padding-bottom:env(safe-area-inset-bottom,0)} .filter-drawer__bottom>*{flex:1 1 50%;height:38px;display:inline-flex;align-items:center;justify-content:center;text-align:center;margin:0;font-size:var(--text-sm);font-weight:500;white-space:nowrap;box-sizing:border-box} /* Filter pill base styles */ .topbar-filters{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0} .filter-pill{display:flex;align-items:center;gap:6px;background:var(--color-surface-2);border:1px solid var(--color-border);padding:0 12px;border-radius:var(--radius-sm);font-size:var(--text-xs);color:var(--color-text);transition:0.2s;white-space:nowrap;margin:0;height:32px;box-sizing:border-box;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis} .filter-pill:hover,.filter-pill:focus-within{border-color:var(--color-primary);box-shadow:0 0 0 1px var(--color-primary);background:var(--color-surface)} .filter-pill select,.filter-pill input{border:none;background:transparent;outline:none;font-size:inherit;font-family:inherit!important;color:inherit;cursor:pointer;padding:0;height:100%;min-width:60px;max-width:120px} .filter-pill select option, select option{font-family:inherit!important;background:var(--surface);color:var(--text)} .filter-pill input[type="search"],.filter-pill input[type="text"],.filter-pill input[type="date"]{min-width:130px} .filter-pill span.label{color:var(--color-text-muted);font-weight:500;user-select:none} .filter-drawer__body .topbar-filters{display:flex;flex-direction:column;align-items:stretch;gap:14px;width:100%;box-sizing:border-box} .filter-drawer__body .filter-pill{width:100%;flex-direction:column;align-items:stretch;height:auto;padding:12px;gap:6px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);white-space:normal;box-sizing:border-box;min-width:0} .filter-drawer__body .filter-pill span.label{font-size:var(--text-xs);font-weight:600;color:var(--text2);display:block;margin-bottom:2px} .filter-drawer__body .filter-pill select, .filter-drawer__body .filter-pill input{border:1px solid var(--border2, var(--color-border-strong, #cbd5e1))!important;background:var(--surface2, var(--color-surface-2, #f8fafc))!important;color:var(--text, var(--color-text, #0f172a))!important;outline:none!important;font-size:var(--text-sm)!important;padding:0 10px!important;height:36px!important;min-width:0!important;max-width:100%!important;width:100%!important;border-radius:var(--radius-sm,0)!important;box-sizing:border-box!important} .filter-drawer__body .filter-pill:has(input[type="search"]){grid-column:1 / -1} .filter-drawer-backdrop{display:none;position:fixed;inset:0;background:transparent;z-index:498;pointer-events:none;transition:background 0.3s} .filter-drawer-backdrop.is-visible{pointer-events:auto} /* Filter toggle button */ .topbar-filter-toggle{display:flex;align-items:center;justify-content:center;gap:6px;width:auto;height:36px;padding:0 12px;border:1px solid var(--border);background:var(--bg);border-radius:var(--radius-sm);color:var(--text2);cursor:pointer;flex-shrink:0;white-space:nowrap;font-size:var(--text-sm);transition:background 0.15s,color 0.15s,border-color 0.15s} .topbar-filter-toggle:hover{background:transparent;color:var(--text)} .topbar-filter-toggle.is-active{background:var(--primary);color:#fff;border-color:var(--primary)} @media(min-width:1024px){.topbar-filter-toggle{display:none!important}} /* Mobile: Sidebar Style (Left) */ @media(max-width:899px){ .filter-drawer{position:fixed;top:0;bottom:0;inset-inline-start:auto;inset-inline-end:0;width:min(86vw,320px)!important;height:100vh;max-height:100vh;border:none;border-inline-end:1px solid var(--border);border-radius:0;transform:translateX(-100%);visibility:hidden;transition:transform 0.3s ease,visibility 0.3s ease;z-index:calc(var(--z-sidebar) + 1);box-shadow:none} .filter-drawer.is-open{width:min(86vw,320px)!important;transform:translateX(0);visibility:visible;box-shadow:var(--shadow-xl,0 20px 25px -5px rgba(0,0,0,0.1))} .filter-drawer__header::before{display:none} .filter-drawer__header{position:relative;display:flex} .filter-drawer-backdrop{display:block;position:fixed;inset:0;background:transparent;z-index:var(--z-sidebar);transition:background 0.3s;pointer-events:none} .filter-drawer-backdrop.is-visible{background:rgba(0,0,0,0.45);pointer-events:auto} .topbar-filter-toggle span{display:none} .topbar-filter-toggle{width:36px;padding:0;justify-content:center} } /* الزر الآن متموضع داخل الشريط الجانبي (sidebar) عند الأسفل تماماً على الحافة الفاصلة، ومتوسط عمودياً مع ارتفاع الشريط السفلي (64px) */ .logout-form{margin:0} /* ── Page Header Bar ──────────────────────────────────────── */ .page-header-bar{padding:16px 24px 0;border-bottom:1px solid var(--color-border);background:var(--color-surface)} .page-header-title{margin:0 0 16px;font-size:var(--text-xl);font-weight:600;color:var(--color-text)} /* ── Content ──────────────────────────────────────────────── */ .content{padding:24px;flex:1;background:var(--color-bg);min-width:0} /* ── Verification Banner ──────────────────────────────────── */ .verification-banner{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px;padding:10px 14px;border:1px solid var(--color-warning-border,#f8d97e);border-radius:var(--radius-md);background:var(--color-warning-subtle);color:var(--color-warning)} .verification-banner form{margin:0} .verification-banner button{border:0;background:none;color:var(--color-warning);text-decoration:underline;cursor:pointer;font-size:var(--text-sm)} /* ── Hero Card ────────────────────────────────────────────── */ .hero-card{padding:18px 20px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);border-inline-start:3px solid var(--color-primary)} .hero-card h1{margin:4px 0 8px;font-size:var(--text-lg);font-weight:600} .hero-card p{color:var(--color-text-subtle);line-height:1.7;margin:0} .eyebrow{margin:0;color:var(--color-primary);font-weight:700} /* ── Stats & Settings Cards ───────────────────────────────── */ .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-top:20px} .settings-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:20px} .stat{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:16px 20px;display:flex;flex-direction:column;gap:4px} .stat span{font-size:var(--text-xs);color:var(--color-text-muted);font-weight:500} .stat strong{font-size:var(--text-2xl);font-weight:700;color:var(--text);font-family:var(--font-num)} /* Settings cards vary in field count (password vs. profile vs. avatar), which left their submit buttons at different heights once the grid stretched the cards to equal height. Making the form itself a column flexbox lets the button anchor to the bottom of every card at the same line. */ .settings-cards .auth-form{display:flex;flex-direction:column;gap:12px} .settings-cards .auth-form .primary-button{margin-top:auto} /* ── Fields ───────────────────────────────────────────────── */ .field{display:grid;gap:6px} .field span,.field label{font-size:var(--text-sm);font-weight:500;color:var(--color-text-subtle)} .field input,.field select,.field textarea,.field-control{width:100%;padding:8px 12px;border:1px solid var(--color-border-strong);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-text);font-size:var(--text-sm);font-family:inherit;transition:border-color 0.2s ease,box-shadow 0.2s ease,transform 0.1s;outline:none} .field input:focus,.field select:focus,.field textarea:focus,.field-control:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-subtle)} .field-control--textarea{resize:vertical} .field-control--locked-affix{width:auto;flex:0 0 auto;display:flex;align-items:center;background:var(--color-surface-2);color:var(--color-text-subtle);font-weight:600;white-space:nowrap;user-select:none;-webkit-user-select:none;cursor:not-allowed;caret-color:transparent;max-width:50%;min-width:0;overflow:hidden;text-overflow:ellipsis} /* ── Upload zones (auto-upload, no confirm button) ─────────── */ .media-preview{position:relative;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px;padding:12px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);margin-top:10px;min-height:72px;z-index:3} .media-preview img{max-width:160px;max-height:96px;object-fit:contain;border-radius:var(--radius-sm);display:block} .media-preview.empty{color:var(--color-text-muted);font-size:var(--text-sm)} .media-preview-item{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:72px;min-height:72px;padding:6px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface-2)} .media-preview-item img{max-width:150px;max-height:96px} .media-preview-item--file{flex-direction:column;gap:4px;min-width:140px;max-width:200px;padding:10px;text-align:center} .media-preview-item--file .media-preview-item__file-icon{font-size:1.8rem;color:var(--color-primary)} .media-preview-item--file .media-preview-item__file-name{font-size:var(--text-xs);color:var(--color-text-subtle);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;display:block} .media-preview--files{flex-direction:column;align-items:stretch;gap:8px} .media-preview-file{font-size:var(--text-xs);font-weight:700;color:var(--color-text-subtle);padding:14px} .media-preview-remove{position:absolute;top:4px;inset-inline-end:4px;z-index:4;width:24px;height:24px;border:0;border-radius:50%;background:rgba(15,23,42,.78);color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px;line-height:1;padding:0} .media-preview-remove:hover{background:var(--color-danger)} .upload-zone{position:relative;border:2px dashed var(--color-border-strong);background:var(--color-surface-2);padding:18px;cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s;margin-top:12px;display:grid;gap:12px} .upload-zone:hover,.upload-zone.drag-over{border-color:var(--color-primary);background:var(--color-primary-subtle);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 12%,transparent)} .upload-zone__input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;z-index:2} .upload-zone__label{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;pointer-events:none} .upload-zone__label strong{font-size:var(--text-base);color:var(--color-text)} .upload-zone__label span{font-size:var(--text-xs);color:var(--color-text-muted)} .upload-zone__actions{position:relative;z-index:3;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap} .upload-zone__actions .button{margin:0;min-height:40px;display:inline-flex;align-items:center;justify-content:center;gap:6px} .upload-zone__separator{color:var(--color-text-muted);font-size:var(--text-xs);font-weight:700} .upload-zone__clear{color:var(--color-danger)!important;border-color:var(--color-danger)!important;background:var(--color-surface)!important} .upload-zone__clear:hover{background:var(--color-danger-subtle)!important} .upload-zone__status{margin-top:10px;padding:8px 12px;font-size:var(--text-sm);border-radius:var(--radius-sm);display:flex;align-items:center;gap:8px} .upload-zone__status.uploading{background:var(--color-primary-subtle);color:var(--color-primary)} .upload-zone__status.success{background:var(--color-success-subtle);color:var(--color-success)} .upload-zone__status.error{background:var(--color-danger-subtle);color:var(--color-danger)} .upload-zone__progress-bar{width:100%;height:4px;background:var(--color-border);border-radius:0;overflow:hidden;margin-top:8px;display:none} .upload-zone__progress-bar-fill{width:0%;height:100%;background:var(--color-primary);transition:width .2s} /* ── Progress bar احترافي لوضع toolbar (صفحة الوسائط) ── */ .upload-zone__progress-bar--toolbar{position:absolute;bottom:calc(100% + 38px);inset-inline-end:0;left:auto;right:auto;width:280px;min-width:200px;max-width:90vw;height:10px;border-radius:var(--radius-sm,4px);margin:0;background:var(--color-surface-2,var(--surface2,#f1f5f9));box-shadow:inset 0 1px 2px rgba(0,0,0,.08),0 2px 8px rgba(0,0,0,.12);z-index:25;display:none} .upload-zone__progress-bar--toolbar .upload-zone__progress-bar-fill{border-radius:var(--radius-sm,4px);background:linear-gradient(90deg,var(--color-primary,var(--primary,#1f75fe)) 0%,var(--color-primary-hover,var(--primary-dim,#1558c9)) 100%);box-shadow:0 0 8px var(--primary-ghost,rgba(31,117,254,.4));position:relative;overflow:hidden} .upload-zone__progress-bar--toolbar .upload-zone__progress-bar-fill::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.3) 50%,transparent 100%);animation:uploadProgressShine 1.5s ease-in-out infinite} @keyframes uploadProgressShine{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}} .upload-zone__progress-percent{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:10px;font-weight:700;color:var(--color-text);background:var(--color-surface);padding:1px 6px;border-radius:var(--radius-full,9999px);box-shadow:0 1px 3px rgba(0,0,0,.15);font-variant-numeric:tabular-nums;pointer-events:none;opacity:0;transition:opacity .2s;white-space:nowrap} .upload-zone__progress-bar--toolbar[style*="display: flex"] .upload-zone__progress-percent{opacity:1} .upload-zone__status--toolbar{position:absolute;bottom:calc(100% + 8px);inset-inline-end:0;margin:0;min-width:280px;box-shadow:var(--shadow-md);z-index:20;border-radius:var(--radius-md);padding:10px 14px;font-weight:500;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)} .upload-zone__status--toolbar.uploading{background:rgba(31,117,254,.95);color:#fff} .upload-zone__status--toolbar.success{background:rgba(16,185,129,.95);color:#fff} .upload-zone__status--toolbar.error{background:rgba(239,68,68,.95);color:#fff} .avatar-upload-zone{border:none;background:transparent;padding:0;width:100px;height:100px;margin:0 auto 24px;position:relative;overflow:visible;display:block} .avatar-upload-zone .avatar,.avatar-upload-zone .avatar-preview{width:100%;height:100%;margin:0;border:none;border-radius:50%;overflow:hidden} .avatar-upload-zone .avatar-overlay{position:absolute;inset:0;border-radius:50%;overflow:hidden;background:rgba(0,0,0,0.5);color:#fff;display:flex;flex-direction:column;justify-content:center;align-items:center;opacity:0;transition:opacity 0.2s;pointer-events:none;gap:4px} .avatar-upload-zone .avatar-overlay svg{color:#fff} .avatar-upload-zone .avatar-overlay span{color:#fff;font-size:var(--text-xs);font-weight:500} .avatar-upload-zone:hover .avatar-overlay{opacity:1} .avatar-upload-zone .upload-zone__status{position:absolute;bottom:-18px;left:0;right:0;margin:0;padding:2px;font-size:var(--text-xs);text-align:center;border-radius:var(--radius-xs,0)} .avatar-upload-zone__clear{position:absolute;top:-4px;inset-inline-end:-4px;z-index:10;width:28px;height:28px;min-height:0;border:2px solid var(--surface,#ffffff)!important;border-radius:50%!important;background:var(--surface,#ffffff)!important;color:var(--danger,#ef4444)!important;padding:0;font-size:16px;font-weight:700;line-height:1;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,0.18)!important;cursor:pointer;transition:transform 0.18s ease,background 0.18s ease,color 0.18s ease,box-shadow 0.18s ease} .avatar-upload-zone__clear:hover{background:var(--danger,#ef4444)!important;color:#ffffff!important;transform:scale(1.12);box-shadow:0 4px 12px rgba(239,68,68,0.35)!important} [data-theme="dark"] .avatar-upload-zone__clear{background:var(--surface,#1e293b)!important;border-color:var(--border,#334155)!important;color:#f87171!important} [data-theme="dark"] .avatar-upload-zone__clear:hover{background:var(--danger,#ef4444)!important;color:#ffffff!important} /* Compact variant: same upload-zone (drag&drop + click-to-browse) styled as a toolbar button */ .upload-zone--toolbar{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--primary,var(--color-primary,#1F75FE));border-radius:var(--control-radius,0);background:var(--primary,var(--color-primary,#1F75FE));color:#fff!important;padding:0 16px;height:var(--control-h,40px);font-weight:500;font-size:var(--text-sm);margin:0;min-width:100px;text-align:center;white-space:nowrap;box-sizing:border-box} .upload-zone--toolbar:hover,.upload-zone--toolbar.drag-over{background:var(--primary-dim,var(--color-primary-hover,#1558c9));border-color:var(--primary-dim,var(--color-primary-hover,#1558c9))} .upload-zone--toolbar .upload-zone__label{flex-direction:row;gap:6px;color:#fff;pointer-events:none} .upload-zone--toolbar .upload-zone__label strong{color:#fff;font-size:var(--text-sm);font-weight:500} .upload-zone--toolbar .upload-zone__label>span:last-child{display:none} .upload-zone--toolbar .upload-zone__actions{display:none} .avatar-preview{display:flex;align-items:center;justify-content:center;width:80px;height:80px;border:1px solid var(--color-border-strong);border-radius:50%;overflow:hidden;background:var(--color-surface-2);margin:0 auto 12px} .avatar-preview img{width:100%;height:100%;object-fit:cover} .avatar-preview.empty{background:var(--primary,var(--color-primary,#1F75FE));color:#fff;font-size:var(--text-2xl);font-weight:700} /* ── Unified Buttons Architecture ───────────────────────────── */ .button, .button-primary, .primary-button, .button.primary, .button.secondary, .button-secondary, .btn, .btn-primary, .btn-secondary, .secondary-button, .upload-zone--toolbar { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid transparent; border-radius: var(--control-radius, 6px); padding: 0 var(--control-padding-x, 14px); height: var(--control-h, 40px); font-weight: 500; font-size: var(--text-sm, 13px); font-family: inherit; line-height: 1; cursor: pointer; text-decoration: none; white-space: nowrap; outline: none; box-sizing: border-box; } .button:not(.secondary):not(.button-secondary):not(.btn-secondary):not(.secondary-button):not(.button--secondary):not(.danger):not(.button-danger), .button-primary, .primary-button, .button.primary, .btn-primary, label.button.primary, label.primary-button, .upload-zone--toolbar { background: var(--primary,var(--color-primary,#1F75FE)); border-color: var(--primary,var(--color-primary,#1F75FE)); color: #ffffff !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); } .button:not(.secondary):not(.button-secondary):not(.btn-secondary):not(.secondary-button):not(.button--secondary):not(.danger):not(.button-danger):hover:not(:disabled), .button.primary:hover:not(:disabled), .button-primary:hover:not(:disabled), .primary-button:hover:not(:disabled), .btn-primary:hover:not(:disabled), label.button.primary:hover, label.primary-button:hover, .upload-zone--toolbar:hover, .upload-zone--toolbar.drag-over { background: var(--primary-dim,var(--color-primary-hover,#1558c9)); border-color: var(--primary-dim,var(--color-primary-hover,#1558c9)); color: #ffffff !important; box-shadow: 0 2px 6px var(--primary-ghost, rgba(31, 117, 254, 0.25)); } .button:active:not(:disabled), .button.primary:active:not(:disabled), .button-primary:active:not(:disabled), .primary-button:active:not(:disabled), .btn:active:not(:disabled), .btn-primary:active:not(:disabled) { transform: scale(0.98); } .button:disabled, .button.primary:disabled, .button-primary:disabled, .primary-button:disabled, .btn:disabled, .btn-primary:disabled { opacity: 0.6; cursor: not-allowed; } .button.secondary, .button-secondary, .btn-secondary, .secondary-button, .button--secondary, a.button.secondary, a.button-secondary, button.button.secondary { background: var(--secondary, var(--color-secondary, var(--primary-dim, #1558c9))) !important; color: #ffffff !important; border: 1px solid var(--secondary, var(--color-secondary, var(--primary-dim, #1558c9))) !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important; } .button.secondary:hover:not(:disabled), .button-secondary:hover:not(:disabled), .btn-secondary:hover:not(:disabled), .secondary-button:hover:not(:disabled), .button--secondary:hover:not(:disabled), a.button.secondary:hover:not(:disabled), a.button-secondary:hover:not(:disabled) { filter: brightness(0.9); color: #ffffff !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important; } .button.danger, .button-danger, .btn-danger { background: var(--color-danger); border-color: var(--color-danger); color: #fff; } .button.danger:hover:not(:disabled), .button-danger:hover:not(:disabled), .btn-danger:hover:not(:disabled) { background: var(--color-danger-hover); border-color: var(--color-danger-hover); color: #fff; box-shadow: 0 2px 4px var(--color-danger-subtle); } .button.success, .button-success, .btn-success { background: var(--color-success); border-color: var(--color-success); color: #fff; } .button.success:hover:not(:disabled), .button-success:hover:not(:disabled), .btn-success:hover:not(:disabled) { background: var(--color-success-hover); border-color: var(--color-success-hover); color: #fff; box-shadow: 0 2px 4px var(--color-success-subtle); } .button.warning, .button-warning, .btn-warning { background: var(--color-warning); border-color: var(--color-warning); color: #fff; } .button.warning:hover:not(:disabled), .button-warning:hover:not(:disabled), .btn-warning:hover:not(:disabled) { background: var(--color-warning-hover); border-color: var(--color-warning-hover); color: #fff; box-shadow: 0 2px 4px var(--color-warning-subtle); } .button.ghost, .button-ghost, .btn-ghost { background: transparent; border-color: transparent; color: var(--color-text-subtle); box-shadow: none; } .button.ghost:hover:not(:disabled), .button-ghost:hover:not(:disabled), .btn-ghost:hover:not(:disabled) { background: var(--color-surface-2); color: var(--color-text); } .button-link{text-decoration:none}.button-block{width:100%}.button-compact{padding:5px 10px;font-size:var(--text-xs)}.button-grow{flex:1}.button-center{text-align:center} /* Icon Button — same 36px hit-target and hover/active/disabled states as the text buttons above, for icon-only actions (view/copy/download/archive). */ .btn-icon,.button-icon{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:1px solid var(--color-border-strong);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-text-subtle);cursor:pointer;text-decoration:none;flex-shrink:0} .btn-icon:hover:not(:disabled),.button-icon:hover:not(:disabled){background:transparent;color:var(--color-text);box-shadow:var(--shadow-sm)} .btn-icon:active:not(:disabled),.button-icon:active:not(:disabled){transform:scale(0.96)} .btn-icon:disabled,.button-icon:disabled{opacity:0.5;cursor:not-allowed} .btn-icon svg,.button-icon svg{width:16px;height:16px} .btn-icon-sm{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:1px solid var(--border);background:var(--surface2);color:var(--text2)} /* ── Auth links / errors ──────────────────────────────────── */ .auth-link{margin-top:28px;text-align:center;font-size:var(--text-sm)} .auth-link + .auth-link{margin-top:12px} .auth-link a{color:var(--color-primary);font-weight:500;text-decoration:none} .auth-link a:hover{text-decoration:underline} /* form-error + success-message موحّدان داخل banner system أعلاه */ /* ── Error Page (Unified 404 / 403 / 500) ─────────────────── */ .error-page{display:grid;min-height:100vh;place-content:center;text-align:center;padding:24px;background:var(--bg)} .error-page__card{max-width:520px;display:flex;flex-direction:column;align-items:center;gap:16px} .error-page__icon{width:96px;height:96px;display:grid;place-content:center;border-radius:50%;background:var(--primary-ghost);color:var(--primary);font-size:44px;line-height:1;animation:errorPulse 2s ease-in-out infinite} .error-page__code{font-size:clamp(56px,12vw,88px);font-weight:800;line-height:1;letter-spacing:-.02em;color:var(--primary);text-shadow:0 2px 8px rgba(31,117,254,.12)} .error-page__title{font-size:clamp(20px,4vw,28px);font-weight:700;color:var(--text);margin:0} .error-page__desc{font-size:var(--text-sm);color:var(--text2);line-height:1.7;max-width:420px;margin:0} .error-page__actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:8px} .error-page__btn{display:inline-flex;align-items:center;gap:6px;text-decoration:none;padding:10px 22px;font-size:var(--text-sm);font-weight:600} @keyframes errorPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.06);opacity:.85}} @media(max-width:600px){.error-page__icon{width:72px;height:72px;font-size:34px}.error-page__actions{flex-direction:column;width:100%}.error-page__btn{width:100%;justify-content:center}} /* ── Badges ───────────────────────────────────────────────── */ .badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:var(--radius-xs);font-size:var(--text-xs);font-weight:600;border:1px solid transparent} .badge-success{background:var(--color-success-subtle);color:var(--color-success);border-color:var(--color-success-border,#abf5d1)} .badge-warning,.badge-warn{background:var(--color-warning-subtle);color:var(--color-warning);border-color:var(--color-warning-border,#f8d97e)} .badge-danger{background:var(--color-danger-subtle);color:var(--color-danger);border-color:var(--color-danger-border,#ffbdad)} .badge-info{background:var(--primary-ghost);color:var(--primary);border-color:var(--color-primary-border,#adccff)} .badge-muted{background:var(--surface2);color:var(--text3);border-color:var(--border)} /* Prefix ID badge shown in table rows (e.g. CUS-12345678) */ .badge-id{display:inline-block;font-family:inherit;font-size:11px;font-weight:600;color:var(--text3);background:var(--surface2);border:1px solid var(--border);border-radius:0;padding:1px 6px;letter-spacing:.02em;user-select:all;direction:ltr;unicode-bidi:isolate} /* ── خيط محادثة تذاكر الدعم الفني (مشترك بين الأدمن والتينانت) ── */ .ticket-thread{display:flex;flex-direction:column;gap:14px;margin-bottom:20px} .ticket-message{max-width:min(78%,560px);padding:12px 16px;border-radius:var(--radius-md);border:1px solid var(--border);background:var(--surface)} .ticket-message__meta{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-size:var(--text-xs);color:var(--text3)} .ticket-message__body{font-size:var(--text-sm);color:var(--text);line-height:1.6;white-space:pre-wrap;word-break:break-word;margin:0} .ticket-message--tenant,.ticket-message--guest{align-self:flex-start;background:var(--surface)} .ticket-message--admin{align-self:flex-end;background:var(--primary-ghost);border-color:var(--primary-border,var(--border))} @media(max-width:600px){.ticket-message{max-width:92%}} /* ── صندوق وارد الرسائل الموحد (مشترك بين المعلن والمشتري) ── */ .msg-inbox-list{border:1px solid var(--border);border-radius:var(--radius-md,0);overflow:hidden} .msg-inbox-row{display:flex;align-items:center;gap:14px;padding:14px 16px;border-bottom:1px solid var(--border);text-decoration:none;color:inherit;transition:background 0.15s} .msg-inbox-row:last-child{border-bottom:none} .msg-inbox-row:hover{background:var(--surface2)} .msg-inbox-row__avatar{width:44px;height:44px;border-radius:50%;background:var(--surface2);display:flex;align-items:center;justify-content:center;flex-shrink:0} .msg-inbox-row__avatar i{font-size:20px;color:var(--text3)} .msg-inbox-row__body{flex:1;min-width:0} .msg-inbox-row__top{display:flex;align-items:center;justify-content:space-between;gap:8px} .msg-inbox-row__title{font-size:var(--text-sm);color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .msg-inbox-row__time{font-size:11px;color:var(--text3);flex-shrink:0} .msg-inbox-row__sub{font-size:var(--text-xs);color:var(--text3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .msg-inbox-row__badge{margin-inline-start:auto;font-weight:700;border-radius:0;padding:2px 6px;flex-shrink:0} /* ── صفحة تذكرة الزائر (guest ticket page) ── */ .guest-ticket-card{max-width:720px;margin:0 auto;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,0.06)} .guest-ticket-card__header{padding:20px 24px;border-bottom:1px solid var(--color-border);background:var(--color-surface-2)} .guest-ticket-card__back{display:inline-flex;align-items:center;gap:6px;font-size:var(--text-sm);color:var(--primary);text-decoration:none;font-weight:500;padding:6px 14px;border-radius:var(--radius-sm);border:1px solid var(--color-primary-border,transparent);background:var(--color-primary-subtle);transition:background 0.2s,color 0.2s} .guest-ticket-card__back:hover{background:var(--primary);color:#fff} .guest-ticket-card__title{margin:12px 0 6px;font-size:var(--text-xl);font-weight:700;color:var(--color-text);line-height:1.4} .guest-ticket-card__meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap} .guest-ticket-card__meta-id{font-size:var(--text-sm);color:var(--color-text-muted)} .guest-ticket-card__meta-id strong{font-weight:600} .guest-ticket-card__auto-refresh{font-size:var(--text-xs);color:var(--color-text-muted);opacity:0.6;margin-inline-start:auto} .guest-ticket-card__body{padding:20px 24px} .guest-ticket-card__notice{margin-bottom:16px} .guest-ticket-card__reply{display:flex;flex-direction:column;gap:12px;margin-top:24px} .guest-ticket-card__reply textarea{display:block;width:100%;padding:10px;resize:vertical} .guest-ticket-card__reply button{align-self:flex-start} .guest-ticket-card__closed{margin-top:24px;padding:14px 16px;border-radius:var(--radius-md);background:var(--color-surface-2);color:var(--color-text-muted);font-size:var(--text-sm)} .guest-ticket-card__closed a{color:var(--primary);font-weight:500} [data-theme="dark"] .guest-ticket-card{background:var(--surface);border-color:var(--border)} [data-theme="dark"] .guest-ticket-card__header{background:var(--surface2);border-bottom-color:var(--border)} [data-theme="dark"] .guest-ticket-card__back{background:rgba(59,130,246,0.12);border-color:rgba(59,130,246,0.25)} [data-theme="dark"] .guest-ticket-card__title{color:var(--text)} [data-theme="dark"] .guest-ticket-card__closed{background:var(--surface2);color:var(--text2)} /* ── Tables: نظام مركزي موحّد في table.styles.js (يُستهلك من @saas/ui) ── */ .table-container{width:100%;overflow-x:auto;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);-webkit-overflow-scrolling:touch} .table-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden} .table-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border-bottom:1px solid var(--color-border);flex-wrap:wrap} .table-responsive{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch} .table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch} /* أنماط .data-table موحّدة في packages/ui/src/styles/table.styles.js — تُستهلك عبر tableStyles */ /* ── Actions Bar ──────────────────────────────────────────── */ .actions-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px;flex-wrap:wrap} .actions-bar form{display:flex;gap:8px;flex:1;max-width:400px} .actions-bar input{padding:7px 12px;border:1px solid var(--color-border-strong);border-radius:var(--radius-sm);outline:none;width:100%;font-size:var(--text-sm);background:var(--color-surface)} .actions-bar input:focus{border-color:var(--color-primary)} .text-danger{color:var(--color-danger)} .btn-link{background:none;border:none;color:var(--color-primary);cursor:pointer;padding:0;font-weight:500;text-decoration:underline;font-size:var(--text-sm)} .btn-link-danger{color:var(--color-danger)} /* ── Brand Logo ───────────────────────────────────────────── */ .brand-logo{height:36px;width:auto;object-fit:contain;flex-shrink:0}.brand-logo--compact{height:28px;flex-shrink:0} /* ── Page Header (content-level) ─────────────────────────── */ .page-head,.page-header,.page-header-bar,.actions-bar,.actions-bar--offset,.page-heading,.page-subtitle{display:none!important} .page-narrow{width:100%}.page-narrow--center{text-align:center}.back-link{color:var(--color-text-subtle);text-decoration:none;font-size:var(--text-sm)} .back-link:hover{color:var(--color-primary)} /* ── Form Card ────────────────────────────────────────────── */ .form-actions{display:flex;gap:12px;margin-top:16px} .settings-layout{display:grid;grid-template-columns:1fr;gap:16px} @media(min-width:768px){.settings-layout{grid-template-columns:200px 1fr}} .settings-nav,.settings-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md)} .settings-nav{display:grid;align-content:start;padding:8px} .settings-panel{padding:20px} .form-row{display:grid;grid-template-columns:1fr;gap:12px} @media(min-width:600px){.form-row{grid-template-columns:repeat(2,minmax(0,1fr))}} .form-control{width:100%;padding:8px 12px;border:1px solid var(--border2);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);font:inherit} .toggle-row{display:flex;align-items:center;justify-content:space-between;gap:12px} .toggle{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--border2);border-radius:var(--radius-sm);background:var(--surface);cursor:pointer} /* ── Toggle Switch (مكوّن مركزي موحّد لكل حالة تفعيل/تعطيل ثنائية، renderToggle) ── */ .toggle-switch{position:relative;display:inline-flex;align-items:center;gap:8px;cursor:pointer;user-select:none;line-height:1} .toggle-switch input{position:absolute;opacity:0;width:1px;height:1px;margin:0;padding:0} .toggle-switch__track{position:relative;display:inline-block;width:40px;height:22px;border-radius:0;background:var(--color-border-strong,var(--border2));transition:background .15s ease;flex-shrink:0} .toggle-switch__thumb{position:absolute;top:2px;inset-inline-start:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:inset-inline-start .15s ease} .toggle-switch input:checked+.toggle-switch__track{background:var(--color-primary,var(--primary))} .toggle-switch input:checked+.toggle-switch__track .toggle-switch__thumb{inset-inline-start:20px} .toggle-switch input:focus-visible+.toggle-switch__track{outline:2px solid var(--color-primary,var(--primary));outline-offset:2px} .toggle-switch__label{font-size:var(--text-sm);color:var(--color-text,var(--text))} .toggle-switch--sm .toggle-switch__track{width:32px;height:18px} .toggle-switch--sm .toggle-switch__thumb{width:14px;height:14px} .toggle-switch--sm input:checked+.toggle-switch__track .toggle-switch__thumb{inset-inline-start:16px} .toggle-switch--disabled,.toggle-switch input:disabled+.toggle-switch__track{opacity:.5;cursor:not-allowed;pointer-events:none} .toggle-switch-form{display:inline-flex;margin:0} /* ── Notice / Alert: موحّد داخل banner system أعلاه (aliases) ── */ .table-action-form{display:inline} /* ── Bottom Bar (Action Toolbar) ──────────────────────────── */ .action-toolbar,.bottom-bar{position:sticky;bottom:0;z-index:var(--z-sticky);height:var(--bottom-h);background:var(--surface);border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 24px;gap:16px;flex-shrink:0} .action-toolbar__inner{display:flex;gap:8px;align-items:center} .action-toolbar__end{display:flex;gap:12px;align-items:center;flex-shrink:0} .action-toolbar__spacer{flex:1} .action-toolbar__label{color:var(--text3);font-size:var(--text-sm)} .toolbar-btn{min-width:100px;text-align:center} /* ── Pagination inside bottom bar ─────────────────────────── */ .bottom-pagination{display:flex;gap:4px;align-items:center} .bottom-pagination-info{font-size:var(--text-xs);color:var(--text3);font-weight:600;font-family:var(--font-num);white-space:nowrap} .pg-btn{width:40px;height:40px;border:1px solid var(--border);background:var(--surface2);color:var(--text2);font-size:var(--text-xs);font-weight:700;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font-family:var(--font-num);cursor:pointer;transition:background .15s,border-color .15s,color .15s} .pg-btn:hover{border-color:var(--primary);color:var(--primary)} .pg-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)} .pg-btn:disabled,.pg-btn.disabled{opacity:.35;cursor:not-allowed;pointer-events:none} /* ── View Switch (Grid / List toggle) ─────────────────────── */ .view-switch{display:inline-flex;align-items:center;gap:2px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:2px} .view-switch-btn{width:40px;height:40px;border:none;background:transparent;color:var(--text3);font-size:16px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border-radius:calc(var(--radius-sm) - 1px);transition:background .15s,color .15s} .view-switch-btn:hover{background:transparent;color:var(--text)} .view-switch-btn.active{background:var(--primary);color:#fff} /* Grid view mode — انتقل لـtable.styles.js (نظام جداول مركزي) */ .empty-state{text-align:center;padding:48px 24px;margin-top:16px}.empty-state__icon{font-size:var(--text-3xl);margin:0 0 12px} .metric-card{background:var(--surface1);border:1px solid var(--border2);border-radius:0;padding:16px 20px;transition:border-color .2s} .metric-card:hover{border-color:var(--primary-dim)} .metric-card--warn{border-color:var(--color-warning)} .metric-card__label{font-size:var(--text-xs);color:var(--text3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px} .metric-card__value{font-size:var(--text-2xl);font-weight:700;line-height:1.2} .metric-card__sub{font-size:var(--text-xs);color:var(--text3);margin-top:6px} .text-success{color:var(--color-success)}.text-error{color:var(--color-danger)} .error-text{color:var(--color-danger);font-size:var(--text-xs)} .danger-card{border-color:var(--color-danger)!important;border-inline-start-color:var(--color-danger)!important;padding:40px 24px}.danger-card__icon{font-size:var(--text-3xl);margin:0}.danger-card__title{color:var(--color-danger);margin-top:12px}.danger-card__note{color:var(--color-text-subtle);font-size:var(--text-sm)}.danger-card__actions{margin-top:24px;display:flex;gap:12px;justify-content:center} /* ── Utilities ────────────────────────────────────────────── */ .actions-bar--offset{margin-top:12px}.filter-form--wide{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.filter-form--wide>*{min-width:0}.filter-input--grow{flex:2}.muted{color:var(--color-text-muted)} .topbar-title,.topbar>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .otp-input{text-align:center;letter-spacing:0;font-size:var(--text-xl);font-weight:700} .account-action-footer{display:flex;flex-direction:column;gap:10px;margin-top:20px} .text-action-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:10px 16px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:transparent;color:var(--color-primary);font-size:var(--text-sm);font-weight:500;cursor:pointer;font-family:inherit;transition:background .15s,border-color .15s;text-decoration:none;white-space:nowrap} .text-action-button:hover:not(:disabled){background:var(--color-primary-subtle);border-color:var(--color-primary)} .text-action-button:disabled{opacity:.5;cursor:not-allowed} .text-action-button--muted{color:var(--color-text-subtle);border-color:transparent;background:transparent} .text-action-button--muted:hover:not(:disabled){background:var(--color-surface-2);border-color:var(--color-border);color:var(--color-text)} .text-action-button--danger{color:var(--color-danger,#ef4444);border-color:transparent;background:transparent} .text-action-button--danger:hover:not(:disabled){background:rgba(239,68,68,.08);border-color:var(--color-danger,#ef4444);color:var(--color-danger,#ef4444)} /* ── Landing Page ─────────────────────────────────────────── */ .landing-primary-link{text-decoration:none;padding:7px 16px}.landing-hero-link{text-decoration:none;padding:10px 24px;font-size:var(--text-base)}.landing-pricing-link{text-decoration:none;display:block;text-align:center;padding:10px}.landing-footer__links{margin-bottom:12px}.landing-footer__separator{margin:0 8px} /* ── Unified Landing Scrollbar (professional, dynamic platform color) ── */ ::-webkit-scrollbar{width:8px;height:8px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--color-primary,#1F75FE) 55%,transparent);border-radius:8px;border:2px solid transparent;background-clip:padding-box} ::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--color-primary,#1F75FE) 80%,transparent);background-clip:padding-box} ::-webkit-scrollbar-corner{background:transparent} html{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--color-primary,#1F75FE) 55%,transparent) transparent;overflow-x:clip} /* Hide webkit scrollbar on elements with inline scrollbar-width:none (table containers, toolbars) */ [style*="scrollbar-width:none"]::-webkit-scrollbar{display:none;width:0;height:0} /* ── Landing Nav (عائم شفاف فوق الهيرو، مركزي 1100px، scroll hide/show) ── */ .landing-nav-wrapper{position:sticky;top:0;left:0;right:0;width:100%;z-index:1000;box-sizing:border-box;padding:0;background:color-mix(in srgb,var(--surface,var(--color-surface,#ffffff)) 85%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid color-mix(in srgb,var(--border,var(--color-border,#e2e8f0)) 60%,transparent);transition:transform 0.35s cubic-bezier(0.16,1,0.3,1),opacity 0.3s ease,background 0.3s ease,border-color 0.3s ease,box-shadow 0.3s ease;will-change:transform,opacity} .landing-nav-wrapper.is-hidden{transform:translateY(-110%);opacity:0;pointer-events:none} .landing-nav-wrapper.is-scrolled{background:color-mix(in srgb,var(--surface,var(--color-surface,#ffffff)) 95%,transparent);border-bottom-color:var(--border,var(--color-border,#e2e8f0));box-shadow:0 4px 20px rgba(0,0,0,0.06)} [data-theme="dark"] .landing-nav-wrapper{background:color-mix(in srgb,#0F172A 85%,transparent);border-bottom-color:color-mix(in srgb,var(--border,#334155) 60%,transparent)} [data-theme="dark"] .landing-nav-wrapper.is-scrolled{background:color-mix(in srgb,#0F172A 95%,transparent);border-bottom-color:var(--border,#334155);box-shadow:0 4px 24px rgba(0,0,0,0.4)} @media(prefers-color-scheme:dark){ .landing-nav-wrapper:not([data-theme="light"]){background:color-mix(in srgb,#0F172A 85%,transparent);border-bottom-color:color-mix(in srgb,var(--border,#334155) 60%,transparent)} .landing-nav-wrapper:not([data-theme="light"]).is-scrolled{background:color-mix(in srgb,#0F172A 95%,transparent);border-bottom-color:var(--border,#334155);box-shadow:0 4px 24px rgba(0,0,0,0.4)} } .landing-nav{width:100%;max-width:100%;padding:0 clamp(16px,3vw,40px);background:transparent;border:none;border-radius:0;box-shadow:none;margin:0;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;box-sizing:border-box;height:var(--topbar-h,64px)} .landing-nav-brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--color-text);flex-shrink:0;justify-self:start} .landing-nav-brand strong{font-size:1.2rem;font-weight:900;color:var(--color-text)} .landing-nav-brand .brand-logo{max-height:34px;width:auto;object-fit:contain;flex-shrink:0} .landing-nav-center{display:flex;align-items:center;gap:clamp(6px,1.2vw,20px);justify-content:center} .landing-nav-center .btn-outline{border:none!important;background:transparent!important;padding:8px 16px!important;color:var(--text,var(--color-text,#0f172a));font-weight:600;transition:color 0.15s ease} .landing-nav-center .btn-outline:hover{color:var(--primary)!important} .landing-nav-left{display:flex;align-items:center;gap:10px;flex-shrink:0;justify-self:end} .nav-account-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--radius-sm,0);color:var(--text,var(--color-text,#0f172a));text-decoration:none;transition:background 0.2s ease,color 0.2s ease;-webkit-tap-highlight-color:transparent;flex-shrink:0} .nav-account-btn:hover{background:transparent;color:var(--primary)} [data-theme="dark"] .nav-account-btn:hover{background:transparent} .nav-account-btn i{font-size:24px;line-height:1} .landing-primary-link{background:var(--primary)!important;color:var(--color-text-on-primary,#fff)!important;border:1px solid transparent!important;border-radius:var(--control-radius,var(--radius-sm,0))!important;min-height:var(--control-h,40px)!important;height:var(--control-h,40px)!important;padding:0 var(--control-padding-x,18px)!important;font-size:var(--control-font-size,var(--text-sm,14px))!important;font-weight:var(--font-weight-semibold,600)!important;font-family:inherit!important;line-height:1!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;text-decoration:none!important;cursor:pointer!important;box-sizing:border-box!important;white-space:nowrap!important;user-select:none!important;-webkit-tap-highlight-color:transparent!important;touch-action:manipulation!important;transition:background-color 0.15s ease,border-color 0.15s ease,box-shadow 0.15s ease,transform 0.1s ease!important} .landing-primary-link:hover{background:var(--primary-dim,#1558c9)!important;color:var(--color-text-on-primary,#fff)!important;border-color:transparent!important} .landing-primary-link:active{transform:translateY(1px)!important} .landing-primary-link:focus-visible{outline:2px solid var(--primary)!important;outline-offset:2px!important} .landing-nav-hamburger{display:none;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:40px;height:40px;background:transparent;border:none;cursor:pointer;padding:0;z-index:1001;flex-shrink:0;-webkit-tap-highlight-color:transparent;touch-action:manipulation;border-radius:var(--radius-sm,0);transition:background 0.2s,color 0.2s,transform 0.15s;color:var(--text,var(--color-text,#0f172a))} .landing-nav-hamburger span{display:block;width:20px;height:2px;background:var(--color-text);border-radius:0;transition:0.3s cubic-bezier(0.16,1,0.3,1);margin:0 auto;pointer-events:none} .landing-nav-hamburger:hover{background:transparent;color:var(--primary,#1F75FE)} .landing-nav-hamburger:hover span{background:var(--primary,#1F75FE)} [data-theme="dark"] .landing-nav-hamburger:hover{background:transparent} .landing-nav-hamburger.active span:nth-child(1){transform:translateY(6px) rotate(45deg)} .landing-nav-hamburger.active span:nth-child(2){opacity:0} .landing-nav-hamburger.active span:nth-child(3){transform:translateY(-6px) rotate(-45deg)} .landing-mobile-menu{display:flex;flex-direction:column;position:fixed;top:0;left:0;width:min(86vw,300px);height:100vh;height:100dvh;background:var(--surface,var(--color-surface,#fff));border-inline-end:1px solid var(--border,#e2e8f0);box-shadow:10px 0 40px rgba(0,0,0,0.25);padding:0;z-index:1002;transition:transform 0.3s cubic-bezier(0.16,1,0.3,1),visibility 0.3s ease;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;box-sizing:border-box;visibility:hidden;pointer-events:none;transform:translateX(-100%);will-change:transform;touch-action:manipulation} [data-theme="dark"] .landing-mobile-menu{background:var(--surface,#1E293B);border-inline-end-color:var(--border,#334155);box-shadow:10px 0 40px rgba(0,0,0,0.5)} .landing-mobile-menu[data-drawer]:not(.is-open),.landing-mobile-menu:not(.is-open){transform:translateX(-100%)!important;visibility:hidden!important;pointer-events:none!important} .landing-mobile-menu[data-drawer].is-open,.landing-mobile-menu.is-open{transform:translateX(0)!important;visibility:visible!important;pointer-events:auto!important} .landing-mobile-menu__links{display:flex;flex-direction:column;gap:2px;padding:12px 8px;flex:1 1 auto} .landing-mobile-menu__link,.landing-mobile-menu a:not(.landing-primary-link):not(.landing-nav-brand):not(.landing-mobile-menu__social){min-height:48px;height:48px;display:flex;align-items:center;gap:12px;padding-inline:16px;color:var(--color-sidebar-text,var(--text2,#475569));text-decoration:none;font-size:var(--text-base,14px);font-weight:500;border-radius:var(--radius-sm,0);border-inline-start:3px solid transparent;box-sizing:border-box;transition:background 0.15s ease,color 0.15s ease,border-color 0.15s ease;touch-action:manipulation} .landing-mobile-menu__link:hover,.landing-mobile-menu a:not(.landing-primary-link):not(.landing-nav-brand):not(.landing-mobile-menu__social):hover{background:var(--primary-ghost,rgba(31,117,254,.10));color:var(--primary,#1F75FE);border-inline-start-color:var(--primary,#1F75FE)} .landing-mobile-menu__link.is-active,.landing-mobile-menu a:not(.landing-primary-link):not(.landing-nav-brand):not(.landing-mobile-menu__social).active{background:var(--primary-ghost,rgba(31,117,254,.14));color:var(--primary,#1F75FE);font-weight:700;border-inline-start-color:var(--primary,#1F75FE)} [data-theme="dark"] .landing-mobile-menu__link,[data-theme="dark"] .landing-mobile-menu a:not(.landing-primary-link):not(.landing-nav-brand):not(.landing-mobile-menu__social){color:var(--text2,#CBD5E1)} [data-theme="dark"] .landing-mobile-menu__link:hover,[data-theme="dark"] .landing-mobile-menu a:not(.landing-primary-link):not(.landing-nav-brand):not(.landing-mobile-menu__social):hover{background:var(--primary-ghost,rgba(31,117,254,.18));color:var(--primary,#60A5FA);border-inline-start-color:var(--primary,#60A5FA)} .landing-mobile-menu__icon{font-size:18px;width:20px;text-align:center;color:currentColor;flex-shrink:0;line-height:1} .landing-mobile-menu .landing-primary-link{width:100%!important;min-height:44px!important;height:44px!important;margin:0!important;font-size:var(--text-base,14px)!important;justify-content:center!important} .landing-mobile-menu .mobile-account-link{display:flex;align-items:center;gap:8px;padding:12px 16px;margin:0 16px;border:1px solid var(--color-border);border-radius:var(--radius-md,0);color:var(--color-text);font-weight:600;text-decoration:none;transition:background 0.15s ease,border-color 0.15s ease;touch-action:manipulation} .landing-mobile-menu .mobile-account-link:hover{background:var(--color-primary-subtle,rgba(31,117,254,0.08));border-color:var(--primary)} .landing-mobile-menu .mobile-account-link img,.landing-mobile-menu .mobile-account-link .avatar-fallback{width:28px;height:28px;border-radius:50%;object-fit:cover;flex-shrink:0} .landing-mobile-menu .mobile-account-icon{font-size:20px;vertical-align:middle;margin-inline-end:6px} .landing-mobile-menu__brand{display:flex;align-items:center;justify-content:space-between;gap:12px;height:var(--topbar-h,64px);padding:0 16px;padding-top:env(safe-area-inset-top,0);border-bottom:1px solid var(--color-border);flex-shrink:0;position:sticky;top:0;background:color-mix(in srgb,var(--surface,var(--color-surface,#fff)) 92%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);z-index:2} .landing-mobile-menu__brand .landing-nav-brand{order:1;flex:1;font-weight:700;font-size:1.05rem;color:var(--color-text);text-decoration:none;display:flex;align-items:center;gap:8px;min-width:0;overflow:hidden;justify-content:flex-start} .landing-mobile-menu__brand .landing-nav-brand strong{font-size:1.05rem!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px} .landing-mobile-menu__brand .landing-nav-brand .brand-logo{max-height:28px!important;width:auto!important;object-fit:contain;flex-shrink:0} .landing-mobile-menu__close{order:2;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex-shrink:0;border:none;background:transparent;color:var(--text,var(--color-text,#0f172a));border-radius:var(--radius-sm,0);cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:background 0.2s,color 0.2s,transform 0.15s;margin-inline-start:auto} .landing-mobile-menu__close:hover{background:transparent;color:var(--primary,var(--color-primary,#1F75FE))} .landing-mobile-menu__close:active{transform:scale(0.95)} .landing-mobile-menu__close:focus-visible{outline:2px solid var(--primary,var(--color-primary,#1F75FE));outline-offset:2px} .landing-mobile-menu__close i{font-size:24px;line-height:1} [data-theme="dark"] .landing-mobile-menu__brand{border-bottom-color:var(--border)} [data-theme="dark"] .landing-mobile-menu__close{color:var(--text)} [data-theme="dark"] .landing-mobile-menu__close:hover{background:transparent;color:var(--primary)} .landing-mobile-menu-backdrop{display:block;visibility:hidden;pointer-events:none;position:fixed;top:0;left:0;width:100%;height:100vh;height:100dvh;background:rgba(0,0,0,0.45);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:1001;opacity:0;transition:opacity 0.25s ease,visibility 0.25s ease;will-change:opacity;touch-action:manipulation} .landing-mobile-menu-backdrop.active,.landing-mobile-menu-backdrop.is-active{visibility:visible;pointer-events:auto;opacity:1} .landing-mobile-menu__footer{margin-top:auto;padding:16px;border-top:1px solid var(--color-border,#e2e8f0);background:var(--surface);flex-shrink:0} .landing-mobile-menu__socials{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-bottom:16px} .landing-mobile-menu__social{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--color-surface-2,#f1f5f9);color:var(--color-text);text-decoration:none;font-size:18px;transition:background 0.15s ease,color 0.15s ease,transform 0.15s ease} .landing-mobile-menu__social:hover{background:var(--primary);color:#fff;transform:translateY(-2px)} .landing-mobile-menu__social:focus-visible{outline:2px solid var(--primary);outline-offset:2px} .landing-mobile-menu__copyright{text-align:center;font-size:var(--text-xs,12px);color:var(--color-text-muted,#64748b);line-height:1.5} [data-theme="dark"] .landing-mobile-menu__social{background:rgba(255,255,255,0.08);color:var(--color-text)} [data-theme="dark"] .landing-mobile-menu__social:hover{background:var(--primary);color:#fff} [data-theme="dark"] .landing-mobile-menu__footer{border-top-color:var(--border,#334155)} @media(min-width:900px){.landing-mobile-menu,.landing-mobile-menu-backdrop{display:none!important}} @media(max-width:899px){ html:has(.landing-nav-wrapper){scroll-padding-top:calc(var(--topbar-h,64px) + 18px)} .landing-nav{padding:0 16px!important;max-width:100%!important;border-radius:0!important;gap:8px!important;grid-template-columns:1fr auto auto!important;height:var(--topbar-h,64px)!important} .landing-nav-hamburger{order:3;display:flex!important;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--radius-sm,0);background:transparent;border:none;transition:background 0.2s,color 0.2s,transform 0.15s;flex-shrink:0;margin-inline-start:-4px} [data-theme="dark"] .landing-nav-hamburger{background:transparent} .landing-nav-hamburger:active{transform:scale(0.95)} .landing-nav-brand{order:1;flex:1;min-width:0;gap:6px!important;justify-self:start;overflow:hidden} .landing-nav-brand strong{font-size:1.05rem!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px} .landing-nav-brand .brand-logo{max-height:28px!important;width:auto!important;object-fit:contain;flex-shrink:0} .landing-nav-center{display:none!important} .landing-nav-left{order:2;display:flex!important;align-items:center!important;gap:4px!important;flex-shrink:0;justify-self:end} .landing-nav-left > :not(.landing-nav-icon-btn):not(.landing-nav-search-trigger){display:none!important} /* درج الموبايل — safe area للأسفل (home indicator) */ .landing-mobile-menu{padding-top:env(safe-area-inset-top,0);padding-bottom:env(safe-area-inset-bottom,0)} } /* ── Landing Nav — Search trigger (icon button, opens modal) ── */ .landing-nav-search-trigger{display:inline-flex} /* ui-search-modal CSS moved to public-shell-styles.js (improved centering + animations) */ /* ── Landing Nav — Icon buttons (theme/favorites/account) ── */ .landing-nav-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--radius-sm,0);color:var(--text,var(--color-text-subtle,#475569));text-decoration:none;transition:background .15s ease,color .15s ease;-webkit-tap-highlight-color:transparent;flex-shrink:0;position:relative;background:transparent;border:none;cursor:pointer;font-family:inherit} .landing-nav-icon-btn:hover{background:var(--color-surface-2,var(--color-bg));color:var(--color-text)} .landing-nav-icon-btn i{font-size:1.25rem} .landing-nav-icon-badge{position:absolute;top:2px;inset-inline-end:2px;background:var(--color-danger,#ef4444);color:#fff;font-size:9px;font-weight:700;min-width:16px;height:16px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 4px} /* ── Landing Bottom Nav (mobile — للمتاجر) ── */ .landing-bottom-nav{position:fixed;bottom:0;inset-inline:0;height:var(--bottomnav-h,56px);background:var(--surface,var(--color-surface,#fff));border-top:1px solid var(--color-border);display:flex;align-items:center;justify-content:space-around;z-index:var(--z-bottomnav,50);padding-bottom:env(safe-area-inset-bottom,0)} [data-theme="dark"] .landing-bottom-nav{background:var(--surface,var(--color-surface,#0f172a));border-top-color:var(--color-border)} .landing-bottom-nav__item{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10px;font-weight:600;color:var(--color-text-muted);padding:var(--space-1,4px) var(--space-3,12px);transition:color .15s ease;text-decoration:none} .landing-bottom-nav__item.is-active{color:var(--color-primary)} .landing-bottom-nav__item i{font-size:1.25rem} @media(min-width:768px){.landing-bottom-nav{display:none}} html{scroll-behavior:smooth;scroll-padding-top:calc(var(--topbar-h,64px) + 20px)} .landing-hero, .landing-features, .landing-section-gray, .landing-section-white, .landing-pricing, .landing-bottom-cta, .landing-trust-bar, .ui-home-section, .ui-main, .ui-faq-section{scroll-margin-top:calc(var(--topbar-h,64px) + 20px)} .landing-hero{min-height:100vh;min-height:100svh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:calc(var(--topbar-h,64px) + 24px) clamp(20px,5vw,80px) clamp(32px,5vw,64px);background:linear-gradient(135deg,var(--color-surface) 0%,var(--color-surface-2,var(--color-bg)) 100%);position:relative;overflow:hidden} .landing-hero::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,color-mix(in srgb,var(--color-primary) 8%,transparent) 1px,transparent 1px);background-size:clamp(20px,3vw,28px) clamp(20px,3vw,28px);opacity:0.6;pointer-events:none;mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,#000 30%,transparent 80%);-webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,#000 30%,transparent 80%)} .landing-hero__glow{position:absolute;border-radius:50%;filter:blur(100px);opacity:0.5;pointer-events:none;will-change:transform} .landing-hero__glow--1{width:clamp(300px,40vw,600px);height:clamp(300px,40vw,600px);background:var(--color-primary);opacity:0.10;top:-15%;inset-inline-end:-8%;animation:heroGlowFloat 14s ease-in-out infinite alternate} .landing-hero__glow--2{width:clamp(250px,30vw,450px);height:clamp(250px,30vw,450px);background:var(--color-primary);opacity:0.06;bottom:-15%;inset-inline-start:-8%;animation:heroGlowFloat 18s ease-in-out infinite alternate-reverse} @keyframes heroGlowFloat{from{transform:translate(0,0) scale(1)}to{transform:translate(30px,-30px) scale(1.08)}} .landing-hero__inner{display:grid;grid-template-columns:1.1fr 0.9fr;gap:clamp(32px,5vw,64px);align-items:center;max-width:1200px;margin:0 auto;position:relative;z-index:1;width:100%} .landing-hero__text{text-align:start} .landing-hero__visual{display:flex;align-items:center;justify-content:center;min-height:320px;animation:heroVisualIn 0.8s cubic-bezier(0.22,1,0.36,1) 0.2s both} @keyframes heroVisualIn{from{opacity:0;transform:translateY(32px) scale(0.96)}to{opacity:1;transform:translateY(0) scale(1)}} .landing-hero__badge{display:inline-flex;align-items:center;gap:8px;padding:7px 16px;border-radius:999px;background:var(--color-primary-subtle);color:var(--color-primary);font-size:var(--text-sm);font-weight:600;margin-bottom:24px;border:1px solid color-mix(in srgb,var(--color-primary) 20%,transparent);animation:heroFadeUp 0.6s ease-out both} .landing-hero__badge-dot{width:7px;height:7px;border-radius:50%;background:var(--color-primary);animation:heroBadgePulse 2s ease-in-out infinite;flex-shrink:0} @keyframes heroBadgePulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--color-primary) 40%,transparent)}50%{box-shadow:0 0 0 5px color-mix(in srgb,var(--color-primary) 0%,transparent)}} .landing-hero h1{font-size:clamp(var(--text-2xl),4.5vw,var(--text-4xl));margin:0 0 18px;line-height:1.12;color:var(--color-text);font-weight:800;letter-spacing:-0.02em;animation:heroFadeUp 0.6s ease-out 0.1s both} .landing-hero h1 .hero-accent{background:linear-gradient(135deg,var(--color-primary),color-mix(in srgb,var(--color-primary) 60%,#c084fc));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent} .landing-hero p{font-size:var(--text-xl);color:var(--color-text-subtle);max-width:540px;margin:0 0 32px;line-height:1.75;animation:heroFadeUp 0.6s ease-out 0.2s both} @keyframes heroFadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}} .landing-cta-group{display:flex;gap:12px;justify-content:flex-start;flex-wrap:wrap;align-items:center;animation:heroFadeUp 0.6s ease-out 0.3s both} .landing-hero__trust-points{display:flex;align-items:center;gap:clamp(14px,2vw,24px);flex-wrap:wrap;margin-top:24px;font-size:var(--text-xs,0.85rem);font-weight:600;color:var(--color-text-subtle);animation:heroFadeUp 0.6s ease-out 0.4s both} .landing-hero__trust-points span{display:inline-flex;align-items:center;gap:6px} .landing-hero__trust-points i{color:var(--color-success,#10b981);font-size:1.05rem} @media(max-width:900px){.landing-hero__trust-points{justify-content:center}} /* ── Hero Visual: Browser Frame Dashboard Preview ── */ .hero-preview{position:relative;width:100%;max-width:480px} .hero-preview__frame{background:var(--color-surface);border:1px solid color-mix(in srgb,var(--color-border) 80%,transparent);border-radius:var(--radius-lg,16px);box-shadow:0 32px 80px -16px rgba(0,0,0,0.12),0 0 0 1px color-mix(in srgb,var(--color-border) 50%,transparent);overflow:hidden;transition:transform 0.4s cubic-bezier(0.22,1,0.36,1),box-shadow 0.4s ease} .hero-preview__frame:hover{transform:translateY(-6px);box-shadow:0 40px 100px -16px color-mix(in srgb,var(--color-primary) 15%,rgba(0,0,0,0.12)),0 0 0 1px color-mix(in srgb,var(--color-primary) 30%,transparent)} .hero-preview__bar{display:flex;align-items:center;gap:8px;padding:12px 16px;background:color-mix(in srgb,var(--color-surface-2,var(--color-bg)) 50%,var(--color-surface));border-bottom:1px solid var(--color-border)} .hero-preview__dot{width:11px;height:11px;border-radius:50%;background:var(--color-border);flex-shrink:0} .hero-preview__dot:nth-child(1){background:#ff5f57} .hero-preview__dot:nth-child(2){background:#febc2e} .hero-preview__dot:nth-child(3){background:#28c840} .hero-preview__url{display:inline-flex;align-items:center;gap:6px;margin-inline-start:12px;padding:5px 14px;border-radius:var(--radius-md,8px);background:var(--color-surface);border:1px solid var(--color-border);font-size:var(--text-xs,0.8rem);color:var(--color-text-subtle);font-weight:500;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .hero-preview__url i{font-size:0.85rem;color:var(--color-success,#10b981);flex-shrink:0} .hero-preview__body{display:grid;grid-template-columns:48px 1fr;min-height:280px} .hero-preview__sidebar{background:color-mix(in srgb,var(--color-surface-2,var(--color-bg)) 40%,var(--color-surface));border-inline-end:1px solid var(--color-border);padding:14px 8px;display:flex;flex-direction:column;gap:10px;align-items:center} .hero-preview__nav-item{width:32px;height:32px;border-radius:var(--radius-sm,8px);background:color-mix(in srgb,var(--color-border) 30%,transparent)} .hero-preview__nav-item--active{background:var(--color-primary);opacity:0.85} .hero-preview__nav-item--logo{background:var(--color-primary-subtle);border-radius:var(--radius-sm,8px);width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-size:0.85rem;font-weight:800;color:var(--color-primary);margin-bottom:6px} .hero-preview__content{padding:18px;display:flex;flex-direction:column;gap:14px} .hero-preview__title{height:14px;width:60%;border-radius:4px;background:color-mix(in srgb,var(--color-text) 12%,transparent)} .hero-preview__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .hero-preview__card{background:color-mix(in srgb,var(--color-surface-2,var(--color-bg)) 50%,var(--color-surface));border:1px solid var(--color-border);border-radius:var(--radius-sm,8px);padding:12px;display:flex;flex-direction:column;gap:8px} .hero-preview__card-icon{width:24px;height:24px;border-radius:6px;background:var(--color-primary-subtle)} .hero-preview__card-icon--green{background:color-mix(in srgb,var(--color-success,#10b981) 20%,transparent)} .hero-preview__card-icon--purple{background:color-mix(in srgb,#a855f7 20%,transparent)} .hero-preview__card-line{height:7px;border-radius:4px;background:color-mix(in srgb,var(--color-text) 10%,transparent)} .hero-preview__card-line--short{width:60%} .hero-preview__card-line--mid{width:80%} .hero-preview__chart{margin-top:6px;display:flex;align-items:flex-end;gap:8px;height:64px;padding:12px;background:color-mix(in srgb,var(--color-surface-2,var(--color-bg)) 50%,var(--color-surface));border:1px solid var(--color-border);border-radius:var(--radius-sm,8px)} .hero-preview__chart-bar{flex:1;border-radius:4px 4px 0 0;background:linear-gradient(180deg,var(--color-primary),color-mix(in srgb,var(--color-primary) 40%,transparent));animation:heroChartGrow 1s cubic-bezier(0.22,1,0.36,1) 0.8s both;transform-origin:bottom} @keyframes heroChartGrow{from{transform:scaleY(0)}to{transform:scaleY(1)}} /* ── Floating accent badges around the preview ── */ .hero-preview__float{position:absolute;display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;background:var(--color-surface);border:1px solid color-mix(in srgb,var(--color-border) 70%,transparent);box-shadow:0 12px 32px -8px rgba(0,0,0,0.12);font-size:var(--text-xs,0.8rem);font-weight:700;color:var(--color-text);z-index:2;animation:heroFloatBob 4s ease-in-out infinite} .hero-preview__float i{font-size:1.1rem} .hero-preview__float--1{top:-18px;inset-inline-end:-12px;animation-delay:0s} .hero-preview__float--1 i{color:var(--color-warning,#f59e0b)} .hero-preview__float--2{bottom:-16px;inset-inline-start:-12px;animation-delay:2s} .hero-preview__float--2 i{color:var(--color-success,#10b981)} @keyframes heroFloatBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}} @media(max-width:900px){.hero-preview__float--1{inset-inline-end:4px}.hero-preview__float--2{inset-inline-start:4px}} /* ── Legacy logo-card (kept for backward compat with custom heroWidgetHtml) ── */ .landing-hero__logo-card{background:var(--color-surface);border:1px solid color-mix(in srgb,var(--color-border) 80%,transparent);border-radius:var(--radius-lg,16px);padding:clamp(24px,3vw,40px);box-shadow:0 24px 80px -20px rgba(0,0,0,0.12),0 0 0 1px color-mix(in srgb,var(--color-border) 60%,transparent);width:100%;max-width:420px;position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;transition:transform 0.3s ease,box-shadow 0.3s ease;box-sizing:border-box} .landing-hero__logo-card:hover{transform:translateY(-4px);box-shadow:0 32px 100px -20px color-mix(in srgb,var(--color-primary) 18%,transparent),0 0 0 1px var(--color-primary)} .landing-hero__logo-ring{position:absolute;top:-2px;inset-inline-start:-2px;width:calc(100% + 4px);height:calc(100% + 4px);border-radius:inherit;background:conic-gradient(from 0deg,var(--color-primary),transparent 60deg,var(--color-primary) 120deg,transparent 180deg);opacity:0.15;animation:heroRingSpin 8s linear infinite;z-index:0} @keyframes heroRingSpin{to{transform:rotate(360deg)}} .landing-hero__logo-wrap{display:flex;align-items:center;justify-content:center;width:clamp(72px,10vw,96px);height:clamp(72px,10vw,96px);border-radius:50%;background:var(--color-surface);border:2px solid var(--color-primary-subtle);box-shadow:0 8px 24px -4px var(--color-primary-subtle);position:relative;z-index:1;margin-bottom:4px} .landing-hero__logo-wrap .brand-logo{max-height:48px;width:auto;object-fit:contain} .landing-hero__logo-card h3{margin:0;font-size:var(--text-lg);color:var(--color-text);font-weight:700;position:relative;z-index:1} .landing-hero__logo-card p{margin:0;font-size:var(--text-sm);color:var(--color-text-subtle);line-height:1.6;position:relative;z-index:1} .landing-hero__stats{display:flex;gap:clamp(16px,3vw,28px);padding-top:20px;border-top:1px solid var(--color-border);margin-top:16px;width:100%;position:relative;z-index:1} .landing-hero__stat{display:flex;flex-direction:column;gap:2px;flex:1;text-align:center} .landing-hero__stat-value{font-size:var(--text-2xl);font-weight:800;color:var(--color-primary)} .landing-hero__stat-label{font-size:var(--text-xs);color:var(--color-text-subtle);font-weight:600} @media(max-width:900px){ .landing-hero__inner{grid-template-columns:1fr;gap:40px;text-align:center} .landing-hero__text{text-align:center} .landing-cta-group{justify-content:center} .landing-hero p{margin-inline:auto} .landing-hero__visual{min-height:auto;order:-1} .landing-hero__badge{margin-inline:auto} .hero-preview{max-width:400px;margin:0 auto} } @media(max-width:480px){ .landing-hero{padding:calc(var(--topbar-h,64px) + 16px) 16px 32px} .hero-preview__float{padding:8px 12px;font-size:0.75rem} .hero-preview__float--1{top:-12px;inset-inline-end:0} .hero-preview__float--2{bottom:-12px;inset-inline-start:0} .hero-preview__cards{grid-template-columns:1fr 1fr} .hero-preview__card:nth-child(3){display:none} } /* ── Trust & Social Proof Bar ── */ .landing-trust-bar{background:color-mix(in srgb,var(--color-surface) 96%,var(--color-primary) 4%);border-top:1px solid color-mix(in srgb,var(--color-border) 80%,transparent);border-bottom:1px solid color-mix(in srgb,var(--color-border) 80%,transparent);padding:clamp(18px,3vw,28px) clamp(20px,5vw,80px);box-sizing:border-box} .landing-trust-bar__inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:clamp(16px,3vw,32px);align-items:center} .landing-trust-item{display:flex;align-items:center;gap:14px;text-align:start} .landing-trust-item__icon{width:44px;height:44px;border-radius:12px;background:var(--color-primary-subtle);color:var(--color-primary);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0} .landing-trust-item__text{display:flex;flex-direction:column;gap:2px} .landing-trust-item__text strong{font-size:0.92rem;font-weight:700;color:var(--color-text)} .landing-trust-item__text span{font-size:0.78rem;color:var(--color-text-subtle)} @media(max-width:600px){.landing-trust-bar__inner{grid-template-columns:1fr 1fr;gap:16px}} @media(max-width:400px){.landing-trust-bar__inner{grid-template-columns:1fr}} .btn-outline{border:1px solid var(--color-primary);border-radius:var(--radius-sm);color:var(--color-primary);padding:0 var(--control-padding-x, 14px);height:var(--control-h, 40px);box-sizing:border-box;justify-content:center;line-height:1;font-weight:600;text-decoration:none;background:transparent;cursor:pointer;font-size:var(--text-sm);display:inline-flex;align-items:center;transition:background 0.2s,color 0.2s} .btn-outline:hover{background:var(--color-primary-subtle)} .landing-features{padding:clamp(40px,8vw,80px) clamp(20px,5vw,80px);background:var(--color-bg)} .landing-features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;max-width:1100px;margin:0 auto} .landing-section-label{text-align:center;margin-bottom:40px} .landing-section-label h2{font-size:clamp(var(--text-2xl),3vw,var(--text-3xl));margin:0 0 10px;color:var(--color-text);font-weight:800} .landing-section-label p{color:var(--color-text-subtle);max-width:540px;margin:0 auto;line-height:1.8;font-size:var(--text-base)} .feature-card{padding:clamp(20px,3vw,28px);background:var(--color-surface);border:1px solid color-mix(in srgb,var(--color-border) 80%,transparent);border-radius:var(--radius-lg,16px);box-sizing:border-box;box-shadow:0 2px 8px rgba(0,0,0,0.02);transition:transform 0.25s ease,box-shadow 0.25s ease,border-color 0.25s ease;display:flex;flex-direction:column;gap:10px;text-align:start} .feature-card:hover{transform:translateY(-3px);border-color:var(--color-primary);box-shadow:0 12px 28px color-mix(in srgb,var(--color-primary) 12%,transparent)} .feature-card-icon{width:48px;height:48px;border-radius:12px;background:color-mix(in srgb,var(--color-primary) 10%,transparent);color:var(--color-primary);display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:4px;flex-shrink:0} .feature-card h3{margin:0;font-size:clamp(1rem,1.4vw,1.15rem);font-weight:700;color:var(--color-text)} .feature-card p{color:var(--color-text-subtle);margin:0;line-height:1.7;font-size:clamp(0.85rem,1.1vw,0.92rem)} /* ── Directory section (متاجرنا) ── */ .directory-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:clamp(12px,2vw,20px);max-width:1100px;margin:0 auto} .directory-card{display:flex;align-items:center;gap:14px;padding:16px 18px;background:var(--color-surface);border:1px solid color-mix(in srgb,var(--color-border) 80%,transparent);border-radius:var(--radius-lg,16px);text-decoration:none;color:var(--color-text);box-sizing:border-box;transition:transform 0.2s ease,box-shadow 0.2s ease,border-color 0.2s ease} .directory-card:hover{transform:translateY(-3px);border-color:var(--color-primary);box-shadow:0 10px 24px color-mix(in srgb,var(--color-primary) 12%,transparent)} .directory-card__logo{width:52px;height:52px;border-radius:12px;overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--color-primary) 8%,transparent);font-size:22px;font-weight:700;color:var(--color-primary)} .directory-card__logo img{width:100%;height:100%;object-fit:cover} .directory-card__body{flex:1;min-width:0} .directory-card__name{margin:0;font-size:clamp(0.95rem,1.2vw,1.05rem);font-weight:700;color:var(--color-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .directory-card__link{display:block;font-size:0.82rem;color:var(--color-text-subtle);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px} .directory-card__arrow{font-size:20px;color:var(--color-text-subtle);flex-shrink:0;transition:transform 0.2s ease,color 0.2s ease} .directory-card:hover .directory-card__arrow{transform:translateX(-4px);color:var(--color-primary)} [data-theme="dark"] .directory-card{background:#0F172A;border-color:color-mix(in srgb,var(--color-border,#334155) 80%,transparent)} [data-theme="dark"] .directory-card:hover{border-color:var(--color-primary);box-shadow:0 10px 24px color-mix(in srgb,var(--color-primary) 20%,transparent)} @media(max-width:480px){.directory-grid{grid-template-columns:1fr;gap:12px}} .landing-pricing{padding:clamp(40px,8vw,80px) clamp(20px,5vw,80px);background:var(--color-surface)} .pricing-card{max-width:420px;margin:0 auto;padding:32px;background:var(--color-surface);border:1px solid color-mix(in srgb,var(--color-border) 80%,transparent);border-radius:var(--radius-lg,16px);border-inline-start:4px solid var(--color-primary);text-align:center;display:flex;flex-direction:column;height:100%;box-sizing:border-box;box-shadow:0 4px 16px rgba(0,0,0,0.03);transition:transform 0.25s ease,box-shadow 0.25s ease} .pricing-card:hover{transform:translateY(-4px);box-shadow:0 16px 36px color-mix(in srgb,var(--color-primary) 12%,transparent)} .pricing-card .price{font-size:2.4rem;font-weight:700;color:var(--color-primary);margin:12px 0 4px} .pricing-card .price-sub{color:var(--color-text-muted);margin:0 0 24px;font-size:var(--text-sm)} .pricing-features{list-style:none;padding:0;margin:0 0 24px;text-align:start;display:grid;gap:10px;flex:1 1 auto} .pricing-card .landing-pricing-link,.pricing-card .button,.pricing-card-actions{margin-top:auto} /* ── High-Converting Bottom Conversion CTA Banner ── */ .landing-bottom-cta{padding:clamp(40px,8vw,80px) clamp(20px,5vw,80px);background:var(--color-bg);box-sizing:border-box} .landing-bottom-cta__inner{max-width:1100px;margin:0 auto;background:linear-gradient(135deg,color-mix(in srgb,var(--color-primary) 12%,var(--color-surface)) 0%,var(--color-surface) 100%);border:1px solid color-mix(in srgb,var(--color-primary) 25%,transparent);border-radius:var(--radius-lg,20px);padding:clamp(32px,5vw,56px);box-sizing:border-box;text-align:center;position:relative;overflow:hidden;box-shadow:0 16px 40px -10px color-mix(in srgb,var(--color-primary) 15%,transparent);display:flex;flex-direction:column;align-items:center;gap:16px} .landing-bottom-cta__glow{position:absolute;width:300px;height:300px;background:var(--color-primary);opacity:0.1;filter:blur(80px);border-radius:50%;top:-50px;inset-inline-end:-50px;pointer-events:none} .landing-bottom-cta h2{font-size:clamp(1.5rem,3vw,2.4rem);font-weight:800;color:var(--color-text);margin:0;line-height:1.25;max-width:760px} .landing-bottom-cta p{font-size:clamp(0.95rem,1.3vw,1.1rem);color:var(--color-text-subtle);margin:0;max-width:620px;line-height:1.7} .landing-bottom-cta__actions{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:10px} .landing-bottom-cta__badges{display:flex;align-items:center;justify-content:center;gap:clamp(12px,2.5vw,24px);flex-wrap:wrap;margin-top:12px;font-size:var(--text-xs,0.85rem);color:var(--color-text-subtle);font-weight:600} .landing-bottom-cta__badges span{display:inline-flex;align-items:center;gap:6px} .landing-bottom-cta__badges i{color:var(--color-success,#10b981)} [data-theme="dark"] .landing-trust-bar{background:color-mix(in srgb,#0F172A 94%,var(--color-primary) 6%);border-color:color-mix(in srgb,var(--color-border,#334155) 80%,transparent)} [data-theme="dark"] .feature-card{background:#0F172A;border-color:color-mix(in srgb,var(--color-border,#334155) 80%,transparent);box-shadow:0 2px 8px rgba(0,0,0,0.3)} [data-theme="dark"] .feature-card:hover{border-color:var(--color-primary);box-shadow:0 12px 28px color-mix(in srgb,var(--color-primary) 20%,transparent)} [data-theme="dark"] .pricing-card{background:#0F172A;border-color:color-mix(in srgb,var(--color-border,#334155) 80%,transparent);box-shadow:0 4px 16px rgba(0,0,0,0.3)} [data-theme="dark"] .pricing-card:hover{box-shadow:0 16px 36px color-mix(in srgb,var(--color-primary) 20%,transparent)} [data-theme="dark"] .landing-hero__logo-card{background:#0F172A;border-color:color-mix(in srgb,var(--color-border,#334155) 80%,transparent);box-shadow:0 24px 80px -20px rgba(0,0,0,0.4)} [data-theme="dark"] .landing-bottom-cta{background:var(--color-surface-2,#0B1120)} [data-theme="dark"] .landing-bottom-cta__inner{background:linear-gradient(135deg,color-mix(in srgb,var(--color-primary) 15%,#0F172A) 0%,#0F172A 100%);border-color:color-mix(in srgb,var(--color-primary) 30%,transparent)} /* ── Flat Billing & Pricing System (V2) ───────────────────────── */ .pricing-plans-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;align-items:stretch;margin-top:24px} .pricing-card-v2{display:flex;flex-direction:column;background:var(--surface,var(--color-surface,#fff));border:1px solid var(--border,var(--color-border,#e2e8f0));border-radius:var(--radius-lg,0);padding:24px;position:relative;transition:transform 0.2s ease,border-color 0.2s ease,box-shadow 0.2s ease;box-shadow:var(--shadow-sm,0 1px 3px rgba(0,0,0,0.05))} .pricing-card-v2:hover{border-color:var(--primary,var(--color-primary,#1F75FE));box-shadow:var(--shadow-md,0 4px 12px rgba(0,0,0,0.08))} .pricing-card-v2--active{border:2px solid var(--primary,var(--color-primary,#1F75FE));background:var(--surface2,var(--color-surface-2,#f8fafc))} .pricing-card-v2--popular{border:2px solid var(--primary,var(--color-primary,#1F75FE))} .pricing-card-v2__badge{position:absolute;top:-12px;inset-inline-end:20px;background:var(--primary,var(--color-primary,#1F75FE));color:#fff;font-size:11px;font-weight:700;padding:4px 12px;border-radius:0;text-transform:uppercase;letter-spacing:0.05em} .pricing-card-v2__name{font-size:var(--text-lg,16px);font-weight:700;color:var(--text,var(--color-text,#0f172a));margin:0 0 6px} .pricing-card-v2__desc{font-size:var(--text-xs,12px);color:var(--text-secondary,var(--color-text-subtle,#475569));margin:0 0 16px;line-height:1.5;min-height:36px} .pricing-card-v2__price-box{display:flex;align-items:baseline;gap:4px;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--border,var(--color-border,#e2e8f0))} .pricing-card-v2__amount{font-size:32px;font-weight:800;color:var(--text,var(--color-text,#0f172a));line-height:1} .pricing-card-v2__period{font-size:var(--text-xs,12px);color:var(--text-secondary,var(--color-text-subtle,#475569));font-weight:500} .pricing-card-v2__features{flex:1;margin-bottom:24px} .pricing-card-v2__features ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px} .pricing-card-v2__features li{display:flex;align-items:center;gap:10px;font-size:var(--text-sm,13px);color:var(--text,var(--color-text,#0f172a))} .pricing-card-v2__features .check-icon{width:18px;height:18px;color:var(--primary,var(--color-primary,#1F75FE));flex-shrink:0} .pricing-card-v2__actions{margin-top:auto;display:flex;flex-direction:column;gap:8px} .pricing-card-v2__actions form{width:100%} .pricing-card-v2__actions .button,.pricing-card-v2__actions .primary-button,.pricing-card-v2__actions .secondary-button{width:100%;text-align:center;justify-content:center} .showcase-hero{padding:clamp(40px,8vw,72px) clamp(20px,5vw,80px) clamp(24px,5vw,40px);text-align:center;background:var(--color-surface)} .showcase-hero h1{font-size:var(--text-3xl);margin:0 0 8px;line-height:1.2;color:var(--color-text)} .showcase-hero p{color:var(--color-text-subtle);margin:0;font-size:var(--text-base)} .showcase-empty{padding:clamp(60px,10vw,100px) 20px;text-align:center;color:var(--color-text-muted);font-size:var(--text-base)} .showcase-section{padding:0 clamp(20px,5vw,80px) clamp(32px,6vw,56px);max-width:1200px;margin:0 auto} .showcase-section h2{font-size:var(--text-xl);margin:0 0 4px;color:var(--color-text)} .showcase-section__desc{color:var(--color-text-subtle);margin:0 0 20px;font-size:var(--text-sm)} .product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px} @media(max-width:768px){ .product-grid{grid-template-columns:repeat(2,1fr)!important;gap:12px!important} .product-card-v2 .product-card__image, .product-card-v2 .product-card__image--placeholder, .product-card-v2 img.product-card__image { height: auto !important; aspect-ratio: 1/1 !important; } } .product-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden;transition:box-shadow 0.15s} .product-card:hover{box-shadow:var(--shadow-md)} .product-card__image{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;background:var(--color-bg)} .product-card__image--placeholder{display:flex;align-items:center;justify-content:center;font-size:2.5rem;color:var(--color-text-muted)} .product-card__body{padding:14px} .product-card__body h3{margin:0 0 6px;font-size:var(--text-base);font-weight:600;color:var(--color-text)} .product-card__body p{margin:0 0 10px;font-size:var(--text-sm);color:var(--color-text-subtle);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .product-card__price{font-weight:700;color:var(--color-primary);font-size:var(--text-base)} .pricing-features li{display:flex;align-items:center;gap:8px;color:var(--color-text);font-size:var(--text-sm)} .pricing-features li::before{content:"✓";color:var(--color-success);font-weight:700;flex-shrink:0} /* public shell wrapper: ضيّق للمحتوى العام، يتوسع تلقائياً عبر الـ Container الخاص */ .public-shell-main:has(.tc-home-hero){padding-block:0!important} .public-body-wrap{max-width:1200px;margin:0 auto;width:100%;box-sizing:border-box} .public-body-wrap:has(.tc-home-hero){max-width:none;padding:0} .landing-section-white{background:var(--color-page-background,var(--color-bg,#f8fafc));padding:clamp(40px,8vw,80px) clamp(20px,5vw,80px)} .landing-section-gray{background:var(--color-bg);padding:clamp(40px,8vw,80px) clamp(20px,5vw,80px)} .landing-grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(16px,3vw,32px);max-width:1100px;margin:0 auto;align-items:center} .landing-grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:clamp(12px,2vw,24px);max-width:1100px;margin:0 auto} @media(max-width:480px){ .landing-grid-2{grid-template-columns:1fr;gap:16px} .landing-grid-3{grid-template-columns:1fr;gap:12px} } /* ═══ TopCar Unified Design System ═══ */ .topcar-showcase-container { width:100%; max-width:1200px; margin:0 auto; box-sizing:border-box; } .topcar-showcase-container .landing-grid-3 { max-width:none; width:100%; } .topcar-showcase-container .landing-grid-2 { max-width:none; width:100%; } .topcar-showcase-container .landing-section-label { margin-inline:0; } .tc-home-hero { position:relative; background:linear-gradient(135deg,#090d16 0%,#0d1b35 50%,#080c14 100%); padding:clamp(60px,10vw,130px) clamp(12px,4vw,36px) clamp(32px,5vw,60px); margin-bottom:36px; overflow:hidden; width:100%; box-sizing:border-box; border-radius:var(--radius-lg,0); } @media(max-width:480px){ .tc-home-hero { padding:clamp(48px,12vw,80px) var(--space-page,8px) clamp(28px,6vw,40px); margin-bottom:24px; } } .tc-home-hero::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 75% 60% at 50% 10%,rgba(31,117,254,.25) 0%,transparent 70%); pointer-events:none; } .tc-home-hero-inner { position:relative; z-index:2; max-width:860px; margin:0 auto; text-align:center; } .tc-badge { display:inline-flex; align-items:center; gap:8px; background:rgba(31,117,254,.16); color:#60a5fa; font-size:13px; font-weight:700; padding:6px 18px; border-radius:var(--radius-full,0); border:1px solid rgba(96,165,250,.25); margin-bottom:20px; backdrop-filter:blur(8px); } .tc-hero-title { font-size:clamp(1.75rem,4vw,2.75rem); font-weight:900; color:#fff; line-height:1.25; margin:0 0 16px; letter-spacing:-.02em; } .tc-hero-sub { font-size:clamp(.92rem,1.8vw,1.05rem); color:#94a3b8; line-height:1.75; margin:0 0 32px; max-width:660px; margin-inline:auto; } .tc-search-box { display:grid; grid-template-columns:1fr 1fr 1fr 1fr auto; gap:12px; background:rgba(15,23,42,.75); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); padding:20px; border-radius:var(--radius-md,0); border:1px solid rgba(255,255,255,.15); box-shadow:var(--shadow-md, 0 10px 30px rgba(0,0,0,.25)); text-align:start; align-items:end; } @media(max-width:900px){ .tc-search-box { grid-template-columns:1fr 1fr; gap:10px; padding:14px; } .tc-search-box .tc-search-btn { grid-column:1/-1; } } @media(max-width:480px){ .tc-search-box { grid-template-columns:1fr; gap:8px; padding:12px; } } .tc-search-box label { display:block; font-size:12px; font-weight:700; color:#cbd5e1; margin-bottom:6px; } .tc-search-input { width:100%; height:44px; background:rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.18); border-radius:var(--radius-sm,0); padding:0 14px; font-size:13.5px; font-family:inherit; box-sizing:border-box; outline:none; transition:border-color .2s,box-shadow .2s,background .2s; } .tc-search-input:focus { border-color:var(--primary, #1F75FE); background:rgba(255,255,255,.14); box-shadow:0 0 0 3px rgba(31,117,254,.3); } .tc-search-input option { background:#0f172a; color:#fff; } .tc-search-btn { height:40px; background:linear-gradient(135deg,var(--primary, #1F75FE) 0%,#1558c9 100%); color:#fff; font-weight:700; border-radius:var(--radius-sm,0); font-size:var(--text-sm,14px); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:0 24px; white-space:nowrap; transition:transform .15s,box-shadow .2s; box-shadow:0 4px 14px rgba(31,117,254,.4); border:none; } .tc-search-btn:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(31,117,254,.5); } .tc-home-content { max-width:1200px; margin:0 auto; padding:0 0 48px; width:100%; box-sizing:border-box; } .tc-cats { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-bottom:36px; } @media(max-width:640px){ .tc-cats { grid-template-columns:repeat(3,1fr); gap:10px; } } @media(max-width:380px){ .tc-cats { grid-template-columns:repeat(2,1fr); } } .tc-stats { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:36px; } .tc-stat { flex:1; min-width:140px; background:var(--surface); border:1px solid var(--border); padding:18px 20px; border-radius:var(--radius-md,0); display:flex; align-items:center; gap:14px; box-shadow:var(--shadow-xs); } .tc-stat-icon { width:46px; height:46px; border-radius:var(--radius-sm,0); display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0; } .tc-stat__value { font-size:22px; font-weight:800; color:var(--text); line-height:1 } .tc-stat__label { font-size:var(--text-xs); color:var(--text-secondary); margin-top:2px } @media(max-width:480px){ .tc-stat { min-width:100px; padding:14px 16px; gap:10px } .tc-stat-icon { width:38px; height:38px; font-size:18px } .tc-stat__value { font-size:18px } } /* ── Category quick-link cards (classifieds home) ── */ .tc-cat-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:var(--space-4); margin-bottom:var(--space-8) } .tc-cat-card { text-align:center; padding:var(--space-5) var(--space-3); text-decoration:none; color:var(--color-text) } .tc-cat-card__icon { font-size:2rem; margin-bottom:var(--space-2) } .tc-cat-card__label { font-weight:700; font-size:var(--text-sm) } .tc-listings-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-bottom:36px; } @media(max-width:1024px){ .tc-listings-grid { grid-template-columns:repeat(3,1fr); } } @media(max-width:700px){ .tc-listings-grid { grid-template-columns:repeat(2,1fr); gap:12px; } } @media(max-width:380px){ .tc-listings-grid { grid-template-columns:repeat(2,1fr); } } .tc-section-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-bottom:20px; padding-bottom:14px; border-bottom:2px solid var(--border); } .tc-section-title { margin:0; font-size:1.25rem; font-weight:900; color:var(--text); display:flex; align-items:center; gap:8px; } .tc-view-all { display:inline-flex; align-items:center; gap:6px; padding:7px 18px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm,0); color:var(--text); text-decoration:none; font-size:13px; font-weight:700; transition:all .15s; } .tc-view-all:hover { border-color:var(--primary); color:var(--primary); transform:translateX(-2px); } .tc-services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:36px; } @media(max-width:768px){ .tc-services-grid { grid-template-columns:repeat(2,1fr); gap:12px; } } @media(max-width:480px){ .tc-services-grid { grid-template-columns:1fr; } } .tc-service-card { display:flex; flex-direction:column; gap:12px; background:var(--surface); border:1px solid var(--border); padding:26px 22px; border-radius:var(--radius-md,0); text-decoration:none; color:var(--text); transition:transform .2s,box-shadow .2s; border-top:4px solid var(--primary); box-shadow:var(--shadow-xs); } .tc-service-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); } .tc-service-icon { font-size:2.2rem; line-height:1; } .tc-service-card h3 { margin:0; font-size:1.05rem; font-weight:800; color:var(--text); } .tc-service-card p { margin:0; font-size:.88rem; color:var(--text-secondary); line-height:1.7; } .tc-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-bottom:36px; } @media(max-width:768px){ .tc-steps { grid-template-columns:repeat(2,1fr); } } @media(max-width:480px){ .tc-steps { grid-template-columns:1fr; gap:16px; } } .tc-step { text-align:center; padding:26px 18px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md,0); box-shadow:var(--shadow-xs); } .tc-step-num { display:inline-flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:var(--radius-full,0); background:rgba(31,117,254,.12); color:var(--primary); font-size:1.35rem; font-weight:900; margin-bottom:16px; } .tc-step h3 { margin:0 0 8px; font-size:1rem; font-weight:800; color:var(--text); } .tc-step p { margin:0; font-size:.85rem; color:var(--text-secondary); line-height:1.7; } .tc-about { display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:center; margin-bottom:36px; background:var(--surface); border:1px solid var(--border); padding:32px; border-radius:var(--radius-md,0); box-shadow:var(--shadow-xs); } @media(max-width:768px){ .tc-about { grid-template-columns:1fr; gap:24px; padding:20px; } } .tc-about-text h2 { margin:0 0 16px; font-size:1.5rem; font-weight:900; color:var(--text); } .tc-about-text p { margin:0 0 16px; font-size:.93rem; color:var(--text-secondary); line-height:1.8; } .tc-about-stats { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:20px; } .tc-about-stat { background:var(--surface2, #f8fafc); border:1px solid var(--border); padding:16px; border-radius:var(--radius-sm,0); text-align:center; } .tc-about-stat-val { font-size:1.65rem; font-weight:900; color:var(--primary); } .tc-about-stat-lbl { font-size:.8rem; color:var(--text-secondary); margin-top:4px; } .tc-about-visual { display:flex; align-items:center; justify-content:center; aspect-ratio:1/1; background:linear-gradient(135deg,rgba(31,117,254,.08) 0%,var(--surface2) 100%); border:1px solid var(--border); border-radius:var(--radius-md,0); font-size:5rem; } .tc-about-logo { max-width:60%; max-height:60%; object-fit:contain } .tc-about-cta { margin-top:20px } /* Showcase Cards (filter column removed — using central ui-fbar now) */ @media(min-width:1400px){ .topcar-showcase-container .landing-grid-3 { grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); } } @media(max-width:768px){ .topcar-showcase-container .landing-grid-3 { grid-template-columns:repeat(2, 1fr) !important; gap:12px !important; } } @media(max-width:480px){ .topcar-showcase-container .landing-grid-3 { grid-template-columns:repeat(2, 1fr) !important; gap:12px !important; } } .landing-card{background:var(--color-surface);border:1px solid var(--color-border);padding:32px;border-radius:var(--radius-md,0);box-shadow:var(--shadow-sm);transition:transform 0.2s,box-shadow 0.2s} .landing-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--color-primary)} /* ── Service teaser cards (classifieds home) ────────────── */ .tc-service-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:var(--space-3)} @media(max-width:480px){.tc-service-grid{grid-template-columns:repeat(2,1fr);gap:var(--space-2)}} @media(max-width:360px){.tc-service-grid{grid-template-columns:1fr;gap:var(--space-2)}} .tc-service-card{display:flex;flex-direction:column;text-decoration:none;color:var(--color-text);padding:var(--space-5)} .tc-service-card__icon{font-size:2rem;margin-bottom:var(--space-3)} .tc-service-card__title{font-size:var(--text-md);font-weight:700;margin:0 0 var(--space-2)} .tc-service-card__text{font-size:var(--text-sm);color:var(--color-text-muted);margin:0;line-height:1.5} /* ── Join section cards (classifieds home) ──────────────── */ .tc-join-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-bottom:32px} @media(max-width:550px){.tc-join-grid{grid-template-columns:1fr}} .tc-join-card{background:var(--surface);border:2px solid var(--border);border-top:3px solid var(--primary);border-radius:var(--radius-md,0);padding:32px 28px;display:flex;flex-direction:column;gap:20px;box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s;position:relative;overflow:hidden} .tc-join-card--featured{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dim) 100%);border:0;color:#fff;box-shadow:0 10px 32px -10px rgba(var(--color-primary-rgb,31,117,254),.45)} .tc-join-card__deco{position:absolute;top:-20px;right:-20px;width:120px;height:120px;background:var(--primary-ghost);pointer-events:none} .tc-join-card--featured .tc-join-card__deco{background:rgba(255,255,255,.10)} .tc-join-card__deco--bottom{position:absolute;bottom:-30px;left:-20px;width:160px;height:160px;background:rgba(255,255,255,.06);pointer-events:none} .tc-join-card__head{display:flex;align-items:center;gap:16px;position:relative;z-index:1} .tc-join-card__avatar{width:64px;height:64px;background:var(--primary-ghost);border-radius:var(--radius-sm,0);display:flex;align-items:center;justify-content:center;font-size:2rem;flex-shrink:0} .tc-join-card--featured .tc-join-card__avatar{background:rgba(255,255,255,.18)} .tc-join-card__title{margin:0 0 4px;font-size:1.2rem;font-weight:800;color:var(--text)} .tc-join-card--featured .tc-join-card__title{color:#fff} .tc-join-card__badge{font-size:var(--text-xs);background:var(--color-success-subtle);color:var(--success);padding:3px 10px;border-radius:0;font-weight:700} .tc-join-card--featured .tc-join-card__badge{background:rgba(255,255,255,.20);color:#fff} .tc-join-card__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;position:relative;z-index:1} .tc-join-card__list-item{display:flex;align-items:center;gap:10px;font-size:var(--text-sm);color:var(--text)} .tc-join-card--featured .tc-join-card__list-item{color:rgba(255,255,255,.92)} .tc-join-card__check{width:22px;height:22px;background:var(--color-success-subtle);color:var(--success);border-radius:0;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;flex-shrink:0} .tc-join-card--featured .tc-join-card__check{background:rgba(255,255,255,.20);color:#fff} .tc-join-card__actions{display:flex;flex-direction:column;gap:10px;margin-top:auto;position:relative;z-index:1} .tc-join-card__btn{height:40px;font-weight:700;font-size:var(--text-sm)} .tc-join-card__btn--alt{height:40px;font-weight:600;font-size:var(--text-xs)} .tc-join-card__note{margin:0;font-size:var(--text-xs);color:rgba(255,255,255,.70);text-align:center} @media(max-width:768px){.tc-join-grid{grid-template-columns:1fr;gap:16px}.tc-join-card{padding:24px 20px}} /* ── CTA banner grid (classifieds home) ─────────────────── */ .tc-cta-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin:40px 0} .tc-cta-banner{position:relative;background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dim) 100%);color:#fff;padding:32px 28px;overflow:hidden;display:flex;flex-direction:column;gap:18px;border-radius:var(--radius-md,0);box-shadow:0 10px 32px -10px rgba(var(--color-primary-rgb,31,117,254),.45)} .tc-cta-banner--alt{background:linear-gradient(135deg,var(--primary-dim) 0%,var(--primary) 100%)} .tc-cta-banner__deco{position:absolute;top:-30px;left:-30px;width:160px;height:160px;background:rgba(255,255,255,.08);pointer-events:none} .tc-cta-banner__icon{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;background:rgba(255,255,255,.18);font-size:1.8rem;border-radius:var(--radius-sm,0)} .tc-cta-banner__title{font-size:1.3rem;font-weight:800;margin:0 0 10px;color:#fff} .tc-cta-banner__text{margin:0;opacity:.92;font-size:var(--text-sm);line-height:1.7} .tc-cta-banner__btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:#fff;color:var(--primary-dim);font-weight:700;height:40px;text-decoration:none;font-size:var(--text-sm);align-self:flex-start;padding:0 24px;border-radius:var(--radius-sm,0);transition:transform .15s} .tc-cta-banner__btn:hover{transform:translateY(-2px)} @media(max-width:768px){.tc-cta-grid{grid-template-columns:1fr;gap:16px}.tc-cta-banner{padding:24px 20px}} /* ── Blog cards & article prose ───────────────────────── */ .blog-page{max-width:1200px;margin:0 auto;padding:var(--space-8,var(--space-8,32px)) var(--space-page,16px)} .blog-page__header{text-align:center;max-width:680px;margin:0 auto var(--space-10,40px)} .blog-page__badge{display:inline-flex;align-items:center;gap:6px;background:var(--color-primary-subtle,var(--primary-ghost,rgba(31,117,254,0.1)));color:var(--color-primary,var(--primary,#1f75fe));font-size:var(--text-xs,12px);font-weight:700;padding:6px 14px;border-radius:var(--radius-sm,0);margin-bottom:14px} .blog-page__title{font-size:clamp(1.5rem,4vw,2.25rem);font-weight:800;letter-spacing:-0.02em;margin:0 0 12px;color:var(--color-text,var(--text,#111827))} .blog-page__subtitle{font-size:clamp(0.95rem,2.5vw,1.0625rem);color:var(--color-text-subtle,var(--text2,#4b5563));line-height:1.6;margin:0} .blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:24px;align-items:stretch} .blog-empty{text-align:center;padding:60px 20px;background:var(--color-surface,var(--surface,#fff));border:1px dashed var(--color-border,var(--border,#e5e7eb));border-radius:var(--radius-md,0)} .blog-empty i{font-size:3rem;color:var(--color-text-subtle,var(--text2));display:block;margin-bottom:12px} .blog-empty h3{margin:0 0 8px;color:var(--color-text,var(--text));font-size:var(--text-lg,1.125rem)} .blog-empty p{color:var(--color-text-subtle,var(--text2));margin:0;font-size:var(--text-sm,0.875rem)} .blog-card{display:flex;flex-direction:column;background:var(--color-surface,var(--surface,#fff));border:1px solid var(--color-border,var(--border,#e2e8f0));border-radius:var(--radius-md,0);text-decoration:none;color:inherit;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;box-shadow:0 2px 8px rgba(0,0,0,.04)} .blog-card:hover{transform:translateY(-4px);box-shadow:0 12px 30px -8px rgba(0,0,0,.12);border-color:var(--color-primary,var(--primary,#1f75fe))} .blog-card__image-wrap{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:var(--color-surface-2,var(--surface2,#f3f4f6))} .blog-card__image{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.16,1,.3,1)} .blog-card:hover .blog-card__image{transform:scale(1.05)} .blog-card:hover .blog-card__title{color:var(--color-primary,var(--primary,#1f75fe))} .blog-card__body{padding:20px;display:flex;flex-direction:column;flex:1;gap:10px} .blog-card__meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:var(--text-xs,12px);color:var(--color-text-subtle,var(--text2,#6b7280));margin:0} .blog-card__meta-dot{opacity:0.4} .blog-card__title{margin:0;font-size:var(--text-lg,1.125rem);font-weight:700;line-height:1.4;color:var(--color-text,var(--text,#111827));transition:color .2s ease;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .blog-card__excerpt{color:var(--color-text-subtle,var(--text2,#4b5563));font-size:var(--text-sm,0.875rem);line-height:1.6;margin:0;flex:1;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .blog-card__cta{display:flex;align-items:center;font-size:var(--text-sm,0.875rem);font-weight:600;color:var(--color-primary,var(--primary,#1f75fe));gap:6px;margin-top:auto} .blog-card:hover .blog-card__cta i{transform:translateX(-4px)} /* ── Article page (centralized — works in ALL shells: landingContentPage + publicShell) ── */ .article-page{ background:var(--color-surface,var(--surface,#fff)); border:1px solid var(--color-border,var(--border,#e5e7eb)); border-radius:0; /* لا حواف دائرية — موحّد مركزي */ padding:clamp(24px,4vw,48px); box-shadow:0 1px 3px rgba(15,23,42,0.04),0 8px 24px -12px rgba(15,23,42,0.08); margin:0 auto; max-width:1100px; } .article-page__header{ margin-bottom:clamp(20px,3vw,32px); padding-bottom:clamp(20px,3vw,28px); border-bottom:1px solid var(--color-border,var(--border,#e5e7eb)); } .article-page__meta-row{ display:flex;align-items:center;justify-content:space-between;gap:12px; margin-bottom:18px; padding:10px 18px; border-radius:var(--radius-md,8px); background:color-mix(in srgb,var(--color-primary,var(--primary,#1f75fe)) 8%,var(--color-surface,var(--surface,#ffffff))); border:1px solid color-mix(in srgb,var(--color-primary,var(--primary,#1f75fe)) 18%,transparent); } .article-page__meta-item{ display:inline-flex;align-items:center;gap:6px; font-size:var(--text-sm,13px);color:var(--color-text-subtle,var(--text2,#64748b)); font-weight:600;white-space:nowrap; } .article-page__meta-item i{font-size:1rem;color:var(--color-primary,var(--primary,#1f75fe))} .article-page__meta-item--date{margin-inline-end:auto} .article-page__meta-item--read{margin-inline-start:auto} .article-page__title{ font-size:clamp(1.5rem,3.5vw,2.25rem); font-weight:800;line-height:1.32;letter-spacing:-0.02em; color:var(--color-text,var(--text,#111827)); margin:0 0 14px;text-wrap:balance; } .article-page__excerpt{ font-size:clamp(1rem,2vw,1.125rem); line-height:1.7;color:var(--color-text-subtle,var(--text2,#4b5563)); margin:0 0 20px;text-wrap:pretty; } .article-hero-cover{position:relative;width:100%;aspect-ratio:16/9;max-height:420px;overflow:hidden;border-radius:0;margin:24px 0 32px;box-shadow:0 12px 32px -8px rgba(0,0,0,0.12);background:var(--color-surface-2,var(--surface2,#f3f4f6))} .article-hero-cover img{width:100%;height:100%;object-fit:cover;display:block} .article-content{font-size:clamp(1rem,2.5vw,1.0625rem);line-height:1.9;color:var(--color-text,var(--text,#1f2937))} .article-content p{margin-bottom:1.4em} .article-content h2,.article-content h3{font-weight:700;margin-top:1.8em;margin-bottom:.8em;color:var(--color-text,var(--text,#111827))} .article-content img{max-width:100%;height:auto;border-radius:0;margin:1.5em 0;box-shadow:0 4px 16px rgba(0,0,0,.08)} .article-content blockquote{border-inline-start:4px solid var(--color-primary,var(--primary,#1f75fe));padding:12px 20px;margin:1.5em 0;background:var(--color-surface-2,var(--surface2,#f9fafb));border-radius:0;font-style:italic} .article-content ul,.article-content ol{margin:1.2em 0;padding-inline-start:1.5em} .article-content li{margin-bottom:0.5em} .article-content a{color:var(--color-primary,var(--primary,#1f75fe));text-decoration:underline} @media(max-width:768px){ .blog-page{padding:var(--space-6,24px) var(--space-page,12px)} .blog-grid{gap:16px} .blog-card__body{padding:16px} .article-page{padding:20px} .article-page__header{margin-bottom:20px;padding-bottom:20px} .article-page__meta-row{gap:8px;margin-bottom:14px;flex-direction:column;align-items:stretch} .article-page__meta-item--date{margin-inline-end:0} .article-page__meta-item--read{margin-inline-start:0} .article-hero-cover{aspect-ratio:4/3;max-height:280px;margin:16px 0 24px} .article-content{line-height:1.85} } @media(max-width:480px){ .blog-grid{grid-template-columns:1fr} .blog-card__meta{font-size:11px;gap:6px} } [data-theme="dark"] .blog-card{box-shadow:0 2px 8px rgba(0,0,0,.2)} [data-theme="dark"] .blog-card:hover{box-shadow:0 12px 30px -8px rgba(0,0,0,.4)} [data-theme="dark"] .article-page{ background:var(--surface,#1e293b); border-color:var(--border,#334155); box-shadow:0 1px 3px rgba(0,0,0,0.2),0 8px 24px -12px rgba(0,0,0,0.4); } [data-theme="dark"] .article-page__title{color:var(--text,#f8fafc)} [data-theme="dark"] .article-page__excerpt{color:var(--text3,#94a3b8)} [data-theme="dark"] .article-page__meta-row{background:color-mix(in srgb,var(--color-primary,var(--primary,#1f75fe)) 12%,var(--surface,#1e293b));border-color:color-mix(in srgb,var(--color-primary,var(--primary,#1f75fe)) 22%,transparent)} [data-theme="dark"] .article-page__meta-item{color:var(--text3,#94a3b8)} [data-theme="dark"] .article-page__meta-item i{color:var(--text3,#64748b)} [data-theme="dark"] .article-content{color:var(--text2,#e2e8f0)} [data-theme="dark"] .article-content h2,[data-theme="dark"] .article-content h3{color:var(--text,#f8fafc)} [data-theme="dark"] .article-content blockquote{background:var(--surface2,#1e293b)} .landing-icon-box{width:56px;height:56px;background:var(--color-primary-subtle);color:var(--color-primary);display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);margin-bottom:24px;font-size:24px} .landing-step-num{font-size:3rem;font-weight:800;color:var(--color-primary-subtle);margin-bottom:16px;line-height:1} .landing-video-wrapper{max-width:900px;margin:0 auto;position:relative;aspect-ratio:16/9;background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-darker,#0f4f9e) 100%);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-md)} .landing-video-overlay{position:absolute;inset:0;background:rgba(0,0,0,0.15);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;cursor:pointer;transition:background 0.3s;text-align:center} .landing-video-wrapper:hover .landing-video-overlay{background:rgba(0,0,0,0.5)} .landing-play-btn{width:64px;height:64px;background:var(--color-primary);border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:16px;font-size:24px;box-shadow:0 4px 12px rgba(0,0,0,0.2)} .landing-badge{display:inline-block;padding:6px 12px;background:var(--color-primary-subtle);color:var(--color-primary);font-weight:600;font-size:var(--text-sm);border-radius:0;margin-bottom:16px} .landing-stat{font-size:2.5rem;font-weight:800;color:var(--color-primary);line-height:1;margin-bottom:8px} .landing-value-box{background:var(--color-primary);color:#fff;padding:clamp(40px,8vw,80px) clamp(20px,5vw,80px);border-radius:var(--radius-md);margin:0 auto;max-width:1100px;text-align:center} .landing-value-card{background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);padding:24px;border-radius:var(--radius-sm)} .landing-testimonial{background:var(--color-surface);border:1px solid var(--color-border);padding:32px;border-radius:var(--radius-md);box-shadow:var(--shadow-sm)} .landing-testimonial-text{font-size:var(--text-lg);line-height:1.8;color:var(--color-text);font-style:italic;margin-bottom:24px} .landing-testimonial-author{display:flex;align-items:center;gap:16px} .landing-testimonial-author img{width:48px;height:48px;border-radius:50%;object-fit:cover} .landing-footer{background:#0F172A;color:#b6c2cf;padding:0} .landing-footer a{color:#b6c2cf;text-decoration:none;transition:color 0.2s} .landing-footer a:hover{color:#fff} .landing-footer__inner{max-width:1200px;margin:0 auto;padding:0 clamp(20px,5vw,80px)} .landing-footer__cta{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:3.5rem 0;border-bottom:1px solid rgba(255,255,255,0.08);flex-wrap:wrap} .landing-footer__cta-text h2{color:#fff;font-size:1.8rem;font-weight:800;margin:0} .landing-footer__cta-btn{background:var(--primary,#1F75FE);color:#fff !important;padding:0.8rem 2rem;border-radius:var(--radius-md,0);font-weight:700;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;transition:opacity 0.2s;max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis} .landing-footer__cta-btn:hover{opacity:0.9;color:#fff !important} .landing-footer__brand{text-align:center;padding:3rem 0 1.5rem} .landing-footer__logo{display:inline-flex;flex-direction:column;align-items:center;gap:10px;font-size:1.5rem;font-weight:900;color:#fff !important;text-decoration:none} .landing-footer__logo .brand-mark{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;background:var(--primary,#1F75FE);color:#fff;border-radius:var(--radius-sm,0);font-size:1.2rem} .landing-footer__logo .brand-logo{height:40px;width:auto} .landing-footer__logo strong{color:#fff} .landing-footer__socials{display:flex;justify-content:center;gap:1rem;margin-bottom:3rem} .landing-footer__social{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,0.06);color:#fff !important;font-size:1.1rem;transition:background 0.2s,opacity 0.2s} .landing-footer__social:hover{opacity:0.85} .landing-footer__social--facebook{background:#1877F2} .landing-footer__social--instagram{background:radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%)} .landing-footer__social--twitter{background:#000000} .landing-footer__social--whatsapp{background:#25D366} .landing-footer__social--tiktok{background:#000000} .landing-footer__social--youtube{background:#FF0000} .landing-footer__social--linkedin{background:#0A66C2} .landing-footer__social--telegram{background:#26A5E4} .landing-footer__social--snapchat{background:#FFFC00;color:#000 !important} .landing-footer__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3rem;padding-bottom:3rem;border-bottom:1px solid rgba(255,255,255,0.08);text-align:center} .landing-footer__grid--4col{grid-template-columns:repeat(4,1fr);gap:2rem} .landing-footer__col h5{color:#fff;font-size:1.1rem;font-weight:800;margin:0 0 1.5rem} .landing-footer__col ul{list-style:none;padding:0;margin:0} .landing-footer__col ul li{margin-bottom:0.8rem} .landing-footer__col ul li a{font-size:var(--text-sm,0.9rem);color:#b6c2cf !important} .landing-footer__col ul li a:hover{color:#fff !important} .landing-footer__bottom{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:2rem 0;flex-wrap:wrap} .landing-footer__copyright{font-size:var(--text-sm,0.85rem);color:#8895a6} .landing-footer__copyright strong{color:#fff} .landing-footer__copyright a{text-decoration:none;color:#8895a6 !important;transition:color 0.2s} .landing-footer__copyright a:hover{color:#fff !important} .landing-footer__copyright a strong{color:inherit} .landing-footer__bottom-links{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap} .landing-footer__legal{display:flex;gap:1.5rem} .landing-footer__legal a{font-size:var(--text-sm,0.85rem);color:#8895a6 !important} .landing-footer__legal a:hover{color:#fff !important} @media(max-width:1024px){ .landing-footer__grid--4col{grid-template-columns:repeat(2,1fr);gap:2rem 1.5rem} } @media(max-width:768px){ .landing-footer__cta{flex-direction:column;text-align:center;padding:2.5rem 1.5rem;gap:1.5rem} .landing-footer__cta-btn{width:100%;justify-content:center} .landing-footer__grid{grid-template-columns:repeat(2,1fr);gap:2rem 1.5rem} .landing-footer__grid--4col{grid-template-columns:repeat(2,1fr);gap:1.5rem} .landing-footer__bottom{flex-direction:column;text-align:center;gap:1rem} .landing-footer__bottom-links{flex-direction:column;gap:1rem} } @media(max-width:480px){ .landing-footer__grid{grid-template-columns:1fr;gap:2rem} .landing-footer__grid--4col{grid-template-columns:1fr;gap:2rem} .landing-footer__cta-text h2{font-size:1.4rem} .landing-footer__social{width:38px;height:38px;font-size:1rem} } /* ── Hide scrollbar on desktop dashboards ─────────────────── */ @media(min-width:900px){html:has(.dashboard-shell){scrollbar-width:none}html:has(.dashboard-shell)::-webkit-scrollbar{display:none}} /* ── Collapsed sidebar ────────────────────────────────────── */ .sidebar-collapsed{--sidebar-w:56px} /* Removed .sidebar-collapsed .main margin to fix layout gap */ @media(min-width:1024px){.sidebar-collapsed .dashboard-shell,.sidebar-collapsed .shell{grid-template-columns:56px 1fr}.sidebar-collapsed .dashboard-shell.has-filter-aside,.sidebar-collapsed .shell.has-filter-aside{grid-template-columns:56px 1fr var(--filter-drawer-w,288px)}}@media(min-width:769px) and (max-width:1023px){.sidebar-collapsed .dashboard-shell,.sidebar-collapsed .shell{grid-template-columns:56px 1fr}} .sidebar-collapsed .brand-name,.sidebar-collapsed .nav-label{display:none} .sidebar-collapsed .nav a{justify-content:center;padding:10px} .sidebar-collapsed .nav-group-caret{display:none} .sidebar-collapsed .nav-group-header{justify-content:center;padding:10px} .sidebar-collapsed .nav-group-items{display:none} .sidebar-collapsed .nav-group[aria-expanded="true"] .nav-group-items{display:none} .sidebar-collapsed .sidebar__header{padding:12px 8px} /* ── Mobile / Responsive ──────────────────────────────────── */ @media(max-width:899px){ .auth-shell{flex-direction:column;} .auth-visual{display:none} .auth-panel{padding:24px 20px;justify-content:flex-start;align-items:center;padding-top:calc(72px + env(safe-area-inset-top,0));min-height:100vh;overflow-y:auto;} .auth-brand.mobile-only{display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0 auto 28px;font-size:var(--text-xl);gap:10px;text-align:center;} .auth-brand.mobile-only .brand-logo{height:50px;width:auto;max-height:50px;} .auth-brand.mobile-only .brand-mark{font-size:26px;width:50px;height:50px;display:flex;align-items:center;justify-content:center;background:var(--theme-primary, var(--color-primary));color:#fff;border-radius:var(--radius-md);font-weight:700;} .auth-brand.mobile-only .auth-brand-initial{width:50px;height:50px;font-size:1.5rem;} .auth-footer.mobile-only{display:block;margin-top:auto;padding-top:24px;text-align:center;font-size:var(--text-sm);color:var(--color-text-subtle);} /* ── Auth mobile optimizations — تجاوب صفحات تسجيل الدخول/الإنشاء ── */ .auth-card{max-width:100%;padding:0 4px;margin:0 auto;} .auth-card h1{font-size:var(--text-2xl);line-height:1.25} .auth-card > p{font-size:var(--text-sm);margin-bottom:20px} .auth-form{gap:10px} .auth-form .field-control{font-size:16px !important;min-height:48px;padding:12px 14px} .auth-form .primary-button{min-height:48px;font-size:var(--text-base);padding:14px 20px} .auth-input-joined{flex-wrap:nowrap;gap:0} .auth-input-joined .field-control--locked-affix{font-size:var(--text-xs);padding:12px 10px;white-space:nowrap;flex-shrink:0;max-width:45%} .auth-input-joined--ltr-phone .field-control--locked-affix{font-size:var(--text-sm);max-width:80px} .auth-input-feedback{font-size:var(--text-xs)} .auth-link{margin-top:20px} .auth-theme-toggle{top:calc(16px + env(safe-area-inset-top,0));inset-inline-end:calc(16px + env(safe-area-inset-right,0))} .auth-theme-toggle .notif-bell-btn{width:40px;height:40px} .auth-brand.mobile-only{margin-bottom:20px} .auth-brand.mobile-only .brand-logo{height:50px;max-height:50px} .auth-brand.mobile-only .brand-mark{font-size:26px;width:50px;height:50px} .auth-mfa-help{font-size:var(--text-xs)} .dashboard-shell{display:block;position:relative} .dashboard-shell::after{content:"";position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(9,30,66,0.5);z-index:998;opacity:0;pointer-events:none;transition:opacity 0.2s} .sidebar{position:fixed;top:0;right:0;bottom:0;width:260px;z-index:1000;transform:translateX(100%);box-shadow:-4px 0 20px rgba(9,30,66,0.2);transition:transform 0.2s} .dashboard-shell.sidebar-open .sidebar{transform:translateX(0)} .dashboard-shell.sidebar-open::after{opacity:1;pointer-events:auto} .brand-name,.nav-label{display:inline!important} .main{width:100%;min-height:100vh;margin-inline-start:0} /* ── Topbar على الموبايل: تقليل الازدحام ── */ .topbar{padding:0 12px;gap:8px} .sidebar-edge-toggle{display:none} .topbar-brand--mobile{display:none} /* زر الثيم: إخفاء على الموبايل (متاح في الإعدادات) */ #theme-toggle-btn{display:none} /* البحث: يأخذ المساحة المتاحة */ .topbar-search{display:flex;flex:1;max-width:none;height:36px} .topbar-filters-spacer{display:none} /* topbar-center: يظهر فقط على الموبايل (مخفي على الديسكتوب) */ .topbar-center{display:flex;flex:1;align-items:center;min-width:0;height:36px} /* على صفحة POS: إخفاء البحث العادي لإفساح المجال لـ pos-product-search */ .shell:has(.pos-page) .topbar-search{display:none!important} /* أزرار الأيقونات أصغر قليلاً على الموبايل */ .notif-bell-btn{width:40px;height:40px;font-size:18px} .notif-bell-btn i{font-size:18px} .content{padding:16px} .page-header-bar{padding:12px 16px 0} .stats,.kpi-row{grid-template-columns:repeat(2,minmax(0,1fr))} .action-toolbar{padding:8px 16px;flex-wrap:wrap;height:auto;min-height:var(--bottom-h);gap:8px} .toast{padding:8px 16px!important;height:auto!important;min-height:var(--bottom-h)!important} .action-toolbar__spacer{display:none} .action-toolbar__label{display:none} .action-toolbar__inner{justify-content:stretch;flex:1} .action-toolbar__end{width:100%;justify-content:center} .toolbar-btn{flex:1;min-width:0} input,select,textarea{font-size:var(--text-base)!important} .field input,.field select,.field textarea,.primary-button{padding:11px 14px;min-height:44px} /* ── تقليل padding للبطاقات الكبيرة على الموبايل ── */ .hero-card{padding:14px 16px} .billing-hero-card{padding:16px;margin-bottom:20px} .kpi-card{padding:14px 16px} /* الـsection-header: تقليل الهامش السفلي */ .section-header{padding-bottom:10px;margin-bottom:4px} /* الـcontent padding أصغر قليلاً للمساحات الضيقة */ .content{padding:14px} } @media(max-width:640px){ .stats,.kpi-row,.analytics-kpis,.metrics-grid,.stats-cards{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important} .kpi-card,.analytics-kpi{padding:10px 12px!important;min-height:auto!important;gap:4px!important} .kpi-value,.analytics-kpi strong{font-size:1.35rem!important;line-height:1.2!important} .kpi-label,.analytics-kpi span{font-size:0.75rem!important;line-height:1.2!important} } @media(max-width:480px){ .settings-layout,.form-row{grid-template-columns:1fr} .content{padding:12px 10px} } /* ── Auth mobile — تحسينات إضافية للهاتف الصغير ── */ @media(max-width:640px){ .auth-panel{padding:20px 16px;padding-top:calc(72px + env(safe-area-inset-top,0))} .auth-card{max-width:100%} .auth-card h1{font-size:var(--text-xl)} .auth-card > p{font-size:var(--text-sm);margin-bottom:16px} .auth-form{gap:8px} .auth-form .field-control{min-height:48px;padding:12px 12px;font-size:16px !important} .auth-form .primary-button{min-height:50px;font-size:var(--text-base);padding:14px 18px} .auth-input-joined .field-control--locked-affix{font-size:var(--text-xs);padding:12px 8px;max-width:42%} .auth-input-joined--ltr-phone .field-control--locked-affix{max-width:70px;min-width:55px} .auth-link{margin-top:16px;font-size:var(--text-xs)} .auth-brand.mobile-only{margin-bottom:16px} .auth-theme-toggle{top:calc(12px + env(safe-area-inset-top,0));inset-inline-end:calc(12px + env(safe-area-inset-right,0))} .auth-footer.mobile-only{margin-top:16px} } @media(max-width:380px){ .auth-panel{padding:16px 12px;padding-top:calc(68px + env(safe-area-inset-top,0))} .auth-card h1{font-size:var(--text-lg)} .auth-card > p{font-size:var(--text-xs);margin-bottom:12px} .auth-form{gap:8px} .auth-form .field-control{min-height:46px;padding:10px 10px;font-size:16px !important} .auth-form .primary-button{min-height:48px;padding:12px 16px} .auth-input-joined .field-control--locked-affix{font-size:10px;max-width:38%} .auth-input-joined--ltr-phone .field-control--locked-affix{max-width:60px;min-width:48px} .auth-brand.mobile-only .brand-logo{height:50px;max-height:50px} .auth-brand.mobile-only .brand-mark{font-size:26px;width:50px;height:50px} .auth-theme-toggle .notif-bell-btn{width:40px;height:40px} .auth-link{font-size:11px} } /* ── Runtime template styles ──────────────────────────────── */ .plan-card-checkout{display:flex;flex-direction:column}.plan-card-checkout--active{border-color:var(--color-primary);box-shadow:0 0 0 1px var(--color-primary)} .payment-popup{display:flex;align-items:center;justify-content:center;height:100vh;margin:0;background:var(--color-bg);color:var(--color-text-muted);text-align:center;direction:rtl}.payment-popup__message{font-size:var(--text-base)} .payment-status--processing{background:var(--primary-ghost);color:var(--primary);border-color:var(--primary)} .platform-ui__style-01{margin:6px 0 12px;} .platform-ui__style-02{display:flex;gap:12px;margin-top:16px;} .platform-ui__style-03{text-decoration:none;} .platform-ui__style-04{text-decoration:none;background:var(--color-text-subtle);} .platform-ui__style-05{color:var(--color-success);} .platform-ui__style-06{color:var(--color-warning);} .platform-ui__style-17{text-align:center;padding:12px;background:var(--color-primary-subtle);border:1px solid var(--color-primary);border-radius:var(--radius-sm);color:var(--color-primary);font-weight:600;} .platform-ui__style-18{flex-grow:1;margin-bottom:16px;} .platform-ui__style-19{font-size:var(--text-base);} /* ── Pagination ───────────────────────────────────────────── */ .pagination-wrapper{display:flex;justify-content:space-between;align-items:center;margin-top:16px;padding:10px 16px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);gap:16px;flex-wrap:wrap} .pagination-info{font-size:var(--text-xs);color:var(--color-text-muted)} .pagination-buttons{display:flex;gap:4px;align-items:center;flex-wrap:wrap} .pagination-buttons a,.pagination-buttons span{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:32px;padding:0 10px;font-size:var(--text-xs);font-weight:500;border-radius:var(--radius-sm);text-decoration:none} .pagination-buttons a.secondary{border:1px solid var(--color-border-strong);background:var(--color-surface);color:var(--color-text)} .pagination-buttons a.secondary:hover{background:var(--color-surface-2)} .pagination-buttons a.active{background:var(--color-primary)!important;color:#fff!important;border:1px solid var(--color-primary)!important} .pagination-buttons span.disabled{color:var(--color-text-muted);border:1px solid var(--color-border);background:var(--color-surface-2);cursor:not-allowed} .filter-form--wide select{padding:7px 10px;border:1px solid var(--color-border-strong);border-radius:var(--radius-sm);background:var(--color-surface);font-family:inherit;font-size:var(--text-sm);color:var(--color-text)} /* ── Modal System (centered with margins + backdrop blur, 2026 SaaS standard) ── */ #modal-root{position:fixed;inset:0;z-index:var(--z-modal);display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(15,23,42,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)} #modal-root[hidden],#modal-root [hidden]{display:none!important} .modal-panel{position:relative;display:flex;flex-direction:column;width:min(640px,100%);max-height:min(85vh,100%);background:var(--surface);overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow-xl);animation:modalPop .2s cubic-bezier(0.16,1,0.3,1)} @keyframes modalPop{from{opacity:0;transform:scale(0.96) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}} .modal-header{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;background:var(--surface);border-bottom:1px solid var(--border)} .modal-header__start{display:flex;align-items:center;gap:10px;min-width:0;flex:1;overflow:hidden} .modal-header__end{display:flex;align-items:center;gap:8px;flex-shrink:0} .modal-title{margin:0;font-size:var(--text-base);font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .modal-subtitle{margin:2px 0 0;font-size:var(--text-xs);color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .modal-close-btn{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:none;background:none;color:var(--text2);cursor:pointer;flex-shrink:0;transition:background .15s,color .15s;border-radius:var(--radius-sm)} .modal-close-btn:hover{background:var(--surface2);color:var(--text)} .modal-body{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;position:relative;display:flex;flex-direction:column} .modal-alert{padding:10px 16px;font-size:var(--text-sm);border-bottom:1px solid;flex-shrink:0} .modal-alert--error{background:var(--color-danger-subtle);color:var(--danger);border-color:var(--color-danger-border,#ffbdad)} .modal-alert--success{background:var(--color-success-subtle);color:var(--success);border-color:var(--color-success-border,#abf5d1)} .modal-content{padding:20px;flex:1} .modal-footer{flex-shrink:0;display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:12px 20px;padding-bottom:max(12px,env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--border)} .modal-footer__start{display:flex;gap:8px;align-items:center;margin-inline-end:auto} .modal-footer__end{display:flex;gap:8px;align-items:center} .modal-loading-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.85);z-index:10} @media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .modal-loading-overlay{background:rgba(15,23,42,.85)}} [data-theme="dark"] .modal-loading-overlay{background:rgba(15,23,42,.85)} .modal-spinner{width:28px;height:28px;border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:_mspin .7s linear infinite} @keyframes _mspin{to{transform:rotate(360deg)}} #modal-root[data-confirm-only="true"]{background:rgba(15,23,42,.45)!important;backdrop-filter:blur(6px)!important;pointer-events:auto!important} #modal-root[data-confirm-only="true"] .modal-panel{background:transparent!important;box-shadow:none!important;border:none!important;pointer-events:none!important} #modal-root[data-confirm-only="true"] .modal-header, #modal-root[data-confirm-only="true"] .modal-body > *:not(.modal-confirm-wrap), #modal-root[data-confirm-only="true"] .modal-footer{display:none!important} .modal-confirm-wrap{position:fixed!important;inset:0!important;display:flex!important;align-items:center!important;justify-content:center!important;background:transparent!important;pointer-events:none!important;z-index:calc(var(--z-modal) + 10)!important;padding:24px} .modal-confirm-box{position:relative!important;pointer-events:auto!important;background:var(--surface)!important;border:1px solid var(--border)!important;padding:24px!important;width:min(420px,100%)!important;box-shadow:var(--shadow-xl)!important;animation:modalConfirmPop 0.2s cubic-bezier(0.16, 1, 0.3, 1)!important} @keyframes modalConfirmPop{from{opacity:0;transform:scale(0.92)}to{opacity:1;transform:scale(1)}} .modal-confirm-box p{margin:0 0 20px;font-size:var(--text-base);color:var(--text);line-height:1.6;font-weight:500} .modal-confirm-actions{display:flex;gap:10px;justify-content:flex-end} .modal-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid transparent;background:var(--primary);color:#fff;padding:8px 18px;font-weight:500;font-size:var(--text-sm);cursor:pointer;transition:background .15s;font-family:inherit;white-space:nowrap} .modal-btn:hover:not(:disabled){background:var(--primary-dim)} .modal-btn:disabled{opacity:.6;cursor:not-allowed} .modal-btn--secondary{background:var(--surface);color:var(--text);border-color:var(--border2)} .modal-btn--secondary:hover:not(:disabled){background:var(--surface2)} .modal-btn--danger{background:var(--danger);border-color:var(--danger)} .modal-btn--danger:hover:not(:disabled){background:var(--color-danger-hover)} /* Mobile: bottom sheet (يصعد من الأسفل) */ @media(max-width:640px){ #modal-root{align-items:flex-end;padding:0} .modal-panel{width:100%!important;max-height:92vh!important;border-radius:var(--radius-lg) var(--radius-lg) 0 0!important;animation:modalSlideUp .25s cubic-bezier(0.16,1,0.3,1)} @keyframes modalSlideUp{from{transform:translateY(100%)}to{transform:translateY(0)}} .modal-header{padding:14px 16px} .modal-content{padding:16px} .modal-footer{flex-wrap:wrap;padding:12px 16px} .modal-footer__end{flex:1;flex-wrap:wrap} .modal-footer__end .modal-btn{flex:1;min-width:80px;justify-content:center} } /* ── Toast System (موحَّد: أسفل-منتصف الشاشة، ارتفاع 64px مطابق للفوتر) ── */ .toast-root{position:fixed!important;top:auto!important;bottom:0!important;left:50%!important;right:auto!important;transform:translateX(-50%)!important;z-index:calc(var(--z-modal) + 100)!important;display:flex!important;flex-direction:column!important;gap:0!important;pointer-events:none!important;width:max-content!important;max-width:min(420px,calc(100vw - 48px))!important;align-items:stretch!important} @media (max-width: 600px) { .toast-root{top:auto!important;bottom:0!important;left:0!important;right:0!important;transform:none!important;width:auto!important;max-width:none!important;align-items:stretch!important} } .toast{position:relative!important;display:flex!important;align-items:center!important;gap:12px!important;min-height:var(--bottom-h,64px)!important;height:var(--bottom-h,64px)!important;padding:0 24px!important;background:var(--surface)!important;color:var(--text)!important;border-radius:0!important;box-shadow:0 -4px 20px -4px rgba(0,0,0,0.18)!important;border:none!important;border-top:1px solid var(--border)!important;pointer-events:auto!important;transform:translateY(100%)!important;opacity:0!important;transition:transform 0.25s cubic-bezier(0.16,1,0.3,1),opacity 0.25s cubic-bezier(0.16,1,0.3,1)!important;overflow:hidden!important;width:100%!important;box-sizing:border-box!important} .toast.toast--show{transform:translateY(0)!important;opacity:1!important} .toast.toast--hide{transform:translateY(100%)!important;opacity:0!important} .toast__icon{flex-shrink:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center} .toast__content{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px} .toast__title{font-weight:600;font-size:var(--text-sm);margin:0;color:inherit} .toast__desc{font-size:var(--text-xs);margin:0;line-height:1.4;word-break:break-word;color:inherit;opacity:.92} .toast__close{flex-shrink:0;background:none;border:none;color:inherit;opacity:.85;cursor:pointer;padding:4px;margin:-4px;border-radius:0;display:flex;align-items:center;justify-content:center;transition:opacity 0.2s, background 0.2s} .toast__close:hover{opacity:1;background:transparent} /* الحالات الأربع: خلفية معبَّأة كاملة + نص أبيض بدل شريط جانبي رفيع */ .toast--success{background:var(--success,#10b981)!important;border-color:var(--success,#10b981)!important;color:#fff!important} .toast--error{background:var(--danger,#ef4444)!important;border-color:var(--danger,#ef4444)!important;color:#fff!important} .toast--warning{background:var(--warn,#f59e0b)!important;border-color:var(--warn,#f59e0b)!important;color:#fff!important} .toast--info{background:var(--primary,#6366f1)!important;border-color:var(--primary,#6366f1)!important;color:#fff!important} .toast--success .toast__close:hover,.toast--error .toast__close:hover,.toast--warning .toast__close:hover,.toast--info .toast__close:hover{background:transparent!important} .toast--loading .toast__icon{animation:_mspin .7s linear infinite;border:2px solid var(--border);border-top-color:var(--primary);border-radius:50%;width:20px;height:20px;margin:2px} /* ── Back-to-Top Button (responsive overrides for inline-styled button) ── */ @media(max-width:640px){.back-to-top-btn{bottom:16px!important;inset-inline-end:16px!important;width:42px!important;height:42px!important}} @media(max-width:380px){.back-to-top-btn{bottom:12px!important;inset-inline-end:12px!important;width:38px!important;height:38px!important}} @media(prefers-reduced-motion:reduce){.back-to-top-btn{transition:opacity .15s ease!important;transform:none!important}} /* ── Contact Float Button (responsive overrides — مطابق لـback-to-top) ── */ @media(max-width:640px){.contact-float-btn{bottom:16px!important;inset-inline-start:16px!important;width:42px!important;height:42px!important}} @media(max-width:380px){.contact-float-btn{bottom:12px!important;inset-inline-start:12px!important;width:38px!important;height:38px!important}} @media(prefers-reduced-motion:reduce){.contact-float-btn{transition:opacity .15s ease!important;transform:none!important}} /* ── Support Ticket Thread Styles ── */ .support-thread{display:flex;flex-direction:column;gap:16px;margin-bottom:24px} .support-msg{display:flex;flex-direction:column;max-width:80%;padding:14px 18px;border-radius:var(--radius-lg,0);font-size:var(--text-sm,14px);line-height:1.6} .support-msg--tenant{align-self:flex-start;background:var(--surface2,#f1f5f9);color:var(--text,#0f172a);border:1px solid var(--border,#e2e8f0);border-top-right-radius:2px} .support-msg--admin{align-self:flex-end;background:var(--primary-ghost,rgba(31,117,254,0.08));color:var(--text,#0f172a);border:1px solid var(--primary-dim,#93c5fd);border-top-left-radius:2px} .support-msg__meta{display:flex;justify-content:space-between;gap:12px;font-size:11px;color:var(--text-secondary,#64748b);margin-bottom:6px;font-weight:600} .support-msg__body{white-space:pre-wrap;word-break:break-word} /* ── SaaS Pricing Redesign ─────────────────────────────────────────── */ .pricing-plans-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-top: 2rem; align-items: stretch; } .pricing-card { background: var(--surface); border: 1px solid var(--border); border-radius:0; padding: 32px 24px; display: flex; flex-direction: column; transition: transform 0.2s, box-shadow 0.2s; position: relative; overflow: hidden; box-shadow: var(--shadow-sm); } .pricing-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .pricing-card--active { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary); } .pricing-card--active::before { content: 'الخطة الحالية'; position: absolute; top: 12px; right: 12px; background: var(--primary); color: #fff; font-size:var(--text-xs); font-weight: 600; padding: 4px 10px; border-radius:0; } .pricing-card__header { text-align: center; margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--border); } .pricing-card__name { font-size:var(--text-xl); font-weight: 600; color: var(--text); margin: 0 0 12px 0; } .pricing-card__price { display: flex; align-items: baseline; justify-content: center; gap: 4px; color: var(--text); } .pricing-card__price .currency { font-size:var(--text-xl); font-weight: 600; color: var(--text2); } .pricing-card__price .amount { font-size: 2.75rem; font-weight: 700; line-height: 1; } .pricing-card__price .period { font-size:var(--text-sm); color: var(--text2); } .pricing-card__desc { font-size:var(--text-sm); color: var(--text2); margin: 12px 0 0 0; line-height: 1.5; } .pricing-card__features { flex: 1; margin-bottom: 32px; } .pricing-card__features ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; } .pricing-card__features li { display: flex; align-items: flex-start; gap: 12px; font-size:var(--text-base); color: var(--text); line-height: 1.4; } .pricing-card__features .check-icon { width: 18px; height: 18px; color: var(--primary); flex-shrink: 0; margin-top: 2px; } .pricing-card__actions { display: flex; flex-direction: column; gap: 12px; margin-top: auto; } .pricing-card__actions form { width: 100%; display: flex; flex-direction: column; gap: 8px; margin: 0; } .pricing-card__actions button { width: 100%; justify-content: center; padding: 12px; font-size:var(--text-base); border-radius:0; font-weight: 600; } /* ── SaaS 2026 Status Card ────────────────────────────── */ .saas-status-card { --card-bg: var(--color-surface); --card-border: var(--color-border); --card-tint: var(--color-primary); background: linear-gradient(145deg, var(--card-bg) 0%, var(--color-surface-2) 100%); border: 1px solid var(--card-border); border-radius: 0; padding: 24px; margin-bottom: 24px; position: relative; overflow: hidden; box-shadow: var(--shadow-sm); transition: transform 0.2s, box-shadow 0.2s; } .saas-status-card::before { content: ''; position: absolute; top: 0; inset-inline-start: 0; inset-inline-end: 0; height: 4px; background: var(--card-tint); } .saas-status-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .saas-status-green { --card-tint: var(--color-success); --card-bg: var(--color-success-subtle); } .saas-status-blue { --card-tint: var(--color-primary); --card-bg: var(--color-primary-subtle); } .saas-status-orange { --card-tint: var(--color-warning); --card-bg: var(--color-warning-subtle); } .saas-status-red { --card-tint: var(--color-danger); --card-bg: var(--color-danger-subtle); } .saas-status-gray { --card-tint: var(--color-text-subtle); --card-bg: var(--color-surface-2); } .saas-card-header { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 16px; margin-bottom: 24px; } .saas-card-title { display: flex; align-items: center; gap: 16px; } .saas-card-icon { width: 48px; height: 48px; border-radius: 0; background: var(--color-surface); display: flex; align-items: center; justify-content: center; font-size:var(--text-2xl); color: var(--card-tint); box-shadow: var(--shadow-sm); } .saas-card-eyebrow { font-size:var(--text-xs); color: var(--color-text-subtle); text-transform: uppercase; letter-spacing: 0.5px; display: block; margin-bottom: 4px; } .saas-card-title h1 { margin: 0; font-size: 22px; font-weight: 700; color: var(--color-text); } .saas-badge { padding: 6px 12px; border-radius: 0; font-size:var(--text-sm); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; background: var(--color-surface); color: var(--card-tint); border: 1px solid currentColor; } .saas-card-body { margin-bottom: 24px; } .saas-progress-wrapper { margin-bottom: 20px; } .saas-progress-track { height: 8px; background: rgba(0,0,0,0.05); border-radius: 0; overflow: hidden; direction: ltr; } [data-theme="dark"] .saas-progress-track { background: rgba(255,255,255,0.1); } .saas-progress-fill { height: 100%; background: var(--card-tint); border-radius: 0; transition: width 0.5s ease-out; } .saas-card-meta { display: flex; flex-wrap: wrap; gap: 24px; } .saas-card-meta > div { display: flex; flex-direction: column; gap: 4px; } .saas-card-meta span { font-size:var(--text-xs); color: var(--color-text-subtle); } .saas-card-meta strong { font-size: 15px; color: var(--color-text); font-weight: 600; } .saas-warning-banner { margin-top: 16px; padding: 12px; background: var(--color-warning-subtle); color: var(--color-warning); border-radius: 0; font-size:var(--text-sm); font-weight: 500; display: flex; align-items: center; gap: 8px; } .saas-card-footer { display: flex; gap: 12px; padding-top: 24px; border-top: 1px solid rgba(0,0,0,0.05); } [data-theme="dark"] .saas-card-footer { border-color: rgba(255,255,255,0.05); } .saas-card-footer .primary-button, .saas-card-footer .secondary-button { margin: 0; } /* Bulk Actions — مدمجة داخل action-toolbar (لا شريط منفصل) */ .action-toolbar__bulk { flex: 1; align-items: center; gap: 8px; } .action-toolbar__bulk[hidden] { display: none !important; } .action-toolbar__bulk-info { font-weight: 600; color: var(--text); font-size: var(--text-sm); } .action-toolbar__bulk-actions { display: flex; gap: 8px; margin-inline-start: auto; flex-wrap: wrap; } /* توافق: selectors قديمة قد تُستخدم في views */ .bulk-count { font-size: var(--text-sm); color: var(--color-text); } .col-check { width: 40px; text-align: center; } .col-check input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; accent-color: var(--color-primary, #6366f1); } .button-danger { background: var(--danger, #ef4444); color: #fff; border-color: var(--danger, #ef4444); } .button-danger:hover { filter: brightness(0.92); } .button-success { background: var(--color-success, #10b981); color: #fff; border-color: var(--color-success, #10b981); } .button-success:hover { filter: brightness(0.92); } .sidebar-trash-badge { background: var(--danger); color: #fff; border-radius:0; padding: 2px 8px; font-size: 11px; font-weight: 700; min-width: 18px; text-align: center; } .sidebar-trash-badge[hidden], .sidebar-trash-badge:empty { display: none !important; } th input[type="checkbox"], td input[type="checkbox"] { cursor: pointer; margin: 0; width: 16px; height: 16px; accent-color: var(--primary); } /* ── Vertical Centering & Descender Alignment for Form Controls ── */ .field-control:not(textarea), .form-control:not(textarea), .c-panel--form input:not([type="checkbox"]):not([type="radio"]), .c-panel--form select, .form-panel input:not([type="checkbox"]):not([type="radio"]), .form-panel select, .field input:not([type="checkbox"]):not([type="radio"]), .field select, .auth-form input:not([type="checkbox"]):not([type="radio"]), .auth-form select, .tc-search-input { line-height: normal !important; padding-top: 0 !important; padding-bottom: 0 !important; box-sizing: border-box !important; vertical-align: middle !important; } /* WebKit / Chromium select baseline fix for Arabic text descenders */ select.field-control, select.form-control, select.tc-search-input, .field select, .form-panel select, .c-panel--form select { line-height: normal !important; padding-block: 0 !important; } /* Google Adsense Overflow and Mobile Navbar Overlay Fix */ iframe[id^="google_ads_iframe"], .adsbygoogle, .google-auto-placed { max-width: 100% !important; box-sizing: border-box !important; overflow: hidden !important; } /* Prevent Adsense from injecting auto ads inside navbar & mobile menu */ .landing-nav-wrapper google-cast-launcher, .landing-nav-wrapper .adsbygoogle, .landing-nav-wrapper ins, .landing-nav-wrapper .google-auto-placed, .landing-mobile-menu .adsbygoogle, .landing-mobile-menu ins, .landing-mobile-menu .google-auto-placed { display: none !important; height: 0 !important; width: 0 !important; opacity: 0 !important; pointer-events: none !important; } @media (max-width: 1023px) { .landing-nav-wrapper { z-index: calc(var(--z-sidebar) + 10) !important; } .landing-mobile-menu { z-index: calc(var(--z-sidebar) + 20) !important; } .landing-mobile-menu-backdrop { z-index: calc(var(--z-sidebar) + 15) !important; } } /* Center Google Adsense ad slots correctly on all screens */ .ad-slot-container { display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; margin-block: clamp(12px, 3vw, 24px) !important; box-sizing: border-box !important; } .ad-slot-body { display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } ins.adsbygoogle { margin-inline: auto !important; display: block !important; text-align: center !important; } div.google-auto-placed { text-align: center !important; margin-inline: auto !important; } /* ── Public Ad Wrappers (hero-bottom + footer) — PJAX-aware transitions ── */ .ui-hero-bottom-ad-wrap, .ui-footer-ad-wrap { animation: ad-fade-in 0.35s ease-out; } @keyframes ad-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* PJAX loading state — fade content while fetching */ [data-pjax-content].pjax-loading { opacity: 0.6; pointer-events: none; transition: opacity 0.15s ease; } [data-pjax-content] { transition: opacity 0.2s ease; } /* ── PJAX loading state ── */ /* View Transitions API removed — it added 180ms animation delay to every navigation, making PJAX feel slower than full page loads. Direct swap is instant. The pjax-loading class provides a subtle opacity dim. */ [data-pjax-content].pjax-loading { opacity: 0.6; transition: opacity 0.1s ease; } [data-pjax-content][aria-busy="true"] { opacity: 0.6; transition: opacity 0.1s ease; } /* Account Views Refactored CSS */ .page-header { margin-bottom: 24px; } .page-header--flex { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; } .thread-actions { margin-bottom: 16px; } .thread-back-link { color: var(--primary); text-decoration: none; font-size: var(--text-sm); } .thread-messages-wrapper { max-width: 720px; } .thread-empty-state { color: var(--text-tertiary); text-align: center; padding: 24px; } .msg-bubble { padding: 12px 16px; border-radius: var(--radius-sm); margin-bottom: 12px; } .msg-bubble--me { background: var(--primary-ghost); border-inline-start: 3px solid var(--primary); margin-inline-start: 32px; } .msg-bubble--other { background: var(--surface-2); border-inline-start: 3px solid var(--border-2); margin-inline-end: 32px; } .msg-bubble__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; } .msg-bubble__sender { font-size: var(--text-sm); color: var(--text); font-weight: 700; } .msg-bubble__time { font-size: var(--text-xs); color: var(--text-tertiary); } .msg-bubble__body { font-size: var(--text-sm); color: var(--text-secondary); white-space: pre-wrap; word-wrap: break-word; } .thread-reply-form { margin-top: 24px; } .thread-closed-notice { margin-top: 24px; padding: 16px; background: var(--surface-2); border-radius: var(--radius-sm); color: var(--text-tertiary); text-align: center; } .icon-24 { font-size: 24px; } /* Auth View Utilities */ .auth-input-wrapper { margin-bottom: var(--space-md); text-align: start; } .auth-input-joined { display: flex; align-items: center; margin-bottom: var(--space-md); } .auth-input-wrapper .auth-input-joined { margin-bottom: 0; } .auth-input-joined[dir="ltr"] { direction: ltr; } .auth-input-joined .field-control:not(.field-control--locked-affix) { flex: 1 1 auto; min-width: 0; width: auto; } .auth-input-joined .field-control:first-child { border-end-end-radius: 0; border-start-end-radius: 0; } .auth-input-joined .field-control:last-child { border-end-start-radius: 0; border-start-start-radius: 0; border-inline-start: 0; } .auth-input-joined--ltr-phone .field-control:first-child { border-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; } .auth-input-joined--ltr-phone .field-control:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-bottom: 0; } .auth-input-feedback { display: block; margin-top: 4px; font-size: var(--text-xs); color: var(--color-text-subtle); text-align: end; } .auth-input-feedback.error { color: var(--color-danger); } .auth-input-feedback.success { color: var(--color-success); } .auth-mfa-help { font-size: var(--text-sm); color: var(--color-text-subtle); margin-top: var(--space-xs); } .auth-theme-toggle { position: absolute; top: calc(24px + env(safe-area-inset-top, 0px)); inset-inline-end: calc(24px + env(safe-area-inset-right, 0px)); z-index: 20; display: inline-flex; align-items: center; justify-content: center; } .auth-theme-toggle #theme-toggle-btn { display: inline-flex !important; margin: 0 !important; } .auth-theme-toggle .notif-bell-btn { margin: 0 !important; width: 40px; height: 40px; border-radius: 50%; background: var(--color-surface-2, var(--surface2, #f1f5f9)); border: 1px solid var(--color-border, var(--border, #e2e8f0)); color: var(--color-text, var(--text, #0f172a)); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.05); transition: all 0.2s ease; touch-action: manipulation; } .auth-theme-toggle .notif-bell-btn:hover { background: var(--color-primary-subtle, rgba(31,117,254,0.1)); color: var(--color-primary, #1f75fe); border-color: var(--color-primary, #1f75fe); transform: scale(1.06); } [data-theme="dark"] .auth-theme-toggle .notif-bell-btn { background: var(--color-surface-2, #1e293b); border-color: var(--color-border, #334155); color: var(--color-text, #f8fafc); box-shadow: 0 1px 4px rgba(0,0,0,0.4); } [data-theme="dark"] .auth-theme-toggle .notif-bell-btn:hover { background: var(--color-primary-subtle, rgba(31,117,254,0.15)); color: var(--color-primary, #60a5fa); border-color: var(--color-primary, #60a5fa); } .auth-brand-mobile-link { display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; color: inherit; } .auth-brand-initial { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; background: var(--color-primary); color: var(--color-surface); font-size: 1.5rem; font-weight: 700; } .auth-fallback-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; } /* ═══ Page Hero & Breadcrumbs (Centralized Inner Page Header) ═══ */ /* المصدر المركزي الموحّد — نفس الـhero على كل الصفحات (main domain + tenant subdomain + admin) */ .ui-page-hero{ position:relative; padding-block:50px; background:color-mix(in srgb,var(--primary,var(--color-primary,#1f75fe)) 4%,var(--surface,var(--color-surface,#ffffff))); border-block-end:1px solid var(--border,var(--color-border,#e2e8f0)); text-align:center; overflow:hidden; } .ui-page-hero__inner{ position:relative; z-index:1; width:100%; max-width:var(--container-max,1100px); margin:0 auto; padding-inline:clamp(16px,3vw,32px); box-sizing:border-box; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:14px; } .ui-page-hero__header{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:16px;width:100%} .ui-page-hero__main{width:100%;display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px} .ui-page-hero__badge{ display:inline-flex;align-items:center;justify-content:center;gap:6px; padding:6px 16px; border-radius:var(--radius-full,9999px); background:color-mix(in srgb,var(--primary,var(--color-primary,#1f75fe)) 10%,transparent); color:var(--primary,var(--color-primary,#1f75fe)); font-size:11px;font-weight:700; border:1px solid color-mix(in srgb,var(--primary,var(--color-primary,#1f75fe)) 18%,transparent); } .ui-page-hero__title{ margin:0; font-size:clamp(1.5rem,3.5vw,2.25rem); font-weight:700; line-height:1.32; color:var(--text,var(--color-text,#0f172a)); text-align:center; text-wrap:balance; } .ui-page-hero__subtitle{ margin:0; font-size:clamp(0.92rem,1.35vw,1.08rem); color:var(--text-secondary,var(--color-text-subtle,#64748b)); line-height:1.75; max-width:680px; text-align:center; text-wrap:pretty; } .ui-page-hero__meta{ display:flex;align-items:center;justify-content:center;gap:12px; flex-wrap:wrap;padding-block-start:8px; font-size:0.85rem;color:var(--text-secondary,var(--color-text-subtle,#64748b)); } [data-theme="dark"] .ui-page-hero{ background:color-mix(in srgb,var(--primary,var(--color-primary,#1f75fe)) 7%,var(--surface,var(--color-surface,#0F172A))); border-block-end-color:var(--border,var(--color-border,#1e293b)); } [data-theme="dark"] .ui-page-hero__title{color:var(--text,var(--color-text,#f8fafc))} [data-theme="dark"] .ui-page-hero__subtitle{color:var(--text-secondary,var(--color-text-subtle,#94a3b8))} @media(max-width:768px){ .ui-page-hero{padding-block:25px} .ui-page-hero__main{gap:12px} .ui-page-hero__header{gap:14px} } @media(max-width:540px){ .ui-page-hero{padding-block:25px} .ui-page-hero__title{font-size:clamp(1.25rem,4.8vw,1.55rem);line-height:1.3} .ui-page-hero__subtitle{font-size:clamp(0.85rem,2.6vw,0.96rem);line-height:1.65} .ui-page-hero__badge{font-size:10px;padding:5px 13px} .ui-page-hero__meta{font-size:0.8rem;gap:10px} } @media(max-width:380px){ .ui-page-hero{padding-block:25px} .ui-page-hero__title{font-size:1.2rem} .ui-page-hero__subtitle{font-size:0.85rem} } .ui-breadcrumb{display:flex;align-items:center;flex-wrap:wrap;gap:6px;padding:var(--space-2) 0;font-size:var(--text-xs,12px)} .ui-breadcrumb a{color:var(--color-text-subtle,#64748b);text-decoration:none;transition:color .15s} .ui-breadcrumb a:hover{color:var(--primary,var(--color-primary,#1f75fe))} .ui-breadcrumb__sep{color:var(--color-text-muted,#94a3b8);font-size:12px;line-height:1} .ui-breadcrumb__current{color:var(--color-text,#0f172a);font-weight:600} [data-theme="dark"] .ui-breadcrumb__current{color:var(--color-text,#f8fafc)} /* ═══ FAQ Accordion (Centralized Dynamic + / -) ═══ */ .ui-faq-section{padding:clamp(32px,5vw,64px) 0;box-sizing:border-box} .ui-faq-list{max-width:800px;margin:0 auto;display:flex;flex-direction:column;gap:12px;box-sizing:border-box} .ui-faq-item{background:var(--surface,var(--color-surface,#ffffff));border:1px solid color-mix(in srgb,var(--border,var(--color-border,#e2e8f0)) 80%,transparent);border-radius:var(--radius-md,12px);overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,0.03);transition:border-color 0.2s ease,box-shadow 0.2s ease} .ui-faq-item:hover{border-color:var(--primary,var(--color-primary,#1f75fe));box-shadow:0 4px 16px color-mix(in srgb,var(--primary,var(--color-primary,#1f75fe)) 10%,transparent)} .ui-faq-item[open]{border-color:var(--primary,var(--color-primary,#1f75fe));box-shadow:0 6px 20px color-mix(in srgb,var(--primary,var(--color-primary,#1f75fe)) 14%,transparent)} .ui-faq-summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;cursor:pointer;list-style:none;user-select:none;font-weight:700;font-size:clamp(0.95rem,1.3vw,1.05rem);color:var(--text,var(--color-text,#0f172a));touch-action:manipulation;transition:color 0.15s ease,background 0.2s ease} .ui-faq-summary::-webkit-details-marker,.ui-faq-summary::marker{display:none} .ui-faq-summary:hover{color:var(--primary,var(--color-primary,#1f75fe))} .ui-faq-question{flex:1;min-width:0;line-height:1.4} .ui-faq-icon{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:color-mix(in srgb,var(--primary,var(--color-primary,#1f75fe)) 10%,transparent);color:var(--primary,var(--color-primary,#1f75fe));flex-shrink:0;font-size:20px;line-height:1;transition:background 0.25s ease,color 0.25s ease,transform 0.3s cubic-bezier(0.4,0,0.2,1)} .ui-faq-item[open] .ui-faq-summary{border-bottom:1px solid color-mix(in srgb,var(--border,var(--color-border,#e2e8f0)) 60%,transparent);background:color-mix(in srgb,var(--primary,var(--color-primary,#1f75fe)) 4%,transparent)} .ui-faq-item[open] .ui-faq-icon{background:var(--primary,var(--color-primary,#1f75fe));color:#ffffff;transform:rotate(180deg)} .ui-faq-content{padding:20px 24px;color:var(--text-secondary,var(--color-text-subtle,#475569));font-size:clamp(0.88rem,1.1vw,0.96rem);line-height:1.8;background:color-mix(in srgb,var(--surface,var(--color-surface,#ffffff)) 96%,var(--surface-2,var(--color-surface-2,#f8fafc)) 4%)} .ui-faq-body p{margin:0 0 10px} .ui-faq-body p:last-child{margin-bottom:0} [data-theme="dark"] .ui-faq-item{background:var(--surface,#0F172A);border-color:color-mix(in srgb,var(--border,#334155) 80%,transparent);box-shadow:0 2px 8px rgba(0,0,0,0.3)} [data-theme="dark"] .ui-faq-item:hover{border-color:var(--primary,var(--color-primary,#1f75fe));box-shadow:0 4px 16px color-mix(in srgb,var(--primary,var(--color-primary,#1f75fe)) 20%,transparent)} [data-theme="dark"] .ui-faq-item[open]{border-color:var(--primary,var(--color-primary,#1f75fe));box-shadow:0 6px 20px color-mix(in srgb,var(--primary,var(--color-primary,#1f75fe)) 25%,transparent)} [data-theme="dark"] .ui-faq-item[open] .ui-faq-summary{background:color-mix(in srgb,var(--primary,var(--color-primary,#1f75fe)) 6%,transparent);border-bottom-color:color-mix(in srgb,var(--border,#334155) 70%,transparent)} [data-theme="dark"] .ui-faq-summary{color:var(--text,var(--color-text,#f8fafc))} [data-theme="dark"] .ui-faq-content{background:color-mix(in srgb,#0F172A 92%,#1E293B 8%);color:var(--text-secondary,var(--color-text-subtle,#94a3b8))} /* ═══ About Page (Centralized Modern UI/UX) ═══ */ .ui-about-wrap{width:100%;max-width:1080px;margin:0 auto;padding:0 clamp(16px,3vw,32px) clamp(40px,6vw,80px);box-sizing:border-box;display:flex;flex-direction:column;gap:clamp(32px,5vw,56px)} .ui-about-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:20px} .ui-about-card{background:var(--surface,var(--color-surface,#ffffff));border:1px solid color-mix(in srgb,var(--border,var(--color-border,#e2e8f0)) 80%,transparent);border-radius:var(--radius-lg,16px);padding:clamp(24px,3.5vw,32px);box-sizing:border-box;box-shadow:0 2px 8px rgba(0,0,0,0.03);transition:transform 0.2s ease,box-shadow 0.2s ease,border-color 0.2s ease;display:flex;flex-direction:column;gap:12px;text-align:start} .ui-about-card:hover{transform:translateY(-2px);border-color:var(--primary,var(--color-primary,#1f75fe));box-shadow:0 8px 24px color-mix(in srgb,var(--primary,var(--color-primary,#1f75fe)) 10%,transparent)} .ui-about-card__icon{width:52px;height:52px;border-radius:14px;background:color-mix(in srgb,var(--primary,var(--color-primary,#1f75fe)) 10%,transparent);color:var(--primary,var(--color-primary,#1f75fe));display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0} .ui-about-card__title{font-size:clamp(1.1rem,1.5vw,1.25rem);font-weight:800;color:var(--text,var(--color-text,#0f172a));margin:0} .ui-about-card__text{font-size:clamp(0.88rem,1.1vw,0.96rem);color:var(--text-secondary,var(--color-text-subtle,#64748b));line-height:1.75;margin:0} .ui-about-card--story{padding:0;overflow:hidden} .ui-about-card--story .ui-about-card__media{width:100%;aspect-ratio:16/9;overflow:hidden;background:var(--color-surface-2,#f1f5f9)} .ui-about-card--story .ui-about-card__media img{width:100%;height:100%;object-fit:cover;display:block} .ui-about-card--story .ui-about-card__body{padding:clamp(24px,3.5vw,32px);display:flex;flex-direction:column;gap:12px} .ui-about-card--story .ui-about-card__text{font-size:clamp(0.96rem,1.2vw,1.05rem);line-height:1.8} .ui-about-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:16px;background:color-mix(in srgb,var(--surface,var(--color-surface,#ffffff)) 90%,var(--primary,var(--color-primary,#1f75fe)) 6%);border:1px solid color-mix(in srgb,var(--border,var(--color-border,#e2e8f0)) 80%,transparent);border-radius:var(--radius-lg,16px);padding:clamp(20px,4vw,36px)} .ui-about-stat{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:8px} .ui-about-stat__val{font-size:clamp(1.8rem,3.2vw,2.5rem);font-weight:900;color:var(--primary,var(--color-primary,#1f75fe));line-height:1} .ui-about-stat__lbl{font-size:clamp(0.82rem,1vw,0.92rem);font-weight:600;color:var(--text-secondary,var(--color-text-subtle,#64748b))} .ui-about-cta{background:linear-gradient(135deg,color-mix(in srgb,var(--primary,var(--color-primary,#1f75fe)) 12%,var(--surface,var(--color-surface,#ffffff))) 0%,var(--surface,var(--color-surface,#ffffff)) 100%);border:1px solid color-mix(in srgb,var(--primary,var(--color-primary,#1f75fe)) 25%,transparent);border-radius:var(--radius-lg,16px);padding:clamp(28px,4vw,44px);text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px} .ui-about-cta__title{font-size:clamp(1.3rem,2.2vw,1.75rem);font-weight:800;color:var(--text,var(--color-text,#0f172a));margin:0} .ui-about-cta__desc{font-size:clamp(0.9rem,1.2vw,1.05rem);color:var(--text-secondary,var(--color-text-subtle,#64748b));margin:0;max-width:540px;line-height:1.6} .ui-about-cta__actions{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:8px} [data-theme="dark"] .ui-about-card{background:var(--surface,#0F172A);border-color:color-mix(in srgb,var(--border,#334155) 80%,transparent);box-shadow:0 2px 8px rgba(0,0,0,0.3)} [data-theme="dark"] .ui-about-card:hover{border-color:var(--primary,#1f75fe);box-shadow:0 8px 24px color-mix(in srgb,var(--primary,#1f75fe) 20%,transparent)} [data-theme="dark"] .ui-about-stats{background:color-mix(in srgb,#0F172A 92%,#1E293B 8%);border-color:var(--border,#334155)} [data-theme="dark"] .ui-about-cta{background:linear-gradient(135deg,color-mix(in srgb,var(--primary,#1f75fe) 15%,#0F172A) 0%,#0F172A 100%);border-color:color-mix(in srgb,var(--primary,#1f75fe) 30%,transparent)} /* ═══ Contact Page (Centralized Modern UI/UX) ═══ */ .ui-contact-wrap{width:100%;max-width:1080px;margin:0 auto;padding:0 clamp(16px,3vw,32px) clamp(40px,6vw,80px);box-sizing:border-box;display:flex;flex-direction:column;gap:32px} .ui-contact-channels{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:16px} .ui-contact-channel{background:var(--surface,var(--color-surface,#ffffff));border:1px solid color-mix(in srgb,var(--border,var(--color-border,#e2e8f0)) 80%,transparent);border-radius:var(--radius-lg,16px);padding:20px;box-sizing:border-box;box-shadow:0 2px 8px rgba(0,0,0,0.03);text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;text-decoration:none;color:inherit;transition:transform 0.2s ease,box-shadow 0.2s ease,border-color 0.2s ease} .ui-contact-channel:hover{transform:translateY(-2px);border-color:var(--primary,var(--color-primary,#1f75fe));box-shadow:0 6px 20px color-mix(in srgb,var(--primary,var(--color-primary,#1f75fe)) 12%,transparent)} .ui-contact-channel__icon{width:48px;height:48px;border-radius:12px;background:color-mix(in srgb,var(--primary,var(--color-primary,#1f75fe)) 10%,transparent);color:var(--primary,var(--color-primary,#1f75fe));display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0} .ui-contact-channel__icon--wa{background:rgba(37,211,102,0.12);color:#25D366} .ui-contact-channel__title{font-size:0.95rem;font-weight:700;color:var(--text,var(--color-text,#0f172a));margin:0} .ui-contact-channel__val{font-size:0.88rem;color:var(--text-secondary,var(--color-text-subtle,#64748b));margin:0;word-break:break-all;line-height:1.4} .ui-contact-channel__btn{margin-top:auto;font-size:0.8rem;font-weight:700;color:var(--primary,var(--color-primary,#1f75fe));display:inline-flex;align-items:center;gap:4px} .ui-contact-card{background:var(--surface,var(--color-surface,#ffffff));border:1px solid color-mix(in srgb,var(--border,var(--color-border,#e2e8f0)) 80%,transparent);border-radius:var(--radius-lg,16px);padding:clamp(24px,4vw,40px);box-sizing:border-box;box-shadow:0 4px 16px rgba(0,0,0,0.03)} .ui-contact-card__header{margin-bottom:24px;text-align:start} .ui-contact-card__title{font-size:clamp(1.2rem,2vw,1.45rem);font-weight:800;color:var(--text,var(--color-text,#0f172a));margin:0 0 6px} .ui-contact-card__subtitle{font-size:clamp(0.86rem,1.1vw,0.95rem);color:var(--text-secondary,var(--color-text-subtle,#64748b));margin:0;line-height:1.6} .ui-contact-form{display:flex;flex-direction:column;gap:18px;width:100%;box-sizing:border-box} .ui-contact-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;width:100%;box-sizing:border-box} @media(max-width:640px){.ui-contact-row{grid-template-columns:1fr}} .ui-contact-field{display:flex;flex-direction:column;gap:6px;width:100%;box-sizing:border-box;text-align:start} .ui-contact-field label{font-size:0.88rem;font-weight:700;color:var(--text,var(--color-text,#0f172a))} .ui-contact-field input,.ui-contact-field textarea{width:100%;padding:12px 16px;border:1px solid color-mix(in srgb,var(--border,var(--color-border,#e2e8f0)) 80%,transparent);border-radius:var(--radius-md,10px);background:var(--surface-2,var(--color-surface-2,#f8fafc));color:var(--text,var(--color-text,#0f172a));font-size:0.95rem;font-family:inherit;box-sizing:border-box;transition:border-color 0.2s ease,box-shadow 0.2s ease,background 0.2s ease;outline:none} .ui-contact-field input:focus,.ui-contact-field textarea:focus{border-color:var(--primary,var(--color-primary,#1f75fe));background:var(--surface,var(--color-surface,#ffffff));box-shadow:0 0 0 3px color-mix(in srgb,var(--primary,var(--color-primary,#1f75fe)) 15%,transparent)} .ui-contact-counter{text-align:end;font-size:0.78rem;color:var(--text-secondary,var(--color-text-subtle,#64748b));margin-top:2px} .ui-contact-banner{padding:18px 22px;border-radius:var(--radius-md,12px);display:flex;align-items:flex-start;gap:14px;box-sizing:border-box;margin-bottom:20px;text-align:start} .ui-contact-banner--success{background:color-mix(in srgb,var(--primary,var(--color-primary,#1f75fe)) 8%,var(--surface,var(--color-surface,#ffffff)));border:1px solid var(--primary,var(--color-primary,#1f75fe))} .ui-contact-banner--error{background:rgba(239,68,68,0.08);border:1px solid #ef4444} .ui-contact-banner__icon{width:36px;height:36px;border-radius:50%;background:var(--primary,var(--color-primary,#1f75fe));color:#ffffff;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0} .ui-contact-banner--error .ui-contact-banner__icon{background:#ef4444} .ui-contact-banner__body h4{margin:0 0 4px;font-size:1rem;font-weight:700;color:var(--text,var(--color-text,#0f172a))} .ui-contact-banner__body p{margin:0;font-size:0.88rem;color:var(--text,var(--color-text,#0f172a));line-height:1.6} .ui-contact-trust{text-align:center;font-size:0.84rem;color:var(--text-secondary,var(--color-text-subtle,#64748b));display:flex;align-items:center;justify-content:center;gap:6px;margin-top:16px} [data-theme="dark"] .ui-contact-channel{background:var(--surface,#0F172A);border-color:color-mix(in srgb,var(--border,#334155) 80%,transparent);box-shadow:0 2px 8px rgba(0,0,0,0.3)} [data-theme="dark"] .ui-contact-channel:hover{border-color:var(--primary,#1f75fe);box-shadow:0 6px 20px color-mix(in srgb,var(--primary,#1f75fe) 20%,transparent)} [data-theme="dark"] .ui-contact-card{background:var(--surface,#0F172A);border-color:color-mix(in srgb,var(--border,#334155) 80%,transparent);box-shadow:0 4px 16px rgba(0,0,0,0.3)} [data-theme="dark"] .ui-contact-field input,[data-theme="dark"] .ui-contact-field textarea{background:#1E293B;border-color:var(--border,#334155);color:#f8fafc} [data-theme="dark"] .ui-contact-field input:focus,[data-theme="dark"] .ui-contact-field textarea:focus{background:#0F172A;border-color:var(--primary,#1f75fe)} /* ═══ Legal Pages (Centralized Modern UI/UX) ═══ */ .ui-legal-wrap{width:100%;max-width:920px;margin:0 auto;padding:0 clamp(16px,3vw,32px) clamp(40px,6vw,80px);box-sizing:border-box} .ui-legal-header{text-align:start;margin-bottom:28px;padding-bottom:24px;border-bottom:1px solid color-mix(in srgb,var(--border,var(--color-border,#e2e8f0)) 80%,transparent)} .ui-legal-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:20px;background:color-mix(in srgb,var(--primary,var(--color-primary,#1f75fe)) 10%,transparent);color:var(--primary,var(--color-primary,#1f75fe));font-weight:700;font-size:0.85rem;margin-bottom:14px} .ui-legal-title{font-size:clamp(1.6rem,3vw,2.3rem);font-weight:800;margin:0 0 14px;color:var(--text,var(--color-text,#0f172a));line-height:1.25} .ui-legal-meta{display:flex;align-items:center;gap:clamp(12px,2vw,24px);flex-wrap:wrap;font-size:0.85rem;color:var(--text-secondary,var(--color-text-subtle,#64748b))} .ui-legal-meta span{display:inline-flex;align-items:center;gap:6px} .ui-legal-print-btn{background:var(--surface,var(--color-surface,#ffffff));border:1px solid color-mix(in srgb,var(--border,var(--color-border,#e2e8f0)) 80%,transparent);border-radius:8px;padding:5px 14px;color:var(--text,var(--color-text,#0f172a));font-size:0.82rem;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:background 0.2s,border-color 0.2s;font-family:inherit;margin-inline-start:auto} .ui-legal-print-btn:hover{background:var(--surface-2,var(--color-surface-2,#f8fafc));border-color:var(--primary,var(--color-primary,#1f75fe))} .ui-legal-quicknav{display:flex;gap:10px;overflow-x:auto;padding:6px 2px 14px;margin-bottom:28px;scrollbar-width:none;-webkit-overflow-scrolling:touch} .ui-legal-quicknav::-webkit-scrollbar{display:none} .ui-legal-quicknav a{padding:8px 16px;border-radius:20px;background:var(--surface,var(--color-surface,#ffffff));border:1px solid color-mix(in srgb,var(--border,var(--color-border,#e2e8f0)) 80%,transparent);color:var(--text,var(--color-text,#0f172a));font-size:0.84rem;font-weight:600;text-decoration:none;white-space:nowrap;transition:all 0.2s ease} .ui-legal-quicknav a:hover{border-color:var(--primary,var(--color-primary,#1f75fe));color:var(--primary,var(--color-primary,#1f75fe));background:color-mix(in srgb,var(--primary,var(--color-primary,#1f75fe)) 6%,transparent)} .ui-legal-section{background:var(--surface,var(--color-surface,#ffffff));border:1px solid color-mix(in srgb,var(--border,var(--color-border,#e2e8f0)) 80%,transparent);border-radius:var(--radius-lg,16px);padding:clamp(22px,3.5vw,34px);margin-bottom:20px;box-shadow:0 2px 8px rgba(0,0,0,0.02);text-align:start;scroll-margin-top:80px} .ui-legal-section__head{display:flex;align-items:center;gap:14px;margin-bottom:16px} .ui-legal-section__num{width:36px;height:36px;border-radius:10px;background:var(--primary,var(--color-primary,#1f75fe));color:#ffffff;font-weight:800;font-size:0.95rem;display:flex;align-items:center;justify-content:center;flex-shrink:0} .ui-legal-section__title{margin:0;font-size:clamp(1.1rem,1.8vw,1.3rem);font-weight:700;color:var(--text,var(--color-text,#0f172a))} .ui-legal-section__body{color:var(--text,var(--color-text,#0f172a));font-size:0.95rem;line-height:1.85} .ui-legal-section__body p{margin:0 0 14px} .ui-legal-section__body p:last-child{margin-bottom:0} .ui-legal-section__body ul,.ui-legal-section__body ol{margin:12px 0 16px;padding-inline-start:22px;display:grid;gap:8px} .ui-legal-section__body li{color:var(--text,var(--color-text,#0f172a));line-height:1.75} .ui-legal-callout{background:color-mix(in srgb,var(--primary,var(--color-primary,#1f75fe)) 6%,var(--surface,var(--color-surface,#ffffff)));border-inline-start:4px solid var(--primary,var(--color-primary,#1f75fe));border-radius:0 var(--radius-md,10px) var(--radius-md,10px) 0;padding:16px 20px;margin:16px 0;display:flex;gap:12px;align-items:flex-start} [dir="ltr"] .ui-legal-callout{border-radius:var(--radius-md,10px) 0 0 var(--radius-md,10px)} .ui-legal-callout__icon{color:var(--primary,var(--color-primary,#1f75fe));font-size:1.3rem;flex-shrink:0;margin-top:2px} .ui-legal-callout__content{font-size:0.92rem;color:var(--text,var(--color-text,#0f172a));line-height:1.7} .ui-legal-callout__content strong{color:var(--primary,var(--color-primary,#1f75fe));display:block;margin-bottom:4px} .ui-legal-callout__content a{color:var(--primary,var(--color-primary,#1f75fe));font-weight:700} .ui-legal-contact-box{background:var(--surface-2,var(--color-surface-2,#f8fafc));border:1px dashed color-mix(in srgb,var(--border,var(--color-border,#e2e8f0)) 90%,transparent);border-radius:var(--radius-lg,16px);padding:28px;text-align:center;margin-top:32px;display:flex;flex-direction:column;align-items:center;gap:12px} .ui-legal-contact-box h3{margin:0;font-size:1.2rem;font-weight:700;color:var(--text,var(--color-text,#0f172a))} .ui-legal-contact-box p{margin:0;font-size:0.92rem;color:var(--text-secondary,var(--color-text-subtle,#64748b));max-width:550px;line-height:1.6} .ui-legal-contact-box__actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:6px} [data-theme="dark"] .ui-legal-header{border-color:color-mix(in srgb,var(--border,#334155) 80%,transparent)} [data-theme="dark"] .ui-legal-print-btn{background:#0F172A;border-color:var(--border,#334155);color:#f8fafc} [data-theme="dark"] .ui-legal-print-btn:hover{background:#1E293B} [data-theme="dark"] .ui-legal-quicknav a{background:#0F172A;border-color:var(--border,#334155);color:#f8fafc} [data-theme="dark"] .ui-legal-section{background:#0F172A;border-color:color-mix(in srgb,var(--border,#334155) 80%,transparent);box-shadow:0 4px 16px rgba(0,0,0,0.3)} [data-theme="dark"] .ui-legal-callout{background:color-mix(in srgb,var(--primary,#1f75fe) 12%,#0F172A)} [data-theme="dark"] .ui-legal-contact-box{background:#0F172A;border-color:var(--border,#334155)} /* ═══════════════════════════════════════════════════════════ UI VIDEO PLAYER — Custom controls shared across pages ═══════════════════════════════════════════════════════════ */ .ui-video-player{position:relative;width:100%;border-radius:var(--radius,0);overflow:hidden;background:#000;outline:none;box-shadow:var(--shadow-md)} .ui-video-player:focus{box-shadow:0 0 0 3px var(--color-primary,var(--primary))} .ui-video-player__video{display:block;width:100%;height:auto;max-height:80vh;object-fit:contain;background:#000;cursor:pointer} /* poster-img: overlay صورة فوق الفيديو قبل التشغيل — لا تُجبر الفيديو على نسبة أبعادها */ .ui-video-player__poster-img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;display:block} .ui-video-player--started .ui-video-player__poster-img{opacity:0;pointer-events:none;transition:opacity .3s ease} .ui-video-player__poster-play{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:rgba(15,23,42,.45);border:none;color:#fff;font-size:3.5rem;cursor:pointer;transition:background .2s,opacity .2s;opacity:1} .ui-video-player__poster-play:hover{background:rgba(15,23,42,.35)} /* poster مخصص من المستخدم → لا أوفرلاي (الصورة تظهر كما هي) */ .ui-video-player:not(.ui-video-player--auto-poster) .ui-video-player__poster-play{background:transparent} .ui-video-player:not(.ui-video-player--auto-poster) .ui-video-player__poster-play:hover{background:rgba(15,23,42,.2)} /* poster افتراضي (إطار من الفيديو) → أوفرلاي غامق لإبراز زر التشغيل */ .ui-video-player--auto-poster .ui-video-player__poster-play{background:rgba(15,23,42,.55)} .ui-video-player--auto-poster .ui-video-player__poster-play:hover{background:rgba(15,23,42,.45)} .ui-video-player__poster-play i{font-size:2.8rem;width:72px;height:72px;border-radius:50%;background:var(--color-primary,var(--primary,#1f75fe));display:flex;align-items:center;justify-content:center;box-shadow:0 8px 32px rgba(0,0,0,.4),0 0 0 0 var(--primary-ghost,rgba(31,117,254,.5));transition:transform .2s,box-shadow .2s} .ui-video-player__poster-play:hover i{transform:scale(1.1);box-shadow:0 12px 40px rgba(0,0,0,.5),0 0 0 12px var(--primary-ghost,rgba(31,117,254,.2))} .ui-video-player__poster-play[hidden]{opacity:0;pointer-events:none} /* بعد التشغيل الأول: إخفاء poster-play دائماً (بدلاً منه تظهر الـcontrols) */ .ui-video-player--started .ui-video-player__poster-play{opacity:0;pointer-events:none} .ui-video-player__overlay{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:transparent;border:none;cursor:pointer;opacity:0;transition:opacity .2s} .ui-video-player__overlay[hidden]{opacity:0;pointer-events:none} .ui-video-player__overlay::after{content:'';display:block;width:80px;height:80px;border-radius:50%;background:var(--color-primary,var(--primary));color:#fff;font-size:3.5rem;box-shadow:0 8px 24px rgba(0,0,0,.25);background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:40px} .ui-video-player__loading{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.5);color:#fff;font-size:2.5rem;pointer-events:none} .ui-video-player__loading[hidden]{display:none} /* ── Video Controls — تصميم احترافي مخصص LTR ── */ .ui-video-player__controls{position:absolute;inset-inline:0;bottom:0;z-index:6;display:flex;align-items:center;gap:10px;padding:10px 14px;background:linear-gradient(to top,rgba(0,0,0,.85) 0%,rgba(0,0,0,.4) 60%,transparent 100%);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)} /* الحالة الابتدائية (قبل التشغيل الأول): إخفاء الـcontrols — فقط poster-play */ .ui-video-player:not(.ui-video-player--started):not(.ui-video-player--error) .ui-video-player__controls{opacity:0;visibility:hidden} /* بعد التشغيل: الـcontrols تظهر عند hover/focus أو --controls-visible (من JS) */ .ui-video-player--started:not(.ui-video-player--error):hover .ui-video-player__controls, .ui-video-player--started:not(.ui-video-player--error):focus-within .ui-video-player__controls, .ui-video-player--started:not(.ui-video-player--error).ui-video-player--controls-visible .ui-video-player__controls{opacity:1;visibility:visible} .ui-video-player__controls-left,.ui-video-player__controls-right{display:flex;align-items:center;gap:4px;flex:0 0 auto} .ui-video-player__controls-right{margin-inline-start:auto} .ui-video-player__play,.ui-video-player__mute,.ui-video-player__fullscreen,.ui-video-player__speed,.ui-video-player__pip{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;background:transparent;border:none;color:#fff;font-size:1.05rem;cursor:pointer;border-radius:var(--radius-sm,6px);transition:background .15s,color .15s,transform .1s} .ui-video-player__play:hover,.ui-video-player__mute:hover,.ui-video-player__fullscreen:hover,.ui-video-player__speed:hover,.ui-video-player__pip:hover{background:rgba(255,255,255,.18);color:var(--color-primary,var(--primary,#1f75fe))} .ui-video-player__play:active,.ui-video-player__mute:active,.ui-video-player__fullscreen:active,.ui-video-player__speed:active,.ui-video-player__pip:active{transform:scale(.92)} .ui-video-player__play{background:var(--color-primary,var(--primary,#1f75fe));color:#fff;width:36px;height:36px;border-radius:50%;box-shadow:0 2px 8px rgba(0,0,0,.3)} .ui-video-player__play:hover{background:var(--color-primary-hover,var(--primary-dim,#1558c9));color:#fff;transform:scale(1.06)} .ui-video-player__speed{font-size:.78rem;font-weight:700;font-variant-numeric:tabular-nums;width:auto;min-width:34px;padding:0 8px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15)} .ui-video-player__speed:hover{background:rgba(255,255,255,.2);color:#fff} .ui-video-player__time{flex:0 0 auto;color:rgba(255,255,255,.9);font-size:.78rem;font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:.02em} .ui-video-player__seek{flex:1;min-width:40px;-webkit-appearance:none;appearance:none;height:5px;background:rgba(255,255,255,.2);border-radius:3px;cursor:pointer;transition:height .15s} .ui-video-player__seek:hover{height:7px} .ui-video-player__seek::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--color-primary,var(--primary,#1f75fe));box-shadow:0 2px 8px rgba(0,0,0,.4),0 0 0 0 var(--primary-ghost,rgba(31,117,254,.4));margin-top:-4.5px;transition:box-shadow .15s,transform .15s} .ui-video-player__seek:hover::-webkit-slider-thumb{transform:scale(1.2);box-shadow:0 2px 8px rgba(0,0,0,.4),0 0 0 5px var(--primary-ghost,rgba(31,117,254,.25))} .ui-video-player__seek::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--color-primary,var(--primary,#1f75fe));border:none;box-shadow:0 2px 8px rgba(0,0,0,.4)} .ui-video-player__volume{width:60px;max-width:25%;-webkit-appearance:none;appearance:none;height:4px;background:rgba(255,255,255,.2);border-radius:3px;cursor:pointer;transition:width .2s,height .15s} .ui-video-player__volume:hover{height:5px} .ui-video-player__volume::-webkit-slider-thumb{-webkit-appearance:none;width:11px;height:11px;border-radius:50%;background:#fff;margin-top:-3.5px;box-shadow:0 1px 4px rgba(0,0,0,.3)} .ui-video-player__volume::-moz-range-thumb{width:11px;height:11px;border-radius:50%;background:#fff;border:none;box-shadow:0 1px 4px rgba(0,0,0,.3)} .ui-video-player__error{position:absolute;inset:0;z-index:7;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:rgba(0,0,0,.85);color:#fff;text-align:center;padding:20px} .ui-video-player__error[hidden]{display:none} .ui-video-player__error i{font-size:2.5rem;color:var(--color-danger,#ef4444)} .ui-video-player__error p{margin:0;font-size:.95rem;color:rgba(255,255,255,.85)} .ui-video-player__retry{display:inline-flex;align-items:center;gap:6px;padding:8px 18px;background:var(--color-primary,var(--primary));color:#fff;border:none;border-radius:var(--radius-sm,6px);font-size:.85rem;font-weight:600;cursor:pointer;transition:opacity .15s} .ui-video-player__retry:hover{opacity:.85} .ui-video-player--error .ui-video-player__controls{display:none} /* Landing + item page specific wrappers */ .landing-video-player{max-width:900px;margin:0 auto;border-radius:var(--radius-md,12px);overflow:hidden} .ui-item__video .ui-video-player{max-height:80vh;border-radius:var(--radius-md,12px)} /* Ensure fallback still works */ .ui-item__video-fallback{display:flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-4);background:var(--color-surface-2);border:1px dashed var(--color-border);border-radius:var(--radius-md)} /* ═══════════════════════════════════════════════════════════════════════════ Page Engine — Block Styles (lp-* classes) Central Landing Page Engine — CSS for all core blocks ═══════════════════════════════════════════════════════════════════════════ */ /* ── Base container + reset ─────────────────────────────────────────────── */ .lp-block{margin:0;padding:0;box-sizing:border-box} .lp-block *{box-sizing:border-box} .lp-container{max-width:1200px;margin:0 auto;padding:0 clamp(16px,4vw,32px);width:100%} img{max-width:100%;height:auto} /* ── Hero block ─────────────────────────────────────────────────────────── */ .lp-hero-has-bg{color:#fff} .lp-hero-has-bg .landing-hero__badge{background:rgba(255,255,255,0.15);color:#fff;border-color:rgba(255,255,255,0.2)} .lp-hero-has-bg h1{color:#fff;text-shadow:0 2px 12px rgba(0,0,0,0.3)} .lp-hero-has-bg h1 .hero-accent{-webkit-text-fill-color:#fff;color:#fff;background:none} .lp-hero-has-bg p{color:rgba(255,255,255,0.9)} .lp-hero-has-bg .landing-hero__trust-points{color:rgba(255,255,255,0.85)} .lp-hero-has-bg .landing-hero__logo-card{background:rgba(255,255,255,0.1);backdrop-filter:blur(12px);border-color:rgba(255,255,255,0.2)} .lp-hero-has-bg .landing-hero__logo-wrap{background:rgba(255,255,255,0.15);border-color:rgba(255,255,255,0.3)} [data-theme="dark"] .lp-hero-has-bg .landing-hero__logo-card{background:rgba(0,0,0,0.3)} .lp-hero-has-bg .hero-preview__frame{background:rgba(255,255,255,0.08);backdrop-filter:blur(12px);border-color:rgba(255,255,255,0.15)} .lp-hero-has-bg .hero-preview__bar{background:rgba(0,0,0,0.15);border-color:rgba(255,255,255,0.1)} .lp-hero-has-bg .hero-preview__url{background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.15);color:rgba(255,255,255,0.9)} .lp-hero-has-bg .hero-preview__sidebar{background:rgba(0,0,0,0.1);border-color:rgba(255,255,255,0.1)} .lp-hero-has-bg .hero-preview__nav-item{background:rgba(255,255,255,0.1)} .lp-hero-has-bg .hero-preview__nav-item--active{background:rgba(255,255,255,0.25)} .lp-hero-has-bg .hero-preview__nav-item--logo{background:rgba(255,255,255,0.15);color:#fff} .lp-hero-has-bg .hero-preview__card{background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.1)} .lp-hero-has-bg .hero-preview__title{background:rgba(255,255,255,0.2)} .lp-hero-has-bg .hero-preview__card-line{background:rgba(255,255,255,0.12)} .lp-hero-has-bg .hero-preview__chart{background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.1)} .lp-hero-has-bg .hero-preview__float{background:rgba(255,255,255,0.12);backdrop-filter:blur(12px);border-color:rgba(255,255,255,0.2);color:#fff;box-shadow:0 12px 32px -8px rgba(0,0,0,0.3)} .lp-hero{position:relative;padding:clamp(48px,8vw,96px) 0;text-align:center;background-size:cover;background-position:center;background-repeat:no-repeat;overflow:hidden} .lp-hero::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0.1),rgba(0,0,0,0.3));z-index:0} .lp-hero .lp-container{position:relative;z-index:1} .lp-hero-badge{display:inline-block;padding:6px 16px;border-radius:20px;background:rgba(255,255,255,0.15);backdrop-filter:blur(8px);color:#fff;font-size:13px;font-weight:600;margin-bottom:16px;border:1px solid rgba(255,255,255,0.2)} .lp-hero-title{font-size:clamp(28px,5vw,48px);font-weight:800;color:#fff;line-height:1.2;margin:0 0 16px;text-shadow:0 2px 12px rgba(0,0,0,0.3)} .lp-hero-sub{font-size:clamp(16px,2.5vw,20px);color:rgba(255,255,255,0.9);line-height:1.6;margin:0 0 32px;max-width:640px;margin-inline:auto} .lp-hero-cta{display:inline-block;padding:14px 32px;border-radius:var(--radius-md,12px);background:var(--primary,var(--color-primary,#1f75fe));color:#fff;font-size:16px;font-weight:700;text-decoration:none;transition:transform .15s,box-shadow .15s;box-shadow:0 4px 16px rgba(31,117,254,0.3)} .lp-hero-cta:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(31,117,254,0.4)} /* ── Text block ─────────────────────────────────────────────────────────── */ .lp-text{padding:clamp(32px,5vw,64px) 0} .lp-text-title{font-size:clamp(22px,3.5vw,32px);font-weight:700;color:var(--text,var(--color-text,#0f172a));margin:0 0 16px;line-height:1.3} .lp-text-body{font-size:clamp(15px,2vw,17px);color:var(--text-secondary,var(--color-text-subtle,#475569));line-height:1.8;max-width:720px;margin-inline:auto} .lp-text-body p{margin:0 0 12px} .lp-text-body p:last-child{margin-bottom:0} /* ── Image block ────────────────────────────────────────────────────────── */ .lp-image{padding:clamp(24px,4vw,48px) 0} .lp-image figure{margin:0} .lp-image img{display:block;border-radius:var(--radius-md,12px);box-shadow:0 4px 16px rgba(0,0,0,0.08)} .lp-image-full .lp-container{max-width:100%;padding:0} .lp-image-wide .lp-container{max-width:1400px} .lp-image-normal .lp-container{max-width:800px} .lp-image-caption{text-align:center;font-size:13px;color:var(--text-secondary,var(--color-text-subtle,#475569));margin-top:12px;padding:0 16px} /* ── Video block ────────────────────────────────────────────────────────── */ .lp-video{padding:clamp(32px,5vw,64px) 0;text-align:center} .lp-video-title{font-size:clamp(22px,3.5vw,32px);font-weight:700;margin:0 0 8px} .lp-video-desc{font-size:15px;color:var(--text-secondary,var(--color-text-subtle,#475569));margin:0 0 24px} .lp-video video,.lp-video iframe{max-width:100%;border-radius:var(--radius-md,12px);box-shadow:0 4px 16px rgba(0,0,0,0.1)} .lp-video-cta{display:inline-block;margin-top:16px;padding:10px 24px;border-radius:var(--radius-md,12px);background:var(--primary,var(--color-primary,#1f75fe));color:#fff;text-decoration:none;font-weight:600} /* ── Gallery block ──────────────────────────────────────────────────────── */ .lp-gallery{padding:clamp(32px,5vw,64px) 0} .lp-gallery-title{font-size:clamp(22px,3.5vw,32px);font-weight:700;text-align:center;margin:0 0 32px} .lp-gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px} .lp-gallery-item{border-radius:var(--radius-md,12px);overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,0.06);transition:transform .15s,box-shadow .15s} .lp-gallery-item:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,0.12)} .lp-gallery-item img{display:block;width:100%;height:220px;object-fit:cover} .lp-gallery-item figcaption{padding:10px 14px;font-size:13px;color:var(--text-secondary,var(--color-text-subtle,#475569))} /* ── Features block ─────────────────────────────────────────────────────── */ .lp-features{padding:clamp(40px,6vw,80px) 0;background:var(--surface-2,var(--color-surface-2,#f8fafc))} .lp-features-title{font-size:clamp(24px,4vw,36px);font-weight:800;text-align:center;margin:0 0 8px;color:var(--text,var(--color-text,#0f172a))} .lp-features-sub{font-size:16px;color:var(--text-secondary,var(--color-text-subtle,#475569));text-align:center;margin:0 0 40px} .lp-features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px} .lp-feature-card,.lp-feature-item{text-align:center;padding:24px;border-radius:var(--radius-md,12px);background:var(--surface,var(--color-surface,#fff));box-shadow:0 2px 8px rgba(0,0,0,0.04);transition:transform .15s,box-shadow .15s} .lp-feature-card:hover,.lp-feature-item:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,0.08)} .lp-feature-icon{font-size:40px;margin-bottom:12px;line-height:1} .lp-feature-title{font-size:18px;font-weight:700;margin:0 0 8px;color:var(--text,var(--color-text,#0f172a))} .lp-feature-desc{font-size:14px;color:var(--text-secondary,var(--color-text-subtle,#475569));line-height:1.6;margin:0} /* ── Cards block ────────────────────────────────────────────────────────── */ .lp-cards{padding:clamp(40px,6vw,80px) 0} .lp-cards-title{font-size:clamp(24px,4vw,36px);font-weight:800;text-align:center;margin:0 0 8px} .lp-cards-sub{font-size:16px;color:var(--text-secondary,var(--color-text-subtle,#475569));text-align:center;margin:0 0 40px} .lp-cards-grid{display:grid;gap:20px;grid-template-columns:repeat(var(--lp-cols,3),1fr)} .lp-cards-grid[data-columns="2"],.lp-cards-grid[style*="--lp-cols:2"]{grid-template-columns:repeat(2,1fr)} .lp-cards-grid[data-columns="3"],.lp-cards-grid[style*="--lp-cols:3"]{grid-template-columns:repeat(3,1fr)} .lp-cards-grid[data-columns="4"],.lp-cards-grid[style*="--lp-cols:4"]{grid-template-columns:repeat(4,1fr)} @media(max-width:768px){.lp-cards-grid{grid-template-columns:1fr !important}} .lp-card{padding:24px;border-radius:var(--radius-md,12px);background:var(--surface,var(--color-surface,#fff));border:1px solid var(--border,var(--color-border,#e2e8f0));transition:transform .15s,box-shadow .15s;text-decoration:none;color:inherit;display:block} .lp-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,0.08)} .lp-card-icon{font-size:32px;margin-bottom:12px;line-height:1} .lp-card-title{font-size:18px;font-weight:700;margin:0 0 8px;color:var(--text,var(--color-text,#0f172a))} .lp-card-desc{font-size:14px;color:var(--text-secondary,var(--color-text-subtle,#475569));line-height:1.6;margin:0} /* ── Testimonials block ─────────────────────────────────────────────────── */ .lp-testimonials{padding:clamp(40px,6vw,80px) 0;background:var(--surface-2,var(--color-surface-2,#f8fafc))} .lp-testimonials-title{font-size:clamp(24px,4vw,36px);font-weight:800;text-align:center;margin:0 0 8px} .lp-testimonials-sub{font-size:16px;color:var(--text-secondary,var(--color-text-subtle,#475569));text-align:center;margin:0 0 40px} .lp-testimonials-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px} .lp-testimonial-card,.lp-testimonial{padding:28px;border-radius:var(--radius-md,12px);background:var(--surface,var(--color-surface,#fff));box-shadow:0 2px 8px rgba(0,0,0,0.04);transition:transform .15s,box-shadow .15s} .lp-testimonial-card:hover,.lp-testimonial:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,0.08)} .lp-testimonial-text{font-size:15px;line-height:1.8;color:var(--text,var(--color-text,#0f172a));margin:0 0 16px;font-style:italic} .lp-testimonial-author{display:flex;align-items:center;gap:12px} .lp-testimonial-avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;flex-shrink:0} .lp-testimonial-name{font-size:15px;font-weight:700;margin:0;color:var(--text,var(--color-text,#0f172a))} .lp-testimonial-role{font-size:13px;color:var(--text-secondary,var(--color-text-subtle,#475569));margin:0} /* ── FAQ block ──────────────────────────────────────────────────────────── */ .lp-faq{padding:clamp(40px,6vw,80px) 0} .lp-faq-title{font-size:clamp(24px,4vw,36px);font-weight:800;text-align:center;margin:0 0 32px} .lp-faq-list{max-width:800px;margin:0 auto;display:flex;flex-direction:column;gap:12px} .lp-faq-item{background:var(--surface,var(--color-surface,#fff));border:1px solid var(--border,var(--color-border,#e2e8f0));border-radius:var(--radius-md,12px);overflow:hidden} .lp-faq-q{padding:18px 22px;font-weight:700;cursor:pointer;font-size:16px;color:var(--text,var(--color-text,#0f172a));list-style:none;display:flex;justify-content:space-between;align-items:center} .lp-faq-q::-webkit-details-marker{display:none} .lp-faq-a{padding:0 22px 18px;font-size:15px;line-height:1.8;color:var(--text-secondary,var(--color-text-subtle,#475569))} /* ── Pricing block ──────────────────────────────────────────────────────── */ .lp-pricing{padding:clamp(40px,6vw,80px) 0;background:var(--surface-2,var(--color-surface-2,#f8fafc))} .lp-pricing-title{font-size:clamp(24px,4vw,36px);font-weight:800;text-align:center;margin:0 0 8px} .lp-pricing-sub{font-size:16px;color:var(--text-secondary,var(--color-text-subtle,#475569));text-align:center;margin:0 0 40px} .lp-pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;max-width:1100px;margin:0 auto} .lp-pricing-card,.lp-pricing-plan{padding:32px;border-radius:var(--radius-md,12px);background:var(--surface,var(--color-surface,#fff));border:2px solid var(--border,var(--color-border,#e2e8f0));position:relative;transition:transform .15s,box-shadow .15s} .lp-pricing-card:hover,.lp-pricing-plan:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,0.08)} .lp-pricing-card.lp-pricing-card--highlighted,.lp-pricing-plan.lp-highlighted{border-color:var(--primary,var(--color-primary,#1f75fe));box-shadow:0 8px 32px rgba(31,117,254,0.12);transform:scale(1.02)} .lp-pricing-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);padding:4px 16px;border-radius:20px;background:var(--primary,var(--color-primary,#1f75fe));color:#fff;font-size:12px;font-weight:700} .lp-pricing-name{font-size:20px;font-weight:700;margin:0 0 8px;text-align:center} .lp-pricing-price{font-size:36px;font-weight:800;text-align:center;color:var(--primary,var(--color-primary,#1f75fe));margin:0 0 4px} .lp-pricing-period{font-size:14px;color:var(--text-secondary,var(--color-text-subtle,#475569));text-align:center;margin:0 0 24px} .lp-pricing-features{list-style:none;padding:0;margin:0 0 24px} .lp-pricing-features li{padding:8px 0;font-size:14px;color:var(--text-secondary,var(--color-text-subtle,#475569));border-bottom:1px solid var(--border,var(--color-border,#e2e8f0))} .lp-pricing-features li:last-child{border-bottom:none} .lp-pricing-features li::before{content:'✓ ';color:var(--primary,var(--color-primary,#1f75fe));font-weight:700} .lp-pricing-cta{display:block;text-align:center;padding:12px 24px;border-radius:var(--radius-md,12px);background:var(--primary,var(--color-primary,#1f75fe));color:#fff;text-decoration:none;font-weight:600;transition:opacity .15s} .lp-pricing-cta:hover{opacity:0.9} /* ── CTA block ──────────────────────────────────────────────────────────── */ .lp-cta-block,.lp-cta{padding:clamp(48px,7vw,80px) 0;text-align:center} .lp-cta-block.lp-bg-primary,.lp-cta.lp-cta-primary{background:var(--primary,var(--color-primary,#1f75fe));color:#fff} .lp-cta-block.lp-bg-dark,.lp-cta.lp-cta-dark{background:#0f172a;color:#fff} .lp-cta-block.lp-bg-light,.lp-cta.lp-cta-light{background:var(--surface-2,var(--color-surface-2,#f8fafc))} .lp-cta-title{font-size:clamp(24px,4vw,36px);font-weight:800;margin:0 0 12px} .lp-cta-sub{font-size:16px;line-height:1.6;margin:0 0 28px;opacity:0.9;max-width:560px;margin-inline:auto} .lp-cta-button{display:inline-block;padding:14px 36px;border-radius:var(--radius-md,12px);background:#fff;color:var(--primary,var(--color-primary,#1f75fe));font-size:16px;font-weight:700;text-decoration:none;transition:transform .15s,box-shadow .15s;box-shadow:0 4px 16px rgba(0,0,0,0.15)} .lp-cta-button:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.2)} .lp-cta-block.lp-bg-light .lp-cta-button,.lp-cta.lp-cta-light .lp-cta-button{background:var(--primary,var(--color-primary,#1f75fe));color:#fff} /* ── Contact block ──────────────────────────────────────────────────────── */ .lp-contact{padding:clamp(40px,6vw,80px) 0} .lp-contact-title{font-size:clamp(24px,4vw,36px);font-weight:800;text-align:center;margin:0 0 32px} .lp-contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;max-width:900px;margin:0 auto} .lp-contact-item{text-align:center;padding:24px;border-radius:var(--radius-md,12px);background:var(--surface-2,var(--color-surface-2,#f8fafc))} .lp-contact-item a,.lp-contact-value{font-size:16px;font-weight:600;color:var(--text,var(--color-text,#0f172a));text-decoration:none;display:block;margin-top:4px} .lp-contact-item a:hover,.lp-contact-value:hover{color:var(--primary,var(--color-primary,#1f75fe))} .lp-contact-label{font-size:13px;color:var(--text-secondary,var(--color-text-subtle,#475569));margin:0 0 6px;text-transform:uppercase;letter-spacing:0.5px} /* ── Form block ─────────────────────────────────────────────────────────── */ .lp-form{padding:clamp(40px,6vw,80px) 0;background:var(--surface-2,var(--color-surface-2,#f8fafc))} .lp-form-title{font-size:clamp(24px,4vw,36px);font-weight:800;text-align:center;margin:0 0 8px} .lp-form-sub{font-size:16px;color:var(--text-secondary,var(--color-text-subtle,#475569));text-align:center;margin:0 0 32px} .lp-form-wrap,.lp-form form{max-width:560px;margin:0 auto;padding:32px;border-radius:var(--radius-md,12px);background:var(--surface,var(--color-surface,#fff));box-shadow:0 4px 16px rgba(0,0,0,0.06)} .lp-form-field{margin-bottom:16px} .lp-form-field label{display:block;font-size:14px;font-weight:600;margin-bottom:6px;color:var(--text,var(--color-text,#0f172a))} .lp-form-field input,.lp-form-field textarea{width:100%;padding:10px 14px;border:1px solid var(--border,var(--color-border,#e2e8f0));border-radius:var(--radius-sm,8px);font-size:15px;font-family:inherit;background:var(--surface,var(--color-surface,#fff));color:var(--text,var(--color-text,#0f172a))} .lp-form-field input:focus,.lp-form-field textarea:focus{outline:none;border-color:var(--primary,var(--color-primary,#1f75fe));box-shadow:0 0 0 3px rgba(31,117,254,0.1)} .lp-form-submit{display:block;width:100%;padding:14px;border-radius:var(--radius-md,12px);background:var(--primary,var(--color-primary,#1f75fe));color:#fff;font-size:16px;font-weight:700;border:none;cursor:pointer;transition:opacity .15s} .lp-form-submit:hover{opacity:0.9} /* ── Social proof / logo cloud ──────────────────────────────────────────── */ .lp-social-proof,.lp-social-proof-block{padding:clamp(32px,5vw,48px) 0;text-align:center} .lp-social-proof-title,.lp-social-title{font-size:14px;color:var(--text-secondary,var(--color-text-subtle,#475569));text-transform:uppercase;letter-spacing:1px;margin:0 0 24px} .lp-social-proof-stats,.lp-social-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:48px} .lp-social-proof-stat,.lp-social-stat{display:flex;flex-direction:column;align-items:center} .lp-social-proof-stat .num,.lp-social-value{font-size:clamp(32px,5vw,48px);font-weight:800;color:var(--primary,var(--color-primary,#1f75fe));display:block} .lp-social-proof-stat .label,.lp-social-label{font-size:14px;color:var(--text-secondary,var(--color-text-subtle,#475569));margin-top:4px} .lp-logo-cloud,.lp-logocloud{padding:clamp(32px,5vw,48px) 0;text-align:center} .lp-logo-cloud-title,.lp-logocloud-title{font-size:14px;color:var(--text-secondary,var(--color-text-subtle,#475569));text-transform:uppercase;letter-spacing:1px;margin:0 0 24px} .lp-logo-cloud-grid,.lp-logocloud-grid{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:32px} .lp-logo-cloud-item img,.lp-logocloud-item img{max-height:48px;max-width:160px;opacity:0.6;filter:grayscale(1);transition:opacity .15s,filter .15s} .lp-logo-cloud-item:hover img,.lp-logocloud-item:hover img{opacity:1;filter:none} /* ── Custom HTML block ──────────────────────────────────────────────────── */ .lp-custom-html{padding:clamp(24px,4vw,48px) 0} .lp-custom-html .lp-container{max-width:100%;padding:0} /* ── Responsive ─────────────────────────────────────────────────────────── */ @media(max-width:640px){ .lp-hero{padding:48px 0} .lp-features-grid,.lp-cards-grid,.lp-testimonials-grid,.lp-pricing-grid,.lp-contact-grid{grid-template-columns:1fr !important} .lp-gallery-grid{grid-template-columns:repeat(2,1fr)} .lp-social-proof-stats,.lp-social-grid{gap:24px} } /* ── Dark mode for lp-* blocks ───────────────────────────────────────────── */ [data-theme="dark"] .lp-features,[data-theme="dark"] .lp-testimonials,[data-theme="dark"] .lp-pricing,[data-theme="dark"] .lp-form{background:var(--bg,#0B1120) !important} [data-theme="dark"] .lp-feature-card,[data-theme="dark"] .lp-feature-item,[data-theme="dark"] .lp-testimonial-card,[data-theme="dark"] .lp-testimonial,[data-theme="dark"] .lp-pricing-card,[data-theme="dark"] .lp-pricing-plan,[data-theme="dark"] .lp-card{background:var(--surface,#1A2332) !important;border-color:var(--border,#334155) !important;box-shadow:0 2px 8px rgba(0,0,0,0.3) !important} [data-theme="dark"] .lp-faq-item{background:var(--surface,#1A2332) !important;border-color:var(--border,#334155) !important} [data-theme="dark"] .lp-contact-item{background:var(--surface-2,#0F172A) !important} [data-theme="dark"] .lp-hero::before{background:linear-gradient(180deg,rgba(0,0,0,0.3),rgba(0,0,0,0.5))} [data-theme="dark"] .lp-cta.lp-cta-dark{background:#000 !important} [data-theme="dark"] .lp-text-body,[data-theme="dark"] .lp-features-sub,[data-theme="dark"] .lp-testimonials-sub,[data-theme="dark"] .lp-pricing-sub,[data-theme="dark"] .lp-faq-a,[data-theme="dark"] .lp-social-label,[data-theme="dark"] .lp-social-proof-stat .label{color:var(--text-secondary,#94a3b8) !important} [data-theme="dark"] .lp-form-field input,[data-theme="dark"] .lp-form-field textarea{background:var(--surface,#1A2332) !important;color:var(--text,#e2e8f0) !important;border-color:var(--border,#334155) !important} /* ── Page Builder (admin /pages editor) ─────────────────────────── */ .page-builder-wrapper{padding:24px} .page-builder-form{background:var(--surface,var(--color-surface,#fff));border:1px solid var(--border,var(--color-border,#e5e7eb));border-radius:var(--radius-md,0);padding:24px} .page-builder-form label:not(.button):not(.btn):not(.checkbox-label),#page-form label:not(.button):not(.btn):not(.checkbox-label){display:grid;gap:6px;font-weight:500;font-size:var(--text-sm);color:var(--text2,var(--color-text-subtle,#6b7280));margin-bottom:12px} .page-builder-form input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),.page-builder-form select,.page-builder-form textarea,#page-form input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),#page-form select,#page-form textarea{width:100%;height:var(--control-h,38px);padding:0 var(--control-padding-x,10px);border:1px solid var(--border2,var(--color-border-strong,#cbd5e1));border-radius:var(--control-radius,6px);background:var(--surface,var(--color-surface,#fff));color:var(--text,var(--color-text,#0f172a));font-size:var(--control-font-size,var(--text-sm));font-family:inherit;line-height:normal;box-sizing:border-box;outline:none;transition:border-color .15s,box-shadow .15s} .page-builder-form textarea,#page-form textarea{height:auto;min-height:calc(var(--control-h,38px) * 2.5);padding:10px var(--control-padding-x,10px);resize:vertical} .page-builder-form input:focus,.page-builder-form select:focus,.page-builder-form textarea:focus,#page-form input:focus,#page-form select:focus,#page-form textarea:focus{border-color:var(--primary,var(--color-primary,#1f75fe));box-shadow:0 0 0 2px color-mix(in srgb,var(--primary,var(--color-primary,#1f75fe)) 20%,transparent)} .page-builder-form .two-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px} .form-panel .two-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px} .page-builder-form .checkbox-label{display:flex;align-items:center;gap:8px;cursor:pointer;padding-top:24px;font-size:var(--text-sm);color:var(--text,var(--color-text,#0f172a))} .page-builder-form .checkbox-label input[type="checkbox"]{width:auto;margin:0} .page-builder-form .code-textarea{font-family:var(--font-num,monospace);font-size:var(--text-xs,0.75rem);direction:ltr;text-align:left} .page-builder-section{margin-top:24px;border-top:1px solid var(--border,var(--color-border,#e5e7eb));padding-top:20px} .page-builder-section__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px} .page-builder-section__title{font-size:var(--text-sm);font-weight:700;display:block;margin-bottom:12px} .page-builder-grid{display:grid;grid-template-columns:1fr 300px;gap:20px} .block-palette{display:flex;flex-direction:column;gap:6px;max-height:600px;overflow-y:auto;padding-inline-end:4px} .block-palette__search{position:sticky;top:0;background:var(--surface,var(--color-surface,#fff));padding:6px 0;z-index:1;border-bottom:1px solid var(--border,var(--color-border,#e5e7eb));margin-bottom:4px} .block-palette__search input{width:100%;height:32px;padding:0 10px;border:1px solid var(--border,var(--color-border,#e5e7eb));border-radius:6px;font-size:var(--text-xs,0.75rem);background:var(--surface,var(--color-surface,#fff));color:var(--text,var(--color-text,#0f172a));box-sizing:border-box;outline:none} .block-palette__search input:focus{border-color:var(--primary,var(--color-primary,#1f75fe))} .block-palette-item{display:flex;align-items:center;gap:8px;padding:9px 11px;border:1px solid var(--border,var(--color-border,#e5e7eb));border-radius:8px;background:var(--surface,var(--color-surface,#fff));cursor:grab;font-size:var(--text-sm,0.875rem);transition:all .15s;user-select:none} .block-palette-item__icon{font-size:17px;flex-shrink:0} .block-palette-item__label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .block-palette-item__add{color:var(--primary,var(--color-primary,#1f75fe));font-size:16px;font-weight:700;flex-shrink:0} .palette-group{margin-bottom:8px} .palette-group summary{font-size:var(--text-xs,0.75rem);font-weight:700;color:var(--text3,var(--color-text-subtle,#6b7280));text-transform:uppercase;letter-spacing:0.5px;cursor:pointer;padding:6px 0;display:flex;align-items:center;gap:6px;list-style:none} .palette-group__icon{font-size:14px} .palette-group__count{background:var(--surface2,var(--color-surface-2,#f1f5f9));color:var(--text3,var(--color-text-subtle,#6b7280));font-size:10px;padding:1px 6px;border-radius:10px;font-weight:600} .palette-group__items{display:flex;flex-direction:column;gap:5px;padding-top:6px} .version-row{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-bottom:1px solid var(--border,var(--color-border,#e5e7eb));font-size:var(--text-sm,0.875rem)} .version-row:last-child{border-bottom:0} .sections-canvas{min-height:200px;border:2px dashed var(--border,var(--color-border,#e5e7eb));border-radius:8px;transition:all .2s} @media(max-width:899px){.form-panel .two-fields{grid-template-columns:1fr}.page-builder-form .two-fields{grid-template-columns:1fr}.page-builder-grid{grid-template-columns:1fr !important}} .block-palette-item:hover{border-color:var(--primary,var(--color-primary,#1f75fe));background:var(--surface2,var(--color-surface-2,#f8fafc));transform:translateY(-1px);box-shadow:0 2px 8px rgba(0,0,0,0.08)} .block-palette-item:active{cursor:grabbing;transform:translateY(0)} .block-palette-item.hidden-by-search{display:none !important} .palette-group summary::-webkit-details-marker{display:none} .palette-group[open] summary{margin-bottom:2px} .palette-group summary:hover{color:var(--primary,var(--color-primary,#1f75fe))} .section-item:hover{box-shadow:0 2px 8px rgba(0,0,0,0.08)} .section-item.dragging{opacity:0.5;border:2px dashed var(--primary,var(--color-primary,#1f75fe)) !important} .section-item.drag-over{border-top:3px solid var(--primary,var(--color-primary,#1f75fe)) !important} .section-item.expanded{border-color:var(--primary,var(--color-primary,#1f75fe)) !important;box-shadow:0 4px 16px rgba(31,117,254,0.12) !important} .sections-canvas.drag-active{border-color:var(--primary,var(--color-primary,#1f75fe)) !important;background:color-mix(in srgb,var(--primary,var(--color-primary,#1f75fe)) 5%,transparent) !important} .sections-canvas.drag-over-empty{border-color:var(--primary,var(--color-primary,#1f75fe)) !important;background:color-mix(in srgb,var(--primary,var(--color-primary,#1f75fe)) 8%,transparent) !important;border-width:3px !important} #pb-unsaved-bar{position:sticky;top:0;z-index:50;background:var(--warn,#f59e0b);color:#fff;padding:8px 16px;font-size:var(--text-xs,0.75rem);font-weight:700;display:none;align-items:center;justify-content:center;gap:8px;border-radius:6px;margin-bottom:12px} #pb-unsaved-bar.show{display:flex} /* ════════════════════════════════════════════════════════════════ نظام الجداول المركزي الموحّد (data-table v2) مصدر وحيد: packages/ui/src/styles/table.styles.js يُستهلك من: adminStyles (apps/admin) + baseStyles (tenant/consumer) ════════════════════════════════════════════════════════════════ */ /* ── Wrappers ─────────────────────────────────────────────── */ .table-wrap, .table-container, .table-responsive{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--border,var(--color-border,#e2e8f0)) transparent} .table-wrap::-webkit-scrollbar, .table-container::-webkit-scrollbar, .table-responsive::-webkit-scrollbar{height:6px} .table-wrap::-webkit-scrollbar-thumb, .table-container::-webkit-scrollbar-thumb, .table-responsive::-webkit-scrollbar-thumb{background:var(--border,var(--color-border,#e2e8f0));border-radius:3px} .table-card{background:var(--surface,var(--color-surface,#fff));border:1px solid var(--border,var(--color-border,#e2e8f0));border-radius:var(--radius-md,0);overflow:hidden} .table-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border-bottom:1px solid var(--border,var(--color-border,#e2e8f0));flex-wrap:wrap} /* ── Table base (لا يُطبق على table عام — فقط .data-table) ── */ .data-table{width:100%;border-collapse:collapse;text-align:right;min-width:600px;font-size:var(--text-sm,0.875rem);font-family:inherit} /* ── Header cells (th) ────────────────────────────────────── */ .data-table th{padding:10px 16px;background:var(--surface2,var(--color-surface-2,#f8fafc));color:var(--text2,var(--color-text-muted,#64748b));font-weight:600;font-size:var(--text-xs,0.75rem);text-transform:uppercase;letter-spacing:0.04em;border-bottom:1px solid var(--border,var(--color-border,#e2e8f0));white-space:nowrap;position:sticky;top:0;z-index:2} .data-table thead tr:last-child th{border-bottom:2px solid var(--border,var(--color-border,#e2e8f0))} /* ── Body cells (td) ──────────────────────────────────────── */ .data-table td{padding:11px 16px;border-bottom:1px solid var(--border,var(--color-border,#e2e8f0));color:var(--text,var(--color-text,#0f172a));vertical-align:middle;font-size:var(--text-sm,0.875rem);white-space:nowrap;max-width:340px;overflow:hidden;text-overflow:ellipsis;line-height:1.5} /* ── Cell content variants ────────────────────────────────── */ .data-table td strong{font-weight:600;color:var(--text,var(--color-text,#0f172a));white-space:nowrap;max-width:280px;overflow:hidden;text-overflow:ellipsis;display:inline-block;vertical-align:middle;font-size:var(--text-sm,0.875rem)} .data-table td a{color:var(--primary,var(--color-primary,#1F75FE));text-decoration:none;font-size:var(--text-sm,0.875rem);white-space:nowrap;max-width:280px;overflow:hidden;text-overflow:ellipsis;display:inline-block;vertical-align:middle} .data-table td a:hover{text-decoration:underline} .data-table td small{display:block;margin-top:2px;color:var(--text3,var(--color-text-muted,#94a3b8));font-size:var(--text-xs,0.75rem);font-weight:400;white-space:nowrap;max-width:280px;overflow:hidden;text-overflow:ellipsis} .data-table td code{direction:ltr;font-size:var(--text-sm,0.875rem);font-family:var(--font-num,monospace);background:var(--surface2,var(--color-surface-2,#f8fafc));padding:2px 6px;border-radius:var(--radius-xs,3px);border:1px solid var(--border,var(--color-border,#e2e8f0));color:var(--text,var(--color-text,#0f172a));white-space:nowrap} .data-table td .badge{font-size:var(--text-xs,0.75rem);white-space:nowrap} .data-table td .hint{color:var(--text3,var(--color-text-muted,#94a3b8));font-size:var(--text-xs,0.75rem);white-space:nowrap} /* ─ـ خلية avatar-row: صورة + نص مع هامش واضح ── */ .data-table .avatar-row{display:inline-flex;align-items:center;gap:12px;min-width:0;max-width:340px} .data-table .avatar-row > :first-child{flex-shrink:0} .data-table .avatar-row > :last-child, .data-table .avatar-row > span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-inline-start:0} /* ── Row states ───────────────────────────────────────────── */ .data-table tbody tr{transition:background 0.15s ease} .data-table tbody tr:hover td{background:var(--surface2,var(--color-surface-2,#f8fafc))} .data-table tbody tr:last-child td{border-bottom:0} /* ── Sticky header (اختياري — يُفعّل بإضافة class="data-table--sticky") ── */ .data-table--sticky thead th{position:sticky;top:0;z-index:3;box-shadow:0 1px 0 var(--border,var(--color-border,#e2e8f0))} /* ── Zebra (اختياري — يُفعّل بإضافة class="data-table--zebra") ── */ .data-table--zebra tbody tr:nth-child(even) td{background:var(--surface1,var(--color-surface-1,#fafafa))} .data-table--zebra tbody tr:nth-child(even):hover td{background:var(--surface2,var(--color-surface-2,#f1f5f9))} /* ── Compact (اختياري — جداول كثيفة الصفوف) ── */ .data-table--compact td{padding:7px 12px} .data-table--compact th{padding:8px 12px} /* ── Comfortable (اختياري — جداول واسعة الخلايا) ── */ .data-table--comfortable td{padding:16px 20px} .data-table--comfortable th{padding:14px 20px} /* ── Empty state row ──────────────────────────────────────── */ .data-table .empty-row td{padding:48px 24px;text-align:center;color:var(--text3,var(--color-text-muted,#94a3b8));font-size:var(--text-sm,0.875rem)} .data-table .empty-row td .empty-state{padding:0;margin:0} /* ── Action cell (أزرار إجراءات) ──────────────────────────── */ .data-table .action-cell, .data-table .table-actions{white-space:nowrap;text-align:center;vertical-align:middle} .data-table .action-cell .button, .data-table .table-actions .button{margin:0 2px} /* ── Copyable cells ───────────────────────────────────────── */ .data-table [data-copy]{cursor:pointer;transition:color 0.15s ease} .data-table [data-copy]:hover{color:var(--primary,var(--color-primary,#1F75FE))} /* ── Inputs inside table (forms in tables — google/ads pages) ── */ .data-table input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), .data-table select, .data-table textarea{width:100%;min-width:120px;padding:6px 10px;border:1px solid var(--border2,var(--color-border-strong,#cbd5e1));border-radius:var(--radius-sm,4px);background:var(--surface,var(--color-surface,#fff));color:var(--text,var(--color-text,#0f172a));font:inherit;font-size:var(--text-sm,0.875rem);outline:none;transition:border-color 0.15s ease,box-shadow 0.15s ease} .data-table input[pattern]{font-family:var(--font-num,monospace);direction:ltr} .data-table input:focus, .data-table select:focus, .data-table textarea:focus{border-color:var(--primary,var(--color-primary,#1F75FE));box-shadow:0 0 0 2px color-mix(in srgb,var(--primary,var(--color-primary,#1F75FE)) 20%,transparent)} .data-table input::placeholder, .data-table textarea::placeholder{color:var(--text3,var(--color-text-muted,#94a3b8))} .data-table abbr[title]{text-decoration:underline dotted;cursor:help;border-bottom:0} /* ── Dark mode ────────────────────────────────────────────── */ [data-theme="dark"] .data-table th{background:var(--surface2,#1e293b) !important;color:var(--text2,#94a3b8) !important;border-bottom-color:var(--border,#334155) !important} [data-theme="dark"] .data-table td{color:var(--text,#e2e8f0) !important;border-bottom-color:var(--border,#334155) !important} [data-theme="dark"] .data-table tbody tr:hover td{background:rgba(255,255,255,0.03) !important} [data-theme="dark"] .data-table td strong{color:var(--text,#e2e8f0) !important} [data-theme="dark"] .data-table td small{color:var(--text3,#64748b) !important} [data-theme="dark"] .data-table td code{background:var(--surface2,#1e293b) !important;border-color:var(--border,#334155) !important;color:var(--text,#e2e8f0) !important} [data-theme="dark"] .data-table--zebra tbody tr:nth-child(even) td{background:rgba(255,255,255,0.02) !important} [data-theme="dark"] .data-table input, [data-theme="dark"] .data-table select, [data-theme="dark"] .data-table textarea{background:var(--surface2,#1e293b) !important;border-color:var(--border,#334155) !important;color:var(--text,#e2e8f0) !important} /* ── Responsive ───────────────────────────────────────────── */ @media(max-width:768px){ .data-table{min-width:500px} .data-table th{padding:9px 12px;font-size:var(--text-xs,0.7rem)} .data-table td{padding:10px 12px;font-size:var(--text-sm,0.8125rem);max-width:200px} .data-table td strong, .data-table td a{max-width:180px} .data-table td small{max-width:180px} .data-table .avatar-row{gap:10px;max-width:220px} } @media(max-width:480px){ .data-table{min-width:400px} .data-table th{padding:8px 10px} .data-table td{padding:9px 10px;max-width:160px} .data-table td strong, .data-table td a{max-width:140px} .data-table .avatar-row{gap:8px;max-width:180px} } /* ── Grid view mode (تحويل الجدول لبطاقات على الشاشات الصغيرة) ── */ .data-table,.data-table tr,.data-table td{transition:all .2s ease} [data-view-mode="grid"] .data-table{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;padding:16px;border:none;min-width:0} [data-view-mode="grid"] .data-table thead{display:none} [data-view-mode="grid"] .data-table tbody{display:contents} [data-view-mode="grid"] .data-table tr{display:flex;flex-direction:column;gap:8px;padding:16px;background:var(--surface,var(--color-surface,#fff));border:1px solid var(--border,var(--color-border,#e2e8f0));border-radius:var(--radius-md,0);box-shadow:0 1px 3px rgba(0,0,0,.06)} [data-view-mode="grid"] .data-table tr:hover{border-color:var(--primary,var(--color-primary,#1F75FE));box-shadow:0 2px 8px rgba(0,0,0,.1)} [data-view-mode="grid"] .data-table td{display:flex;flex-direction:column;padding:0;border:none;font-size:var(--text-sm,0.875rem);max-width:none;overflow:visible;text-overflow:clip;white-space:normal} [data-view-mode="grid"] .data-table td::before{content:attr(data-label);font-size:var(--text-xs,0.75rem);font-weight:600;color:var(--text3,var(--color-text-muted,#94a3b8));margin-bottom:2px} [data-view-mode="grid"] .data-table td:first-child{font-size:var(--text-base,1rem);font-weight:700} [data-view-mode="grid"] .data-table td:first-child::before{display:none} [data-view-mode="grid"] .data-table td:last-child{margin-top:auto;padding-top:8px} [data-view-mode="grid"] .data-table td:last-child::before{display:none} [data-view-mode="grid"] .data-table .table-actions{justify-content:flex-start} [data-view-mode="grid"] .data-table .avatar-row{max-width:none} [data-view-mode="grid"] .table-container{overflow:visible} @media(max-width:768px){[data-view-mode="grid"] .data-table{grid-template-columns:1fr}} .trash-panel{min-height:280px} .trash-table-wrap{overflow:auto} .trash-table{min-width:920px} .trash-table th,.trash-table td{vertical-align:middle} .trash-table__select{width:44px;text-align:center} .trash-table__name{min-width:180px;max-width:320px} .trash-table__name strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .trash-item__reason{display:block;color:var(--text3,var(--color-text-muted));font-size:var(--text-xs,.8rem);margin-top:3px} .trash-table__actor,.trash-table__date{color:var(--text2,var(--color-text-muted));font-size:var(--text-sm,.875rem)} .trash-table__actions{display:flex;gap:6px;flex-wrap:wrap;min-width:180px} .trash-type-badge{background:var(--surface2,var(--color-surface-2));color:var(--text2,var(--color-text))} .trash-retention{display:inline-flex;align-items:center;height:24px;padding:0 8px;border-radius:0;background:var(--surface2,var(--color-surface-2));font-size:var(--text-xs,.8rem);font-weight:700;color:var(--text2,var(--color-text))} .trash-retention--warn{background:var(--color-warning-subtle,#fff7ed);color:var(--color-warning,#b45309)} .trash-retention--danger{background:var(--color-danger-subtle,#fee2e2);color:var(--danger,var(--color-danger,#b91c1c))} tr[data-trash-row]{transition:opacity .25s} tr[data-trash-row].selected{background:var(--color-primary-subtle,rgba(31,117,254,.08))} .trash-toolbar{display:flex;align-items:center;gap:8px;flex:1;min-width:0} .trash-toolbar .action-toolbar__spacer{flex:1} .trash-toolbar__count{color:var(--text3,var(--color-text-muted));font-size:var(--text-sm,.875rem);white-space:nowrap} .trash-toolbar button:disabled{opacity:.45;cursor:not-allowed} @media(max-width:760px){.trash-toolbar{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}.trash-toolbar::-webkit-scrollbar{display:none}.trash-toolbar button{flex:0 0 auto;white-space:nowrap}.trash-toolbar__count{flex:0 0 auto}}