:root{--red:#ed1c24;--ink:#111214;--muted:#60666f;--line:#e2e4e7;--dark:#0e1114}

/* HERO */
.hero{min-height:520px !important}
.hero-copy{padding:48px 56px !important}
.hero h1{
    font-size:clamp(38px,3.8vw,54px) !important;
    line-height:1.06 !important;
    max-width:560px !important;
    letter-spacing:-.45px !important
}
.hero-copy p{
    max-width:590px !important;
    font-size:14.5px !important;
    line-height:1.95 !important
}
.brush{
    width:220px !important;
    height:6px !important;
    margin-bottom:16px !important
}
.hero-features{
    right:42px !important;
    left:42px !important;
    bottom:12px !important
}
.hero-features>div{padding:10px 8px !important}

/* VERTICAL SPACING */
.services-section{padding-top:46px !important;padding-bottom:46px !important}
.dubai{padding-top:46px !important;padding-bottom:46px !important}
.section-title{margin-bottom:22px !important}

/* DUBAI */
.dubai{gap:42px !important}
.dubai-copy h2{font-size:40px !important}

/* GCC */
.gcc{
    background:
        linear-gradient(rgba(8,15,23,.36),rgba(8,15,23,.52)),
        url('/assets/images/final/gcc-background-v2.webp?v=20260922-3')
        center 48%/cover no-repeat !important;
    padding-top:50px !important;
    padding-bottom:50px !important
}
.gcc::after{display:none !important}
.gcc-city,.gcc-map{display:none !important}
.countries{position:relative;z-index:2}
.country{
    background:rgba(17,19,22,.88) !important;
    backdrop-filter:blur(2px)
}

/* MERCHANT + COURIER */
.business-row{gap:10px !important;padding:10px !important}
.merchant-image{
    position:relative;
    overflow:hidden !important;
    background:#d99c58 !important
}
.merchant-image img{
    width:118% !important;
    max-width:none !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:left center !important;
    transform:translateX(-2%) !important
}
.courier-panel>img{object-position:center 34% !important}

/* FOOTER DESKTOP */
.footer{padding:42px 0 18px !important}
.footer-grid{
    display:grid !important;
    grid-template-columns:1.25fr 1fr 1fr 1.15fr !important;
    gap:34px !important;
    align-items:start !important
}
.footer-grid>div{
    min-width:0 !important;
    align-items:flex-start !important;
    text-align:right !important
}
.footer-grid strong{
    font-size:15px !important;
    line-height:1.5 !important;
    margin:0 0 7px !important
}
.footer-grid a,.footer-grid p{
    font-size:13px !important;
    line-height:1.8 !important;
    margin:0 !important
}
.brand-foot img{
    width:70px !important;
    height:70px !important;
    margin:0 0 8px 0 !important
}
.brand-foot p{max-width:280px !important}
.footer-grid>div:last-child{direction:rtl !important}
.footer-grid>div:last-child .footer-contact,
.footer-grid>div:last-child a{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:8px !important;
    width:100% !important;
    min-height:28px !important;
    font-size:13px !important;
    line-height:1.5 !important;
    white-space:nowrap !important
}
.footer-grid>div:last-child a[dir="ltr"]{
    direction:ltr !important;
    text-align:left !important
}
.footer-grid>div:last-child .footer-contact span:first-child{
    width:18px !important;
    flex:0 0 18px !important;
    text-align:center !important
}
.foot-bottom{
    margin-top:28px !important;
    padding-top:14px !important;
    align-items:center !important
}

/* TABLET */
@media(max-width:980px){
    .hero{min-height:auto !important}
    .hero-copy{padding:38px 26px !important}
    .hero h1{font-size:42px !important;max-width:100% !important}
    .footer-grid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:28px 36px !important
    }
}

/* MOBILE */
@media(max-width:640px){
    .topbar-row{
        min-height:30px !important;
        padding:4px 0 !important;
        gap:3px !important
    }

    .hero{
        display:flex !important;
        flex-direction:column !important
    }
    .hero-media{min-height:270px !important}
    .hero-media>img{
        height:270px !important;
        object-fit:cover !important;
        object-position:43% center !important
    }
    .hero-features{
        right:8px !important;
        left:8px !important;
        bottom:8px !important;
        grid-template-columns:repeat(2,1fr) !important
    }
    .hero-features>div{padding:7px 5px !important}
    .hero-features span{
        font-size:9.5px !important;
        line-height:1.45 !important
    }

    .hero-copy{padding:24px 16px 28px !important}
    .hero h1{
        font-size:29px !important;
        line-height:1.1 !important;
        max-width:100% !important;
        letter-spacing:0 !important
    }
    .hero-copy p{
        font-size:13px !important;
        line-height:1.85 !important
    }
    .brush{
        width:150px !important;
        height:5px !important;
        margin-bottom:13px !important
    }
    .hero-actions{gap:8px !important}
    .hero-actions .btn{
        width:100% !important;
        min-height:43px !important
    }
    .chips{gap:7px !important}
    .chips span{
        width:100% !important;
        justify-content:center !important;
        font-size:10.5px !important;
        padding:6px 10px !important
    }

    .services-section{
        padding-top:36px !important;
        padding-bottom:36px !important
    }
    .section-title h2{font-size:28px !important}
    .service-card{padding:16px !important}

    .dubai{
        width:calc(100% - 24px) !important;
        gap:18px !important;
        padding-top:36px !important;
        padding-bottom:36px !important
    }
    .dubai-copy{text-align:center !important}
    .dubai-copy h2{font-size:28px !important}

    .gcc{
        background-position:center center !important;
        padding-top:38px !important;
        padding-bottom:38px !important
    }
    .country{
        min-height:104px !important;
        padding:12px !important
    }

    .business-row{
        padding:6px !important;
        gap:6px !important
    }
    .merchant-image{height:220px !important}
    .merchant-image img{
        width:116% !important;
        height:100% !important;
        object-position:left center !important;
        transform:translateX(-1%) !important
    }
    .courier-panel>img{
        height:245px !important;
        object-position:center 28% !important
    }
    .panel-copy{padding:20px 16px !important}
    .panel-copy h2{
        font-size:25px !important;
        line-height:1.22 !important
    }
    .panel-copy p{
        font-size:12.5px !important;
        line-height:1.8 !important
    }

    .footer{padding:32px 0 14px !important}
    .footer-grid{
        grid-template-columns:1fr !important;
        gap:24px !important;
        text-align:center !important
    }
    .footer-grid>div{
        align-items:center !important;
        text-align:center !important;
        width:100% !important
    }
    .brand-foot{order:1}
    .footer-grid>div:last-child{order:2}
    .footer-grid>div:nth-child(3){order:3}
    .footer-grid>div:nth-child(2){order:4}
    .brand-foot img{margin:0 auto 8px !important}
    .brand-foot p{
        max-width:310px !important;
        text-align:center !important
    }
    .footer-grid>div:last-child .footer-contact,
    .footer-grid>div:last-child a,
    .footer-grid>div:last-child a[dir="ltr"]{
        width:auto !important;
        min-width:220px !important;
        justify-content:center !important;
        text-align:center !important;
        direction:ltr !important;
        white-space:normal !important;
        font-size:13px !important
    }
    .foot-bottom{
        margin-top:22px !important;
        padding-top:12px !important;
        flex-direction:column !important;
        justify-content:center !important;
        align-items:center !important;
        text-align:center !important;
        gap:4px !important
    }
}


/* ==========================================================
   FORCE FIX V5 — GCC BACKGROUND + DARK SERVICE CARDS
   Loaded at the very end of image-replacement-patch.css
   ========================================================== */

/* Service section stays white; cards become premium charcoal */
body .services-section{
    background:#ffffff !important;
}

body .services .service-card{
    background:#151719 !important;
    background-image:none !important;
    border:1px solid #2c3035 !important;
    color:#ffffff !important;
    box-shadow:0 10px 26px rgba(8,10,13,.10) !important;
    transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease !important;
}

body .services .service-card:hover{
    transform:translateY(-4px) !important;
    border-color:#ed1c24 !important;
    box-shadow:0 18px 38px rgba(8,10,13,.18) !important;
}

body .services .service-card h3{
    color:#ffffff !important;
}

body .services .service-card p{
    color:#c7cbd1 !important;
}

body .services .service-card a{
    color:#ff3b42 !important;
}

body .services .service-card .service-icon{
    background:rgba(237,28,36,.11) !important;
    border:1px solid rgba(237,28,36,.22) !important;
    color:#ff3b42 !important;
}

/* GCC — use the freshly uploaded user image as a real background */
html body main .gcc{
    position:relative !important;
    isolation:isolate !important;
    background-color:#06121d !important;
    background-image:
      linear-gradient(rgba(3,12,20,.18),rgba(3,12,20,.28)),
      url('/assets/images/final/gcc-background-v5.webp?v=20260922-5') !important;
    background-repeat:no-repeat !important;
    background-size:cover !important;
    background-position:center center !important;
}

/* Disable every legacy visual layer that could cover the new image */
html body main .gcc > .gcc-city,
html body main .gcc > .gcc-map{
    display:none !important;
}

html body main .gcc::after{
    display:none !important;
    content:none !important;
}

html body main .gcc::before{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    z-index:0 !important;
    pointer-events:none !important;
    background:linear-gradient(
      90deg,
      rgba(4,12,19,.10) 0%,
      rgba(4,12,19,.02) 30%,
      rgba(4,12,19,.05) 65%,
      rgba(4,12,19,.12) 100%
    ) !important;
}

html body main .gcc .gcc-content{
    position:relative !important;
    z-index:2 !important;
}

html body main .gcc .country{
    background:rgba(16,19,23,.88) !important;
    border-color:rgba(255,255,255,.16) !important;
    backdrop-filter:blur(2px) !important;
}

html body main .gcc .country.active{
    border-color:#ed1c24 !important;
}

@media(max-width:640px){
    body .services .service-card:hover{
        transform:none !important;
    }

    html body main .gcc{
        background-size:cover !important;
        background-position:58% center !important;
    }

    html body main .gcc::before{
        background:rgba(4,12,19,.15) !important;
    }
}


/* ==========================================================
   SOON FINAL FINETUNE V6
   Scope only:
   1) service text contrast
   2) GCC map positioning
   3) merchant image cleanup
   4) footer contact alignment/readability
   ========================================================== */

/* 1. Dark service cards — improve text legibility */
body .services .service-card p{
    color:#d9dde2 !important;
}

body .services .service-card h3{
    color:#ffffff !important;
    font-weight:800 !important;
}

body .services .service-card a{
    color:#ff454b !important;
    font-weight:800 !important;
}

/* Keep cards premium but not visually too heavy */
body .services .service-card{
    background:#16181b !important;
    border-color:#2f3338 !important;
}

body .services .service-card:hover{
    background:#191c20 !important;
    border-color:#ed1c24 !important;
}

/* 2. GCC background — move artwork slightly right and reduce competition with heading */
html body main .gcc{
    background-position:56% center !important;
}

html body main .gcc::before{
    background:linear-gradient(
        90deg,
        rgba(4,12,19,.10) 0%,
        rgba(4,12,19,.03) 34%,
        rgba(4,12,19,.10) 68%,
        rgba(4,12,19,.20) 100%
    ) !important;
}

/* 3. Merchant image */
.merchant-image img{
    width:100% !important;
    max-width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:left center !important;
    transform:none !important;
}

/* 4. Footer — cleaner hierarchy and contact block */
.footer{
    padding-top:38px !important;
    padding-bottom:14px !important;
}

.footer-grid{
    gap:30px !important;
}

.footer-grid strong{
    font-size:15px !important;
    margin-bottom:8px !important;
}

.footer-grid a,
.footer-grid p{
    font-size:13.25px !important;
    line-height:1.85 !important;
}

.footer-grid > div:last-child{
    gap:10px !important;
}

.footer-grid > div:last-child .footer-contact,
.footer-grid > div:last-child a[dir="ltr"]{
    display:flex !important;
    align-items:center !important;
    gap:9px !important;
    min-height:30px !important;
    font-size:14px !important;
    line-height:1.45 !important;
    white-space:nowrap !important;
    color:#f0f1f2 !important;
}

.footer-grid > div:last-child .footer-contact span:first-child{
    width:20px !important;
    flex:0 0 20px !important;
    text-align:center !important;
}

.foot-bottom{
    margin-top:24px !important;
    padding-top:12px !important;
}

/* Mobile refinements for the same four areas */
@media(max-width:640px){

    body .services .service-card p{
        color:#dce0e4 !important;
    }

    html body main .gcc{
        background-position:62% center !important;
    }

    .merchant-image{
        height:220px !important;
        background:#ed1c24 !important;
    }

    .merchant-image img{
        width:100% !important;
        height:100% !important;
        object-fit:cover !important;
        object-position:left center !important;
    }

    .footer{
        padding-top:28px !important;
        padding-bottom:12px !important;
    }

    .footer-grid{
        gap:22px !important;
    }

    .footer-grid > div:last-child{
        gap:8px !important;
    }

    .footer-grid > div:last-child .footer-contact,
    .footer-grid > div:last-child a[dir="ltr"]{
        min-width:0 !important;
        width:auto !important;
        justify-content:center !important;
        font-size:13.5px !important;
    }

    .foot-bottom{
        margin-top:18px !important;
        padding-top:10px !important;
    }
}


/* ==========================================================
   SOON FINAL RESPONSIVE + FOOTER V7
   Scope:
   - compact mobile hero
   - 2x2 GCC countries on mobile
   - tighter merchant/courier mobile images
   - footer contact heading closer to phone/email
   - tighter desktop footer spacing
   ========================================================== */

/* ---------- FOOTER DESKTOP ---------- */
.footer-grid{
    gap:26px !important;
}

.footer-grid > div:last-child{
    gap:4px !important;
}

.footer-grid > div:last-child > strong{
    margin-bottom:2px !important;
}

.footer-grid > div:last-child .footer-contact,
.footer-grid > div:last-child a[dir="ltr"]{
    margin-top:0 !important;
    margin-bottom:0 !important;
    min-height:25px !important;
    font-size:14px !important;
}

/* Bring contact title and data together */
.footer-grid > div:last-child{
    justify-content:flex-start !important;
}

.footer-grid > div:last-child strong + a{
    margin-top:1px !important;
}

/* ---------- MOBILE ---------- */
@media(max-width:640px){

    /* Hero */
    .hero-media{
        min-height:245px !important;
    }

    .hero-media > img{
        height:245px !important;
        object-position:43% center !important;
    }

    .hero-features{
        right:7px !important;
        left:7px !important;
        bottom:7px !important;
        grid-template-columns:repeat(2,1fr) !important;
    }

    .hero-features > div{
        padding:6px 4px !important;
    }

    .hero-features .svg-ico{
        width:17px !important;
        height:17px !important;
        margin-bottom:2px !important;
    }

    .hero-features span{
        font-size:9px !important;
        line-height:1.35 !important;
    }

    .hero-copy{
        padding:20px 15px 24px !important;
    }

    .hero h1{
        font-size:27px !important;
        line-height:1.1 !important;
        margin-top:5px !important;
    }

    .hero-copy p{
        font-size:12.7px !important;
        line-height:1.8 !important;
    }

    .hero-actions{
        margin-top:10px !important;
        margin-bottom:12px !important;
    }

    .chips{
        display:grid !important;
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:6px !important;
    }

    .chips span{
        width:100% !important;
        min-height:34px !important;
        justify-content:center !important;
        padding:5px 7px !important;
        font-size:9.8px !important;
        text-align:center !important;
    }

    .chips span:last-child{
        grid-column:1 / -1 !important;
    }

    /* Services */
    .services{
        gap:8px !important;
    }

    .service-card{
        padding:14px !important;
    }

    /* GCC countries 2x2 */
    .countries{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:8px !important;
    }

    .country{
        min-height:112px !important;
        padding:11px 8px !important;
    }

    .country strong{
        font-size:15px !important;
    }

    .country small{
        font-size:10px !important;
        line-height:1.55 !important;
    }

    .flag{
        width:30px !important;
        height:30px !important;
    }

    /* Merchant / Courier image height */
    .merchant-image{
        height:185px !important;
    }

    .courier-panel > img{
        height:210px !important;
        object-position:center 25% !important;
    }

    /* Footer */
    .footer{
        padding-top:24px !important;
        padding-bottom:10px !important;
    }

    .footer-grid{
        gap:18px !important;
    }

    .footer-grid > div{
        gap:4px !important;
    }

    .footer-grid strong{
        margin-bottom:2px !important;
    }

    /* Specifically fix "تواصل معنا" distance */
    .footer-grid > div:last-child{
        gap:2px !important;
        padding-top:0 !important;
        margin-top:0 !important;
    }

    .footer-grid > div:last-child > strong{
        margin:0 0 2px 0 !important;
        padding:0 !important;
    }

    .footer-grid > div:last-child .footer-contact,
    .footer-grid > div:last-child a[dir="ltr"]{
        min-height:23px !important;
        margin:0 !important;
        padding:0 !important;
        font-size:13px !important;
        line-height:1.45 !important;
    }

    .brand-foot p{
        margin-top:2px !important;
        margin-bottom:0 !important;
    }

    .foot-bottom{
        margin-top:14px !important;
        padding-top:8px !important;
        gap:2px !important;
    }
}