/* ==========================================
   الحداد مول - Storefront CSS
   ========================================== */

:root {
    --primary: #DC2626;
    --primary-dark: #991B1B;
    --secondary: #0A0A0A;
    --gold: #D4AF37;
    --gold-light: #F4E4B0;
    --bg: #F9FAFB;
    --card-bg: #fff;
    --text: #1F2937;
    --text-light: #6B7280;
    --border: #E5E7EB;
    --radius: 12px;
    --shadow: 0 2px 8px rgba(0,0,0,.06);
    --shadow-lg: 0 8px 24px rgba(0,0,0,.12);
    --transition: .3s ease;
}

* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Tajawal','Segoe UI',sans-serif; background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased; line-height:1.6; }
a { text-decoration:none; color:inherit; }
img { max-width:100%; height:auto; }
.container { max-width:1280px; margin:0 auto; padding:0 20px; }

/* ---- Buttons ---- */
.btn { display:inline-flex; align-items:center; gap:6px; padding:10px 24px; border-radius:8px; font-weight:600; font-size:.95rem; cursor:pointer; border:none; transition:var(--transition); }
.btn-gold { background:linear-gradient(135deg,var(--gold),#c9a030); color:#fff; }
.btn-gold:hover { transform:translateY(-2px); box-shadow:0 4px 12px rgba(212,175,55,.4); }
.btn-primary-site { display:block; width:100%; padding:10px; border:none; border-radius:8px; background:var(--primary); color:#fff; font-weight:700; font-size:.9rem; cursor:pointer; transition:var(--transition); font-family:inherit; }
.btn-primary-site:hover { background:var(--primary-dark); }
.btn-outline { border:2px solid var(--primary); color:var(--primary); background:transparent; }
.btn-outline:hover { background:var(--primary); color:#fff; }

/* ---- Top Bar ---- */
.top-bar { background:var(--secondary); color:#fff; padding:8px 0; font-size:.85rem; }
.top-bar-content { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; }
.contact-info { display:flex; gap:20px; }
.contact-info span, .location { display:flex; align-items:center; gap:6px; }

/* ---- Header ---- */
.main-header { background:#fff; padding:16px 0; box-shadow:var(--shadow); position:sticky; top:0; z-index:100; }
.header-content { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.logo { display:flex; align-items:center; gap:12px; flex-shrink:0; }
.logo img { height:48px; width:48px; object-fit:contain; }
.logo-text h1 { font-size:1.5rem; font-weight:800; color:var(--primary); line-height:1.2; }
.logo-text p { font-size:.7rem; color:var(--gold); font-weight:700; letter-spacing:2px; }
.search-bar { flex:1; max-width:500px; }
.search-bar form { display:flex; background:#f3f4f6; border-radius:25px; overflow:hidden; border:2px solid transparent; transition:var(--transition); }
.search-bar form:focus-within { border-color:var(--primary); }
.search-bar input { flex:1; border:none; background:transparent; padding:10px 18px; font-size:.95rem; font-family:inherit; outline:none; }
.search-bar button { background:var(--primary); color:#fff; border:none; padding:0 18px; cursor:pointer; transition:var(--transition); }
.search-bar button:hover { background:var(--primary-dark); }
.header-actions { display:flex; align-items:center; gap:12px; }
.header-icon { width:42px; height:42px; border-radius:50%; background:#f3f4f6; display:flex; align-items:center; justify-content:center; cursor:pointer; position:relative; transition:var(--transition); }
.header-icon:hover { background:var(--primary); color:#fff; }
.cart-count { position:absolute; top:-4px; right:-4px; background:var(--primary); color:#fff; font-size:.7rem; width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; }
.user-menu { position:relative; }
.user-dropdown { display:none; position:absolute; top:calc(100% + 8px); left:0; background:#fff; border-radius:var(--radius); box-shadow:var(--shadow-lg); min-width:200px; z-index:200; overflow:hidden; }
.user-dropdown.show { display:block; }
.user-dropdown a { display:flex; align-items:center; gap:10px; padding:12px 16px; font-size:.9rem; transition:background .2s; }
.user-dropdown a:hover { background:#f9fafb; }

/* ---- Navigation ---- */
.main-nav { background:#fff; border-bottom:1px solid var(--border); }
.main-nav ul { display:flex; list-style:none; gap:0; justify-content:center; }
.main-nav li a { display:block; padding:12px 20px; font-weight:600; font-size:.95rem; color:var(--text); transition:var(--transition); }
.main-nav li a:hover, .main-nav li a.active { color:var(--primary); border-bottom:3px solid var(--primary); }

/* ---- Hero Slider ---- */
.hero-slider { position:relative; height:420px; overflow:hidden; background:linear-gradient(135deg,var(--primary-dark),var(--secondary)); }
.hero-slide { position:absolute; inset:0; opacity:0; transition:opacity .6s ease; display:flex; align-items:center; }
.hero-slide.active { opacity:1; }
.hero-slide img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-content { position:relative; z-index:2; color:#fff; max-width:600px; }
.hero-badge { display:inline-block; background:rgba(212,175,55,.9); color:#fff; padding:8px 20px; border-radius:25px; font-weight:700; font-size:.9rem; margin-bottom:16px; }
.hero-title { font-size:2.5rem; font-weight:900; line-height:1.3; margin-bottom:12px; text-shadow:0 2px 8px rgba(0,0,0,.3); }
.hero-subtitle { font-size:1.15rem; margin-bottom:24px; opacity:.9; }
.slider-dots { position:absolute; bottom:20px; left:50%; transform:translateX(-50%); display:flex; gap:8px; z-index:10; }
.slider-dot { width:12px; height:12px; border-radius:50%; background:rgba(255,255,255,.5); cursor:pointer; transition:var(--transition); }
.slider-dot.active { background:var(--gold); transform:scale(1.3); }

/* ---- Sections ---- */
.section-title { text-align:center; font-size:1.8rem; font-weight:800; margin-bottom:30px; position:relative; padding-bottom:12px; }
.section-title::after { content:''; position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:60px; height:4px; background:var(--primary); border-radius:2px; }
.categories-section, .products-section { padding:50px 0; }
.search-section { padding:40px 0; }
.search-info { margin-bottom:20px; }
.search-info h3 { font-size:1.3rem; }
.search-info p { color:var(--text-light); }

/* ---- Categories Grid ---- */
.categories-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px ,1fr)); gap:20px; }
.category-card { display:flex; flex-direction:column; align-items:center; padding:24px 12px; background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); transition:var(--transition); text-align:center; }
.category-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.category-icon { width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.8rem; margin-bottom:12px; }
.category-icon i { font-size:1.5rem; }
.category-name { font-size:.95rem; font-weight:700; }
.category-count { font-size:.8rem; color:var(--text-light); }

/* ---- Products Grid ---- */
.products-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:20px; }
.product-card { background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); transition:var(--transition); }
.product-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.product-image { position:relative; height:220px; overflow:hidden; background:#f9fafb; }
.product-image img { width:100%; height:100%; object-fit:cover; transition:transform .3s; }
.product-card:hover .product-image img { transform:scale(1.05); }
.discount-badge { position:absolute; top:10px; right:10px; background:var(--primary); color:#fff; padding:4px 10px; border-radius:15px; font-size:.8rem; font-weight:700; }
.new-badge { position:absolute; top:10px; left:10px; background:#10B981; color:#fff; padding:4px 10px; border-radius:15px; font-size:.8rem; font-weight:700; }
.product-info { padding:16px; }
.product-category { font-size:.8rem; color:var(--text-light); }
.product-name { font-size:1rem; font-weight:700; margin:6px 0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.product-description { font-size:.85rem; color:var(--text-light); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-bottom:8px; }
.product-rating { display:flex; align-items:center; gap:3px; margin-bottom:8px; font-size:.85rem; }
.product-rating span { color:var(--text-light); margin-right:4px; }
.product-price { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.old-price { text-decoration:line-through; color:var(--text-light); font-size:.9rem; }
.new-price { font-size:1.2rem; font-weight:800; color:var(--primary); }

/* ---- Empty State ---- */
.empty-state { text-align:center; padding:60px 20px; color:var(--text-light); }
.empty-state i { font-size:3rem; margin-bottom:16px; display:block; }
.empty-state h3 { font-size:1.2rem; margin-bottom:8px; color:var(--text); }

/* ---- Footer ---- */
.main-footer { background:var(--secondary); color:#ddd; padding:50px 0 0; margin-top:60px; }
.footer-content { display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:40px; }
.main-footer h3 { color:#fff; font-size:1.1rem; margin-bottom:16px; position:relative; padding-bottom:10px; }
.main-footer h3::after { content:''; position:absolute; bottom:0; right:0; width:40px; height:3px; background:var(--gold); border-radius:2px; }
.main-footer p { font-size:.9rem; line-height:1.8; }
.social-links { display:flex; gap:10px; margin-top:12px; }
.social-links a { width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; color:#fff; transition:var(--transition); }
.social-links a:hover { background:var(--gold); transform:scale(1.1); }
.main-footer ul { list-style:none; }
.main-footer ul li { margin-bottom:10px; }
.main-footer ul li a { color:#bbb; font-size:.9rem; transition:color .2s; }
.main-footer ul li a:hover { color:var(--gold); padding-right:6px; }
.contact-list li { display:flex; align-items:center; gap:10px; }
.contact-list li i { color:var(--gold); width:20px; text-align:center; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.1); margin-top:40px; padding:20px 0; text-align:center; font-size:.85rem; color:#888; }

.whatsapp-float { position:fixed; bottom:24px; left:24px; width:56px; height:56px; background:#25D366; color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.8rem; box-shadow:0 4px 12px rgba(37,211,102,.4); z-index:999; transition:var(--transition); }
.whatsapp-float:hover { transform:scale(1.1); }

/* ---- Shop Page ---- */
.shop-layout { display:grid; grid-template-columns:260px 1fr; gap:30px; padding:40px 0; }
.shop-sidebar { background:#fff; border-radius:var(--radius); padding:20px; box-shadow:var(--shadow); height:fit-content; position:sticky; top:90px; }
.filter-section { margin-bottom:24px; }
.filter-section h3 { font-size:1rem; font-weight:700; margin-bottom:12px; padding-bottom:8px; border-bottom:2px solid var(--border); }
.filter-section ul { list-style:none; }
.filter-section ul li a { display:flex; justify-content:space-between; padding:8px 0; color:var(--text); font-size:.9rem; transition:color .2s; }
.filter-section ul li a:hover, .filter-section ul li a.active { color:var(--primary); font-weight:600; }
.filter-section ul li .count { background:#f3f4f6; padding:2px 8px; border-radius:10px; font-size:.8rem; color:var(--text-light); }
.price-filter { display:flex; gap:10px; align-items:center; }
.price-filter input { width:100%; padding:8px; border:1px solid var(--border); border-radius:8px; font-family:inherit; font-size:.9rem; }
.shop-content .top-bar-shop { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; flex-wrap:wrap; gap:12px; }
.top-bar-shop .results-count { font-size:.95rem; color:var(--text-light); }
.top-bar-shop select { padding:8px 16px; border:1px solid var(--border); border-radius:8px; font-family:inherit; font-size:.9rem; background:#fff; }
.pagination { display:flex; justify-content:center; gap:6px; margin-top:40px; }
.pagination a, .pagination span { display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:8px; font-weight:600; transition:var(--transition); }
.pagination a { background:#fff; border:1px solid var(--border); color:var(--text); }
.pagination a:hover { border-color:var(--primary); color:var(--primary); }
.pagination .current { background:var(--primary); color:#fff; }

/* ---- Product Detail ---- */
.product-detail { padding:40px 0; }
.product-detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:40px; background:#fff; border-radius:var(--radius); padding:30px; box-shadow:var(--shadow); }
.gallery { display:flex; flex-direction:column; gap:12px; }
.gallery-main { border-radius:var(--radius); overflow:hidden; height:450px; background:#f9fafb; }
.gallery-main img { width:100%; height:100%; object-fit:contain; }
.gallery-thumbs { display:flex; gap:8px; overflow-x:auto; }
.gallery-thumbs img { width:80px; height:80px; object-fit:cover; border-radius:8px; cursor:pointer; border:2px solid transparent; transition:var(--transition); }
.gallery-thumbs img:hover, .gallery-thumbs img.active { border-color:var(--primary); }
.product-detail-info h1 { font-size:1.8rem; font-weight:800; margin-bottom:12px; }
.detail-category { color:var(--text-light); font-size:.9rem; margin-bottom:8px; }
.detail-price { font-size:2rem; font-weight:800; color:var(--primary); margin:16px 0; }
.detail-price .old { font-size:1.2rem; text-decoration:line-through; color:var(--text-light); margin-right:12px; }
.detail-description { color:var(--text-light); line-height:1.8; margin-bottom:20px; }
.quantity-selector { display:flex; align-items:center; gap:0; margin-bottom:20px; }
.quantity-selector button { width:40px; height:40px; border:1px solid var(--border); background:#fff; cursor:pointer; font-size:1.2rem; display:flex; align-items:center; justify-content:center; transition:var(--transition); }
.quantity-selector button:hover { background:var(--primary); color:#fff; border-color:var(--primary); }
.quantity-selector button:first-child { border-radius:0 8px 8px 0; }
.quantity-selector button:last-child { border-radius:8px 0 0 8px; }
.quantity-selector input { width:60px; height:40px; text-align:center; border:1px solid var(--border); border-right:none; border-left:none; font-size:1rem; font-weight:700; font-family:inherit; }
.detail-actions { display:flex; gap:12px; margin-bottom:20px; }
.detail-actions .btn { flex:1; justify-content:center; padding:14px; font-size:1rem; }
.product-meta { border-top:1px solid var(--border); padding-top:16px; font-size:.9rem; color:var(--text-light); }
.product-meta span { display:block; margin-bottom:6px; }
.reviews-section { margin-top:40px; background:#fff; border-radius:var(--radius); padding:30px; box-shadow:var(--shadow); }
.review-item { border-bottom:1px solid var(--border); padding:16px 0; }
.review-item:last-child { border:none; }
.review-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.review-header strong { font-size:.95rem; }
.review-date { font-size:.8rem; color:var(--text-light); }
.review-stars { color:#F59E0B; margin-bottom:6px; }

/* ---- Cart ---- */
.cart-page { padding:40px 0; }
.cart-table { width:100%; background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.cart-table th, .cart-table td { padding:16px; text-align:right; }
.cart-table thead { background:#f9fafb; }
.cart-table th { font-weight:700; font-size:.9rem; color:var(--text-light); }
.cart-item-img { width:70px; height:70px; object-fit:cover; border-radius:8px; }
.cart-item-name { font-weight:700; font-size:.95rem; }
.cart-remove { background:none; border:none; color:var(--primary); cursor:pointer; font-size:1.1rem; }
.cart-summary { background:#fff; border-radius:var(--radius); padding:24px; box-shadow:var(--shadow); margin-top:20px; max-width:400px; margin-left:auto; }
.cart-summary-row { display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--border); }
.cart-summary-row:last-child { border:none; }
.cart-summary-total { font-size:1.3rem; font-weight:800; color:var(--primary); }
.coupon-form { display:flex; gap:8px; margin-bottom:16px; }
.coupon-form input { flex:1; padding:10px; border:1px solid var(--border); border-radius:8px; font-family:inherit; }
.coupon-form button { padding:10px 20px; background:var(--gold); color:#fff; border:none; border-radius:8px; font-weight:700; cursor:pointer; font-family:inherit; }

/* ---- Checkout ---- */
.checkout-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:30px; padding:40px 0; }
.checkout-section { background:#fff; border-radius:var(--radius); padding:24px; box-shadow:var(--shadow); margin-bottom:20px; }
.checkout-section h2 { font-size:1.2rem; margin-bottom:16px; padding-bottom:10px; border-bottom:2px solid var(--border); }
.form-group { margin-bottom:16px; }
.form-group label { display:block; font-weight:600; font-size:.9rem; margin-bottom:6px; }
.form-group input, .form-group select, .form-group textarea { width:100%; padding:10px 14px; border:1px solid var(--border); border-radius:8px; font-family:inherit; font-size:.95rem; transition:border-color .2s; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color:var(--primary); outline:none; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.shipping-option, .payment-option { display:flex; align-items:center; gap:12px; padding:14px; border:2px solid var(--border); border-radius:var(--radius); cursor:pointer; transition:var(--transition); margin-bottom:10px; }
.shipping-option:hover, .payment-option:hover, .shipping-option.selected, .payment-option.selected { border-color:var(--primary); background:#FEF2F2; }
.shipping-option input, .payment-option input { accent-color:var(--primary); }
.order-summary { position:sticky; top:90px; }
.order-item { display:flex; gap:12px; padding:10px 0; border-bottom:1px solid var(--border); }
.order-item img { width:50px; height:50px; border-radius:8px; object-fit:cover; }

/* ---- Auth ---- */
.auth-page { display:flex; align-items:center; justify-content:center; min-height:70vh; padding:40px 20px; }
.auth-box { background:#fff; border-radius:var(--radius); padding:40px; box-shadow:var(--shadow-lg); width:100%; max-width:440px; }
.auth-box h2 { font-size:1.5rem; margin-bottom:8px; }
.auth-box p { color:var(--text-light); margin-bottom:24px; }
.auth-tabs { display:flex; gap:0; margin-bottom:24px; }
.auth-tabs a { flex:1; text-align:center; padding:12px; font-weight:700; border-bottom:3px solid var(--border); color:var(--text-light); transition:var(--transition); }
.auth-tabs a.active { border-color:var(--primary); color:var(--primary); }
.auth-divider { text-align:center; margin:20px 0; color:var(--text-light); position:relative; }
.auth-divider::before, .auth-divider::after { content:''; position:absolute; top:50%; width:40%; height:1px; background:var(--border); }
.auth-divider::before { right:0; }
.auth-divider::after { left:0; }

/* ---- Account ---- */
.account-layout { display:grid; grid-template-columns:240px 1fr; gap:30px; padding:40px 0; }
.account-sidebar { background:#fff; border-radius:var(--radius); padding:20px; box-shadow:var(--shadow); height:fit-content; }
.account-sidebar .user-info { text-align:center; padding-bottom:16px; border-bottom:1px solid var(--border); margin-bottom:16px; }
.account-sidebar .user-info i { font-size:3rem; color:var(--primary); margin-bottom:8px; display:block; }
.account-sidebar ul { list-style:none; }
.account-sidebar ul li a { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:8px; font-size:.9rem; font-weight:600; transition:var(--transition); }
.account-sidebar ul li a:hover, .account-sidebar ul li a.active { background:#FEF2F2; color:var(--primary); }
.account-content { background:#fff; border-radius:var(--radius); padding:24px; box-shadow:var(--shadow); }
.order-status-badge { display:inline-block; padding:4px 12px; border-radius:15px; font-size:.8rem; font-weight:700; }
.status-pending { background:#FEF3C7; color:#92400E; }
.status-processing { background:#DBEAFE; color:#1E40AF; }
.status-shipped { background:#E0E7FF; color:#3730A3; }
.status-delivered { background:#D1FAE5; color:#065F46; }
.status-cancelled { background:#FEE2E2; color:#991B1B; }

/* ---- CMS Page ---- */
.page-content { max-width:800px; margin:0 auto; padding:50px 20px; }
.page-content h1 { font-size:2rem; margin-bottom:20px; }
.page-content .content { line-height:2; font-size:1.05rem; }
.page-content .content h2, .page-content .content h3 { margin:24px 0 12px; }
.page-content .content p { margin-bottom:16px; }
.page-content .content ul, .page-content .content ol { margin:12px 0 12px 24px; }

/* ---- Breadcrumb ---- */
.breadcrumb { padding:12px 0; font-size:.9rem; color:var(--text-light); }
.breadcrumb a { color:var(--text-light); }
.breadcrumb a:hover { color:var(--primary); }
.breadcrumb .separator { margin:0 8px; }

/* ---- Toast ---- */
.toast-container { position:fixed; top:20px; left:50%; transform:translateX(-50%); z-index:9999; display:flex; flex-direction:column; gap:8px; }
.toast { padding:14px 24px; border-radius:var(--radius); color:#fff; font-weight:600; font-size:.95rem; box-shadow:var(--shadow-lg); animation:toastIn .4s ease; }
.toast.success { background:#059669; }
.toast.error { background:var(--primary); }
.toast.info { background:#2563EB; }
@keyframes toastIn { from { opacity:0; transform:translateY(-20px); } to { opacity:1; transform:translateY(0); } }

/* ---- Responsive ---- */
@media (max-width:992px) {
    .shop-layout { grid-template-columns:1fr; }
    .shop-sidebar { display:none; }
    .checkout-grid { grid-template-columns:1fr; }
    .account-layout { grid-template-columns:1fr; }
    .product-detail-grid { grid-template-columns:1fr; }
}
@media (max-width:768px) {
    .top-bar { display:none; }
    .header-content { flex-wrap:wrap; }
    .search-bar { order:3; max-width:100%; flex-basis:100%; }
    .hero-slider { height:280px; }
    .hero-title { font-size:1.6rem; }
    .categories-grid { grid-template-columns:repeat(auto-fill, minmax(100px, 1fr)); gap:12px; }
    .products-grid { grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:12px; }
    .main-nav ul { overflow-x:auto; justify-content:flex-start; }
    .main-nav li a { padding:10px 14px; font-size:.85rem; white-space:nowrap; }
    .product-image { height:160px; }
    .gallery-main { height:300px; }
    .cart-table { font-size:.85rem; }
    .cart-table th:nth-child(4), .cart-table td:nth-child(4) { display:none; }
}
@media (max-width:480px) {
    .container { padding:0 12px; }
    .categories-grid { grid-template-columns:repeat(3, 1fr); }
    .products-grid { grid-template-columns:repeat(2, 1fr); gap:8px; }
    .product-info { padding:10px; }
    .product-name { font-size:.85rem; }
    .new-price { font-size:1rem; }
    .btn-primary-site { padding:8px; font-size:.8rem; }
}