/* ===== متجر الباشا v2 — نفس الألوان، تصميم أجرأ مع إصلاح الموبايل ===== */
:root { --r-lg: 16px; --r-md: 14px; --shadow-soft: 0 10px 40px rgba(30,20,10,.08); --ease: cubic-bezier(.16,1,.3,1); }

/* منع الاهتزاز والتمرير الأفقي في الموبايل */
html, body { overflow-x: hidden; width: 100%; max-width: 100vw; scroll-behavior: smooth; }
body.shop-page { background: #fff; }
* { box-sizing: border-box; }
/* ========================================= */
/* --- شاشة التحميل (Preloader) --- */
/* ========================================= */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #e5e5e5; /* الشاشة بقت رصاصي */
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.6s ease, visibility 0.6s ease;
}

.preloader-content {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 180px;
    height: 180px;
}

/* الدايرة النحاسي اللي بتلف حوالين اللوجو */
.preloader-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 4px solid rgba(200, 129, 65, 0.2); /* نحاسي شفاف */
    border-top-color: var(--copper); /* نحاسي صريح من فوق */
    animation: spin 1s linear infinite;
}

.preloader-logo {
    width: 110px; 
    border-radius: 50%; /* عشان لو اللوجو ليه خلفية بيضاء يتقص بشكل دائري */
    animation: heartbeat 1.2s infinite alternate ease-in-out;
}

/* حركة اللف */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* حركة النبض */
@keyframes heartbeat {
    0% { transform: scale(0.95); filter: drop-shadow(0 0 0px rgba(200, 129, 65, 0)); }
    100% { transform: scale(1.05); filter: drop-shadow(0 10px 20px rgba(200, 129, 65, 0.4)); }
}

#preloader.loaded {
    opacity: 0;
    visibility: hidden;
}
/* HERO كبير + رحلة المنتج */
.shop-hero { margin-top: 80px; padding: 56px 0 50px; color: #fff; position: relative; overflow: hidden; background: radial-gradient(620px 340px at 88% 0%, rgba(200,129,65,.5), transparent 68%), radial-gradient(420px 260px at 0% 100%, rgba(200,129,65,.22), transparent 70%), var(--text-dark); }
.shop-hero::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px); background-size: 24px 24px; mask-image: linear-gradient(to bottom,#000,transparent); pointer-events: none; }
.shop-hero { background: radial-gradient(620px 340px at 12% 0%, rgba(200,129,65,.5), transparent 68%), radial-gradient(420px 260px at 100% 100%, rgba(200,129,65,.22), transparent 70%), var(--text-dark); }
.hero-wrap { position: relative; display: grid; grid-template-columns: 1.1fr 1fr; gap: 36px; align-items: center; }
.hero-chip { display: inline-flex; gap: 8px; align-items: center; padding: 7px 16px; border-radius: 40px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); font-weight: 700; font-size: .85rem; margin-bottom: 18px; }
.hero-chip i { color: var(--copper); }
.shop-hero h1 { font-size: clamp(2.2rem, 6vw, 4rem); font-weight: 900; line-height: 1.2; margin: 0 0 14px; color: #fff; }
.shop-hero h1 em { font-style: normal; background: linear-gradient(120deg, #f6c08a, var(--copper)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.shop-hero p { color: rgba(255,255,255,.72); font-size: 1rem; line-height: 1.9; margin: 0 0 24px; max-width: 440px; }
.hero-cta { display: inline-flex; gap: 10px; align-items: center; padding: 13px 28px; border-radius: 50px; background: var(--copper); color: #fff; font-weight: 800; box-shadow: 0 12px 30px rgba(200,129,65,.5); transition: .35s var(--ease); touch-action: manipulation; }
.hero-cta:hover { transform: translateY(-3px); background: var(--copper-dark); }
.journey { display: flex; align-items: flex-start; padding: 28px 22px; border-radius: 28px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(14px); }
.j-step { flex: none; width: 96px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; }
.j-ico { width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center; font-size: 1.5rem; color: #fff; background: linear-gradient(145deg, var(--copper), var(--copper-dark)); box-shadow: 0 10px 26px rgba(200,129,65,.45); margin-bottom: 8px; }
.j-step strong { font-size: 1.2rem; font-weight: 900; line-height: 1.2; }
.j-step small { font-size: .78rem; color: rgba(255,255,255,.7); }
.j-link { position: relative; flex: 1; min-width: 20px; height: 0; margin: 34px 2px 0; border-top: 2px dashed rgba(200,129,65,.8); }
.j-link i { position: absolute; left: -4px; top: -11px; color: var(--copper); font-size: 1.2rem; }

/* FILTERS */
.sticky-filters-bar { position: sticky; top: 80px; z-index: 99; background: rgba(255,255,255,.95); backdrop-filter: blur(18px) saturate(1.4); border-bottom: 1px solid rgba(0,0,0,.05); padding: 12px 0; }
.filters-flex { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: space-between; }
.clean-category-list { display: flex; gap: 10px; list-style: none; overflow-x: auto; padding: 2px; margin: 0; scrollbar-width: none; max-width: 100%; }
.clean-category-list::-webkit-scrollbar { display: none; }
.clean-category-list a { display: flex; align-items: center; gap: 8px; white-space: nowrap; padding: 10px 20px; border-radius: 40px; font-weight: 700; font-size: .92rem; color: var(--text-dark); background: #fff; border: 1px solid #eee4d9; transition: .3s var(--ease); }
.clean-category-list a i { color: var(--copper); font-size: .9rem; transition: .3s; }
.clean-category-list a:hover { border-color: var(--copper); transform: translateY(-2px); }
.clean-category-list a.active { background: var(--text-dark); color: #fff; border-color: var(--text-dark); box-shadow: 0 10px 24px rgba(0,0,0,.2); }
.clean-category-list a.active::after { display: none; }

.search-box, .sort-dropdown { display: flex; align-items: center; gap: 10px; background: var(--bg-light); padding: 10px 16px; border-radius: 40px; color: var(--text-gray); border: 1px solid transparent; transition: .3s; }
.search-box:focus-within { border-color: var(--copper); background: #fff; box-shadow: 0 0 0 4px rgba(200,129,65,.12); }
.search-box input { border: none; background: transparent; outline: none; font-family: inherit; font-weight: 600; width: 150px; color: var(--text-dark); }
.sort-dropdown select { border: none; background: transparent; font-family: inherit; font-weight: 700; color: var(--text-dark); outline: none; cursor: pointer; }

/* GRID + CARDS */
.results-bar { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 22px; }
.results-bar h2 { font-size: 1.6rem; font-weight: 900; color: var(--text-dark); }
.results-bar span { color: var(--text-gray); font-weight: 700; }
.products-grid-premium { display: grid; grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); gap: 14px; }
.product-premium-card { background: #fff; border-radius: var(--r-lg); overflow: hidden; border: 1px solid #f0e8de; box-shadow: var(--shadow-soft); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.product-premium-card:hover { transform: translateY(-8px); box-shadow: 0 28px 60px rgba(200,129,65,.28); }
.product-img-wrap { position: relative; aspect-ratio: 4/5; overflow: hidden; background: #f4f0eb; cursor: zoom-in; }
.product-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.product-premium-card:hover .product-img-wrap img { transform: scale(1.09); }
.product-img-wrap::after { content: ""; position: absolute; inset: auto 0 0; height: 35%; background: linear-gradient(to top, rgba(20,12,5,.35), transparent); pointer-events: none; }
.p-badge { position: absolute; top: 14px; right: 14px; z-index: 2; padding: 6px 14px; border-radius: 30px; background: var(--text-dark); color: #fff; font-size: .75rem; font-weight: 800; }
.wish-btn { position: absolute; top: 12px; left: 12px; z-index: 3; width: 42px; height: 42px; border-radius: 50%; border: none; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); color: #b9b2aa; font-size: 1.05rem; cursor: pointer; display: grid; place-items: center; transition: .3s var(--ease); box-shadow: 0 4px 14px rgba(0,0,0,.15); }
.wish-btn:hover { color: #ff4757; transform: scale(1.12); }
.wish-btn.active { color: #fff; background: #ff4757; }
.wish-btn.pop { animation: pop .4s var(--ease); }
@keyframes pop { 50% { transform: scale(1.45); } }

.product-details { padding: 10px 10px 12px; text-align: right; }
.p-top { display: flex; flex-direction: column; gap: 3px; margin-bottom: 12px; }
.p-title { font-size: .88rem; font-weight: 800; color: var(--text-dark); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-price { font-size: 1rem; font-weight: 900; color: var(--copper); white-space: nowrap; }
.p-price small { font-size: .72rem; font-weight: 700; color: var(--text-gray); }

/* محدد الكمية */
.buy-row { display: flex; gap: 10px; align-items: stretch; }
.card-qty-wrapper { display: flex; align-items: center; gap: 1px; background: var(--bg-light); border: 1px solid #eee4d9; border-radius: 50px; padding: 3px; }
.card-qty-btn { width: 26px; height: 26px; border: none; border-radius: 50%; background: #fff; color: var(--text-dark); font-size: .8rem; cursor: pointer; display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0,0,0,.08); transition: .25s var(--ease); }
.card-qty-btn:hover { background: var(--copper); color: #fff; transform: scale(1.08); }
.card-qty-btn:active { transform: scale(.88); }
.card-qty-val { min-width: 20px; text-align: center; font-weight: 900; font-size: .95rem; color: var(--text-dark); }
.add-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; border: none; cursor: pointer; font-family: inherit; font-weight: 800; font-size: .82rem; color: #fff; padding: 0 8px; border-radius: 50px; background: var(--text-dark); transition: .35s var(--ease); }
.add-btn:hover { background: var(--copper); box-shadow: 0 12px 26px rgba(200,129,65,.45); transform: translateY(-2px); }
.add-btn.done { background: #25D366; }

/* HEADER ICONS */
.header-actions { display: flex; align-items: center; gap: 20px; }
.cart-icon { font-size: 1.35rem; color: var(--text-dark); cursor: pointer; position: relative; transition: transform .25s var(--ease); }
.cart-icon:hover { color: var(--copper); }
.cart-badge { position: absolute; top: -8px; right: -10px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 20px; background: var(--copper); color: #fff; font-size: .72rem; font-weight: 800; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; }

/* DRAWERS */
.cart-overlay { position: fixed; inset: 0; background: rgba(20,12,5,.45); backdrop-filter: blur(5px); z-index: 10001; visibility: hidden; opacity: 0; transition: .4s; }
.cart-overlay.active { visibility: visible; opacity: 1; }
.cart-drawer { position: fixed; top: 12px; bottom: 12px; left: -460px; width: 410px; max-width: calc(100% - 24px); background: #fff; z-index: 10002; border-radius: 26px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.25); transition: left .5s var(--ease); }
.cart-drawer.active { left: 12px; }
.cart-header { padding: 22px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #f3eee8; }
.cart-header h3 { font-size: 1.25rem; font-weight: 900; color: var(--text-dark); }
#close-cart, #close-wishlist { width: 38px; height: 38px; border-radius: 50%; border: none; background: var(--bg-light); cursor: pointer; color: var(--text-gray); transition: .3s; }
#close-cart:hover, #close-wishlist:hover { background: var(--copper); color: #fff; transform: rotate(90deg); }
.cart-items { flex: 1; padding: 18px; overflow-y: auto; overflow-x: hidden; }
.cart-item { display: flex; gap: 14px; padding: 12px; margin-bottom: 12px; border-radius: var(--r-md); background: var(--bg-light); }
.cart-item img { width: 78px; height: 78px; object-fit: cover; border-radius: 12px; }
.cart-item-details { flex: 1; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; }
.cart-item-title { font-weight: 800; font-size: .92rem; color: var(--text-dark); margin: 0 0 3px; }
.cart-item-price { color: var(--copper); font-weight: 900; }
.cart-item-actions { display: flex; justify-content: space-between; align-items: center; }
.qty-controls { display: flex; align-items: center; background: #fff; border-radius: 30px; box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.qty-btn { background: none; border: none; padding: 4px 12px; font-weight: 800; cursor: pointer; border-radius: 30px; transition: .2s; }
.qty-btn:hover { background: var(--copper); color: #fff; }
.qty-val { padding: 0 6px; font-weight: 800; }
.remove-item { background: none; border: none; color: #ff4757; cursor: pointer; }
.cart-footer { padding: 20px; border-top: 1px solid #f3eee8; background: #fff; }

.promo-box { display: flex; gap: 8px; margin-bottom: 14px; }
.promo-box input { flex: 1; padding: 11px 16px; border: 1px solid #eadfd3; border-radius: 40px; outline: none; font-family: inherit; }
.promo-box input:focus { border-color: var(--copper); }
.promo-box button { padding: 0 22px; border: none; border-radius: 40px; background: var(--text-dark); color: #fff; font-weight: 800; cursor: pointer; transition: .3s; }
.promo-box button:hover { background: var(--copper); }
.summary-row { display: flex; justify-content: space-between; color: var(--text-gray); margin-bottom: 6px; }
.total-row { font-size: 1.25rem; font-weight: 900; color: var(--text-dark); margin-top: 10px; padding-top: 12px; border-top: 1px dashed #e6dccf; }
#checkout-btn { border-radius: 40px !important; padding: 14px; font-weight: 800; margin-top: 12px; width: 100%; border: none; background: var(--copper); color: #fff; cursor: pointer; }

/* CHECKOUT */
.checkout-content { background: #fff; padding: 32px 24px; border-radius: 26px; width: 95%; max-width: 500px; position: relative; text-align: right; max-height: 88vh; overflow-y: auto; overflow-x: hidden; box-sizing: border-box; }
#close-checkout { position: absolute; top: 14px; left: 18px; right: auto; color: var(--text-gray); font-size: 2rem; line-height: 1; cursor: pointer; transition: .3s; }
#close-checkout:hover { color: #ff4757; transform: rotate(90deg); }
.checkout-content .input-group label { position: relative; top: auto; right: auto; pointer-events: auto; font-size: 1rem; }
.payment-options { display: flex; gap: 12px; margin-top: 12px; width: 100%; }
.payment-radio { flex: 1; margin: 0; }
.payment-radio input { display: none; }
.pay-btn { display: flex; justify-content: center; align-items: center; gap: 8px; padding: 16px 8px; border: 2px solid #f0e8de; border-radius: var(--r-md); cursor: pointer; font-weight: 800; color: var(--text-gray); transition: .3s var(--ease); width: 100%; text-align: center; }
.payment-radio input:checked+.pay-btn { border-color: var(--copper); color: var(--copper); background: var(--copper-light); transform: translateY(-3px); box-shadow: 0 10px 24px rgba(200,129,65,.18); }
.checkout-input { width: 100%; padding: 13px 16px; border-radius: var(--r-md); border: 1px solid #eadfd3; font-family: inherit; font-size: 1rem; background: #fcfaf8; color: var(--text-dark); outline: none; box-sizing: border-box; transition: .3s; }
.checkout-input:focus { border-color: var(--copper); background: #fff; box-shadow: 0 0 0 4px rgba(200,129,65,.12); }
.payment-details-box { margin-top: 15px; padding: 16px; background: var(--copper-light); border: 1px dashed var(--copper); border-radius: var(--r-md); text-align: center; }
.secure-number { display: block; font-size: 1.4rem; color: var(--copper-dark); letter-spacing: 1px; user-select: all; }
.tech-support-banner { margin-top: 20px; padding: 14px; background: var(--bg-light); border-radius: var(--r-md); text-align: center; color: var(--text-gray); font-size: .92rem; }
.tech-support-banner i { color: var(--copper); margin-left: 5px; }
.tech-support-banner a { color: var(--text-dark); font-weight: 800; }

/* LIGHTBOX & TOAST */
.lightbox { display: none; position: fixed; z-index: 100000; inset: 0; background: rgba(15,9,4,.92); opacity: 0; transition: opacity .3s; backdrop-filter: blur(8px); }
.lightbox.show { display: flex; flex-direction: column; justify-content: center; align-items: center; opacity: 1; }
.lightbox-content { max-width: 92%; max-height: 82vh; border-radius: var(--r-md); object-fit: contain; animation: popIn .4s var(--ease); }
.lightbox-close { position: absolute; top: 18px; right: 26px; font-size: 2.4rem; color: #fff; cursor: pointer; line-height: 1; }
.fade-in-scale { animation: popIn .6s var(--ease) both; }
@keyframes popIn { from { opacity: 0; transform: scale(.95) translateY(18px); } to { opacity: 1; transform: none; } }
.toast { position: fixed; top: 96px; left: 50%; transform: translate(-50%,-20px); opacity: 0; z-index: 100001; background: var(--text-dark); color: #fff; padding: 13px 24px; border-radius: 40px; font-weight: 700; box-shadow: 0 14px 40px rgba(0,0,0,.3); transition: .4s var(--ease); max-width: 90%; text-align: center; }
.toast i { color: var(--copper); margin-left: 6px; }
.toast.show { opacity: 1; transform: translate(-50%,0); }

/* MOBILE BAR */
.mobile-bottom-bar { display: none; position: fixed; bottom: 12px; left: 12px; right: 12px; background: rgba(255,255,255,.92); backdrop-filter: blur(18px); border-radius: 26px; box-shadow: 0 12px 40px rgba(0,0,0,.18); z-index: 9999; padding: 10px 14px; }
.mobile-nav-list { display: flex; justify-content: space-around; list-style: none; margin: 0; padding: 0; }
.mobile-nav-list a, .mobile-nav-list .bottom-cart-btn { display: flex; flex-direction: column; align-items: center; color: var(--text-gray); font-size: .75rem; background: none; border: none; cursor: pointer; font-family: inherit; font-weight: 700; transition: .3s; }
.mobile-nav-list i { font-size: 1.25rem; margin-bottom: 4px; }
.mobile-nav-list a.active { color: var(--copper); }

/* ============================================== */
/* --- إصلاحات الموبايل (المشكلة اللي في الصورة) --- */
/* ============================================== */
@media (max-width: 768px) {
    .header-actions .cart-icon { display: none; }
    .mobile-bottom-bar { display: block; }
    body.shop-page { padding-bottom: 100px; }
    .shop-hero { padding: 30px 0 26px; }
    .hero-wrap { grid-template-columns: 1fr; gap: 22px; text-align: center; }
    .hero-copy p { margin: 0 auto 18px; font-size: .92rem; }
    .shop-hero h1 { font-size: 2.3rem; }
    .hero-cta { padding: 12px 26px; }
    
    /* إصلاح صندوق رحلة المنتج (الضمان والتوصيل) في الموبايل */
    .journey { 
        padding: 20px 10px; 
        margin: 0 auto; 
        width: 100%; 
        justify-content: center; 
    }
    .j-step { width: 85px; }
    .j-ico { width: 58px; height: 58px; font-size: 1.25rem; margin-bottom: 6px; }
    .j-step strong { font-size: 1.05rem; }
    .j-step small { font-size: 0.75rem; }
    .j-link { margin-top: 28px; min-width: 15px; }
    
    .sticky-filters-bar { padding: 8px 0; }
    
    /* تظبيط شريط البحث والترتيب للموبايل بحيث يملوا الشاشة بدون خروج */
    .filters-flex { 
        flex-direction: column; 
        align-items: stretch; 
        width: 100%; 
        gap: 12px;
    }
    
    .search-box { width: 100%; }
    .search-box input { width: 100%; }
    
    .sort-dropdown { 
        width: 100%; 
        justify-content: space-between; /* يخلي الأيقونة والنص والدروب داون مفرودين */
    }
    .sort-dropdown select { width: 100%; }
    
    /* شبكة المنتجات (عمودين) */
    .products-grid-premium { grid-template-columns: 1fr 1fr; gap: 12px; }
    .product-premium-card { border-radius: 20px; }
    .product-details { padding: 12px 10px 12px; }
    .p-top { flex-direction: column; gap: 4px; margin-bottom: 10px; }
    .p-title { font-size: .88rem; }
    .p-price { font-size: 1.05rem; }
    .buy-row { flex-direction: column; gap: 8px; }
    .card-qty-wrapper { justify-content: space-between; }
    .card-qty-btn { width: 30px; height: 30px; }
    .p-top { margin-bottom: 8px; }
    .add-btn { padding: 11px; font-size: .88rem; }
    .wish-btn { width: 36px; height: 36px; }
    
    .payment-options { flex-direction: column; }
    .cart-drawer { width: calc(100% - 24px); left: -110%; }
}

button, a, .pay-btn { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.search-box input, .checkout-input, .promo-box input, .sort-dropdown select { font-size: 16px; }
@media (hover: none) {
    .product-premium-card:hover { transform: none; box-shadow: var(--shadow-soft); }
    .product-premium-card:hover .product-img-wrap img { transform: none; }
}