/* =========================================
   1. Global & Fonts (Reset)
   ========================================= */
.gcd-app-wrapper {
    font-family: 'Alexandria', sans-serif;
    max-width: 480px; margin: 0 auto; 
    background: #F9F9FA; min-height: 100vh; position: relative; 
    padding-bottom: 120px; /* مسافة أمان للبار السفلي */
    direction: rtl; overflow-x: hidden;
    box-shadow: 0 0 50px rgba(0,0,0,0.05);
}

/* Force FontAwesome Icons Fix (Critical) */
.gcd-app-wrapper .fa, 
.gcd-app-wrapper .fas, 
.gcd-app-wrapper .fa-solid, 
.gcd-app-wrapper .fa-regular, 
.gcd-app-wrapper .far {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}
.gcd-app-wrapper .fa-brands, 
.gcd-app-wrapper .fab {
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: 400;
}

/* =========================================
   2. Splash Screen (Layer: Max)
   ========================================= */
#gcd-splash-screen { 
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
    background: #fff; z-index: 9999999; 
    display: flex; align-items: center; justify-content: center; 
    pointer-events: auto; 
}
.splash-logo { width: 140px; margin-bottom: 20px; }
.splash-text { font-size: 18px; color: var(--gcd-primary); font-weight: 700; margin-bottom: 30px; }
.spinner { 
    width: 45px; height: 45px; 
    border: 4px solid rgba(0,0,0,0.05); 
    border-top: 4px solid var(--gcd-primary); 
    border-radius: 50%; animation: spin 0.8s linear infinite; margin: 0 auto; 
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* =========================================
   3. Header (Layer: 500) - Fixed & Compact
   ========================================= */
.gcd-app-header {
    background: #fff; padding: 10px 20px; color: #333;
    position: sticky; top: 0; z-index: 500; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    display: flex; align-items: center; height: 65px; box-sizing: border-box;
}
.header-inner { display: flex; justify-content: space-between; align-items: center; width: 100%; }

/* Right Side: Menu Button */
.header-right { display: flex; align-items: center; }
.menu-trigger-btn {
    background: #f3f4f6; border: none; color: #333;
    width: 40px; height: 40px; border-radius: 12px; font-size: 20px;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    transition: 0.2s; z-index: 501; pointer-events: auto;
}
.menu-trigger-btn:active { transform: scale(0.95); background: #e5e7eb; }

/* Center: Title */
.header-title h4 { margin: 0; font-size: 16px; font-weight: 800; color: var(--gcd-primary); }

/* Left Side: Actions */
.header-left-actions { display: flex; align-items: center; gap: 10px; }

.notification-btn {
    background: #fff; border: none; font-size: 22px; color: #333;
    cursor: pointer; position: relative; padding: 5px;
    display: flex; align-items: center; justify-content: center; pointer-events: auto;
}
.notification-btn .dot {
    position: absolute; top: 5px; right: 5px;
    width: 8px; height: 8px; background: #ef4444;
    border-radius: 50%; border: 1px solid #fff;
}
.header-avatar-box img {
    width: 36px; height: 36px; border-radius: 50%; object-fit: cover;
    border: 2px solid #eee; cursor: pointer; pointer-events: auto;
}

/* =========================================
   4. Bottom Navigation (Layer: 600) - Interactive
   ========================================= */
.gcd-bottom-nav-wrapper {
    position: fixed; bottom: 0; left: 0; right: 0; 
    z-index: 600; 
    padding-bottom: env(safe-area-inset-bottom);
    height: 0; /* [هام] لكي لا يغطي المحتوى */
    pointer-events: none; /* [هام] يسمح باللمس في الفراغ */
}

.gcd-bottom-nav { 
    max-width: 480px; margin: 0 auto; height: 75px; 
    background: var(--gcd-primary); 
    display: flex; justify-content: space-between; align-items: center; 
    border-radius: 25px 25px 0 0; 
    box-shadow: 0 -5px 30px rgba(0,0,0,0.15); 
    padding: 0 10px; 
    position: absolute; bottom: 0; left: 0; right: 0; 
    pointer-events: auto; /* [هام] تفعيل الأزرار */
}

.nav-btn { 
    background: none; border: none; 
    display: flex; flex-direction: column; align-items: center; gap: 5px; 
    color: rgba(255,255,255, 0.7); 
    font-family: 'Alexandria', sans-serif; font-weight: 600; font-size: 10px; 
    cursor: pointer; width: 20%; text-decoration: none;
    pointer-events: auto; transition: all 0.3s;
}
.nav-btn.active { 
    color: #fff; font-weight: 800; 
    transform: translateY(-4px); 
    text-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.nav-btn i { font-size: 20px; margin-bottom: 2px; }

/* Floating Center Button */
.nav-btn-center-wrapper {
    width: 20%; display: flex; justify-content: center; 
    position: relative; height: 100%; pointer-events: none;
}
.nav-btn-center {
    width: 65px; height: 65px; background: #fff; border-radius: 50%;
    position: absolute; top: -35px; 
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 -5px 15px rgba(0,0,0,0.1); border: 6px solid #F9F9FA; 
    color: var(--gcd-primary); text-decoration: none; 
    z-index: 601; cursor: pointer; pointer-events: auto; transition: transform 0.2s;
}
.nav-btn-center i { font-size: 26px; }
.nav-btn-center:active { transform: scale(0.95); }

.nav-cart-badge {
    position: absolute; top: -2px; right: -2px; background: #ef4444; color: #fff;
    width: 24px; height: 24px; border-radius: 50%; font-size: 11px; font-weight: bold;
    display: flex; align-items: center; justify-content: center; border: 2px solid #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* =========================================
   5. Overlays & Modals (Layer: 2000+)
   ========================================= */
#gcd-side-drawer-overlay, #gcd-notif-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.6); z-index: 2000; 
    display: none; /* مخفي تماماً */
    backdrop-filter: blur(4px);
}

/* Side Drawer */
#gcd-side-drawer {
    position: fixed; top: 0; right: -300px; width: 280px; height: 100%;
    background: #fff; z-index: 2001; 
    box-shadow: -10px 0 40px rgba(0,0,0,0.15);
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex; flex-direction: column;
}
#gcd-side-drawer.open { right: 0; }

.drawer-header { padding: 30px 20px 15px; background: #fff; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #f3f4f6; }
.drawer-header h3 { margin: 0; font-size: 18px; font-weight: 800; color: #111827; }
#close-side-menu { background: #f9fafb; border: none; width: 32px; height: 32px; border-radius: 50%; color: #4b5563; font-size: 14px; cursor: pointer; }

.drawer-content { padding: 20px; flex: 1; overflow-y: auto; }
.drawer-content::-webkit-scrollbar { width: 0px; background: transparent; }

.drawer-user-info { display: flex; align-items: center; gap: 15px; margin-bottom: 25px; padding: 15px; background: #f9f9f9; border-radius: 12px; }
.drawer-user-info img { width: 50px; height: 50px; border-radius: 50%; border: 2px solid #fff; object-fit: cover; }
.drawer-user-info strong { display: block; color: #333; font-size: 14px; }
.drawer-user-info small { color: #888; font-size: 11px; }

.drawer-menu-list { list-style: none; padding: 0; margin: 0; }
.drawer-menu-list li { margin-bottom: 10px; }
.drawer-link { display: flex; align-items: center; gap: 12px; padding: 12px 15px; border-radius: 10px; text-decoration: none; color: #374151; font-weight: 600; font-size: 14px; transition: background 0.2s; }
.drawer-link:active { background: #f3f4f6; }
.drawer-link .icon-box { width: 32px; height: 32px; background: #f3f4f6; color: var(--gcd-primary); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.drawer-link .arrow { margin-right: auto; color: #d1d5db; font-size: 11px; }
.drawer-socials { margin-top: 30px; text-align: center; border-top: 1px dashed #eee; padding-top: 20px; }
.social-icons { display: flex; justify-content: center; gap: 15px; margin-top: 10px; }
.social-icons a { width: 40px; height: 40px; background: #fff; border: 1px solid #e5e7eb; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #6b7280; font-size: 18px; transition: all 0.2s; }
.social-icons a:hover { border-color: var(--gcd-primary); color: var(--gcd-primary); transform: translateY(-3px); }

/* Notification Modal */
#gcd-notif-modal {
    position: fixed; top: 80px; left: 20px; right: 20px;
    background: #fff; border-radius: 20px; padding: 20px; z-index: 2001;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    display: none; max-height: 60vh; overflow-y: auto;
    transform: translateY(-20px); opacity: 0; transition: all 0.3s;
}
#gcd-notif-modal.open { transform: translateY(0); opacity: 1; }
.notif-header { display: flex; justify-content: space-between; margin-bottom: 15px; border-bottom: 1px solid #f3f4f6; padding-bottom: 10px; }
.notif-header h3 { margin: 0; font-size: 16px; font-weight: 800; }
#close-notif-modal { border: none; background: none; font-size: 16px; color: #999; cursor: pointer; }
.notif-item { display: flex; gap: 15px; padding: 12px; background: #f9f9f9; border-radius: 12px; margin-bottom: 10px; align-items: center; border-right: 3px solid var(--gcd-primary); }
.notif-item .icon { width: 35px; height: 35px; background: #e0f2fe; color: var(--gcd-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
.notif-item .content p { margin: 0; font-size: 13px; font-weight: 600; line-height: 1.3; }
.notif-item .content small { font-size: 10px; color: #999; }

/* =========================================
   6. Content & Products
   ========================================= */
.gcd-views-container { padding: 0 20px; position: relative; z-index: 1; }
.section-head { display: flex; justify-content: space-between; margin: 25px 0 15px; }
.section-head h3 { margin: 0; font-size: 16px; font-weight: 800; color: #1f2937; border-right: 4px solid var(--gcd-primary); padding-right: 10px; }
.section-head a { color: var(--gcd-primary); font-size: 12px; text-decoration: none; font-weight: 700; }

.gcd-slider-wrapper { overflow-x: auto; white-space: nowrap; border-radius: 20px; margin-bottom: 20px; }
.gcd-slides img { width: 100%; border-radius: 20px; display: inline-block; }

.gcd-cat-grid { display: flex; gap: 15px; overflow-x: auto; padding: 5px 5px 20px; }
.cat-item { text-align: center; min-width: 75px; }
.cat-img { width: 70px; height: 70px; background: #fff; border-radius: 20px; display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.04); }
.cat-img img { width: 40px; height: 40px; object-fit: contain; }
.cat-item span { font-size: 12px; font-weight: 700; color: #4b5563; }

.prod-list-item { background: #fff; padding: 12px; border-radius: 20px; display: flex; align-items: center; gap: 15px; box-shadow: 0 8px 25px rgba(0,0,0,0.03); margin-bottom: 15px; }
.prod-img { width: 85px; height: 85px; background: #f3f4f6; border-radius: 16px; overflow: hidden; flex-shrink: 0; }
.prod-img img { width: 100%; height: 100%; object-fit: cover; }
.prod-details { flex: 1; }
.prod-details h5 { margin: 0 0 6px; font-size: 15px; font-weight: 700; color: #333; }
.prod-details .price { color: var(--gcd-primary); font-weight: 800; font-size: 16px; }
.add-cart-btn { background: var(--gcd-primary); color: #fff; width: 40px; height: 40px; border-radius: 12px; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; pointer-events: auto; }

.offers-banner img { width: 100%; border-radius: 16px; box-shadow: 0 5px 20px rgba(0,0,0,0.05); margin-bottom: 20px; }
.announcement-box { background: linear-gradient(135deg, #ffffff 0%, #fff7ed 100%); border: 2px solid var(--gcd-primary); border-radius: 16px; padding: 20px; display: flex; align-items: center; gap: 15px; box-shadow: 0 8px 20px rgba(0,0,0,0.05); margin-bottom: 25px; position: relative; overflow: hidden; }
.icon-box { width: 50px; height: 50px; background: var(--gcd-primary); color: #fff; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0; }
.announcement-box p { margin: 0; font-weight: 700; color: #444; font-size: 14px; line-height: 1.5; }

.cart-item { background: #fff; padding: 15px; border-radius: 15px; display: flex; align-items: center; gap: 15px; margin-bottom: 15px; box-shadow: 0 2px 10px rgba(0,0,0,0.03); }
.c-img { width: 60px; height: 60px; border-radius: 12px; overflow: hidden; } .c-img img { width: 100%; height: 100%; object-fit: cover; }
.c-details { flex: 1; } .c-details h5 { margin: 0; font-size: 14px; }
.c-actions { display: flex; align-items: center; gap: 10px; background: #f3f3f3; padding: 5px; border-radius: 8px; }
.qty-btn { background: #fff; border: none; width: 28px; height: 28px; border-radius: 6px; font-weight: bold; cursor: pointer; pointer-events: auto; }
.cart-total { font-size: 18px; font-weight: 800; margin: 20px 0; display: flex; justify-content: space-between; background: #fff; padding: 20px; border-radius: 16px; }
.empty-cart { text-align: center; padding: 50px 20px; color: #aaa; }

/* --- Profile --- */
.profile-header-card { background: #fff; padding: 25px; border-radius: 20px; margin-bottom: 20px; box-shadow: 0 5px 20px rgba(0,0,0,0.03); text-align: center; }
.ph-user { position: relative; margin-bottom: 20px; }
.ph-avatar img { width: 80px; height: 80px; border-radius: 50%; border: 3px solid var(--gcd-primary); padding: 3px; object-fit: cover; }
.ph-info h3 { margin: 10px 0 5px; font-size: 18px; font-weight: 800; }
.ph-info span { font-size: 12px; color: #999; }
.ph-edit-btn { position: absolute; bottom: 0; left: 50%; margin-left: 25px; background: #333; color: #fff; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 12px; }
.ph-stats { display: flex; justify-content: space-around; background: #f9f9f9; padding: 15px; border-radius: 12px; }
.stat-box strong { display: block; font-size: 16px; color: var(--gcd-primary); }
.stat-box span { font-size: 11px; color: #888; }

.profile-menu-list .menu-group { background: #fff; border-radius: 16px; overflow: hidden; margin-bottom: 15px; box-shadow: 0 2px 10px rgba(0,0,0,0.02); }
.profile-menu-list h3 { padding: 15px 20px 5px; font-size: 12px; color: #aaa; text-transform: uppercase; margin: 0; }
.menu-item { display: flex; align-items: center; padding: 15px 20px; text-decoration: none; color: #333; font-weight: 600; font-size: 14px; border-bottom: 1px solid #f5f5f5; transition: background 0.2s; cursor: pointer; }
.menu-item:last-child { border-bottom: none; }
.menu-item:active { background: #f9f9f9; }
.menu-item i { width: 25px; color: #bbb; }
.menu-item .arrow { margin-right: auto; font-size: 12px; color: #ddd; }
.menu-item.logout { color: #ef4444; } .menu-item.logout i { color: #ef4444; }

.gcd-profile-card { background: #fff; padding: 25px; border-radius: 20px; box-shadow: 0 8px 25px rgba(0,0,0,0.04); }
.form-group { margin-bottom: 15px; }
.form-group label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 700; color: #555; }
.form-group input { width: 100%; padding: 14px; border: 2px solid #f3f4f6; border-radius: 12px; outline: none; box-sizing: border-box; }
.gcd-btn-primary { background: var(--gcd-primary); color: #fff; border: none; padding: 16px; border-radius: 14px; font-weight: 700; cursor: pointer; width: 100%; pointer-events: auto; }
.gcd-btn-primary.small { padding: 10px; width: auto; margin-top: 10px; }
.block-btn { display: block; width: 100%; }
.logout-btn { display: block; text-align: center; background: #fee2e2; color: #ef4444; padding: 14px; border-radius: 14px; margin-top: 25px; text-decoration: none; font-weight: bold; }

.gcd-order-card { background: #fff; padding: 20px; border-radius: 16px; margin-bottom: 15px; border-right: 4px solid #eee; box-shadow: 0 5px 15px rgba(0,0,0,0.03); }
.badge { font-size: 11px; padding: 4px 10px; border-radius: 12px; background: #f3f4f6; font-weight: bold; }

/* --- Login Styles (Improved) --- */
.gcd-login-wrapper { 
    min-height: 100vh; 
    display: flex; align-items: center; justify-content: center; 
    background: #f4f6f9; padding: 20px; direction: rtl; 
    position: relative; z-index: 100; 
}
.login-container { 
    background: rgba(255, 255, 255, 0.95); 
    backdrop-filter: blur(10px);
    padding: 40px 30px; border-radius: 25px; 
    box-shadow: 0 15px 50px rgba(0,0,0,0.08); 
    width: 100%; max-width: 400px; text-align: center; 
    border: 1px solid rgba(255,255,255,0.5);
}
.login-logo img { width: 120px; margin-bottom: 20px; }
.login-header h2 { margin: 0 0 5px; font-size: 24px; color: #333; font-weight: 800; }
.login-header p { color: #888; font-size: 14px; margin-bottom: 25px; font-weight: 500; }

.login-tabs-wrapper {
    background: #f3f4f6; border-radius: 12px; padding: 5px;
    display: flex; margin-bottom: 25px;
}
.tab-btn {
    flex: 1; border: none; background: none; padding: 12px;
    border-radius: 8px; font-weight: 700; color: #888; font-family: 'Alexandria', sans-serif;
    cursor: pointer; transition: all 0.3s;
}
.tab-btn.active {
    background: #fff; color: var(--gcd-primary);
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.login-container .form-group { text-align: right; margin-bottom: 20px; }
.login-container label { display: block; margin-bottom: 8px; font-weight: 700; color: #555; font-size: 13px; }
.login-container label i { margin-left: 8px; color: var(--gcd-primary); width: 15px; text-align: center; }
.login-container input[type="text"], 
.login-container input[type="password"],
.login-container input[type="email"],
.login-container input[type="tel"] { 
    width: 100%; padding: 15px; border: 2px solid #e5e7eb; border-radius: 14px; 
    font-size: 15px; transition: 0.3s; outline: none; box-sizing: border-box; 
    font-family: 'Alexandria', sans-serif;
}
.login-container input:focus { border-color: var(--gcd-primary); background: #fff; box-shadow: 0 0 0 4px rgba(255, 102, 0, 0.1); }

.form-actions { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; font-size: 13px; font-weight: 600; }
.form-actions a { color: var(--gcd-primary); text-decoration: none; }

/* --- View Transition --- */
.gcd-view { display: none; } 
.gcd-view.active { display: block; animation: fadeInUp 0.4s ease-out; }
@keyframes fadeInUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
.dynamic-content-box { background: #fff; padding: 25px; border-radius: 20px; box-shadow: 0 5px 20px rgba(0,0,0,0.03); line-height: 1.8; color: #4b5563; font-size: 14px; }

/* =========================================
   NEW ORDERS UI (V22.0 Fix)
   ========================================= */

/* 1. تنسيق التابات (Active vs Archive) */
.orders-tabs-header {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
    background: #fff;
    padding: 8px;
    border-radius: 16px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.03);
    border: 1px solid #f3f4f6;
}

.orders-tab {
    flex: 1;
    border: none;
    background: transparent;
    padding: 12px;
    border-radius: 12px;
    font-weight: 700;
    font-family: 'Alexandria', sans-serif;
    color: #9ca3af;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 13px;
}

.orders-tab.active {
    background: var(--gcd-primary); /* سيأخذ اللون البرتقالي من المتغيرات */
    color: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* 2. كارت الطلب النشط (The Big Card) */
.active-order-card {
    background: #fff;
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.06);
    border: 1px solid #f1f5f9;
    position: relative;
    overflow: hidden;
}

/* الهيدر الصغير داخل الكارت (#204 - الوقت) */
.ao-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px dashed #e2e8f0;
    font-size: 12px;
    color: #64748b;
}
.ao-header .order-id {
    font-weight: 800;
    color: #334155;
    background: #f1f5f9;
    padding: 2px 8px;
    border-radius: 6px;
}

/* منطقة الحالة (أيقونة + نص) */
.ao-status-box {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
}

.status-icon {
    width: 55px;
    height: 55px;
    background: #fff7ed; /* خلفية برتقالي فاتح جداً */
    color: var(--gcd-primary);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
    flex-shrink: 0;
}

.status-info h4 {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 800;
    color: #1e293b;
}

.status-info p {
    margin: 0;
    font-size: 12px;
    color: #64748b;
    line-height: 1.4;
}

/* 3. شريط التتبع (Timeline) - أهم جزء */
.timeline-wrapper {
    position: relative;
    height: 6px;
    background: #f1f5f9;
    border-radius: 10px;
    margin: 10px 10px 30px 10px; /* هوامش لضبط النقاط */
}

.timeline-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
}

.timeline-progress {
    height: 100%;
    background: linear-gradient(90deg, var(--gcd-primary) 0%, #ff8c00 100%);
    border-radius: 10px;
    transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 10px rgba(255, 102, 0, 0.3);
}

.timeline-points {
    position: absolute;
    top: -5px; /* رفع النقاط لتتوسط الخط */
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    pointer-events: none; /* عشان ما تغطيش عالكليكات */
}

.point {
    width: 16px;
    height: 16px;
    background: #e2e8f0;
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: all 0.4s ease;
}

.point.active {
    background: var(--gcd-primary);
    transform: scale(1.3); /* تكبير النقطة النشطة */
    box-shadow: 0 0 0 3px rgba(255, 102, 0, 0.2);
}

/* 4. الفوتر (السعر + زر التفاصيل) */
.ao-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #f1f5f9;
}

.total-price {
    font-size: 18px;
    font-weight: 900;
    color: #0f172a;
    font-family: 'Alexandria', sans-serif;
}

.action-btn.details {
    background: #f8fafc;
    color: #475569;
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s;
    border: 1px solid #e2e8f0;
}
.action-btn.details:hover {
    background: #e2e8f0;
    color: #1e293b;
}

/* 5. كروت الأرشيف (History) */
.history-order-card {
    background: #fff;
    padding: 15px;
    border-radius: 16px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 15px;
    border: 1px solid #f3f4f6;
    transition: transform 0.2s;
}
.history-order-card:active {
    transform: scale(0.98);
}

.ho-icon {
    width: 45px;
    height: 45px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.ho-info { flex: 1; }
.ho-info h5 { margin: 0 0 4px; font-size: 14px; color: #333; font-weight: 700; }
.ho-info .date { display: block; font-size: 11px; color: #94a3b8; }
.ho-price strong { color: #333; font-size: 15px; }


/* --- منع الزوم (Zoom Prevention) --- */
html, body {
    touch-action: pan-x pan-y; /* يسمح بالسكرول فقط ويمنع إيماءات التكبير */
    -webkit-text-size-adjust: 100%; /* يمنع تكبير الخط تلقائياً في الآيفون */
}

/* =========================================
   Modern Profile Design (V2.0)
   ========================================= */

/* 1. Header Curve & Layout */
.modern-profile-header {
    background: #fff;
    padding-bottom: 60px; /* مساحة للكروت العائمة */
    position: relative;
    text-align: center;
    margin-bottom: -40px; /* سحب المحتوى للأعلى */
}
.profile-curve {
    position: absolute; top: 0; left: 0; width: 100%; height: 120px;
    background: linear-gradient(135deg, var(--gcd-primary) 0%, #ff9100 100%);
    border-radius: 0 0 50% 50% / 0 0 20px 20px;
    z-index: 0;
}
.user-centered-info {
    position: relative; z-index: 1; padding-top: 60px;
}
.avatar-ring {
    width: 90px; height: 90px; margin: 0 auto 10px; position: relative;
}
.avatar-ring img {
    width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
    border: 4px solid #fff; box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    background: #fff;
}
.edit-cam {
    position: absolute; bottom: 0; right: 0;
    background: #1f2937; color: #fff; width: 28px; height: 28px;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 12px; border: 2px solid #fff; cursor: pointer;
}
.user-centered-info h3 { margin: 0; font-size: 18px; font-weight: 800; color: #1f2937; }
.user-centered-info .user-phone { color: #6b7280; font-size: 13px; font-weight: 600; }

/* 2. Stats Grid (الإحصائيات) */
.stats-grid-container {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px;
    padding: 0 20px; position: relative; z-index: 2; margin-bottom: 20px;
}
.stat-box-item {
    background: #fff; border-radius: 16px; padding: 15px 10px; text-align: center;
    box-shadow: 0 8px 20px rgba(0,0,0,0.04); border: 1px solid #f8fafc;
}
.stat-box-item .icon-bg {
    width: 35px; height: 35px; background: #fff7ed; color: var(--gcd-primary);
    border-radius: 10px; display: flex; align-items: center; justify-content: center;
    margin: 0 auto 8px; font-size: 16px;
}
.stat-box-item strong { display: block; font-size: 16px; color: #1f2937; }
.stat-box-item span { font-size: 11px; color: #9ca3af; }

/* 3. Menus (القوائم) */
.profile-menu-modern { padding: 0 20px; }
.menu-section-label {
    font-size: 12px; color: #9ca3af; font-weight: 700; margin: 20px 0 8px;
}
.modern-menu-card {
    background: #fff; border-radius: 20px; overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.02); border: 1px solid #f1f5f9;
}
.menu-row {
    display: flex; align-items: center; gap: 15px; padding: 16px 20px;
    text-decoration: none; color: #374151; transition: 0.2s;
}
.menu-row:active { background: #f9fafb; }
.menu-row .row-icon {
    width: 32px; height: 32px; background: #f3f4f6; border-radius: 10px;
    display: flex; align-items: center; justify-content: center; color: #4b5563;
}
.menu-row .row-icon.whatsapp { background: #dcfce7; color: #16a34a; }
.menu-row .row-icon.call { background: #e0f2fe; color: #0284c7; }

.menu-row .row-text { flex: 1; font-weight: 600; font-size: 14px; }
.menu-row .arrow { font-size: 12px; color: #d1d5db; }
.divider-line { height: 1px; background: #f1f5f9; margin: 0 20px; }

/* 4. Forms & Buttons */
.hidden-form-panel {
    display: none; background: #fcfcfc; padding: 20px;
    border-top: 1px dashed #eee; border-bottom: 1px solid #f1f5f9;
}
.modern-logout-btn {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    background: #fee2e2; color: #ef4444; padding: 15px; border-radius: 16px;
    text-decoration: none; font-weight: 700; margin-top: 25px;
    transition: 0.2s;
}
.modern-logout-btn:active { background: #fecaca; transform: scale(0.98); }

/* 5. Guest State */
.guest-state-card {
    background: #fff; padding: 40px 20px; text-align: center; border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05); margin-top: -30px; position: relative; z-index: 2;
}
.guest-state-card h3 { margin: 15px 0 5px; }
.guest-state-card p { color: #888; font-size: 13px; margin-bottom: 20px; }


/* --- Admin Message Box (رسالة الإدارة) --- */
.profile-admin-message {
    margin: 0 20px 20px;
    background: linear-gradient(135deg, #fff7ed 0%, #fff 100%);
    border: 1px solid #fed7aa;
    border-right: 4px solid #f97316; /* شريط برتقالي */
    border-radius: 12px;
    padding: 15px;
    display: flex;
    gap: 15px;
    align-items: flex-start;
    box-shadow: 0 4px 15px rgba(249, 115, 22, 0.08);
    animation: fadeInUp 0.5s ease;
}

.profile-admin-message .msg-icon {
    background: #f97316;
    color: #fff;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
    margin-top: 2px;
}

.profile-admin-message .msg-text {
    font-size: 13px;
    color: #333;
    line-height: 1.6;
    font-weight: 600;
}
/* =========================================
   تحديث تصميم الأقسام (Modern Stories Style)
   ========================================= */

/* 1. الحاوية (Scroll Container) */
.gcd-cat-grid {
    display: flex !important;
    gap: 18px !important; /* مسافة مريحة بين الدوائر */
    overflow-x: auto !important;
    padding: 10px 20px 25px !important;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    align-items: flex-start;
}
/* إخفاء شريط السكرول للشكل الجمالي */
.gcd-cat-grid::-webkit-scrollbar { display: none; }

/* 2. العنصر الواحد (الرابط) */
a.cat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none !important;
    min-width: 72px; /* عرض ثابت لضمان عدم الانكماش */
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

a.cat-item:active {
    transform: scale(0.9); /* تأثير ضغط لطيف */
}

/* 3. الدائرة (الصورة) */
.cat-img {
    width: 68px;
    height: 68px;
    border-radius: 50%; /* تحويل لمربع لدائرة */
    background: #fff;
    padding: 3px; /* مسافة بين الصورة والحدود الملونة */
    
    /* حدود ملونة متدرجة (Gradient Border) */
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #ffe4d1; 
    
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    overflow: hidden;
}

/* حالة عند الضغط أو الوقوف عليها */
a.cat-item:hover .cat-img {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--gcd-primary); /* تلوين الحدود بالبرتقالي */
}

.cat-img img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* لضمان ملء الدائرة */
    border-radius: 50%;
}

/* 4. النص أسفل الصورة */
a.cat-item span {
    font-size: 11px;
    font-weight: 700;
    color: #374151;
    text-align: center;
    line-height: 1.3;
    max-width: 72px;
    white-space: normal; /* يسمح بنزول النص لسطرين */
}

/* =========================================
   تطوير صفحة القسم الداخلي (Category Page)
   ========================================= */

/* 1. تخصيص الهيدر في صفحة القسم */
.tax-product_cat .gcd-app-header {
    background: #fff;
    box-shadow: none;
    border-bottom: 1px solid #f3f4f6;
}

/* 2. تحسين عنوان الصفحة (مثلاً: اسطوانات الغاز) */
.tax-product_cat .woocommerce-products-header__title {
    font-size: 18px;
    font-weight: 800;
    color: var(--gcd-primary);
    text-align: center;
    margin: 20px 0 10px;
    padding-bottom: 10px;
    position: relative;
    display: inline-block;
    width: 100%;
}

/* 3. شبكة المنتجات داخل القسم (تعديل الـ Grid) */
.tax-product_cat ul.products {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important; /* عمودين */
    gap: 15px !important;
    padding: 15px !important;
}

/* 4. كارت المنتج داخل القسم */
.tax-product_cat ul.products li.product {
    background: #fff;
    border: 1px solid #f1f5f9 !important;
    border-radius: 16px !important;
    padding: 15px 10px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03) !important;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* 5. زر الإضافة للسلة (جعلناه عريضاً وواضحاً) */
.tax-product_cat ul.products li.product .button {
    width: 100%;
    border-radius: 12px !important;
    margin-top: 10px;
    background: var(--gcd-primary) !important;
    color: #fff !important;
    font-weight: bold;
    padding: 10px 0 !important;
}

/* إخفاء الوصف المزعج في أعلى الصفحة (اختياري) */
.tax-product_cat .term-description {
    font-size: 12px;
    color: #666;
    text-align: center;
    padding: 0 20px;
    margin-bottom: 20px;
}
/* --- Blog & Articles Design --- */

/* 1. Hero Card (المقال الرئيسي) */
.blog-hero-card {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 25px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    cursor: pointer;
    position: relative;
}

.hero-img {
    height: 180px;
    background-size: cover;
    background-position: center;
    position: relative;
}
.hero-img::after {
    content: ''; position: absolute; top:0; left:0; width:100%; height:100%;
    background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.6) 100%);
}

.hero-badge {
    position: absolute; top: 15px; right: 15px;
    background: var(--gcd-primary); color: #fff;
    padding: 5px 12px; border-radius: 20px;
    font-size: 11px; font-weight: 800; z-index: 2;
}

.hero-content {
    padding: 15px;
    position: relative;
}

.hero-content h4 {
    margin: 0 0 8px; font-size: 16px; font-weight: 800; color: #333;
    line-height: 1.4;
}

.hero-content p {
    font-size: 12px; color: #777; margin-bottom: 10px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.hero-content .read-more {
    font-size: 12px; font-weight: 700; color: var(--gcd-primary);
    display: flex; align-items: center; gap: 5px;
}

/* 2. Article List (قائمة المقالات) */
.blog-list {
    display: flex; flex-direction: column; gap: 15px; padding-bottom: 20px;
}

.article-card {
    background: #fff;
    padding: 12px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    border: 1px solid #f3f4f6;
    cursor: pointer;
    transition: transform 0.2s;
}
.article-card:active { transform: scale(0.98); background: #f9fafb; }

.art-img {
    width: 80px; height: 80px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
}
.art-img img { width: 100%; height: 100%; object-fit: cover; }

.art-info { flex: 1; }
.art-info h5 {
    margin: 5px 0 0; font-size: 14px; font-weight: 700; color: #333;
    line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.art-date { font-size: 10px; color: #9ca3af; display: block; margin-bottom: 4px; }

/* 3. Single Post View (عرض المقال) */
.post-navigation-bar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 15px 20px; background: #fff; border-bottom: 1px solid #eee;
    position: sticky; top: 0; z-index: 100;
}
.post-nav-title { font-weight: 800; font-size: 14px; }
.share-btn { border: none; background: none; font-size: 16px; color: #333; cursor: pointer; }

.single-post-hero .sp-image {
    width: 100%; height: 220px; object-fit: cover;
    border-radius: 0 0 25px 25px;
    margin-bottom: 20px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}

.sp-header { padding: 0 20px; margin-bottom: 20px; }
.sp-header h1 { font-size: 20px; font-weight: 900; color: #111; margin: 0 0 10px; line-height: 1.4; }
.sp-meta { display: flex; gap: 15px; font-size: 12px; color: #888; }
.sp-meta i { margin-left: 5px; color: var(--gcd-primary); }

.sp-body {
    padding: 0 20px 40px;
    font-size: 15px; line-height: 1.8; color: #4b5563;
}
.sp-body p { margin-bottom: 15px; }
.sp-body img { max-width: 100%; height: auto; border-radius: 12px; margin: 10px 0; }