/*
Theme Name: Afaq Smart Tracking
Theme URI: https://afaqy.com/
Description: Official Child Theme for Afaq Smart Tracking - آفاق التتبع الذكي
Author: Afaq Smart Tracking
Author URI: https://afaqy.com/
Template: oceanwp
Version: 1.0.0
Text Domain: afaq-smart-tracking
*/

/* Global typography and base setup */
body, button, input, select, textarea {
    font-family: 'Tajawal', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* ==================================================
   AFAQ HERO SYSTEM (all pages)
   One hero for every page. Structure comes from afaq_hero_elements() in inc/afaq-hero.php
   (also saved as the Elementor library template "Afaq — Hero (Master)").
   All visual rules live here; hero widgets carry content + these classes only.

   .afaq-hero                 section (petrol + pattern background)
     .afaq-hero-text          boxed container: badge, H1, description, actions
       .afaq-hero-badge       heading widget (div)
       .afaq-hero-title       heading widget (h1); wrap a phrase in <span class="afaq-hero-accent">
       .afaq-hero-desc        text editor widget
       .afaq-hero-actions     container with .afaq-hero-cta-primary / .afaq-hero-cta-secondary buttons
     .afaq-hero-visual        optional band (petrol -> light split) holding .afaq-hero-media
       .afaq-hero-media       image widget; hero visuals are authored on a 1320 x 810 canvas
   ================================================== */
:root {
    --afaq-hero-text-width: 1000px;
    --afaq-hero-media-width: 1300px;
    --afaq-hero-pad-top: 96px;
    --afaq-hero-pad-bottom: 52px;
    --afaq-hero-pad-x: 24px;
    --afaq-hero-gap: 22px;
}

.e-con.afaq-hero {
    --padding-top: 0px;
    --padding-right: 0px;
    --padding-bottom: 0px;
    --padding-left: 0px;
    --row-gap: 0px;
    --column-gap: 0px;
    --align-items: stretch;
    overflow: hidden;
    background-color: #01273B;
    background-image: url('assets/images/hero/afaq-hero-pattern.svg');
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
}

.afaq-hero .e-con.afaq-hero-text {
    --content-width: var(--afaq-hero-text-width);
    --padding-top: var(--afaq-hero-pad-top);
    --padding-bottom: var(--afaq-hero-pad-bottom);
    --padding-right: var(--afaq-hero-pad-x);
    --padding-left: var(--afaq-hero-pad-x);
    --align-items: center;
    --row-gap: var(--afaq-hero-gap);
    --column-gap: var(--afaq-hero-gap);
    text-align: center;
}

/* Hero without a visual band: balance the bottom spacing */
.afaq-hero .e-con.afaq-hero-text:last-child {
    --padding-bottom: var(--afaq-hero-pad-top);
}

/* Badge */
.afaq-hero .afaq-hero-badge {
    width: auto;
    max-width: 100%;
    padding: 7px 18px;
    background: rgba(13, 192, 194, 0.10);
    border: 1px solid rgba(13, 192, 194, 0.35);
    border-radius: 999px;
}

.afaq-hero .afaq-hero-badge .elementor-heading-title {
    color: #0DC0C2;
    font-family: 'Tajawal', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}

.afaq-hero .afaq-hero-badge .elementor-heading-title::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #0DC0C2;
    margin-inline-end: 8px;
    vertical-align: middle;
}

/* H1 */
.afaq-hero .afaq-hero-title .elementor-heading-title {
    margin: 0;
    color: #FFFFFF;
    font-family: 'Tajawal', sans-serif;
    font-size: 56px;
    font-weight: 800;
    line-height: 1.25;
    text-align: center;
}

.afaq-hero .afaq-hero-title .afaq-hero-accent {
    color: #0DC0C2;
}

/* Description */
.afaq-hero .afaq-hero-desc {
    width: 720px;
    max-width: 100%;
    color: rgba(255, 255, 255, 0.80);
    font-family: 'Tajawal', sans-serif;
    font-size: 19px;
    font-weight: 400;
    line-height: 1.8;
    text-align: center;
}

.afaq-hero .afaq-hero-desc p {
    margin: 0;
}

/* Actions */
.afaq-hero .e-con.afaq-hero-actions {
    --flex-direction: row;
    --justify-content: center;
    --align-items: center;
    --flex-wrap: wrap;
    --row-gap: 14px;
    --column-gap: 14px;
    --padding-top: 0px;
    --padding-right: 0px;
    --padding-bottom: 0px;
    --padding-left: 0px;
    --width: auto;
    margin-top: 12px;
}

/* Hero buttons use the shared button component (AFAQ COMPONENTS > Buttons). */

/* Visual band + media */
.e-con.afaq-hero-visual {
    --padding-top: 0px;
    --padding-right: var(--afaq-hero-pad-x);
    --padding-bottom: 72px;
    --padding-left: var(--afaq-hero-pad-x);
    --align-items: center;
    background: linear-gradient(180deg, rgba(1, 39, 59, 0) 50%, #F5F7F8 50%);
}

.afaq-hero .afaq-hero-media {
    width: 100%;
    text-align: center;
}

/* Reserve the 1320 x 810 box before the SVG loads (URL images carry no width/height): no layout shift */
.afaq-hero .afaq-hero-media img {
    width: 100%;
    max-width: var(--afaq-hero-media-width);
    height: auto;
    aspect-ratio: 1320 / 810;
}

/* Hero photograph: framed, cropped with object-fit (no float/animated swap - photos stay still) */
.afaq-hero .afaq-hero-media--photo img {
    object-fit: cover;
    border-radius: 20px;
    box-shadow: 0 32px 64px -32px rgba(1, 39, 59, 0.55);
}

/* Decorative GPS-route overlay on the hero photo (.afaq-hero-media--route): the SVG uses the photo's own
   aspect ratio + cover/center, exactly like the image's object-fit, so the route stays on the road at any crop.
   A light petrol tint and vignette tie the warm night photo to the brand palette. */
.afaq-hero .afaq-hero-media--route {
    position: relative;
}

.afaq-hero .afaq-hero-media--route::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    pointer-events: none;
    background:
        url('assets/images/hero/afaq-hero-route-overlay.svg') center / cover no-repeat,
        radial-gradient(ellipse at center, rgba(1, 39, 59, 0) 55%, rgba(1, 39, 59, 0.45) 100%),
        linear-gradient(rgba(1, 39, 59, 0.16), rgba(1, 39, 59, 0.16));
}

/* Per-photo hero overlays (same treatment, overlay traced on that photo) */
.afaq-hero .afaq-hero-media--route-overpass::after {
    background:
        url('assets/images/home/afaq-route-overlay-overpass.svg') center / cover no-repeat,
        radial-gradient(ellipse at center, rgba(1, 39, 59, 0) 55%, rgba(1, 39, 59, 0.40) 100%),
        linear-gradient(rgba(1, 39, 59, 0.14), rgba(1, 39, 59, 0.14));
}

/* Split hero (homepage): desktop text on the start side (right in Arabic), wide visual on the end side */
@media (min-width: 1025px) {
    /* Three classes: Elementor's .e-con.e-flex (loaded later) would otherwise reset the direction to column */
    .afaq-hero.e-con.afaq-hero--split {
        --flex-direction: row;
        --align-items: center;
        --column-gap: 56px;
        --padding-top: 72px;
        --padding-bottom: 80px;
        --padding-right: max(24px, calc((100% - 1240px) / 2));
        --padding-left: max(24px, calc((100% - 1240px) / 2));
    }

    .afaq-hero--split .e-con.afaq-hero-text {
        --width: 44%;
        --content-width: 100%;
        --padding-top: 0px;
        --padding-bottom: 0px;
        --padding-right: 0px;
        --padding-left: 0px;
        --align-items: flex-start;
        flex: 0 0 44%;
        text-align: start;
    }

    .afaq-hero--split .afaq-hero-title .elementor-heading-title,
    .afaq-hero--split .afaq-hero-desc {
        text-align: start;
    }

    .afaq-hero--split .afaq-hero-title .elementor-heading-title {
        font-size: 50px;
    }

    .afaq-hero--split .e-con.afaq-hero-actions {
        --justify-content: flex-start;
    }

    .afaq-hero--split .e-con.afaq-hero-visual {
        --width: auto;
        --padding-top: 0px;
        --padding-right: 0px;
        --padding-bottom: 0px;
        --padding-left: 0px;
        flex: 1 1 0;
        min-width: 0;
        background: none;
    }

    .afaq-hero--split .afaq-hero-media img {
        aspect-ratio: 3 / 2;
    }
}

@media (max-width: 1024px) {
    :root {
        --afaq-hero-pad-top: 80px;
        --afaq-hero-pad-bottom: 44px;
    }

    .afaq-hero .afaq-hero-title .elementor-heading-title {
        font-size: 44px;
    }

    .afaq-hero .afaq-hero-desc {
        font-size: 18px;
    }
}

@media (max-width: 767px) {
    :root {
        --afaq-hero-pad-top: 56px;
        --afaq-hero-pad-bottom: 36px;
        --afaq-hero-pad-x: 20px;
        --afaq-hero-gap: 18px;
    }

    .afaq-hero .afaq-hero-badge .elementor-heading-title {
        font-size: 13px;
    }

    .afaq-hero .afaq-hero-title .elementor-heading-title {
        font-size: 34px;
    }

    .afaq-hero .afaq-hero-desc {
        font-size: 16px;
    }

    .afaq-hero .e-con.afaq-hero-actions {
        --flex-direction: column;
        --align-items: stretch;
        --width: 100%;
    }

    .e-con.afaq-hero-visual {
        --padding-right: 4px;
        --padding-left: 4px;
        --padding-bottom: 40px;
    }

    /* Taller crop on phones so the photo keeps presence */
    .afaq-hero .afaq-hero-media--photo img {
        aspect-ratio: 4 / 3;
        border-radius: 14px;
    }

    .afaq-hero .afaq-hero-media--route::after {
        border-radius: 14px;
    }
}

/* ==================================================
   AFAQ COMPONENTS (all pages, both languages)
   Structure comes from inc/afaq-components.php; every visual rule lives here.
   Logical properties (inline-start/end) keep Arabic RTL and English LTR mirrored automatically.

   Section     .afaq-section (+ --light / --dark) boxed container; optional anchor id
   Head        .afaq-section-head (+ --start): .afaq-eyebrow, .afaq-section-title (h2), .afaq-section-lead
   Grid        .afaq-grid + --2 / --3 / --4 / --5
   Card        .afaq-card (+ --compact / --on-dark): .afaq-card-title (h3), .afaq-text, .afaq-card-link
   Icon        .afaq-ico + .afaq-ico-<name> on a card title (block icon) or .afaq-ico--inline
   Buttons     .afaq-btn-primary / .afaq-btn-secondary inside .afaq-actions (+ --center)
   Split       .afaq-split > .afaq-split-content + .afaq-split-media (.afaq-media + --4x3)
   Lists       .afaq-checklist (text editor <ul>)
   Steps       .afaq-steps > .afaq-step: .afaq-step-num, title, text
   Notes       .afaq-note-panel, .afaq-section-note, .afaq-flow, .afaq-tag
   FAQ         .afaq-faq (Elementor Nested Accordion)
   CTA panel   .afaq-cta-panel
   ================================================== */
:root {
    --afaq-container: 1240px;
    --afaq-gutter: 24px;
    --afaq-section-py: 96px;
    --afaq-section-gap: 48px;
    --afaq-grid-gap: 24px;
    --afaq-card-pad: 28px;
    --afaq-card-radius: 16px;
    --afaq-card-shadow: 0 1px 2px rgba(1, 39, 59, 0.04), 0 12px 32px -20px rgba(1, 39, 59, 0.20);
    --afaq-card-shadow-hover: 0 2px 4px rgba(1, 39, 59, 0.05), 0 20px 44px -22px rgba(1, 39, 59, 0.30);
    --afaq-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html {
    scroll-padding-top: 96px; /* sticky header */
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* ---------- Section ---------- */
.e-con.afaq-section {
    --content-width: var(--afaq-container);
    --padding-top: var(--afaq-section-py);
    --padding-bottom: var(--afaq-section-py);
    --padding-right: var(--afaq-gutter);
    --padding-left: var(--afaq-gutter);
    --row-gap: var(--afaq-section-gap);
    --column-gap: var(--afaq-section-gap);
    --align-items: stretch;
    background-color: #FFFFFF;
    color: #17313D;
}

.e-con.afaq-section--light {
    background-color: #F5F7F8;
}

.e-con.afaq-section--dark,
.e-con.afaq-cta-panel {
    background-color: #01273B;
    background-image: url('assets/images/hero/afaq-hero-pattern.svg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    color: #FFFFFF;
}

/* Inner layout containers carry no default Elementor padding */
.afaq-section .e-con:is(.afaq-section-head, .afaq-grid, .afaq-actions, .afaq-split, .afaq-split-content, .afaq-split-media, .afaq-steps, .afaq-stack) {
    --padding-top: 0px;
    --padding-right: 0px;
    --padding-bottom: 0px;
    --padding-left: 0px;
}

/* ---------- Section head ---------- */
.afaq-section .e-con.afaq-section-head {
    --align-items: center;
    --row-gap: 14px;
    --column-gap: 14px;
    width: 100%;
    max-width: 800px;
    margin-inline: auto;
    text-align: center;
}

.afaq-section .e-con.afaq-section-head--start {
    --align-items: flex-start;
    max-width: none;
    margin-inline: 0;
    text-align: start;
}

.afaq-eyebrow,
.afaq-tag {
    width: auto;
    max-width: 100%;
    padding: 7px 16px;
    background: rgba(13, 192, 194, 0.10);
    border: 1px solid rgba(13, 192, 194, 0.35);
    border-radius: 999px;
}

.afaq-eyebrow .elementor-heading-title {
    color: #01273B;
    font-family: 'Tajawal', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}

.afaq-eyebrow .elementor-heading-title::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #0DC0C2;
    margin-inline-end: 8px;
    vertical-align: middle;
}

.afaq-section-title .elementor-heading-title {
    margin: 0;
    color: #01273B;
    font-family: 'Tajawal', sans-serif;
    font-size: 40px;
    font-weight: 800;
    line-height: 1.3;
}

.afaq-section-head .afaq-section-title .elementor-heading-title {
    text-align: inherit;
}

.afaq-subsection-title .elementor-heading-title {
    margin: 0;
    color: #01273B;
    font-family: 'Tajawal', sans-serif;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.4;
}

.afaq-section-lead,
.afaq-text {
    font-family: 'Tajawal', sans-serif;
    color: #17313D;
    font-weight: 400;
}

.afaq-section-lead {
    font-size: 18px;
    line-height: 1.8;
}

.afaq-text {
    font-size: 16px;
    line-height: 1.8;
}

.afaq-section-lead p,
.afaq-text p {
    margin: 0 0 0.75em;
}

.afaq-section-lead p:last-child,
.afaq-text p:last-child {
    margin-bottom: 0;
}

/* Dark surfaces */
:is(.afaq-section--dark, .afaq-cta-panel) .afaq-eyebrow .elementor-heading-title,
:is(.afaq-section--dark, .afaq-cta-panel) .afaq-step-num .elementor-heading-title {
    color: #0DC0C2;
}

:is(.afaq-section--dark, .afaq-cta-panel) :is(.afaq-section-title, .afaq-card-title) .elementor-heading-title {
    color: #FFFFFF;
}

:is(.afaq-section--dark, .afaq-cta-panel) :is(.afaq-section-lead, .afaq-text, .afaq-section-note) {
    color: rgba(255, 255, 255, 0.80);
}

/* ---------- Grid ---------- */
.afaq-section .e-con.afaq-grid {
    --flex-direction: row;
    --flex-wrap: wrap;
    --justify-content: center;
    --align-items: stretch;
    --row-gap: var(--afaq-grid-gap);
    --column-gap: var(--afaq-grid-gap);
    width: 100%;
}

.afaq-grid--2 { --afaq-cols: 2; }
.afaq-grid--3 { --afaq-cols: 3; }
.afaq-grid--4 { --afaq-cols: 4; }
.afaq-grid--5 { --afaq-cols: 5; }

.afaq-section .e-con.afaq-grid > .e-con {
    flex: 0 0 auto;
    width: calc((100% - (var(--afaq-cols, 3) - 1) * var(--afaq-grid-gap)) / var(--afaq-cols, 3));
    max-width: 100%;
}

/* ---------- Card ---------- */
.afaq-section .e-con.afaq-card {
    --padding-top: var(--afaq-card-pad);
    --padding-right: var(--afaq-card-pad);
    --padding-bottom: var(--afaq-card-pad);
    --padding-left: var(--afaq-card-pad);
    --row-gap: 12px;
    --column-gap: 12px;
    --align-items: stretch;
    --justify-content: flex-start;
    position: relative;
    background-color: #FFFFFF;
    border: 1px solid #E1E7EB;
    border-radius: var(--afaq-card-radius);
    box-shadow: var(--afaq-card-shadow);
    text-align: start;
    transition: border-color 250ms var(--afaq-ease), box-shadow 250ms var(--afaq-ease), transform 250ms var(--afaq-ease);
}

.afaq-section .e-con.afaq-card:hover {
    border-color: rgba(13, 192, 194, 0.55);
    box-shadow: var(--afaq-card-shadow-hover);
    transform: translateY(-3px);
}

.afaq-section .e-con.afaq-card--compact {
    --padding-top: 20px;
    --padding-bottom: 20px;
    --padding-right: 22px;
    --padding-left: 22px;
    --row-gap: 6px;
}

.afaq-section .e-con.afaq-card--on-dark {
    background-color: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: none;
}

.afaq-section .e-con.afaq-card--on-dark:hover {
    border-color: rgba(13, 192, 194, 0.55);
    box-shadow: none;
}

.afaq-card-title .elementor-heading-title {
    margin: 0;
    color: #01273B;
    font-family: 'Tajawal', sans-serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.4;
}

.afaq-card--compact .afaq-card-title .elementor-heading-title {
    font-size: 18px;
}

/* Card link: text link with directional arrow, pinned to the card bottom */
.afaq-card > .afaq-card-link {
    margin-top: auto;
    padding-top: 8px;
}

.afaq-card-link .elementor-button.elementor-button {
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: #01273B;
    font-family: 'Tajawal', sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
}

.afaq-card-link .elementor-button.elementor-button:hover,
.afaq-card-link .elementor-button.elementor-button:focus-visible {
    background: transparent;
    color: #038B99;
}

.afaq-card-link .elementor-button-content-wrapper::after {
    content: '';
    width: 16px;
    height: 16px;
    margin-inline-start: 8px;
    background-color: #038B99;
    -webkit-mask: var(--afaq-glyph-arrow) center / contain no-repeat;
    mask: var(--afaq-glyph-arrow) center / contain no-repeat;
    transition: transform 220ms var(--afaq-ease);
}

html[dir="rtl"] .afaq-card-link .elementor-button-content-wrapper::after {
    transform: scaleX(-1);
}

.afaq-card-link .elementor-button:hover .elementor-button-content-wrapper::after {
    transform: translateX(3px);
}

html[dir="rtl"] .afaq-card-link .elementor-button:hover .elementor-button-content-wrapper::after {
    transform: scaleX(-1) translateX(3px);
}

/* ---------- Icons (one line style everywhere) ---------- */
.afaq-ico {
    position: relative;
}

.afaq-ico::before {
    content: '';
    display: block;
    width: 48px;
    height: 48px;
    margin-bottom: 18px;
    border-radius: 12px;
    background: rgba(13, 192, 194, 0.12);
}

.afaq-ico::after {
    content: '';
    position: absolute;
    top: 12px;
    inset-inline-start: 12px;
    width: 24px;
    height: 24px;
    background-color: #038B99;
    -webkit-mask: var(--afaq-ico) center / contain no-repeat;
    mask: var(--afaq-ico) center / contain no-repeat;
}

.afaq-card--on-dark .afaq-ico::before {
    background: rgba(13, 192, 194, 0.14);
}

.afaq-card--on-dark .afaq-ico::after {
    background-color: #0DC0C2;
}

/* Inline variant: icon beside the title (list rows) */
.afaq-ico--inline {
    display: flex;
    align-items: center;
    gap: 14px;
}

.afaq-ico--inline::before {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    margin: 0;
    border-radius: 10px;
}

.afaq-ico--inline::after {
    top: 50%;
    inset-inline-start: 10px;
    width: 20px;
    height: 20px;
    margin-top: -10px;
}

/* ---------- Buttons ---------- */
:is(.afaq-btn-primary, .afaq-btn-secondary, .afaq-hero-cta-primary, .afaq-hero-cta-secondary) .elementor-button.elementor-button {
    font-family: 'Tajawal', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    padding: 15px 32px;
    border-radius: 10px;
    border: 1px solid transparent;
    box-shadow: none;
    transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}

:is(.afaq-btn-primary, .afaq-hero-cta-primary) .elementor-button.elementor-button {
    background-color: #0DC0C2;
    border-color: #0DC0C2;
    color: #01273B;
}

:is(.afaq-btn-primary, .afaq-hero-cta-primary) .elementor-button.elementor-button:is(:hover, :focus-visible) {
    background-color: #01273B;
    border-color: #01273B;
    color: #FFFFFF;
}

.afaq-btn-secondary .elementor-button.elementor-button {
    background-color: #FFFFFF;
    border-color: #E1E7EB;
    color: #01273B;
}

.afaq-btn-secondary .elementor-button.elementor-button:is(:hover, :focus-visible) {
    background-color: rgba(13, 192, 194, 0.08);
    border-color: #0DC0C2;
    color: #01273B;
}

/* On dark surfaces (hero, dark sections, CTA panel) */
:is(.afaq-hero, .afaq-section--dark, .afaq-cta-panel) .afaq-btn-secondary .elementor-button.elementor-button,
.afaq-hero-cta-secondary .elementor-button.elementor-button {
    background-color: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.40);
    color: #FFFFFF;
}

:is(.afaq-hero, .afaq-section--dark, .afaq-cta-panel) :is(.afaq-btn-primary, .afaq-btn-secondary, .afaq-hero-cta-primary, .afaq-hero-cta-secondary) .elementor-button.elementor-button:is(:hover, :focus-visible) {
    background-color: #FFFFFF;
    border-color: #FFFFFF;
    color: #01273B;
}

:is(.afaq-btn-primary, .afaq-btn-secondary, .afaq-hero-cta-primary, .afaq-hero-cta-secondary, .afaq-card-link) .elementor-button:focus-visible {
    outline: 2px solid #0DC0C2;
    outline-offset: 3px;
}

.afaq-section .e-con.afaq-actions {
    --flex-direction: row;
    --flex-wrap: wrap;
    --justify-content: flex-start;
    --align-items: center;
    --row-gap: 14px;
    --column-gap: 14px;
    --width: auto;
    margin-top: 8px;
}

.afaq-section .e-con.afaq-actions--center {
    --justify-content: center;
}

/* ---------- Split (content + media) ---------- */
.afaq-section .e-con.afaq-split {
    --flex-direction: row;
    --align-items: center;
    --row-gap: 64px;
    --column-gap: 64px;
}

.afaq-section .e-con.afaq-split > .e-con {
    flex: 1 1 0;
    min-width: 0;
}

.afaq-section .e-con.afaq-split-content {
    --align-items: flex-start;
    --row-gap: 18px;
    text-align: start;
}

.afaq-section .e-con.afaq-split-media {
    flex-grow: 1.15;
}

/* Desktop: the visual lines up with the heading and stays in view while longer content scrolls */
@media (min-width: 1025px) {
    .afaq-section .e-con.afaq-split > .e-con.afaq-split-media {
        align-self: flex-start;
        position: sticky;
        top: 112px;
    }
}

/* Alternate sides across consecutive split sections (DOM order stays content, media) */
.afaq-section .e-con.afaq-split--reverse {
    --flex-direction: row-reverse;
}

/* Wide split visual: one landscape proportion for every split photo / interface */
.afaq-media--wide img {
    aspect-ratio: 16 / 10;
}

/* Decorative tracking-path overlay on a split photo (.afaq-media--route + a per-photo modifier).
   Each overlay SVG is traced on its photo at 16:10 with cover/center, so it stays on the road at any width.
   Decorative only: not real tracking data. */
.afaq-section .elementor-widget.afaq-media--route {
    position: relative;
}

.afaq-section .elementor-widget.afaq-media--route::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--afaq-card-radius);
    pointer-events: none;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.afaq-section .elementor-widget.afaq-media--route-overpass::after {
    background-image:
        url('assets/images/home/afaq-route-overlay-overpass.svg'),
        linear-gradient(rgba(1, 39, 59, 0.12), rgba(1, 39, 59, 0.12));
}

.afaq-media {
    width: 100%;
}

.afaq-media img {
    display: block;
    width: 100%;
    height: auto;
}

.afaq-media--4x3 img {
    aspect-ratio: 4 / 3;
}

/* ---------- Photography (real photos from the media library, see inc/afaq-media.php) ----------
   object-fit + fixed aspect ratios: every crop is predictable and width/height attributes prevent layout shift. */
.afaq-section .elementor-widget.afaq-media--photo img {
    display: block;
    width: 100%;
    max-width: 100%;
    object-fit: cover;
    border-radius: var(--afaq-card-radius);
    box-shadow: 0 24px 48px -28px rgba(1, 39, 59, 0.45);
}

/* Photo card: the photo is the card's main visual, edge to edge at the top; the line icon sits beside the title */
.afaq-section .e-con.afaq-card--media {
    overflow: hidden;
}

/* Doubled classes: Elementor's container rules cap widgets at max-width:100% and images at inline-block */
.afaq-section .e-con.afaq-card--media > .elementor-widget.afaq-card-media {
    max-width: none;
    width: auto;
    align-self: stretch;
    margin: calc(var(--afaq-card-pad) * -1) calc(var(--afaq-card-pad) * -1) 6px;
}

.afaq-section .afaq-card--media .elementor-widget.afaq-card-media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

/* ---------- Comparison table (.afaq-compare on a text-editor widget holding a <table>) ----------
   Accessible table (caption + th scope). On phones each row becomes a stacked card: the row header on top,
   then each cell labelled from its data-label attribute, so the page never scrolls sideways. */
.afaq-compare table {
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    background: #FFFFFF;
    border: 1px solid #E1E7EB;
    border-radius: var(--afaq-card-radius);
    box-shadow: var(--afaq-card-shadow);
    overflow: hidden;
    font-family: 'Tajawal', sans-serif;
}

.afaq-compare caption {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.afaq-compare th,
.afaq-compare td {
    box-sizing: border-box;
    padding: 16px 20px;
    border: 0;
    border-bottom: 1px solid #E1E7EB;
    text-align: start;
    vertical-align: top;
    color: #17313D;
    font-size: 15px;
    line-height: 1.7;
    text-transform: none; /* the parent theme uppercases th */
    letter-spacing: normal;
}

.afaq-compare thead th {
    background: #01273B;
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 700;
}

.afaq-compare tbody th {
    width: 24%;
    background: #F5F7F8;
    color: #01273B;
    font-weight: 700;
}

.afaq-compare tbody tr:last-child > * {
    border-bottom: 0;
}

@media (max-width: 767px) {
    .afaq-compare thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .afaq-compare table,
    .afaq-compare tbody,
    .afaq-compare tr,
    .afaq-compare th,
    .afaq-compare td {
        display: block;
        width: 100%;
    }

    .afaq-compare tbody tr {
        border-bottom: 1px solid #E1E7EB;
    }

    .afaq-compare tbody tr:last-child {
        border-bottom: 0;
    }

    .afaq-compare tbody th {
        width: 100%;
        border-bottom: 0;
    }

    .afaq-compare td {
        padding-top: 10px;
        padding-bottom: 6px;
        border-bottom: 0;
    }

    .afaq-compare td::before {
        content: attr(data-label);
        display: block;
        color: #038B99;
        font-size: 13px;
        font-weight: 700;
    }

    .afaq-compare tbody tr > td:last-child {
        padding-bottom: 16px;
    }
}

/* ---------- Checklist ---------- */
.afaq-checklist ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px;
}

.afaq-checklist li {
    position: relative;
    padding-inline-start: 38px;
    font-size: 17px;
    line-height: 1.7;
    color: #17313D;
}

.afaq-checklist li::before {
    content: '';
    position: absolute;
    top: 2px;
    inset-inline-start: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(13, 192, 194, 0.14);
}

.afaq-checklist li::after {
    content: '';
    position: absolute;
    top: 8px;
    inset-inline-start: 6px;
    width: 14px;
    height: 14px;
    background-color: #038B99;
    -webkit-mask: var(--afaq-glyph-check) center / contain no-repeat;
    mask: var(--afaq-glyph-check) center / contain no-repeat;
}

/* Opt-in checklist whose items link to pages (items without a page stay plain text). */
.afaq-checklist--links a {
    color: #038B99;
    font-weight: 700;
    text-decoration: none;
}

.afaq-checklist--links a:hover,
.afaq-checklist--links a:focus-visible {
    color: #01273B;
    text-decoration: underline;
}

/* ---------- Steps ---------- */
.afaq-section .e-con.afaq-steps {
    --flex-direction: row;
    --align-items: stretch;
    --row-gap: var(--afaq-grid-gap);
    --column-gap: var(--afaq-grid-gap);
}

.afaq-section .e-con.afaq-steps > .afaq-step {
    flex: 1 1 0;
    min-width: 0;
    --row-gap: 12px;
}

.afaq-section .elementor-element.afaq-step-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 10px;
    border-radius: 50%;
    border: 1px solid rgba(13, 192, 194, 0.55);
    background: rgba(13, 192, 194, 0.10);
}

.afaq-step-num .elementor-heading-title {
    margin: 0;
    color: #038B99;
    font-family: 'Tajawal', sans-serif;
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
}

/* Connector between steps (desktop: horizontal across the gap; mobile: vertical) */
.afaq-steps > .afaq-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: calc(var(--afaq-card-pad) + 27px);
    inset-inline-end: calc(var(--afaq-grid-gap) * -1 - 1px);
    width: calc(var(--afaq-grid-gap) + 2px);
    height: 2px;
    background: rgba(13, 192, 194, 0.55);
}

.afaq-section-note {
    font-family: 'Tajawal', sans-serif;
    font-size: 14px;
    line-height: 1.7;
    color: #17313D;
    text-align: center;
}

/* ---------- Stack (vertical group inside a section) ---------- */
.afaq-section .e-con.afaq-stack {
    --row-gap: 20px;
    --align-items: stretch;
}

.afaq-small,
.afaq-text .afaq-small {
    font-size: 14px;
    line-height: 1.7;
    color: #17313D;
}

/* ---------- Notes, flow, tags ---------- */
.afaq-note-panel {
    padding: 18px 22px;
    background: #FFFFFF;
    border: 1px solid #E1E7EB;
    border-inline-start: 4px solid #0DC0C2;
    border-radius: 14px;
    font-size: 15px;
    line-height: 1.8;
}

.afaq-flow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 4px 0;
}

.afaq-flow span {
    padding: 6px 12px;
    background: #F5F7F8;
    border: 1px solid #E1E7EB;
    border-radius: 999px;
    color: #01273B;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
}

.afaq-flow .afaq-flow-arrow {
    padding: 0;
    background: none;
    border: 0;
    color: #038B99;
}

.afaq-tag .elementor-heading-title {
    color: #01273B;
    font-family: 'Tajawal', sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}

.afaq-tag {
    padding: 4px 12px;
}

/* ---------- FAQ (Elementor Nested Accordion) ---------- */
.afaq-faq {
    width: 100%;
    max-width: 880px;
    margin-inline: auto;
}

.afaq-faq .e-n-accordion {
    display: grid;
    gap: 12px;
}

.afaq-faq.elementor-widget .e-n-accordion-item {
    background: #FFFFFF;
    border: 1px solid #E1E7EB;
    border-radius: 14px;
    overflow: hidden;
    transition: border-color 200ms ease;
}

.afaq-faq.elementor-widget .e-n-accordion-item[open] {
    border-color: rgba(13, 192, 194, 0.55);
}

.afaq-faq.elementor-widget .e-n-accordion-item-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    border: 0;
    background: transparent;
    cursor: pointer;
    list-style: none;
}

.afaq-faq .e-n-accordion-item-title::-webkit-details-marker {
    display: none;
}

.afaq-faq.elementor-widget .e-n-accordion-item-title-text {
    margin: 0;
    color: #01273B;
    font-family: 'Tajawal', sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
}

.afaq-faq .e-n-accordion-item-title::after {
    content: '';
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    background-color: #038B99;
    -webkit-mask: var(--afaq-glyph-chevron) center / contain no-repeat;
    mask: var(--afaq-glyph-chevron) center / contain no-repeat;
    transition: transform 220ms var(--afaq-ease);
}

.afaq-faq .e-n-accordion-item[open] > .e-n-accordion-item-title::after {
    transform: rotate(180deg);
}

.afaq-faq.elementor-widget .e-n-accordion-item > .e-con {
    --padding-top: 0px;
    --padding-right: 24px;
    --padding-bottom: 22px;
    --padding-left: 24px;
    border: 0;
}

.afaq-faq .afaq-text {
    font-size: 16px;
    line-height: 1.85;
}

/* ---------- CTA panel ---------- */
.afaq-section .e-con.afaq-cta-panel {
    --padding-top: 72px;
    --padding-bottom: 72px;
    --padding-right: 48px;
    --padding-left: 48px;
    --align-items: center;
    --row-gap: 18px;
    border-radius: 24px;
    overflow: hidden;
    text-align: center;
}

.afaq-cta-panel .afaq-section-title .elementor-heading-title {
    text-align: center;
}

.afaq-cta-panel .afaq-section-lead {
    max-width: 640px;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    :root {
        --afaq-section-py: 72px;
        --afaq-section-gap: 40px;
    }

    .afaq-section-title .elementor-heading-title {
        font-size: 34px;
    }

    .afaq-section-lead {
        font-size: 17px;
    }

    .afaq-grid--4,
    .afaq-grid--3 {
        --afaq-cols: 2;
    }

    .afaq-grid--5 {
        --afaq-cols: 3;
    }

    .afaq-section .e-con.afaq-split,
    .afaq-section .e-con.afaq-split--reverse {
        --flex-direction: column;
        --align-items: stretch;
        --row-gap: 40px;
    }

    /* Stacked: the visual always leads, so every split reads the same way on tablet and mobile */
    .afaq-section .e-con.afaq-split > .afaq-split-media {
        order: -1;
    }

    .afaq-section .e-con.afaq-steps {
        --flex-wrap: wrap;
    }

    .afaq-section .e-con.afaq-steps > .afaq-step {
        flex: 0 0 auto;
        width: calc((100% - var(--afaq-grid-gap)) / 2);
    }

    .afaq-steps > .afaq-step:nth-child(2n)::after {
        display: none;
    }
}

@media (max-width: 767px) {
    :root {
        --afaq-section-py: 52px;
        --afaq-section-gap: 32px;
        --afaq-gutter: 20px;
        --afaq-grid-gap: 16px;
        --afaq-card-pad: 22px;
    }

    .afaq-section-title .elementor-heading-title {
        font-size: 28px;
    }

    .afaq-subsection-title .elementor-heading-title {
        font-size: 23px;
    }

    .afaq-section-lead {
        font-size: 16px;
    }

    .afaq-card-title .elementor-heading-title {
        font-size: 20px;
    }

    .afaq-grid--2,
    .afaq-grid--3,
    .afaq-grid--4,
    .afaq-grid--5 {
        --afaq-cols: 1;
    }

    .afaq-section .e-con.afaq-actions {
        --flex-direction: column;
        --align-items: stretch;
        --width: 100%;
    }

    :is(.afaq-actions, .afaq-hero-actions) .elementor-button {
        width: 100%;
    }

    .afaq-section .e-con.afaq-steps > .afaq-step {
        width: 100%;
    }

    .afaq-steps > .afaq-step:nth-child(n)::after {
        display: block;
        top: auto;
        bottom: calc(var(--afaq-grid-gap) * -1 - 1px);
        inset-inline-start: calc(var(--afaq-card-pad) + 27px);
        inset-inline-end: auto;
        width: 2px;
        height: calc(var(--afaq-grid-gap) + 2px);
    }

    .afaq-steps > .afaq-step:last-child::after {
        display: none;
    }

    .afaq-section .e-con.afaq-cta-panel {
        --padding-top: 44px;
        --padding-bottom: 44px;
        --padding-right: 22px;
        --padding-left: 22px;
        border-radius: 20px;
    }

    .afaq-faq.elementor-widget .e-n-accordion-item-title {
        padding: 18px 18px;
    }

    .afaq-faq.elementor-widget .e-n-accordion-item > .e-con {
        --padding-right: 18px;
        --padding-left: 18px;
    }

    .afaq-faq.elementor-widget .e-n-accordion-item-title-text {
        font-size: 17px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .afaq-section .e-con.afaq-card,
    .afaq-section .e-con.afaq-card:hover {
        transform: none;
        transition: none;
    }

    .afaq-card-link .elementor-button-content-wrapper::after,
    .afaq-faq .e-n-accordion-item-title::after {
        transition: none;
    }
}

/* Icon glyphs: 24px line icons, 1.75 stroke (drawn as masks so colour follows the component) */
:root {
    --afaq-glyph-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
    --afaq-glyph-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    --afaq-glyph-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
    --afaq-glyph-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5.5M12 7.5v.5'/%3E%3C/svg%3E");
}

.afaq-ico-gps { --afaq-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5a7 7 0 0 1 14 0C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E"); }
.afaq-ico-fleet { --afaq-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.5h10.5v9.5H2.5z'/%3E%3Cpath d='M13 9.5h4l3.5 3.5v3h-7.5'/%3E%3Ccircle cx='6.5' cy='17.5' r='1.8'/%3E%3Ccircle cx='16.5' cy='17.5' r='1.8'/%3E%3C/svg%3E"); }
.afaq-ico-fuel { --afaq-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 20V5.5a2 2 0 0 1 2-2h5a2 2 0 0 1 2 2V20'/%3E%3Cpath d='M3 20h12'/%3E%3Cpath d='M7.5 8h4'/%3E%3Cpath d='M13.5 10.5h2a2 2 0 0 1 2 2v3.5a1.5 1.5 0 0 0 3 0V8.5L18 6'/%3E%3C/svg%3E"); }
.afaq-ico-route { --afaq-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='18' r='2.5'/%3E%3Ccircle cx='18' cy='5' r='2.5'/%3E%3Cpath d='M8.5 18H15a3.5 3.5 0 0 0 0-7H9a3.5 3.5 0 0 1 0-7h6.5' transform='translate(0 1)'/%3E%3C/svg%3E"); }
.afaq-ico-wrench { --afaq-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a4 4 0 0 0-5.4 5.4L3.5 17.5a2.1 2.1 0 0 0 3 3l5.8-5.8a4 4 0 0 0 5.4-5.4l-2.6 2.6-2.4-.6-.6-2.4z'/%3E%3C/svg%3E"); }
.afaq-ico-canbus { --afaq-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='6' width='12' height='12' rx='2'/%3E%3Crect x='9.5' y='9.5' width='5' height='5' rx='1'/%3E%3Cpath d='M9 2.5V6M15 2.5V6M9 18v3.5M15 18v3.5M2.5 9H6M2.5 15H6M18 9h3.5M18 15h3.5'/%3E%3C/svg%3E"); }
.afaq-ico-video { --afaq-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='6' width='13.5' height='12' rx='2'/%3E%3Cpath d='M16 10.5l5.5-3v9l-5.5-3'/%3E%3C/svg%3E"); }
.afaq-ico-asset { --afaq-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 7.5l-9-4.5-9 4.5 9 4.5z'/%3E%3Cpath d='M3 7.5v9l9 4.5 9-4.5v-9'/%3E%3Cpath d='M12 12v9'/%3E%3C/svg%3E"); }
.afaq-ico-eye { --afaq-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.afaq-ico-chart { --afaq-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 3.5v17h17'/%3E%3Cpath d='M7.5 15l4-4.5 3 3 5-6'/%3E%3C/svg%3E"); }
.afaq-ico-bell { --afaq-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 16.5v-5.5a6 6 0 0 1 12 0v5.5l1.5 2h-15z'/%3E%3Cpath d='M10 21a2.2 2.2 0 0 0 4 0'/%3E%3C/svg%3E"); }
.afaq-ico-target { --afaq-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Ccircle cx='12' cy='12' r='1.2'/%3E%3C/svg%3E"); }
.afaq-ico-logistics { --afaq-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11.5' width='8' height='8' rx='1'/%3E%3Crect x='13' y='11.5' width='8' height='8' rx='1'/%3E%3Crect x='8' y='3.5' width='8' height='8' rx='1'/%3E%3C/svg%3E"); }
.afaq-ico-delivery { --afaq-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 6.5h11v11H10z'/%3E%3Cpath d='M15.5 6.5v4.5'/%3E%3Cpath d='M2.5 9H7M3.5 12.5H7M4.5 16H7'/%3E%3C/svg%3E"); }
.afaq-ico-construction { --afaq-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21V4.5l10-1.5'/%3E%3Cpath d='M5 4.5h15'/%3E%3Cpath d='M18 4.5v6'/%3E%3Cpath d='M16 10.5h4v3.5h-4z'/%3E%3Cpath d='M2.5 21h9'/%3E%3Cpath d='M5 9l4.5-4.5M5 14l7-9.5'/%3E%3C/svg%3E"); }
.afaq-ico-briefcase { --afaq-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='13' rx='2'/%3E%3Cpath d='M9 7V5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2'/%3E%3Cpath d='M3 12.5h18'/%3E%3C/svg%3E"); }
.afaq-ico-snowflake { --afaq-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5v19M3.8 7.25l16.4 9.5M20.2 7.25l-16.4 9.5'/%3E%3Cpath d='M9.5 4.5L12 7l2.5-2.5M9.5 19.5L12 17l2.5 2.5'/%3E%3C/svg%3E"); }
.afaq-ico-layers { --afaq-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l9 5-9 5-9-5z'/%3E%3Cpath d='M3 12.5l9 5 9-5'/%3E%3Cpath d='M3 17l9 5 9-5'/%3E%3C/svg%3E"); }
.afaq-ico-consult { --afaq-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4.5h16v11.5H9.5L4 20z'/%3E%3Cpath d='M8 9h8M8 12.5h5'/%3E%3C/svg%3E"); }
.afaq-ico-sensor { --afaq-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Cpath d='M8.5 8.5a5 5 0 0 0 0 7M15.5 8.5a5 5 0 0 1 0 7M5.6 5.6a9 9 0 0 0 0 12.8M18.4 5.6a9 9 0 0 1 0 12.8'/%3E%3C/svg%3E"); }
.afaq-ico-plug { --afaq-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 2.5V7M15 2.5V7'/%3E%3Cpath d='M6 7h12v4a6 6 0 0 1-12 0z'/%3E%3Cpath d='M12 17v4.5'/%3E%3C/svg%3E"); }
.afaq-ico-report { --afaq-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='4' width='14' height='17' rx='2'/%3E%3Cpath d='M9 4V2.5h6V4'/%3E%3Cpath d='M9 10h6M9 14h6M9 18h3'/%3E%3C/svg%3E"); }
.afaq-ico-thermometer { --afaq-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 14.8V5a2 2 0 0 0-4 0v9.8a4 4 0 1 0 4 0z'/%3E%3Cpath d='M12 9v7'/%3E%3C/svg%3E"); }
.afaq-ico-erp { --afaq-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7.5' height='7.5' rx='1.5'/%3E%3Crect x='13.5' y='3' width='7.5' height='7.5' rx='1.5'/%3E%3Crect x='3' y='13.5' width='7.5' height='7.5' rx='1.5'/%3E%3Crect x='13.5' y='13.5' width='7.5' height='7.5' rx='1.5'/%3E%3C/svg%3E"); }
.afaq-ico-phone { --afaq-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3h3.5l2 5-2.5 1.5a11 11 0 0 0 6.5 6.5L16 13.5l5 2V19a2 2 0 0 1-2 2A17.5 17.5 0 0 1 3 5a2 2 0 0 1 2-2z'/%3E%3C/svg%3E"); }
.afaq-ico-support { --afaq-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14v-2a8 8 0 0 1 16 0v2'/%3E%3Crect x='2.5' y='14' width='4' height='6' rx='1.5'/%3E%3Crect x='17.5' y='14' width='4' height='6' rx='1.5'/%3E%3Cpath d='M19.5 20a3 3 0 0 1-3 2h-3'/%3E%3C/svg%3E"); }
.afaq-ico-sliders { --afaq-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h10M18 6h2M4 12h4M12 12h8M4 18h12M20 18h0'/%3E%3Ccircle cx='16' cy='6' r='2'/%3E%3Ccircle cx='10' cy='12' r='2'/%3E%3Ccircle cx='18' cy='18' r='2'/%3E%3C/svg%3E"); }
.afaq-ico-link { --afaq-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1'/%3E%3Cpath d='M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1'/%3E%3C/svg%3E"); }
.afaq-ico-database { --afaq-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='5.5' rx='8' ry='3'/%3E%3Cpath d='M4 5.5v13c0 1.7 3.6 3 8 3s8-1.3 8-3v-13'/%3E%3Cpath d='M4 12c0 1.7 3.6 3 8 3s8-1.3 8-3'/%3E%3C/svg%3E"); }

/* ==================================================
   AFAQ MOTION SYSTEM (site-wide)
   Driven by assets/js/afaq-motion.js. Opacity/transform only, so no layout shift.
   Classes (Elementor: Advanced > CSS Classes):
     afaq-reveal        fade + slight rise when scrolled into view
                        (Elementor image widgets inside #main get this automatically)
     afaq-reveal-group  on a container: staggers the reveals of its children
     afaq-float         very slow, subtle float of the image inside (hero visuals only)
     afaq-hover-zoom    on a card: its images zoom slightly on hover/focus, clipped to their frame
     afaq-svg-animate   on an image widget showing X.svg: swaps in X.animated.svg when revealed
                        (only if motion is allowed; the static X.svg is the no-JS / reduced-motion version)
     afaq-no-motion     opt out (element and its descendants)
   Hidden-until-revealed state only applies when html.afaq-motion is set by JS,
   so content stays visible without JavaScript.
   ================================================== */
:root {
    --afaq-motion-duration: 650ms;
    --afaq-motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --afaq-motion-distance: 16px;
    --afaq-hover-duration: 300ms;
    --afaq-hover-scale: 1.03;
    --afaq-float-distance: 6px;
    --afaq-float-duration: 8s;
}

.afaq-motion .afaq-reveal {
    opacity: 0;
    transform: translate3d(0, var(--afaq-motion-distance), 0);
    transition: opacity var(--afaq-motion-duration) var(--afaq-motion-ease),
                transform var(--afaq-motion-duration) var(--afaq-motion-ease);
    transition-delay: var(--afaq-reveal-delay, 0ms);
}

.afaq-motion .afaq-reveal.is-revealed {
    opacity: 1;
    transform: none;
}

/* Float: applied to the image, not the wrapper, so it never fights the reveal transform */
.afaq-float img {
    animation: afaq-float var(--afaq-float-duration) ease-in-out 1.2s infinite;
    animation-play-state: paused;
}

.afaq-float.is-inview img {
    animation-play-state: running;
}

@keyframes afaq-float {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50%      { transform: translate3d(0, calc(var(--afaq-float-distance) * -1), 0); }
}

/* Hover zoom: frame clips, image scales */
.afaq-hover-zoom .afaq-zoom-frame {
    overflow: hidden;
}

.afaq-hover-zoom img {
    transition: transform var(--afaq-hover-duration) var(--afaq-motion-ease);
}

.afaq-hover-zoom:hover img,
.afaq-hover-zoom:focus-within img {
    transform: scale(var(--afaq-hover-scale));
}

/* Never hide or move content inside the Elementor editor */
.elementor-editor-active .afaq-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .afaq-motion .afaq-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .afaq-float img {
        animation: none;
    }

    .afaq-hover-zoom img,
    .afaq-hover-zoom:hover img,
    .afaq-hover-zoom:focus-within img {
        transition: none;
        transform: none;
    }
}


/* ==================================================
   AFAQ CONTACT — inquiry form + public contact details (inc/afaq-contact.php)
   ================================================== */
:is(.afaq-contact-form, .afaq-quote-form) {
    font-family: 'Tajawal', sans-serif;
    color: #17313D;
}

.afaq-cf-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 24px;
}

.afaq-cf-field--message {
    grid-column: 1 / -1;
}

.afaq-cf-field label,
.afaq-cf-consent label {
    display: block;
    margin-bottom: 8px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
    color: #01273B;
}

.afaq-cf-req {
    color: #038B99;
}

.afaq-cf-optional {
    font-weight: 400;
    color: #5B6B74;
    font-size: 13px;
}

:is(.afaq-contact-form, .afaq-quote-form) :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select, textarea) {
    display: block;
    width: 100%;
    box-sizing: border-box;
    min-height: 50px;
    margin: 0;
    padding: 12px 16px;
    font-family: 'Tajawal', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #17313D;
    background: #FFFFFF;
    border: 1px solid #E1E7EB;
    border-radius: 10px;
    box-shadow: none;
    transition: border-color 200ms ease, box-shadow 200ms ease;
}

:is(.afaq-contact-form, .afaq-quote-form) textarea {
    min-height: 150px;
    resize: vertical;
}

:is(.afaq-contact-form, .afaq-quote-form) :is(input, select, textarea)[dir="ltr"] {
    text-align: start;
}

html[dir="rtl"] :is(.afaq-contact-form, .afaq-quote-form) :is(input, select, textarea)[dir="ltr"] {
    text-align: right;
}

:is(.afaq-contact-form, .afaq-quote-form) :is(input, select, textarea):focus {
    outline: none;
    border-color: #0DC0C2;
    box-shadow: 0 0 0 3px rgba(13, 192, 194, 0.25);
}

:is(.afaq-contact-form, .afaq-quote-form) [aria-invalid="true"] {
    border-color: #B42318;
}

.afaq-cf-hint {
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: #5B6B74;
}

.afaq-cf-error {
    margin: 6px 0 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    color: #B42318;
}

.afaq-cf-note {
    margin: 0 0 18px;
    font-size: 14px;
    color: #5B6B74;
}

.afaq-cf-consent {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 4px 12px;
    margin-top: 22px;
}

.afaq-cf-consent input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin: 3px 0 0;
    accent-color: #038B99;
}

.afaq-cf-consent input[type="checkbox"]:focus-visible {
    outline: 2px solid #0DC0C2;
    outline-offset: 2px;
}

.afaq-cf-consent label {
    margin: 0;
    font-weight: 500;
    font-size: 15px;
    color: #17313D;
}

.afaq-cf-consent label a {
    color: #038B99;
    font-weight: 700;
}

.afaq-cf-consent .afaq-cf-error {
    grid-column: 2;
}

.afaq-cf-actions {
    margin-top: 26px;
}

:is(.afaq-contact-form, .afaq-quote-form) .afaq-cf-submit {
    min-height: 52px;
    padding: 14px 34px;
    font-family: 'Tajawal', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    color: #01273B;
    background-color: #0DC0C2;
    border: 1px solid #0DC0C2;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}

:is(.afaq-contact-form, .afaq-quote-form) .afaq-cf-submit:is(:hover, :focus-visible) {
    color: #FFFFFF;
    background-color: #01273B;
    border-color: #01273B;
}

:is(.afaq-contact-form, .afaq-quote-form) .afaq-cf-submit:focus-visible {
    outline: 2px solid #0DC0C2;
    outline-offset: 3px;
}

:is(.afaq-contact-form, .afaq-quote-form) .afaq-cf-submit:disabled {
    cursor: progress;
    opacity: 0.75;
}

.afaq-cf-status {
    margin: 0 0 20px;
    padding: 14px 18px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.6;
    border: 1px solid #E1E7EB;
    border-inline-start-width: 4px;
}

.afaq-cf-status:focus {
    outline: none;
}

.afaq-cf-status--success {
    background: #ECFBF8;
    border-color: #0DC0C2;
    color: #01273B;
}

.afaq-cf-status--error {
    background: #FEF3F2;
    border-color: #B42318;
    color: #7A271A;
}

/* Honeypot: off-screen for people, still present for bots. */
.afaq-cf-hp {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Form card wrapper on the Contact page */
.afaq-section .e-con.afaq-contact-card {
    --padding-top: 36px;
    --padding-bottom: 36px;
    --padding-right: 36px;
    --padding-left: 36px;
    max-width: 900px;
    width: 100%;
    margin-inline: auto;
    background: #FFFFFF;
    border: 1px solid #E1E7EB;
    border-radius: var(--afaq-card-radius);
    box-shadow: var(--afaq-card-shadow);
}

/* Public contact details: four cards (phone, WhatsApp, email, address) from Settings > General */
.afaq-contact-cards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--afaq-grid-gap, 24px);
}

.afaq-contact-cards .afaq-cc {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: var(--afaq-card-pad, 28px);
    background: #FFFFFF;
    border: 1px solid #E1E7EB;
    border-radius: var(--afaq-card-radius, 16px);
    box-shadow: var(--afaq-card-shadow);
    text-align: start;
    transition: border-color 250ms ease, box-shadow 250ms ease;
}

.afaq-contact-cards .afaq-cc:hover {
    border-color: rgba(13, 192, 194, 0.55);
    box-shadow: var(--afaq-card-shadow-hover);
}

.afaq-cc-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 6px;
    color: #038B99;
    background: rgba(13, 192, 194, 0.12);
    border-radius: 12px;
}

.afaq-cc--wa .afaq-cc-icon {
    color: #FFFFFF;
    background: #25D366;
}

.afaq-contact-cards .afaq-cc-title {
    margin: 0;
    color: #01273B;
    font-family: 'Tajawal', sans-serif;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.4;
}

.afaq-cc-value,
a.afaq-cc-value {
    color: #01273B;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.5;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.afaq-cc-value--text {
    color: #17313D;
    font-size: 15.5px;
    font-weight: 500;
    line-height: 1.7;
}

a.afaq-cc-value:is(:hover, :focus-visible) {
    color: #038B99;
    text-decoration: underline;
}

.afaq-cc-actions {
    display: flex;
    margin-top: auto;
    padding-top: 6px;
}

a.afaq-cc-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 18px;
    color: #01273B;
    background: #FFFFFF;
    border: 1px solid #E1E7EB;
    border-radius: 10px;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
    text-decoration: none;
    transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease;
}

a.afaq-cc-action:is(:hover, :focus-visible) {
    color: #038B99;
    border-color: #0DC0C2;
}

a.afaq-cc-action--wa {
    color: #FFFFFF;
    background: #0E7A43; /* WhatsApp green, darkened for white-text contrast */
    border-color: #0E7A43;
}

a.afaq-cc-action--wa:is(:hover, :focus-visible) {
    color: #FFFFFF;
    background: #0B6236;
    border-color: #0B6236;
}

a.afaq-cc-action--solid {
    color: #FFFFFF;
    background: #01273B;
    border-color: #01273B;
}

a.afaq-cc-action--solid:is(:hover, :focus-visible) {
    color: #01273B;
    background: #0DC0C2;
    border-color: #0DC0C2;
}

a:is(.afaq-cc-action, .afaq-cc-value):focus-visible {
    outline: 2px solid #0DC0C2;
    outline-offset: 2px;
}

/* Google Maps (address-search embed) */
.afaq-contact-map {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.afaq-contact-map-frame {
    position: relative;
    overflow: hidden;
    height: 440px;
    background: #F5F7F8;
    border: 1px solid #E1E7EB;
    border-radius: var(--afaq-card-radius, 16px);
}

.afaq-contact-map-frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.afaq-contact-map-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 24px;
}

.afaq-contact-map-note {
    flex: 1 1 320px;
    margin: 0;
    color: #4A5F6A;
    font-size: 14.5px;
    line-height: 1.7;
}

@media (max-width: 1024px) {
    .afaq-contact-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .afaq-contact-cards {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .afaq-contact-cards .afaq-cc {
        padding: 22px;
    }

    .afaq-contact-map-frame {
        height: 320px;
    }

    .afaq-contact-map-footer a.afaq-cc-action {
        width: 100%;
    }
}
.afaq-contact-details-empty {
    max-width: 760px;
    margin: 0 auto;
    padding: 18px 22px;
    font-size: 16px;
    line-height: 1.7;
    text-align: center;
    color: #17313D;
    background: #FFFFFF;
    border: 1px solid #E1E7EB;
    border-radius: 12px;
}

@media (max-width: 767px) {
    .afaq-cf-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .afaq-section .e-con.afaq-contact-card {
        --padding-top: 24px;
        --padding-bottom: 24px;
        --padding-right: 18px;
        --padding-left: 18px;
    }

    :is(.afaq-contact-form, .afaq-quote-form) .afaq-cf-submit {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    :is(.afaq-contact-form, .afaq-quote-form) :is(input, select, textarea),
    :is(.afaq-contact-form, .afaq-quote-form) .afaq-cf-submit {
        transition: none;
    }
}

/* ==================================================
   AFAQ QUOTE — Request a Quote page (inc/afaq-quote.php); fields reuse the AFAQ CONTACT styles
   ================================================== */
.afaq-quote {
    font-family: 'Tajawal', sans-serif;
}

.afaq-qt-switch ul {
    list-style: none;
    margin: 0 0 28px;
    padding: 6px;
    display: grid;
    grid-template-columns: 1.25fr 1.25fr 1fr 1fr;
    gap: 6px;
    background: #F5F7F8;
    border: 1px solid #E1E7EB;
    border-radius: 12px;
}

.afaq-qt-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 8px 12px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    color: #17313D;
    text-decoration: none;
    border-radius: 9px;
    transition: background-color 200ms ease, color 200ms ease;
}

.afaq-qt-tab--priority {
    font-weight: 700;
}

.afaq-qt-tab:hover {
    color: #01273B;
    background: #FFFFFF;
}

.afaq-qt-tab[aria-current="true"] {
    color: #FFFFFF;
    background: #01273B;
}

.afaq-qt-tab:focus-visible {
    outline: 2px solid #0DC0C2;
    outline-offset: 2px;
}

.afaq-qt-title {
    margin: 0 0 8px;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.4;
    color: #01273B;
}

.afaq-qt-title:focus {
    outline: none;
}

.afaq-qt-intro {
    margin: 0 0 20px;
    font-size: 16px;
    line-height: 1.7;
    color: #17313D;
}

.afaq-quote-form .afaq-cf-field--wide {
    grid-column: 1 / -1;
}

.afaq-qt-choices {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.afaq-qt-choices legend {
    margin-bottom: 10px;
    padding: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
    color: #01273B;
}

.afaq-qt-choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px 12px;
}

.afaq-qt-choice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    font-size: 15px;
    line-height: 1.5;
    color: #17313D;
    background: #FFFFFF;
    border: 1px solid #E1E7EB;
    border-radius: 10px;
    cursor: pointer;
}

.afaq-qt-choice:has(input:checked) {
    border-color: #0DC0C2;
    background: #ECFBF8;
}

.afaq-qt-choice input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 3px 0 0;
    flex: 0 0 auto;
    accent-color: #038B99;
}

.afaq-qt-choice input[type="checkbox"]:focus-visible {
    outline: 2px solid #0DC0C2;
    outline-offset: 2px;
}

.afaq-qt-choices[aria-invalid="true"] .afaq-qt-choice {
    border-color: #F1B8B2;
}

.afaq-qt-note {
    margin: 20px 0 0;
    padding: 12px 16px;
    font-size: 14px;
    line-height: 1.7;
    color: #17313D;
    background: #F5F7F8;
    border-inline-start: 3px solid #0DC0C2;
    border-radius: 8px;
}

/* OceanWP limits number inputs to 50px; quote quantity fields use the full field width. */
.afaq-quote-form input[type="number"] {
    max-width: none;
}
.afaq-qt-flow .afaq-flow {
    margin-top: 6px;
}

/* Category cards: one shared card for all four request types (Devices + Solutions lead by order only).
   Equal-height rows on 2-column layouts; the button row is pinned to the card bottom. */
.afaq-section .e-con.afaq-grid.afaq-quote-cats {
    --display: grid;
    display: grid;
    grid-template-columns: repeat(var(--afaq-cols, 2), minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: var(--afaq-grid-gap);
}

.afaq-section .e-con.afaq-quote-cats > .e-con.afaq-card--quote {
    width: auto;
    height: 100%;
}

.afaq-section .e-con.afaq-card--quote > .afaq-actions {
    margin-top: auto;
    padding-top: 8px;
}

.afaq-card--quote .afaq-actions .elementor-button {
    min-width: 260px;
    justify-content: center;
}

@media (max-width: 767px) {
    .afaq-section .e-con.afaq-grid.afaq-quote-cats {
        grid-auto-rows: auto;
    }

    .afaq-card--quote .afaq-actions .elementor-button {
        min-width: 0;
    }
}

@media (max-width: 1024px) {
    .afaq-qt-switch ul {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .afaq-qt-tab {
        font-size: 14px;
        padding: 8px;
    }
}

/* ==================================================
   AFAQ FOOTER — global bilingual footer (partials/footer/layout.php)
   ================================================== */
#footer.afaq-footer {
    position: relative;
    margin: 0;
    padding: 0;
    font-family: 'Tajawal', sans-serif;
    color: #C9D3D9;
    background: #01273B;
}

.afaq-footer .afaq-footer-container {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
}

.afaq-footer .afaq-footer-main {
    padding: 64px 0 48px;
}

.afaq-footer .afaq-footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 4fr);
    gap: 48px;
    align-items: start;
}

.afaq-footer .afaq-footer-nav {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px;
}

.afaq-footer .afaq-footer-logo {
    display: inline-block;
    padding: 10px 14px;
    background: #FFFFFF;
    border-radius: 12px;
    line-height: 0;
}

.afaq-footer .afaq-footer-logo img {
    display: block;
    width: auto;
    max-width: 100%;
    height: 44px;
}

.afaq-footer .afaq-footer-name {
    margin: 18px 0 8px;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.4;
    color: #FFFFFF;
}

.afaq-footer .afaq-footer-desc {
    margin: 0;
    font-size: 15px;
    line-height: 1.8;
    color: #C9D3D9;
}

.afaq-footer .afaq-footer-title {
    margin: 0 0 16px;
    padding: 0 0 10px;
    font-family: 'Tajawal', sans-serif;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: none;
    color: #FFFFFF;
    border-bottom: 1px solid rgba(160, 168, 176, 0.25);
}

.afaq-footer .afaq-footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.afaq-footer .afaq-footer-links li {
    margin: 0;
    padding: 0;
}

.afaq-footer .afaq-footer-links a,
.afaq-footer .afaq-footer-legal a {
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.6;
    color: #C9D3D9;
    text-decoration: none;
    transition: color 200ms ease;
}

.afaq-footer .afaq-footer-links a:hover,
.afaq-footer .afaq-footer-legal a:hover {
    color: #0DC0C2;
}

.afaq-footer a:focus-visible {
    outline: 2px solid #0DC0C2;
    outline-offset: 3px;
    border-radius: 4px;
    color: #FFFFFF;
}

.afaq-footer .afaq-footer-cta {
    margin-top: 24px;
    padding: 18px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(160, 168, 176, 0.25);
    border-radius: 12px;
}

.afaq-footer .afaq-footer-cta p {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.6;
    color: #FFFFFF;
}

.afaq-footer .afaq-footer-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 22px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    color: #01273B;
    background: #0DC0C2;
    border: 1px solid #0DC0C2;
    border-radius: 10px;
    text-decoration: none;
    transition: background-color 200ms ease, color 200ms ease;
}

.afaq-footer .afaq-footer-btn:hover,
.afaq-footer .afaq-footer-btn:focus-visible {
    color: #01273B;
    background: #FFFFFF;
    border-color: #FFFFFF;
}

.afaq-footer .afaq-footer-bottom {
    padding: 18px 0;
    border-top: 1px solid rgba(160, 168, 176, 0.22);
    background: #012133;
}

.afaq-footer .afaq-footer-bottom-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 24px;
}

.afaq-footer .afaq-footer-copy {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #A0A8B0;
}

.afaq-footer .afaq-footer-legal {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
}

@media (max-width: 1024px) {
    .afaq-footer .afaq-footer-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }

    .afaq-footer .afaq-footer-desc {
        max-width: 640px;
    }

    .afaq-footer .afaq-footer-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 36px 32px;
    }
}

@media (max-width: 600px) {
    .afaq-footer .afaq-footer-main {
        padding: 48px 0 36px;
    }

    .afaq-footer .afaq-footer-container {
        padding: 0 16px;
    }

    .afaq-footer .afaq-footer-nav {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }

    .afaq-footer .afaq-footer-bottom-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Keep the copyright clear of the fixed scroll-to-top button. */
    .afaq-footer .afaq-footer-bottom {
        padding-bottom: 76px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .afaq-footer a {
        transition: none;
    }
}