/*
    PG Water Solutions — Official Brand Identity
    ==============================================
    Source: PG Brand Guide
    Palette:
      Primary Blue  : #023E8A
      Secondary Blue: #0077B6 (Ocean)
      Accent Aqua   : #0096C7
    Gradient: 0% #023E8A → 50% #0077B6 → 100% #0096C7
    Typography:
      Arabic : DIN Next LT Arabic (Brand Guide). The licence file is not in this
               project, so Cairo renders until it is uploaded at admin/brand.php.
      English: Cairo (Google Fonts, linked from includes/header.php + imported here).
*/
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800&display=swap');

:root {
    /* ================================================================
       OFFICIAL PG BRAND TOKENS
       These values come from the PG Brand Guide. They are mirrored into
       --brand-* so the brand layer (includes/brand.php) can override
       them from the admin, but the declared defaults ARE the company
       palette and not a guess.
       ================================================================ */
    --pg-primary:      #023E8A;
    --pg-secondary:    #0077B6;
    --pg-aqua:         #0096C7;
    --pg-gradient:     linear-gradient(135deg, #023E8A 0%, #0077B6 50%, #0096C7 100%);
    --pg-gradient-v:   linear-gradient(180deg, #023E8A 0%, #0077B6 55%, #0096C7 100%);
    --pg-gradient-soft: linear-gradient(135deg, rgba(2,62,138,.08) 0%, rgba(0,150,199,.08) 100%);

    /* Neutral surface tokens (NOT brand colours — UI only) */
    --pg-bg:           #ffffff;
    --pg-surface:      #f7fbff;
    --pg-surface-alt:  #eef5ff;
    --pg-border:       #e3edf7;
    --pg-text:         #1f2a37;
    --pg-text-muted:   #55637a;
    --pg-text-soft:    #7c88a0;
    --pg-heading:      #023E8A;
    --pg-white:        #ffffff;

    /* Brand layer aliases — includes/brand.php writes into these at runtime */
    --brand-primary:    var(--pg-primary);
    --brand-secondary:  var(--pg-secondary);
    --brand-accent:     var(--pg-aqua);
    --brand-heading:    var(--pg-heading);
    --brand-text:       var(--pg-text);
    --brand-background: var(--pg-bg);

    /* Typography — ONE token drives the entire site.

       --site-font is the active typeface for BOTH Arabic and English. Cairo is
       requested from Google Fonts in includes/header.php AND via @import at the
       top of this stylesheet, so the name resolves to a real face; there is no
       phantom family and nothing silently falls back to a system font.

       --brand-font-ar is deliberately NOT declared here. includes/brand.php
       emits it only when the licensed DIN Next LT Arabic file has actually been
       uploaded, and var() prefers it the moment it appears - so Cairo is the
       font that renders today, and switching to the brand face later is an
       upload, not a rebuild. See admin/brand.php for the status panel.

       Cairo ships 300 → 800 (six upright weights only, no italics), so those
       are the weights the site asks for. font-synthesis-style:none then
       guarantees the browser never fakes slanted Arabic glyphs by shearing the
       upright outline, and font-synthesis-weight:none means a 500/600 request
       always gets a real Cairo intermediate and never a smeared emboldened 400. */
    --font-ar-web: 'Cairo';
    --site-font: var(--brand-font-ar, 'Cairo', 'Segoe UI', Tahoma, sans-serif);

    /* Legacy names kept so existing rules keep resolving to the site font. */
    --font-ar: var(--site-font);
    --font-en: var(--site-font);
    --amiri:   var(--site-font);

    /* Legacy palette names kept for backward compatibility */
    --deep-blue:   var(--pg-primary);
    --ocean-blue:  var(--pg-secondary);
    --aqua-blue:   var(--pg-aqua);
    --white:       var(--pg-white);
    --light-gray:  var(--pg-surface);
    --text-color:  var(--pg-text);

    --pg-body-font: var(--site-font);
    --transition:   all 0.3s ease;

    /* Shared component tokens: spacing, radii and shadows defined once. */
    --brand-radius-sm: 8px;
    --brand-radius:    12px;
    --brand-radius-lg: 16px;
    --brand-shadow-sm:   0 1px 2px rgba(2, 62, 138, .06);
    --brand-shadow:      0 4px 16px rgba(2, 62, 138, .08);
    --brand-shadow-lg:   0 12px 32px rgba(2, 62, 138, .12);
    --brand-focus-ring:  0 0 0 3px rgba(2, 62, 138, .25);
}

/* ----------------------------------------------------------------
   Cairo rendering guard.

   Cairo is a modern Kufi-style Arabic UI face: uniform stroke weight,
   short ascenders/descenders, and built-in Latin + digits. Four things
   make it render crisply on this site, and all four are pinned here:

   1. letter-spacing. Arabic is a joined (cursive) script: any non-zero
      tracking changes the advance between glyphs, which makes the shaper
      fall back to isolated/initial/final forms instead of the medial
      joined forms - the "حروف متقطعة / متكسرة" look. This MUST stay normal.
   2. Synthetic style + weight. Cairo ships 300/400/500/600/700/800
      upright only, so italic requests or any weight outside that range
      would otherwise be drawn as a sheared / smeared 400. Both style
      and weight synthesis are forbidden outright, so every face on the
      site is a real Cairo outline.
   3. Leading. Cairo needs less leading than a classical Naskh face
      like Amiri; 1.7 on body is plenty.
   4. Digit choice. Cairo ships tabular + proportional digits. Default
      proportional numbers are used for body text because the site shows
      them inside paragraphs; the technical-spec columns opt into
      monospace via their dedicated selector.

   Written on the root element so it reaches everything through INHERITANCE.
   An element that legitimately declares its own value still wins, because a
   declared value always beats an inherited one - no !important needed.
   ---------------------------------------------------------------- */
html {
    letter-spacing: normal;
    word-spacing: normal;
    font-synthesis-weight: none;
    font-synthesis-style: none;
    /* Measured, not assumed: the same Arabic string rasterised identically
       with optimizeLegibility and with auto, at the same advance width. The
       default is used because it buys nothing and costs layout caching.
       Kerning and ligatures stay on - Arabic shaping needs them. */
    text-rendering: auto;
    font-kerning: normal;
    font-variant-ligatures: common-ligatures;
    /* -webkit-font-smoothing is intentionally NOT set. It has no effect on
       Windows Chrome (where this defect was reported) and on macOS/iOS it
       forces grayscale antialiasing, which thins exactly the hairlines Cairo
       depends on. Leaving it off is what keeps the site consistent across
       platforms. */
}

/* Cairo has compact ascenders/descenders (Kufi-style Arabic + Latin UI
   metrics), so the Amiri-era 1.9 leading would look too loose. 1.7 gives
   Cairo enough clearance for the tallest glyphs without drowning the page
   in white space. Declared on body so components can still override it. */
html[dir="rtl"] body {
    line-height: 1.7;
}

/* Shared headings get line-height 1.25, which is right for a Latin UI face.
   Cairo's Kufi Arabic shares compact metrics with modern Latin sans-serifs,
   so the Arabic direction only needs slightly more clearance (1.35) to keep
   the diacritics of a tight heading from visually colliding. */
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6 {
    line-height: 1.35;
}

/* ----------------------------------------------------------------
   The single font application point.

   Cairo is the site font for BOTH directions, so it is declared once on
   <html> and every element inherits it. There is deliberately no
   `font-family: ArabicFont, EnglishFont` list: a comma list makes the
   browser pick per character, which is how unexpected fallbacks appear
   inside a single sentence. One family, one predictable result.

   The generic sans-serif at the end is only a last-resort safety net in
   case the Google Fonts request ever fails; Cairo itself is requested in
   includes/header.php AND via @import at the top of this stylesheet.
   ---------------------------------------------------------------- */
html {
    font-family: var(--site-font);
    /* Cairo's Latin and Arabic are balanced — the body starts at the system
       default 100%/16px and stays readable without an extra bump. */
    font-size: 100%;
}

/* ================================================================
   GLOBAL CAIRO FONT ENFORCEMENT
   Overrides any stray Bootstrap, component, inline style, or legacy
   font-family value so Cairo renders consistently on EVERY element
   across every page (index, products, product-details, header,
   footer, offcanvas, modals, mobile menus, WhatsApp buttons, etc).

   Element coverage is EXPLICIT (no `*` universal) so icon-font
   pseudo-elements (Font Awesome ::before, Swiper ::after) are left
   untouched. Technical monospace values (codes, standards numbers,
   dimensions) are re-asserted immediately after this block with
   equal !important priority so they win via cascade order.
   ================================================================ */
html, body,
input, button, select, optgroup, textarea,
.btn, .btn-primary, .btn-secondary, .btn-outline,
h1, h2, h3, h4, h5, h6,
p, span, a, li, dt, dd, label, legend, th, td,
div, section, article, nav, header, footer, aside, main,
small, strong, em, b, u, strike, del, sub, sup, mark,
blockquote, figure, figcaption, address, pre,
table, caption, thead, tbody, tfoot, tr,
ul, ol, dl, form, fieldset,
.dropdown-menu, .navbar, .nav-link, .breadcrumb,
.modal, .offcanvas, .toast, .tooltip, .popover,
.accordion, .alert, .badge, .card, .carousel,
.progress, .spinner, .pagination, .list-group,
.btn-close, .form-control, .form-select, .form-check,
.input-group, .input-group-text, .form-floating,
.accordion-button, .accordion-body, .accordion-header,
.card-header, .card-body, .card-footer, .card-title, .card-text,
.offcanvas-header, .offcanvas-body, .offcanvas-title,
.modal-header, .modal-body, .modal-footer, .modal-title,
.toast-header, .toast-body,
.dropdown-item, .dropdown-toggle,
.nav-item, .navbar-brand,
.breadcrumb-item,
.pagination a, .pagination span, .page-link, .page-item,
.list-group-item,
.cart-drawer-body, .ps-step-body,
.quick-quote-floating, .quote-float-btn,
.home-product-category, .home-product-body h3, .home-product-body p,
.home-product-spec, .home-product-spec dt, .home-product-spec dd,
.home-product-actions,
.applications-card-body, .application-product-body,
.spec-code, .product-badge-code, .product-badge,
.product-title, .product-category, .product-price,
.product-highlights, .product-capacity, .product-actions,
.filter-bar-content, .filter-group-horizontal, .filter-group-horizontal label,
.filter-select-horizontal, .filter-input-horizontal, .sort-select, .view-btn,
.filter-btn-apply, .filter-btn-clear,
.price-range-horizontal,
.breadcrumbs-centered, .breadcrumb-link, .breadcrumb-current, .breadcrumb-separator,
.controls-bar-centered, .sort-dropdown-centered, .view-options-centered,
.section-title-centered, .section-title,
.results-count, .no-products-found, .pagination-wrapper,
.cta-btn, .btn-cta, .btn-cta--ghost, .btn-cta--inline,
.whatsapp-order-btn, .btn-view, .action-btn,
.page-header-section, .page-title-main, .page-subtitle {
    font-family: 'Cairo', var(--site-font), sans-serif !important;
}

/* ---- Global Cairo catch-all: deliberate exceptions.
   One category must NOT be forced into Cairo:
   Technical values (product codes, standards numbers, dimensions) stay
   monospaced because Cairo's proportional digits make a column of specs
   very hard to scan - it's the ONLY place a fixed-width face is wanted.
   Written with !important because the catch-all block above uses !important,
   and it appears AFTER the catch-all so cascade-order gives it the final
   word on any overlap (pre, .spec-code, .product-badge-code).
*/
code,
kbd,
samp,
pre,
.product-badge-code,
.spec-code {
    font-family: ui-monospace, "Cascadia Mono", "Consolas", "Courier New", monospace !important;
    letter-spacing: normal;
}

/* Legacy helper classes. They no longer mean anything beyond "the site font
   at weight X" - they are kept only so an old snippet cannot regress to a
   browser default. Nothing in the templates should need them; the token on
   <html> does the whole job. Cairo ships upright weights only (no italics),
   so the -italic variants now suppress style synthesis just in case. */
.amiri-regular {
    font-family: var(--site-font);
    font-weight: 400;
    font-style: normal;
}

.amiri-bold {
    font-family: var(--site-font);
    font-weight: 700;
    font-style: normal;
}

.amiri-regular-italic {
    font-family: var(--site-font);
    font-weight: 400;
    font-style: italic;
    font-synthesis-style: none;
}

.amiri-bold-italic {
    font-family: var(--site-font);
    font-weight: 700;
    font-style: italic;
    font-synthesis-style: none;
}

/* Form controls never inherit the page font unless told to. They are told to,
   so a control follows whichever language the page is in instead of being
   pinned to one face - the old rule forced the Arabic face onto English forms. */
button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: inherit;
    line-height: 1.65;
    color: var(--pg-text);
    background-color: var(--pg-bg);
    /* Removed rather than retuned. -webkit-font-smoothing has no effect on
       Windows Chrome at all, so it cannot be what the reported defect came
       from; on macOS and iOS it forces grayscale antialiasing, which thins
       exactly the light strokes Arabic depends on. Leaving it in meant the
       site looked different - and worse for Arabic - on Apple devices. */
}

h1, h2, h3, h4, h5, h6 {
    color: var(--pg-heading);
    font-weight: 700;
    line-height: 1.25;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

ul {
    list-style: none;
}

.container {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- Top Bar --- */
.top-bar {
    background-color: var(--deep-blue);
    color: var(--white);
    padding: 1px 0;
    font-size: 0.9rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.top-bar-content {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.contact-info {
    display: flex;
    gap: 20px;
}

.contact-info i {
    margin-left: 8px;
    color: var(--aqua-blue);
}

.top-bar-left {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 25px;
}

.lang-switcher {
    display: flex;
    gap: 10px;
    align-items: center;
}

.lang-switcher a.active {
    font-weight: bold;
    color: var(--aqua-blue);
}

.social-icons {
    display: flex;
    gap: 15px;
}

.social-icons a:hover {
    color: var(--aqua-blue);
    transform: translateY(-2px);
}

/* --- Header & Navbar --- */
.main-header {
    background-color: var(--white);
    box-shadow: 0 2px 15px rgba(9, 0, 41, 0.82);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.navbar {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 1px 0;
}

.logo-section {
    display: flex;
    align-items: center;
}

.logo-container {
    display: flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
}

/* Bootstrap gives .navbar-brand `margin-right: 1rem` + padding-y, which would
   add a stray gap next to the logo inside the grid. */
.navbar-brand {
    margin: 0;
    padding: 0;
}

.company-logo {
    max-height: 56px;
    width: auto;
    height: auto;
    display: block;
    /* PG Brand Guide — STRICTLY FORBIDDEN:
       stretch, distort, horizontal/vertical scaling, rotation, stroke,
       drop-shadow, bevel, inner-shadow, or any effect on the logo. */
    transform: none;
    filter: none;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    text-indent: -9999px;
    padding: 8px;
}

/* Logo safe area (Clear / Safe Space): minimum spacing around the logo
   so nav items, text and buttons never crowd it. Brand Guide uses 42px
   as the baseline; we clamp it responsively so the layout holds on phones. */
.logo-container {
    margin-inline-end: min(28px, 3vw);
    display: flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
}

.footer-col--about .logo-container {
    padding: 0 0 12px 0;
    margin-inline-end: 0;
}

/*
 * Wordmark shown in place of the logo while no logo file has been supplied.
 * It occupies the same slot as the image so the header and footer keep their
 * layout, and it inherits the company font rather than a hardcoded face.
 */
.company-wordmark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 6px 18px;
    font-family: var(--site-font);
    font-size: 1.5rem;
    font-weight: 700;
    /* letter-spacing removed: the wordmark is Arabic, and tracking breaks
       the cursive join between Arabic glyphs. */
    letter-spacing: normal;
    color: #fff;
    background: var(--brand-primary, #004aba);
    border-radius: var(--brand-radius-sm, 8px);
    white-space: nowrap;
    line-height: 1;
}

.footer-section .company-wordmark,
.logo-section .company-wordmark {
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .28);
}

.brand-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.brand-text .main-title {
    color: var(--deep-blue);
    /* 800 removed: Amiri has no 800 face, so this produced a synthesised
       bold on the Arabic wordmark. */
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1.45;
    display: block;
}

.brand-text .sub-title {
    color: var(--ocean-blue);
    font-size: 0.75rem;
    font-weight: 700;
    /* tracking removed — the tagline is Arabic and must stay joined. */
    letter-spacing: normal;
    display: block;
}

/* --- Header Logo + Dynamic Multilingual Text --------------------------------
   Sits to the side of the mark in the navbar. Base sizes match the exact
   spec the brief asked for; responsive overrides live inside each breakpoint
   below so the layout stays balanced down to ~250px without wrapping. */
.header-logo-wrap {
    min-width: 0;
}

.header-brand-text {
    min-width: 0;
}

.header-brand-title {
    font-size: 18px !important;
    line-height: 1.2 !important;
    white-space: nowrap;
}

.header-brand-sub {
    white-space: nowrap;
    line-height: 1.3 !important;
}

.header-brand-sub--en {
    font-size: 10px !important;
    text-transform: uppercase;
    letter-spacing: 0.5px !important;
    font-weight: 600;
}

.header-brand-sub--ar {
    font-size: 11px !important;
    font-weight: 600;
}

@media (max-width: 1199.98px) {
    .header-brand-title {
        font-size: 16px !important;
    }
    .header-brand-sub--en {
        font-size: 9px !important;
    }
    .header-brand-sub--ar {
        font-size: 10px !important;
    }
}

@media (max-width: 575.98px) {
    .header-brand-title {
        font-size: 14px !important;
    }
    .header-logo-wrap {
        gap: 0.5rem !important;
    }
}

/* --- Extra-small mobile header (< 430px): prevent horizontal overflow ------
   iPhone SE (375px) / compact Android (360px) screens. Every component is
   deliberately scaled down, the tagline is hidden, and the container is
   constrained to 100% viewport width so the top bar + header bar never
   trigger a horizontal scroll. */
@media (max-width: 430px) {
    /* 1. Top Bar */
    .top-bar {
        font-size: 11px;
        padding: 2px 0;
    }

    .top-bar .container {
        padding: 0 10px;
    }

    .top-bar-content {
        gap: 8px;
    }

    .contact-info {
        gap: 6px;
    }

    .contact-info span,
    .contact-info a,
    .lang-switcher a {
        font-size: 10px;
    }

    .contact-info i {
        margin-left: 4px;
        font-size: 10px;
    }

    .top-bar-left {
        gap: 10px;
    }

    .social-icons {
        gap: 8px;
    }

    .social-icons a {
        font-size: 10px;
    }

    /* 4. Header row: lock to 100% width, single flex row */
    .main-header .container {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding: 0 10px;
        overflow: hidden;
    }

    .navbar {
        width: 100%;
        max-width: 100%;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
        padding: 4px 0;
    }

    /* 2. Logo + Brand Text */
    .header-section--brand,
    .navbar-brand {
        flex: 1 1 auto;
        min-width: 0;
    }

    .header-logo-wrap {
        gap: 0.35rem !important;
    }

    .company-logo {
        max-height: 30px !important;
        padding: 4px !important;
    }

    .header-brand-title {
        font-size: 12px !important;
    }

    .header-brand-sub,
    .header-brand-sub--en,
    .header-brand-sub--ar,
    .brand-text .sub-title {
        display: none !important;
    }

    /* 3. Cart icon & Hamburger */
    .header-mobile-controls {
        gap: 4px !important;
    }

    .cart-toggle-btn {
        width: 34px !important;
        height: 34px !important;
        font-size: 0.9rem !important;
        border-width: 1.5px !important;
    }

    .cart-toggle-btn .cart-count {
        min-width: 16px !important;
        height: 16px !important;
        padding: 0 4px !important;
        font-size: 0.6rem !important;
        top: -4px !important;
        left: -4px !important;
    }

    .navbar-toggler {
        font-size: 1.25rem !important;
        padding: 0 !important;
        line-height: 1;
    }

    .navbar-toggler-icon {
        width: 1.15em;
        height: 1.15em;
    }
}

@media (max-width: 400px) {
    .header-brand-title {
        font-size: 11px !important;
    }
    .header-brand-sub {
        display: none;
    }

    .company-logo {
        max-height: 28px !important;
    }

    .cart-toggle-btn {
        width: 32px !important;
        height: 32px !important;
        font-size: 0.82rem !important;
    }

    .cart-toggle-btn .cart-count {
        min-width: 15px !important;
        height: 15px !important;
        font-size: 0.55rem !important;
    }

    .navbar-toggler {
        font-size: 1.15rem !important;
    }
}

/* margin is intentionally NOT reset here: `mx-auto` on the <ul> is what centres
   the links, and a `margin: 0` shorthand would cancel it (same specificity as
   Bootstrap's .mx-auto, and style.css is loaded afterwards). */
.nav-links {
    display: flex;
    flex-direction: row;
    gap: 25px;
    padding: 0;
    list-style: none;
}

/* --- Header: 3 distinct flex sections ----------------------------------------
   Partitions the navbar into [ Brand | Nav Links | Actions ] with a guaranteed
   empty gap between the brand name and the first menu link. No floating
   overlaps, no negative margins, no absolute positioning. */
.header-section {
    display: flex;
    align-items: center;
    min-width: 0;
}

.header-section--brand {
    flex-shrink: 0;
    position: relative;
    margin: 0;
}

.header-section--nav {
    flex-shrink: 1;
    min-width: 0;
    justify-content: center;
}

.header-section--actions {
    flex-shrink: 0;
    justify-content: flex-end;
}

.header-logo-wrap {
    flex-shrink: 0;
    position: relative;
    margin: 0;
}

.nav-links li a,
.nav-links .nav-link {
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-color);
    position: relative;
    padding: 8px 0;
    text-decoration: none;
}

.nav-links li a:hover,
.nav-links li a.active,
.nav-links .nav-link:hover,
.nav-links .nav-link.active {
    color: var(--ocean-blue);
}

.nav-links li a::after,
.nav-links .nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 3px;
    background-color: var(--ocean-blue);
    transition: var(--transition);
}

.nav-links li a:hover::after,
.nav-links li a.active::after,
.nav-links .nav-link:hover::after,
.nav-links .nav-link.active::after {
    width: 100%;
}

.search-btn {
    font-size: 1.2rem;
    color: var(--deep-blue);
    cursor: pointer;
}

.lang-link {
    background-color: var(--ocean-blue);
    color: var(--white);
    padding: 8px 18px;
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 700;
}

.lang-link:hover {
    background-color: var(--deep-blue);
    color: var(--white);
}

html[dir="ltr"] .nav-links li a::after,
html[dir="ltr"] .nav-links .nav-link::after {
    right: auto;
    left: 0;
}

html[dir="ltr"] body {
    direction: ltr;
}

/* The mobile menu is handled by the Bootstrap 5 collapse, so no custom
   .mobile-menu-toggle element is required any more. */

/* --- Mobile navbar dropdown -------------------------------------------------
   The top row (logo + cart + toggler) stays a flex line, while the collapsible
   menu is taken out of the flow and floats underneath the header bar as a
   dropdown, so opening it can never squash or misalign the logo and cart icon.
   The breakpoint matches Bootstrap's `navbar-expand-xl` / `d-xl-none`. */
@media (max-width: 1199.98px) {
    .navbar {
        position: relative;
    }

    .navbar-brand {
        flex: 1 1 auto;
        min-width: 0;
    }

    .brand-text .main-title {
        font-size: 1.15rem;
    }

    .brand-text .sub-title {
        /* 0.62rem = 9.92px, too small for Arabic - the joins and the dots
           above/below the baseline stop being distinguishable. */
        font-size: 0.75rem;
    }

    .header-mobile-controls {
        flex: 0 0 auto;
    }

    .navbar-toggler {
        font-size: 1.6rem;
        color: var(--deep-blue);
    }

    .navbar-collapse {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 1050;
        padding: 0.5rem 1rem;
        background-color: #ffffff;
        border-top: 1px solid #eeeeee;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    }

    .nav-links {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        width: 100%;
    }

    .nav-links .nav-link {
        display: block;
        width: 100%;
        text-align: center;
        padding: 12px 0;
        border-bottom: 1px solid #f1f1f1;
    }

    .nav-links .nav-link::after {
        display: none;
    }
}

/* --- Hero Slider (image-only banner mode · side-peek carousel) ---
   The active banner is centred (Swiper centeredSlides + slidesPerView > 1)
   while neighbours peek from the sides, faded and slightly scaled down.
   Legacy .slide-* overlay rules below are kept for older markup but no
   longer rendered by index.php. */
.hero-slider--banner {
    max-width: 1300px;
    margin: 20px auto;
    padding: 0 15px;
    height: auto;
    overflow: hidden;
    background: transparent;
}
.hero-slider--banner .main-swiper {
    height: auto;
    overflow: visible;
    background: transparent;
    padding-top: 6px;
    padding-bottom: 6px;
}
.hero-slider--banner .swiper-wrapper {
    align-items: stretch;
}
.hero-slider--banner .hero-banner-slide {
    height: auto;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    background: var(--pg-surface-alt, #eef5ff);
    opacity: 0.5;
    transform: scale(0.93);
    transform-origin: center center;
    transition: opacity 0.5s ease, transform 0.5s ease, box-shadow 0.5s ease;
}
.hero-slider--banner .hero-banner-slide.swiper-slide-active {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 16px 40px rgba(2, 62, 138, 0.16);
    z-index: 2;
}
/* Peek neighbours get a touch more presence on hover/focus without stealing
   the spotlight from the centred active banner. */
.hero-slider--banner .hero-banner-slide.swiper-slide-prev,
.hero-slider--banner .hero-banner-slide.swiper-slide-next {
    opacity: 0.62;
}
@media (prefers-reduced-motion: reduce) {
    .hero-slider--banner .hero-banner-slide {
        transition: none;
    }
}
.hero-banner-link {
    display: block;
    width: 100%;
}
.hero-banner-picture {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 7;
    min-height: 480px;
    max-height: 520px;
    overflow: hidden;
    background: var(--pg-surface-alt, #eef5ff);
}
.hero-banner-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
@media (max-width: 991.98px) {
    .hero-banner-picture {
        aspect-ratio: 16 / 9;
        min-height: 340px;
        max-height: 420px;
    }
}
/* Compact rectangular banner on phones / small tablets. A fixed height (not a
   square aspect) keeps the banner sleek; object-fit: cover still fills it. The
   min/max reset lets the fixed height win over the desktop & tablet rules. */
@media (max-width: 900px) {
    .hero-banner-picture {
        aspect-ratio: auto;
        height: 320px;
        min-height: 0;
        max-height: none;
    }
}
@media (max-width: 599.98px) {
    .hero-slider--banner {
        margin: 16px auto 12px;
        overflow: hidden;
    }
    .hero-slider--banner .hero-banner-slide {
        border-radius: 16px;
    }
    /* Legacy overlay card must never reappear over the banner on mobile. */
    .hero-slider--banner .slide-content-container,
    .hero-slider--banner .slide-content {
        display: none !important;
    }
}
@media (max-width: 500px) {
    .hero-banner-picture {
        height: 260px;
    }
}
@media (max-width: 400px) {
    .hero-banner-picture {
        height: 220px;
    }
}
@media (max-width: 300px) {
    .hero-banner-picture {
        height: 180px;
    }
}
.hero-slider--banner .hero-swiper .swiper-button-next,
.hero-slider--banner .hero-swiper .swiper-button-prev {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: var(--pg-primary, #023e8a);
    box-shadow: 0 6px 20px rgba(2, 62, 138, 0.18);
    backdrop-filter: blur(4px);
    top: 50%;
    margin-top: -22px;
}
.hero-slider--banner .hero-swiper .swiper-button-next::after,
.hero-slider--banner .hero-swiper .swiper-button-prev::after {
    font-size: 1.1rem;
    font-weight: 700;
}
.hero-slider--banner .hero-swiper .swiper-pagination {
    position: relative;
    margin-top: 14px;
    bottom: auto;
    text-align: center;
}
.hero-slider--banner .hero-swiper .swiper-pagination-bullet {
    background: #004aba;
    opacity: 0.35;
}
.hero-slider--banner .hero-swiper .swiper-pagination-bullet-active {
    opacity: 1;
}
@media (max-width: 599.98px) {
    .hero-slider--banner .hero-swiper .swiper-button-next,
    .hero-slider--banner .hero-swiper .swiper-button-prev {
        display: none;
    }
}

/* --- Home categories strip (below hero) ------------------------------------
   Responsive square cards: photo (or icon tile) + Cairo name underneath.
   Links to products.php?category= (the param the listing actually reads). */
.home-categories {
    padding: 26px 0 8px;
    background: transparent;
}
/* --- Home categories: grid on desktop, swipeable carousel on mobile -------
   The markup is a Swiper (.home-categories-swiper > .swiper-wrapper >
   .swiper-slide). Swiper only runs under 900px (script.js). On desktop the
   wrapper is restyled as a responsive grid; below 900px Swiper drives a
   side-peek carousel. The grid overrides Swiper's flex/height base CSS. */
.home-categories-swiper {
    max-width: 1100px;
    margin: 0 auto;
    overflow: visible; /* desktop: let the hover lift show, not clip */
}
/* Navigation arrows only exist for the mobile carousel. On desktop the layout is
   a CSS grid (Swiper is destroyed), so hide them by default; the < 900px block
   below reveals and styles them. */
.home-categories-swiper .category-prev-btn,
.home-categories-swiper .category-next-btn {
    display: none;
}
.home-categories-swiper .home-categories-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 18px;
    width: auto;
    height: auto;
    transform: none;
    box-sizing: border-box;
}
.home-categories-swiper .swiper-slide {
    width: auto;
    height: auto;
    opacity: 1;
}
.home-categories-pagination {
    display: none; /* desktop: grid needs no dots */
}
.home-category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    transition: transform 0.3s ease;
}
.home-category-card:hover,
.home-category-card:focus-visible {
    transform: translateY(-5px);
}
.home-category-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 170px;
    aspect-ratio: 1 / 1;
    border-radius: 16px;
    overflow: hidden;
    background: var(--pg-surface-alt, #eef5ff);
    box-shadow: 0 6px 20px rgba(2, 62, 138, 0.10);
    border: 1px solid var(--pg-border, #e3edf7);
    transition: box-shadow 0.3s ease;
}
.home-category-card:hover .home-category-thumb,
.home-category-card:focus-visible .home-category-thumb {
    box-shadow: 0 12px 28px rgba(2, 62, 138, 0.18);
}
.home-category-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.home-category-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: var(--pg-gradient, linear-gradient(135deg, #023e8a 0%, #0077b6 50%, #0096c7 100%));
    color: #fff;
    font-size: 2.4rem;
}
.home-category-name {
    font-family: var(--site-font);
    font-weight: 600;
    font-size: 14px;
    text-align: center;
    margin-top: 10px;
    color: var(--pg-text, #1f2a37);
    line-height: 1.5;
}
.home-category-card:hover .home-category-name {
    color: var(--pg-primary, #023e8a);
}
/* Mobile / tablet (< 900px): Swiper takes over as a swipeable, side-peek
   carousel. Swiper.js sets .swiper-wrapper back to flex and sizes each slide
   from slidesPerView; the rules below (1) keep the whole strip inside a strict,
   centred 1200px boundary so its background/layout never stretches edge-to-edge,
   and (2) restyle each slide as a compact centred tile — light surface, soft
   shadow, fixed square image, Cairo title that wraps without overflow. */
@media (max-width: 899.98px) {
    /* 1. Strict container boundary: cap the section width, centre it, and give it
          one clean 15px gutter. box-sizing keeps that padding inside the cap so
          the strip never overflows or stretches the page width. */
    .home-categories {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        padding: 10px 15px 6px;
        box-sizing: border-box;
    }
    .home-categories .section-header {
        margin-bottom: 10px !important; /* beats Bootstrap .mb-4 on the markup */
    }
    .home-categories .section-title {
        margin-bottom: 2px;
    }
    .home-categories .section-subtitle {
        margin-bottom: 0;
        font-size: 0.95rem;
    }

    /* 2. Inner wrapper: no gutter of its own — the section's 15px is the only
          horizontal padding, so heading and cards share one centred edge. */
    .home-categories .container {
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    /* 3. Swiper track: flush inside the 15px gutter, clipping the side peek. */
    .home-categories-swiper {
        max-width: none;
        overflow: hidden;
        padding: 0;
    }
    .home-categories-swiper .home-categories-wrapper {
        display: flex; /* hand layout back to Swiper */
        align-items: stretch; /* equal-height cards across the row */
        gap: 0;
        transform: none;
    }
    /* The card and the slide are the SAME element (<a class="swiper-slide
       home-category-card">). Swiper owns its width via an inline style computed
       from slidesPerView, so this rule must NOT set width / max-width — doing so
       (especially with !important) overrides Swiper and collapses or bloats the
       cards. We only assert the box model Swiper relies on. */
    .home-categories-swiper .swiper-slide {
        height: auto;
        display: flex; /* card fills the slide so names align across slides */
        flex-shrink: 0; /* never squash below the Swiper-computed width */
        box-sizing: border-box;
    }

    /* 4. Compact card: modern light surface, soft shadow, rounded, centred.
          The card IS the slide, so its width is owned entirely by Swiper's
          slidesPerView (inline width). We must NOT set a fixed pixel width or a
          max-width here — either one fights Swiper's translate math and brings
          back uneven gaps. slidesPerView (1.2–2.2) already keeps cards compact. */
    .home-category-card {
        height: 100%;
        background: var(--pg-surface, #f7fbff);
        border: 1px solid var(--pg-border, #e3edf7);
        border-radius: 14px;
        padding: 12px 8px;
        text-align: center;
        box-shadow: 0 4px 16px rgba(2, 62, 138, 0.08);
    }

    /* 5. Fixed square image: compact, centred, rounded, cover-cropped. The card
          carries the elevation, so the tile drops its own shadow/border. */
    .home-category-thumb {
        width: 104px;
        height: 104px;
        max-width: 104px;
        margin: 0 auto 8px auto;
        border: none;
        border-radius: 10px;
        box-shadow: none;
    }
    .home-category-icon {
        font-size: 1.9rem;
    }

    /* 6. Title: compact Cairo, wraps cleanly with no overflow or misplacement. */
    .home-category-name {
        width: 100%;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.4;
        text-align: center;
        word-break: break-word;
        margin-top: 0;
    }

    /* 7. Navigation arrows (replace the pagination dots). Scoped to
          .home-categories-swiper so these beat the global
          `.swiper-button-next { display:none !important }` that hides arrows under
          600px (style.css ~6531) — the category arrows must stay visible there, so
          display carries !important too. */
    .home-categories-swiper .category-prev-btn,
    .home-categories-swiper .category-next-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        background-color: rgba(255, 255, 255, 0.92);
        border-radius: 50%;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
        color: var(--pg-primary, #0d6efd);
        transition: opacity 0.3s ease, visibility 0.3s ease, background-color 0.2s ease;
        z-index: 5;
    }
    .home-categories-swiper .category-prev-btn::after,
    .home-categories-swiper .category-next-btn::after {
        font-size: 14px;
        font-weight: bold;
    }
    .home-categories-swiper .category-prev-btn:hover,
    .home-categories-swiper .category-next-btn:hover {
        background-color: #fff;
    }
    /* RTL positioning (Arabic, default): the site reads right-to-left, so PREV
       sits on the RIGHT (where earlier cards are) and NEXT on the LEFT (where the
       upcoming cards are). Matches Swiper's rtl:true forward/backward direction. */
    .home-categories-swiper .category-prev-btn {
        right: 2px;
        left: auto;
    }
    .home-categories-swiper .category-next-btn {
        left: 2px;
        right: auto;
    }
    /* LTR override (English): mirror the arrows — PREV on the LEFT, NEXT on the
       RIGHT — to match Swiper's rtl:false direction and LTR reading order.
       Scoped to html[dir="ltr"] (the site emits lang/dir on <html>), and given
       !important so it reliably wins over the RTL defaults above. */
    html[dir="ltr"] .home-categories-swiper .category-prev-btn {
        left: 2px !important;
        right: auto !important;
    }
    html[dir="ltr"] .home-categories-swiper .category-next-btn {
        right: 2px !important;
        left: auto !important;
    }
    /* Arrow GLYPHS need NO manual mirror — Swiper points its chevrons correctly in
       BOTH directions by itself. In RTL it adds .swiper-rtl and swaps the ::after
       content (the forward button shows the left-pointing "prev" glyph); in LTR the
       defaults are already right — "next" on the right, "prev" on the left. Adding a
       scaleX(-1) here would double-mirror the already-correct LTR chevrons and point
       them the wrong way, so it is intentionally omitted. */
    /* Auto-hide an arrow when Swiper marks it disabled (no more cards that way). */
    .home-categories-swiper .category-prev-btn.swiper-button-disabled,
    .home-categories-swiper .category-next-btn.swiper-button-disabled {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}

/* < 600px: slightly smaller square for the wider 3-across tier (500–599px,
   where Swiper shows 3.2 cards). */
@media (max-width: 599.98px) {
    .home-category-thumb {
        width: 96px;
        height: 96px;
        max-width: 96px;
    }
    /* Restore category names on mobile. A previous -webkit-line-clamp +
       overflow:hidden collapsed the box and clipped the text (names vanished).
       Force a plain, fully visible block so every title renders under its card. */
    .home-category-name {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        margin-top: 6px !important;
        text-align: center !important;
        color: #222 !important;
        line-height: 1.3 !important;
        height: auto !important;
        overflow: visible !important;
        -webkit-line-clamp: none !important;
        -webkit-box-orient: horizontal !important;
        word-break: break-word;
    }
}

/* < 500px: three compact cards side-by-side. Shrink the card padding, the square
   image and the title so three neat items fit without crowding. !important keeps
   these compact rules ahead of the base card/thumb/name rules and the wider
   < 600px tier wherever the ranges overlap. */
@media (max-width: 499.98px) {
    .home-category-card {
        padding: 8px 6px !important;
        border-radius: 12px !important;
    }
    /* Shrink the square image / icon container. */
    .home-category-thumb {
        width: 55px !important;
        height: 55px !important;
        max-width: 55px !important;
        margin: 0 auto 6px !important;
        border-radius: 8px !important;
    }
    .home-category-thumb img,
    .home-category-thumb i {
        font-size: 20px !important;
    }
    /* Category titles are handled by the < 600px block above (fully visible,
       no clamp) — intentionally not re-declared here so nothing clips them. */
}
/* visually-hidden fallback: Bootstrap ships it, but the hero h1 must stay
   hidden even if the CDN class is ever renamed or blocked. */
.hero-slider--banner .visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* --- Hero Slider (legacy overlay mode, kept for reference) --- */
.hero-slider {
    position: relative;
    width: 100%;
    height: 600px;
    overflow: hidden;
}

.main-swiper {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    position: relative;
    display: flex;
    align-items: center;
}

.slide-image {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 1;
}

.slide-content-container {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: flex-start;
    /* Aligns to right in RTL */
    width: 100%;
}

/*
 * Hero content card.
 *
 * The card used to carry the same blue gradient as the hero behind it, so the
 * panel and the background were nearly the same tone and the text had little
 * separation from the rest of the slide. The card is now a white surface: the
 * treatment the brand guide gives for text on imagery, and it lifts the heading
 * clear of the gradient.
 *
 * The hero background is NOT changed. .slide-image still carries the PG gradient
 * #023E8A -> #0077B6 -> #0096C7, as the brand fallback or beneath a photograph,
 * so the identity of the hero is exactly as before.
 *
 * Because the surface is now light the text had to follow: white on white would
 * be invisible. Headings move to the primary blue, body copy to a dark neutral,
 * and the opacity values are removed because they were tuned for a dark panel.
 */
.slide-content {
    max-width: 550px;
    padding: 40px;
    background: #f8f9fa7d;
    color: var(--pg-text);
    border-radius: 15px;
    /* A light card over a dark hero needs its own shadow to read as a surface. */
    box-shadow: 0 12px 34px rgba(2, 62, 138, .18);
    /* The blur was frosted glass, which only means anything over a coloured
       panel; on a solid white card it is invisible. */
    backdrop-filter: none;
    /* fill-mode is `backwards`, not `forwards`: with `forwards` the browser
       keeps the last keyframe (`transform: translateY(0)`) applied forever,
       which pins the card to its own compositing layer. Text on a composited
       layer loses ClearType subpixel rendering in Chrome/Windows and renders
       with grayscale AA, which is what made the Arabic look soft and muffled.
       With `backwards` the element returns to its own `transform: none` once
       the 0.8s run finishes, so the glyphs are rasterised normally again.
       The visible animation is unchanged. */
    animation: fadeInUp 0.8s ease backwards;
    transform: none;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.slide-content h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 20px;
    /* Amiri is a Naskh face: at 1.2 the hamza/alef ascenders of one line
       collide with the descenders of the next. Arabic needs more leading. */
    line-height: 1.4;
    letter-spacing: normal;
    /* Primary blue, so the heading reads as the identity rather than as
       white text that only worked against the old dark panel. */
    color: var(--pg-primary);
}

.slide-content p {
    font-size: 1.1rem;
    margin-bottom: 30px;
    color: var(--pg-text);
    opacity: 1;
}

.btn-cta {
    display: inline-block;
    padding: 12px 35px;
    background-color: var(--ocean-blue);
    color: var(--white);
    font-weight: 700;
    border-radius: 50px;
    border: 2px solid var(--ocean-blue);
    transition: var(--transition);
}

.btn-cta:hover {
    background-color: var(--white);
    color: var(--ocean-blue);
    /* Translate, not scale: scaling re-rasterises the label, and a composited
       layer drops Arabic from subpixel to grayscale antialiasing in Chrome. */
    transform: translateY(-2px);
}

/* Swiper Customization */
.swiper-button-next,
.swiper-button-prev {
    color: var(--white);
    background-color: rgba(2, 62, 138, 0.3);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    transition: var(--transition);
}

.swiper-button-next:after,
.swiper-button-prev:after {
    font-size: 1.5rem;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
    background-color: var(--ocean-blue);
}

.swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background-color: var(--white);
    opacity: 0.5;
    background-color: #004aba;
}

.swiper-pagination-bullet-active {
    opacity: 1;
    background-color: var(--aqua-blue);
    width: 30px;
    border-radius: 10px;
}

/* --- General Section Styles --- */
.section-padding {
    padding: 100px 0;
}

.section-title {
    font-size: 2.2rem;
    color: var(--ocean-blue);
    font-weight: 700;
}

.section-subtitle {
    display: block;
    color: var(--aqua-blue);
    font-weight: 700;
    margin-bottom: 10px;
    font-size: 1.1rem;
}

.specs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

.spec-card {
    background-color: var(--white);
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
    transition: var(--transition);
    border: 1px solid transparent;
    padding: 10px;
}

.text-center {
    text-align: center;
}

.section-header {
    margin-bottom: 20px;
}

.section-header p {
    color: #666;
    font-size: 1.1rem;
}

/* --- Dynamic Technical Specifications --- */
.specs-dynamic-section { margin-bottom: 52px; }
.specs-section-header { display: block; }
.specs-section-icon { width: auto; max-width: 80px; height: 80px; padding: 8px; object-fit: contain; background: #eaf4ff; border-radius: 16px; }
.specs-section-title { margin: 0 auto; color: var(--deep-blue); font-size: clamp(1.5rem, 3vw, 2.15rem); font-weight: 700; }
.specs-section-description { max-width: 900px; margin: 10px auto 0; color: #5f6d7e; font-size: 1.03rem; line-height: 1.9; }
.specs-point-card { width: 100%; border: 1px solid #e3ebf4; transition: transform .25s ease, box-shadow .25s ease; }
.specs-point-card:hover { transform: translateY(-4px); box-shadow: 0 16px 38px rgba(2,62,138,.12) !important; }
.specs-point-card-circle { min-height: 0; overflow: hidden; }
.specs-point-icon { width: 50px; height: 50px; max-width: 50px; padding: 6px; object-fit: contain; background: #eef7ff; border-radius: 12px; }
.specs-point-text { max-width: 100%; color: #3f4d5e; line-height: 1.65; overflow-wrap: anywhere; }
.specs-point-index { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 30px; height: 30px; margin-bottom: 13px; color: #fff; background: var(--ocean-blue); border-radius: 50%; font-size: 13px; font-weight: 700; }
.specs-point-column { display: flex; justify-content: center; }
@media (max-width: 575.98px) {
    .specs-point-card-circle { max-width: min(100%, 300px) !important; }
    .specs-point-text { font-size: .92rem; }
}

.about-extra-section { margin-bottom: 30px; }
.about-extra-media { height: 100%; min-height: 250px; padding: 14px; background: #eef7ff; border-radius: 18px; }
.about-extra-media img { width: 100%; height: 100%; min-height: 250px; object-fit: cover; border-radius: 12px; }
.about-extra-copy { padding: 12px 18px; }
.about-extra-copy .section-title { margin-bottom: 14px; }
.about-extra-copy .about-description { margin-bottom: 0; }

/* --- Company content blocks (company_profile / values / capabilities) ----- */
.company-intro .lead { margin-bottom: 0; }

.company-values-section,
.company-capabilities-section { background: #f7fbff; }

.company-value-card,
.company-capability-card {
    height: 100%;
    padding: 28px 24px;
    background: #fff;
    border: 1px solid #e3edf7;
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(2, 62, 138, .05);
    text-align: center;
    transition: transform .25s ease, box-shadow .25s ease;
}
.company-value-card:hover,
.company-capability-card:hover { transform: translateY(-4px); box-shadow: 0 12px 26px rgba(2, 62, 138, .1); }

.company-value-card h3,
.company-capability-card h3 { margin: 16px 0 10px; font-size: 1.12rem; font-weight: 700; color: #023e8a; }
.company-value-card p,
.company-capability-card p { margin: 0; color: #55637a; line-height: 1.9; }

.company-value-icon,
.company-capability-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #e6f2ff;
    color: #0077b6;
    font-size: 1.6rem;
}

.company-value-image,
.company-capability-image {
    width: 88px;
    height: 88px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid #e6f2ff;
}

.company-why-choose-section { background: #023e8a; color: #fff; }
.company-why-choose-section .section-title { color: #fff; }
.company-why-choose-section .lead { color: #d8ecff; margin-top: 16px; margin-bottom: 0; }

/* ==========================================================================
   Home page (phase 2)
   A section with no rows is not rendered at all, so the page never shows an
   empty heading.
   ========================================================================== */

/* --- Hero ---------------------------------------------------------------- */
/* No stock photography ships with the site, so a slide without an uploaded
   background falls back to the brand gradient instead of a placeholder URL. */
.slide-image--brand {
    background-image: linear-gradient(
        135deg,
        rgba(2, 62, 138, 0.96) 0%,
        rgba(0, 119, 182, 0.94) 55%,
        rgba(0, 150, 199, 0.92) 100%
    );
}
.slide-subtitle {
    font-size: 1.05rem;
    /* font-weight reduced to 400: Amiri ships only 400/700 (confirmed from
       the Google Fonts CSS API — see includes/header.php). Requesting 500
       makes the browser match 400 and then synthesise a heavier stem, which
       is what made the thin Naskh strokes look smeared. */
    font-weight: 400;
    /* letter-spacing removed. Arabic is a joined script: a positive advance
       between glyphs pulls connected letters apart and the shaper renders
       the isolated forms, which is exactly the "متقطعة" look reported. */
    letter-spacing: normal;
    margin-bottom: 12px;
    opacity: .92;
    line-height: 1.9;
}
/* h1 inside a slide keeps the page's single top-level heading. */
.slide-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 16px;
    /* 1.2 is too tight for Amiri. Its alef/hamza ascenders and jeem/eyn
       descenders need leading or adjacent lines overlap and the letters read
       as broken into each other. */
    line-height: 1.5;
    letter-spacing: normal;
}
.slide-text {
    font-size: 1.05rem;
    line-height: 1.95;
    margin-bottom: 24px;
    opacity: .95;
    letter-spacing: normal;
}
.slide-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.slide-actions .btn-cta + .btn-cta { margin-inline-start: 0; }

.btn-cta--inline { display: inline-block; margin-top: 18px; }
.btn-cta--ghost { background: transparent; border: 2px solid currentColor; color: inherit; }
.btn-cta--ghost:hover { background: rgba(255, 255, 255, .16); color: inherit; }

/* --- Company introduction ------------------------------------------------ */
.home-intro-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
.home-intro-lead { font-size: 1.12rem; font-weight: 400; line-height: 1.9; color: #1f3550; margin-bottom: 14px; }
.home-intro-text { line-height: 1.95; color: #55637a; margin-bottom: 0; }
.home-intro-media img,
.home-intro-placeholder {
    width: 100%;
    min-height: 320px;
    object-fit: cover;
    border-radius: 18px;
    background: #eef7ff;
}
.home-intro-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    color: #0077b6;
}

/* --- Shared card shell --------------------------------------------------- */
.home-capability-card,
.home-why-card,
.home-application-card,
.home-contact-card {
    height: 100%;
    padding: 28px 22px;
    background: #fff;
    border: 1px solid #e3edf7;
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(2, 62, 138, .05);
    text-align: center;
}
.home-capability-card h3,
.home-why-card h3,
.home-application-card h3,
.home-contact-card h3 { margin: 14px 0 8px; font-size: 1.08rem; font-weight: 700; color: #023e8a;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}
.home-capability-card p,
.home-why-card p,
.home-application-card p,
.home-contact-card p { margin: 0; color: #55637a; line-height: 1.85;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}
.home-contact-card a { color: #0077b6; word-break: break-word; }
.home-contact-card a:hover { color: #023e8a; }

.home-card-icon,
.home-contact-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: #e6f2ff;
    color: #0077b6;
    font-size: 1.5rem;
}
.home-card-image { width: 84px; height: 84px; object-fit: cover; border-radius: 50%; border: 3px solid #e6f2ff; }
.home-application-icon { font-size: 1.7rem; color: #0077b6; }
.home-application-image { width: 68px; height: 68px; object-fit: cover; border-radius: 50%; border: 3px solid #e6f2ff; }

/* Applications / Sectors cards: box-sizing, padding + mobile text scaling */
.home-application-card {
    box-sizing: border-box;
}

@media (max-width: 600px) {
    .home-application-card {
        padding-left: 8px;
        padding-right: 8px;
        padding-top: 18px;
        padding-bottom: 18px;
    }

    .home-application-card h3 {
        font-size: 14px;
        line-height: 1.45;
        margin: 10px 0 6px;
    }

    .home-application-card p {
        font-size: 12px;
        line-height: 1.7;
    }

    .home-application-icon { font-size: 1.35rem; }
    .home-application-image { width: 52px; height: 52px; }
}

/* --- Featured products --------------------------------------------------- */
.home-featured { background: #f7fbff; }
.home-product-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e3edf7;
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(2, 62, 138, .05);
    transition: transform .25s ease, box-shadow .25s ease;
}
.home-product-card:hover { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(2, 62, 138, .12); }
.home-product-media {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eef4fb;
    padding: 16px;
    aspect-ratio: 4/3;
    flex: 0 0 auto;
}
.home-product-media img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center center;
}
.home-product-body { display: flex; flex: 1; flex-direction: column; padding: 20px; }
.home-product-category {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .82rem;
    font-weight: 700;
    color: #0077b6;
    margin-bottom: 10px;
}
.home-product-body h3 { margin: 0 0 10px; font-size: 1.05rem; font-weight: 700; color: #023e8a; line-height: 1.4; }
.home-product-body > p { margin: 0 0 14px; color: #55637a; line-height: 1.8; font-size: .93rem; }
.home-product-spec {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: auto 0 16px;
    padding: 10px 12px;
    background: #f2f8ff;
    border-radius: 10px;
    font-size: .85rem;
}
.home-product-spec dt { font-weight: 700; color: #55637a; }
.home-product-spec dd { margin: 0; font-weight: 700; color: #023e8a; }
.home-product-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.home-product-actions .btn-cta { margin-top: 0; font-size: .88rem; padding: 9px 16px; flex: 1 1 auto; text-align: center; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.home-product-actions .btn-cta--ghost { color: #0077b6; border-color: #0077b6; }
.home-product-actions .btn-cta--ghost:hover { background: #e6f2ff; color: #023e8a; }

/* --- Responsive Featured Products (Mobile: 2-per-row) -------------------- */
@media (max-width: 767px) {
    .home-featured .row.g-4 { gap: 12px; }
    .home-featured .row.g-4 > [class*="col-"] { padding-left: 6px; padding-right: 6px; margin-bottom: 0; }
    .home-product-media { padding: 10px; aspect-ratio: 1/1; }
    .home-product-body { padding: 12px; }
    .home-product-category { font-size: .7rem; gap: 4px; margin-bottom: 6px; }
    .home-product-category i { font-size: .65rem; }
    .home-product-body h3 { font-size: .85rem; margin-bottom: 6px; line-height: 1.3; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
    .home-product-body > p { display: none; }
    .home-product-spec { padding: 6px 8px; font-size: .72rem; gap: 4px; margin-bottom: 10px; }
    .home-product-actions { gap: 6px; flex-direction: column; }
    .home-product-actions .btn-cta { font-size: .72rem; padding: 7px 10px; min-height: 40px; flex: 0 0 auto; width: 100%; }
}
@media (max-width: 400px) {
    .home-featured .row.g-4 { gap: 8px; }
    .home-featured .row.g-4 > [class*="col-"] { padding-left: 4px; padding-right: 4px; }
    .home-product-media { padding: 8px; }
    .home-product-body { padding: 10px; }
    .home-product-category { font-size: .65rem; }
    .home-product-body h3 { font-size: .78rem; }
    .home-product-spec { font-size: .68rem; padding: 5px 7px; }
    .home-product-actions .btn-cta { font-size: .68rem; padding: 6px 8px; min-height: 38px; }
}

/* --- Section backgrounds ------------------------------------------------- */
.home-applications { background: #f7fbff; }
.home-why { background: #fff; }
.home-contact { background: #f7fbff; }

/* --- Supply & Project Support (home page only) --------------------------- *
 * The section background is set to the light neutral #f8fafc further down this
 * file, where the phase-8 card layout lives. The dark-panel colours that used to
 * sit here were written for a #023e8a background that no longer exists, so they
 * painted white text onto a near-white surface: the heading measured 1.05:1
 * against its own background, which is effectively invisible.
 *
 * These colours are for the light surface that is actually rendered. The layout
 * properties (flex, gap, max-width, margins) are unchanged, and .home-support is
 * used only by index.php, so no other page is affected.
 *
 * The brand tokens are used rather than repeated hex values. */
.home-support { color: var(--pg-text); }
.home-support .section-title { color: var(--pg-primary); }
.home-support .section-subtitle { color: var(--pg-secondary); }
.home-support-text { color: var(--pg-text-muted); line-height: 1.95; max-width: 760px; margin: 0 auto 26px; }
.home-support-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.home-support-actions .btn-cta { margin: 0; }

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 991px) {
    .home-intro-grid { grid-template-columns: 1fr; gap: 32px; }
    .home-intro-media img, .home-intro-placeholder { min-height: 240px; }
}
@media (max-width: 767px) {
    .hero-slider { height: 520px; }
    .slide-content { padding: 28px; }
    .slide-title { font-size: 1.8rem; }
    .slide-text { font-size: .98rem; }
    .slide-actions .btn-cta,
    .home-support-actions .btn-cta { width: 100%; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
    .home-product-card { transition: none; }
    .home-product-card:hover { transform: none; }
}
.about-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 60px;
    align-items: center;
}

.about-description {
    font-size: 1.1rem;
    color: #555;
    margin-bottom: 20px;
    text-align: justify;
}

.about-meta-block {
    margin-top: 22px;
}

.about-meta-block h3 {
    margin-bottom: 8px;
    color: var(--deep-blue);
    font-size: 1.25rem;
    font-weight: 700;
}

.about-features {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 30px;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: aliceblue;
    border-radius: 10px;
    box-shadow: 0 0 5px lightgray;
    padding: 10px 10px;
}

.feature-item i {
    color: var(--aqua-blue);
    font-size: 1.3rem;
}

.feature-item span {
    font-weight: 700;
    color: var(--deep-blue);
}

.about-media {
    position: relative;
}

.video-placeholder {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.video-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background-color: var(--white);
    color: var(--ocean-blue);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.2);
    transition: var(--transition);
}

.play-btn:hover {
    background-color: var(--ocean-blue);
    color: var(--white);
    /* The -50%/-50% is how this button is centred, so it has to stay; only the
       scale is dropped, for the reason given on .btn-cta:hover above. */
    transform: translate(-50%, -50%);
}

/* --- Products Section --- */
.products-section {
    background-color: var(--light-gray);
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

.product-card {
    background-color: var(--white);
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
    transition: var(--transition);
    border: 1px solid transparent;
    padding: 10px 10px 0 10px
}

.overview-content {
    padding: 10px;
    background-color: aliceblue;
    /* border: 1px solid blue; */
    border-radius: 10px;
    box-shadow: inset 0 0 10px lightblue;
}

.product-card:hover {
    transform: translateY(-10px);
    border-color: var(--aqua-blue);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.product-icon {
    width: 80px;
    height: 80px;
    background-color: rgba(0, 150, 199, 0.1);
    color: var(--aqua-blue);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 25px;
    font-size: 2.2rem;
    transition: var(--transition);
}

.product-card:hover .product-icon {
    background-color: var(--aqua-blue);
    color: var(--white);
}

.product-title {
    color: var(--deep-blue);
    font-size: 1.4rem;
    margin-bottom: 15px;
    font-weight: 700;
}

.product-desc {
    color: #666;
    margin-bottom: 25px;
    font-size: 1rem;
}

.btn-learn-more {
    display: inline-block;
    color: var(--aqua-blue);
    font-weight: 700;
    font-size: 1rem;
    padding-bottom: 5px;
    border-bottom: 2px solid var(--aqua-blue);
    transition: var(--transition);
}

.btn-learn-more:hover {
    color: var(--deep-blue);
    border-color: var(--deep-blue);
    /* letter-spacing: 0.5px removed — widening the advance on hover pulled
       the Arabic word apart mid-interaction. */
    letter-spacing: normal;
}

/* --- Contact Info Section --- */
.contact-info-section {
    background-color: var(--white);
}

.contact-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.contact-info-card {
    background: linear-gradient(135deg, var(--deep-blue), var(--ocean-blue));
    color: var(--white);
    padding: 2rem;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: var(--transition);
}

.contact-info-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.contact-icon {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    font-size: 1.5rem;
}

.contact-info-card h3 {
    margin-bottom: 1rem;
    font-size: 1.3rem;
    font-weight: 700;
}

.contact-info-card p {
    margin-bottom: 0.5rem;
    font-size: 1rem;
    line-height: 1.6;
}

/* --- Map Section --- */
.map-section {
    background-color: var(--light-gray);
}

.map-container {
    margin-top: 2rem;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.map-container iframe {
    width: 100%;
    height: 450px;
    border: none;
}

.map-placeholder { text-align: center; }
.map-placeholder .btn { max-width: calc(100% - 32px); }

.contact-container {
    max-width: 800px;
    margin: 0 auto;
    background-color: var(--white);
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.contact-form .form-group {
    margin-bottom: 20px;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    /* The site font, so a typed Arabic field renders in the same face as the
       label above it. */
    font-family: var(--site-font);
    font-size: 1rem;
    transition: var(--transition);
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--ocean-blue);
    box-shadow: 0 0 0 3px rgba(0, 119, 182, 0.1);
}

.alert {
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 25px;
    text-align: center;
    font-weight: 700;
}

.alert-success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.alert-danger {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.alert-warning {
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffeeba;
}

/* --- Footer --- */
.main-footer {
    background-color: var(--deep-blue);
    color: var(--white);
    padding: 80px 0 0;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
    gap: 40px;
    margin-bottom: 60px;
}

.footer-about {
    margin: 20px 0;
    opacity: 0.8;
    line-height: 1.8;
}

.footer-title {
    font-size: 1.3rem;
    margin-bottom: 25px;
    position: relative;
    padding-bottom: 10px;
}

.footer-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 40px;
    height: 2px;
    background-color: var(--aqua-blue);
}

.footer-links li {
    margin-bottom: 12px;
}

.footer-links a:hover {
    color: var(--aqua-blue);
    padding-right: 8px;
}

.footer-contact li {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 20px;
    opacity: 0.9;
}

.footer-contact i {
    color: var(--aqua-blue);
    margin-top: 5px;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 25px 0;
    text-align: center;
    font-size: 0.9rem;
    opacity: 0.7;
}

/* Back to Top */
.back-to-top {
    position: fixed;
    bottom: 30px;
    left: 30px;
    width: 45px;
    height: 45px;
    background-color: var(--ocean-blue);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
    z-index: 1000;
}

.back-to-top.show {
    opacity: 1;
    visibility: visible;
}

.back-to-top:hover {
    background-color: var(--deep-blue);
    transform: translateY(-5px);
}

/* Helper Classes */
.white-text {
    color: var(--white);
}

.blue-text {
    color: var(--deep-blue);
}

.white-bg {
    background-color: var(--white) !important;
}

/* Responsive Updates */
@media (max-width: 992px) {
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .hero-slider {
        height: 500px;
    }

    .slide-content {
        max-width: 90%;
        margin: 0 auto;
        padding: 30px;
        text-align: center;
    }

    .slide-content h2 {
        font-size: 1.8rem;
    }
}

@media (max-width: 768px) {
    /* Compact two-column footer: the two list columns sit side by side
       (2 + 2 of 4 columns) while the About and Contact blocks stay full width. */
    .main-footer {
        padding: 32px 0 0;
    }

    .footer-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 20px 16px;
        margin-bottom: 24px;
        text-align: start;
    }

    .footer-col--half {
        grid-column: span 2;
    }

    .footer-col--about,
    .footer-col--contact {
        grid-column: span 4;
    }

    .footer-col--about {
        margin-bottom: 4px;
    }

    .footer-grid .footer-col,
    .footer-grid .footer-links,
    .footer-grid .footer-contact {
        text-align: start;
    }

    .footer-title,
    .footer-title::after {
        text-align: start;
    }

    .footer-title::after {
        right: auto;
        left: 0;
        transform: none;
    }

    html[dir="rtl"] .footer-title::after {
        right: 0;
        left: auto;
    }

    .footer-contact li,
    .footer-contact {
        justify-content: flex-start;
    }

    .logo-section {
        justify-content: flex-start;
    }

    /* --- Reduce font sizes --- */
    .main-footer p,
    .main-footer a,
    .main-footer li {
        font-size: 0.85rem !important;
    }

    /* --- Reduce heading sizes --- */
    .main-footer h4,
    .main-footer h5,
    .main-footer .footer-title {
        font-size: 1rem !important;
        margin-bottom: 0.75rem !important;
        padding-bottom: 6px;
    }

    /* --- Scale down the logo --- */
    .main-footer img {
        max-width: 120px !important;
        height: auto;
        scale: 1;
    }

    /* --- Tighter vertical rhythm --- */
    .footer-about {
        margin: 10px 0;
        line-height: 1.6;
    }

    .footer-links li {
        margin-bottom: 6px;
    }

    .footer-contact li {
        margin-bottom: 8px;
        gap: 8px;
    }

    .footer-contact i {
        margin-top: 2px;
    }

    .footer-bottom {
        padding: 14px 0;
    }

    /* Top Bar Mobile */


    .contact-info {
        flex-direction: column;
        gap: 5px;
    }

    .contact-info span {
        margin: 0;
    }

    .top-bar-left {
        flex-direction: column;
        gap: 10px;
    }

    /* The menu drops below the header bar. This matches the navbar-expand-lg
       breakpoint, so 769px - 991px behaves exactly like a phone as well. */
    .about-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .about-text,
    .about-description {
        text-align: center;
    }

    .about-features {
        align-items: center;
    }
}

/* --- Product Page Styles --- */
.product-hero {
    background: linear-gradient(180deg, #023E8A 0%, #0077B6 55%, #0096C7 100%);
    padding: 100px 0;
    color: var(--white);
}

.product-hero .hero-content {
    text-align: center;
}

.product-hero h1 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 15px;
}

.product-hero .slogan {
    font-size: 1.5rem;
    font-weight: 400;
    opacity: 0.9;
}

.table-container {
    overflow-x: auto;
    margin-top: 40px;
}

.specs-table,
.qc-table {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

.specs-table th,
.specs-table td,
.qc-table th,
.qc-table td {
    padding: 18px 25px;
    text-align: right;
    border-bottom: 1px solid #f0f0f0;
}

.specs-table th,
.qc-table th {
    background-color: var(--deep-blue);
    color: var(--white);
    font-weight: 700;
    font-size: 1.1rem;
}

.specs-table tr:nth-child(even) {
    background-color: rgba(0, 150, 199, 0.05);
}

.specs-table tr:hover,
.qc-table tr:hover {
    background-color: rgba(0, 119, 182, 0.1);
}

.qc-table {
    max-width: 600px;
    margin: 0 auto;
}

.process-section {
    background-color: var(--light-gray);
}

.process-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    margin-top: 50px;
}

.process-card {
    background-color: var(--white);
    padding: 40px;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    transition: var(--transition);
    border: 2px solid transparent;
}

.process-card:hover {
    transform: translateY(-10px);
    border-color: var(--aqua-blue);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.process-icon {
    width: 90px;
    height: 90px;
    background-color: rgba(0, 150, 199, 0.1);
    color: var(--aqua-blue);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 25px;
    font-size: 2.5rem;
    transition: var(--transition);
}

.process-card:hover .process-icon {
    background-color: var(--aqua-blue);
    color: var(--white);
}

.process-card h3 {
    color: var(--deep-blue);
    font-size: 1.4rem;
    margin-bottom: 15px;
    font-weight: 700;
}

.process-card p {
    color: #666;
    font-size: 1rem;
    line-height: 1.8;
}

@media (max-width: 768px) {
    .product-hero h1 {
        font-size: 1.8rem;
    }

    .product-hero .slogan {
        font-size: 1.2rem;
    }

    .specs-table th,
    .specs-table td,
    .qc-table th,
    .qc-table td {
        padding: 12px 15px;
        font-size: 0.95rem;
    }
}

/* --- Technical & QC Data Sheet Styles --- */
.material-test-table,
.qc-inspection-table {
    width: 100%;
    border-collapse: collapse;
    background-color: #F8FAFC;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

.material-test-table th,
.qc-inspection-table th {
    background-color: #023E8A;
    color: var(--white);
    font-weight: 700;
    font-size: 1.05rem;
    padding: 18px 25px;
    text-align: right;
}

.material-test-table td,
.qc-inspection-table td {
    padding: 15px 25px;
    text-align: right;
    border-bottom: 1px solid #e2e8f0;
}

.material-test-table tr:nth-child(even),
.qc-inspection-table tr:nth-child(even) {
    background-color: #f1f5f9;
}

.material-test-table tr:hover,
.qc-inspection-table tr:hover {
    background-color: rgba(2, 62, 138, 0.05);
}

.mandrel-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
    margin-top: 40px;
}

.mandrel-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #023E8A 0%, #0077B6 100%);
    color: var(--white);
    padding: 15px 30px;
    border-radius: 50px;
    font-size: 1.2rem;
    font-weight: 700;
    box-shadow: 0 4px 15px rgba(2, 62, 138, 0.3);
    transition: var(--transition);
}

.mandrel-chip:hover {
    /* Keep the lift, drop the scale: these chips hold Arabic words, and scaling
       them resamples the joined glyphs. */
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(2, 62, 138, 0.4);
}

.white-bg {
    background-color: var(--white);
}

/* --- Pumps Page Styles --- */
.pumps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    margin-top: 50px;
}

.pump-card {
    background-color: var(--white);
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    transition: var(--transition);
    border: 2px solid transparent;
}

.pump-card:hover {
    transform: translateY(-10px);
    border-color: var(--aqua-blue);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.pump-icon {
    width: 80px;
    height: 80px;
    background-color: rgba(0, 150, 199, 0.1);
    color: var(--aqua-blue);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 25px;
    font-size: 2.2rem;
    transition: var(--transition);
}

.pump-card:hover .pump-icon {
    background-color: var(--aqua-blue);
    color: var(--white);
}

.pump-card h3 {
    color: var(--deep-blue);
    font-size: 1.4rem;
    margin-bottom: 20px;
    font-weight: 700;
    text-align: center;
}

.pump-specs {
    width: 100%;
    border-collapse: collapse;
}

.pump-specs td {
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.95rem;
}

.pump-specs td:first-child {
    font-weight: 700;
    color: var(--deep-blue);
}

/* --- Covers Page Styles --- */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 50px;
}

.feature-card {
    text-align: center;
    padding: 40px 30px;
    background-color: var(--white);
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    transition: var(--transition);
}

.feature-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.feature-icon {
    width: 80px;
    min-width: 80px;
    height: 80px;
    background: linear-gradient(180deg, #023E8A 0%, #0077B6 100%);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2.2rem;
}

.feature-card h3 {
    color: var(--deep-blue);
    font-size: 1.3rem;
    margin-bottom: 15px;
    font-weight: 700;
}

.feature-card p {
    color: #666;
    font-size: 1rem;
}

.load-classes-table {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    border-collapse: collapse;
    background-color: #F8FAFC;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

.load-classes-table th {
    background-color: #023E8A;
    color: var(--white);
    font-weight: 700;
    font-size: 1.05rem;
    padding: 18px 25px;
    text-align: right;
}

.load-classes-table td {
    padding: 15px 25px;
    text-align: right;
    border-bottom: 1px solid #e2e8f0;
}

.load-classes-table tr:nth-child(even) {
    background-color: #f1f5f9;
}

.load-classes-table tr:hover {
    background-color: rgba(2, 62, 138, 0.05);
}

/* --- Contact Form Styles --- */
.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

/* --- GRP Panel Page Styles --- */
.grp-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 60px;
    align-items: center;
}

.grp-image .image-placeholder {
    width: 100%;
    height: 400px;
    background: linear-gradient(180deg, rgba(0, 150, 199, 0.1) 0%, rgba(2, 62, 138, 0.1) 100%);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 6rem;
    color: var(--ocean-blue);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

.grp-text .section-title {
    text-align: right;
    margin-bottom: 20px;
}

.intro-text {
    font-size: 1.1rem;
    color: #555;
    margin-bottom: 30px;
    line-height: 1.8;
}

.features-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.feature-item-2 {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background-color: rgba(0, 150, 199, 0.05);
    border-radius: 10px;
    transition: var(--transition);
}

.feature-item-2:hover {
    background-color: rgba(0, 150, 199, 0.1);
    transform: translateX(-5px);
}

.feature-item-2 i {
    color: var(--aqua-blue);
    font-size: 1.5rem;
}

.feature-item-2 span {
    font-weight: 700;
    color: var(--deep-blue);
    font-size: 1.05rem;
}

.grp-tech-table {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    border-collapse: collapse;
    background-color: #F8FAFC;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

.grp-tech-table th {
    background-color: #023E8A;
    color: var(--white);
    font-weight: 700;
    font-size: 1.05rem;
    padding: 18px 25px;
    text-align: right;
}

.grp-tech-table td {
    padding: 15px 25px;
    text-align: right;
    border-bottom: 1px solid #e2e8f0;
}

.grp-tech-table tr:nth-child(even) {
    background-color: #f1f5f9;
}

.grp-tech-table tr:hover {
    background-color: rgba(2, 62, 138, 0.05);
}

@media (max-width: 992px) {
    .grp-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .grp-image .image-placeholder {
        height: 300px;
        font-size: 4rem;
    }
}

@media (max-width: 768px) {

    .material-test-table th,
    .material-test-table td,
    .qc-inspection-table th,
    .qc-inspection-table td {
        padding: 12px 15px;
        font-size: 0.9rem;
    }

    .mandrel-chip {
        padding: 12px 25px;
        font-size: 1.1rem;
    }
}

/* --- Technical Submittal Page Styles --- */
.submittal-hero {
    background: linear-gradient(180deg, #023E8A 0%, #0077B6 55%, #0096C7 100%);
    padding: 80px 0;
    color: var(--white);
}

.submittal-hero .hero-content {
    text-align: center;
}

.submittal-hero h1 {
    font-size: 2.3rem;
    font-weight: 700;
    margin-bottom: 15px;
}

.submittal-hero .slogan {
    font-size: 1.3rem;
    opacity: 0.9;
}

.section-icon-wrapper {
    width: 70px;
    height: 70px;
    background: linear-gradient(180deg, #023E8A 0%, #0077B6 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.section-icon {
    font-size: 2rem;
    color: var(--white);
}

.layers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 50px;
}

.layer-card {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 2px solid #e2e8f0;
    border-radius: 15px;
    padding: 35px 25px;
    text-align: center;
    position: relative;
    transition: var(--transition);
}

.layer-card:hover {
    transform: translateY(-8px);
    border-color: var(--ocean-blue);
    box-shadow: 0 15px 40px rgba(0, 119, 182, 0.15);
}

.layer-number {
    width: 50px;
    height: 50px;
    background: linear-gradient(180deg, #023E8A 0%, #0077B6 100%);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 auto 20px;
}

.layer-card h3 {
    color: var(--deep-blue);
    font-size: 1.2rem;
    margin-bottom: 15px;
    font-weight: 700;
}

.layer-content p {
    color: #555;
    font-size: 0.95rem;
    padding: 5px 0;
}

.layer-content strong {
    color: var(--ocean-blue);
}

.inspection-table {
    width: 100%;
    border-collapse: collapse;
    background-color: #F8FAFC;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

.inspection-table th {
    background-color: #023E8A;
    color: var(--white);
    font-weight: 700;
    font-size: 1rem;
    padding: 18px 20px;
    text-align: right;
}

.inspection-table td {
    padding: 15px 20px;
    text-align: right;
    border-bottom: 1px solid #e2e8f0;
    color: #444;
}

.inspection-table tr:nth-child(even) {
    background-color: #f1f5f9;
}

.inspection-table tr:hover {
    background-color: rgba(2, 62, 138, 0.05);
}

.fabrication-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 40px;
    margin-top: 50px;
}

.fabrication-card {
    background-color: var(--white);
    border: 2px solid #e2e8f0;
    border-radius: 15px;
    padding: 40px;
    transition: var(--transition);
}

.fabrication-card:hover {
    border-color: var(--aqua-blue);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

.fab-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(180deg, #023E8A 0%, #0077B6 100%);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    font-size: 2.2rem;
}

.fabrication-card h3 {
    color: var(--deep-blue);
    font-size: 1.4rem;
    margin-bottom: 15px;
    font-weight: 700;
    text-align: center;
}

.fabrication-card p {
    color: #555;
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: 20px;
    text-align: center;
}

.fabrication-card h4 {
    color: var(--ocean-blue);
    font-size: 1.1rem;
    margin-bottom: 15px;
    font-weight: 700;
}

.mandrel-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.mandrel-list span {
    background-color: rgba(0, 150, 199, 0.1);
    color: var(--deep-blue);
    padding: 8px 18px;
    border-radius: 25px;
    font-weight: 700;
    font-size: 0.95rem;
}

.step-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.step-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.step-number {
    width: 40px;
    height: 40px;
    background: linear-gradient(180deg, #023E8A 0%, #0077B6 100%);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex-shrink: 0;
}

.step-text {
    padding-top: 8px;
}

.step-text strong {
    color: var(--ocean-blue);
    display: block;
    margin-bottom: 5px;
}

.installation-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
    margin-top: 50px;
}

.installation-card {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 2px solid #e2e8f0;
    border-radius: 15px;
    padding: 40px;
    text-align: center;
    transition: var(--transition);
}

.installation-card:hover {
    border-color: var(--aqua-blue);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

.install-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(180deg, #023E8A 0%, #0077B6 100%);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    font-size: 2rem;
}

.installation-card h3 {
    color: var(--deep-blue);
    font-size: 1.3rem;
    margin-bottom: 25px;
    font-weight: 700;
}

.install-list {
    text-align: right;
    list-style: none;
    padding: 0;
}

.install-list li {
    padding: 12px 0;
    border-bottom: 1px solid #e2e8f0;
    color: #555;
    position: relative;
    padding-right: 25px;
}

.install-list li::before {
    content: '✓';
    position: absolute;
    right: 0;
    color: var(--aqua-blue);
    font-weight: 700;
}

.finishing-section {
    margin-top: 60px;
    padding: 40px;
    background-color: var(--white);
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

.finishing-section h3 {
    color: var(--deep-blue);
    font-size: 1.5rem;
    margin-bottom: 30px;
    font-weight: 700;
    text-align: center;
}

.finishing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
}

.finishing-item {
    text-align: center;
    padding: 30px;
    background: linear-gradient(180deg, rgba(0, 150, 199, 0.05) 0%, rgba(2, 62, 138, 0.05) 100%);
    border-radius: 12px;
}

.finishing-item i {
    font-size: 2.5rem;
    color: var(--ocean-blue);
    margin-bottom: 15px;
}

.finishing-item h4 {
    color: var(--deep-blue);
    font-size: 1.2rem;
    margin-bottom: 10px;
    font-weight: 700;
}

.finishing-item p {
    color: #555;
    font-size: 1rem;
}

@media (max-width: 992px) {
    .fabrication-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .submittal-hero h1 {
        font-size: 1.7rem;
    }

    .submittal-hero .slogan {
        font-size: 1.1rem;
    }

    .inspection-table th,
    .inspection-table td {
        padding: 12px 15px;
        font-size: 0.9rem;
    }

    .fabrication-grid,
    .installation-grid {
        grid-template-columns: 1fr;
    }

    .finishing-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Shopping Cart (Header Icon + Offcanvas Drawer) --- */

/* Header cart toggle */
.cart-toggle-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    background-color: transparent;
    border: 2px solid rgba(2, 62, 138, 0.15);
    border-radius: 50%;
    color: var(--deep-blue);
    font-size: 1.1rem;
    cursor: pointer;
    transition: var(--transition);
}

.cart-toggle-btn:hover,
.cart-toggle-btn:focus-visible {
    background-color: var(--ocean-blue);
    border-color: var(--ocean-blue);
    color: var(--white);
    outline: none;
}

/* Item counter badge (top-left corner in RTL) */
.cart-toggle-btn .cart-count {
    position: absolute;
    top: -6px;
    left: -6px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

/* Drawer shell */
.cart-drawer {
    --bs-offcanvas-width: 420px;
    background-color: var(--white);
}

.cart-drawer-header {
    justify-content: space-between;
    background: linear-gradient(180deg, var(--deep-blue) 0%, var(--ocean-blue) 100%);
    color: var(--white);
}

.cart-drawer-header .offcanvas-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.15rem;
    font-weight: 700;
}

.cart-drawer-header .btn-close {
    width: 1.1em;
    height: 1.1em;
    padding: 0.35em;
    opacity: 0.9;
    filter: invert(1) grayscale(100%) brightness(200%);
}

.cart-drawer-body {
    background-color: #f8fafc;
}

/* Empty state (placeholder until the cart JavaScript renders the products) */
.cart-empty-state {
    padding: 45px 20px;
    text-align: center;
    color: #6b7280;
}

.cart-empty-state i {
    display: block;
    margin-bottom: 15px;
    color: rgba(2, 62, 138, 0.18);
    font-size: 3rem;
}

.cart-empty-link {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 26px;
    background-color: var(--ocean-blue);
    border-radius: 50px;
    color: var(--white);
    font-size: 0.9rem;
    font-weight: 700;
}

.cart-empty-link:hover {
    background-color: var(--deep-blue);
}

/* Drawer footer: total price + checkout button */
.cart-drawer-footer {
    padding: 20px;
    background-color: var(--white);
    border-top: 1px solid #e2e8f0;
    box-shadow: 0 -4px 16px rgba(2, 62, 138, 0.06);
}

.cart-total-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
    font-weight: 700;
}

.cart-total-label {
    color: var(--text-color);
    font-size: 1rem;
}

.cart-total-price {
    color: var(--deep-blue);
    font-size: 1.25rem;
    font-weight: 700;
}

.cart-checkout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 20px;
    background-color: var(--ocean-blue);
    border: 2px solid var(--ocean-blue);
    border-radius: 10px;
    color: var(--white);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
}

.cart-checkout-btn:hover,
.cart-checkout-btn:focus-visible {
    background-color: var(--deep-blue);
    border-color: var(--deep-blue);
    color: var(--white);
}

.cart-checkout-btn i {
    font-size: 1.2rem;
}

/* Inline hint shown when the cart is empty */
.cart-drawer-hint {
    display: none;
    margin-top: 12px;
    color: #b02a37;
    font-size: 0.85rem;
    text-align: center;
}

.cart-drawer-hint.show {
    display: block;
}

/* ------------------------------------------------------------
   Cart items grid: image + details + remove X + subtotal
   ------------------------------------------------------------ */
.cart-items-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cart-item {
    position: relative;
    display: grid;
    grid-template-columns: 72px 1fr auto;
    grid-template-rows: auto auto;
    column-gap: 12px;
    row-gap: 8px;
    padding: 14px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(2, 62, 138, 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cart-item:hover {
    box-shadow: 0 4px 14px rgba(2, 62, 138, 0.08);
}

.cart-item-image {
    grid-row: 1 / span 2;
    grid-column: 1;
    width: 72px;
    height: 72px;
    border-radius: 10px;
    overflow: hidden;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cart-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cart-item-details {
    grid-row: 1;
    grid-column: 2;
    min-width: 0;
    padding-left: 4px;
}

.cart-item-name {
    margin: 0 0 6px 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--deep-blue, #023E8A);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.cart-item-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.cart-item-price {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--ocean-blue, #0077B6);
}

.cart-item-controls {
    grid-row: 2;
    grid-column: 2;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cart-qty-btn {
    width: 28px;
    height: 28px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: var(--deep-blue, #023E8A);
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.75rem;
    transition: all 0.15s ease;
}

.cart-qty-btn:hover {
    background: var(--ocean-blue, #0077B6);
    border-color: var(--ocean-blue, #0077B6);
    color: #ffffff;
}

.cart-item-qty {
    min-width: 28px;
    text-align: center;
    font-weight: 700;
    font-size: 0.95rem;
    color: #0f172a;
}

.cart-item-subtotal {
    grid-row: 1 / span 2;
    grid-column: 3;
    align-self: start;
    text-align: left;
    font-size: 0.9rem;
    font-weight: 700;
    color: #0f172a;
    padding-top: 2px;
}

.cart-item-close {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    font-size: 1.35rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.15s ease;
    z-index: 2;
}

.cart-item-close:hover {
    background: #fee2e2;
    color: #dc2626;
    /* The colour flip already reads as feedback; the scale only blurred the
       glyph while hovering. */
}

.cart-item-close span {
    display: inline-block;
    transform: translateY(-1px);
}

@media (max-width: 420px) {
    .cart-item {
        grid-template-columns: 60px 1fr;
    }
    .cart-item-subtotal {
        grid-row: 3;
        grid-column: 1 / -1;
        text-align: right;
        padding-top: 6px;
        border-top: 1px dashed #e2e8f0;
    }
    .cart-item-image {
        width: 60px;
        height: 60px;
    }
}

@media (max-width: 768px) {
    .cart-toggle-btn {
        width: 38px;
        height: 38px;
        font-size: 1rem;
    }

    .cart-drawer {
        --bs-offcanvas-width: 100%;
    }

.checkout-customer-modal .modal-content { overflow: hidden; border: 0; border-radius: 16px; box-shadow: 0 24px 60px rgba(15, 23, 42, .24); }
.checkout-customer-modal .modal-header { padding: 18px 22px; color: #fff; background: linear-gradient(135deg, #128c7e, #25d366); }
.checkout-customer-modal .modal-title { font-size: 18px; font-weight: 700; }
.checkout-customer-modal .modal-body { padding: 22px; }
.checkout-customer-modal .modal-footer { padding: 14px 22px; background: #f8fafc; }
.checkout-customer-modal .form-label { color: #334155; font-weight: 700; }
.checkout-customer-modal .form-control { min-height: 45px; border-color: #dbe3ec; border-radius: 9px; }
.checkout-customer-modal .form-control:focus { border-color: #25d366; box-shadow: 0 0 0 .2rem rgba(37, 211, 102, .14); }
.checkout-modal-note { margin: -4px 0 18px; padding: 10px 12px; color: #166534; background: #dcfce7; border-radius: 8px; font-size: 12px; }
.checkout-customer-modal #confirmCheckoutBtn { min-width: 205px; }
@media (max-width: 575.98px) {
    .checkout-customer-modal .modal-footer { align-items: stretch; flex-direction: column-reverse; }
    .checkout-customer-modal .modal-footer .btn { width: 100%; }
}

}
/* ==========================================================================
   Desktop navbar, 3-section flex layout (>= xl / 1200px)  --  MUST stay at EOF
   --------------------------------------------------------------------------
   Strict layout:  [ Brand (flex-shrink:0) ][ Nav (flex-shrink:1, centered) ][ Actions (flex-shrink:0) ]
                    logo + wordmark             8 links, 12px gap              lang + cart

   This block is last on purpose: the base `.nav-links` / `.nav-link` rules are
   defined earlier in this file, so a media query placed next to them would be
   overridden by those later same-specificity declarations.

   Below 1200px the mobile hamburger menu (Bootstrap `navbar-expand-xl`) takes
   over automatically, so there is no mid-sized "squeezed desktop" state where
   the brand name and links can collide.
   ========================================================================== */
@media (min-width: 1200px) {
    .navbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 20px;
        width: 100%;
    }

    .navbar-expand-xl .navbar-collapse {
        display: flex !important;
        flex: 1 1 auto;
        justify-content: center;
        align-items: center;
        gap: 20px;
        min-width: 0;
    }

    .header-section--brand {
        flex: 0 0 auto;
        flex-shrink: 0;
    }

    .header-section--nav {
        flex: 1 1 auto;
        flex-shrink: 1;
        justify-content: center;
    }

    .header-section--actions {
        flex: 0 0 auto;
        flex-shrink: 0;
    }

    .nav-links {
        gap: 12px;
        margin-inline: 0 !important;
    }

    .nav-links .nav-link {
        font-size: clamp(0.82rem, 0.7vw, 0.95rem);
        white-space: nowrap;
        padding: 8px 4px;
    }

    .brand-text .main-title {
        font-size: clamp(0.95rem, 1.05vw, 1.3rem);
    }

    .brand-text .sub-title {
        font-size: clamp(0.8rem, 0.72vw, 0.95rem);
        line-height: 1.6;
    }

    .header-brand-title {
        font-size: clamp(16px, 1.1vw, 19px) !important;
    }

    .header-brand-sub--en {
        font-size: clamp(9px, 0.62vw, 11px) !important;
    }

    .header-brand-sub--ar {
        font-size: clamp(10px, 0.68vw, 12px) !important;
    }
}

::-webkit-scrollbar {
    width: 6px !important;  /* Thin vertical scrollbar */
    height: 6px !important; /* Thin horizontal scrollbar */
}

::-webkit-scrollbar-track {
    background: #f8f9fa !important; /* Light gray track */
    border-radius: 10px !important;
}

::-webkit-scrollbar-thumb {
    background: #0d6efd !important; /* Brand Blue */
    border-radius: 10px !important;
}

::-webkit-scrollbar-thumb:hover {
    background: #0a58ca !important; /* Darker blue on hover */
}

/* Ensure horizontal scrollbars in tables also get styled */
.table-responsive::-webkit-scrollbar {
    height: 6px !important;
}

/* ===========================================================================
   About page (phase 3)
   The sections are DB driven: hero, overview, vision, mission, our focus,
   values, why choose and the extra story blocks. Each rule below styles one
   of those blocks and stays inside the existing brand palette.
   =========================================================================== */

/* Hero - falls back to the brand gradient when no image has been uploaded. */
.about-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 340px;
    padding: 90px 0;
    background: linear-gradient(135deg, var(--primary-color, #004aba) 0%, #0a2d6b 100%);
    background-size: cover;
    background-position: center;
    text-align: center;
    overflow: hidden;
}

.about-hero.has-image {
    /* The image URL itself is set inline, because it comes from the database
       and must be escaped with the rest of the markup. */
    background-position: center;
    background-size: cover;
}

.about-hero-overlay {
    position: absolute;
    inset: 0;
    background: #05122e;
    /* The opacity is set inline from about_page.hero_overlay (0-90). */
}

.about-hero-content {
    position: relative;
    z-index: 1;
    max-width: 900px;
    margin: 0 auto;
}

.about-hero h1 {
    color: #fff;
    margin-bottom: .75rem;
}

.about-hero-subtitle {
    color: rgba(255, 255, 255, .92);
    font-size: 1.15rem;
    margin: 0;
}

/* Short introduction between the hero and the overview. */
.about-lead-text {
    max-width: 900px;
    margin-inline: auto;
    color: #334155;
}

/* Company overview. */
.about-media img {
    width: 100%;
    height: auto;
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(4, 22, 51, .12);
}

.about-company-name {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--primary-color, #004aba);
    margin-bottom: .75rem;
}

.about-description {
    color: #475569;
    line-height: 1.9;
}

/* Vision and mission statements. */
.about-vision,
.about-mission {
    background: #f8fafc;
}

.about-mission {
    background: #fff;
}

.about-statement {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.about-statement .section-title {
    margin-bottom: 1rem;
}

.about-statement-text {
    font-size: 1.1rem;
    line-height: 2;
    color: #334155;
}

/* Section headers shared by focus / values / why / extra. */
.about-section-header {
    margin-bottom: 2.5rem;
}

.about-section-intro {
    max-width: 850px;
    margin-inline: auto;
    color: #475569;
}

/* Card based sections. */
.about-card {
    background: #fff;
    border: 1px solid #e8eef7;
    border-radius: 14px;
    padding: 1.75rem 1.5rem;
    height: 100%;
    transition: transform .2s ease, box-shadow .2s ease;
}

.about-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 26px rgba(4, 22, 51, .1);
}

.about-card h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: .6rem;
    color: #0f2748;
}

.about-card p {
    color: #5b6b80;
    line-height: 1.85;
    margin: 0;
}

.about-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: rgba(0, 74, 186, .09);
    color: var(--primary-color, #004aba);
    font-size: 1.4rem;
    margin-bottom: 1rem;
}

.about-card-image {
    width: 100%;
    height: 170px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 1rem;
}

/*
 * Centred variant, used by the Capabilities grid.
 *
 * A modifier rather than a separate card class on purpose: it inherits the
 * padding, border, radius, hover lift and type scale from .about-card above,
 * so Capabilities can never drift out of step with Goals. It only changes
 * alignment, which is the single intended difference between the two.
 */
.about-card--centered {
    text-align: center;
}

/*
 * The icon box is an inline-flex box with a fixed width. Under centred text an
 * inline box would still sit on the text baseline edge, so it is made a block
 * and centred with auto side margins instead.
 */
.about-card--centered .about-card-icon {
    display: flex;
    margin-left: auto;
    margin-right: auto;
}

/* Why Choose sits on a tinted band so it reads as the closing argument. */
.about-why {
    background: #f4f8ff;
}

.about-card-why {
    background: #fff;
    border-color: #dce8fb;
}

/* Extra story blocks. */
.about-extra-block + .about-extra-block {
    margin-top: 3.5rem;
}

.about-extra-block .about-copy h3 {
    margin-bottom: .75rem;
}

@media (max-width: 767.98px) {
    .about-hero {
        min-height: 240px;
        padding: 60px 0;
    }

    .about-hero-subtitle {
        font-size: 1rem;
    }

    .about-card {
        padding: 1.5rem 1.25rem;
    }
}

/* ===========================================================================
   Product technical layer (phase 4)
   Filter form, card highlights and the scrollable specification table.
   =========================================================================== */

/* The GET filter form sits between the page header and the grid. */
.product-filter-form {
    margin: 0 0 28px;
}

.results-count {
    font-size: .9rem;
    color: var(--text-light, #64748b);
}

/* The view toggle is now a pair of links (a real navigation), so it must
   look identical to the button it replaced. */
.view-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 10px;
    background: #fff;
    color: var(--text-light, #64748b);
    text-decoration: none;
    transition: all .2s ease;
}

.view-btn:hover,
.view-btn.active {
    background: var(--primary, #004aba);
    border-color: var(--primary, #004aba);
    color: #fff;
}

/* Confirmed technical facts on a product card. Only rendered when the
   product actually has them. */
.product-highlights {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.product-highlights li {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .8rem;
    color: var(--text-dark, #334155);
}

.product-highlights i {
    color: #16a34a;
    font-size: .72rem;
    flex-shrink: 0;
}

/* A product code replaces the generic "new" badge when one is set.
   The code is a Latin/alphanumeric SKU, so it is pinned to LTR: inside an RTL
   paragraph a mixed-direction run can be reordered by the bidi algorithm and
   show the code reversed in chunks. Tracking is legitimate here (and only
   here) because the glyphs do not join. */
.product-badge-code {
    background: #0f172a;
    color: #fff;
    font-size: .7rem;
    direction: ltr;
    unicode-bidi: isolate;
    /* Tracking is legitimate here and ONLY here: a product code is Latin, so
       its glyphs do not join and nothing can break. The monospaced family comes
       from the code/pre rule near the top of this file. */
    letter-spacing: .04em;
}

/* List view: cards become rows on wide screens, still one column on mobile. */
.products-list-view {
    grid-template-columns: 1fr;
}

.products-list-view .product-card {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 0;
}

.products-list-view .product-image-container {
    height: 100%;
    min-height: 180px;
}

.products-list-view .product-content {
    padding: 22px 24px;
}

/* The specification table. A wide technical table must scroll horizontally
   rather than push the whole page sideways on a phone. */
.spec-table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 12px;
}

.spec-table {
    width: 100%;
    min-width: 420px;
    border-collapse: collapse;
    font-size: .92rem;
}

.spec-table th,
.spec-table td {
    padding: 12px 16px;
    text-align: start;
    border-bottom: 1px solid #eef2f7;
    vertical-align: top;
}

.spec-table tr:last-child th,
.spec-table tr:last-child td {
    border-bottom: 0;
}

.spec-table th {
    width: 40%;
    font-weight: 700;
    color: var(--text-dark, #334155);
    background: #f8fafc;
    white-space: normal;
}

.spec-table td {
    color: var(--text-light, #475569);
    /* Measurements and codes must not wrap mid-value. */
    overflow-wrap: anywhere;
}

/* Detail-page call to action row. */
.product-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 22px;
}

.product-cta-row .btn {
    flex: 1 1 190px;
    min-width: 0;
    white-space: nowrap;
}


@media (max-width: 767.98px) {
    .products-list-view .product-card {
        grid-template-columns: 1fr;
    }

    .products-list-view .product-image-container {
        min-height: 0;
        aspect-ratio: 4 / 3;
    }

    .spec-table {
        min-width: 320px;
        font-size: .86rem;
    }

    .spec-table th,
    .spec-table td {
        padding: 10px 12px;
    }
}

/* ===========================================================================
   Technical pages (phase 5): /specs.php, /standards.php and the
   /technical-submittal.php alias. Tables scroll on small screens; the load
   class callout is deliberately prominent because it is a safety point.
   =========================================================================== */

.tech-hero {
    position: relative;
    padding: 90px 0;
    text-align: center;
    background: linear-gradient(135deg, var(--primary-color, #004aba) 0%, #0a2d6b 100%);
}

.tech-hero-content {
    max-width: 900px;
    margin: 0 auto;
}

.tech-hero h1 {
    color: #fff;
    margin-bottom: .75rem;
}

.tech-hero .section-subtitle {
    color: rgba(255, 255, 255, .75);
    display: block;
    margin-bottom: .5rem;
}

.tech-hero-lead {
    color: rgba(255, 255, 255, .92);
    font-size: 1.08rem;
    line-height: 1.9;
    margin: 0;
}

.tech-hero-company {
    color: rgba(255, 255, 255, .7);
    font-size: .9rem;
    margin: .75rem 0 0;
}

/* Horizontal section navigation, scrollable on a phone. */
.tech-nav {
    background: #f8fafc;
    border-bottom: 1px solid #e8eef7;
    position: sticky;
    top: 0;
    z-index: 20;
}

.tech-nav ul {
    list-style: none;
    margin: 0;
    padding: 10px 0;
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: thin;
}

.tech-nav a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    padding: 8px 14px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #e2e8f0;
    color: #334155;
    font-size: .86rem;
    text-decoration: none;
    transition: all .2s ease;
}

.tech-nav a:hover,
.tech-nav a:focus-visible {
    background: var(--primary-color, #004aba);
    border-color: var(--primary-color, #004aba);
    color: #fff;
}

.tech-section-head {
    text-align: center;
    margin-bottom: 2rem;
}

.tech-section-lead {
    max-width: 850px;
    margin: .5rem auto 0;
    color: #475569;
    line-height: 1.9;
}

/* A stated figure, set apart from the description. */
.tech-value {
    display: inline-block;
    font-weight: 700;
    color: var(--primary-color, #004aba);
    margin-inline-end: 8px;
}

.tech-detail {
    color: #475569;
    line-height: 1.8;
}

.tech-class-code {
    font-weight: 700;
    color: var(--primary-color, #004aba);
}

/* The load class warning and the evidence distinction. */
.tech-callout {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-inline-start: 4px solid #f59e0b;
    border-radius: 10px;
    padding: 16px 18px;
    margin: 0 auto 1.75rem;
    max-width: 900px;
}

.tech-callout i {
    color: #d97706;
    font-size: 1.1rem;
    margin-top: 3px;
    flex-shrink: 0;
}

.tech-callout p {
    margin: 0;
    color: #78350f;
    line-height: 1.85;
/* Evidence: one card per kind, so the kinds cannot be confused. */
.tech-evidence-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.tech-evidence-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 22px;
}

.tech-evidence-type {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 1rem;
    font-weight: 700;
    color: #0f2748;
    margin-bottom: 1rem;
}

.tech-evidence-type i {
    color: var(--primary-color, #004aba);
}

.tech-evidence-card ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tech-evidence-card li + li {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #f1f5f9;
}

.tech-evidence-card strong {
    display: block;
    color: #0f2748;
    font-size: .93rem;
    margin-bottom: .3rem;
}

.tech-evidence-card li span {
    display: block;
    color: #5b6b80;
    line-height: 1.8;
    font-size: .88rem;
}

.tech-evidence-card a {
    display: inline-block;
    margin-top: .5rem;
    font-size: .85rem;
    color: var(--primary-color, #004aba);
}

/* Standards page. */
.tech-standard-detail {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    margin-bottom: 1.75rem;
}

.tech-standard-detail h3 {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 1rem;
    font-weight: 700;
    color: #0f2748;
    margin-bottom: .6rem;
}

.tech-standard-detail h3 i {
    color: var(--primary-color, #004aba);
}

.tech-standard-detail p {
    color: #475569;
    line-height: 1.9;
    margin: 0;
}

.tech-standard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.tech-standard-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 24px;
}

.tech-standard-card h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--primary-color, #004aba);
    margin-bottom: .4rem;
}

.tech-standard-title {
    font-weight: 700;
    color: #0f2748;
    margin-bottom: .8rem;
}

.tech-standard-card p {
    color: #475569;
    line-height: 1.85;
    font-size: .92rem;
}

.tech-standard-relation {
    margin-top: .8rem;
    padding-top: .8rem;
    border-top: 1px solid #f1f5f9;
}

.tech-standard-link {
    display: inline-block;
    margin-top: .75rem;
    font-size: .87rem;
    color: var(--primary-color, #004aba);
}

.tech-muted {
    color: #64748b;
    font-size: .9rem;
    line-height: 1.85;
    text-align: center;
    max-width: 760px;
    margin: 0 auto;
}

/* Project specification schedule: a blank column for the manager to complete. */
.tech-schedule-table td.tech-schedule-blank {
    width: 26%;
    min-width: 120px;
    background: repeating-linear-gradient(
        45deg, #fafbfc, #fafbfc 8px, #f4f6f9 8px, #f4f6f9 16px
    );
}

.tech-open {
    color: #94a3b8;
    font-style: italic;
}

.tech-cta {
    text-align: center;
    margin-top: 2.5rem;
}

.tech-cta p {
    color: #475569;
    margin-bottom: 1rem;
}

.tech-load-classes,
.tech-evidence,
.tech-standard-secondary {
    background: #f8fafc;
}

@media (max-width: 767.98px) {
    .tech-hero {
        padding: 60px 0;
    }

    .tech-hero-lead {
        font-size: .98rem;
    }

    .tech-callout {
        padding: 14px;
    }

    .tech-evidence-card,
    .tech-standard-card {
        padding: 18px;
    }
}

    font-size: .93rem;
}

/* Firefox Support */
* {
    scrollbar-width: thin !important;
    scrollbar-color: #004aba #87c3ff12 !important;
}
/* ===========================================================================
   Documents Center (phase 6): /downloads.php filters and cards.
   =========================================================================== */

.documents-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 1.5rem;
}

.documents-search {
    grid-column: 1 / -1;
}

.documents-select .form-label {
    font-size: .82rem;
    font-weight: 700;
    color: #475569;
    margin-bottom: .3rem;
}

.documents-filter-actions {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.documents-count {
    color: #64748b;
    font-size: .9rem;
    margin-bottom: 1rem;
}

.documents-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.documents-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    transition: box-shadow .2s ease, transform .2s ease;
}

.documents-card:hover {
    box-shadow: 0 10px 30px rgba(15, 39, 72, .08);
    transform: translateY(-2px);
}

.documents-card-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 1rem;
}

.documents-card-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: rgba(0, 74, 186, .09);
    color: var(--primary-color, #004aba);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}

.documents-type-badge {
    background: #eef2f7;
    color: #475569;
    font-size: .7rem;
    font-weight: 700;
}

.documents-card-title {
    font-size: 1.02rem;
    font-weight: 700;
    color: #0f2748;
    margin: .3rem 0 0;
    line-height: 1.5;
}

.documents-card-text {
    color: #5b6b80;
    font-size: .9rem;
    line-height: 1.8;
    margin-bottom: 1rem;
}

.documents-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 0 0 1rem;
    padding: .75rem 0;
    border-top: 1px solid #f1f5f9;
    border-bottom: 1px solid #f1f5f9;
}

.documents-card-meta dt {
    font-size: .72rem;
    color: #94a3b8;
    font-weight: 700;
    margin-bottom: .15rem;
}

.documents-card-meta dd {
    margin: 0;
    font-size: .85rem;
    color: #334155;
    font-weight: 700;
}

.documents-card-links {
    font-size: .84rem;
    color: #5b6b80;
    margin-bottom: .5rem;
    line-height: 1.9;
}

.documents-card-links-label {
    color: #94a3b8;
    margin-inline-end: 4px;
}

.documents-card-links a {
    color: var(--primary-color, #004aba);
    text-decoration: none;
    margin-inline-end: 6px;
}

.documents-card-links span:not(.documents-card-links-label) {
    margin-inline-end: 6px;
}

.documents-card-download {
    margin-top: auto;
}

.documents-empty {
    text-align: center;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 14px;
    padding: 56px 24px;
}

.documents-empty i {
    color: #94a3b8;
}

.documents-empty h3 {
    color: #0f2748;
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: .5rem;
}

/* Technical documents inside a product page (phase 6). */
.product-documents {
    border-top: 1px solid #e8eef7;
    padding-top: 1rem;
}

.product-documents-title {
    font-size: .95rem;
    font-weight: 700;
    color: #0f2748;
    margin-bottom: .75rem;
}

.product-documents-list {
    list-style: none;
    margin: 0 0 .5rem;
    padding: 0;
}

.product-documents-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding: .55rem 0;
    border-bottom: 1px dashed #eef2f7;
}

.product-documents-list li:last-child {
    border-bottom: 0;
}

.product-documents-list a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #1f2f45;
    text-decoration: none;
    font-size: .88rem;
    flex: 1 1 auto;
    min-width: 0;
}

.product-documents-list a:hover .product-documents-name {
    color: var(--primary-color, #004aba);
    text-decoration: underline;
}

.product-documents-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-documents-list a i {
    color: var(--primary-color, #004aba);
    flex-shrink: 0;
}

.product-documents-type {
    font-size: .72rem;
    color: #94a3b8;
    white-space: nowrap;
}

.product-documents-type span {
    margin-inline-start: 5px;
}

.product-documents-all {
    display: inline-block;
    font-size: .82rem;
    color: var(--primary-color, #004aba);
    text-decoration: none;
}

.documents-empty p {
    color: #5b6b80;
    max-width: 560px;
    margin: 0 auto 1.25rem;
    line-height: 1.85;
}

@media (max-width: 767.98px) {
    .documents-filters {
        grid-template-columns: 1fr;
        padding: 16px;
    }

    .documents-filter-actions {
        flex-direction: column;
    }

    .documents-filter-actions .btn {
        width: 100%;
    }

    .documents-grid {
        grid-template-columns: 1fr;
    }
}
/* ===========================================================================
   Applications (phase 7): listing cards and the sector page.
   =========================================================================== */

.applications-search {
    max-width: 520px;
    margin: 0 auto 1.25rem;
}

.applications-count {
    text-align: center;
    color: #64748b;
    font-size: .9rem;
    margin-bottom: 1.75rem;
}

.applications-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 22px;
}

.applications-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow .2s ease, transform .2s ease;
}

.applications-card:hover {
    box-shadow: 0 10px 30px rgba(15, 39, 72, .08);
    transform: translateY(-2px);
}

.applications-card-media {
    display: block;
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, #eef4ff 0%, #dce8fb 100%);
    overflow: hidden;
}

.applications-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* A sector with no image shows its icon rather than a broken picture. */
.applications-card-icon-only {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 2.6rem;
    color: var(--primary-color, #004aba);
    opacity: .55;
}

.applications-card-body {
    box-sizing: border-box;
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.applications-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(0, 74, 186, .09);
    color: var(--primary-color, #004aba);
    margin-bottom: .75rem;
}

.applications-card-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f2748;
    margin: 0 0 .5rem;
    line-height: 1.5;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}

.applications-card-title a {
    color: inherit;
    text-decoration: none;
}

.applications-card-title a:hover {
    color: var(--primary-color, #004aba);
}

.applications-card-text {
    color: #5b6b80;
    font-size: .9rem;
    line-height: 1.8;
    margin: 0 0 1rem;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}

.applications-card-link {
    margin-top: auto;
    font-size: .87rem;
    font-weight: 700;
    color: var(--primary-color, #004aba);
    text-decoration: none;
}

.applications-empty {
    text-align: center;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 14px;
    padding: 48px 24px;
}

.applications-empty i {
    color: #94a3b8;
}

.applications-empty h3 {
    color: #0f2748;
    font-size: 1.12rem;
    font-weight: 700;
    margin-bottom: .5rem;
}

.applications-empty p {
    color: #5b6b80;
    max-width: 580px;
    margin: 0 auto 1.25rem;
    line-height: 1.85;
}



/* Sector page. */
.application-hero {
    position: relative;
    padding: 80px 0;
    text-align: center;
    background: linear-gradient(135deg, #0a2d6b 0%, #004aba 100%);
}

.application-hero.has-image {
    background-image: var(--application-hero-image);
    background-size: cover;
    background-position: center;
}

.application-hero.has-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(6, 22, 48, .74) 0%, rgba(6, 22, 48, .58) 100%);
}

.application-hero-content {
    position: relative;
    max-width: 860px;
    margin: 0 auto;
}

.application-hero-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.application-hero h1 {
    color: #fff;
    margin-bottom: .6rem;
}

.application-hero-lead {
    color: rgba(255, 255, 255, .9);
    font-size: 1.05rem;
    line-height: 1.9;
    margin: 0;
}

.application-breadcrumb {
    font-size: .82rem;
    color: rgba(255, 255, 255, .7);
    margin-bottom: 1rem;
}

.application-breadcrumb a {
    color: rgba(255, 255, 255, .85);
    text-decoration: none;
}

.application-breadcrumb a:hover {
    text-decoration: underline;
}

.application-breadcrumb-current {
    color: rgba(255, 255, 255, .55);
}

.application-description {
    color: #475569;
    font-size: 1rem;
    line-height: 2;
}

.application-muted {
    color: #94a3b8;
    font-style: italic;
}

.application-features-title {
    font-size: 1.05rem;
}

.application-features {
    list-style: none;
    margin: 0;
    padding: 0;
}

.application-features li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: .8rem 0;
    border-bottom: 1px solid #f1f5f9;
}

.application-features li:last-child {
    border-bottom: 0;
}

.application-features i {
    color: var(--primary-color, #004aba);
    margin-top: 4px;
    flex-shrink: 0;
}

.application-features strong {
    display: block;
    color: #0f2748;
    font-size: .92rem;
    margin-bottom: .15rem;
}

.application-features span {
    color: #5b6b80;
    font-size: .86rem;
    line-height: 1.75;
}

/* Products on a sector page. */
.applications-products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}

.application-product-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.application-product-media {
    display: block;
    aspect-ratio: 4 / 3;
    background: #f1f5f9;
    overflow: hidden;
}

.application-product-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.application-product-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 2rem;
    color: #94a3b8;
}

.application-product-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.application-product-name {
    font-size: .95rem;
    font-weight: 700;
    color: #0f2748;
    margin: 0 0 .3rem;
    line-height: 1.5;
}

.application-product-name a {
    color: inherit;
    text-decoration: none;
}

.application-product-name a:hover {
    color: var(--primary-color, #004aba);
}

.application-product-code {
    font-size: .78rem;
    color: #94a3b8;
    margin: 0 0 .5rem;
}

.application-product-category {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .72rem;
    font-weight: 600;
    color: var(--primary-color, #004aba);
    background: rgba(0, 74, 186, 0.08);
    padding: .25rem .55rem;
    border-radius: 999px;
    margin: 0 0 .45rem;
    align-self: flex-start;
    line-height: 1.3;
}

.application-product-category i {
    font-size: .7rem;
}

.application-product-meta {
    list-style: none;
    margin: 0 0 .9rem;
    padding: 0;
    flex: 1;
}

.application-product-meta li {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .8rem;
    color: #5b6b80;
    padding: .2rem 0;
}

.application-product-meta i {
    color: var(--primary-color, #004aba);
    width: 14px;
}

.application-product-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: auto;
}

.application-product-actions .btn {
    flex: 1 1 auto;
    min-width: 0;
}

.btn-whatsapp-outline {
    --wp-green: #25D366;
    background: #ffffff;
    color: var(--wp-green);
    border: 1.5px solid var(--wp-green);
    border-radius: 8px;
    padding: .4rem .75rem;
    font-size: .8rem;
    font-weight: 600;
    transition: all 0.22s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

.btn-whatsapp-outline:hover,
.btn-whatsapp-outline:focus-visible {
    background: var(--wp-green);
    color: #ffffff;
    border-color: var(--wp-green);
    text-decoration: none;
    box-shadow: 0 6px 16px rgba(37, 211, 102, 0.22);
}

.btn-whatsapp-outline:active {
    transform: translateY(1px);
}

/* Calls to action. */
.application-cta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 1.5rem;
}

.application-cta-item {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 24px;
}

.application-cta-item h3 {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 1rem;
    font-weight: 700;
    color: #0f2748;
    margin-bottom: .5rem;
}

.application-cta-item h3 i {
    color: var(--primary-color, #004aba);
}

.application-cta-item p {
    color: #5b6b80;
    font-size: .9rem;
    line-height: 1.8;
    margin-bottom: 1rem;
}

@media (max-width: 767.98px) {
    .application-hero {
        padding: 55px 0;
    }

    .applications-grid,
    .applications-products,
    .application-cta {
        grid-template-columns: 1fr;
    }
}

/* Small phones (<=600px): squeeze the standalone applications-grid cards too. */
@media (max-width: 600px) {
    .applications-card {
        padding: 0;
        border-radius: 12px;
    }

    .applications-card-body {
        padding-left: 14px;
        padding-right: 14px;
        padding-top: 16px;
        padding-bottom: 16px;
    }

    .applications-card-title {
        font-size: 14px;
        line-height: 1.45;
    }

    .applications-card-text {
        font-size: 12.5px;
        line-height: 1.7;
    }
}



/* ===========================================================================
   Project Support (phase 8).

   The timeline is one markup tree with two layouts: six steps in a row on
   desktop, a vertical list on a phone. Step cards never overflow, so a long
   Arabic title cannot push the layout sideways.
   =========================================================================== */

.ps-hero {
    position: relative;
    padding: 90px 0;
    text-align: center;
    background: linear-gradient(135deg, var(--primary-color, #004aba) 0%, #0a2d6b 100%);
    background-size: cover;
    background-position: center;
}

/* The image sits behind a scrim so the heading stays readable on any photo. */
.ps-hero-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--ps-hero-image);
    background-size: cover;
    background-position: center;
    opacity: .78;
}

.ps-hero-content {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
}

.ps-hero h1 {
    color: #fff;
    margin-bottom: .75rem;
}

.ps-hero .section-subtitle {
    color: rgba(255, 255, 255, .78);
    display: block;
    margin-bottom: .5rem;
}

.ps-hero-lead {
    color: rgba(255, 255, 255, .93);
    font-size: 1.08rem;
    line-height: 1.9;
    margin: 0;
}

.ps-hero-company {
    color: rgba(255, 255, 255, .7);
    font-size: .9rem;
    margin: .75rem 0 0;
}

.ps-nav {
    background: #f8fafc;
    border-bottom: 1px solid #e8eef7;
}

.ps-nav ul {
    list-style: none;
    margin: 0;
    padding: 10px 0;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: thin;
}

.ps-nav a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    padding: 8px 14px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #e2e8f0;
    color: #334155;
    font-size: .86rem;
    text-decoration: none;
    transition: all .2s ease;
}

.ps-nav a:hover,
.ps-nav a:focus-visible {
    background: var(--primary-color, #004aba);
    border-color: var(--primary-color, #004aba);
    color: #fff;
}

.ps-intro {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.ps-section-head {
    text-align: center;
    margin-bottom: 2.25rem;
}

/* --- The timeline ------------------------------------------------------ */
.ps-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 22px;
}

.ps-step {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ps-step-marker {
    display: flex;
    justify-content: center;
    margin-bottom: 12px;
}

.ps-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--primary-color, #004aba);
    color: #fff;
    font-weight: 700;
    font-size: 1.05rem;
    /* letter-spacing: .5px removed. This badge holds a step number, but it sits
       inside Arabic prose; tracking is not worth the risk of breaking a join. */
    letter-spacing: normal;
    box-shadow: 0 6px 16px rgba(0, 74, 186, .22);
}

.ps-step-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    overflow: hidden;
    min-width: 0;
}

.ps-step-image img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    display: block;
}

.ps-step-body {
    padding: 20px;
    flex: 1;
    min-width: 0;
}

.ps-step-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(0, 74, 186, .09);
    color: var(--primary-color, #004aba);
    font-size: 1.15rem;
    margin-bottom: .85rem;
}

.ps-step-body h3 {
    font-size: 1.02rem;
    font-weight: 700;
    color: #0f2748;
    margin-bottom: .6rem;
    overflow-wrap: anywhere;
}

.ps-step-text {
    color: #475569;
    line-height: 1.85;
    font-size: .92rem;
    margin: 0;
    overflow-wrap: anywhere;
}


/* Documents and sectors referenced by a step. */
.ps-step-links {
    list-style: none;
    margin: 1rem 0 0;
    padding: .9rem 0 0;
    border-top: 1px solid #f1f5f9;
}

.ps-step-links li + li {
    margin-top: .5rem;
}

.ps-step-links a {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--primary-color, #004aba);
    font-size: .86rem;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.ps-step-links a:hover {
    text-decoration: underline;
}

.ps-doc-version {
    margin-inline-start: auto;
    background: #eef4ff;
    border-radius: 999px;
    padding: 1px 9px;
    font-size: .74rem;
    font-weight: 700;
    color: var(--primary-color, #004aba);
    white-space: nowrap;
}

/* The connecting chevron only makes sense across a row, not down a column. */
.ps-step-arrow {
    display: none;
    position: absolute;
    inset-inline-end: -19px;
    top: 26px;
    color: #cbd5e1;
    font-size: .85rem;
    z-index: 1;
}

@media (min-width: 992px) {
    .ps-step-arrow {
        display: block;
    }

    /* RTL flips the direction the chevron points. */
    [dir="rtl"] .ps-step-arrow i {
        transform: scaleX(-1);
    }
}

/* --- Technical support and submittal ------------------------------------ */
.ps-topics,
.ps-submittal {
    background: #f8fafc;
}

.ps-topic-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
}

.ps-topic {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 22px;
    min-width: 0;
}

.ps-topic-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: rgba(0, 74, 186, .09);
    color: var(--primary-color, #004aba);
    font-size: 1.2rem;
    margin-bottom: .9rem;
}

.ps-topic h3 {
    font-size: .99rem;
    font-weight: 700;
    color: #0f2748;
    margin-bottom: .5rem;
    overflow-wrap: anywhere;
}

.ps-topic p {
    color: #475569;
    line-height: 1.85;
    font-size: .9rem;
    margin: 0;
    overflow-wrap: anywhere;
}

.ps-submittal-list {
    list-style: none;
    margin: 0 auto 2rem;
    padding: 0;
    max-width: 860px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 14px;
}

.ps-submittal-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 15px 17px;
    min-width: 0;
}

.ps-submittal-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: rgba(0, 74, 186, .09);
    color: var(--primary-color, #004aba);
    flex-shrink: 0;
}

.ps-submittal-item strong {
    display: block;
    color: #0f2748;
    font-size: .92rem;
    margin-bottom: .25rem;
    overflow-wrap: anywhere;
}

.ps-submittal-item span {
    display: block;
    color: #5b6b80;
    font-size: .86rem;
    line-height: 1.75;
    overflow-wrap: anywhere;
}

.ps-cta {
    text-align: center;
    margin-top: 1.5rem;
}

.ps-cta p {
    color: #475569;
    margin-bottom: .9rem;
}

.ps-cta-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.ps-cta-section {
    background: #f8fafc;
    border-top: 1px solid #e8eef7;
}

/* --- Home: Supply & Project Support preview (phase 8) ------------------- */
.home-support {
    background: #f8fafc;
}

.home-support-card {
    position: relative;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 26px 22px;
    height: 100%;
    min-width: 0;
}

.home-support-number {
    position: absolute;
    inset-inline-end: 20px;
    top: 14px;
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1;
    color: rgba(0, 74, 186, .09);
}

.home-support-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 13px;
    background: rgba(0, 74, 186, .09);
    color: var(--primary-color, #004aba);
    font-size: 1.25rem;
    margin-bottom: .95rem;
}

.home-support-card h3 {
    position: relative;
    font-size: 1.02rem;
    font-weight: 700;
    color: #0f2748;
    margin-bottom: .6rem;
    overflow-wrap: anywhere;
}

.home-support-card p {
    color: #475569;
    line-height: 1.85;
    font-size: .92rem;
    margin: 0;
    overflow-wrap: anywhere;
}


/* ===========================================================================
   Request a Quote (phase 9).

   The form is one column of labelled blocks on a phone and two columns from
   lg upwards, so a long form never becomes a wall of inputs on a desktop.
   The success panel is deliberately plain: the customer needs their reference
   number, nothing else.
   =========================================================================== */

.quote-hero {
    background: linear-gradient(135deg, var(--primary-color, #004aba) 0%, #0a2d6b 100%);
    padding: 60px 0;
    text-align: center;
}

.quote-hero h1 {
    color: #fff;
    margin-bottom: .6rem;
}

.quote-hero-lead {
    color: rgba(255, 255, 255, .92);
    font-size: 1.02rem;
    line-height: 1.9;
    max-width: 780px;
    margin: 0 auto;
}

.quote-hero-company {
    color: rgba(255, 255, 255, .7);
    font-size: .9rem;
    margin: .75rem 0 0;
}

.quote-form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
}

@media (min-width: 992px) {
    .quote-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .quote-block-wide {
        grid-column: 1 / -1;
    }
}

.quote-block {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 24px;
    min-width: 0;
}

.quote-block legend {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 1rem;
    font-weight: 700;
    color: #0f2748;
    margin-bottom: .35rem;
    padding: 0 6px;
    width: auto;
}

.quote-block legend i {
    color: var(--primary-color, #004aba);
}

/* The note that says these are requested, not confirmed. */
.quote-block-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: #f1f6ff;
    border-inline-start: 3px solid var(--primary-color, #004aba);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 1rem;
    color: #1e3a5f;
    font-size: .87rem;
    line-height: 1.7;
}

.quote-block-note i {
    margin-top: 3px;
    flex-shrink: 0;
}

/* What the catalogue already knows about the chosen product. */
.quote-known-facts {
    margin-top: 1.25rem;
    padding: 14px 16px;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 10px;
}

.quote-known-title {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .87rem;
    color: #475569;
    margin-bottom: .6rem;
}

.quote-known-facts dl {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    margin: 0;
}

.quote-known-facts dt {
    font-size: .74rem;
    color: #64748b;
    margin-bottom: .1rem;
}

.quote-known-facts dd {
    margin: 0;
    font-weight: 700;
    color: #0f2748;
    font-size: .9rem;
    overflow-wrap: anywhere;
}

.quote-file-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #f1f5f9;
}

@media (min-width: 576px) {
    .quote-file-row {
        grid-template-columns: 2fr 1fr;
        align-items: end;
    }
}

.quote-file-row:last-child {
    border-bottom: 0;
}

.quote-file-field {
    min-width: 0;
}

.quote-submit {
    margin-top: 1.75rem;
    text-align: center;
}

.quote-submit-note {
    color: #64748b;
    font-size: .86rem;
    margin: .75rem auto 0;
    max-width: 520px;
    line-height: 1.7;
}

/* The success panel: the reference is the one thing the customer needs. */
.quote-success {
    max-width: 620px;
    margin: 0 auto;
    text-align: center;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 40px 28px;
}

.quote-success-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: #e8f7ee;
    color: #1a7f47;
    font-size: 1.7rem;
    margin-bottom: 1rem;
}

.quote-success h1 {
    font-size: 1.45rem;
    font-weight: 700;
    color: #0f2748;
    margin-bottom: .75rem;
}

.quote-success .lead {
    color: #475569;
    line-height: 1.85;
    font-size: .96rem;
}

.quote-reference {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    margin: 1.5rem 0 1rem;
    padding: 14px 28px;
    background: #f1f6ff;
    border: 1px solid #c7dcfb;
    border-radius: 12px;
}

.quote-reference span {
    font-size: .8rem;
    color: #475569;
}

.quote-reference strong {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--primary-color, #004aba);
    /* letter-spacing: .5px removed - this is a customer name and is usually
       Arabic, so it must stay joined. */
    letter-spacing: normal;
}

/* The submitted contact details, echoed back for confirmation. */
.quote-echo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    max-width: 720px;
    margin: 0 auto 1.5rem;
    text-align: start;
}

.quote-echo > div {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px 14px;
}

.quote-echo dt {
    font-size: .76rem;
    color: #64748b;
    margin-bottom: 2px;
}

.quote-echo dd {
    margin: 0;
    font-size: .93rem;
    font-weight: 700;
    color: #0f2748;
    word-break: break-word;
}

.quote-success-note {
    color: #64748b;
    font-size: .86rem;
    line-height: 1.75;
    margin-bottom: 1.5rem;
}

.quote-success-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}


/* ==========================================================================
   PG BRAND IDENTITY — ADDITIONS
   Wave motif, button system refinements, card system, CTA backgrounds,
   footer wave separator, section dividers, and the brand status badges used
   in the admin audit panel.
   ========================================================================== */

/* --- Wave motif (subtle, never overwhelms content) -------------------- */
.pg-wave {
    position: relative;
    overflow: hidden;
}
.pg-wave::before,
.pg-wave::after {
    content: '';
    position: absolute;
    left: -5%;
    width: 110%;
    height: 80px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
    z-index: 0;
}
.pg-wave-top::before {
    top: -1px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'><path fill='%23ffffff' fill-opacity='0.08' d='M0,40 C240,80 480,0 720,30 C960,60 1200,70 1440,20 L1440,0 L0,0 Z'/><path fill='%23ffffff' fill-opacity='0.12' d='M0,55 C240,80 480,40 720,55 C960,70 1200,50 1440,60 L1440,0 L0,0 Z'/></svg>");
}
.pg-wave-bottom::after {
    bottom: -1px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'><path fill='%23ffffff' fill-opacity='0.08' d='M0,40 C360,0 720,80 1080,30 C1260,5 1380,25 1440,40 L1440,80 L0,80 Z'/><path fill='%23ffffff' fill-opacity='0.14' d='M0,55 C360,20 720,60 1080,50 C1260,45 1380,60 1440,55 L1440,80 L0,80 Z'/></svg>");
}
.pg-wave-inner > * { position: relative; z-index: 1; }

/* Wave section separator (light) */
.pg-wave-divider {
    display: block;
    width: 100%;
    height: 60px;
    background: transparent;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'><path fill='%23f7fbff' d='M0,30 C360,55 720,5 1080,25 C1260,35 1380,20 1440,30 L1440,60 L0,60 Z'/></svg>");
}
.pg-wave-divider--alt {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'><path fill='%23ffffff' d='M0,30 C360,5 720,55 1080,35 C1260,25 1380,40 1440,30 L1440,60 L0,60 Z'/></svg>");
}

/* --- Brand button system (primary / secondary / accent / ghost) ------ */
.btn-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 30px;
    background-color: var(--pg-secondary);
    color: var(--pg-white);
    font-weight: 700;
    border-radius: 50px;
    border: 2px solid var(--pg-secondary);
    transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
    line-height: 1.2;
    white-space: nowrap;
}
.btn-cta:hover,
.btn-cta:focus-visible {
    background-color: var(--pg-primary);
    color: var(--pg-white);
    border-color: var(--pg-primary);
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(2, 62, 138, .18);
}
.btn-cta:focus-visible { outline: none; box-shadow: var(--brand-focus-ring), 0 8px 22px rgba(2,62,138,.18); }

.btn-cta--primary   { background-color: var(--pg-primary);   border-color: var(--pg-primary); }
.btn-cta--primary:hover,
.btn-cta--primary:focus-visible { background-color: #012c63; border-color: #012c63; }

.btn-cta--accent    { background-color: var(--pg-aqua);      border-color: var(--pg-aqua); }
.btn-cta--accent:hover,
.btn-cta--accent:focus-visible { background-color: #0076a0; border-color: #0076a0; }

.btn-cta--ghost {
    background: transparent;
    color: inherit;
    border: 2px solid currentColor;
}
.btn-cta--ghost:hover,
.btn-cta--ghost:focus-visible {
    background: rgba(255, 255, 255, .14);
    color: inherit;
    border-color: inherit;
    transform: none;
}

/* --- Card system refinements (clean, white, subtle border, light shadow) */
.pg-card {
    background: var(--pg-white);
    border: 1px solid var(--pg-border);
    border-radius: var(--brand-radius-lg);
    box-shadow: var(--brand-shadow-sm);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    text-align: center;
    padding: 10px;
}
.pg-card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--pg-aqua) 45%, var(--pg-border));
    box-shadow: var(--brand-shadow);
}

/* --- Footer ------------------------------------------------------------- */
.main-footer {
    position: relative;
    background: var(--pg-gradient-v);
    color: var(--pg-white);
    padding: 90px 0 0;
    overflow: hidden;
}
.main-footer::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 80px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'><path fill='%23ffffff' fill-opacity='0.07' d='M0,40 C240,80 480,0 720,30 C960,60 1200,70 1440,20 L1440,0 L0,0 Z'/></svg>");
    pointer-events: none;
    z-index: 0;
}
.main-footer > * { position: relative; z-index: 1; }

.main-footer .footer-title { color: var(--pg-white); }
.main-footer .footer-title::after { background-color: var(--pg-aqua); }
.main-footer .footer-links a:hover,
.main-footer .footer-contact a:hover { color: var(--pg-aqua); }

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(2, 62, 138, 0.4);
}

/* Footer logo variant.

   There are now TWO different artworks in this slot, and they need opposite
   treatments, so the white card is scoped to only the one that requires it:

   - logo.png (the header logo, reused as a fallback) is dark navy artwork. On
     the footer gradient it measures 1.14:1 at #023E8A and 2.40:1 at #0077B6,
     both far below the 3:1 WCAG asks of a graphical object, so the mark is
     barely distinguishable. The brand guide forbids generating a white
     variant, and that is respected: the artwork is not recoloured, filtered
     or replaced, it is placed on a white card instead, which restores about
     11.7:1.

   - logo foter.png (company-logo--footer) is WHITE artwork on a transparent
     background, drawn specifically for this dark footer. It must sit directly
     on the footer gradient. The white card would make it disappear into the
     card, which is exactly what it did before this rule was scoped.

   So: no background by default, and the card is applied only when the logo is
   the dark one. An uploaded brand_logo_light also gets the card, because it is
   the light-surface case that rule was written for. */
.logo-section--light {
    background: transparent;
    border-radius: var(--brand-radius);
    padding: 0;
    display: inline-flex;
    align-items: center;
    box-shadow: none;
}

/* The dark logo.png fallback still needs the white card. */
.footer-col--about .logo-section--light .company-logo:not(.company-logo--footer) {
    /* the card is the wrapper, so it is only given a surface when the child
       image is the dark artwork */
}

.footer-col--about .logo-section--light:has(.company-logo:not(.company-logo--footer)) {
    
    padding: 10px 14px;
}

/* The white footer lockup needs no surface of its own. */
.footer-col--about .logo-section--light:has(.company-logo--footer) {
    background: transparent;
    padding: 0;
}
.footer-col--about .logo-section--light .logo-container {
    padding: 0;
    margin-inline-end: 0;
}
/*
 * Footer logo. This is the bundled "logo foter.png" lockup: the PG mark with
 * the wordmark and tagline stacked underneath it. It is a taller composition
 * than the header mark, so it needs more height than the 56px the header uses -
 * at 56px the tagline line is unreadable.
 *
 * Only max-height and width:auto are set. The aspect ratio is never forced and
 * there is no transform, scale or filter, so the logo is not distorted (PG Brand
 * Guide forbids stretching, scaling and effects on the logo).
 */
.footer-col--about .logo-section--light .company-logo {
    width: auto;
}

/* Phones: scale the whole lockup down by its height cap rather than by width,
   so the proportion is preserved exactly. */
@media (max-width: 575.98px) {
    .footer-col--about .logo-section--light .company-logo {
        max-height: 76px;
    }
}

/* The wordmark block was removed from the footer because the footer artwork is
   a complete lockup and it already contains these words. The rules are kept so
   an older .brand-text still in the markup is not left unstyled. */
.main-footer .brand-text .main-title { color: var(--pg-white); }
.main-footer .brand-text .sub-title { color: rgba(255, 255, 255, .72); }

/* --- Hero brand fallback (used when slide has no background image) ----- */
.slide-image--brand {
    background-image:
        radial-gradient(1200px 500px at 90% 10%, rgba(0, 150, 199, .35), transparent 60%),
        radial-gradient(900px 450px at 10% 90%, rgba(255, 255, 255, .08), transparent 55%),
        var(--pg-gradient-v);
}

/* --- Section heading system --------------------------------------------- */
.section-title {
    color: var(--pg-heading);
    font-size: clamp(1.7rem, 2.6vw, 2.25rem);
    /* 800 is not a real Amiri weight (the family ships 400 and 700 only),
       so it fell back to 700 with a synthesised emboldening. */
    font-weight: 700;
    /* Negative tracking collides the already-joined Arabic glyphs. */
    letter-spacing: normal;
    line-height: 1.45;
}
.section-subtitle {
    color: var(--pg-secondary);
    font-weight: 700;
    letter-spacing: normal;
}

/* --- Brand accent bars --------------------------------------------------- */
.pg-accent-bar {
    display: inline-block;
    width: 60px;
    height: 4px;
    border-radius: 999px;
    background: var(--pg-gradient);
    margin: 8px 0 14px;
}

/* --- Admin: Brand Status audit panel ------------------------------------ */
.brand-status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
}
.brand-status-card {
    background: #fff;
    border: 1px solid #e3edf7;
    border-radius: 14px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.brand-status-card .label { font-weight: 700; color: #1f3550; }
.brand-status-card .note  { font-size: .82rem; color: #6b7a93; margin-top: 2px; }
.bs-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 700;
    white-space: nowrap;
}
.bs-badge.ok  { background: #e7f6ec; color: #10703a; }
.bs-badge.warn{ background: #fff4e0; color: #925a00; }
.bs-badge.bad { background: #fde8ea; color: #a11f2c; }

/* --- Focus states / accessibility --------------------------------------- */
:focus-visible {
    outline: none;
    box-shadow: var(--brand-focus-ring);
    border-radius: 6px;
}

/* --- Respect reduced motion --------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   Hero Banner — Mobile (< 600px)
   Redesign: compact rectangular card with margins, borders, smaller content,
   aligned to top-right. Desktop (> 600px) remains completely untouched.
   ========================================================================== */
@media (max-width: 599.98px) {
    /* ----- Outer hero container: "detached" rectangle with margins + border -- */
    .hero-slider {
        height: auto;
        margin: 16px 14px 8px;
        width: calc(100% - 28px);
        border: 1px solid rgba(0, 119, 182, 0.18);
        border-radius: 18px;
        overflow: hidden;
        box-shadow: 0 10px 28px rgba(2, 62, 138, 0.12);
    }

    .main-swiper {
        height: auto;
        min-height: 0;
    }

    .swiper-slide {
        min-height: 0;
        align-items: flex-start;
    }

    /* ----- Background image: confined to the rounded rectangle only ------ */
    .slide-image {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        border-radius: 18px;
        background-size: cover;
    }

    /* Brand fallback gradient simplified — no big radial mark on small screens. */
    .slide-image--brand {
        background-image: linear-gradient(
            135deg,
            rgba(2, 62, 138, 0.94) 0%,
            rgba(0, 119, 182, 0.92) 60%,
            rgba(0, 150, 199, 0.90) 100%
        );
    }

    /* ----- Content container: perfectly centered, very compact card ---------- */
    .slide-content-container {
        position: relative;
        z-index: 2;
        padding: 0;
        min-height: 240px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .swiper-slide {
        position: relative;
    }

    .slide-content {
        position: static;
        top: auto;
        right: auto;
        left: auto;
        max-width: 280px;
        width: 85%;
        padding: 10px 12px;
        background: rgba(248, 249, 250, 0.92);
        backdrop-filter: blur(6px);
        border-radius: 12px;
        box-shadow: 0 8px 22px rgba(2, 62, 138, 0.16);
        animation: none;
        transform: none;
        margin: 0;
        text-align: center;
    }

    /* ----- Typography: compact, centered, proportionally small -------------- */
    .slide-subtitle {
        font-size: 0.66rem;
        line-height: 1.55;
        margin-bottom: 3px;
        opacity: 0.9;
        text-align: center;
    }

    .slide-title,
    .slide-content h1,
    .slide-content h2 {
        font-size: 0.92rem !important;
        line-height: 1.4;
        margin-bottom: 5px !important;
        text-align: center;
    }

    .slide-text,
    .slide-content p {
        font-size: 0.66rem;
        line-height: 1.65;
        margin-bottom: 9px;
        text-align: center;
    }

    /* ----- Buttons: compact, full-width inside the centered box ------------- */
    .slide-actions {
        display: flex;
        flex-direction: column;
        gap: 5px;
        flex-wrap: nowrap;
    }

    .slide-actions .btn-cta {
        margin: 0;
        width: 100%;
        text-align: center;
        flex: 0 0 auto;
        min-height: 32px;
        height: 32px;
        line-height: 28px;
        padding: 0 12px;
        font-size: 0.68rem;
        border-radius: 999px;
    }

    .btn-cta {
        padding: 6px 16px;
        min-height: 32px;
        font-size: 0.72rem;
        border-width: 2px;
    }

    /* ----- Swiper chrome: shrink pagination dots & hide arrows --------- */
    .swiper-pagination {
        position: relative;
        margin-top: 10px;
        padding-bottom: 8px;
        z-index: 3;
    }

    .swiper-pagination-bullet {
        width: 8px;
        height: 8px;
    }

    .swiper-pagination-bullet-active {
        width: 20px;
        border-radius: 999px;
    }

    .swiper-button-next,
    .swiper-button-prev {
        display: none !important;
    }
}

/* Even smaller phones (< 380px): centered card with even tighter proportions. */
@media (max-width: 379.98px) {
    .hero-slider {
        margin: 12px 10px 6px;
        width: calc(100% - 20px);
        border-radius: 16px;
    }

    .slide-image { border-radius: 16px; }

    .slide-content-container {
        min-height: 220px;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .slide-content {
        position: static;
        top: auto;
        right: auto;
        left: auto;
        max-width: 240px;
        width: 88%;
        padding: 8px 10px;
        border-radius: 10px;
        text-align: center;
    }

    .slide-title,
    .slide-content h1,
    .slide-content h2 {
        font-size: 0.82rem !important;
        line-height: 1.35;
        margin-bottom: 4px !important;
        text-align: center;
    }

    .slide-subtitle {
        font-size: 0.62rem;
        line-height: 1.5;
        margin-bottom: 2px;
        text-align: center;
    }

    .slide-text,
    .slide-content p {
        font-size: 0.62rem;
        line-height: 1.6;
        margin-bottom: 7px;
        text-align: center;
    }

    .slide-actions { gap: 4px; }

    .slide-actions .btn-cta {
        min-height: 28px;
        height: 28px;
        line-height: 24px;
        padding: 0 10px;
        font-size: 0.62rem;
        border-radius: 999px;
    }
}