/*
Theme Name: Mostafa Abdelazim – Divi Child
Theme URI: https://mostafaabdelazim.com
Description: Divi 5 child theme for mostafaabdelazim.com (Arabic RTL, SEO + Web + Shopify freelancer). Works with Divi Flash.
Author: Mostafa Abdelazim
Author URI: https://mostafaabdelazim.com
Template: Divi
Version: 1.0.0
Text Domain: mab-child
Domain Path: /languages
License: GPL v2 or later
*/
/* Brand tokens (mirror these in Divi 5 > Design Variables so modules use them natively). */
:root{
--navy:#14284A; --navy-deep:#0D1B33; --navy-soft:#223C6B;
--orange:#F07B2C; --orange-ink:#A3430A;
--peach:#FBE6D6; --paper:#F6F5F2; --cream:#FBF8F3;
--ink:#111827; --ink-2:#4F596D; --line:rgba(20,40,74,.12);
--font-ar:"Noto Kufi Arabic","Segoe UI",Tahoma,sans-serif;
--font-en:"Space Grotesk","Noto Kufi Arabic",sans-serif;
--ease:cubic-bezier(.16,1,.3,1);
--shadow:0 20px 40px -24px rgba(20,40,74,.35),0 2px 6px rgba(20,40,74,.06);
}
html{scroll-behavior:smooth;scroll-padding-top:100px}
body,#page-container{font-family:var(--font-ar);background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-ar);font-weight:800;line-height:1.32;text-wrap:balance}
p{text-wrap:pretty}
.mab-en{font-family:var(--font-en)}
::selection{background:var(--orange);color:var(--navy-deep)}
:focus-visible{outline:3px solid var(--navy);outline-offset:3px;border-radius:6px}
/* Buttons: add class mab-btn (+ mab-btn--navy / mab-btn--out) to any Divi Button or link. */
.mab-btn,.et_pb_button.mab-btn{--bg:var(--orange);--fg:var(--navy-deep);display:inline-flex;align-items:center;justify-content:center;gap:.7em;
padding:.9em 1.5em;border-radius:999px;border:0;background:var(--bg);color:var(--fg)!important;font-weight:700;text-decoration:none;
transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.mab-btn:hover{transform:translateY(-2px);box-shadow:0 18px 26px -14px rgba(0,0,0,.45);background:var(--bg)}
.mab-btn--navy{--bg:var(--navy);--fg:#fff}
.mab-btn--out{--bg:transparent;--fg:var(--navy);box-shadow:inset 0 0 0 1.5px var(--navy)}
.mab-btn--out:hover{--bg:var(--navy);--fg:#fff}
.et_pb_button.mab-btn:after{display:none}
/* Floating pill header: put class mab-pill on the header Section/Row in Theme Builder. */
.mab-pill{background:var(--navy);border-radius:999px;box-shadow:var(--shadow)}
.mab-pill a{color:#E8ECF4}
/* Card helper */
.mab-card{background:#fff;border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow);overflow:hidden}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
/* Divi buttons: pill padding/shadow (Customizer has no padding option) */
.et_pb_button,.et_pb_button:hover{padding:.9em 1.5em!important;line-height:1.2;box-shadow:0 12px 22px -14px rgba(0,0,0,.45);transition:transform .35s var(--ease),background .25s,color .25s}
.et_pb_button:hover{transform:translateY(-2px)}
/* =========================================================
Header menu – Divi Flash "Advanced Menu" (floating navy pill)
Module class: .difl_advancedmenu (Theme Builder header)
========================================================= */
.et-l--header .difl_advancedmenu{max-width:1240px;margin-inline:auto}
.et-l--header .df-am-container{background:var(--navy);border-radius:999px;box-shadow:var(--shadow);padding:10px 26px 10px 12px}
.et-l--header .df-am-row,.et-l--header .row-inner{align-items:center}
/* Logo: Divi Flash prints width="f" height="u" on SVGs, so size it here. Always show the white logo on the navy pill. */
.et-l--header .df-site-logo{height:38px!important;width:auto!important;max-width:none}
.et-l--header .df-site-logo.sticky-logo{display:none!important}
.et-l--header .df-site-logo:not(.sticky-logo){display:block!important}
/* Links */
.et-l--header .df-menu-nav{display:flex;gap:6px;margin:0;padding:0;list-style:none}
.et-l--header .df-menu-nav>li>a{display:block;padding:.5em 1em;border-radius:999px;font-family:var(--font-ar);font-size:.93rem;font-weight:500;line-height:1.4;
color:#E8ECF4;text-decoration:none;transition:background .25s,color .25s}
.et-l--header .df-menu-nav>li>a:hover,
.et-l--header .df-menu-nav>li.current-menu-item>a{background:rgba(255,255,255,.1);color:#fff}
.et-l--header .df-menu-nav a:focus-visible,.et-l--header .df-menu-button:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
/* CTA button */
.et-l--header .df-menu-button{display:inline-flex;align-items:center;justify-content:center;padding:.7em 1.3em;border-radius:999px;
background:var(--orange);color:var(--navy-deep)!important;font-family:var(--font-ar);font-size:.92rem;font-weight:700;line-height:1.2;text-decoration:none;
transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.et-l--header .df-menu-button:hover{transform:translateY(-2px);box-shadow:0 18px 26px -14px rgba(0,0,0,.45)}
/* Mobile */
.et-l--header .df-mobile-menu-button{color:#fff}
.et-l--header .df-mobile-menu{background:var(--navy-deep)}
.et-l--header .df-mobile-menu .df-menu-nav{flex-direction:column;gap:2px}
.et-l--header .df-mobile-menu .df-menu-nav>li>a{padding:.8em 1.2em;border-radius:14px}
@media (max-width:980px){
.et-l--header .df-am-container{padding:8px 16px}
.et-l--header .df-site-logo{height:34px!important}
}
/* Spread header items: logo at the start, menu centered, CTA at the end */
.et-l--header .df-am-container .df-am-row,
.et-l--header .df-am-container .row-inner{width:100%!important;display:flex!important;justify-content:space-between!important;align-items:center!important}
.et-l--header .df-am-container .df-am-col{flex:0 0 auto!important;width:auto!important}
.et-l--header .df-am-container .df-am-col.center{flex:1 1 auto!important;display:flex;justify-content:center}
.et-l--header .df-menu-nav{gap:14px}
.et-l--header .df-menu-nav>li>a{padding:.55em 1.2em}
/* Push logo / menu / CTA to the edges of the pill (3 columns spread) */
.et-l--header .df-am-container .df-am-row,
.et-l--header .df-am-container .row-inner{max-width:none!important;margin:0!important;padding:0!important}
.et-l--header .df-am-container .df-am-col.left{justify-content:flex-start!important;padding:0!important}
.et-l--header .df-am-container .df-am-col.right{justify-content:flex-end!important;padding:0!important}
.et-l--header .df-am-container .df-am-col.center{padding:0 24px!important}
.et-l--header .df-menu-nav{gap:20px}
/* =========================================================
Assurance row (check list): "الرد خلال 24 ساعة / دون أي التزام / ..."
Usage: Divi Text module > add CSS class mab-assure (dark bg) or mab-assure mab-assure--light
Content: a plain bulleted list
========================================================= */
.mab-assure ul{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 22px;font-size:.9rem;line-height:1.6;color:#AEBAD1}
.mab-assure ul li{display:inline-flex;align-items:center;gap:.5em;margin:0;padding:0;list-style:none}
.mab-assure ul li::before{content:"";flex:none;width:16px;height:16px;background:var(--orange);
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat}
.mab-assure--light ul{color:var(--ink-2)}
.mab-assure--light ul li::before{background:var(--orange-ink)}
/* =========================================================
Generic mask icons (any element):
========================================================= */
.mab-ico{display:inline-block;flex:none;width:1em;height:1em;background:currentColor;-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat;transition:transform .35s var(--ease)}
.mab-ico--check{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
.mab-ico--x{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E")}
.mab-ico--arrow{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E")}
.mab-btn:hover .mab-ico--arrow{transform:translateX(-4px)}
/* =========================================================
Section: Problem / Before-After (Divi Code module, wrapper .mab-ba)
========================================================= */
.mab-ba__head{max-width:40em}
.mab-ba__head h2{font-size:clamp(1.8rem,3.4vw,2.8rem);color:var(--navy);margin:0}
.mab-ba__head p{margin:14px 0 0;color:var(--ink-2)}
.mab-ba__head b{color:var(--orange-ink)}
.mab-ba__labels,.mab-ba__row{display:grid;grid-template-columns:1fr 56px 1fr;gap:12px}
.mab-ba__labels{margin:44px 0 12px;font-weight:700;font-size:.95rem;color:var(--ink-2)}
.mab-ba__labels .on{color:var(--navy)}
.mab-ba__list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.mab-ba__row{align-items:stretch;padding:0;margin:0}
.mab-ba__b,.mab-ba__a{margin:0;display:flex;gap:14px;align-items:center;padding:20px 22px;border-radius:18px;line-height:1.8}
.mab-ba__b{background:#fff;border:1px dashed rgba(20,40,74,.22);color:var(--ink-2)}
.mab-ba__a{background:var(--navy);color:#fff;font-weight:500;box-shadow:var(--shadow);transition:transform .45s var(--ease)}
.mab-ba__row:hover .mab-ba__a{transform:translateX(-6px)}
.mab-ba__b .dot,.mab-ba__a .dot{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:none;font-size:14px}
.mab-ba__b .dot{background:var(--paper);color:var(--ink-2)}
.mab-ba__a .dot{background:var(--orange);color:var(--navy-deep)}
.mab-ba__arr{display:grid;place-items:center;color:var(--orange-ink);font-size:24px}
.mab-ba__cta{margin-top:34px;display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center;justify-content:space-between;background:var(--peach);border-radius:22px;padding:22px 26px}
.mab-ba__cta p{margin:0;font-weight:800;color:var(--navy);font-size:clamp(1.05rem,1.8vw,1.3rem)}
@media (max-width:760px){
.mab-ba__labels{display:none}
.mab-ba__list{gap:28px}
.mab-ba__row{grid-template-columns:1fr;gap:6px}
.mab-ba__arr{transform:rotate(-90deg);height:28px}
}
/* =========================================================
Section: Process – 4 steps (Divi Code module, wrapper .mab-process)
========================================================= */
.mab-process__head{max-width:40em;margin-inline:auto;text-align:center}
.mab-process__head h2{margin:0;font-size:clamp(1.8rem,3.4vw,2.8rem);color:var(--navy)}
.mab-steps{list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;position:relative}
.mab-steps::before{content:"";position:absolute;inset-inline:12.5%;top:44px;border-top:2px dashed rgba(20,40,74,.3)}
.mab-step{text-align:center;position:relative;margin:0;padding:0;list-style:none}
.mab-step .c{width:88px;height:88px;border-radius:50%;background:#fff;border:2px solid var(--navy);margin:0 auto 18px;display:grid;place-items:center;color:var(--navy);
position:relative;z-index:1;box-shadow:var(--shadow);font-size:34px;transition:background .35s,color .35s,border-color .35s}
.mab-step:hover .c{background:var(--orange);border-color:var(--orange);color:var(--navy-deep)}
.mab-step .n{position:absolute;top:-4px;inset-inline-end:-4px;width:30px;height:30px;border-radius:50%;background:var(--navy);color:#fff;font:700 .85rem var(--font-en);display:grid;place-items:center}
.mab-step h3{font-size:1.2rem;color:var(--navy);margin:0 0 6px}
.mab-step p{color:var(--ink-2);font-size:.97rem;max-width:18em;margin:0 auto}
@media (max-width:980px){.mab-steps{grid-template-columns:repeat(2,1fr);gap:40px 20px}.mab-steps::before{display:none}}
@media (max-width:560px){.mab-steps{grid-template-columns:1fr}}
/* Inline SVG icons (preferred):