/* ===================== ROOT VARIABLES ===================== */ :root { --primary: #0f766e; --primary-dark: #0b5c56; --primary-light: #5eead4; --accent-warm: #ff6b5b; --cta-bright: #ff6b5b; --cta-bright-hover: #e5543f; --secondary: #475569; --success: #28a745; --danger: #dc3545; --warning: #ffc107; --light: #f5f5f5; --dark: #1a1a1a; --gray: #999; --gray-light: #e8e8e8; --border-radius: 8px; --transition: all 0.3s ease; } /* ===================== RESET & BASE ===================== */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; /* Some mobile browsers (notably iOS Safari) attach horizontal rubber-band scrolling to 's own overflow rather than 's, so body's overflow-x: hidden alone doesn't always stop it. `clip` (not `hidden`) on purpose: `hidden`/`auto`/`scroll` all implicitly turn this into a scroll container (per the CSS overflow spec, setting overflow-x alone forces overflow-y: auto too), which breaks `position: sticky` for every descendant — including the mobile header. `clip` prevents the same overflow without creating that container. */ overflow-x: clip; max-width: 100%; } body { font-family: 'Tajawal', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 15px; line-height: 1.6; color: #333; background-color: #fff; text-align: start; font-weight: 400; overflow-x: clip; max-width: 100%; } /* Directional chevrons (menu/footer "go to" arrows, slider prev/next) are authored for RTL reading direction. Mirror them in LTR so they still point the way content actually flows, instead of pointing backwards. */ [dir="ltr"] .fa-chevron-left, [dir="ltr"] .fa-chevron-right { transform: scaleX(-1); } /* ===================== SITE HEADER (Two-Row) ===================== */ .site-header { background: white; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); } /* --- Row 1: search | logo --- */ .header-top { border-bottom: 1px solid #f0f0f0; padding: 0; } .header-top-grid { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; max-width: 2400px; margin-inline: auto; } .header-top-grid .hero-slider { flex: 1 1 auto; min-width: 0; aspect-ratio: 2400 / 160; } .header-search { position: relative; } .header-search .input-group { width: 100%; } .header-search-results { display: none; position: absolute; top: calc(100% + 8px); inset-inline-start: 0; inset-inline-end: 0; background: #fff; border: 1px solid #e8e8e8; border-radius: 10px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15); z-index: 1070; overflow: hidden; } .header-search-results.show { display: block; } .quick-search-list { list-style: none; margin: 0; padding: 8px 0; max-height: 360px; overflow-y: auto; } .quick-search-item { display: flex; align-items: center; gap: 12px; padding: 8px 16px; text-decoration: none; color: inherit; transition: var(--transition); } .quick-search-item:hover { background: #f5f5f5; } .quick-search-item img { width: 42px; height: 42px; object-fit: cover; border-radius: 6px; background: #f5f5f5; flex-shrink: 0; } .quick-search-item-info { display: flex; flex-direction: column; min-width: 0; gap: 2px; } .quick-search-item-name { font-size: 13px; font-weight: 500; color: #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .quick-search-item-price { font-size: 12px; color: var(--primary); font-weight: 600; } .quick-search-viewall { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px; font-size: 13px; font-weight: 600; color: var(--primary); text-decoration: none; border-top: 1px solid #f0f0f0; background: #fafafa; } .quick-search-viewall:hover { background: #f0f0f0; } .quick-search-empty { padding: 20px; text-align: center; color: #999; font-size: 13px; } .header-search .form-control { border: 1px solid #e8e8e8; border-inline-end: none; border-start-start-radius: 6px; border-end-start-radius: 6px; border-start-end-radius: 0; border-end-end-radius: 0; padding: 10px 16px; font-size: 14px; } .header-search .btn { background: #f5f5f5; border: 1px solid #e8e8e8; border-inline-start: none; border-start-end-radius: 6px; border-end-end-radius: 6px; border-start-start-radius: 0; border-end-start-radius: 0; color: #666; padding: 10px 16px; } .header-search .form-control:focus { border-color: var(--primary); box-shadow: none; } /* ===================== WHY WARAQAN ===================== */ .why-waraqan { background: radial-gradient(120% 160% at 8% 15%, #123b34 0%, #0b2420 55%, #081f1b 100%); margin-top: 0; margin-bottom: 0; color: #fff; /* full-bleed: break out of .container-main to span the full viewport width */ width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; } .why-waraqan-inner { position: relative; z-index: 1; max-width: 1320px; margin-inline: auto; padding: 60px 40px 60px; } .why-waraqan-label { display: block; color: #ffd447; font-weight: 700; font-size: 15px; margin-bottom: 12px; } .why-waraqan-headline { font-size: 34px; font-weight: 700; line-height: 1.5; max-width: 900px; margin-inline-end: auto; color: #fff; } .why-waraqan-divider { margin-top: 28px; margin-bottom: 36px; height: 16px; background-image: repeating-linear-gradient( to left, rgba(255, 255, 255, 0.28) 0, rgba(255, 255, 255, 0.28) 2px, transparent 2px, transparent 16px ); } .why-waraqan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .why-waraqan-card { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 14px; padding: 28px 24px; } .why-waraqan-card i { font-size: 26px; color: #ffd447; margin-bottom: 20px; display: block; } .why-waraqan-card h3 { font-size: 17px; font-weight: 700; color: #fff; margin-bottom: 10px; } .why-waraqan-card p { font-size: 14px; line-height: 1.7; color: #b9c7c3; margin: 0; } @media (max-width: 991px) { .why-waraqan-grid { grid-template-columns: 1fr; } .why-waraqan-headline { font-size: 26px; } } @media (max-width: 576px) { .why-waraqan-inner { padding: 40px 20px; } } .promo-banner { display: block; border-radius: var(--border-radius); overflow: hidden; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); transition: transform 0.25s ease, box-shadow 0.25s ease; } .promo-banner:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16); } .promo-banner-img { display: block; width: 100%; height: auto; aspect-ratio: 1600 / 220; } .header-logo { display: flex; flex-direction: row; align-items: center; gap: 10px; text-decoration: none; white-space: nowrap; color: var(--dark); } .header-logo-img { width: 50px; height: 50px; object-fit: contain; } .header-logo-text { display: flex; flex-direction: column; line-height: 1.3; } .header-logo-text strong { font-size: 17px; font-weight: 700; } .header-logo-text small { font-size: 12px; color: var(--gray); font-weight: 400; } /* --- Rows 2 & 3 stick together to the viewport while scrolling --- z-index raised above Bootstrap's default .sticky-top (1020) so the header (and dropdowns/previews nested inside it) always paints above other sticky elements on the page, like the cart page's order-summary sidebar. */ .header-sticky { background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); z-index: 1030; } /* --- Row 2: logo | search | utils --- */ .header-brand { border-bottom: 1px solid #f0f0f0; padding: 14px 0; } .header-brand-flex { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; } .header-brand-flex .header-search { flex: 1 1 auto; max-width: 640px; } @media (max-width: 767px) { .header-brand-flex { flex-wrap: wrap; } .header-brand-flex .header-search { order: 3; flex: 1 1 100%; } } /* --- Row 3: categories --- */ .header-bottom { background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); } .header-bottom-flex { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; gap: 1rem; position: relative; } /* Desktop uses the same teal identity as the compact mobile header while keeping content surfaces and dropdown panels white for readability. */ @media (min-width: 992px) { .header-sticky { background: var(--primary-dark); box-shadow: 0 5px 18px rgba(6, 78, 75, 0.22); } .header-brand { background: linear-gradient(155deg, var(--primary-light) 0%, var(--primary) 45%, var(--primary-dark) 100%); border-bottom-color: rgba(255, 255, 255, 0.18); } .header-bottom { background: linear-gradient(90deg, var(--primary-dark), var(--primary)); box-shadow: none; } .header-brand .header-logo, .header-brand .header-logo-text strong, .header-brand .nav-utils li > a, .header-bottom .nav-categories li > a { color: #fff; } .header-brand .header-logo-text small { color: rgba(255, 255, 255, 0.82); } .header-brand .nav-utils li > a:hover, .header-bottom .nav-categories li > a:hover { color: #d8fff8; } .header-brand .header-search .form-control { background: rgba(255, 255, 255, 0.96); border-color: rgba(255, 255, 255, 0.62); } .header-brand .header-search .btn { background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.62); color: #fff; } .header-brand .cart-link, .header-brand .wishlist-link { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.55); } .header-brand .cart-link i, .header-brand .wishlist-link i { color: #fff; } .header-bottom .all-categories-btn { border-inline-end-color: rgba(255, 255, 255, 0.35); } body { background: radial-gradient(circle at 8% 7%, rgba(94, 234, 212, 0.22), transparent 28%), radial-gradient(circle at 92% 22%, rgba(20, 184, 166, 0.13), transparent 30%), linear-gradient(180deg, #eafaf7 0%, #f7fcfb 42%, #eef8f6 100%); background-attachment: fixed; } .container-main .card, .container-main .product-card, .container-main .filter-sidebar, .container-main .category-card { background: rgba(255, 255, 255, 0.96); border-color: rgba(15, 118, 110, 0.16); box-shadow: 0 8px 24px rgba(15, 118, 110, 0.08); } .container-main .product-card:hover, .container-main .card:hover { border-color: rgba(15, 118, 110, 0.3); box-shadow: 0 12px 30px rgba(15, 118, 110, 0.14); } .container-main .page-title, .container-main .section-title, .container-main h1, .container-main h2 { color: #075f5b; } .container-main .breadcrumb { background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(15, 118, 110, 0.12); border-radius: 10px; padding: 10px 14px; } .container-main .form-control, .container-main .form-select { border-color: rgba(15, 118, 110, 0.24); background-color: rgba(255, 255, 255, 0.96); } .container-main .form-control:focus, .container-main .form-select:focus { border-color: var(--primary); box-shadow: 0 0 0 0.2rem rgba(15, 118, 110, 0.13); } .container-main .pagination .page-link { color: var(--primary-dark); border-color: rgba(15, 118, 110, 0.2); background: rgba(255, 255, 255, 0.94); } .container-main .pagination .active .page-link, .container-main .pagination .page-link:hover { color: #fff; background: var(--primary); border-color: var(--primary); } .container-main.home-main { padding-top: 0; } .medical-offers-slider.d-lg-block { width: 100vw; max-width: 100vw; height: auto; aspect-ratio: 2208 / 480; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; margin-top: 0; border-radius: 0; box-shadow: none; } .medical-offers-slider.d-lg-block .hero-slide-img { width: 100%; max-width: 100%; object-fit: contain; object-position: center; } } .nav-categories, .nav-utils { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; gap: 1.5rem; flex-wrap: nowrap; } .nav-categories { overflow-x: auto; overflow-y: visible; scrollbar-width: none; } .nav-categories::-webkit-scrollbar { display: none; } .nav-categories li a, .nav-utils li > a { color: #333; text-decoration: none; font-size: 14px; font-weight: 500; white-space: nowrap; display: flex; align-items: center; gap: 6px; transition: var(--transition); } .nav-categories li a:hover, .nav-utils li > a:hover { color: var(--primary); opacity: 1; } .nav-featured-category { flex-shrink: 0; align-items: center; gap: 6px; color: #333; text-decoration: none; font-size: 14px; font-weight: 500; white-space: nowrap; transition: var(--transition); } .nav-featured-category:hover { color: var(--primary); } .all-categories-btn { font-weight: 600 !important; padding-inline-end: 1.5rem; border-inline-end: 1px solid #e8e8e8; margin-inline-end: 0.25rem; } .all-categories-btn::after { display: none; } /* ===================== MEGA MENU ===================== */ .mega-menu-wrapper { position: relative; } .mega-menu { display: none; position: absolute; inset-inline-start: 0; top: 100%; width: 860px; max-width: calc(100vw - 32px); background: #fff; border: 1px solid #e8e8e8; border-radius: 0 0 12px 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12); z-index: 1050; overflow: hidden; } .mega-menu.show { display: flex; } .mega-menu-list { flex: 0 0 260px; border-inline-end: 1px solid #e8e8e8; background: #fafafa; padding: 10px 0; max-height: 480px; overflow-y: auto; } .mega-menu-list-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 20px; font-size: 14px; font-weight: 500; color: #333; cursor: pointer; transition: var(--transition); border-inline-start: 3px solid transparent; } .mega-menu-list-item span { display: flex; align-items: center; gap: 10px; } .mega-menu-list-item .mega-menu-arrow { font-size: 11px; color: #ccc; } .mega-menu-list-item:hover, .mega-menu-list-item.active { background: #fff; color: var(--primary); border-inline-start-color: var(--primary); } .mega-menu-panels { flex: 1; padding: 24px; min-width: 0; } .mega-menu-panel { display: none; } .mega-menu-panel.active { display: block; } .mega-menu-panel-header { margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid #f0f0f0; } .mega-menu-panel-header a { font-weight: 600; font-size: 15px; color: var(--primary); text-decoration: none; display: flex; align-items: center; gap: 8px; } .mega-menu-panel-header a:hover { text-decoration: underline; } .mega-menu-panel-columns { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 24px; } .mega-menu-sub-link { display: flex; align-items: center; gap: 8px; color: #555; text-decoration: none; font-size: 14px; padding: 6px 0; transition: var(--transition); } .mega-menu-sub-link i { font-size: 10px; color: #bbb; } .mega-menu-sub-link:hover { color: var(--primary); padding-inline-start: 4px; } @media (max-width: 991px) { .mega-menu-wrapper { display: none; } } /* ===================== CART PREVIEW (hover dropdown) ===================== */ .cart-preview-wrapper { position: relative; } .cart-preview { display: none; position: absolute; top: 100%; inset-inline-end: 0; margin-top: 12px; width: 380px; max-width: 90vw; max-height: 75vh; overflow-y: auto; background: #fff; border: 1px solid #e8e8e8; border-radius: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15); padding: 20px; z-index: 1060; } .cart-preview.show { display: block; } .cart-drawer-items { display: flex; flex-direction: column; gap: 16px; margin-bottom: 20px; } .cart-drawer-item { display: flex; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid #f0f0f0; } .cart-drawer-item img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; flex-shrink: 0; background: #f5f5f5; } .cart-drawer-item-info { flex: 1; min-width: 0; } .cart-drawer-item-name { display: block; font-size: 14px; font-weight: 600; color: #000; text-decoration: none; margin-bottom: 2px; } .cart-drawer-item-price { font-size: 13px; color: #666; } .cart-drawer-item .cart-qty-form input { width: 70px; } .cart-drawer-summary { border-top: 1px solid #e8e8e8; padding-top: 16px; } .cart-drawer-empty { text-align: center; padding: 60px 0; color: #999; } .cart-drawer-empty i { font-size: 56px; margin-bottom: 1rem; display: block; color: #ddd; } /* ===================== TAGS ===================== */ .tag-cloud { display: flex; flex-wrap: wrap; gap: 10px; } .tag-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; background: #fff; border: 1px solid #e8e8e8; border-radius: 20px; color: var(--primary-dark); font-size: 0.9rem; font-weight: 600; text-decoration: none; transition: var(--transition); } .tag-pill:hover { background: var(--primary); border-color: var(--primary); color: #fff; } .tag-pill-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--light); color: #666; font-size: 0.75rem; } .tag-pill:hover .tag-pill-count { background: rgba(255, 255, 255, 0.25); color: #fff; } .product-tags { display: flex; flex-wrap: wrap; gap: 8px; } .tag-pill-sm { padding: 4px 12px; font-size: 0.8rem; font-weight: 500; } .nav-utils { gap: 1.25rem; } .nav-utils .dropdown-toggle::after { display: none; } .cart-link, .wishlist-link { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 2px solid var(--primary-dark); border-radius: 12px; background: #fff; } .cart-link i, .wishlist-link i { font-size: 18px; color: var(--primary-dark); } .cart-link .badge, .wishlist-link .badge { position: absolute; top: -9px; inset-inline-start: -9px; inset-inline-end: auto; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; font-size: 11px; font-weight: 700; line-height: 1; border-radius: 50%; border: 2px solid #fff; background: #7a1128; } .cart-link .badge.badge-pulse, .wishlist-link .badge.badge-pulse { animation: badgePop 0.4s ease; } @keyframes badgePop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } } .btn-register-pill { background: var(--accent-warm); color: white !important; padding: 6px 16px; border-radius: 20px; } .btn-register-pill:hover { background: #a8563a; opacity: 1 !important; } .dropdown-menu { border: 1px solid #e8e8e8; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); border-radius: 8px; font-size: 14px; } .dropdown-item { padding: 8px 16px; } .dropdown-item:active, .dropdown-item.active { background: #f5f5f5; color: var(--primary); } .header-bottom .navbar-toggler { border: 1px solid #e8e8e8; padding: 6px 10px; } #mobileNav { border-top: 1px solid #f0f0f0; max-height: calc(100vh - 120px); overflow-y: auto; } #mobileNav a { color: #333; text-decoration: none; font-size: 14px; } .mobile-nav-list > li > a { display: block; padding: 8px 4px; } .mobile-nav-section-label { font-size: 11px; font-weight: 700; color: var(--gray); text-transform: uppercase; letter-spacing: 0.03em; padding: 10px 4px 4px; } .mobile-nav-category-row { display: flex; align-items: center; } .mobile-nav-category-link { flex: 1 1 auto; display: block; padding: 8px 4px; } .mobile-nav-expand-btn { flex: 0 0 auto; border: 0; background: none; color: var(--gray); padding: 8px 10px; font-size: 12px; line-height: 1; } .mobile-nav-expand-btn i { transition: transform 0.2s ease; } .mobile-nav-expand-btn[aria-expanded="true"] i { transform: rotate(180deg); color: var(--primary); } .mobile-nav-subcategories { display: none; } .mobile-nav-subcategories.is-open { display: block; } .mobile-nav-subcategories ul { padding-inline-start: 28px; border-inline-start: 2px solid var(--gray-light); margin-inline-start: 12px; } .mobile-nav-subcategories li a { display: block; padding: 7px 4px; font-size: 13px; color: #555; } /* --- Responsive --- */ @media (max-width: 991px) { .nav-categories { display: none; } .header-bottom-flex { justify-content: space-between; } /* Stick the hero slider directly to the compact mobile header, no visible seam between them. */ .header-top { border-bottom: 0; padding-bottom: 0; } .mobile-header { border-bottom: 0; } .header-top-grid { flex-wrap: wrap; } .header-top-grid .hero-slider { order: 3; flex: 1 1 100%; aspect-ratio: 1080 / 160; } } @media (max-width: 576px) { .header-logo-img { width: 48px; height: 48px; } .header-search .form-control, .header-search .btn { padding: 8px 12px; font-size: 13px; } } /* ===================== CONTAINER & MAIN ===================== */ .container-main { padding: 40px 0 0; min-height: 80vh; } /* ===================== BUTTONS ===================== */ .btn { border-radius: var(--border-radius); font-weight: 500; padding: 12px 24px; transition: var(--transition); border: none; font-size: 14px; text-transform: none; } .btn-primary { background: var(--primary); color: white; } .btn-primary:hover { background: var(--primary-dark); transform: none; box-shadow: none; } .btn-primary:active { background: var(--primary-dark); } .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; } .btn-secondary { background: #666; color: white; } .btn-secondary:hover { background: #333; transform: none; } .btn-outline-primary { border: 1px solid var(--primary); color: var(--primary); background: white; } .btn-outline-primary:hover { background: var(--primary); border-color: var(--primary); color: white; } .btn-added.btn-outline-primary, .btn-added.btn-outline-primary:hover { background: var(--success); border-color: var(--success); color: white; } .btn-outline-secondary { border: 1px solid #e8e8e8; color: #666; } .btn-outline-secondary:hover { background: #f5f5f5; border-color: #666; color: #666; } .btn-lg { padding: 16px 32px; font-size: 16px; } .btn-sm { padding: 8px 16px; font-size: 14px; } .btn i { margin-inline-end: 0.5rem; } /* ===================== TYPOGRAPHY ===================== */ h1, h2, h3, h4, h5, h6 { font-weight: 600; line-height: 1.2; margin-bottom: 1rem; color: #000; } .page-title { display: flex; align-items: center; gap: 0; color: #173f3b; } /* Checkout map: this lives in the global stylesheet because hx-boost keeps the current when it navigates from cart to checkout. */ .address-map-frame { display: block; width: 100%; height: 330px; max-width: 100%; border: 0; border-radius: .5rem; background: #f1f5f9; } @media (max-width: 575.98px) { .address-map-frame { height: 290px; border-radius: .375rem; } #addressMapFrame { min-width: 0; } } .page-title-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(155deg, color-mix(in srgb, var(--primary) 20%, white), color-mix(in srgb, var(--primary) 6%, white)); box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.8), 0 2px 6px rgba(0, 0, 0, 0.06); color: var(--primary); font-size: 19px; flex-shrink: 0; } /* The breadcrumb identifies the page; title icons add visual noise. */ .page-title > i, .page-title-icon { display: none; } h1 { font-size: 2.5rem; font-weight: 700; } h2 { font-size: 2rem; font-weight: 700; } h3 { font-size: 1.5rem; font-weight: 600; } h4 { font-size: 1.25rem; font-weight: 600; } p { margin-bottom: 1rem; color: #555; line-height: 1.8; } .text-muted { color: #999 !important; } .small { font-size: 0.9rem; } /* ===================== FORMS ===================== */ .form-control, .form-select { border: 1px solid #e8e8e8; border-radius: 6px; padding: 12px 14px; font-size: 14px; transition: var(--transition); background: white; color: #333; } .form-control:focus, .form-select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.1); color: #333; } .form-label { font-weight: 600; margin-bottom: 0.75rem; color: #333; display: block; } .form-text { font-size: 0.85rem; color: #999; display: block; margin-top: 0.5rem; } .invalid-feedback { color: var(--danger); font-size: 0.85rem; display: block; margin-top: 0.5rem; } .is-invalid { border-color: var(--danger) !important; } /* ===================== CARDS & BOXES ===================== */ .card { border: 1px solid #e8e8e8; border-radius: var(--border-radius); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); transition: var(--transition); overflow: hidden; background: white; } .card:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); border-color: #ccc; } .card-body { padding: 24px; } .card-title { font-weight: 600; margin-bottom: 1rem; color: #000; } /* ===================== FILTER SIDEBAR (compact) ===================== */ .filter-sidebar .card-body { padding: 14px; } .filter-sidebar .card-title { font-size: 14px; } .filter-sidebar .form-label { font-size: 12px; margin-bottom: 0.35rem; } .filter-sidebar .form-control, .filter-sidebar .form-select { font-size: 12px; padding: 8px 10px; } .filter-sidebar .btn { font-size: 12px; padding: 8px 10px; } .filter-sidebar .list-group-item { font-size: 12px; padding: 8px 10px; } /* ===================== PRODUCT CARDS ===================== */ .product-card { border: 1px solid #e8e8e8; border-radius: var(--border-radius); overflow: hidden; transition: var(--transition); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); display: flex; flex-direction: column; height: 100%; background: white; } .product-card:hover { transform: translateY(-4px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); border-color: #ccc; } .product-card-in-cart { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); } .product-in-cart-badge { background: var(--primary); color: #fff; } .auth-icon { width: 64px; height: 64px; margin: 0 auto 1rem; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); border-radius: 50%; color: #fff; font-size: 26px; box-shadow: 0 8px 20px rgba(15, 118, 110, 0.28); } .auth-title { display: inline-block; margin-bottom: 0; padding-bottom: 12px; position: relative; font-weight: 800; color: #1a1a1a; } .auth-title::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 40px; height: 3px; border-radius: 2px; background: var(--primary); } .wishlist-toggle-form { position: absolute; bottom: 10px; right: 10px; z-index: 2; } .wishlist-toggle-btn { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.9); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); color: #ccc; transition: var(--transition); } .wishlist-toggle-btn:hover { color: #e11d48; transform: scale(1.1); } .wishlist-toggle-btn.is-active { color: #e11d48; animation: wishlistPop 0.3s ease; } @keyframes wishlistPop { 0% { transform: scale(1); } 40% { transform: scale(1.3); } 100% { transform: scale(1); } } .product-image { display: block; width: 85%; margin: 0 auto; height: 280px; object-fit: contain; object-position: center; background: #fff; transition: var(--transition); overflow: hidden; } .product-card:hover .product-image { transform: scale(1.03); } .product-card .card-body { flex-grow: 1; display: flex; flex-direction: column; justify-content: space-between; } .product-name { font-weight: 600; color: #222; margin-bottom: 0.5rem; line-height: 1.4; } .product-category { font-size: 0.9rem; color: #999; margin-bottom: 0.75rem; } .product-description { font-size: 0.9rem; color: #666; margin-bottom: 1rem; } .product-price { font-size: 24px; font-weight: 700; color: var(--accent-warm); margin-bottom: 0.5rem; } .product-footer { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1rem; } /* ===================== PRODUCT RAIL (horizontal scroll section) ===================== */ .product-rail { background: rgba(194, 105, 74, 0.06); border-radius: 16px; padding: 1.5rem 1.25rem; } .rail-title { font-size: 22px; font-weight: 700; } .rail-title i { color: var(--accent-warm); margin-inline-end: 6px; } .product-rail-track { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x proximity; scrollbar-width: thin; } .product-rail-scroll { position: relative; } .product-rail-arrow { position: absolute; z-index: 2; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(15, 118, 110, .18); border-radius: 50%; background: #fff; color: var(--primary-dark); box-shadow: 0 5px 16px rgba(12, 55, 43, .16); cursor: pointer; transition: var(--transition); } .product-rail-arrow:hover { background: var(--primary); color: #fff; transform: translateY(-50%) scale(1.06); } .product-rail-arrow-prev { inset-inline-start: -20px; } .product-rail-arrow-next { inset-inline-end: -20px; } @media (min-width: 768px) { .product-rail-track { scrollbar-width: none; } .product-rail-track::-webkit-scrollbar { display: none; } } .product-rail-item { flex: 0 0 220px; scroll-snap-align: start; } /* ===================== PRODUCT CAROUSEL (paged, auto-rotating) ===================== */ .product-carousel { position: relative; padding-bottom: 40px; } .product-carousel-page { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; } .product-carousel-page .product-rail-item { /* grid items default to min-width: auto, which lets a card's content (long product name, price, etc.) force its column wider than the 1fr track and push later cards past the slider's right/left edge */ min-width: 0; } @media (max-width: 1400px) { .product-carousel-page { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 992px) { .product-carousel-page { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 576px) { .product-carousel-page { grid-template-columns: repeat(2, 1fr); } } .product-carousel .hero-slider-dots { bottom: 0; } .product-carousel .hero-slider-arrow { top: calc(50% - 20px); } @media (max-width: 575px) { .product-rail-item { flex-basis: 160px; } } @media (max-width: 767px) { .product-rail-arrow { display: none; } } .wheelchair-offers { display: grid; gap: 28px; padding: 28px; border-radius: 24px; background: linear-gradient(135deg, #fbfcf8, #f1f5ec); } .wheelchair-offers-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; } .wheelchair-offers a { display: block; overflow: hidden; border-radius: 20px; background: #f5f4ef; box-shadow: 0 12px 28px rgba(37, 68, 47, .12); } .wheelchair-offers picture { display: block; } .wheelchair-offer-copy { display: none; } .wheelchair-offers img { display: block; width: 100%; height: auto; transition: transform .25s ease; } .wheelchair-offers a:hover img { transform: scale(1.02); } @media (min-width: 992px) { /* Desktop: a wide lead banner, then two matching square banners. The source order stays mobile-friendly (two squares then wide). */ .wheelchair-offers { width: 100vw; max-width: none; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; gap: 8px; padding: 0; border-radius: 0; background: transparent; } .wheelchair-offers { display: grid; gap: 12px; } .wheelchair-offers-wide { order: 0; } .wheelchair-offers-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .wheelchair-offers a { border-radius: 8px; box-shadow: 0 6px 16px rgba(37, 68, 47, .09); } .wheelchair-offer-card { position: relative; } /* Desktop campaign artwork has its own Waraqan teal design; mobile continues to use the original image cards. */ .wheelchair-offer-card::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: transparent; } /* Match the campaign layout: two slim landscape cards, then one noticeably wider strip below them. */ .wheelchair-offers-grid a { aspect-ratio: 16 / 5; } .wheelchair-offers-wide { aspect-ratio: 16 / 3; } .wheelchair-offers picture, .wheelchair-offers img { height: 100%; } .wheelchair-offers img { object-fit: cover; object-position: center; } .wheelchair-offers-wide img { object-position: center 42%; } .wheelchair-offer-copy { display: flex; position: absolute; inset-block: 0; inset-inline-end: 7%; flex-direction: column; justify-content: center; align-items: flex-end; z-index: 2; gap: 2px; color: #fff; text-align: end; white-space: nowrap; } .wheelchair-offer-copy small { color: var(--primary-light); font-size: .7rem; font-weight: 700; letter-spacing: .02em; } .wheelchair-offer-copy strong { font-size: 1.05rem; font-weight: 800; } .wheelchair-offer-copy em { margin-top: 4px; padding: 3px 9px; border-radius: 999px; background: var(--cta-bright); color: #fff; font-size: .7rem; font-style: normal; font-weight: 800; } .wheelchair-offer-copy-wide { inset-inline-end: 9%; } .wheelchair-offer-copy-wide strong { font-size: clamp(1.35rem, 2vw, 2rem); } .wheelchair-offer-copy-wide em { padding: 5px 14px; font-size: .85rem; } } @media (max-width: 575px) { .wheelchair-offers { gap: 12px; padding: 0; background: transparent; } .wheelchair-offers-grid { gap: 12px; } .wheelchair-offers a { border-radius: 12px; box-shadow: none; } } /* ===================== COMPACT PRODUCT CARDS (6-per-row grid) ===================== */ .product-card-compact .product-image { height: 160px; } .product-card-compact .card-body { padding: 14px; } .product-card-compact .product-name { font-size: 14px; margin-bottom: 0.35rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .product-card-compact .product-category { font-size: 11px; margin-bottom: 0.25rem; } .product-card-compact .product-description { display: none; } .product-card-compact .product-price { font-size: 16px; margin-bottom: 0; } .product-card-compact .badge { font-size: 10px; padding: 4px 8px; } .product-card-compact .product-footer { margin-top: 0.5rem; } .product-card-compact .btn { font-size: 12px; padding: 8px 10px; } @media (max-width: 575px) { .product-card-compact .product-image { height: 110px; } } /* ===================== PRODUCTS LIST VIEW ===================== */ #productsGrid.list-view .product-col { flex: 0 0 100%; max-width: 100%; } #productsGrid.list-view .product-card-compact { flex-direction: row; align-items: stretch; } #productsGrid.list-view .product-card-compact > div:first-child { flex: 0 0 200px; } #productsGrid.list-view .product-card-compact .product-image { width: 200px; height: 100%; } #productsGrid.list-view .product-card-compact .card-body { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; } #productsGrid.list-view .product-card-compact .product-name { -webkit-line-clamp: 1; } #productsGrid.list-view .product-card-compact .product-description { display: block; } #productsGrid.list-view .product-card-compact .d-grid { display: flex !important; flex-direction: row; gap: 0.5rem; } @media (max-width: 575px) { #productsGrid.list-view .product-card-compact { flex-direction: column; } #productsGrid.list-view .product-card-compact > div:first-child, #productsGrid.list-view .product-card-compact .product-image { flex: none; width: 100%; } } .view-toggle-btn.active { background-color: var(--primary); border-color: var(--primary); color: #fff; } /* ===================== BADGES & ALERTS ===================== */ .badge { padding: 6px 12px; border-radius: 4px; font-weight: 500; font-size: 0.85rem; } .badge.bg-success { background-color: #28a745 !important; } .badge.bg-danger { background-color: #dc3545 !important; } .badge.bg-warning { background-color: #ffc107 !important; color: #333; } .alert { border: 1px solid #e8e8e8; border-radius: 6px; padding: 14px 16px; margin-bottom: 1.5rem; background: #f5f5f5; } .alert-success { background-color: #f0f9f6; border-color: #28a745; color: #155724; } .alert-danger { background-color: #fdf5f5; border-color: #dc3545; color: #721c24; } .alert-warning { background-color: #fffdf5; border-color: #ffc107; color: #856404; } .alert-info { background-color: #f0f5fa; border-color: #0c5460; color: #0c5460; } /* ===================== HERO SLIDER ===================== */ .hero-slider { position: relative; overflow: hidden; background: var(--light); border-radius: var(--border-radius); } .hero-slider-track { position: relative; height: 100%; overflow: hidden; } .hero-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 0.5s ease; } .hero-slide.is-active { position: relative; height: 100%; opacity: 1; visibility: visible; } .hero-slide-link { display: block; height: 100%; } .hero-slide-img { display: block; width: 100%; height: 100%; object-fit: cover; } .hero-slide-video { display: block; width: 100%; height: 100%; object-fit: cover; background: #063f2e; } .hero-slider-dots { position: absolute; bottom: 16px; inset-inline-start: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 2; } [dir="rtl"] .hero-slider-dots { transform: translate(50%, 0); } @media (max-width: 991px) { .header-top-grid .hero-slider .hero-slider-dots { display: none; } } .hero-slider-dot { width: 10px; height: 10px; border-radius: 50%; border: none; background: rgba(255, 255, 255, 0.6); cursor: pointer; padding: 0; transition: var(--transition); } .hero-slider-dot.is-active { background: #fff; width: 24px; border-radius: 5px; } .hero-slider-dot:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .hero-slider-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 40px; height: 40px; display: grid; place-items: center; border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.85); color: #1a1a1a; font-size: 15px; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); transition: var(--transition); } .hero-slider-arrow:hover { background: #ffffff; transform: translateY(-50%) scale(1.08); } .hero-slider-arrow-prev { inset-inline-start: 16px; } .hero-slider-arrow-next { inset-inline-end: 16px; } @media (max-width: 767px) { .hero-slider-arrow { width: 26px; height: 26px; font-size: 10px; } .hero-slider-arrow-prev { inset-inline-start: 8px; } .hero-slider-arrow-next { inset-inline-end: 8px; } } @media (prefers-reduced-motion: reduce) { .hero-slide { transition: none; } .product-card:hover, .product-card:hover .product-image { transform: none; } .cart-link .badge.badge-pulse, .wishlist-link .badge.badge-pulse, .btn-added, .app-toast, .wishlist-toggle-btn.is-active { animation: none; } } /* ===================== OFFERS SLIDER ===================== */ .offers-slider { position: relative; overflow: hidden; background: var(--light); border-radius: var(--border-radius); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); aspect-ratio: 2480 / 600; } /* Homepage medical offers: three manual slides with a compact campaign ratio. */ .medical-offers-slider { aspect-ratio: 1376 / 768; } .medical-offers-slider .hero-slide-img { object-fit: contain; object-position: center; } @media (max-width: 991px) { .container-main.home-main { padding-top: 0; } .offers-slider { /* full-bleed: break out of .container-main to span the full viewport width */ width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; border-radius: 0; box-shadow: none; } .medical-offers-slider { aspect-ratio: 1143 / 1376; height: auto; min-height: 0; background: #063f2e; } .medical-offers-slider.d-lg-none .hero-slide-img { object-fit: contain; object-position: center top; } .medical-offers-slider.d-lg-none .hero-slider-dots { bottom: 6px; } } @media (max-width: 380px), (max-height: 700px) { .medical-offers-slider { height: auto; } } /* ===================== HERO SECTION ===================== */ .hero-section { background: #f5f5f5; color: #000; padding: 80px 0; border-radius: 0; margin-bottom: 50px; text-align: center; } .hero-section h1 { color: #000; font-size: 3rem; margin-bottom: 1.5rem; font-weight: 700; } .hero-section p { color: #666; font-size: 1.1rem; margin-bottom: 2rem; } /* ===================== LEGAL PAGES ===================== */ .legal-content { max-width: 800px; line-height: 1.8; } .legal-content h4 { color: var(--primary); } .legal-content ul { padding-inline-start: 1.5rem; margin-bottom: 1rem; } .legal-content li { margin-bottom: 0.5rem; } /* ===================== BREADCRUMB ===================== */ .breadcrumb { display: inline-flex; align-items: center; flex-wrap: wrap; width: auto; max-width: 100%; background: #f3f8f7; border: 1px solid #dceae7; border-radius: 10px; padding: .55rem .85rem; margin-bottom: 1rem; font-size: .875rem; } .breadcrumb-item { color: #6b7b79; } .breadcrumb-item.active { color: #173f3b; font-weight: 600; } .breadcrumb-item a { color: #13766e; text-decoration: none; transition: var(--transition); } .breadcrumb-item a:hover { color: #0b5f59; text-decoration: none; } .breadcrumb-item + .breadcrumb-item::before { color: #9aaca9; content: '‹'; font-size: 1.15em; line-height: 1; } @media (max-width: 575.98px) { .breadcrumb { padding: .5rem .7rem; font-size: .8rem; } } /* ===================== PAGINATION ===================== */ .pagination { gap: 0.5rem; } .page-link { border-radius: 8px; border: 2px solid var(--light); color: var(--primary); transition: var(--transition); } .page-link:hover { background-color: var(--primary); border-color: var(--primary); color: white; } .page-item.active .page-link { background-color: var(--primary); border-color: var(--primary); } /* ===================== TABLES ===================== */ .table { margin-bottom: 0; } .table thead th { background-color: var(--light); border-bottom: 2px solid #dee2e6; font-weight: 700; color: #222; padding: 16px; } .table tbody td { padding: 16px; vertical-align: middle; border-bottom: 1px solid #e9ecef; } .table tbody tr:hover { background-color: rgba(102, 126, 234, 0.05); } /* ===================== BRANCHES ===================== */ .branch-card { display: flex; gap: 16px; align-items: flex-start; height: 100%; padding: 20px; background: #fff; border: 1px solid #ece6db; border-radius: var(--border-radius); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); transition: var(--transition); } .branch-card:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08); transform: translateY(-2px); } .branch-card-icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(155deg, color-mix(in srgb, var(--primary) 20%, white), color-mix(in srgb, var(--primary) 6%, white)); color: var(--primary); font-size: 20px; flex-shrink: 0; } .branch-card-name { font-size: 17px; font-weight: 700; margin-bottom: 4px; } .branch-card-address { color: var(--gray); font-size: 14px; margin-bottom: 14px; } .branch-card-actions { display: flex; flex-wrap: wrap; gap: 8px; } /* ===================== PRODUCT IMAGE ZOOM (hover magnify) ===================== */ .product-image-zoom { position: relative; width: 100%; overflow: hidden; border-radius: var(--border-radius); cursor: zoom-in; } .product-image-zoom #main-image { transition: transform 0.1s ease-out, opacity 0.2s ease; transform: scale(1); } .product-image-zoom.is-zoomed #main-image { transform: scale(2.2); } .product-image-zoom-hint { position: absolute; bottom: 22px; inset-inline-end: 12px; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: var(--primary-dark); font-size: 16px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); pointer-events: none; transition: var(--transition); } .product-image-zoom.is-zoomed .product-image-zoom-hint { opacity: 0; } @media (hover: none) { .product-image-zoom { cursor: default; } .product-image-zoom-hint { display: none; } } .product-thumbnails { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; } .thumbnail-img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 2px solid transparent; opacity: 0.7; cursor: pointer; background: #f5f5f5; transition: var(--transition); } .thumbnail-img:hover { opacity: 1; } .thumbnail-img.active { border-color: var(--primary); opacity: 1; } /* ===================== TRUST SIGNALS ===================== */ .trust-badges { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1.5rem; margin: 2rem 0; padding: 2rem 0; } .badge-item { text-align: center; padding: 2rem; background: white; border-radius: var(--border-radius); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); transition: var(--transition); } .badge-item:hover { transform: translateY(-4px); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12); } .badge-item i { font-size: 32px; color: var(--primary); margin-bottom: 1rem; display: block; } .badge-item-text { font-weight: 600; color: #333; font-size: 0.95rem; line-height: 1.4; } /* ===================== PRODUCT VARIANT SELECTOR ===================== */ .variant-options { display: flex; flex-wrap: wrap; gap: 10px; } .variant-option { display: inline-flex; align-items: center; justify-content: center; min-width: 56px; padding: 8px 16px; border: 2px solid #e2e8f0; border-radius: var(--border-radius); background: white; cursor: pointer; font-weight: 600; transition: var(--transition); } .variant-option:hover { border-color: #cbd5e1; } .variant-option input { position: absolute; opacity: 0; pointer-events: none; } .variant-option:has(input:checked) { border-color: var(--primary); background: rgba(15, 118, 110, 0.08); color: var(--primary); } .variant-option-disabled { opacity: 0.45; cursor: not-allowed; text-decoration: line-through; } /* ===================== PRODUCT COLOR SELECTOR ===================== */ .color-options { display: flex; flex-wrap: wrap; gap: 12px; } .color-option { display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; width: 64px; } .color-option input { position: absolute; opacity: 0; pointer-events: none; } .color-option-swatch { width: 48px; height: 48px; border-radius: 50%; border: 2px solid #e2e8f0; background-size: cover; background-position: center; background-color: #f1f5f9; transition: var(--transition); } .color-option-swatch-empty { background: linear-gradient(135deg, #e2e8f0, #cbd5e1); } .color-option-selected .color-option-swatch { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.25); } .color-option-name { font-size: 0.75rem; color: #475569; text-align: center; } /* ===================== PAYMENT METHOD OPTIONS ===================== */ .payment-method-option { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: white; border: 2px solid #e2e8f0; border-radius: var(--border-radius); cursor: pointer; transition: var(--transition); margin: 0; } .payment-method-option:hover { border-color: #cbd5e1; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); } .payment-method-option .form-check-input { flex-shrink: 0; margin: 0; cursor: pointer; } .payment-method-icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 56px; height: 40px; padding: 4px; border-radius: 8px; font-size: 1.1rem; color: white; background: white; border: 1px solid #e2e8f0; } .payment-method-icon img { max-width: 100%; max-height: 100%; object-fit: contain; } .payment-method-icon-multi { width: 76px; } .payment-method-icon-multi img { max-width: 32px; } .payment-method-text { line-height: 1.4; } .payment-method-cash .payment-method-icon { background: #16a34a; border-color: #16a34a; } .installment-offers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .installment-offer { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 14px 16px; border: 1px solid transparent; border-radius: 14px; color: #fff; box-shadow: 0 10px 24px rgba(31, 41, 55, .18); overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; } .installment-offer:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(31, 41, 55, .23); } .installment-offer-tamara { background: linear-gradient(135deg, #fff7f4 0%, #fff9eb 48%, #faf2ff 100%); border-color: #eed7e5; border-inline-start: 5px solid #d8a4e8; } .installment-offer-tabby { background: linear-gradient(135deg, #effff7 0%, #edfffb 100%); border-color: #c7f4e3; border-inline-start: 5px solid #3bff9d; } .installment-offer img { width: 70px; max-height: 34px; object-fit: contain; flex-shrink: 0; padding: 7px 9px; border-radius: 9px; background: #fff; box-shadow: 0 3px 10px rgba(0, 0, 0, .15); } .installment-offer-tamara img { background: linear-gradient(135deg, #f6a792 0%, #ffd58c 46%, #d8a4e8 100%); } .installment-offer-tabby img { background: linear-gradient(135deg, #3bff9d 0%, #3bffc8 100%); } .installment-offer span { min-width: 0; } .installment-offer strong { display: block; color: #292929; font-size: .95rem; } .installment-offer small { display: block; margin-top: 3px; color: rgba(41, 41, 41, .82); line-height: 1.35; } @media (max-width: 575.98px) { .installment-offers { grid-template-columns: 1fr; gap: 10px; } .installment-offer { padding: 12px 14px; } } .payment-method-apple:has(.form-check-input:checked) { border-color: #000; background: #f8f8f8; } .payment-method-mada:has(.form-check-input:checked) { border-color: #00a19a; background: #f0faf9; } .payment-method-card:has(.form-check-input:checked) { border-color: #1a1f71; background: #f2f3fb; } .payment-method-tamara:has(.form-check-input:checked) { border-color: #6e43d5; background: #f7f3ff; } .payment-method-cash:has(.form-check-input:checked) { border-color: #16a34a; background: #f0fdf4; } /* Order summary card (cart + checkout): sticky only makes sense in the desktop two-column layout (col-lg-4 beside col-lg-8). Below lg, columns stack — leaving position:sticky on would pin the summary card in place while the "شحن سريع" features card scrolls up underneath it, causing an overlap. */ .order-summary-sticky { position: sticky; } /* The cart summary and its service icons must behave as one sidebar. Keeping only the first card sticky lets it overlap the cards beneath it on desktop. */ .cart-sidebar-sticky { position: sticky; top: 80px; } @media (max-width: 991.98px) { .order-summary-sticky { position: static !important; } .cart-sidebar-sticky { position: static; } } /* ===================== CART TABLE (MOBILE) ===================== */ @media (max-width: 767px) { .cart-table thead { display: none; } .cart-table, .cart-table tbody, .cart-table tr, .cart-table td { display: block; width: 100%; } .cart-table tr { border: 1px solid #e2e8f0; border-radius: var(--border-radius); margin-bottom: 0.5rem; padding: 8px 10px; } .cart-table td { border: none !important; padding: 1px 0 !important; font-size: 0.85rem; } .cart-table td:first-child img { width: 36px !important; height: 36px !important; } .cart-table td:first-child small { font-size: 0.7rem; } .cart-table td:nth-child(2), .cart-table td:nth-child(3), .cart-table td:nth-child(4) { display: flex; justify-content: space-between; align-items: center; line-height: 1.2; } .cart-table td:nth-child(2) .price, .cart-table td:nth-child(4) strong { font-size: 0.85rem; } .cart-table td:nth-child(2)::before, .cart-table td:nth-child(3)::before, .cart-table td:nth-child(4)::before { content: attr(data-label) ":"; color: #94a3b8; font-size: 0.72rem; } .cart-table td:nth-child(3) input { width: 44px !important; height: 24px !important; min-height: 0 !important; padding: 0 4px !important; font-size: 0.75rem; line-height: 24px; box-sizing: border-box; } .cart-table td:last-child { text-align: center; padding-top: 4px; } .cart-table td:last-child .btn { padding: 2px 8px; font-size: 0.75rem; } } /* ===================== FOOTER ===================== */ .footer { /* أخضر الفوتر مستقل عن --primary (التركوازي) عشان يطابق تصميم الفوتر */ --footer-green: #05614a; --footer-whatsapp: #00a86b; background-color: var(--footer-green); color: #dcefe7; padding: 0; margin-top: 0; } /* Top grid section (4 columns) */ .footer .f-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 32px; padding-block: 52px; max-width: 1320px; margin-inline: auto; padding-inline: 40px; } /* Column styling */ .footer .f-col { display: grid; gap: 8px; } .footer .f-col h4 { margin-bottom: 16px; font-size: 15px; font-weight: 800; color: #ffffff; } .footer .f-col p { margin: 0; font-size: 14.5px; line-height: 1.85; color: #dcefe7; } .footer .f-col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; } .footer .f-col ul a { font-size: 14.5px; gap: 8px; display: flex; align-items: center; color: #c7e4d8; text-decoration: none; transition: var(--transition); } .footer .f-col ul a:hover { color: #ffffff; } /* Brand section */ .footer .f-brand { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 14px; } .footer .f-brand .brand-img, .footer .f-brand svg, .footer .f-brand img { width: 110px; height: 110px; border-radius: 14px; flex-shrink: 0; object-fit: contain; order: 1; } .footer .f-brand .brand-text { display: grid; gap: 6px; order: 2; } .footer .f-brand strong { font-size: 19px; font-weight: 800; color: #ffffff; display: block; line-height: 1.4; } .footer .f-brand small { font-size: 14px; font-weight: 500; color: #c7e4d8; display: block; } /* Contact section */ .footer .f-contact { display: grid; gap: 10px; font-size: 14.5px; } .footer .f-contact a { gap: 10px; display: flex; align-items: center; color: #c7e4d8; text-decoration: none; transition: var(--transition); } .footer .f-contact a:hover { color: #ffffff; } .footer .wa { display: inline-flex; align-items: center; gap: 9px; padding: 11px 20px; margin-top: 6px; background: var(--footer-whatsapp); border: none; border-radius: 999px; font-size: 14.5px; font-weight: 800; color: #fff; text-decoration: none; transition: var(--transition); } .footer .wa:hover { background: #008c56; color: #fff; } /* Payment band */ .footer .pay-band { display: flex; align-items: center; padding-block: 22px; gap: 18px; border-top: 1px solid rgba(255, 255, 255, 0.14); border-bottom: 1px solid rgba(255, 255, 255, 0.14); max-width: 1320px; margin-inline: auto; padding-inline: 40px; } .footer .pay-band > b { font-size: 13.5px; font-weight: 700; color: #ffffff; display: flex; align-items: center; gap: 8px; white-space: nowrap; } .footer .pay-list { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; } .footer .pay-item { display: grid; place-items: center; text-decoration: none; position: relative; transition: var(--transition); cursor: pointer; border-radius: 9px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18); overflow: hidden; } .footer .pay-item:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); } .footer .pay-item img { display: block; width: 62px; height: 40px; object-fit: contain; } /* Footer bottom section */ .footer .f-bot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding-block: 20px; border-top: 1px solid rgba(255, 255, 255, 0.14); max-width: 1320px; margin-inline: auto; padding-inline: 40px; color: #9cc9b7; font-size: 13px; } .footer .f-bot p { margin: 0; color: #9cc9b7; } .footer .f-legal { display: flex; gap: 18px; flex-wrap: wrap; } .footer .f-legal a { color: #9cc9b7; text-decoration: none; font-size: 13px; transition: var(--transition); } .footer .f-legal a:hover { color: #ffffff; } /* Responsive design */ @media (max-width: 1100px) { .footer .f-top { grid-template-columns: 1fr 1fr; gap: 26px; } } @media (max-width: 760px) { .footer .f-top { grid-template-columns: 1fr; gap: 26px; padding-block: 36px; } .footer .pay-band { flex-direction: column; align-items: flex-start; padding-block: 16px; } .footer .f-bot { flex-direction: column; align-items: flex-start; gap: 12px; padding-block: 16px; } .footer .f-legal { gap: 12px; } } /* ===================== SPACING UTILITIES ===================== */ .my-section { margin: 60px 0; } .mb-4 { margin-bottom: 2rem !important; } .mt-4 { margin-top: 2rem !important; } /* ===================== PRICE DISPLAY ===================== */ .price { color: var(--primary); font-weight: 700; font-size: 1.5rem; } .original-price { text-decoration: line-through; color: #999; font-size: 0.9rem; margin-inline-start: 0.5rem; } .discount-badge { background-color: #dc3545; color: white; padding: 4px 8px; border-radius: 4px; font-weight: 600; font-size: 0.85rem; } /* ===================== LOADER ===================== */ .spinner-border { color: var(--primary); } /* ===================== RESPONSIVE ===================== */ @media (max-width: 768px) { h1 { font-size: 2rem; } h2 { font-size: 1.5rem; } .hero-section { padding: 50px 0; } .hero-section h1 { font-size: 2rem; } .hero-section p { font-size: 1rem; } .navbar-brand { font-size: 24px; } .btn { padding: 10px 20px; font-size: 14px; } .btn-lg { padding: 12px 24px; } .container-main { padding: 0 0 20px; } .product-card { margin-bottom: 1.5rem; } .trust-badges { grid-template-columns: repeat(2, 1fr); gap: 1rem; } .badge-item { padding: 1.5rem; } .badge-item i { font-size: 24px; } .nav-link { margin: 0.25rem 0; } } @media (max-width: 576px) { .hero-section h1 { font-size: 1.5rem; } .trust-badges { grid-template-columns: 1fr; } .product-price { font-size: 20px; } .search-input { font-size: 14px; padding: 10px 12px; } } /* ===================== ANIMATIONS ===================== */ @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .fade-in { animation: fadeIn 0.5s ease-in; } @keyframes slideIn { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } } .slide-in { animation: slideIn 0.5s ease-in; } .btn-cta-warm { background: linear-gradient(155deg, #ffa64d, var(--cta-bright) 55%, var(--cta-bright-hover)); border-color: var(--cta-bright); color: #fff; font-weight: 700; box-shadow: 0 3px 10px rgba(255, 122, 26, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35); transition: var(--transition); } .btn-cta-warm:hover, .btn-cta-warm:focus { background: linear-gradient(155deg, #ffb366, var(--cta-bright-hover) 55%, #c9540a); border-color: var(--cta-bright-hover); color: #fff; box-shadow: 0 5px 16px rgba(255, 122, 26, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.35); transform: translateY(-1px); } .btn-buy-now-apple { background-color: #000; border-color: #000; color: #fff; font-weight: 600; } .btn-buy-now-apple i { font-size: 1.2em; margin-inline-end: 4px; } .btn-buy-now-apple:hover, .btn-buy-now-apple:focus { background-color: #1a1a1a; border-color: #1a1a1a; color: #fff; } .btn-buy-now-apple:disabled { background-color: #000; border-color: #000; opacity: 0.5; } .btn-cta-warm:disabled { background: var(--cta-bright); border-color: var(--cta-bright); box-shadow: none; opacity: 0.5; } .btn-added { background-color: var(--success); border-color: var(--success); color: #fff; animation: btnAddedPop 0.35s ease; } @keyframes btnAddedPop { 0% { transform: scale(1); } 40% { transform: scale(1.05); } 100% { transform: scale(1); } } /* ===================== TOAST NOTIFICATIONS ===================== */ .app-toast-container { /* above the sticky header (1030) and mega menu (1060) */ z-index: 1090; width: min(90vw, 420px); } .app-toast { width: 100%; border-radius: 14px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25); animation: toastPopIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); } .app-toast .toast-body { display: flex; align-items: center; gap: 10px; font-size: 1.05rem; font-weight: 600; padding: 1rem 1.1rem; } .app-toast .toast-body i { font-size: 1.4rem; } @keyframes toastPopIn { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } } /* ===================== COMPACT MOBILE HEADER ===================== */ .mobile-header { background: linear-gradient(155deg, var(--primary-light) 0%, var(--primary) 45%, var(--primary-dark) 100%); border-bottom: 0; } .mobile-header-brand-group .header-logo-text strong { color: #fff; } .mobile-header-brand-group .header-logo-text small { color: rgba(255, 255, 255, 0.78); } .mobile-header-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; } .mobile-header-brand-group { display: flex; align-items: center; gap: 6px; min-width: 0; } .mobile-header-brand-group .header-logo { gap: 6px; min-width: 0; } .mobile-header-brand-group .header-logo-img { width: 34px; height: 34px; flex: 0 0 auto; } .mobile-header-brand-group .header-logo-text { min-width: 0; overflow: hidden; } .mobile-header-brand-group .header-logo-text strong { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mobile-header-brand-group .header-logo-text small { font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mobile-header-toggler { flex: 0 0 auto; border: 0; background: none; color: #fff; font-size: 20px; padding: 6px; line-height: 1; } .mobile-header-icons { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; } .mobile-header-icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); color: #fff; font-size: 16px; text-decoration: none; transition: transform 0.15s ease, box-shadow 0.15s ease; } .mobile-header-icon:active { transform: scale(0.92); } .mobile-header-badge { position: absolute; top: 0; inset-inline-end: 0; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 999px; box-shadow: 0 0 0 2px #fff, 0 0 6px rgba(220, 53, 69, 0.6); background: #dc3545; color: #fff; font-size: 9px; font-weight: 700; line-height: 15px; text-align: center; } .mobile-search-form { display: flex; gap: 8px; padding: 10px 14px; background: #fff; border-bottom: 1px solid #f0f0f0; } .mobile-search-form .form-control { flex: 1 1 auto; } .mobile-search-form .btn { background: var(--primary); color: #fff; border: 0; padding: 0 16px; } /* ===================== MOBILE TAB BAR ===================== */ .mobile-tabbar { position: fixed; inset-inline: 0; bottom: 0; z-index: 1040; display: flex; background: linear-gradient(155deg, var(--primary-light) 0%, var(--primary) 45%, var(--primary-dark) 100%); padding-bottom: env(safe-area-inset-bottom, 0); box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.18); } .mobile-tabbar::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 1px; background: rgba(255, 255, 255, 0.35); } .mobile-tabbar-item { position: relative; flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 9px 2px 7px; color: rgba(255, 255, 255, 0.75); font-size: 11px; text-decoration: none; text-align: center; transition: color 0.2s ease; } .mobile-tabbar-item i { font-size: 19px; line-height: 1; transition: transform 0.2s ease, filter 0.2s ease; } .mobile-tabbar-item.is-active { color: #fff; } .mobile-tabbar-item.is-active i { transform: translateY(-1px) scale(1.08); filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.65)); } .mobile-tabbar-item.is-active::after { content: ''; position: absolute; bottom: 3px; width: 4px; height: 4px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px 1px rgba(255, 255, 255, 0.8); } @media (min-width: 992px) { .mobile-header, .mobile-tabbar { display: none; } } @media (max-width: 991px) { /* Reserve space for the fixed mobile tab bar on the footer itself (not body) so its own dark-green background fills the gap instead of leaving a mismatched blank strip between the footer and the tab bar. */ .footer { padding-bottom: 58px; } } /* ===================== SHARED SECTION HEADING ===================== */ .section-title { font-size: 24px; font-weight: 700; text-align: center; margin-bottom: 6px; } .section-title i { color: var(--accent-warm); margin-inline-end: 8px; } .section-subtitle { text-align: center; color: var(--gray); margin-bottom: 28px; } /* ===================== SCROLL-REVEAL STAGGER ===================== */ [data-stagger-item] { opacity: 0; transform: translateY(24px) scale(0.97); transition: opacity 0.5s ease, transform 0.5s ease; transition-delay: calc(var(--stagger-index, 0) * 60ms); } [data-stagger-item].is-visible { opacity: 1; transform: translateY(0) scale(1); } @media (prefers-reduced-motion: reduce) { [data-stagger-item] { opacity: 1; transform: none; transition: none; } } /* ===================== CATEGORY SHOWCASE ===================== */ .category-showcase { margin: 48px 0; } .category-showcase-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 16px; } .category-showcase-card { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px 12px; border-radius: var(--border-radius); background: #fff; border: 1px solid #eee; text-decoration: none; color: var(--dark); text-align: center; transition: var(--transition); } .category-showcase-card:hover { border-color: var(--primary); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08); transform: translateY(-3px); } .category-showcase-icon { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(155deg, color-mix(in srgb, var(--primary) 20%, white), color-mix(in srgb, var(--primary) 6%, white)); box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.8), 0 2px 6px rgba(0, 0, 0, 0.06); color: var(--primary); font-size: 22px; transition: transform 0.2s ease, box-shadow 0.2s ease; } .category-showcase-card:hover .category-showcase-icon { transform: scale(1.08) rotate(-4deg); box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.8), 0 4px 12px color-mix(in srgb, var(--primary) 30%, transparent); } .category-showcase-name { font-size: 13px; font-weight: 600; line-height: 1.3; } /* ===================== DAILY USE (TAG SHOWCASE) ===================== */ .daily-use { margin: 48px 0; } .daily-use-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 18px; } .daily-use-card { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 28px 16px; border-radius: var(--border-radius); background: linear-gradient(160deg, color-mix(in srgb, var(--primary) 6%, white), #fff); border: 1px solid #eee; text-decoration: none; color: var(--dark); text-align: center; transition: var(--transition); } .daily-use-card:hover { border-color: var(--accent-warm); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); transform: translateY(-3px); } .daily-use-icon { display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(155deg, var(--primary-light), var(--primary) 55%, var(--primary-dark)); box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.45), 0 3px 10px color-mix(in srgb, var(--primary) 35%, transparent); color: #fff; font-size: 24px; margin-bottom: 4px; transition: transform 0.2s ease; } .daily-use-card:hover .daily-use-icon { transform: scale(1.08) rotate(4deg); } .daily-use-name { font-size: 15px; font-weight: 700; } .daily-use-count { font-size: 12px; color: var(--gray); } /* ===================== TRUST STATS ===================== */ .trust-stats { position: relative; margin: 48px 0; padding: 32px 20px 24px; background: color-mix(in srgb, var(--primary) 6%, white); border-radius: var(--border-radius); overflow: hidden; } .trust-stats-rollstrip { position: relative; height: 24px; margin-bottom: 20px; overflow: hidden; } .trust-stats-roller { position: absolute; top: 0; font-size: 22px; color: var(--primary); animation: rollAcross 9s linear infinite; } @keyframes rollAcross { from { inset-inline-start: -10%; transform: rotate(0deg); } to { inset-inline-start: 105%; transform: rotate(720deg); } } .trust-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 24px; text-align: center; } .trust-stat-item { display: flex; flex-direction: column; align-items: center; gap: 4px; } .trust-stat-number { font-size: 34px; font-weight: 800; color: var(--primary); font-variant-numeric: tabular-nums; } .trust-stat-icon { font-size: 26px; color: var(--accent-warm); margin-bottom: 6px; } .trust-stat-title { font-size: 15px; font-weight: 700; } .trust-stat-label { font-size: 13px; color: var(--gray); } @media (prefers-reduced-motion: reduce) { .trust-stats-roller { animation: none; inset-inline-start: 45%; } } /* ===================== WHY-WARAQAN FLOATING ICONS ===================== */ .why-waraqan-floaters { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; } .why-float { position: absolute; color: rgba(255, 255, 255, 0.08); font-size: 64px; animation: whyFloat 7s ease-in-out infinite; } .why-float-1 { top: 12%; inset-inline-start: 6%; font-size: 54px; animation-delay: 0s; } .why-float-2 { top: 60%; inset-inline-start: 12%; font-size: 40px; animation-delay: 1.5s; } .why-float-3 { top: 20%; inset-inline-end: 8%; font-size: 70px; animation-delay: 0.7s; } .why-float-4 { top: 65%; inset-inline-end: 14%; font-size: 46px; animation-delay: 2.2s; } @keyframes whyFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-18px); } } @media (prefers-reduced-motion: reduce) { .why-float { animation: none; } } /* ===================== PRODUCT DESCRIPTION (RICH TEXT) ===================== */ .product-description-content h2 { font-size: 1.2rem; font-weight: 700; color: #222; margin: 1rem 0 0.5rem; } .product-description-content ul, .product-description-content ol { padding-inline-start: 1.5rem; margin: 0.5rem 0; } .product-description-content ul { list-style: disc; } .product-description-content ol { list-style: decimal; } .product-description-content p { margin: 0 0 0.75rem; } /* ===================== PRINT ===================== */ @media print { .navbar, .footer, .btn-primary, .btn-secondary, .mobile-tabbar { display: none; } }