/* ============================================================
   MEA THEME — UPDATE-PROOF layer (/assets/mea/, injected via hook mea_brand.php).
   Survives WHMCS + Lagom + module updates (outside templates/lagom2/).
   Brand colors: /assets/mea/brand.css. Fonts: /assets/mea/fonts/mea-fonts.css (self-hosted, linked by hook).
   IDENTITY 2026-07-13 "Bold Modern": Cairo(ar) + Archivo(latin/numbers); Indigo #4F46E5 primary,
   Electric #3B82F6, Violet #7C3AED on Midnight #0E1330. Saudi green removed entirely.
   Primary buttons = solid Indigo (WCAG AA 6.29:1); violet→electric gradient reserved for hero/large CTA.
   ============================================================ */

:root{ --body-bg:#0E1330; --sticky-menu-bg:hsl(232deg 46% 12% / 84%);
       --mea-indigo:#4F46E5; --mea-electric:#3B82F6; --mea-violet:#7C3AED;
       --mea-midnight:#0E1330; --mea-grad:linear-gradient(135deg,#7C3AED,#3B82F6); }
/* Arabic text = Cairo; Latin glyphs/numbers fall through to Archivo. */
body{ font-family:'Cairo','Archivo',system-ui,-apple-system,"Segoe UI",sans-serif; }
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{ font-family:'Cairo','Archivo',sans-serif; font-weight:900; letter-spacing:-0.01em; }

/* ===== Glass · Neon · Gradients · Pricing (aesthetic only, mobile-aware) ===== */
.package{background:linear-gradient(160deg,rgba(79,70,229,0.06),rgba(14,19,48,0.30))!important;backdrop-filter:blur(12px) saturate(118%);-webkit-backdrop-filter:blur(12px) saturate(118%);border:1px solid rgba(79,70,229,0.16)!important;border-radius:18px!important;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.package:hover{transform:translateY(-6px);border-color:rgba(124,58,237,0.45)!important;box-shadow:0 14px 44px -14px rgba(79,70,229,0.42)}
.btn.btn-primary,.btn.btn-order-now{box-shadow:0 0 0 rgba(79,70,229,0);transition:box-shadow .25s ease,transform .15s ease,filter .2s ease}
.btn.btn-primary:hover,.btn.btn-order-now:hover,.btn.btn-primary:focus,.btn.btn-order-now:focus{box-shadow:0 8px 22px -10px rgba(79,70,229,0.6),0 0 46px -14px rgba(124,58,237,0.4);transform:translateY(-2px);filter:brightness(1.06)}
@media (prefers-reduced-motion:no-preference){.rs-site .rs-block:first-of-type,.custom-page .section:first-of-type{background-image:radial-gradient(1100px 460px at 78% 8%,rgba(79,70,229,0.12),transparent 60%),radial-gradient(880px 400px at 12% 92%,rgba(124,58,237,0.13),transparent 62%);background-attachment:fixed;animation:meaDrift 20s ease-in-out infinite alternate}@keyframes meaDrift{0%{background-position:78% 8%,12% 92%}100%{background-position:70% 14%,20% 86%}}}
@media (max-width:768px){.package{backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}}

/* ===== Hero — tagline gradient, CTA glow, light CSS-3D float ===== */
.banner-caption{background:linear-gradient(90deg,#7C3AED 0%,#3B82F6 72%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;font-weight:900;letter-spacing:.02em;filter:drop-shadow(0 0 13px rgba(79,70,229,0.30))}
.banner .btn-primary,.btn.btn-xlg.btn-primary{box-shadow:0 0 24px -8px rgba(79,70,229,0.6)}
.banner .btn-primary:hover,.btn.btn-xlg.btn-primary:hover{box-shadow:0 0 30px -4px rgba(124,58,237,0.7),0 0 62px -18px rgba(59,130,246,0.5)}
@media (prefers-reduced-motion:no-preference){
 .graphic-background-left,.graphic-background-center,.graphic-background-right{will-change:transform;animation:meaFloat3d 7s ease-in-out infinite}
 .graphic-background-center{animation-duration:8.5s}
 .graphic-background-right{animation-duration:6.4s;animation-delay:-1.6s}
 .graphic-background-left{animation-delay:-3.1s}
 @keyframes meaFloat3d{0%,100%{transform:perspective(1000px) translate3d(0,0,0) rotateX(0) rotateY(0)}50%{transform:perspective(1000px) translate3d(0,-11px,18px) rotateX(1.6deg) rotateY(-1.8deg)}}
}
/* Secondary button = Violet (identity secondary), white text 5.28:1 AA. */
.btn-secondary,.btn.btn-secondary{--btn-secondary-bg:#7C3AED;background-color:#7C3AED!important;border-color:#7C3AED!important;color:#fff!important}
.btn-secondary:hover,.btn.btn-secondary:hover{background-color:#6d28d9!important;border-color:#6d28d9!important}

/* ===== Client area unification (aesthetic only, no functional change) ===== */
.rs-panel-summary,.service-summary,.product-info-summary{border-radius:16px!important}
.btn:focus-visible,a:focus-visible{outline:2px solid rgba(79,70,229,.65);outline-offset:2px}

/* ===== Identity (2026-07-13) — primary buttons + focus (supersedes prev #1A6FD0 audit fix) ===== */
/* Primary CTA = solid Indigo #4F46E5 → white text 6.29:1 (WCAG AA pass). Reversible: delete block. */
input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible,
[tabindex]:focus-visible,summary:focus-visible,.form-control:focus-visible{
  outline:2px solid #818CF8;outline-offset:2px;box-shadow:0 0 0 3px rgba(79,70,229,.30)}
.btn.btn-primary,.btn.btn-order-now,.btn-primary,button.btn-primary,.lagom-btn-primary{
  background-color:#4F46E5!important;border-color:#4F46E5!important;color:#fff!important}
.btn.btn-primary:hover,.btn.btn-order-now:hover,.btn-primary:hover,button.btn-primary:hover{
  background-color:#4338CA!important;border-color:#4338CA!important;color:#fff!important}
/* Large hero CTA may carry the identity gradient (large bold text ≥18.66px → AA 3:1 threshold). */
.btn.btn-xlg.btn-primary,.banner .btn.btn-primary.btn-lg{background-image:linear-gradient(135deg,#7C3AED,#3B82F6)!important;border:none!important}

/* ===== CLS fix (MEA item 4, 2026-07-11) — reserve intrinsic aspect for Lagom lazyload
   content screenshots in .section-graphic. Reversible: delete block. */
.section-graphic img.lazyload,.section-graphic img.lazyloaded{height:auto;aspect-ratio:1193 / 904}
.section-graphic img[data-src*="about_us"],.section-graphic img[src*="about_us"]{aspect-ratio:1193 / 1192}
.section-graphic img[data-src*="website_builder"],.section-graphic img[src*="website_builder"]{aspect-ratio:1856 / 1248}

/* ===== Identity logo swap (update-safe; new MEA logo, /assets/mea/logo/, no theme-file edit) =====
   Dark public site → primary gradient-cloud logo (transparent, reads on dark). content:url replaces
   the Lagom <img> in place; height fixed + width auto keeps aspect (278x150). Reversible: delete block. */
a.logo img,a.footer-company-logo img{content:url('/assets/mea/logo/mea-logo.png')!important;height:42px!important;width:auto!important;max-width:210px!important;object-fit:contain!important}
a.footer-company-logo img{height:48px!important}
@media (max-width:768px){a.logo img,a.footer-company-logo img{height:36px!important}}

/* ===== Identity component reskin — client area / cart / forms / panels (2026-07-13) =====
   Adapted from handoff lagom/mea-lagom-custom.css into the update-safe layer. Bootstrap5/Lagom
   class names only → no theme-file edit. Semantic colors per brand guide. Reversible: delete block. */
:root{--bs-primary:#4F46E5;--bs-primary-rgb:79,70,229;--bs-link-color:#4F46E5;--bs-link-hover-color:#7C3AED;
  --bs-success:#22C55E;--bs-warning:#F59E0B;--bs-danger:#EF4444;--bs-info:#06B6D4;--bs-border-radius:0.7rem}
a{color:#4F46E5}a:hover{color:#7C3AED}
.text-primary{color:#4F46E5!important}.bg-primary{background-color:#4F46E5!important}
.badge.bg-primary,.badge-primary{background:#4F46E5!important}
.btn-outline-primary{color:#4F46E5!important;border-color:#4F46E5!important}
.btn-outline-primary:hover{background:#4F46E5!important;color:#fff!important}
.text-success,.badge.bg-success{color:#22C55E}.bg-success{background-color:#22C55E!important}
.text-warning{color:#F59E0B}.bg-warning{background-color:#F59E0B!important}
.text-danger{color:#EF4444}.bg-danger{background-color:#EF4444!important}
.progress-bar{background:linear-gradient(135deg,#7C3AED,#3B82F6)!important}
/* cards / panels / summaries */
.card,.panel,.rs-panel,.lagom-card,.rs-panel-summary,.service-summary,.product-info-summary,
.order-summary,.summary-container{border-radius:14px!important}
.card{border-color:rgba(79,70,229,.14)}
/* forms */
.form-control,.form-select,.input-group-text{border-radius:.6rem!important}
.form-control:focus,.form-select:focus{border-color:#4F46E5!important;box-shadow:0 0 0 .2rem rgba(79,70,229,.22)!important}
/* internal page header band → identity midnight gradient */
.page-header,.rs-page-header,.cover,.clientarea-header,.header-lagom-inner{background:linear-gradient(120deg,#0E1330,#241a5e)!important}
/* tables */
.table thead th{color:#8A93B8!important;font-weight:600!important}
.table-hover tbody tr:hover{background:rgba(79,70,229,.06)!important}
/* nav active */
.navbar .nav-link.active,.navbar .nav-link:hover,.header-lagom .active>a{color:#4F46E5!important}
/* cart/checkout primary actions inherit the primary rules above */
#checkout .btn-primary,.order-summary .btn-primary{background-color:#4F46E5!important;border-color:#4F46E5!important}

/* KB article styling (item 51) — indigo-tinted (identity) */
.kb-level{display:inline-block;font-size:13px;font-weight:700;opacity:.95;background:rgba(79,70,229,.16);border:1px solid rgba(79,70,229,.34);padding:3px 12px;border-radius:20px;margin-bottom:16px}
.kb-warn{background:rgba(245,158,11,.10);border:1px solid rgba(245,158,11,.45);border-inline-start:4px solid #F59E0B;padding:12px 16px;border-radius:10px;margin:16px 0;line-height:1.85}
.kb-next{margin-top:30px;padding:16px 18px;border-radius:12px;background:rgba(79,70,229,.09);border:1px solid rgba(79,70,229,.28)}
.kb-next a{font-weight:700}

/* Skip-link (WCAG 2.4.1 Bypass Blocks) — hidden until focused. Injected as first body child by mea_brand.php. */
.mea-skip{position:absolute;left:-9999px;top:0;z-index:99999;background:#4F46E5;color:#fff;padding:10px 18px;border-radius:0 0 10px 0;font-weight:700;text-decoration:none}
.mea-skip:focus{left:0;outline:3px solid #A3C7FF;outline-offset:0}
html[dir="rtl"] .mea-skip{left:auto;right:-9999px;border-radius:0 0 0 10px}
html[dir="rtl"] .mea-skip:focus{right:0;left:auto}

/* 2026-07-13: hue-rotate illustration treatment REMOVED (produced pink/fuchsia; unpredictable). Illustrations render in their original colors. */

/* ===== MEA illustration identity ramp (2026-07-13) — recolor Lagom isometric SVGs to Indigo via
   native color vars, NO filters. Reversible: delete this block. Mode-independent (covers light+dark). ===== */
:root,.lagom-dark-mode,[data-theme="dark"],[data-theme="light"],body{
  --svg-illustration-color-0:#3730A3;--svg-illustration-color-1:#4F46E5;--svg-illustration-color-2:#6366F1;--svg-illustration-color-3:#818CF8;--svg-illustration-color-4:#A5B4FC;--svg-illustration-color-5:#C7D2FE;--svg-illustration-color-6:#E0E7FF;--svg-illustration-color-7:#FFFFFF;
  --dark-mode-svg-illustration-color-0:#3730A3;--dark-mode-svg-illustration-color-1:#4F46E5;--dark-mode-svg-illustration-color-2:#6366F1;--dark-mode-svg-illustration-color-3:#818CF8;--dark-mode-svg-illustration-color-4:#A5B4FC;--dark-mode-svg-illustration-color-5:#C7D2FE;--dark-mode-svg-illustration-color-6:#E0E7FF;--dark-mode-svg-illustration-color-7:#FFFFFF}
/* ===== end illustration ramp ===== */

/* ===== MEA hero swap (2026-07-13 v2): package 12-hero-scene as the banner illustration. Homepage
   banner only. Reversible: delete this block + assets/mea/hero-scene.svg. Does not touch header. ===== */
.site-banner.banner{position:relative}
.site-banner.banner .banner-graphic-background{position:absolute!important;left:0;right:0;bottom:0;top:auto!important;height:460px!important;
  background:url("/assets/mea/hero-scene.svg") no-repeat center bottom;
  background-size:min(760px,52%) auto;pointer-events:none;z-index:0}
.site-banner.banner .banner-graphic-background svg{display:none!important}
.site-banner.banner .container-banner,.site-banner.banner .banner-content{position:relative;z-index:1}
/* ===== end hero swap ===== */

/* ===== MEA service-card illustrations (2026-07-13): replace Lagom svg-*hosting with package SVGs.
   Reversible: delete block + assets/mea/svc-*.svg. ===== */
.package-graphic svg[class*="svg-sharedhosting"],.package-graphic svg[class*="svg-wordpresshosting"],.package-graphic svg[class*="svg-vpshosting"]{visibility:hidden!important;opacity:0!important}
.package-graphic:has(svg[class*="svg-sharedhosting"]){background:url("/assets/mea/svc-shared.svg") no-repeat center;background-size:contain}
.package-graphic:has(svg[class*="svg-wordpresshosting"]){background:url("/assets/mea/svc-wordpress.svg") no-repeat center;background-size:contain}
.package-graphic:has(svg[class*="svg-vpshosting"]){background:url("/assets/mea/svc-vps.svg") no-repeat center;background-size:contain}
/* ===== end service-card ===== */

/* ===== MEA icon identity ramp (2026-07-13): recolor Lagom svg-icon content icons to identity
   (Indigo/Electric/Violet), NO filters. Main stroke = visible indigo on Midnight. Reversible. ===== */
:root,.lagom-dark-mode,[data-theme="dark"],[data-theme="light"],body{
  --svg-icon-color-1:#4F46E5;--svg-icon-color-2:#3B82F6;--svg-icon-color-3:#818CF8;--svg-icon-color-4:#7C3AED;--svg-icon-color-5:#6366F1;
  --dark-mode-svg-icon-color-1:#4F46E5;--dark-mode-svg-icon-color-2:#3B82F6;--dark-mode-svg-icon-color-3:#818CF8;--dark-mode-svg-icon-color-4:#7C3AED;--dark-mode-svg-icon-color-5:#6366F1}
/* ===== end icon ramp ===== */