/* ============================================
   PRINTS MAX — v3 Final Polish
   Fixed Slider, All Sections Refined
   ============================================ */
/* Font loading is handled in resources/views/layouts/app.blade.php.
 *
 * The @import that used to sit here was the worst possible way to load them.
 * A CSS @import cannot start until style.css has been downloaded AND parsed,
 * so it serialised the chain:
 *     HTML -> style.css -> fonts.googleapis.com/css2 -> the woff2 files
 * Four sequential round trips before a single glyph could paint — and it
 * silently cancelled out the media="print" onload swap in the layout, which
 * exists precisely to keep fonts off the critical path.
 *
 * Arabic webfonts are the single largest LCP cost on this site, so this line
 * was doing more damage than any other one line in the codebase.
 */

:root {
  --primary: #b5111b;
  --primary-dark: #8e0d15;
  --primary-light: #d4343d;
  --primary-glow: rgba(181,17,27,0.1);
  --dark: #0c0c0c;
  --dark-2: #151515;
  --gray-900: #2a2a2a;
  --gray-700: #555;
  --gray-500: #888;
  --gray-300: #ccc;
  --gray-200: #e2e2e2;
  --gray-100: #f3f3f3;
  --white: #fff;
  --bg: #fafafa;
  --green: #25D366;
  --font-heading: 'Poppins', sans-serif;
  --font-body: 'Outfit', sans-serif;
  --font-ar: 'Cairo', sans-serif;
  --shadow-sm: 0 2px 10px rgba(0,0,0,.06);
  --shadow-md: 0 6px 24px rgba(0,0,0,.08);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.1);
  --shadow-xl: 0 20px 60px rgba(0,0,0,.14);
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --ease: cubic-bezier(.25,.46,.45,.94);
  --transition: all .4s var(--ease);
}

/* RTL — apply Cairo (Arabic font) to ALL elements by overriding font variables */
html[dir="rtl"] {
  --font-heading: 'Cairo', sans-serif;
  --font-body: 'Cairo', sans-serif;
}
html[dir="rtl"] body,
html[dir="rtl"] body *:not(i):not([class*="fa-"]):not([class*="fas"]):not([class*="fab"]):not([class*="far"]) {
  font-family: var(--font-ar);
}
html[dir="rtl"] body { line-height: 1.85; }
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3,
html[dir="rtl"] h4, html[dir="rtl"] h5, html[dir="rtl"] h6 { letter-spacing: 0; line-height: 1.4; }
html[dir="rtl"] .section-label { letter-spacing: 1.5px; }
html[dir="rtl"] .marquee-item { letter-spacing: 0; }
html[dir="rtl"] .navbar-main .nav-link { font-size: .92rem; letter-spacing: 0; }
html[dir="rtl"] .footer-heading { letter-spacing: 0; }
html[dir="rtl"] .stat-label,
html[dir="rtl"] .product-card-badge,
html[dir="rtl"] .filter-btn,
html[dir="rtl"] .btn-main,
html[dir="rtl"] .btn-whatsapp,
html[dir="rtl"] .form-group-custom label,
html[dir="rtl"] .cart-table th { letter-spacing: 0; }

html[dir="rtl"] .service-card-link i { transform: scaleX(-1); }
html[dir="rtl"] .footer-links a:hover { padding-left:0; padding-right:4px; }
html[dir="rtl"] .hero-slide-content { text-align: right; }
html[dir="rtl"] .hero-buttons { justify-content: flex-start; }
html[dir="rtl"] .testimonial-card blockquote { border-left:none; border-right:3px solid var(--primary); padding-left:0; padding-right:16px; }
html[dir="rtl"] .marquee-track { animation-direction: reverse; }

/* Reset */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; scroll-padding-top:80px; }
body { font-family:var(--font-body); color:var(--gray-900); background:var(--bg); line-height:1.7; overflow-x:hidden; -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4,h5,h6 { font-family:var(--font-heading); font-weight:700; line-height:1.2; color:var(--dark); }
a { text-decoration:none; color:inherit; transition:var(--transition); }
img { max-width:100%; height:auto; display:block; }
ul { list-style:none; padding:0; margin:0; }

/* Preloader */
#preloader { position:fixed; inset:0; background:var(--white); z-index:99999; display:flex; align-items:center; justify-content:center; transition:opacity .5s,visibility .5s; }
#preloader.hide { opacity:0; visibility:hidden; pointer-events:none; }
.loader-spinner { width:44px; height:44px; border:3px solid var(--gray-200); border-top-color:var(--primary); border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* Utilities */
.section-padding { padding:100px 0; }
.section-label { font-family:var(--font-heading); font-size:.72rem; font-weight:700; letter-spacing:3.5px; text-transform:uppercase; color:var(--primary); margin-bottom:12px; display:inline-block; }
.section-title { font-size:clamp(1.8rem,4vw,2.8rem); font-weight:800; margin-bottom:14px; letter-spacing:-.5px; }
.section-subtitle { font-size:1.05rem; color:var(--gray-700); max-width:520px; line-height:1.8; }
.section-header { margin-bottom:50px; }

/* Buttons */
.btn-main { display:inline-flex; align-items:center; gap:8px; padding:13px 30px; font-family:var(--font-heading); font-size:.88rem; font-weight:600; border-radius:50px; border:none; cursor:pointer; transition:var(--transition); text-decoration:none; line-height:1.4; white-space:nowrap; }
.btn-primary-main { background:var(--primary); color:var(--white); }
.btn-primary-main:hover { background:var(--primary-dark); color:var(--white); transform:translateY(-2px); box-shadow:0 8px 25px rgba(181,17,27,.3); }
.btn-outline-main { background:transparent; color:var(--dark); border:2px solid var(--gray-300); }
.btn-outline-main:hover { background:var(--dark); color:var(--white); border-color:var(--dark); transform:translateY(-2px); }
.btn-white-main { background:var(--white); color:var(--primary); }
.btn-white-main:hover { background:var(--gray-100); color:var(--primary); transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.btn-whatsapp { background:var(--green); color:var(--white); padding:13px 30px; font-family:var(--font-heading); font-size:.88rem; font-weight:600; border-radius:50px; border:none; cursor:pointer; display:inline-flex; align-items:center; gap:10px; transition:var(--transition); white-space:nowrap; }
.btn-whatsapp:hover { background:#1fba59; color:var(--white); transform:translateY(-2px); box-shadow:0 8px 25px rgba(37,211,102,.35); }

/* === NAVBAR === */
.navbar-main { padding:14px 0; transition:background .4s ease,padding .3s ease,box-shadow .3s ease; z-index:1050; background:transparent; border-bottom:1px solid transparent; }
.navbar-main.scrolled, .navbar-main.navbar-light-bg { background:rgba(255,255,255,.97); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-bottom:1px solid rgba(0,0,0,.06); box-shadow:var(--shadow-sm); padding:8px 0; }
.navbar-brand-custom { font-family:var(--font-heading); font-size:1.5rem; font-weight:800; color:var(--white)!important; letter-spacing:-.5px; }
.navbar-brand-custom span { color:var(--primary); }
.navbar-main.scrolled .navbar-brand-custom, .navbar-main.navbar-light-bg .navbar-brand-custom { color:var(--dark)!important; }
.navbar-main .nav-link { font-family:var(--font-heading); font-size:.82rem; font-weight:500; color:rgba(255,255,255,.8)!important; padding:8px 14px!important; letter-spacing:.3px; position:relative; }
.navbar-main .nav-link:hover, .navbar-main .nav-link.active { color:var(--white)!important; }
.navbar-main.scrolled .nav-link, .navbar-main.navbar-light-bg .nav-link { color:var(--gray-700)!important; }
.navbar-main.scrolled .nav-link:hover, .navbar-main.scrolled .nav-link.active, .navbar-main.navbar-light-bg .nav-link:hover, .navbar-main.navbar-light-bg .nav-link.active { color:var(--primary)!important; }
.navbar-main .nav-link::after { content:''; position:absolute; bottom:2px; left:14px; right:14px; height:2px; background:var(--primary); transform:scaleX(0); transition:transform .3s ease; }
.navbar-main .nav-link:hover::after, .navbar-main .nav-link.active::after { transform:scaleX(1); }
.nav-cart { position:relative; font-size:1.15rem; color:var(--white); padding:8px 12px; }
.navbar-main.scrolled .nav-cart, .navbar-main.navbar-light-bg .nav-cart { color:var(--dark); }
.cart-count { position:absolute; top:0; right:0; background:var(--primary); color:var(--white); font-size:.6rem; font-weight:700; width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--font-heading); }
.btn-nav-quote { padding:8px 20px; font-size:.78rem; }
.lang-toggle { display:flex; align-items:center; gap:3px; background:rgba(255,255,255,.15); border-radius:50px; padding:3px; margin-left:8px; }
.navbar-main.scrolled .lang-toggle, .navbar-main.navbar-light-bg .lang-toggle { background:var(--gray-100); }
.lang-toggle button { border:none; background:transparent; padding:5px 11px; border-radius:50px; font-size:.72rem; font-weight:600; cursor:pointer; transition:var(--transition); color:rgba(255,255,255,.6); }
.navbar-main.scrolled .lang-toggle button, .navbar-main.navbar-light-bg .lang-toggle button { color:var(--gray-500); }
.lang-toggle button.active { background:var(--primary); color:var(--white); }
html[dir="rtl"] .lang-toggle { margin-left:0; margin-right:8px; }
.navbar-main .navbar-toggler-icon { background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.8)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }
.navbar-main.scrolled .navbar-toggler-icon, .navbar-main.navbar-light-bg .navbar-toggler-icon { background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0,0,0,0.55)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }

/* === HERO SLIDER === */
.hero-slider { position:relative; width:100%; height:100vh; min-height:600px; max-height:960px; overflow:hidden; }
.hero-slider .swiper { width:100%; height:100%; }
.hero-slider .swiper-wrapper { height:100%; }
.hero-slider .swiper-slide { width:100%; height:100%; overflow:hidden; }
.hero-slide { position:relative; width:100%; height:100%; display:flex; align-items:center; }
.hero-slide-bg { position:absolute; inset:0; z-index:0; }
.hero-slide-bg img { width:100%; height:100%; object-fit:cover; object-position:center; }
.hero-slide-overlay { position:absolute; inset:0; z-index:1; background:linear-gradient(135deg, rgba(12,12,12,.88) 0%, rgba(12,12,12,.55) 50%, rgba(181,17,27,.25) 100%); }
.hero-slide-content { position:relative; z-index:3; max-width:600px; padding-top:40px; }
.hero-slide-content .section-label { color:rgba(255,255,255,.5); margin-bottom:16px; }
.hero-slide-content h1 { font-size:clamp(2.2rem,5vw,3.8rem); font-weight:900; color:var(--white); line-height:1.1; letter-spacing:-1.5px; margin-bottom:20px; }
.hero-slide-content p { font-size:1.08rem; color:rgba(255,255,255,.6); margin-bottom:32px; line-height:1.8; max-width:480px; }
.hero-buttons { display:flex; gap:12px; flex-wrap:wrap; }

/* Swiper controls */
.hero-slider .swiper-pagination { bottom:36px!important; z-index:10; }
.hero-slider .swiper-pagination-bullet { width:28px; height:4px; border-radius:4px; background:rgba(255,255,255,.25); opacity:1; transition:all .3s ease; margin:0 4px!important; }
.hero-slider .swiper-pagination-bullet-active { background:var(--primary); width:48px; }
.hero-slider .swiper-button-next, .hero-slider .swiper-button-prev { color:var(--white); width:48px; height:48px; border-radius:50%; background:rgba(255,255,255,.1); backdrop-filter:blur(10px); transition:var(--transition); z-index:10; }
.hero-slider .swiper-button-next:hover, .hero-slider .swiper-button-prev:hover { background:var(--primary); }
.hero-slider .swiper-button-next::after, .hero-slider .swiper-button-prev::after { font-size:15px; font-weight:bold; }

/* Slide content entrance animation */
.swiper-slide .hero-slide-content .section-label,
.swiper-slide .hero-slide-content h1,
.swiper-slide .hero-slide-content p,
.swiper-slide .hero-slide-content .hero-buttons { opacity:0; transform:translateY(30px); }
.swiper-slide-active .hero-slide-content .section-label,
.swiper-slide-active .hero-slide-content h1,
.swiper-slide-active .hero-slide-content p,
.swiper-slide-active .hero-slide-content .hero-buttons { animation:slideUp .8s var(--ease) forwards; }
.swiper-slide-active .hero-slide-content .section-label { animation-delay:.1s; }
.swiper-slide-active .hero-slide-content h1 { animation-delay:.25s; }
.swiper-slide-active .hero-slide-content p { animation-delay:.4s; }
.swiper-slide-active .hero-slide-content .hero-buttons { animation-delay:.55s; }
@keyframes slideUp { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:translateY(0); } }

/* Marquee */
.marquee-section { background:var(--primary); padding:14px 0; overflow:hidden; white-space:nowrap; }
.marquee-track { display:flex; gap:40px; animation:marquee 30s linear infinite; width:max-content; }
.marquee-item { font-family:var(--font-heading); font-size:.78rem; font-weight:600; color:var(--white); text-transform:uppercase; letter-spacing:2px; display:flex; align-items:center; gap:12px; flex-shrink:0; }
.marquee-item span { width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.35); flex-shrink:0; }
@keyframes marquee { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

/* Stats */
.stats-section { background:var(--white); padding:56px 0; border-bottom:1px solid rgba(0,0,0,.06); }
.stat-item { text-align:center; padding:16px 10px; }
.stat-number { font-family:var(--font-heading); font-size:2.6rem; font-weight:800; color:var(--primary); line-height:1; margin-bottom:6px; }
.stat-label { font-family:var(--font-heading); font-size:.78rem; font-weight:500; color:var(--gray-500); text-transform:uppercase; letter-spacing:1.2px; }

/* ── Hero viewport ─────────────────────────────────────────────────────────
   Banner + marquee + stats together occupy exactly one screen. The navbar is
   fixed-top so it overlays rather than consuming flow height, which lets the
   three sections total 100dvh. The hero takes whatever the other two leave. */
.hero-viewport {
  display: flex;
  flex-direction: column;
  height: 100vh;            /* fallback for browsers without dvh */
  height: 100dvh;           /* excludes mobile browser chrome, no jump on scroll */
  overflow: hidden;
}
.hero-viewport > .hero-slider {
  flex: 1 1 auto;
  height: auto;             /* override the standalone 100vh */
  min-height: 0;            /* allow the flex item to shrink past its content */
  max-height: none;
}
.hero-viewport > .marquee-section,
.hero-viewport > .stats-section { flex: 0 0 auto; }

/* Everything in this wrapper is above the fold, so it must paint on the first
   frame. The .fade-up reveal is driven by a scroll handler in script.js, which
   both depends on jQuery having run and skips elements sitting in its bottom
   60px dead-band — either one leaves the stats invisible on load. Opt out. */
.hero-viewport .fade-up { opacity: 1; transform: none; }

/* Keep the centred slide copy clear of the fixed navbar in the shorter box. */
.hero-viewport .hero-slide { padding-top: 56px; }
.hero-viewport .hero-slide-content { padding-top: 0; }

/* Scale the two fixed-height strips against viewport height so they never eat
   the banner on short screens, and never look starved on tall ones. */
.hero-viewport .marquee-section { padding: clamp(7px, 1.4vh, 14px) 0; }
.hero-viewport .stats-section   { padding: clamp(10px, 2.4vh, 40px) 0; }
.hero-viewport .stat-item       { padding: clamp(2px, .9vh, 14px) 8px; }
.hero-viewport .stat-number     { font-size: clamp(1.15rem, 3.4vh, 2.6rem); margin-bottom: clamp(1px, .5vh, 6px); }
.hero-viewport .stat-label      { font-size: clamp(.54rem, 1.3vh, .78rem); letter-spacing: 1px; line-height: 1.25; }

/* Banner copy scales on the smaller of width/height so nothing overflows. */
.hero-viewport .hero-slide-content .section-label { margin-bottom: clamp(4px, 1.2vh, 16px); }
.hero-viewport .hero-slide-content h1,
.hero-viewport .hero-slide-content .hero-slide-h {
  font-size: clamp(1.5rem, min(5vw, 5.6vh), 3.8rem);
  margin-bottom: clamp(6px, 1.8vh, 20px);
}
.hero-viewport .hero-slide-content p {
  font-size: clamp(.82rem, min(1.6vw, 2vh), 1.08rem);
  line-height: 1.6;
  margin-bottom: clamp(10px, 2.6vh, 32px);
}
/* Drop the paragraph on genuinely cramped screens rather than squeezing all
   three sections until the buttons fall off. */
@media (max-height: 620px) {
  .hero-viewport .hero-slide-content p { display: none; }
}
.hero-viewport .hero-slider .swiper-pagination { bottom: clamp(6px, 1.6vh, 36px) !important; }

/* Landscape phones are too short to hold three sections legibly — release the
   lock and let the page scroll normally. */
@media (max-height: 460px) {
  .hero-viewport { height: auto; overflow: visible; }
  .hero-viewport > .hero-slider { height: 92vh; min-height: 300px; }
  .hero-viewport .hero-slide-content p { display: block; }
}

/* Services */
.service-card { background:var(--white); border-radius:var(--radius-lg); overflow:hidden; transition:var(--transition); border:1px solid rgba(0,0,0,.06); height:100%; }
.service-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-xl); border-color:transparent; }
.service-card-img { height:220px; position:relative; overflow:hidden; }
.service-card-img img { width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.service-card:hover .service-card-img img { transform:scale(1.06); }
.service-card-img .service-icon-badge { position:absolute; bottom:-22px; left:24px; width:46px; height:46px; background:var(--primary); border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; color:var(--white); font-size:1rem; box-shadow:0 4px 15px rgba(181,17,27,.3); z-index:2; }
html[dir="rtl"] .service-card-img .service-icon-badge { left:auto; right:24px; }
.service-card-body { padding:36px 24px 26px; }
.service-card-body h4 { font-size:1.08rem; font-weight:700; margin-bottom:8px; }
.service-card-body p { font-size:.88rem; color:var(--gray-700); margin-bottom:16px; line-height:1.7; }
.service-card-link { font-family:var(--font-heading); font-size:.82rem; font-weight:600; color:var(--primary); display:inline-flex; align-items:center; gap:6px; }
.service-card-link:hover { gap:10px; color:var(--primary-dark); }

/* How It Works */
.how-section { background:var(--white); }
.step-item { text-align:center; padding:24px 16px; position:relative; }
.step-number { width:60px; height:60px; border-radius:50%; background:var(--primary); color:var(--white); font-family:var(--font-heading); font-size:1.3rem; font-weight:800; display:flex; align-items:center; justify-content:center; margin:0 auto 18px; position:relative; z-index:2; }
.step-connector { display:none; }
/* inset-inline-start, not left. With `left` the dashed connector was drawn to
   the physical right of the number in both directions, so on /ar — the money
   locale, dir=rtl — it pointed away from the step it was meant to join, and the
   4th step's missing connector appeared on the wrong end of the row. */
@media(min-width:768px) { .step-connector { display:block; position:absolute; top:54px; inset-inline-start:calc(50% + 38px); width:calc(100% - 76px); height:2px; background:repeating-linear-gradient(to inline-end,var(--gray-300) 0,var(--gray-300) 6px,transparent 6px,transparent 12px); } }
/* The markup emits <h3> (an <h5> here would skip heading levels under the
   section's <h2>). The old `.step-item h5` rule matched nothing, which is why
   every step carried the same three declarations as an inline style. */
.step-item :is(h3,h4,h5) { font-size:1rem; font-weight:700; margin-bottom:6px; color:var(--dark); }
.step-item { display:flex; flex-direction:column; align-items:center; }
.step-item p { max-width:22ch; margin-inline:auto; }
.step-item p { font-size:.86rem; color:var(--gray-700); line-height:1.6; }

/* Portfolio */
.portfolio-item { position:relative; border-radius:var(--radius-lg); overflow:hidden; cursor:pointer; height:300px; }
.portfolio-item img { width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.portfolio-item:hover img { transform:scale(1.08); }
.portfolio-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(181,17,27,.85) 0%,rgba(12,12,12,.3) 100%); display:flex; flex-direction:column; align-items:center; justify-content:center; opacity:0; transition:opacity .4s ease; text-align:center; padding:20px; }
.portfolio-item:hover .portfolio-overlay { opacity:1; }
.portfolio-overlay .zoom-icon { width:50px; height:50px; border-radius:50%; border:2px solid rgba(255,255,255,.4); display:flex; align-items:center; justify-content:center; color:var(--white); font-size:1.1rem; margin-bottom:12px; transition:transform .3s ease; }
.portfolio-item:hover .zoom-icon { transform:scale(1.1); }
.portfolio-overlay h5 { color:var(--white); font-size:1rem; margin-bottom:4px; }
.portfolio-overlay p { color:rgba(255,255,255,.65); font-size:.82rem; margin:0; }

/* Lightbox */
.lightbox-overlay { position:fixed; inset:0; background:rgba(0,0,0,.92); z-index:99990; display:none; align-items:center; justify-content:center; opacity:0; transition:opacity .3s ease; }
.lightbox-overlay.active { display:flex; opacity:1; }
.lightbox-content { position:relative; max-width:88vw; max-height:85vh; border-radius:var(--radius-md); overflow:hidden; }
.lightbox-content img { max-width:88vw; max-height:85vh; object-fit:contain; border-radius:var(--radius-md); display:block; }
.lightbox-caption { position:absolute; bottom:0; left:0; right:0; background:linear-gradient(to top,rgba(0,0,0,.8),transparent); padding:30px 24px 20px; color:var(--white); }
.lightbox-caption h5 { font-size:1.05rem; margin-bottom:2px; color:var(--white); }
.lightbox-caption p { font-size:.82rem; color:rgba(255,255,255,.6); margin:0; }
.lightbox-close { position:absolute; top:16px; right:16px; width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.1); border:none; color:var(--white); font-size:1.2rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:var(--transition); z-index:10; }
.lightbox-close:hover { background:var(--primary); }
.lightbox-nav { position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; border-radius:50%; background:rgba(255,255,255,.1); border:none; color:var(--white); font-size:1rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:var(--transition); z-index:10; }
.lightbox-nav:hover { background:var(--primary); }
.lightbox-prev { left:16px; }
.lightbox-next { right:16px; }

/* Why Choose Us */
.why-card { padding:32px 24px; border-radius:var(--radius-lg); background:var(--white); border:1px solid rgba(0,0,0,.06); transition:var(--transition); height:100%; }
.why-card:hover { border-color:var(--primary); transform:translateY(-4px); box-shadow:var(--shadow-md); }
.why-card-icon { width:52px; height:52px; border-radius:var(--radius-md); background:var(--primary-glow); display:flex; align-items:center; justify-content:center; margin-bottom:18px; color:var(--primary); font-size:1.2rem; transition:var(--transition); }
.why-card:hover .why-card-icon { background:var(--primary); color:var(--white); }
.why-card h5 { font-size:1rem; font-weight:700; margin-bottom:8px; }
.why-card p { font-size:.88rem; color:var(--gray-700); margin:0; line-height:1.6; }

/* Testimonials */
.testimonial-card { background:var(--white); border-radius:var(--radius-lg); padding:32px; border:1px solid rgba(0,0,0,.06); height:100%; display:flex; flex-direction:column; }
.testimonial-card .stars { color:#f5a623; font-size:.82rem; margin-bottom:14px; letter-spacing:2px; }
.testimonial-card blockquote { font-size:.92rem; color:var(--gray-700); line-height:1.8; margin-bottom:20px; font-style:italic; flex:1; border-left:3px solid var(--primary); padding-left:16px; }
.testimonial-author { display:flex; align-items:center; gap:12px; }
.testimonial-avatar { width:44px; height:44px; border-radius:50%; overflow:hidden; flex-shrink:0; }
.testimonial-avatar img { width:100%; height:100%; object-fit:cover; }
.testimonial-info h6 { font-size:.86rem; font-weight:700; margin-bottom:2px; }
.testimonial-info span { font-size:.76rem; color:var(--gray-500); }

/* CTA */
.cta-section { position:relative; padding:100px 0; overflow:hidden; }
.cta-section .cta-bg { position:absolute; inset:0; }
.cta-section .cta-bg img { width:100%; height:100%; object-fit:cover; }
.cta-section .cta-overlay { position:absolute; inset:0; background:linear-gradient(135deg,rgba(12,12,12,.88) 0%,rgba(181,17,27,.7) 100%); }
.cta-section h2 { color:var(--white); font-size:clamp(1.6rem,4vw,2.6rem); font-weight:800; letter-spacing:-.5px; }
.cta-section p { color:rgba(255,255,255,.55); font-size:1.05rem; max-width:480px; margin:14px auto 32px; }

/* Footer */
.footer-main { background:var(--dark); color:rgba(255,255,255,.6); padding:72px 0 0; }
.footer-brand { font-family:var(--font-heading); font-size:1.4rem; font-weight:800; color:var(--white); margin-bottom:12px; }
.footer-brand span { color:var(--primary); }
.footer-main p { font-size:.9rem; line-height:1.8; }
.footer-heading { font-family:var(--font-heading); font-size:.78rem; font-weight:700; color:var(--white); text-transform:uppercase; letter-spacing:1.5px; margin-bottom:22px; }
.footer-links li { margin-bottom:10px; }
.footer-links a { font-size:.9rem; color:rgba(255,255,255,.45); transition:var(--transition); }
.footer-links a:hover { color:var(--primary-light); padding-left:4px; }
.footer-contact-item { display:flex; align-items:flex-start; gap:12px; margin-bottom:14px; font-size:.9rem; }
.footer-contact-item i { color:var(--primary); margin-top:3px; }
.footer-social { display:flex; gap:8px; margin-top:18px; }
.footer-social a { width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.07); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.45); font-size:.9rem; transition:var(--transition); }
.footer-social a:hover { background:var(--primary); color:var(--white); }
.footer-bottom { border-top:1px solid rgba(255,255,255,.08); padding:22px 0; margin-top:50px; text-align:center; font-size:.82rem; }

/* Page Header */
.page-header { background:linear-gradient(135deg,var(--dark) 0%,var(--primary-dark) 100%); padding:140px 0 70px; text-align:center; position:relative; overflow:hidden; }
.page-header::before { content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px); background-size:60px 60px; }
.page-header h1 { color:var(--white); font-size:clamp(1.8rem,4vw,2.6rem); font-weight:800; letter-spacing:-.5px; position:relative; }
.page-header p { color:rgba(255,255,255,.55); font-size:1rem; max-width:460px; margin:10px auto 0; position:relative; }

/* Breadcrumb banner photography.
   The photo is the BOTTOM layer; the brand gradient sits on top at .92/.88
   alpha. That ordering is deliberate — white h1 text and the rgba(255,255,255,.55)
   lede both have to keep WCAG 2.2 AA contrast over whatever photograph is
   behind them, and a scrim that heavy makes the result independent of the
   image's own luminance. url() is relative to this stylesheet, not the site
   root, so it survives the /printsmax sub-directory install.
   These are decorative backgrounds only — never a claim about our premises. */
.page-header.has-banner {
  background-image:
    linear-gradient(135deg, rgba(12,12,12,.92) 0%, rgba(142,13,21,.88) 100%),
    var(--banner-img);
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}
.page-header--paper     { --banner-img: url('../images/banners/banner-paper.webp'); }
.page-header--packaging { --banner-img: url('../images/banners/banner-packaging.webp'); }
.page-header--riyadh    { --banner-img: url('../images/banners/banner-riyadh.webp'); }
.page-header--design    { --banner-img: url('../images/banners/banner-design.webp'); }
.page-header--press     { --banner-img: url('../images/banners/banner-press.webp'); }

/* The banner is decoration. Anyone who has asked for less motion/contrast noise
   gets the flat gradient the design shipped with. */
@media (prefers-reduced-motion: reduce), (prefers-contrast: more) {
  .page-header.has-banner { background-image: linear-gradient(135deg,var(--dark) 0%,var(--primary-dark) 100%); }
}
.breadcrumb-custom { display:flex; justify-content:center; gap:8px; margin-top:16px; position:relative; }
.breadcrumb-custom a { color:rgba(255,255,255,.45); font-size:.82rem; }
.breadcrumb-custom a:hover { color:var(--white); }
.breadcrumb-custom span { color:rgba(255,255,255,.3); font-size:.82rem; }
.breadcrumb-custom .current { color:var(--primary-light); font-size:.82rem; }

/* Shop */
.shop-filters { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:36px; }
.filter-btn { padding:8px 18px; border-radius:50px; border:1px solid var(--gray-300); background:var(--white); font-family:var(--font-heading); font-size:.78rem; font-weight:500; color:var(--gray-700); cursor:pointer; transition:var(--transition); }
.filter-btn.active,.filter-btn:hover { background:var(--primary); color:var(--white); border-color:var(--primary); }
.product-card { background:var(--white); border-radius:var(--radius-lg); overflow:hidden; border:1px solid rgba(0,0,0,.06); transition:var(--transition); height:100%; display:flex; flex-direction:column; }
.product-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-xl); border-color:transparent; }
.product-card-img { height:220px; position:relative; overflow:hidden; }
.product-card-img img { width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.product-card:hover .product-card-img img { transform:scale(1.05); }
.product-card-badge { position:absolute; top:12px; left:12px; background:var(--primary); color:var(--white); font-family:var(--font-heading); font-size:.65rem; font-weight:600; padding:4px 10px; border-radius:50px; text-transform:uppercase; letter-spacing:.5px; z-index:2; }
html[dir="rtl"] .product-card-badge { left:auto; right:12px; }
.product-card-body { padding:22px; flex:1; display:flex; flex-direction:column; }
.product-card-body h5 { font-size:1rem; font-weight:700; margin-bottom:5px; }
.product-card-body h5 a { color:var(--dark); }
.product-card-body h5 a:hover { color:var(--primary); }
.product-card-body p { font-size:.85rem; color:var(--gray-700); margin-bottom:18px; flex:1; line-height:1.6; }
.product-card-footer { display:flex; align-items:center; gap:8px; }
.qty-control { display:flex; align-items:center; border:1px solid var(--gray-200); border-radius:var(--radius-sm); overflow:hidden; }
.qty-btn { width:32px; height:32px; border:none; background:var(--gray-100); cursor:pointer; font-weight:600; color:var(--gray-700); display:flex; align-items:center; justify-content:center; transition:background .2s ease; font-size:.95rem; }
.qty-btn:hover { background:var(--gray-200); }
.qty-input { width:42px; height:32px; border:none; text-align:center; font-family:var(--font-heading); font-size:.82rem; font-weight:600; outline:none; background:var(--white); }
.qty-input::-webkit-outer-spin-button,.qty-input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.qty-input[type=number] { -moz-appearance:textfield; }
.btn-add-cart { flex:1; padding:8px 14px; background:var(--primary); color:var(--white); border:none; border-radius:var(--radius-sm); font-family:var(--font-heading); font-size:.78rem; font-weight:600; cursor:pointer; transition:var(--transition); display:flex; align-items:center; justify-content:center; gap:5px; }
.btn-add-cart:hover { background:var(--primary-dark); }

/* Product Detail */
.product-detail-img { border-radius:var(--radius-lg); overflow:hidden; height:460px; }
.product-detail-img img { width:100%; height:100%; object-fit:cover; }
.product-detail-info h1 { font-size:1.9rem; font-weight:800; margin-bottom:10px; letter-spacing:-.5px; }
.product-detail-info .product-meta { display:flex; gap:10px; margin-bottom:18px; flex-wrap:wrap; }
.product-meta-tag { background:var(--gray-100); border-radius:50px; padding:4px 12px; font-size:.75rem; font-weight:600; color:var(--gray-700); display:inline-flex; align-items:center; gap:4px; }
.product-detail-info .desc { font-size:.95rem; color:var(--gray-700); line-height:1.8; margin-bottom:24px; }
.product-features { margin-bottom:24px; }
.product-features li { display:flex; align-items:center; gap:10px; margin-bottom:8px; font-size:.9rem; color:var(--gray-700); }
.product-features li i { color:var(--primary); font-size:.82rem; flex-shrink:0; }
.product-detail-actions { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px; align-items:center; }
.related-products h3 { font-size:1.3rem; font-weight:700; margin-bottom:24px; }

/* Cart */
.cart-table-wrap { background:var(--white); border-radius:var(--radius-lg); border:1px solid rgba(0,0,0,.06); overflow:hidden; }
.cart-table { width:100%; border-collapse:collapse; }
.cart-table thead { background:var(--gray-100); }
.cart-table th { padding:14px 18px; font-family:var(--font-heading); font-size:.75rem; font-weight:600; text-transform:uppercase; letter-spacing:1px; color:var(--gray-500); text-align:left; }
html[dir="rtl"] .cart-table th { text-align:right; }
.cart-table td { padding:18px; border-bottom:1px solid var(--gray-100); vertical-align:middle; }
.cart-product-info { display:flex; align-items:center; gap:12px; }
.cart-product-thumb { width:52px; height:52px; border-radius:var(--radius-sm); overflow:hidden; flex-shrink:0; }
.cart-product-thumb img { width:100%; height:100%; object-fit:cover; }
.cart-product-name { font-family:var(--font-heading); font-size:.88rem; font-weight:600; }
.cart-remove-btn { border:none; background:none; color:var(--gray-500); cursor:pointer; font-size:.9rem; transition:var(--transition); padding:4px; }
.cart-remove-btn:hover { color:var(--primary); }
.cart-summary { background:var(--white); border-radius:var(--radius-lg); border:1px solid rgba(0,0,0,.06); padding:28px; }
.cart-summary h4 { font-size:1.1rem; font-weight:700; margin-bottom:20px; padding-bottom:14px; border-bottom:1px solid var(--gray-100); display:flex; align-items:center; gap:8px; }
.cart-summary-row { display:flex; justify-content:space-between; margin-bottom:10px; font-size:.92rem; }
.cart-summary-row.total { font-family:var(--font-heading); font-weight:700; font-size:1.1rem; padding-top:14px; border-top:2px solid var(--dark); margin-top:14px; }
.cart-empty { text-align:center; padding:70px 20px; }
.cart-empty i { font-size:3.5rem; color:var(--gray-300); margin-bottom:18px; display:block; }
.cart-empty h4 { font-size:1.2rem; margin-bottom:8px; }
.cart-empty p { color:var(--gray-500); margin-bottom:24px; font-size:.92rem; }

/* Quote Form */
.quote-form-wrap { background:var(--white); border-radius:var(--radius-lg); border:1px solid rgba(0,0,0,.06); padding:44px; }
.form-group-custom { margin-bottom:20px; }
.form-group-custom label { display:block; font-family:var(--font-heading); font-size:.82rem; font-weight:600; color:var(--dark); margin-bottom:6px; }
.form-control-custom { width:100%; padding:12px 16px; border:1px solid rgba(0,0,0,.1); border-radius:var(--radius-sm); font-size:.92rem; color:var(--dark); transition:border-color .3s ease,box-shadow .3s ease; background:var(--white); outline:none; }
.form-control-custom:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(181,17,27,.08); }
.form-control-custom::placeholder { color:var(--gray-500); }
textarea.form-control-custom { resize:vertical; min-height:110px; }
select.form-control-custom { cursor:pointer; }
.quote-info-card { background:var(--white); border-radius:var(--radius-lg); border:1px solid rgba(0,0,0,.06); padding:30px; margin-bottom:20px; }
.quote-info-card h5 { font-size:1rem; font-weight:700; margin-bottom:14px; display:flex; align-items:center; gap:8px; }
.quote-info-item { display:flex; align-items:flex-start; gap:10px; margin-bottom:12px; }
.quote-info-item i { color:var(--primary); font-size:.9rem; margin-top:3px; flex-shrink:0; }
.quote-info-item span { font-size:.88rem; color:var(--gray-700); }

/* FAQs */
.faq-section { background: var(--white); }
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item { background: var(--white); border: 1px solid rgba(0,0,0,.08); border-radius: var(--radius-md); padding: 0; transition: border-color .25s ease, box-shadow .25s ease; }
.faq-item[open] { border-color: var(--primary); box-shadow: var(--shadow-sm); }
.faq-item summary { list-style: none; cursor: pointer; padding: 18px 22px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-family: var(--font-heading); font-weight: 600; font-size: .98rem; color: var(--dark); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item .faq-icon { width: 28px; height: 28px; border-radius: 50%; background: var(--primary-glow); color: var(--primary); display: inline-flex; align-items: center; justify-content: center; font-size: .75rem; transition: transform .3s ease, background .25s ease; flex-shrink: 0; }
.faq-item[open] .faq-icon { transform: rotate(45deg); background: var(--primary); color: var(--white); }
.faq-item .faq-a { padding: 0 22px 18px; color: var(--gray-700); font-size: .92rem; line-height: 1.8; }
html[dir="rtl"] .faq-item summary { font-family: var(--font-ar); }

/* Specs table */
.specs-table-wrap { margin-bottom: 28px; }
.specs-table { width: 100%; border-collapse: collapse; background: var(--white); border-radius: var(--radius-md); overflow: hidden; border: 1px solid rgba(0,0,0,.06); }
.specs-table th, .specs-table td { padding: 12px 16px; font-size: .9rem; text-align: start; border-bottom: 1px solid var(--gray-100); }
.specs-table tr:last-child th, .specs-table tr:last-child td { border-bottom: none; }
.specs-table th { background: var(--gray-100); font-family: var(--font-heading); font-weight: 600; color: var(--gray-700); width: 38%; }
.specs-table td { color: var(--dark); }

/* Toast */
.toast-notification { position:fixed; bottom:24px; right:24px; background:var(--dark); color:var(--white); padding:14px 22px; border-radius:var(--radius-md); font-family:var(--font-heading); font-size:.85rem; font-weight:500; box-shadow:var(--shadow-xl); z-index:9999; display:flex; align-items:center; gap:10px; transform:translateY(100px); opacity:0; transition:var(--transition); }
html[dir="rtl"] .toast-notification { right:auto; left:24px; }
.toast-notification.show { transform:translateY(0); opacity:1; }
.toast-notification i { color:var(--green); font-size:1rem; }

/* Animations */
.fade-up { opacity:0; transform:translateY(24px); transition:opacity .6s ease,transform .6s ease; }
.fade-up.visible { opacity:1; transform:translateY(0); }

/* Responsive */
@media(max-width:1199px) { .hero-slider .swiper-button-next,.hero-slider .swiper-button-prev { display:none; } }
@media(max-width:991px) {
  .hero-slide-content h1 { font-size:2.4rem; }
  .product-detail-img { height:340px; }
  .quote-form-wrap { padding:28px 22px; }
  .navbar-collapse { background:var(--white); border-radius:var(--radius-md); padding:16px; margin-top:10px; box-shadow:var(--shadow-lg); }
  .navbar-main .navbar-collapse .nav-link { color:var(--gray-700)!important; }
  .navbar-main .navbar-collapse .nav-link:hover,.navbar-main .navbar-collapse .nav-link.active { color:var(--primary)!important; }
  .navbar-main .navbar-collapse .nav-cart { color:var(--dark); }
  .navbar-main .navbar-collapse .lang-toggle { background:var(--gray-100); }
  .navbar-main .navbar-collapse .lang-toggle button { color:var(--gray-500); }
  .navbar-main .navbar-collapse .lang-toggle button.active { color:var(--white); }
}
@media(max-width:767px) {
  .hero-slider { height:85vh; min-height:480px; }
  .section-padding { padding:64px 0; }
  .section-header { margin-bottom:36px; }
  .portfolio-item { height:200px; }
  .product-detail-img { height:260px; margin-bottom:24px; }
  .cart-table th:nth-child(3),.cart-table td:nth-child(3) { display:none; }
  .hero-buttons { flex-direction:column; }
  .hero-buttons .btn-main { width:100%; justify-content:center; }
  .stat-number { font-size:2rem; }
  .stat-label { font-size:.7rem; }
}
@media(max-width:576px) {
  .hero-slide-content h1 { font-size:1.9rem; letter-spacing:-.5px; }
  .quote-form-wrap { padding:22px 16px; }
  .hero-slide-content { padding-top:20px; }
  .hero-slide-content p { font-size:.95rem; }
}

/* ============================
   ADDITIONAL DESIGN FIXES
   ============================ */

/* Service card placeholder */
.service-card-placeholder, .product-card-placeholder, .portfolio-placeholder {
  width:100%; height:100%; background:var(--gray-100);
  display:flex; align-items:center; justify-content:center;
}
.service-card-placeholder i, .product-card-placeholder i, .portfolio-placeholder i {
  font-size:3rem; color:var(--gray-300);
}

/* Service detail hero */
.service-detail-hero {
  position:relative; border-radius:var(--radius-lg); overflow:hidden;
  height:380px; margin-bottom:50px;
}
.service-detail-hero img { width:100%; height:100%; object-fit:cover; }
.service-detail-hero-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(12,12,12,.85), rgba(12,12,12,.3));
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:40px;
}
.service-detail-hero-overlay h1 {
  color:var(--white); font-size:clamp(1.8rem,4vw,2.6rem); margin-bottom:8px;
}
.service-detail-hero-overlay p {
  color:rgba(255,255,255,.6); font-size:1rem; max-width:600px; margin:0;
}

/* Service description */
.service-desc { font-size:1.05rem; color:var(--gray-700); line-height:1.9; }
.service-desc p { margin-bottom:16px; }

/* Features box */
.features-box {
  background:var(--white); border:1px solid rgba(0,0,0,.06);
  border-radius:var(--radius-lg); padding:32px;
}
.features-box h4 { font-size:1.1rem; font-weight:700; margin-bottom:18px; }
.features-box .product-features { margin:0; }

/* Language toggle fix */
.lang-toggle { text-decoration:none; }
.lang-toggle .lang-btn {
  text-decoration:none; display:inline-block;
  padding:5px 12px; border-radius:50px;
  font-size:.72rem; font-weight:600;
  transition:all .3s ease;
  color:rgba(255,255,255,.6);
  font-family:var(--font-heading);
}
.navbar-main.scrolled .lang-toggle .lang-btn,
.navbar-main.navbar-light-bg .lang-toggle .lang-btn { color:var(--gray-500); }
.lang-toggle .lang-btn.active { background:var(--primary); color:var(--white); }
.navbar-main.scrolled .lang-toggle .lang-btn.active,
.navbar-main.navbar-light-bg .lang-toggle .lang-btn.active { color:var(--white); }
.lang-toggle .lang-btn:hover:not(.active) { color:var(--white); }
.navbar-main.scrolled .lang-toggle .lang-btn:hover:not(.active),
.navbar-main.navbar-light-bg .lang-toggle .lang-btn:hover:not(.active) { color:var(--primary); }

/* Better RTL support */
html[dir="rtl"] .me-3 { margin-right:0!important; margin-left:1rem!important; }
html[dir="rtl"] .ms-auto { margin-right:auto!important; margin-left:0!important; }
html[dir="rtl"] .fa-arrow-right { transform:scaleX(-1); }
html[dir="rtl"] .service-card-link .fa-arrow-right { transform:scaleX(-1); }
html[dir="rtl"] .testimonial-card blockquote { border-left:none; border-right:3px solid var(--primary); padding-left:0; padding-right:16px; }
html[dir="rtl"] .service-card-img .service-icon-badge { left:auto; right:24px; }
html[dir="rtl"] .product-card-badge { left:auto; right:12px; }
html[dir="rtl"] .footer-links a:hover { padding-left:0; padding-right:4px; }
html[dir="rtl"] .hero-slide-content { text-align:right; }

/* Fix mobile nav dropdown on light bg */
@media(max-width:991px) {
  .navbar-collapse {
    background:var(--white); border-radius:var(--radius-md);
    padding:16px; margin-top:10px; box-shadow:var(--shadow-lg);
  }
  .navbar-main .navbar-collapse .nav-link { color:var(--gray-700)!important; }
  .navbar-main .navbar-collapse .nav-link:hover,
  .navbar-main .navbar-collapse .nav-link.active { color:var(--primary)!important; }
  .navbar-main .navbar-collapse .nav-cart { color:var(--dark); }
  .navbar-main .navbar-collapse .lang-toggle { background:var(--gray-100); }
  .navbar-main .navbar-collapse .lang-toggle .lang-btn { color:var(--gray-500); }
  .navbar-main .navbar-collapse .lang-toggle .lang-btn.active { color:var(--white); }
  .service-detail-hero { height:260px; }
}

@media(max-width:576px) {
  .service-detail-hero { height:220px; }
  .service-detail-hero-overlay { padding:24px; }
}

/* ============================================================
   FLOATING CART — always-accessible cart shortcut
   ============================================================ */
.floating-cart {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9990;
  display: none;            /* shown by JS when cart > 0 */
  align-items: center;
  gap: 10px;
  padding: 14px 22px 14px 18px;
  background: var(--primary);
  color: var(--white) !important;
  border-radius: 50px;
  box-shadow: 0 10px 30px rgba(181,17,27,.35), 0 4px 10px rgba(0,0,0,.10);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: .88rem;
  letter-spacing: .3px;
  text-decoration: none;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s ease;
  transform-origin: bottom right;
}
.floating-cart:hover,
.floating-cart:focus-visible {
  background: var(--primary-dark);
  transform: translateY(-3px);
  box-shadow: 0 16px 42px rgba(181,17,27,.45), 0 4px 10px rgba(0,0,0,.12);
}
.floating-cart .floating-cart-icon { font-size: 1.05rem; line-height: 1; }
.floating-cart .floating-cart-label { white-space: nowrap; }
.floating-cart .floating-cart-count {
  background: var(--white);
  color: var(--primary);
  min-width: 24px;
  height: 24px;
  border-radius: 50px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: .76rem;
  font-weight: 800;
  line-height: 1;
}

/* RTL: flip to bottom-left */
html[dir="rtl"] .floating-cart {
  right: auto;
  left: 24px;
  padding: 14px 18px 14px 22px;
  transform-origin: bottom left;
}

/* Add-to-cart pulse */
@keyframes floating-cart-pulse {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.14); }
  60%  { transform: scale(.96); }
  100% { transform: scale(1); }
}
.floating-cart.pulse { animation: floating-cart-pulse .55s var(--ease); }

/* Phones: collapse to icon + count, smaller offset to clear the viewport edge */
@media (max-width: 575px) {
  .floating-cart {
    bottom: 16px;
    right: 16px;
    padding: 12px 14px;
    gap: 8px;
  }
  html[dir="rtl"] .floating-cart {
    left: 16px;
    right: auto;
    padding: 12px 14px;
  }
  .floating-cart .floating-cart-label { display: none; }
}

/* ============================================================
   RESPONSIVE REFINEMENTS — Mobile & Tablet polish
   ============================================================ */

/* Never let anything cause a horizontal scrollbar on mobile */
html, body { max-width: 100%; }
body { overflow-x: hidden; }

/* Use dynamic viewport height where supported (fixes iOS Safari URL-bar jump) */
@supports (height: 100dvh) {
  .hero-slider { height: 100dvh; }
}

/* ---------- TABLET (≤ 991px) ---------- */
@media (max-width: 991px) {
  .section-padding { padding: 80px 0; }
  .section-header  { margin-bottom: 40px; }

  .page-header     { padding: 110px 0 56px; }
  .cta-section     { padding: 80px 0; }
  .footer-main     { padding: 56px 0 0; }
  .footer-bottom   { margin-top: 36px; }

  .service-card-img    { height: 200px; }
  .product-detail-img  { height: 380px; }
  .quote-info-card     { padding: 24px; }

  /* Mobile nav: larger tap targets, lang switcher wraps below nav */
  .navbar-main .navbar-collapse .nav-link { padding: 12px 14px !important; font-size: .95rem; }
  .navbar-main .navbar-collapse .d-flex   { flex-wrap: wrap; gap: 10px !important; }
  .navbar-main .navbar-collapse .lang-toggle { margin-left: 0; margin-right: 0; }
}

/* ---------- PHONES (≤ 767px) ---------- */
@media (max-width: 767px) {
  .section-padding   { padding: 56px 0; }
  .section-title     { font-size: clamp(1.6rem, 6vw, 2.2rem); }
  .section-subtitle  { font-size: .98rem; }
  .section-header    { margin-bottom: 30px; }

  .page-header       { padding: 96px 0 44px; }
  .page-header p     { font-size: .92rem; }
  .breadcrumb-custom { gap: 6px; flex-wrap: wrap; padding: 0 12px; }
  .breadcrumb-custom a, .breadcrumb-custom span, .breadcrumb-custom .current { font-size: .78rem; }

  .cta-section       { padding: 64px 0; }
  .cta-section p     { font-size: .95rem; margin-top: 10px; }

  .hero-slider .swiper-pagination { bottom: 24px !important; }
  .hero-slider .swiper-pagination-bullet { width: 22px; }
  .hero-slider .swiper-pagination-bullet-active { width: 36px; }
  .hero-slide-content p { font-size: .98rem; margin-bottom: 24px; }

  /* Stats: safer on a 4-column grid at narrow widths */
  .stats-section { padding: 36px 0; }
  .stat-item     { padding: 12px 6px; }
  .stat-number   { font-size: 1.7rem; }
  .stat-label    { font-size: .65rem; letter-spacing: 1px; }

  /* Service / Why / Testimonial cards */
  .service-card-img      { height: 180px; }
  .service-card-body     { padding: 30px 20px 22px; }
  .service-card-body h4  { font-size: 1.04rem; }
  .why-card              { padding: 24px 20px; }
  .testimonial-card      { padding: 24px 22px; }

  /* Portfolio (taller now that it's one column) */
  .portfolio-item { height: 240px; }

  /* Product cards: bigger tap targets */
  .product-card-img      { height: 200px; }
  .product-card-body     { padding: 18px 18px 20px; }
  .product-card-footer   { gap: 10px; }
  .qty-control .qty-btn  { width: 36px; height: 36px; font-size: 1rem; }
  .qty-input             { width: 44px; height: 36px; }
  .btn-add-cart          { padding: 10px 14px; font-size: .82rem; min-height: 36px; }

  /* Product detail: actions stack vertically and span full width */
  .product-detail-info h1 { font-size: 1.5rem; }
  .product-detail-actions { flex-direction: column; align-items: stretch; gap: 12px; }
  .product-detail-actions .qty-control { align-self: flex-start; }
  .product-detail-actions .btn-main,
  .product-detail-actions .btn-whatsapp { width: 100%; justify-content: center; }

  /* Cart → card layout on phones (no JS change needed)
     Grid layout so qty stays at the start, remove stays at the end,
     and the whole thing mirrors automatically in RTL. */
  .cart-table-wrap { background: transparent; border: none; }
  .cart-table, .cart-table tbody { display: block; width: 100%; }
  .cart-table thead { display: none; }
  .cart-table tr {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "product product"
      "qty     remove";
    column-gap: 12px;
    row-gap: 10px;
    background: var(--white);
    border: 1px solid rgba(0,0,0,.06);
    border-radius: var(--radius-md);
    padding: 14px;
    margin-bottom: 12px;
    box-shadow: var(--shadow-sm);
    align-items: center;
  }
  .cart-table td { display: block; padding: 0; border: none; }
  .cart-table td:first-child { grid-area: product; }
  .cart-table td:nth-child(2) { grid-area: qty; justify-self: start; }
  .cart-table td:nth-child(4) { grid-area: remove; justify-self: end; }
  .cart-table .cart-product-info { gap: 14px; }
  .cart-table .cart-remove-btn { font-size: 1.05rem; padding: 8px 10px; }

  .cart-summary { padding: 22px; }

  /* Forms: 16px font prevents iOS auto-zoom on focus */
  .form-control-custom        { padding: 14px 16px; font-size: 1rem; }
  textarea.form-control-custom { min-height: 130px; }
  .quote-form-wrap            { padding: 24px 18px; }

  /* Footer */
  .footer-main    { padding: 48px 0 0; }
  .footer-brand   { font-size: 1.25rem; }
  .footer-heading { margin-bottom: 16px; }
  .footer-bottom  { padding: 18px 0; margin-top: 32px; font-size: .78rem; }

  /* Lightbox: more breathing room on phones */
  .lightbox-content,
  .lightbox-content img { max-width: 94vw; max-height: 78vh; }
  .lightbox-caption     { padding: 22px 16px 14px; }
  .lightbox-close       { top: 10px; right: 10px; }
  html[dir="rtl"] .lightbox-close { right: auto; left: 10px; }

  /* Marquee a bit calmer */
  .marquee-item  { font-size: .7rem; letter-spacing: 1.2px; }
  .marquee-track { gap: 28px; animation-duration: 24s; }

  /* Toast full-width banner on phones */
  .toast-notification { left: 16px; right: 16px; bottom: 16px; justify-content: center; }
  html[dir="rtl"] .toast-notification { left: 16px; right: 16px; }

  /* Service detail */
  .service-detail-hero         { height: 240px; margin-bottom: 32px; }
  .service-detail-hero-overlay { padding: 22px; }
  .features-box                { padding: 22px; }
  .service-desc                { font-size: 1rem; }

  /* FAQ */
  .faq-item summary { padding: 14px 16px; font-size: .92rem; }
  .faq-item .faq-a  { padding: 0 16px 14px; font-size: .9rem; }
}

/* ---------- SMALL PHONES (≤ 480px) ---------- */
@media (max-width: 480px) {
  .section-padding      { padding: 48px 0; }
  .navbar-brand-custom  { font-size: 1.3rem; }
  .btn-main, .btn-whatsapp { padding: 12px 22px; font-size: .82rem; }
  .btn-nav-quote        { padding: 7px 14px; font-size: .72rem; }

  .hero-slider          { min-height: 520px; }
  .hero-slide-content   { padding-top: 12px; }
  .hero-slide-content h1 { font-size: 1.7rem; }

  .stat-number          { font-size: 1.5rem; }
  .stat-label           { font-size: .6rem; letter-spacing: .8px; }

  .why-card             { padding: 22px 18px; }
  .testimonial-card     { padding: 20px 18px; }
  .product-detail-img   { height: 220px; }

  .lightbox-nav         { width: 40px; height: 40px; }
  .lightbox-prev        { left: 8px; }
  .lightbox-next        { right: 8px; }
  html[dir="rtl"] .lightbox-prev { left: auto; right: 8px; }
  html[dir="rtl"] .lightbox-next { right: auto; left: 8px; }
}

/* ============================================================
   ARABIC / RTL — mobile polish
   ============================================================ */

/* Hero <h2> (slides 2+) has an inline negative letter-spacing that
   shreds Arabic ligatures. Force a sane value, and let LTR keep the
   tight kerning of the original h1 design. */
.hero-slide-h { letter-spacing: -1.5px; }
html[dir="rtl"] .hero-slide-h { letter-spacing: 0 !important; }
html[dir="rtl"] .hero-slide-content h1 { letter-spacing: 0 !important; }

/* Arabic numerals + Latin words inside Arabic body text should stay legible.
   Cairo handles this well; just make sure we never inherit a negative tracking. */
html[dir="rtl"] .section-title,
html[dir="rtl"] .page-header h1,
html[dir="rtl"] .cta-section h2 { letter-spacing: 0 !important; }

@media (max-width: 767px) {
  /* RTL phones: keep hero text snug to the right edge of the container,
     and let buttons span full width without odd start-side gaps. */
  html[dir="rtl"] .hero-slide-content { text-align: right; padding-inline-end: 0; }
  html[dir="rtl"] .hero-buttons { align-items: stretch; }

  /* Breadcrumb separators ("/") sit awkwardly in RTL — keep them upright. */
  html[dir="rtl"] .breadcrumb-custom { direction: rtl; }
  html[dir="rtl"] .breadcrumb-custom span { unicode-bidi: isolate; }

  /* Cart product info: thumb on the leading side, name flows naturally. */
  html[dir="rtl"] .cart-table .cart-product-info { direction: rtl; }

  /* Footer in RTL: keep the social icons row aligned to the start side. */
  html[dir="rtl"] .footer-social { justify-content: flex-start; }

  /* Toast: arrow-up icon shouldn't flip in RTL on phones. */
  html[dir="rtl"] .toast-notification i { transform: none; }

  /* Floating cart pulse origin needs to follow the RTL flip;
     rule already exists above, but make sure the cart sits clear
     of the WhatsApp/scroll-to-top area on the left edge. */
  html[dir="rtl"] .floating-cart { left: 16px; right: auto; bottom: 16px; }
}

/* Small phones: tighter floating cart so it doesn't crowd the screen. */
@media (max-width: 380px) {
  .floating-cart { padding: 10px 12px; gap: 6px; }
  html[dir="rtl"] .floating-cart { padding: 10px 12px; }
  .floating-cart .floating-cart-count { min-width: 22px; height: 22px; font-size: .72rem; }
}

/* ============================================================
   PAGE WIDTH FIXES — eliminate stray gaps in Arabic layout
   ============================================================ */

/* Reserve scrollbar space on both edges. Without this, switching between
   short and tall pages (or between LTR and RTL) shifts content because
   the vertical scrollbar appears/disappears, leaving a 15px gap. */
html { scrollbar-gutter: stable; }

/* Defensive: body explicitly inherits its direction from <html>.
   Some browsers (older Safari, certain in-app webviews) lose the
   inheritance through fixed-position descendants. */
body { direction: inherit; }
html[dir="rtl"] body { direction: rtl; }

/* Every top-level section must occupy the full viewport width.
   Catches any utility class or stray margin that could leave a
   strip of background visible on one side. */
main > section { width: 100%; max-width: 100%; margin-inline: 0; }

/* Bootstrap `.row` uses negative horizontal margins that, combined
   with our body `overflow-x: hidden`, can clip on the trailing side
   in RTL. Pin the row to its container by collapsing the negative
   margin on the side that would otherwise overflow the viewport. */
.container > .row,
.container-fluid > .row { margin-inline: 0; }
.container > .row > [class*="col-"],
.container-fluid > .row > [class*="col-"] {
  padding-inline-start: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
  padding-inline-end:   calc(var(--bs-gutter-x, 1.5rem) * 0.5);
}

/* ============================================================
   ARABIC / RTL — bug fixes (apply at all breakpoints)
   ============================================================ */

/* 1. Cart count badge sticks to the trailing edge of the cart icon */
html[dir="rtl"] .cart-count { right: auto; left: 0; }

/* 2. Lightbox controls: mirror at all viewport sizes (mobile rule already
   handles ≤480px; this covers tablet + desktop). */
html[dir="rtl"] .lightbox-close { right: auto; left: 16px; }
html[dir="rtl"] .lightbox-prev  { left: auto; right: 16px; }
html[dir="rtl"] .lightbox-next  { right: auto; left: 16px; }

/* 3. Chevron icons inside lightbox prev/next must flip too, otherwise
   the arrowheads point the wrong way after position swap. */
html[dir="rtl"] .lightbox-prev .fa-chevron-left,
html[dir="rtl"] .lightbox-next .fa-chevron-right { transform: scaleX(-1); }

/* 4. Unified arrow flip: both back (.fa-arrow-left) and forward
   (.fa-arrow-right) arrows mirror in Arabic so reading-direction
   intent matches visual direction. Blade now uses a STATIC icon
   class and lets CSS do the mirroring; this also fixes the
   double-flip bug that left "back" arrows pointing the wrong way. */
html[dir="rtl"] .fa-arrow-left,
html[dir="rtl"] .fa-arrow-right { transform: scaleX(-1); }

/* 5. Negative letter-spacing on .product-detail-info h1 has the same
   specificity as the generic RTL reset, but is defined later in the
   file so it wins. Force it back to 0 for Arabic. */
html[dir="rtl"] .product-detail-info h1,
html[dir="rtl"] .hero-slide-content h1 { letter-spacing: 0 !important; }

/* 6. Numeric / phone / email inputs in Arabic should display Western
   digits (0-9) and stay LTR; the field still aligns to the start
   side (right edge) thanks to `text-align: end`. */
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="number"],
html[dir="rtl"] input[type="url"],
html[dir="rtl"] .qty-input {
  direction: ltr;
  text-align: end;
  unicode-bidi: plaintext;
}

/* Phone / email / WhatsApp links inside Arabic body text */
html[dir="rtl"] a[href^="tel:"],
html[dir="rtl"] a[href^="mailto:"],
html[dir="rtl"] a[href*="wa.me"] {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}

/* ---------------------------------------------------------------------------
   Pagination
   Bootstrap's own pager is neutral grey; these rules put it in the brand
   palette and make the hit targets meet the WCAG 2.2 AA 24x24 minimum.
   Everything here uses logical properties, so the RTL stylesheet mirrors it
   without a second rule set.
--------------------------------------------------------------------------- */
.pagination-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-block-start: 2.5rem;
}

.pagination-wrap .pagination {
  --bs-pagination-color: var(--gray-700, #374151);
  --bs-pagination-bg: #fff;
  --bs-pagination-border-color: var(--gray-200, #e5e7eb);
  --bs-pagination-hover-color: var(--primary);
  --bs-pagination-hover-bg: var(--primary-glow);
  --bs-pagination-hover-border-color: var(--primary-light);
  --bs-pagination-focus-color: var(--primary-dark);
  --bs-pagination-focus-bg: var(--primary-glow);
  --bs-pagination-focus-box-shadow: 0 0 0 0.2rem var(--primary-glow);
  --bs-pagination-active-bg: var(--primary);
  --bs-pagination-active-border-color: var(--primary);
  --bs-pagination-disabled-color: var(--gray-400, #9ca3af);
  --bs-pagination-disabled-bg: #fff;
  --bs-pagination-disabled-border-color: var(--gray-200, #e5e7eb);
  gap: 0.25rem;
  flex-wrap: wrap;
  margin-block-end: 0;
}

.pagination-wrap .page-link {
  min-inline-size: 2.75rem;
  min-block-size: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  font-weight: 600;
  font-variant-numeric: lining-nums tabular-nums;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

/* The arrow glyphs are small; scale them without changing the box. */
.pagination-wrap .page-link span[aria-hidden="true"] {
  font-size: 1.35em;
  line-height: 1;
}

.pagination-wrap .page-item.active .page-link {
  box-shadow: 0 2px 8px var(--primary-glow);
}

@media (prefers-reduced-motion: reduce) {
  .pagination-wrap .page-link { transition: none; }
}


/* ── Article tables ─────────────────────────────────────────────────────────
   Post bodies ship 14 bare <table> elements with no class, so they rendered
   with UA defaults: no rules, no padding, columns touching. These are spec
   tables (card sizes, bleed, GSM) that a reader compares across rows, so the
   grid lines are the content, not decoration.

   The table is the scroll container and thead/tbody are the table box, which
   keeps real column alignment while letting a 4-column spec table scroll on a
   phone instead of crushing to unreadable width. Logical properties throughout
   so the RTL build needs no overrides. */
.article-body table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  margin: 26px 0;
  font-size: .92rem;
}
.article-body table thead,
.article-body table tbody {
  display: table;
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
}
.article-body table th,
.article-body table td {
  border: 1px solid var(--gray-300);
  padding: 10px 12px;
  text-align: start;
  vertical-align: top;
  line-height: 1.55;
}
.article-body table thead th {
  background: var(--gray-100);
  color: var(--dark);
  font-weight: 700;
  border-bottom-width: 2px;
  border-bottom-color: var(--gray-500);
  position: sticky;
  top: 0;
}
/* Zebra striping is what makes a wide row scannable across four columns. */
.article-body table tbody tr:nth-child(even) { background: #fafafa; }
.article-body table tbody tr:hover { background: var(--gray-100); }
.article-body table caption {
  caption-side: bottom;
  font-size: .82rem;
  color: var(--gray-500);
  padding-top: 8px;
  text-align: start;
}
@media (max-width: 575px) {
  .article-body table { font-size: .86rem; }
  .article-body table th,
  .article-body table td { padding: 8px 9px; }
}