/* =========================================================================
   Shabackat — design system stylesheet
   Organized: tokens -> reset -> layout -> typography -> components -> pages
   Bilingual by default: written with CSS logical properties so the whole
   site mirrors correctly under dir="rtl" without a separate stylesheet.
   ========================================================================= */

/* ---------- Design tokens ---------- */
/* Metric-matched fallbacks.
   The webfonts load with display=swap, so text first paints in the fallback and then
   reflows when Inter/Cairo arrive — measured as the entire 0.101 CLS on the homepage,
   a single shift at ~2.1s on a throttled connection. Overriding the fallback's metrics
   makes it occupy the same space as the real font, so the swap is invisible to layout.
   Preferred over display=optional, which fixes CLS by not showing the brand font at all
   on a first visit.

   These numbers are DERIVED from the actual font files, not copied from a blog post:
   size-adjust  = avg advance width (font) / avg advance width (Arial), both /unitsPerEm
   ascent/descent-override = hhea ascent|descent / unitsPerEm / size-adjust
   Latin only, deliberately. The same treatment was tried for Cairo and made Arabic CLS
   worse rather than better (0.034 -> 0.144), even with values derived from the real
   font: Arial's Arabic glyphs are proportioned nothing like Cairo's, so no single
   size-adjust can match both. Arabic keeps the plain system-ui fallback, which already
   measured inside the CLS budget. */
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  size-adjust: 109.78%;
  ascent-override: 88.24%;
  descent-override: 21.97%;
  line-gap-override: 0%;
}

:root {
    --navy-900: #0A1F3C;
    --navy-800: #0F2A4E;
    --navy-700: #16375f;
    --blue-600: #1D5FE0;
    --blue-500: #2E7BFA;
    --blue-100: #E8F0FE;
    --teal-500: #12B8A6;
    --teal-100: #E3FBF7;
    --amber-500: #F5A524;
    --amber-100: #FFF4E0;
    --red-500: #E5484D;

    --gray-900: #171E2B;
    --gray-800: #2A3342;
    --gray-700: #48536A;
    --gray-600: #667085;
    --gray-500: #8A93A6;
    --gray-300: #D6DCE6;
    --gray-200: #E7EBF2;
    --gray-100: #F3F5F9;
    --gray-50:  #F9FAFC;
    --white: #FFFFFF;

    --font-latin: 'Inter', 'Inter Fallback', system-ui, -apple-system, sans-serif;
    --font-arabic: 'Cairo', system-ui, -apple-system, sans-serif;

    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --radius-full: 999px;

    --shadow-sm: 0 1px 3px rgba(10, 31, 60, 0.08);
    --shadow-md: 0 8px 24px rgba(10, 31, 60, 0.10);
    --shadow-lg: 0 20px 48px rgba(10, 31, 60, 0.16);

    --container-w: 1200px;
    --transition: 200ms ease;
}

/* ---------- Reset ---------- */
* , *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--font-latin);
    color: var(--gray-800);
    background: var(--white);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}
body.lang-ar { font-family: var(--font-arabic); letter-spacing: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5, p, figure { margin: 0; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
input, textarea, select { outline: none; }
:focus-visible { outline: 2px solid var(--blue-500); outline-offset: 2px; }

.skip-link {
    position: absolute; inset-inline-start: -999px; top: 0;
    background: var(--navy-900); color: var(--white); padding: 10px 18px;
    z-index: 1000; border-end-end-radius: var(--radius-sm);
}
.skip-link:focus { inset-inline-start: 0; }
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------- Layout helpers ---------- */
.container { max-width: var(--container-w); margin-inline: auto; padding-inline: 20px; }
.section { padding-block: 88px; }
.section-sm { padding-block: 56px; }
.section-alt { background: var(--gray-50); }
.section-navy { background: linear-gradient(160deg, var(--navy-900), var(--navy-800)); color: var(--white); }
.section-navy .section-header p { color: var(--gray-300); }

.grid { display: grid; gap: 28px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 980px) { .grid-3, .grid-4, .grid-5 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid-2, .grid-3, .grid-4, .grid-5 { grid-template-columns: 1fr; } }

.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.gap-sm { gap: 10px; } .gap-md { gap: 20px; } .gap-lg { gap: 36px; }
.text-center { text-align: center; }
.mt-0{margin-top:0} .mt-sm{margin-top:12px} .mt-md{margin-top:24px} .mt-lg{margin-top:48px}
.mb-0{margin-bottom:0} .mb-sm{margin-bottom:12px} .mb-md{margin-bottom:24px} .mb-lg{margin-bottom:48px}

/* ---------- Typography ---------- */
h1, .h1 { font-size: clamp(2.1rem, 4vw, 3.4rem); font-weight: 800; line-height: 1.15; color: var(--navy-900); }
h2, .h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 800; line-height: 1.2; color: var(--navy-900); }
h3, .h3 { font-size: 1.35rem; font-weight: 700; color: var(--navy-900); }
h4, .h4 { font-size: 1.05rem; font-weight: 700; color: var(--navy-900); }
.section-navy h1, .section-navy h2, .section-navy h3 { color: var(--white); }
.lead { font-size: 1.15rem; color: var(--gray-600); }
.text-muted { color: var(--gray-600); }
.text-teal { color: var(--teal-500); }
.text-blue { color: var(--blue-600); }

.eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--blue-600); background: var(--blue-100); padding: 6px 16px;
    border-radius: var(--radius-full); margin-bottom: 16px;
}
body.lang-ar .eyebrow { letter-spacing: 0; text-transform: none; }
.section-navy .eyebrow { background: rgba(255,255,255,0.12); color: var(--teal-500); }
.eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.section-header { max-width: 680px; margin-bottom: 48px; }
.section-header.text-center { margin-inline: auto; }
.section-header p { margin-top: 14px; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 14px 28px; border-radius: var(--radius-full); font-weight: 700;
    font-size: 0.95rem; transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition);
    white-space: nowrap; border: 2px solid transparent;
}
.btn-sm { padding: 10px 20px; font-size: 0.85rem; }
.btn-primary { background: var(--blue-600); color: var(--white); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--navy-800); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-accent { background: var(--teal-500); color: var(--white); }
.btn-accent:hover { background: #0e9c8d; transform: translateY(-2px); }
.btn-outline { background: transparent; border-color: rgba(255,255,255,0.5); color: inherit; }
.btn-outline:hover { background: rgba(255,255,255,0.12); border-color: var(--white); }
.btn-outline-dark { background: transparent; border-color: var(--gray-300); color: var(--navy-900); }
.btn-outline-dark:hover { border-color: var(--blue-600); color: var(--blue-600); }
.btn-whatsapp { background: #25D366; color: var(--white); }
.btn-whatsapp:hover { background: #1ebc59; transform: translateY(-2px); }
.btn-block { width: 100%; }
.btn-lg { padding: 16px 34px; font-size: 1.02rem; }

/* ---------- Top bar & Navigation ---------- */
.site-header { position: sticky; top: 0; z-index: 500; }
.topbar { background: var(--navy-900); color: var(--gray-300); font-size: 0.82rem; }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; padding-block: 9px; gap: 16px; }
.topbar-info, .topbar-actions { display: flex; align-items: center; gap: 20px; }
.topbar-item { display: inline-flex; align-items: center; gap: 7px; color: var(--gray-300); white-space: nowrap; }
.topbar-item:hover { color: var(--white); }
.topbar-item-desktop { display: none; }
.topbar-social { display: flex; gap: 12px; }
.topbar-social a { width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,0.08); display: inline-flex; align-items: center; justify-content: center; font-size: 0.75rem; }
.topbar-social a:hover { background: var(--blue-600); }
.lang-switch { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--white); padding: 5px 12px; border-radius: var(--radius-full); background: rgba(255,255,255,0.1); }
.lang-switch:hover { background: var(--blue-600); }

.navbar { background: rgba(255,255,255,0.97); backdrop-filter: blur(8px); box-shadow: var(--shadow-sm); transition: box-shadow var(--transition); }
.site-header.is-scrolled .navbar { box-shadow: var(--shadow-md); }
.navbar-inner { display: flex; align-items: center; gap: 24px; padding-block: 14px; }
.brand { display: inline-flex; align-items: center; gap: 10px; margin-inline-end: auto; }
.brand-logo { height: 44px; width: auto; display: block; }
.footer-logo-badge {
    display: inline-flex; align-items: center; background: var(--white);
    padding: 10px 18px; border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
    align-self: flex-start;
}
.brand-logo-footer { height: 32px; }

.main-nav { flex: 1; }
.main-nav > ul { display: flex; align-items: center; gap: 4px; }
.main-nav > ul > li > a { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: var(--radius-sm); font-weight: 600; color: var(--gray-800); font-size: 0.94rem; transition: color var(--transition), background var(--transition); }
.main-nav > ul > li > a:hover, .main-nav > ul > li > a.active { color: var(--blue-600); background: var(--blue-100); }
.nav-badge { background: var(--amber-500); color: var(--white); font-size: 0.62rem; font-weight: 800; padding: 1px 7px; border-radius: var(--radius-full); }

.has-dropdown { position: relative; }
.dropdown-menu {
    position: absolute; inset-inline-start: 0; top: calc(100% + 10px); min-width: 230px;
    background: var(--white); border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
    padding: 10px; opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
    z-index: 50;
}
.has-dropdown:hover .dropdown-menu, .has-dropdown.dropdown-open .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown-menu li a { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--radius-sm); font-weight: 600; font-size: 0.9rem; color: var(--gray-800); }
.dropdown-menu li a:hover { background: var(--gray-100); color: var(--blue-600); }
.dropdown-divider { height: 1px; background: var(--gray-200); margin: 6px 4px; }
.dropdown-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }

.nav-cta { flex-shrink: 0; }
.nav-toggle { display: none; flex-direction: column; gap: 5px; padding: 8px; position: relative; z-index: 700; }
.nav-toggle span { width: 24px; height: 2px; background: var(--navy-900); border-radius: 2px; transition: transform var(--transition), opacity var(--transition); }
.nav-overlay { position: fixed; inset: 0; background: rgba(10,31,60,0.5); opacity: 0; visibility: hidden; transition: opacity var(--transition); z-index: 400; }
.nav-overlay.show { opacity: 1; visibility: visible; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; background: linear-gradient(150deg, var(--navy-900) 0%, var(--navy-800) 55%, var(--blue-600) 130%); color: var(--white); padding-block: 100px; }
.hero h1, .hero h2, .hero h3 { color: var(--white); }
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; }
.hero-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-block: 22px; }
.hero-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.1); padding: 8px 16px; border-radius: var(--radius-full); font-size: 0.85rem; font-weight: 600; }
.hero-badge i { color: var(--teal-500); }
.hero p.lead { color: var(--gray-300); max-width: 560px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.hero-art { position: relative; }
.hero-art svg { width: 100%; height: auto; }
.hero-shape-1, .hero-shape-2 { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.35; z-index: 0; }
.hero-shape-1 { width: 340px; height: 340px; background: var(--teal-500); top: -60px; inset-inline-end: -60px; }
.hero-shape-2 { width: 260px; height: 260px; background: var(--blue-500); bottom: -60px; inset-inline-start: 10%; }

.page-hero { background: linear-gradient(150deg, var(--navy-900), var(--navy-800)); color: var(--white); padding-block: 64px; text-align: center; position: relative; overflow: hidden; }
.page-hero h1 { color: var(--white); }
.page-hero p { color: var(--gray-300); max-width: 620px; margin-inline: auto; margin-top: 14px; }
.breadcrumb { display: inline-flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--gray-300); margin-bottom: 18px; }
.breadcrumb a { color: var(--white); font-weight: 600; }
.breadcrumb i { font-size: 0.65rem; }

/* ---------- Stats ---------- */
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.stat-card { text-align: center; padding: 28px 16px; border-radius: var(--radius-md); background: rgba(255,255,255,0.06); }
.stat-value { font-size: 2.4rem; font-weight: 800; color: var(--teal-500); }
.stat-label { font-size: 0.88rem; color: var(--gray-300); margin-top: 6px; }
.section:not(.section-navy) .stat-card { background: var(--white); box-shadow: var(--shadow-sm); }
.section:not(.section-navy) .stat-value { color: var(--blue-600); }
.section:not(.section-navy) .stat-label { color: var(--gray-600); }
@media (max-width: 780px) { .stats-row { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Cards ---------- */
.card { background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition); }
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }

.service-card { padding: 32px 26px; }
.service-icon { width: 58px; height: 58px; border-radius: var(--radius-md); background: var(--blue-100); color: var(--blue-600); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; margin-bottom: 20px; }
.service-card h3 { margin-bottom: 10px; }
.service-card p { color: var(--gray-600); font-size: 0.95rem; }
.service-card .service-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-weight: 700; color: var(--blue-600); font-size: 0.9rem; }
.service-card:hover .service-icon { background: var(--blue-600); color: var(--white); }

.brand-card { padding: 26px; text-align: center; }
.brand-card .brand-swatch { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-inline: auto; margin-bottom: 16px; font-size: 1.6rem; color: var(--white); }
.brand-card h4 { margin-bottom: 6px; }
.brand-card p { color: var(--gray-600); font-size: 0.85rem; }

.product-card { overflow: hidden; display: flex; flex-direction: column; }
/* Derived technical specification table on the product page. Uses logical
   properties so the label column sits on the correct side in Arabic, and scrolls
   inside itself rather than letting the page scroll sideways on a phone. */
.spec-table { width: 100%; border-collapse: collapse; margin: 16px 0 28px; font-size: 0.95rem; display: block; overflow-x: auto; }
.spec-table tbody { display: table; width: 100%; }
.spec-table tr { border-bottom: 1px solid var(--gray-200); }
.spec-table tr:last-child { border-bottom: 0; }
.spec-table th { text-align: start; font-weight: 500; color: var(--gray-600); padding: 12px 16px 12px 0; white-space: nowrap; }
.spec-table td { text-align: end; font-weight: 700; padding: 12px 0; }
[dir="rtl"] .spec-table th { padding: 12px 0 12px 16px; }

.product-thumb { aspect-ratio: 4/3; background: var(--gray-100); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.product-thumb i { font-size: 2.6rem; color: var(--gray-300); }
.product-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 12px; }
.product-badge { position: absolute; top: 14px; inset-inline-start: 14px; background: var(--amber-500); color: var(--white); font-size: 0.7rem; font-weight: 800; padding: 4px 12px; border-radius: var(--radius-full); }
.product-body { padding: 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.product-brand-tag { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--teal-500); }
body.lang-ar .product-brand-tag { letter-spacing: 0; text-transform: none; }
.product-sku { font-size: 0.78rem; color: var(--gray-500); }
.product-body h4 { flex: 1; }
/* Card blurb. PHP already trims it to ~115 characters; the clamp is a visual
   backstop so a long word or an un-truncated string can never make one card
   taller than its neighbours and break the grid row. */
.product-desc { font-size: 0.88rem; color: var(--gray-600); display: -webkit-box;
  -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 3.9em; }
.product-actions { display: flex; gap: 10px; margin-top: 12px; }
.product-actions .btn { flex: 1; padding-inline: 12px; }

.blog-card { overflow: hidden; }
.blog-thumb { aspect-ratio: 16/9; background: linear-gradient(135deg, var(--navy-900), var(--blue-600)); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.blog-thumb i { font-size: 2.2rem; color: rgba(255,255,255,0.85); }
/* Cover images are 1200x630 title cards; cover-crop them into the 16/9 card so the
   gradient placeholder and a real image occupy exactly the same space (no layout shift). */
.blog-thumb img { width: 100%; height: 100%; object-fit: cover; }
.blog-body { padding: 24px; }
.blog-meta { display: flex; align-items: center; gap: 14px; font-size: 0.78rem; color: var(--gray-500); margin-bottom: 12px; }
.blog-category { color: var(--blue-600); font-weight: 700; }
.blog-body h3 { margin-bottom: 10px; }
.blog-body h3 a:hover { color: var(--blue-600); }
.blog-excerpt { color: var(--gray-600); font-size: 0.92rem; }
.blog-readmore { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-weight: 700; color: var(--blue-600); font-size: 0.88rem; }

.testimonial-card { padding: 30px; position: relative; }
.testimonial-stars { color: var(--amber-500); margin-bottom: 14px; font-size: 0.9rem; }
.testimonial-quote { color: var(--gray-700); font-size: 0.98rem; font-style: italic; }
.testimonial-author { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
.testimonial-avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--blue-100); color: var(--blue-600); display: flex; align-items: center; justify-content: center; font-weight: 800; }
.testimonial-name { font-weight: 700; color: var(--navy-900); font-size: 0.92rem; }
.testimonial-role { font-size: 0.8rem; color: var(--gray-500); }

/* ---------- Badges / pills ---------- */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border-radius: var(--radius-full); font-size: 0.78rem; font-weight: 700; }
.badge-blue { background: var(--blue-100); color: var(--blue-600); }
.badge-teal { background: var(--teal-100); color: var(--teal-500); }
.badge-amber { background: var(--amber-100); color: #a1650f; }

/* ---------- Filter chips (shop) ---------- */
.filter-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.filter-chip { padding: 9px 20px; border-radius: var(--radius-full); background: var(--white); border: 2px solid var(--gray-200); font-weight: 700; font-size: 0.88rem; color: var(--gray-700); transition: all var(--transition); }
.filter-chip:hover { border-color: var(--blue-500); color: var(--blue-600); }
.filter-chip.active { background: var(--blue-600); border-color: var(--blue-600); color: var(--white); }

/* ---------- Secondary filter row: search + category + sort (shop) ---------- */
.filter-bar-secondary { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 32px; }
.filter-search-wrap { position: relative; flex: 1 1 260px; }
.filter-search-wrap i { position: absolute; inset-inline-start: 16px; top: 50%; transform: translateY(-50%); color: var(--gray-500); pointer-events: none; }
.filter-search-wrap .filter-search { padding-inline-start: 42px; }
.filter-select { flex: 0 1 220px; width: auto; cursor: pointer; }
.filter-result-count { margin: -12px 0 20px; font-size: 0.9rem; }
@media (max-width: 640px) {
    .filter-search-wrap, .filter-select { flex-basis: 100%; }
}

/* ---------- Accordion (FAQ) ---------- */
.accordion-item { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-md); margin-bottom: 14px; overflow: hidden; }
.accordion-question { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 20px 24px; text-align: start; font-weight: 700; color: var(--navy-900); }
.accordion-question i { flex-shrink: 0; transition: transform var(--transition); color: var(--blue-600); }
.accordion-item.open .accordion-question i { transform: rotate(45deg); }
.accordion-answer { max-height: 0; overflow: hidden; transition: max-height 260ms ease; }
.accordion-answer-inner { padding: 0 24px 20px; color: var(--gray-600); font-size: 0.95rem; }

/* ---------- Tabs ---------- */
.tabs-nav { display: flex; flex-wrap: wrap; gap: 8px; border-bottom: 2px solid var(--gray-200); margin-bottom: 32px; }
.tab-btn { padding: 12px 20px; font-weight: 700; color: var(--gray-600); border-bottom: 2px solid transparent; margin-bottom: -2px; }
.tab-btn.active { color: var(--blue-600); border-color: var(--blue-600); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ---------- Forms ---------- */
.form-group { margin-bottom: 20px; }
.form-label { display: block; font-weight: 700; font-size: 0.88rem; margin-bottom: 8px; color: var(--navy-900); }
.form-control { width: 100%; padding: 13px 16px; border: 2px solid var(--gray-200); border-radius: var(--radius-sm); background: var(--white); font-size: 0.95rem; transition: border-color var(--transition); }
.form-control:focus { border-color: var(--blue-500); }
textarea.form-control { resize: vertical; min-height: 130px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 620px) { .form-row { grid-template-columns: 1fr; } }
.form-card { background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 40px; }
.alert { padding: 16px 20px; border-radius: var(--radius-sm); margin-bottom: 24px; font-weight: 600; display: flex; align-items: center; gap: 10px; }
.alert-success { background: var(--teal-100); color: #0b6e63; }
.alert-error { background: #FDE8E8; color: #a51419; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-900); color: var(--gray-300); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 0.9fr 0.9fr 1.2fr; gap: 40px; padding-block: 72px 40px; }
.footer-col h4, .footer-col h2 { color: var(--white); margin-bottom: 20px; font-size: 1rem; }
.footer-col ul { display: flex; flex-direction: column; gap: 12px; }
.footer-col a { color: var(--gray-300); font-size: 0.9rem; }
.footer-col a:hover { color: var(--teal-500); }
.footer-col-about p { font-size: 0.9rem; margin-top: 16px; color: var(--gray-300); }
.footer-social { display: flex; gap: 10px; margin-top: 20px; }
.footer-social a { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center; }
.footer-social a:hover { background: var(--blue-600); }
.footer-contact-list { gap: 14px !important; }
.footer-contact-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.9rem; color: var(--gray-300); }
.footer-contact-list i { margin-top: 3px; color: var(--teal-500); }
.footer-newsletter { display: flex; margin-top: 20px; border: 1px solid rgba(255,255,255,0.2); border-radius: var(--radius-full); padding: 4px; }
.footer-newsletter input { flex: 1; background: transparent; border: none; padding: 10px 16px; color: var(--white); }
.footer-newsletter input::placeholder { color: var(--gray-500); }
.footer-newsletter button { width: 40px; height: 40px; border-radius: 50%; background: var(--blue-600); color: var(--white); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-block: 22px; }
.footer-bottom-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 0.85rem; }
.footer-legal-links { display: flex; gap: 24px; }
@media (max-width: 980px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---------- Floating actions ---------- */
.whatsapp-float {
    position: fixed; bottom: 26px; inset-inline-end: 26px; width: 58px; height: 58px;
    border-radius: 50%; background: #25D366; color: var(--white); display: flex;
    align-items: center; justify-content: center; font-size: 1.6rem; box-shadow: var(--shadow-lg);
    z-index: 300; animation: pulse-wa 2.4s infinite;
}
@keyframes pulse-wa { 0%,100% { box-shadow: 0 0 0 0 rgba(37,211,102,0.5), var(--shadow-lg); } 50% { box-shadow: 0 0 0 12px rgba(37,211,102,0), var(--shadow-lg); } }
.back-to-top {
    position: fixed; bottom: 26px; inset-inline-start: 26px; width: 46px; height: 46px;
    border-radius: 50%; background: var(--navy-900); color: var(--white); display: none;
    align-items: center; justify-content: center; box-shadow: var(--shadow-md); z-index: 300;
}
.back-to-top.show { display: flex; }

/* ---------- Reveal-on-scroll ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 600ms ease, transform 600ms ease; }
.reveal.in-view { opacity: 1; transform: translateY(0); }

/* ---------- CTA band ---------- */
.cta-band { background: linear-gradient(135deg, var(--blue-600), var(--teal-500)); border-radius: var(--radius-lg); padding: 56px; color: var(--white); display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.cta-band h2 { color: var(--white); }
.cta-band p { color: rgba(255,255,255,0.9); margin-top: 8px; }

/* ---------- Carousel (testimonials / offers) ---------- */
.carousel { position: relative; }
.carousel-track { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: none; }
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-item { scroll-snap-align: start; flex: 0 0 auto; width: min(360px, 84vw); }
.carousel-nav { display: flex; justify-content: center; gap: 12px; margin-top: 24px; }
.carousel-nav button { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--gray-200); display: flex; align-items: center; justify-content: center; color: var(--navy-900); transition: all var(--transition); }
.carousel-nav button:hover { background: var(--blue-600); border-color: var(--blue-600); color: var(--white); }

/* ---------- Pagination ---------- */
.pagination { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 40px; }
.pagination a, .pagination span { min-width: 42px; height: 42px; padding-inline: 12px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; font-size: 0.9rem; background: var(--white); border: 1px solid var(--gray-200); color: var(--gray-700); transition: border-color var(--transition), color var(--transition); }
.pagination a:hover { border-color: var(--blue-500); color: var(--blue-600); }
.pagination .current, .pagination .page-link.active { background: var(--blue-600); border-color: var(--blue-600); color: var(--white); }
.pagination .page-gap { border: none; background: none; min-width: 0; padding-inline: 2px; color: var(--gray-500); }
@media (max-width: 480px) {
    /* keep prev/next reachable on narrow phones by dropping the middle numbers */
    .pagination .page-link:not(.active):not([rel]) { display: none; }
    .pagination .page-gap { display: none; }
}

/* Product card titles are <h2 class="h4 product-title"> so the listing keeps a valid
   heading hierarchy under the page <h1> while looking identical to the old <h4>. */
.product-title { font-size: 1.05rem; font-weight: 700; color: var(--navy-900); }
.product-title a { color: inherit; }
.product-title a:hover { color: var(--blue-600); }
.product-body .product-title { flex: 1; }

/* ---------- Table (used on legal pages / compliance) ---------- */
.content-block { max-width: 860px; margin-inline: auto; }
.content-block h2 { margin-top: 40px; margin-bottom: 14px; }
.content-block h2:first-child { margin-top: 0; }
.content-block p, .content-block li { color: var(--gray-700); font-size: 1rem; margin-bottom: 12px; }
.content-block ul { padding-inline-start: 22px; list-style: disc; }
.content-block ol { padding-inline-start: 22px; list-style: decimal; }

/* ---------- 404 ---------- */
.error-page { text-align: center; padding-block: 120px; }
.error-code { font-size: 7rem; font-weight: 800; color: var(--blue-100); line-height: 1; }

/* ---------- RTL-specific corrections ---------- */
[dir="rtl"] .fa-chevron-right::before { content: "\f053"; }
[dir="rtl"] .fa-arrow-right::before { content: "\f060"; }
[dir="rtl"] .breadcrumb i.fa-chevron-right::before { content: "\f053"; }

/* ---------- Responsive ---------- */
@media (min-width: 720px) {
    .topbar-item-desktop { display: inline-flex; }
}
@media (max-width: 640px) {
    /* Phone number + language switch are the two things worth keeping on a
       cramped mobile topbar; support text and socials give way first. */
    .topbar-info, .topbar-actions { gap: 10px; }
    .topbar-support { display: none; }
    .lang-switch { padding: 5px 9px; font-size: 0.78rem; }
}
@media (max-width: 420px) {
    .topbar-social { display: none; }
}
@media (max-width: 980px) {
    .hero-grid { grid-template-columns: 1fr; text-align: center; }
    .hero-actions, .hero-badges { justify-content: center; }
    .hero-art { max-width: 420px; margin-inline: auto; }
}
@media (max-width: 900px) {
    .main-nav { display: none; position: fixed; inset-inline-end: 0; top: 0; height: 100vh; width: min(340px, 84vw);
        background: var(--white); flex: none; box-shadow: var(--shadow-lg); transition: transform 280ms ease;
        transform: translateX(100%); overflow-y: auto; padding: 90px 24px 24px; z-index: 600; }
    body.lang-ar .main-nav { transform: translateX(-100%); }
    .main-nav.open, body.lang-ar .main-nav.open { transform: translateX(0); }
    .main-nav > ul { flex-direction: column; align-items: stretch; gap: 4px; }
    .main-nav > ul > li > a { padding: 14px 16px; }
    .dropdown-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; display: none; margin-inline-start: 12px; min-width: 0; }
    .has-dropdown.dropdown-open .dropdown-menu { display: block; }
    .nav-toggle { display: flex; }
    .nav-cta { display: none; }
    .nav-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav-toggle.active span:nth-child(2) { opacity: 0; }
    .nav-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}
@media (max-width: 560px) {
    .section { padding-block: 56px; }
    .cta-band { padding: 32px; flex-direction: column; text-align: center; }
    .cta-band .btn { white-space: normal; width: 100%; }
    .form-card { padding: 24px; }
}

/* ---------- Cookie notice (informational, non-blocking) ----------
   A bottom bar, not a modal: full-screen interstitials that hide content are
   treated as intrusive by Google. position:fixed so it contributes no layout
   shift, and it sits below the mobile nav drawer (z-index 600) and its overlay. */
.cookie-notice {
    position: fixed; inset-inline: 0; bottom: 0; z-index: 380;
    display: flex; align-items: center; justify-content: center;
    flex-wrap: wrap; gap: 16px 24px;
    padding: 16px 24px;
    background: var(--navy-900); color: var(--gray-300);
    box-shadow: 0 -6px 24px rgba(10, 31, 60, 0.28);
    font-size: 0.88rem; line-height: 1.6;
}
.cookie-notice[hidden] { display: none; }
.cookie-notice-text { margin: 0; max-width: 900px; }
.cookie-notice-text a { color: var(--teal-500); text-decoration: underline; }
.cookie-notice-text a:hover { color: var(--white); }
.cookie-notice-dismiss {
    background: var(--white); color: var(--navy-900);
    flex-shrink: 0; font-weight: 700;
}
.cookie-notice-dismiss:hover { background: var(--teal-500); color: var(--white); }
@media (max-width: 560px) {
    .cookie-notice { padding: 14px 18px; font-size: 0.84rem; text-align: center; }
    .cookie-notice-dismiss { width: 100%; }
}
/* Keep the floating WhatsApp button and back-to-top clear of the bar while it shows. */
body.has-cookie-notice .whatsapp-float,
body.has-cookie-notice .back-to-top { bottom: 104px; }
@media (max-width: 560px) {
    body.has-cookie-notice .whatsapp-float,
    body.has-cookie-notice .back-to-top { bottom: 132px; }
}