/* =============================================
   منصة متجركم - التصميم الرئيسي (نسخة مصلحة)
   ============================================= */

/* خط تجوال المحلي */
@font-face {
    font-family: 'Tajawal';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('vendor/fonts/tajawal-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Tajawal';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('vendor/fonts/tajawal-700.woff2') format('woff2');
}
@font-face {
    font-family: 'Tajawal';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('vendor/fonts/tajawal-800.woff2') format('woff2');
}
@font-face {
    font-family: 'Tajawal';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('vendor/fonts/tajawal-800.woff2') format('woff2');
}


/* ── المتغيرات ── */
:root {
    --primary:       #ff5b2e;
    --primary-dark:  #d94418;
    --primary-light: #e94b21;
    --secondary:     #17191c;
    --accent:        #ff8a00;
    --success:       #168b57;
    --warning:       #b97500;
    --danger:        #d63b4d;
    --info:          #067c91;

    /* درجات الخلفية والنصوص للتصميم الفاتح */
    --dark:          #f5f5f3;
    --dark-card:     #ffffff;
    --dark-border:   #e4e5e7;
    --text-primary:  #17191c;
    --text-secondary:#4c5159;
    --text-muted:    #747b84;
    --dark-sidebar:  #ffffff; /* سايدبار أبيض */
    --dark-input:    #ffffff; /* حقل إدخال أبيض */
    --dark-input-border:#d8dade;
    --dark-hover:    #eef0f2;

    /* تأثير الزجاج ليتناسب مع الفاتح */
    --glass-bg:      rgba(255, 255, 255, 0.95);
    --glass-border:  rgba(0, 0, 0, 0.05);

    --gradient-1: linear-gradient(135deg, #ff5b2e 0%, #ff832e 100%);
    --gradient-2: linear-gradient(135deg, #17191c 0%, #34383e 100%);
    --gradient-3: linear-gradient(135deg, #168b57 0%, #1db875 100%);

    --shadow-sm: 0 2px 8px rgba(23, 25, 28, 0.05);
    --shadow-md: 0 12px 30px rgba(23, 25, 28, 0.08);
    --shadow-lg: 0 24px 60px rgba(23, 25, 28, 0.12);
    --shadow-glow: 0 10px 28px rgba(255, 91, 46, 0.24);

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 28px;

    --transition:      all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: all 0.15s ease;
}

/* ── الأساسيات ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    font-family: 'Tajawal', sans-serif !important;
    background:
        radial-gradient(circle at 8% 0%, rgba(255, 91, 46, 0.055), transparent 28rem),
        var(--dark);
    color: var(--text-primary);
    direction: rtl;
    text-align: right;
    min-height: 100vh;
    /* لا نضع overflow-x:hidden هنا لأنه يكسر RTL Grid */
}

/* إصلاح overflow على مستوى الـ html فقط */
html {
    overflow-x: hidden;
}

/* تثبيت عرض الـ container */
.container {
    max-width: 1240px;
    width: 100%;
    padding-right: 1rem;
    padding-left: 1rem;
    margin-right: auto;
    margin-left: auto;
}

/* إصلاح Bootstrap RTL row gutter */
.row { --bs-gutter-x: 1.5rem; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--dark-card); }
::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 3px; }

/* ── Typography ── */
h1,h2,h3,h4,h5,h6 { font-family: 'Tajawal', sans-serif; font-weight: 700; color: var(--text-primary); }
p { color: var(--text-secondary); line-height: 1.7; }
a { text-decoration: none; transition: var(--transition-fast); }

/* ── تجاوز Bootstrap للخلفية ── */
.bg-light, .bg-white { background-color: var(--dark-card) !important; }
.text-dark { color: var(--text-primary) !important; }
.border { border-color: var(--dark-border) !important; }

/* ── الشريط العلوي ── */
.main-navbar {
    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--dark-border);
    padding: 0.65rem 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 1px 0 rgba(23,25,28,.03), 0 10px 30px rgba(23,25,28,.04);
}

.navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    color: var(--text-primary) !important;
}

/* ── البطاقات ── */
.card-glass {
    background: var(--dark-card);
    border: 1px solid var(--dark-border);
    border-radius: 18px;
    padding: 1.5rem;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.card-glass::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--primary), transparent);
    opacity: 0;
    transition: var(--transition);
}

.card-glass:hover { border-color: rgba(255, 91, 46, 0.28); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.card-glass:hover::before { opacity: 1; }

/* ── بطاقات الإحصاء ── */
.stat-card {
    background: var(--dark-card);
    border: 1px solid var(--dark-border);
    border-radius: 18px;
    padding: 1.5rem;
    transition: var(--transition);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    position: relative;
}
.stat-card::after { content:''; position:absolute; inset:0 0 auto; height:3px; background:var(--primary); opacity:.9; }
.stat-card.warning::after { background:var(--warning); }
.stat-card.success::after { background:var(--success); }
.stat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

.stat-icon {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    margin-bottom: 1rem;
}

.stat-value { font-size: 2rem; font-weight: 800; color: var(--text-primary); line-height: 1; }
.stat-label { color: var(--text-muted); font-size: 0.875rem; margin-top: 0.25rem; }

/* ── الأزرار ── */
.btn-primary-custom {
    background: var(--gradient-1) !important;
    border: none !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-family: 'Tajawal', sans-serif !important;
    border-radius: 10px !important;
    min-height: 42px;
    padding-inline: 1.1rem;
    transition: var(--transition) !important;
    cursor: pointer;
}
.btn-primary-custom:hover { transform: translateY(-2px); box-shadow: var(--shadow-glow); color: #fff !important; }
.btn-primary-custom:active { transform: translateY(0); }

.btn-ghost {
    background: transparent !important;
    border: 1px solid var(--dark-border) !important;
    color: var(--text-secondary) !important;
    font-family: 'Tajawal', sans-serif !important;
    border-radius: 10px !important;
    min-height: 40px;
    transition: var(--transition) !important;
}
.btn-ghost:hover { border-color: var(--primary) !important; color: var(--primary-light) !important; background: rgba(255, 107, 53,0.1) !important; }

/* ── السايدبار ── */
.sidebar {
    width: 260px;
    background: #17191c;
    border-left: 1px solid #25282c !important;
    border-right: none !important;
    height: 100vh;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 200;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 2rem;
    color: #f7f7f8;
    box-shadow: -12px 0 30px rgba(23,25,28,.06);
    transition: transform 0.3s ease;
}

.sidebar::-webkit-scrollbar {
    width: 6px;
}
.sidebar::-webkit-scrollbar-track {
    background: transparent;
}
.sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
}
.sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

.sidebar-brand {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #292c31;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.sidebar-brand-logo {
    width: 40px;
    height: 40px;
    background: var(--gradient-1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 900;
    color: #fff;
    flex-shrink: 0;
}
.sidebar-brand-logo img { width:100%; height:100%; object-fit:cover; border-radius:inherit; }

.admin-create-panel { background:linear-gradient(135deg,#191b1f,#2b2e33); color:#fff; border-radius:20px; padding:1.35rem; margin-bottom:1rem; box-shadow:var(--shadow-md); }
.admin-create-panel-head { display:flex; align-items:center; gap:.85rem; margin-bottom:1rem; }
.admin-create-panel-head > span { width:45px; height:45px; display:grid; place-items:center; border-radius:13px; background:rgba(255,91,46,.16); color:#ff8a67; }
.admin-create-panel h2 { color:#fff; font-size:1.05rem; margin:0 0 .15rem; }
.admin-create-panel p { color:#aeb4bc; font-size:.76rem; margin:0; }
.admin-create-grid { display:grid; grid-template-columns:1.1fr 1.35fr 1fr 1fr .8fr auto; gap:.65rem; align-items:end; }
.admin-create-panel .form-label-custom { color:#c4c8cd !important; }
.admin-create-panel .form-control-custom { min-height:43px; }
.admin-create-panel button { min-height:43px; padding-inline:1rem; white-space:nowrap; }
.admin-role-super { background:rgba(117,76,255,.12); color:#6242d7; border:1px solid rgba(117,76,255,.25); }
.admin-user-actions { display:flex; align-items:center; gap:.35rem; }
.admin-role-form select { min-height:32px; border:1px solid var(--dark-border); border-radius:8px; background:#fff; padding:.2rem .4rem; font:600 .7rem Tajawal,sans-serif; }
.admin-toggle-user { width:32px; height:32px; border:0 !important; }
.admin-toggle-user.is-disable { background:rgba(214,59,77,.1); color:var(--danger); }
.admin-toggle-user.is-enable { background:rgba(22,139,87,.1); color:var(--success); }
.admin-role-pill { padding:.35rem .7rem; border-radius:99px; background:#fff1eb; color:var(--primary-dark); font-size:.72rem; font-weight:800; }
.admin-profile-layout { display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:1rem; align-items:start; max-width:980px; }
.admin-profile-card { padding:1.5rem; }
.profile-password-divider { display:flex; align-items:center; gap:.7rem; color:var(--text-muted); font-size:.75rem; font-weight:800; margin:.25rem 0; }
.profile-password-divider::before,.profile-password-divider::after { content:''; height:1px; flex:1; background:var(--dark-border); }
.admin-profile-summary { background:linear-gradient(145deg,#191b1f,#31241f); color:#fff; text-align:center; border-radius:20px; padding:1.5rem; box-shadow:var(--shadow-md); }
.admin-profile-summary img { width:88px; height:88px; object-fit:cover; border-radius:22px; box-shadow:0 18px 35px rgba(0,0,0,.28); }
.admin-profile-summary h2 { color:#fff; font-size:1.05rem; margin:1rem 0 .15rem; }
.admin-profile-summary p { color:#aeb4bc; font-size:.72rem; margin-bottom:.6rem; }
.admin-profile-summary > span { display:inline-block; padding:.3rem .65rem; border-radius:99px; background:rgba(255,91,46,.16); color:#ff9675; font-size:.68rem; font-weight:800; }
.admin-profile-summary > div { display:flex; justify-content:space-between; margin-top:1.4rem; padding-top:1rem; border-top:1px solid rgba(255,255,255,.09); font-size:.72rem; }
.monitor-period { min-height:39px; border:1px solid var(--dark-border); border-radius:9px; background:#fff; padding:.35rem .7rem; font:700 .75rem Tajawal,sans-serif; }
.monitor-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:.8rem; margin-bottom:1rem; }
.monitor-stats > div { display:grid; grid-template-columns:42px 1fr; gap:.15rem .7rem; align-items:center; background:#fff; border:1px solid var(--dark-border); border-radius:16px; padding:1rem; box-shadow:var(--shadow-sm); }
.monitor-stats span { grid-row:1/3; width:42px; height:42px; display:grid; place-items:center; border-radius:12px; background:#fff0ea; color:var(--primary); }
.monitor-stats span.is-success { background:#e8f7f0; color:var(--success); }.monitor-stats span.is-danger { background:#fbecee; color:var(--danger); }
.monitor-stats small { color:var(--text-muted); font-size:.68rem; }.monitor-stats strong { font-size:1.35rem; }
.monitor-grid { display:grid; grid-template-columns:minmax(0,1fr) 290px; gap:1rem; margin-bottom:1rem; }
.monitor-card-head { display:flex; align-items:center; justify-content:space-between; gap:.8rem; margin-bottom:1rem; }
.monitor-card-head h2 { font-size:1rem; margin:0; }.monitor-card-head h2 i { color:var(--primary); margin-left:.35rem; }.monitor-card-head small { color:var(--text-muted); font-size:.67rem; }
.country-list { display:grid; grid-template-columns:repeat(2,1fr); gap:.55rem; }
.country-list > div { display:flex; justify-content:space-between; align-items:center; padding:.7rem; border:1px solid var(--dark-border); border-radius:11px; }
.country-list span { display:flex; align-items:center; gap:.4rem; }.country-list span:last-child { flex-direction:column; gap:0; align-items:flex-end; }.country-list i { color:var(--primary); }.country-list small { color:var(--text-muted); font-size:.6rem; }
.monitor-privacy { background:linear-gradient(145deg,#191b1f,#2c3035); color:#fff; border-radius:18px; padding:1.25rem; }
.monitor-privacy > i { width:45px; height:45px; display:grid; place-items:center; border-radius:13px; background:rgba(255,91,46,.15); color:#ff8f6d; }.monitor-privacy h3 { color:#fff; font-size:.95rem; margin:1rem 0 .4rem; }.monitor-privacy p { color:#aeb4bc; font-size:.72rem; line-height:1.7; }.monitor-privacy > div { display:flex; justify-content:space-between; border-top:1px solid rgba(255,255,255,.08); padding:.65rem 0; font-size:.72rem; }
.monitor-table-card { margin-top:1rem; }
.monitor-table-card code { white-space:nowrap; font-size:.72rem; }

@media (max-width:1100px) { .admin-create-grid { grid-template-columns:repeat(2,1fr); }.admin-create-grid button { grid-column:1/-1; } }
@media (max-width:767px) {
    .admin-create-grid,.admin-profile-layout,.monitor-grid { grid-template-columns:1fr; }
    .admin-create-panel { padding:1rem; }.admin-create-grid button { grid-column:auto; }
    .admin-profile-summary { order:-1; }
    .monitor-stats { grid-template-columns:repeat(2,1fr); }
    .country-list { grid-template-columns:1fr; }
    .monitor-card-head { align-items:flex-start; flex-direction:column; }
}
@media (max-width:440px) { .monitor-stats { grid-template-columns:1fr; }.monitor-table-card { padding:.75rem; } }

.sidebar-brand-text {
    font-size: 1.15rem;
    font-weight: 800;
    color: #fff;
}

.sidebar-nav { padding: 0.75rem; }

.sidebar-section-title {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #777e88;
    text-transform: uppercase;
    padding: 0.85rem 0.75rem 0.4rem;
}

.sidebar-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.65rem 0.9rem;
    border-radius: var(--radius-sm);
    color: #bcc1c8;
    transition: var(--transition-fast);
    margin-bottom: 0.2rem;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    position: relative;
}

.sidebar-item:hover { background: rgba(255, 255, 255, 0.065); color: #fff; }

.sidebar-item.active {
    background: linear-gradient(90deg, rgba(255,91,46,.24), rgba(255,91,46,.08));
    color: #ff936f;
    font-weight: 700;
}

.sidebar-item.active::before {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 60%;
    background: var(--primary);
    border-radius: 2px;
}

.sidebar-item i { width: 18px; text-align: center; font-size: 0.95rem; flex-shrink: 0; }

.sidebar-badge {
    margin-right: auto;
    background: var(--primary);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.1rem 0.45rem;
    border-radius: 20px;
    min-width: 18px;
    text-align: center;
}

/* ── المحتوى الرئيسي (مع السايدبار) ── */
.main-content {
    margin-right: 260px !important;
    margin-left: 0 !important;
    min-height: 100vh;
    padding: 2rem 2.25rem 3rem;
    width: calc(100% - 260px);
    overflow-x: hidden;
}

/* ── Topbar الداشبورد ── */
.dash-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255,255,255,.88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--dark-border);
    padding: 0.9rem 2.25rem;
    margin: -2rem -2.25rem 2rem;
    position: sticky;
    top: 0;
    z-index: 50;
    box-shadow: 0 8px 24px rgba(23,25,28,.035);
}

.dash-topbar-title { font-size: 1.05rem; font-weight: 700; color: var(--text-primary); }

/* ── Page Header ── */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.75rem;
    flex-wrap: wrap;
    gap: 1rem;
}
.page-title { font-size: clamp(1.4rem, 2.2vw, 1.85rem); font-weight: 900; margin: 0; letter-spacing:-.02em; }
.page-subtitle { color: var(--text-muted); font-size: 0.875rem; margin-top: 0.2rem; }

/* ── جدول البيانات المطور ── */
.table-custom { 
    width: 100%; 
    border-collapse: separate; 
    border-spacing: 0 0.5rem; 
    margin-top: -0.5rem;
}

.table-custom thead th {
    background: transparent;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    padding: 0.5rem 1.25rem;
    border: none;
    white-space: nowrap;
}

.table-custom tbody tr {
    transition: var(--transition-fast);
    box-shadow: 0 2px 6px rgba(23, 25, 28, 0.02);
    border-radius: 12px;
}

.table-custom tbody td {
    padding: 1rem 1.25rem;
    background: #ffffff;
    border-top: 1px solid var(--dark-border);
    border-bottom: 1px solid var(--dark-border);
    color: var(--text-secondary);
    font-size: 0.85rem;
    vertical-align: middle;
}

.table-custom tbody td:first-child {
    border-right: 1px solid var(--dark-border);
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}

.table-custom tbody td:last-child {
    border-left: 1px solid var(--dark-border);
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}

.table-custom tbody tr:hover { 
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(23, 25, 28, 0.06);
}

.table-custom tbody tr:hover td { 
    background: #fafaf9; 
    border-color: rgba(255, 91, 46, 0.15);
}

@media (max-width: 767px) {
    .table-custom thead {
        display: none;
    }
    .table-custom tbody tr {
        display: block;
        margin-bottom: 1.25rem;
        box-shadow: 0 4px 12px rgba(23, 25, 28, 0.05);
        border: 1px solid var(--dark-border);
    }
    .table-custom tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: left;
        border: none;
        border-bottom: 1px dashed var(--dark-border);
        padding: 0.75rem 1rem;
    }
    .table-custom tbody td::before {
        content: attr(data-label);
        font-weight: 800;
        color: var(--text-primary);
        margin-left: 1rem;
        text-align: right;
        font-size: 0.8rem;
    }
    .table-custom tbody td:first-child {
        border-right: none;
        border-top-right-radius: 12px;
        border-top-left-radius: 12px;
        border-bottom-right-radius: 0;
    }
    .table-custom tbody td:last-child {
        border-left: none;
        border-bottom: none;
        border-bottom-left-radius: 12px;
        border-bottom-right-radius: 12px;
        border-top-left-radius: 0;
    }
}

/* ── الشارات ── */
.badge-custom {
    padding: 0.28rem 0.75rem;
    border-radius: 20px;
    font-size: 0.74rem;
    font-weight: 700;
    font-family: 'Tajawal', sans-serif;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
}

.badge-pending    { background: rgba(255,179,71,0.15);  color: var(--warning);       border: 1px solid rgba(255,179,71,0.3); }
.badge-confirmed  { background: rgba(0,180,216,0.15);   color: var(--info);          border: 1px solid rgba(0,180,216,0.3); }
.badge-processing { background: rgba(255, 107, 53,0.15);  color: var(--primary-light); border: 1px solid rgba(255, 107, 53,0.3); }
.badge-shipped    { background: rgba(160,168,192,0.15); color: #a0a8c0;              border: 1px solid rgba(160,168,192,0.3); }
.badge-delivered  { background: rgba(30,203,117,0.15);  color: var(--success);       border: 1px solid rgba(30,203,117,0.3); }
.badge-cancelled  { background: rgba(255,71,87,0.15);   color: var(--danger);        border: 1px solid rgba(255,71,87,0.3); }

/* ── نموذج الإدخال - تجاوز Bootstrap ── */
.form-control,
.form-select,
.form-control-custom,
.form-select-custom {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid var(--dark-border) !important;
    color: var(--text-primary) !important;
    border-radius: var(--radius-sm) !important;
    padding: 0.65rem 0.9rem !important;
    font-family: 'Tajawal', sans-serif !important;
    font-size: 0.9rem !important;
    transition: var(--transition-fast) !important;
}

.form-control:focus,
.form-select:focus,
.form-control-custom:focus,
.form-select-custom:focus {
    background: #fff !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.15) !important;
    color: var(--text-primary) !important;
    outline: none !important;
}

.form-control::placeholder,
.form-control-custom::placeholder { color: var(--text-muted) !important; opacity: 1 !important; }

.form-label, .form-label-custom {
    color: var(--text-secondary) !important;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.4rem;
    display: block;
    font-family: 'Tajawal', sans-serif;
}

/* ── السلة ── */
.cart-item {
    background: var(--dark-card);
    border: 1px solid var(--dark-border);
    border-radius: var(--radius-md);
    padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: var(--transition-fast);
}
.cart-item:hover { border-color: rgba(255, 107, 53,0.3); }

.cart-item-img {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-sm);
    background: var(--dark-hover);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.cart-item-img img { width: 100%; height: 100%; object-fit: cover; }

.cart-item-body { flex: 1; min-width: 0; }
.cart-item-name { font-weight: 600; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-primary); }
.cart-item-store { color: var(--text-muted); font-size: 0.78rem; margin-top: 0.15rem; }
.cart-item-price { font-weight: 700; font-size: 0.95rem; color: var(--primary-light); white-space: nowrap; }

.product-attributes-row { margin-top: 0.4rem; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.product-attr-badge { display: inline-flex; align-items: center; gap: 0.25rem; background: rgba(255, 91, 46, 0.08); border: 1px solid rgba(255, 91, 46, 0.18); border-radius: 8px; padding: 0.18rem 0.55rem; font-size: 0.72rem; line-height: 1.4; }
.product-attr-key { color: var(--text-muted); font-weight: 600; }
.product-attr-val { color: var(--text-primary); font-weight: 700; }

/* ── الصفحة الرئيسية ── */
.hero-section {
    min-height: 88vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    padding: 4rem 0;
}

.hero-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 70% at 30% -10%, rgba(255, 107, 53,0.22) 0%, transparent 60%),
        radial-gradient(ellipse 50% 50% at 85% 85%, rgba(255,107,53,0.1) 0%, transparent 60%);
    pointer-events: none;
}

.hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 107, 53,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 107, 53,0.04) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 107, 53,0.15);
    border: 1px solid rgba(255, 107, 53,0.3);
    border-radius: 20px;
    padding: 0.35rem 1rem;
    font-size: 0.82rem;
    color: var(--primary-light);
    margin-bottom: 1.25rem;
    font-family: 'Tajawal', sans-serif;
}

.hero-title {
    font-size: clamp(2rem, 4.5vw, 3.2rem);
    font-weight: 900;
    line-height: 1.25;
    margin-bottom: 1.2rem;
    color: var(--text-primary);
}

.hero-title .highlight {
    background: var(--gradient-1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-desc {
    font-size: 1rem;
    color: var(--text-secondary);
    max-width: 480px;
    margin-bottom: 2rem;
    line-height: 1.75;
}

.hero-buttons { display: flex; gap: 1rem; flex-wrap: wrap; }

.btn-hero-primary {
    padding: 0.8rem 1.75rem;
    background: var(--gradient-1);
    color: #fff !important;
    border: none;
    border-radius: var(--radius-md);
    font-family: 'Tajawal', sans-serif;
    font-size: 0.975rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.btn-hero-primary:hover { transform: translateY(-3px); box-shadow: var(--shadow-glow); color: #fff !important; }

.btn-hero-secondary {
    padding: 0.8rem 1.75rem;
    background: transparent;
    color: var(--text-primary) !important;
    border: 1px solid var(--dark-border);
    border-radius: var(--radius-md);
    font-family: 'Tajawal', sans-serif;
    font-size: 0.975rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.btn-hero-secondary:hover { border-color: var(--primary); color: var(--primary-light) !important; background: rgba(255, 107, 53,0.08); }

/* ── بطاقات الهيرو - الجانب الأيسر ── */
.hero-demo-card {
    background: var(--dark-card);
    border: 1px solid var(--dark-border);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    transition: var(--transition);
    width: 100%;
    max-width: 420px;
    margin-right: auto;
}
.hero-demo-card:hover { border-color: rgba(255, 107, 53,0.4); }

/* ── مراحل العملية ── */
.step-card {
    text-align: center;
    padding: 2rem 1.5rem;
    background: var(--dark-card);
    border: 1px solid var(--dark-border);
    border-radius: var(--radius-lg);
    position: relative;
    transition: var(--transition);
}
.step-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: rgba(255, 107, 53,0.3); }

.step-number {
    position: absolute;
    top: -14px;
    right: 50%;
    transform: translateX(50%);
    width: 30px;
    height: 30px;
    background: var(--gradient-1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--text-primary);
    border: 3px solid var(--dark);
}

.step-icon {
    width: 60px;
    height: 60px;
    background: rgba(255, 107, 53,0.12);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: var(--primary-light);
    margin: 0.75rem auto 1rem;
}

.step-title { font-size: 0.975rem; font-weight: 700; margin-bottom: 0.5rem; }
.step-desc { font-size: 0.82rem; color: var(--text-muted); }

/* ── الـ Auth ── */
.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 20% 10%, rgba(255,91,46,.14), transparent 28rem),
        radial-gradient(circle at 88% 86%, rgba(23,25,28,.07), transparent 24rem),
        #f6f5f2;
}

.auth-bg {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255,91,46,.18) 1px, transparent 1px);
    background-size: 24px 24px;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.75), transparent 78%);
    pointer-events: none;
}

.auth-card {
    width: 100%;
    max-width: 440px;
    background: var(--dark-card);
    border: 1px solid var(--dark-border);
    border-radius: 24px;
    padding: 2.5rem;
    position: relative;
    z-index: 1;
    box-shadow: var(--shadow-lg);
}

.auth-logo { text-align: center; margin-bottom: 2rem; }

.auth-logo-icon {
    width: 60px;
    height: 60px;
    background: var(--gradient-1);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 900;
    color: #fff;
    margin: 0 auto 0.75rem;
}

.auth-title { font-size: 1.4rem; font-weight: 800; text-align: center; }
.auth-subtitle { color: var(--text-muted); text-align: center; font-size: 0.875rem; margin-top: 0.25rem; }

/* ── الأفاتار ── */
.user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--gradient-1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
    flex-shrink: 0;
}

/* ── الإشعارات ── */
.notification-dot {
    position: absolute;
    top: -2px;
    left: -2px;
    width: 9px;
    height: 9px;
    background: var(--danger);
    border-radius: 50%;
    border: 2px solid var(--dark);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.7; }
}

/* ── متتبع الحالة ── */
.status-tracker {
    display: flex;
    align-items: center;
    overflow-x: auto;
    padding: 0.5rem 0;
    gap: 0;
}

.tracker-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    min-width: 75px;
    position: relative;
    text-align: center;
}

.tracker-step::before {
    content: '';
    position: absolute;
    top: 18px;
    right: 50%;
    width: 100%;
    height: 2px;
    background: var(--dark-border);
    z-index: 0;
}
.tracker-step:first-child::before { display: none; }

.tracker-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--dark-hover);
    border: 2px solid var(--dark-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    color: var(--text-muted);
    position: relative;
    z-index: 1;
    transition: var(--transition);
}

.tracker-step.done .tracker-circle   { background: var(--success); border-color: var(--success); color: var(--text-primary); }
.tracker-step.active .tracker-circle { background: var(--primary); border-color: var(--primary); color: var(--text-primary); box-shadow: 0 0 15px rgba(255, 107, 53,0.5); }
.tracker-step.done::before { background: var(--success); }

.tracker-label { font-size: 0.68rem; color: var(--text-muted); margin-top: 0.4rem; font-weight: 500; font-family: 'Tajawal', sans-serif; }
.tracker-step.active .tracker-label { color: var(--primary-light); font-weight: 700; }
.tracker-step.done .tracker-label { color: var(--success); }

/* ── شريط الفرز ── */
.filter-bar {
    background: var(--dark-card);
    border: 1px solid var(--dark-border);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: flex-end;
}

.filter-group { flex: 1; min-width: 150px; }

/* ── رسائل فارغة ── */
.empty-state { text-align: center; padding: 3.5rem 2rem; color: var(--text-muted); }
.empty-icon { font-size: 3rem; color: var(--dark-border); margin-bottom: 1rem; display: block; }
.empty-state h4 { color: var(--text-secondary); font-size: 1.05rem; margin-bottom: 0.5rem; }

/* ── كارد متجر ── */
.store-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--dark-card);
    border: 1px solid var(--dark-border);
    border-radius: var(--radius-sm);
    padding: 0.45rem 0.9rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary);
    transition: var(--transition-fast);
    font-family: 'Tajawal', sans-serif;
}
.store-badge:hover { border-color: var(--primary); color: var(--primary-light); }

/* ── User info ── */
.user-info-sm {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}
.user-info-sm span { font-size: 0.875rem; font-weight: 600; color: var(--text-secondary); }

/* ── Progress ── */
.progress-custom { height: 5px; background: var(--dark-hover); border-radius: 3px; overflow: hidden; }
.progress-bar-custom { height: 100%; background: var(--gradient-1); border-radius: 3px; transition: width 1s ease; }

/* ── Tooltip ── */
.tooltip-custom { position: relative; cursor: default; }
.tooltip-custom::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 110%;
    right: 50%;
    transform: translateX(50%);
    background: var(--dark-sidebar);
    color: var(--text-primary);
    font-size: 0.72rem;
    padding: 0.25rem 0.55rem;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: var(--transition-fast);
    border: 1px solid var(--dark-border);
    z-index: 100;
    font-family: 'Tajawal', sans-serif;
}
.tooltip-custom:hover::after { opacity: 1; }

/* ── Mini Chart ── */
.mini-chart { display: flex; align-items: flex-end; gap: 4px; height: 50px; }
.mini-bar {
    flex: 1;
    background: rgba(255, 107, 53,0.3);
    border-radius: 3px 3px 0 0;
    min-height: 4px;
    transition: background 0.3s ease;
}
.mini-bar:hover { background: rgba(255, 107, 53,0.8); }

/* ── Section ── */
.section-title { font-size: 1.75rem; font-weight: 800; text-align: center; margin-bottom: 0.5rem; }
.section-subtitle { text-align: center; color: var(--text-muted); margin-bottom: 2.5rem; }

/* ── Footer ── */
.main-footer {
    background: var(--dark-sidebar);
    border-top: 1px solid var(--dark-border);
    padding: 2rem 0;
    margin-top: 4rem;
}
.footer-brand { font-size: 1.25rem; font-weight: 800; background: var(--gradient-1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.footer-text { color: var(--text-muted); font-size: 0.82rem; }

/* ── Dropdown ── */
.dropdown-menu {
    background: var(--dark-card) !important;
    border: 1px solid var(--dark-border) !important;
    box-shadow: var(--shadow-lg) !important;
    border-radius: var(--radius-md) !important;
    direction: rtl;
}
.dropdown-item {
    color: var(--text-secondary) !important;
    font-family: 'Tajawal', sans-serif !important;
    padding: 0.5rem 1rem !important;
    font-size: 0.875rem !important;
    text-align: right !important;
}
.dropdown-item:hover, .dropdown-item:focus { background: rgba(255, 107, 53, 0.1) !important; color: #ff6b35 !important; }
.dropdown-item:focus { background: rgba(255, 107, 53,0.1) !important; color: var(--primary-light) !important; }
.dropdown-divider { border-color: var(--dark-border) !important; }

/* ── Modal ── */
.modal-content { background: var(--dark-card) !important; border: 1px solid var(--dark-border) !important; color: var(--text-primary) !important; }
.modal-header { border-bottom: 1px solid var(--dark-border) !important; }
.modal-footer { border-top: 1px solid var(--dark-border) !important; }

/* ── Alert تجاوز ── */
.alert { font-family: 'Tajawal', sans-serif !important; border-radius: var(--radius-sm) !important; }
.alert-success { background: rgba(30,203,117,0.12) !important; border-color: rgba(30,203,117,0.3) !important; color: var(--success) !important; }
.alert-danger  { background: rgba(255,71,87,0.12) !important;  border-color: rgba(255,71,87,0.3) !important;  color: var(--danger) !important; }
.alert-warning { background: rgba(255,179,71,0.12) !important; border-color: rgba(255,179,71,0.3) !important; color: var(--warning) !important; }
.alert-info    { background: rgba(0,180,216,0.12) !important;  border-color: rgba(0,180,216,0.3) !important;  color: var(--info) !important; }

/* ── Mobile menu button ── */
.mobile-menu-btn {
    display: none;
    background: none;
    border: 1px solid var(--dark-border);
    color: var(--text-primary);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0.3rem 0.6rem;
    border-radius: var(--radius-sm);
    line-height: 1;
}

/* ── Sidebar Overlay ── */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 150;
    backdrop-filter: blur(3px);
}
.sidebar-overlay.active { display: block; }

/* ── أنيميشن ── */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.animate-fadeInUp { animation: fadeInUp 0.5s ease forwards; opacity: 0; }
.animate-fadeIn   { animation: fadeIn 0.4s ease forwards; opacity: 0; }
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }

/* ══════════════════════════════
   إصلاحات Bootstrap RTL
══════════════════════════════ */

/* إصلاح gap في RTL */
.gap-1 { gap: 0.25rem !important; }
.gap-2 { gap: 0.5rem  !important; }
.gap-3 { gap: 1rem    !important; }
.gap-4 { gap: 1.5rem  !important; }

/* إصلاح البطاقات التجريبية في الهيرو */
.hero-demo-cards { padding: 0; }

/* إصلاح display flex في RTL */
.d-flex { display: flex !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-column { flex-direction: column !important; }

/* إصلاح btn */
.btn { font-family: 'Tajawal', sans-serif !important; }

/* تجاوز Bootstrap RTL لـ select */
select.form-control-custom,
select.form-select {
    padding-right: 0.9rem !important;
    padding-left: 2.5rem !important;
    background-position: left 0.75rem center !important;
}

/* إصلاح Row overflow في الهيرو */
.hero-section .row { overflow: visible; }
.hero-section .container { overflow: visible; }

/* إصلاح spinner */
@keyframes spin { to { transform: rotate(360deg); } }

/* ══════════════════════════════
   موبايل
══════════════════════════════ */
@media (max-width: 991px) {
    .sidebar {
        transform: translateX(100%);
    }
    .sidebar.open {
        transform: translateX(0);
    }
    .main-content {
        margin-right: 0 !important;
        padding: 1rem;
    }
    .dash-topbar {
        margin: -1rem -1rem 1.5rem;
        padding: 0.7rem 1rem;
    }
    .mobile-menu-btn { display: inline-flex; }
    .filter-bar { flex-direction: column; }
    .filter-group { min-width: 100%; }
    .hero-section { padding: 2.5rem 0; min-height: auto; }
    .hero-title { font-size: 1.75rem; }
    .hero-desc { font-size: 0.9rem; }
}

@media (max-width: 576px) {
    .auth-card { padding: 1.75rem; }
    .stat-value { font-size: 1.6rem; }
    .page-title { font-size: 1.25rem; }
}





/* تنسيق الشعار */
.header-logo {
    max-height: 55px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}
.header-logo:hover {
    transform: scale(1.05);
}
.auth-logo-wrapper img {
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}


select.form-control-custom {
    background-color: var(--dark-input) !important;
    color: var(--text-primary) !important;
}
select.form-control-custom option {
    background-color: #ffffff !important;
    color: #212529 !important;
}

input[type=number].form-control-custom {
    direction: ltr;
    text-align: right;
    padding-right: 1rem !important;
}

/* ══════════════════════════════════════════════════════
   نظام التصميم المطوّر — MatjarCom 2026
══════════════════════════════════════════════════════ */
::selection { background: rgba(255,91,46,.2); color: var(--text-primary); }

:focus-visible {
    outline: 3px solid rgba(255,91,46,.28);
    outline-offset: 2px;
}

.brand-mark {
    width: 40px;
    height: 40px;
    display: inline-grid;
    place-items: center;
    border-radius: 12px;
    background: var(--gradient-1);
    color: #fff;
    font-size: 1.05rem;
    font-weight: 900;
    box-shadow: 0 8px 18px rgba(255,91,46,.2);
}

.brand-word {
    color: var(--text-primary);
    font-size: 1.18rem;
    font-weight: 900;
    letter-spacing: -.02em;
}

.sidebar > .px-3 { border-bottom-color: #292c31 !important; }
.sidebar > .px-3 > div > div:last-child > div:first-child { color: #fff; }
.sidebar .user-avatar { color: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.08); }
.sidebar-badge { box-shadow: 0 0 0 3px rgba(255,91,46,.12); }

.page-header {
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(228,229,231,.8);
}

.filter-bar {
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
}

.form-control,
.form-select,
.form-control-custom,
.form-select-custom {
    min-height: 44px;
    background: #fff !important;
    border-color: var(--dark-input-border) !important;
}

textarea.form-control-custom { min-height: 88px; }
.form-label-custom i, .form-label i { color: var(--primary); }

.table-responsive {
    border-radius: 12px;
    border: 1px solid var(--dark-border);
}

.table-responsive .table-custom { margin-bottom: 0; }
.table-custom tbody tr { transition: background .18s ease; }
.table-custom tbody tr:hover td { background: #fff8f5; }

.cart-item {
    border-radius: 14px;
    box-shadow: 0 1px 0 rgba(23,25,28,.02);
}

.hero-section {
    min-height: 78vh;
    padding: 5.5rem 0 4.5rem;
}

.hero-bg {
    background:
        radial-gradient(ellipse 70% 80% at 10% -10%, rgba(255,91,46,.16) 0%, transparent 62%),
        radial-gradient(ellipse 46% 65% at 90% 90%, rgba(23,25,28,.07) 0%, transparent 68%),
        linear-gradient(180deg,#fff 0%,#f8f7f4 100%);
}

.hero-grid {
    opacity: .52;
    background-image:
        linear-gradient(rgba(23,25,28,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(23,25,28,.035) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.7), transparent 90%);
}

.hero-badge {
    color: var(--primary-dark);
    background: #fff4ee;
    border-color: #ffd6c6;
    font-weight: 700;
}

.hero-title {
    font-size: clamp(2.35rem,5vw,4.2rem);
    line-height: 1.16;
    letter-spacing: -.035em;
    max-width: 680px;
}

.hero-desc { font-size: 1.04rem; max-width: 600px; }
.btn-hero-primary,.btn-hero-secondary { min-height: 50px; border-radius: 12px; padding-inline: 1.5rem; }
.btn-hero-secondary { background: rgba(255,255,255,.78); box-shadow: var(--shadow-sm); }

.hero-demo-cards { position: relative; padding: 1.25rem; }
.hero-demo-cards::before {
    content: '';
    position: absolute;
    inset: 6% 9%;
    border-radius: 34px;
    background: var(--gradient-1);
    opacity: .11;
    filter: blur(1px);
    transform: rotate(4deg);
}

.hero-demo-card {
    position: relative;
    border-color: rgba(228,229,231,.9);
    box-shadow: 0 24px 60px rgba(23,25,28,.12);
    backdrop-filter: blur(12px);
}

.step-card { box-shadow: var(--shadow-sm); }
.step-number { color:#fff; box-shadow:0 6px 16px rgba(255,91,46,.2); }
.step-icon { color:var(--primary); background:#fff1eb; }

.section-title { font-size:clamp(1.55rem,3vw,2.2rem); letter-spacing:-.02em; }
.main-footer { background:#17191c; border-top:0; }
.main-footer .brand-word { color:#fff; }
.main-footer .footer-text { color:#aeb4bc; }
.footer-brand { display:inline-flex; align-items:center; gap:.65rem; -webkit-text-fill-color:initial; }

.dropdown-menu { box-shadow:var(--shadow-lg); border-radius:14px !important; }
.modal-content { border-radius:20px !important; box-shadow:var(--shadow-lg); }
.alert { box-shadow:var(--shadow-sm); }

@media (prefers-reduced-motion: reduce) {
    *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

@media (max-width: 991px) {
    .main-content { width:100%; padding:1rem 1rem 2.5rem; }
    .dash-topbar { margin:-1rem -1rem 1.5rem; padding:.75rem 1rem; }
    .sidebar { box-shadow:-18px 0 45px rgba(0,0,0,.22); }
    .hero-section { padding:3.25rem 0; }
    .hero-demo-cards { max-width:620px; margin:0 auto 1.5rem; }
}

@media (max-width: 576px) {
    body { background:var(--dark); }
    .main-content { padding:.85rem .75rem 2rem; }
    .dash-topbar { margin:-.85rem -.75rem 1.25rem; padding:.7rem .75rem; }
    .dash-topbar > div:last-child > span { display:none; }
    .page-header { margin-bottom:1.2rem; }
    .card-glass,.stat-card { border-radius:14px; padding:1rem; }
    .hero-title { font-size:2.15rem; }
    .hero-buttons > a { width:100%; justify-content:center; }
    .hero-demo-cards { padding:.5rem 0; }
    .auth-page { padding:1rem; align-items:flex-start; }
    .auth-card { padding:1.5rem 1.15rem; margin-top:1.25rem; border-radius:20px; }
    .filter-bar { padding:1rem; }
    .cart-item { align-items:flex-start; flex-wrap:wrap; }
    .table-custom thead th,.table-custom tbody td { padding:.7rem .75rem; }
}

/* ── منشئ السلة متعدد الروابط ── */
.product-cart-badge {
    position:absolute; top:-7px; left:-7px; width:19px; height:19px;
    display:grid; place-items:center; border-radius:50%; background:var(--primary);
    color:#fff; font-size:.65rem; font-weight:800; box-shadow:0 0 0 3px #fff;
}

.product-links-list { display:flex; flex-direction:column; gap:1rem; }
.product-builder-shell { width:100%; max-width:1180px; margin:0 auto; }
.product-link-card {
    background:#fff; border:1px solid var(--dark-border); border-radius:18px;
    padding:1.2rem; box-shadow:var(--shadow-sm); transition:.22s ease;
}
.product-link-card[data-state="ready"] { border-color:rgba(22,139,87,.35); }
.product-link-card[data-state="loading"] { border-color:rgba(255,91,46,.35); }

.product-link-header { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.9rem; }
.product-link-header > div { display:flex; align-items:center; gap:.75rem; }
.product-link-header strong { display:block; font-size:.9rem; }
.product-link-header small { display:block; color:var(--text-muted); font-size:.72rem; margin-top:.1rem; }
.product-link-number { width:34px; height:34px; display:grid; place-items:center; border-radius:10px; background:#fff0e9; color:var(--primary-dark); font-weight:900; }
.product-remove-link { width:36px; height:36px; display:grid; place-items:center; border:0; border-radius:9px; background:rgba(214,59,77,.08); color:var(--danger); }

.product-url-row { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:.55rem; }
.product-url-field { position:relative; min-width:0; }
.product-url-field > i { position:absolute; right:.9rem; top:50%; transform:translateY(-50%); color:var(--text-muted); pointer-events:none; }
.product-url-input { width:100%; min-height:49px; border:1px solid var(--dark-input-border); border-radius:11px; padding:.7rem 2.55rem .7rem .9rem; direction:ltr; text-align:left; outline:0; font:500 .88rem 'Tajawal',sans-serif; transition:.18s; }
.product-url-input:focus { border-color:var(--primary); box-shadow:0 0 0 4px rgba(255,91,46,.1); }
.product-paste-button,.product-fetch-button { min-height:49px; padding:0 1rem; border:0; border-radius:11px; display:flex; align-items:center; justify-content:center; gap:.4rem; font-family:'Tajawal',sans-serif; font-weight:700; }
.product-paste-button { background:#17191c; color:#fff; }
.product-fetch-button { background:#fff0e9; color:var(--primary-dark); }
.product-paste-button:disabled,.product-fetch-button:disabled { opacity:.55; }

.product-fetch-status { display:none; align-items:center; gap:.45rem; min-height:30px; padding-top:.6rem; font-size:.76rem; flex-wrap:wrap; }
.product-fetch-status:not(:empty) { display:flex; }
.product-fetch-status.is-loading { color:var(--primary-dark); }
.product-fetch-status.is-success { color:var(--success); }
.product-fetch-status.is-warning { color:var(--warning); }
.product-fetch-status.is-error { color:var(--danger); }
.product-manual-trigger {
    display:inline-flex; align-items:center; gap:.3rem; padding:.25rem .7rem;
    border:1px solid var(--danger); border-radius:7px; background:rgba(214,59,77,.07);
    color:var(--danger); font-size:.72rem; font-family:inherit; font-weight:700; cursor:pointer;
    white-space:nowrap; transition:.16s;
}
.product-manual-trigger:hover { background:var(--danger); color:#fff; }

/* لوحة الإدخال اليدوي */
.product-manual-panel {
    margin-top:.8rem; padding:1rem 1.1rem; border-radius:13px;
    background:#fffbf9; border:1.5px dashed rgba(255,91,46,.35);
}
.product-manual-header {
    display:flex; align-items:center; gap:.55rem; margin-bottom:.8rem;
    color:var(--primary-dark); font-size:.8rem; font-weight:700;
}
.product-manual-header i { font-size:.95rem; }
.product-manual-header span { flex:1; }
.product-manual-close { border:0; background:transparent; color:var(--text-muted); padding:.1rem; cursor:pointer; }
.product-manual-fields { display:flex; flex-direction:column; gap:.6rem; }
.product-manual-field { display:flex; flex-direction:column; gap:.28rem; }
.product-manual-field label { font-size:.74rem; font-weight:700; color:var(--text-muted); }
.product-manual-field .required { color:var(--danger); }
.product-manual-field input {
    width:100%; min-height:42px; border:1px solid var(--dark-input-border); border-radius:9px;
    padding:.55rem .8rem; font:500 .85rem 'Tajawal',sans-serif; outline:0; transition:.18s;
}
.product-manual-field input:focus { border-color:var(--primary); box-shadow:0 0 0 4px rgba(255,91,46,.1); }
.product-manual-url { direction:ltr; text-align:left; }
.product-manual-row { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
@media (max-width:600px) { .product-manual-row { grid-template-columns:1fr; } }

/* بانر اقتراح الإضافة */
.extension-tip-banner {
    display:flex; align-items:center; gap:.9rem; padding:.8rem 1.1rem;
    background:linear-gradient(135deg, rgba(255,91,46,.06) 0%, rgba(255,91,46,.03) 100%);
    border:1px solid rgba(255,91,46,.2); border-radius:14px; margin-bottom:1.2rem;
}
.extension-tip-icon { width:38px; height:38px; flex-shrink:0; display:grid; place-items:center;
    border-radius:10px; background:rgba(255,91,46,.12); color:var(--primary); font-size:1.1rem; }
.extension-tip-body { flex:1; min-width:0; }
.extension-tip-body strong { display:block; font-size:.82rem; color:var(--text-primary); }
.extension-tip-body span { display:block; font-size:.74rem; color:var(--text-muted); margin-top:.15rem; }
.extension-tip-btn {
    flex-shrink:0; background:var(--primary); color:#fff !important; border-radius:9px;
    padding:.4rem .85rem; font-size:.75rem; font-weight:700; white-space:nowrap; text-decoration:none;
    transition:.18s;
}
.extension-tip-btn:hover { background:var(--primary-dark); }
@media (max-width:600px) {
    .extension-tip-banner { flex-wrap:wrap; }
    .extension-tip-btn { width:100%; text-align:center; }
}

.product-preview-card { display:grid; grid-template-columns:86px minmax(0,1fr) auto; gap:1rem; align-items:center; margin-top:.75rem; padding:1rem; border-radius:14px; background:#f8f8f6; border:1px solid #ececea; }
.product-preview-card[hidden] { display:none; }
.product-preview-image { width:86px; height:86px; overflow:hidden; border-radius:11px; background:#edeef0; display:grid; place-items:center; }
.product-preview-image img { width:100%; height:100%; object-fit:cover; }
.product-preview-image span { color:#a3a8af; font-size:1.35rem; }
.product-preview-info { min-width:0; }
.product-preview-platform { display:flex; align-items:center; gap:.35rem; color:var(--primary-dark); font-size:.72rem; font-weight:700; margin-bottom:.3rem; }
.product-preview-info h3 { font-size:.9rem; line-height:1.55; margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.product-preview-price { color:var(--success); font-size:.85rem; font-weight:900; margin-top:.35rem; }
.product-quantity-control { text-align:center; }
.product-quantity-control > label { color:var(--text-muted); font-size:.7rem; display:block; margin-bottom:.35rem; }
.product-quantity-control > div { display:grid; grid-template-columns:34px 44px 34px; align-items:center; overflow:hidden; border:1px solid var(--dark-border); border-radius:9px; background:#fff; }
.product-quantity-control button { height:36px; border:0; background:#fff; color:var(--primary-dark); font-size:1.15rem; }
.product-quantity-control input { width:44px; height:36px; border:0; border-inline:1px solid var(--dark-border); text-align:center; outline:0; background:#fff; }
.product-quantity-control input::-webkit-inner-spin-button { display:none; }
.product-add-link-button {
    width:100%; margin-top:1rem; padding:1rem; display:grid; grid-template-columns:42px 1fr;
    text-align:right; align-items:center; border:1.5px dashed #ffb59b; border-radius:16px;
    background:rgba(255,91,46,.035); color:var(--text-primary); font-family:inherit; transition:.2s;
}
.product-add-link-button > span { grid-row:1/3; width:42px; height:42px; display:grid; place-items:center; border-radius:12px; background:#fff1eb; color:var(--primary); }
.product-add-link-button strong { padding-right:.7rem; font-size:.88rem; }
.product-add-link-button small { padding-right:.7rem; color:var(--text-muted); font-size:.7rem; }
.product-add-link-button:hover { border-color:var(--primary); background:rgba(255,91,46,.065); }
.product-add-link-button:disabled { opacity:.45; cursor:not-allowed; }
.product-builder-actions {
    position:sticky; bottom:.75rem; z-index:10; margin-top:1.25rem; padding:.85rem 1rem;
    display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap;
    background:rgba(255,255,255,.93); border:1px solid var(--dark-border); border-radius:15px;
    backdrop-filter:blur(14px); box-shadow:0 14px 36px rgba(23,25,28,.11); font-size:.8rem; color:var(--text-muted);
}
.product-builder-actions #readyProductsCount { color:var(--success); font-weight:900; font-size:1rem; }
@media (max-width:767px) {
    .product-builder-layout { --bs-gutter-y:1rem; }
    .product-link-card { padding:.9rem; border-radius:15px; }
    .product-url-row { grid-template-columns:1fr 1fr; }
    .product-url-field { grid-column:1/-1; }
    .product-paste-button,.product-fetch-button { width:100%; }
    .product-preview-card { grid-template-columns:66px minmax(0,1fr); }
    .product-preview-image { width:66px; height:66px; }
    .product-quantity-control { grid-column:1/-1; display:flex; justify-content:space-between; align-items:center; text-align:right; padding-top:.7rem; border-top:1px solid var(--dark-border); }
    .product-quantity-control > label { margin:0; }
    .product-builder-actions { bottom:.4rem; padding:.75rem; }
    .product-builder-actions > div:first-child { width:100%; text-align:center; }
    .product-builder-actions > div:last-child { width:100%; display:grid !important; grid-template-columns:auto 1fr; }
    .product-builder-actions .btn { white-space:nowrap; }
}

/* ══════════════════════════════════════════════════════
   واجهة الزوار والمصادقة — تحديث 2026
══════════════════════════════════════════════════════ */
.brand-logo-image {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: 0 10px 25px rgba(23,25,28,.16);
    flex: 0 0 auto;
}

.brand-copy { display:flex; flex-direction:column; line-height:1.05; gap:.24rem; }
.brand-copy small { color:var(--text-muted); font-size:.63rem; font-weight:700; }

.landing-page { background:#fff; }
.landing-page .main-navbar { padding:.7rem 0; }
.landing-navbar-inner { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }
.landing-nav-links { align-items:center; gap:2rem; }
.landing-nav-links a { color:var(--text-secondary); font-size:.88rem; font-weight:700; position:relative; }
.landing-nav-links a::after { content:''; position:absolute; right:0; left:100%; bottom:-.55rem; height:2px; border-radius:2px; background:var(--primary); transition:.2s ease; }
.landing-nav-links a:hover { color:var(--primary-dark); }
.landing-nav-links a:hover::after { left:0; }
.landing-nav-actions { display:flex; align-items:center; gap:.55rem; }

.landing-page .hero-section { min-height:calc(100vh - 73px); padding:5.5rem 0 6rem; }
.landing-page .hero-bg {
    background:
        radial-gradient(circle at 6% 18%, rgba(255,91,46,.17), transparent 24rem),
        radial-gradient(circle at 87% 78%, rgba(255,137,69,.13), transparent 25rem),
        linear-gradient(145deg,#fff 0%,#fffaf7 45%,#f7f5f1 100%);
}
.landing-page .hero-grid { opacity:.35; background-size:54px 54px; }
.landing-page .hero-badge { border-radius:99px; padding:.48rem .85rem; gap:.55rem; margin-bottom:1.5rem; }
.landing-page .hero-badge span { width:8px; height:8px; border-radius:50%; background:var(--success); box-shadow:0 0 0 5px rgba(22,139,87,.1); }
.landing-page .hero-title { font-size:clamp(2.8rem,5.8vw,5rem); line-height:1.08; margin-bottom:1.35rem; }
.landing-page .hero-title .highlight { background-image:linear-gradient(120deg,#ff4f1f,#ff8a3d); }
.landing-page .hero-desc { font-size:1.08rem; max-width:620px; margin-bottom:1.8rem; }
.hero-trust-row { display:flex; align-items:center; flex-wrap:wrap; gap:.7rem 1.25rem; margin-top:1.5rem; color:var(--text-muted); font-size:.78rem; font-weight:700; }
.hero-trust-row i { color:var(--success); margin-left:.3rem; }

.hero-product-window { position:relative; max-width:575px; margin:0 auto; padding:1.1rem; }
.hero-product-window::before {
    content:''; position:absolute; inset:9% 3% 2%; border-radius:38px;
    background:linear-gradient(145deg,rgba(255,91,46,.22),rgba(255,145,92,.08));
    transform:rotate(-4deg); filter:blur(.2px);
}
.hero-window-top,.hero-window-body { position:relative; z-index:2; background:#fff; border:1px solid rgba(220,220,220,.9); }
.hero-window-top { min-height:52px; border-radius:24px 24px 0 0; border-bottom:0; display:flex; align-items:center; gap:.4rem; padding:0 1rem; box-shadow:0 25px 70px rgba(23,25,28,.12); }
.hero-window-top > span { width:9px; height:9px; border-radius:50%; background:#e2e2e2; }
.hero-window-top > span:first-child { background:#ff7654; }
.hero-window-top > div { margin-right:auto; margin-left:auto; min-width:48%; background:#f5f5f3; border-radius:8px; padding:.38rem .8rem; direction:ltr; text-align:center; color:#888f97; font:600 .67rem sans-serif; }
.hero-window-top i { color:var(--success); margin-right:.3rem; }
.hero-window-body { min-height:355px; border-radius:0 0 24px 24px; padding:1.5rem; box-shadow:0 30px 75px rgba(23,25,28,.14); }
.hero-window-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:1.25rem; }
.hero-window-heading > div { display:flex; flex-direction:column; gap:.15rem; }
.hero-window-heading small { color:var(--text-muted); font-size:.72rem; }
.hero-window-heading strong { font-size:1.05rem; }
.hero-window-step { width:34px; height:34px; border-radius:11px; display:grid; place-items:center; background:#fff0ea; color:var(--primary); font-weight:900; }
.hero-url-demo { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:.7rem; min-height:52px; padding:.4rem .45rem .4rem .9rem; border:1px solid #e5e6e8; border-radius:12px; direction:ltr; color:#9a9fa6; font-size:.75rem; }
.hero-url-demo > span { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.hero-url-demo i { color:var(--primary); }
.hero-url-demo b { background:var(--gradient-1); color:#fff; border-radius:9px; min-width:62px; padding:.65rem .85rem; text-align:center; direction:rtl; }
.hero-product-demo { display:grid; grid-template-columns:62px minmax(0,1fr) auto; align-items:center; gap:.9rem; margin-top:1rem; background:#fafafa; border:1px solid #ececed; border-radius:14px; padding:.85rem; }
.hero-product-thumb { width:62px; height:62px; display:grid; place-items:center; border-radius:12px; background:linear-gradient(145deg,#292c31,#111315); color:#ff7654; font-size:1.3rem; }
.hero-product-info { display:flex; flex-direction:column; min-width:0; gap:.12rem; }
.hero-product-info small { color:var(--primary); font-weight:900; font-size:.65rem; letter-spacing:.08em; }
.hero-product-info strong { font-size:.82rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hero-product-info span { color:var(--text-muted); font-size:.7rem; }
.hero-product-check { width:28px; height:28px; display:grid; place-items:center; border-radius:50%; background:#e6f7ef; color:var(--success); font-size:.72rem; }
.hero-order-route { display:grid; grid-template-columns:repeat(3,1fr); position:relative; margin-top:1.75rem; }
.hero-order-route::before { content:''; position:absolute; top:17px; right:16%; left:16%; height:2px; background:#e6e7e8; }
.hero-order-route > div { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:.45rem; color:#a0a4aa; font-size:.68rem; font-weight:700; }
.hero-order-route i { width:35px; height:35px; display:grid; place-items:center; border-radius:50%; background:#f0f1f2; }
.hero-order-route .is-done,.hero-order-route .is-active { color:var(--primary); }
.hero-order-route .is-done i { color:#fff; background:var(--primary); }
.hero-order-route .is-active i { background:#fff0ea; box-shadow:0 0 0 5px #fff; }
.hero-floating-card { position:absolute; z-index:3; display:flex; align-items:center; gap:.6rem; padding:.7rem .85rem; background:rgba(255,255,255,.96); border:1px solid #ececed; border-radius:13px; box-shadow:0 16px 35px rgba(23,25,28,.13); }
.hero-floating-card > i { width:32px; height:32px; display:grid; place-items:center; border-radius:9px; background:#fff0ea; color:var(--primary); }
.hero-floating-card span { display:flex; flex-direction:column; }
.hero-floating-card b { font-size:.72rem; }
.hero-floating-card small { color:var(--text-muted); font-size:.62rem; }
.hero-floating-card-one { top:3%; right:-2%; }
.hero-floating-card-two { bottom:0; left:-2%; }
.hero-logo-orb { position:absolute; z-index:3; left:4%; top:8%; width:58px; height:58px; padding:4px; background:#fff; border-radius:17px; box-shadow:0 16px 30px rgba(23,25,28,.16); transform:rotate(-7deg); }
.hero-logo-orb img { width:100%; height:100%; object-fit:cover; border-radius:13px; }

.stores-section { padding:1.6rem 0; border-block:1px solid var(--dark-border); background:#fff; }
.stores-label { text-align:center; color:var(--text-muted); font-size:.72rem; font-weight:800; letter-spacing:.08em; margin-bottom:1rem; }
.landing-page .store-badge { background:#fafafa; min-height:39px; padding:.55rem 1rem; }
.landing-section { padding:6rem 0; }
.landing-section .section-subtitle { margin-bottom:3.25rem; }
.landing-features { background:linear-gradient(180deg,#fbfaf8,#f5f3ef); border-block:1px solid #eceae6; }
.landing-features .card-glass { height:100%; padding:1.65rem; }
.landing-cta-section { padding:5.5rem 0; background:#fff; }
.landing-cta-card { position:relative; overflow:hidden; text-align:center; padding:4.5rem 1.5rem; border-radius:30px; background:linear-gradient(135deg,#191b1f 0%,#272b30 65%,#3a2a24 100%); box-shadow:0 30px 70px rgba(23,25,28,.16); }
.landing-cta-card::before { content:''; position:absolute; width:420px; height:420px; border-radius:50%; background:rgba(255,91,46,.22); filter:blur(10px); top:-280px; left:-80px; }
.landing-cta-card h2,.landing-cta-card p,.landing-cta-card a,.landing-cta-icon { position:relative; z-index:1; }
.landing-cta-card h2 { color:#fff; font-size:clamp(1.8rem,4vw,2.65rem); font-weight:900; margin:.85rem 0 .55rem; }
.landing-cta-card p { color:#c9cdd2; margin-bottom:1.8rem; }
.landing-cta-icon { width:54px; height:54px; display:grid; place-items:center; margin:auto; border-radius:17px; background:rgba(255,91,46,.14); border:1px solid rgba(255,126,86,.28); color:#ff8c68; font-size:1.2rem; }
.landing-page .main-footer .brand-logo-image { width:44px; height:44px; border-color:rgba(255,255,255,.1); }

/* صفحات تسجيل الدخول وإنشاء الحساب */
.auth-body { background:#f3f1ed; }
.auth-page { min-height:100vh; padding:2rem; overflow:auto; align-items:center; }
.auth-page .auth-bg {
    background:
        radial-gradient(circle at 12% 12%, rgba(255,91,46,.14), transparent 24rem),
        radial-gradient(circle at 88% 88%, rgba(23,25,28,.08), transparent 25rem);
    mask-image:none;
}
.auth-home-link { position:absolute; top:1.2rem; right:1.5rem; z-index:3; display:inline-flex; align-items:center; gap:.45rem; color:var(--text-secondary); font-size:.8rem; font-weight:700; }
.auth-home-link:hover { color:var(--primary); }
.auth-shell { position:relative; z-index:2; width:min(1120px,100%); min-height:690px; display:grid; grid-template-columns:minmax(360px,43%) minmax(0,57%); background:#fff; border:1px solid rgba(219,218,215,.9); border-radius:30px; overflow:hidden; box-shadow:0 35px 90px rgba(23,25,28,.15); }
.auth-shell-register { min-height:780px; }
.auth-showcase { position:relative; overflow:hidden; display:flex; flex-direction:column; padding:2.1rem 2.35rem; color:#fff; background:linear-gradient(145deg,#15171a 0%,#24272c 58%,#35251f 100%); }
.auth-showcase::before { content:''; position:absolute; width:360px; height:360px; border-radius:50%; background:rgba(255,91,46,.3); filter:blur(14px); left:-190px; top:-130px; }
.auth-showcase::after { content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size:36px 36px; mask-image:linear-gradient(to bottom,black,transparent); }
.auth-brand,.auth-showcase-content,.auth-showcase-status { position:relative; z-index:1; }
.auth-brand { display:inline-flex; align-items:center; gap:.75rem; align-self:flex-start; color:#fff; }
.auth-brand:hover { color:#fff; }
.auth-brand img { width:54px; height:54px; object-fit:cover; border-radius:15px; border:1px solid rgba(255,255,255,.12); box-shadow:0 14px 30px rgba(0,0,0,.24); }
.auth-brand span { display:flex; flex-direction:column; line-height:1.08; }
.auth-brand b { font-size:1.16rem; }
.auth-brand small { color:#aeb3ba; font-size:.62rem; margin-top:.22rem; }
.auth-showcase-content { margin:auto 0; }
.auth-eyebrow { display:inline-flex; align-items:center; gap:.45rem; color:#ff9a78; background:rgba(255,91,46,.11); border:1px solid rgba(255,132,94,.18); padding:.42rem .75rem; border-radius:99px; font-size:.72rem; font-weight:800; }
.auth-showcase h2 { color:#fff; font-size:clamp(2rem,3.2vw,3.05rem); line-height:1.2; letter-spacing:-.035em; margin:1.15rem 0 .8rem; font-weight:900; }
.auth-showcase-content > p { color:#b9bec5; max-width:410px; font-size:.9rem; margin-bottom:1.65rem; }
.auth-benefits { display:flex; flex-direction:column; gap:.85rem; }
.auth-benefits > div { display:flex; align-items:center; gap:.8rem; }
.auth-benefits > div > i { width:42px; height:42px; display:grid; place-items:center; flex:0 0 auto; border-radius:12px; background:rgba(255,255,255,.07); color:#ff8964; border:1px solid rgba(255,255,255,.06); }
.auth-benefits span { display:flex; flex-direction:column; }
.auth-benefits b { font-size:.8rem; color:#f7f8f9; }
.auth-benefits small { font-size:.68rem; color:#8f969f; margin-top:.1rem; }
.auth-showcase-status { display:flex; align-items:center; gap:.75rem; padding:.9rem; border-radius:15px; background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.075); backdrop-filter:blur(10px); }
.auth-showcase-status > span { width:36px; height:36px; display:grid; place-items:center; border-radius:11px; background:rgba(255,91,46,.16); color:#ff8c68; }
.auth-showcase-status > div { display:flex; flex-direction:column; }
.auth-showcase-status b { color:#fff; font-size:.76rem; }
.auth-showcase-status small { color:#9299a1; font-size:.66rem; }
.auth-form-side { display:flex; align-items:center; justify-content:center; padding:2rem; min-width:0; }
.auth-card { max-width:510px; padding:1rem 1.4rem; border:0; border-radius:0; box-shadow:none; background:transparent; }
.auth-logo { margin-bottom:1.65rem; }
.auth-logo-image { width:78px; height:78px; object-fit:cover; border-radius:21px; margin:0 auto .9rem; display:block; box-shadow:0 16px 35px rgba(23,25,28,.18); }
.auth-title { font-size:1.65rem; font-weight:900; letter-spacing:-.02em; }
.auth-subtitle { font-size:.82rem; }
.auth-card .form-control-custom { min-height:50px; border-radius:11px !important; background:#fafafa !important; }
.auth-card .form-control-custom:focus { background:#fff !important; }
.auth-submit { min-height:50px; border-radius:12px !important; font-size:.93rem; }

@media (max-width:991px) {
    .landing-page .hero-section { padding:3.75rem 0 4.5rem; }
    .landing-page .hero-title { font-size:clamp(2.5rem,8vw,4.25rem); }
    .hero-product-window { margin-bottom:1.4rem; }
    .landing-section { padding:4.5rem 0; }
    .auth-shell { grid-template-columns:1fr; width:min(620px,100%); min-height:0; }
    .auth-showcase { display:none; }
    .auth-form-side { padding:2.4rem 2rem; }
    .auth-card { max-width:500px; width:100%; }
}

@media (max-width:576px) {
    .main-navbar .brand-copy small { display:none; }
    .main-navbar .brand-word { font-size:1rem; }
    .main-navbar .brand-logo-image { width:41px; height:41px; border-radius:12px; }
    .landing-nav-actions { gap:.35rem; }
    .landing-nav-actions .btn { font-size:.7rem; padding-inline:.65rem !important; }
    .landing-page .hero-section { padding:2.5rem 0 3.5rem; }
    .landing-page .hero-title { font-size:2.55rem; }
    .landing-page .hero-desc { font-size:.92rem; }
    .hero-product-window { padding:.4rem 0; }
    .hero-window-body { min-height:325px; padding:1rem; }
    .hero-window-top > div { min-width:62%; }
    .hero-floating-card { display:none; }
    .hero-logo-orb { width:48px; height:48px; left:2%; top:-4%; }
    .hero-product-info strong { font-size:.74rem; }
    .hero-product-info span { display:none; }
    .hero-product-demo { grid-template-columns:52px minmax(0,1fr) auto; gap:.65rem; }
    .hero-product-thumb { width:52px; height:52px; }
    .landing-section { padding:3.8rem 0; }
    .landing-cta-section { padding:3.5rem 0; }
    .landing-cta-card { padding:3.5rem 1rem; border-radius:22px; }
    .auth-page { padding:3.8rem .8rem 1rem; align-items:flex-start; }
    .auth-home-link { top:1.15rem; right:1rem; }
    .auth-shell { border-radius:22px; }
    .auth-form-side { padding:1.5rem .4rem; }
    .auth-card { margin:0; padding:1rem; border-radius:0; }
    .auth-logo-image { width:68px; height:68px; border-radius:18px; }
    .auth-title { font-size:1.42rem; }
}

@media (min-width:1200px) {
    .product-builder-shell { padding-inline:1.25rem; }
    .product-link-card { padding:1.35rem 1.5rem; }
}

/* تسعير الطلب من الإدارة */
.order-price-state {
    display:inline-flex; align-items:center; justify-content:center; max-width:230px;
    padding:.42rem .72rem; border-radius:999px; font-size:.78rem; font-weight:800;
    line-height:1.35; white-space:normal; text-align:center;
}
.order-price-state.is-sent { color:#117747; background:rgba(30,203,117,.12); border:1px solid rgba(30,203,117,.25); }
.order-price-state.is-pending { color:#9b6511; background:rgba(255,179,71,.14); border:1px solid rgba(255,179,71,.32); }
.order-pricing-card { border:1px solid rgba(255,179,71,.32); background:linear-gradient(145deg,rgba(255,179,71,.09),rgba(255,255,255,.94)); }
.order-pricing-card.is-sent { border-color:rgba(30,203,117,.28); background:linear-gradient(145deg,rgba(30,203,117,.08),rgba(255,255,255,.95)); }
.order-pricing-head { display:grid; grid-template-columns:46px minmax(0,1fr) auto; align-items:center; gap:.85rem; margin-bottom:1.15rem; }
.order-pricing-head > span { width:46px; height:46px; display:grid; place-items:center; border-radius:14px; color:#9b6511; background:rgba(255,179,71,.18); font-size:1.1rem; }
.order-pricing-card.is-sent .order-pricing-head > span { color:var(--success); background:rgba(30,203,117,.14); }
.order-pricing-head h6 { margin:0 0 .15rem; font-weight:900; }
.order-pricing-head p { margin:0; color:var(--text-muted); font-size:.72rem; }
.order-pricing-head b { color:var(--primary-dark); font-size:.9rem; text-align:left; }
.order-pricing-form { display:grid; grid-template-columns:minmax(0,1fr) minmax(150px,.62fr); gap:.8rem; align-items:end; }
.order-pricing-form button { grid-column:1/-1; border:0; min-height:46px; }
.order-priced-at { display:block; margin-top:.75rem; color:var(--text-muted); }
.customer-quote-banner { display:flex; align-items:center; gap:1rem; margin:0 0 1.25rem; padding:1.1rem 1.25rem; border-radius:18px; border:1px solid rgba(255,179,71,.32); background:linear-gradient(135deg,#fff9ef,#fff); box-shadow:0 12px 32px rgba(23,25,28,.06); }
.customer-quote-banner.is-sent { border-color:rgba(30,203,117,.3); background:linear-gradient(135deg,#effcf6,#fff); }
.customer-quote-icon { flex:0 0 auto; width:48px; height:48px; display:grid; place-items:center; border-radius:15px; color:#9b6511; background:rgba(255,179,71,.16); font-size:1.15rem; }
.customer-quote-banner.is-sent .customer-quote-icon { color:var(--success); background:rgba(30,203,117,.14); }
.customer-quote-copy { display:grid; gap:.1rem; min-width:0; }
.customer-quote-copy span { color:var(--text-muted); font-size:.75rem; font-weight:700; }
.customer-quote-copy strong { font-size:1.2rem; color:var(--text-primary); }
.customer-quote-copy p { margin:0; color:var(--text-muted); font-size:.78rem; }
.stat-value-currencies { display:flex; flex-direction:column; gap:.12rem; font-size:1.05rem; font-weight:900; line-height:1.25; }
.product-preview-identifiers { margin-top:.35rem; color:#087e96; font-size:.7rem; font-weight:800; direction:ltr; text-align:right; }
.product-customer-identifiers { grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr; gap:.65rem; padding-top:.75rem; margin-top:.25rem; border-top:1px solid var(--dark-border); }
.product-customer-identifiers label { display:grid; gap:.25rem; margin:0; color:var(--text-secondary); font-size:.7rem; font-weight:800; }
.product-customer-identifiers small { color:var(--text-muted); font-weight:500; }
.product-customer-identifiers input { width:100%; min-height:40px; padding:.5rem .65rem; border:1px solid var(--dark-input-border); border-radius:9px; background:#fff; font:600 .75rem sans-serif; }
.product-customer-identifiers input:focus { outline:0; border-color:var(--primary); box-shadow:0 0 0 3px rgba(255,91,46,.08); }
.product-identifiers { display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.45rem; }
.product-identifiers span { display:inline-flex; align-items:center; gap:.3rem; padding:.22rem .42rem; border-radius:7px; background:rgba(0,180,216,.08); border:1px solid rgba(0,180,216,.16); font-size:.65rem; }
.product-identifiers b { color:#087e96; }
.product-identifiers code { color:var(--text-primary); direction:ltr; font-size:.66rem; }
.superadmin-shortcuts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.85rem; margin-bottom:1.25rem; }
.superadmin-shortcut { display:grid; grid-template-columns:44px minmax(0,1fr) auto; align-items:center; gap:.75rem; min-height:86px; padding:.9rem 1rem; color:var(--text-primary); background:#fff; border:1px solid var(--dark-border); border-radius:16px; box-shadow:0 8px 25px rgba(23,25,28,.05); text-decoration:none; transition:.2s ease; }
.superadmin-shortcut:hover { color:var(--text-primary); border-color:rgba(255,91,46,.35); transform:translateY(-2px); box-shadow:0 12px 28px rgba(23,25,28,.09); }
.superadmin-shortcut > span { width:44px; height:44px; display:grid; place-items:center; border-radius:13px; background:rgba(255,91,46,.1); color:var(--primary); }
.superadmin-shortcut > div { display:flex; flex-direction:column; min-width:0; }
.superadmin-shortcut b { font-size:.84rem; }
.superadmin-shortcut small { color:var(--text-muted); font-size:.67rem; margin-top:.12rem; }
.superadmin-shortcut > i { color:var(--text-muted); font-size:.72rem; }

@media (max-width:576px) {
    .order-pricing-head { grid-template-columns:42px minmax(0,1fr); }
    .order-pricing-head > span { width:42px; height:42px; }
    .order-pricing-head > b { grid-column:1/-1; text-align:right; }
    .order-pricing-form { grid-template-columns:1fr; }
    .order-pricing-form button { grid-column:auto; }
    .customer-quote-banner { align-items:flex-start; padding:1rem; border-radius:15px; }
    .customer-quote-icon { width:42px; height:42px; }
    .customer-quote-copy strong { font-size:1rem; }
    .superadmin-shortcuts { grid-template-columns:1fr; }
    .product-customer-identifiers { grid-template-columns:1fr; }

}

@media (min-width:577px) and (max-width:991px) {
    .superadmin-shortcuts { grid-template-columns:1fr 1fr; }
}



/* ── Floating WhatsApp Button ── */
.whatsapp-float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 40px;
    left: 40px;
    background-color: #25d366;
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    text-decoration: none;
}
.whatsapp-float:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(37, 211, 102, 0.6);
    color: #FFF;
}

@media (max-width: 768px) {
    .whatsapp-float {
        width: 55px;
        height: 55px;
        bottom: 25px;
        left: 25px;
        font-size: 28px;
    }
}


/* ── Live Chat Widget ── */
.live-chat-trigger {
    position: fixed;
    bottom: 40px;
    right: 40px;
    width: 65px;
    height: 65px;
    background: linear-gradient(135deg, var(--primary), #ffb347);
    color: #fff;
    border-radius: 50%;
    border: none;
    font-size: 1.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 20px rgba(255, 91, 46, 0.4);
    cursor: pointer;
    z-index: 1000;
    transition: all 0.3s ease;
}
.live-chat-trigger:hover {
    transform: scale(1.05) translateY(-5px);
    box-shadow: 0 8px 25px rgba(255, 91, 46, 0.6);
}

.live-chat-widget {
    position: fixed;
    bottom: 40px;
    right: 40px;
    width: 350px;
    height: 500px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    z-index: 1001;
    display: none;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

.live-chat-header {
    background: linear-gradient(135deg, var(--primary), #ffb347);
    color: #fff;
    padding: 1rem 1.5rem;
    font-weight: 700;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.live-chat-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #fdfdfd;
}

.live-chat-messages {
    flex: 1;
    padding: 1rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.live-chat-messages .msg {
    max-width: 80%;
    padding: 10px 15px;
    border-radius: 15px;
    font-size: 0.95rem;
    line-height: 1.5;
}

.live-chat-messages .msg-admin {
    background: #f1f3f5;
    color: #333;
    align-self: flex-start;
    border-bottom-right-radius: 2px;
}

.live-chat-messages .msg-customer {
    background: var(--primary);
    color: #fff;
    align-self: flex-end;
    border-bottom-left-radius: 2px;
}

.live-chat-input-area {
    padding: 15px;
    border-top: 1px solid rgba(0,0,0,0.05);
    display: flex;
    gap: 10px;
    background: #fff;
}

.live-chat-input-area input {
    flex: 1;
    border: 1px solid #ddd;
    border-radius: 50px;
    padding: 10px 15px;
    outline: none;
}
.live-chat-input-area input:focus {
    border-color: var(--primary);
}

.live-chat-input-area .btn-send {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.2s;
}
.live-chat-input-area .btn-send:hover {
    background: #e04f21;
}

@media (max-width: 576px) {
    .live-chat-widget {
        width: 100%;
        height: 100vh;
        bottom: 0;
        right: 0;
        border-radius: 0;
    }
    .live-chat-trigger {
        bottom: 25px;
        right: 25px;
        width: 55px;
        height: 55px;
        font-size: 1.5rem;
    }
}


/* ── Namecheap Style Chat & Animations ── */
.live-chat-widget {
    animation: slideUpChat 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    transform-origin: bottom right;
}
@keyframes slideUpChat {
    0% { transform: scale(0.5) translateY(50px); opacity: 0; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}

.live-chat-header {
    background: #fff;
    color: #333;
    border-bottom: 1px solid #eee;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.live-chat-header-info {
    display: flex;
    align-items: center;
    gap: 10px;
}
.live-chat-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), #ffb347);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}
.live-chat-title {
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.2;
}
.live-chat-status {
    font-size: 0.75rem;
    color: #28a745;
    display: flex;
    align-items: center;
    gap: 4px;
}
.live-chat-status::before {
    content: '';
    width: 8px;
    height: 8px;
    background: #28a745;
    border-radius: 50%;
    display: inline-block;
    animation: pulseGreen 2s infinite;
}
@keyframes pulseGreen {
    0% { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.4); }
    70% { box-shadow: 0 0 0 6px rgba(40, 167, 69, 0); }
    100% { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0); }
}

.live-chat-messages {
    background: #f8f9fa;
    padding: 20px;
}
.msg {
    animation: fadeInMsg 0.3s ease forwards;
    opacity: 0;
    transform: translateY(10px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
@keyframes fadeInMsg {
    to { opacity: 1; transform: translateY(0); }
}

.msg-bot {
    background: #fff !important;
    color: #333;
    border: 1px solid #eee;
    border-bottom-left-radius: 4px !important;
    align-self: flex-start;
}

.quick-replies {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
    animation: fadeInMsg 0.4s ease forwards;
    animation-delay: 0.2s;
    opacity: 0;
}
.quick-reply-btn {
    background: #fff;
    border: 1px solid var(--primary);
    color: var(--primary);
    padding: 6px 12px;
    border-radius: 50px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
}
.quick-reply-btn:hover {
    background: var(--primary);
    color: #fff;
}

/* Typing Indicator */
.typing-indicator {
    background: #fff;
    padding: 12px 16px;
    border-radius: 15px;
    border-bottom-left-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid #eee;
    align-self: flex-start;
    margin-bottom: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.typing-dot {
    width: 6px;
    height: 6px;
    background: #999;
    border-radius: 50%;
    animation: typingBounce 1.4s infinite ease-in-out both;
}
.typing-dot:nth-child(1) { animation-delay: -0.32s; }
.typing-dot:nth-child(2) { animation-delay: -0.16s; }
@keyframes typingBounce {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1); }
}