/* WordPress / Astra / Elementor / WooCommerce adaptations of the design in site.css. */

body,button,input,select,textarea,.elementor-widget,.elementor-button{font-family:"IBM Plex Sans Arabic",system-ui,sans-serif}
body{color:var(--text);background:#fff;font-size:16px;line-height:1.7}
a{color:inherit}
h1,h2,h3,h4,h5,h6{font-family:inherit;color:var(--ink)}
.ast-container{max-width:100%;padding:0}
#content,.site-content{padding:0}
.ast-separate-container .site-main>.ast-row{margin:0}

/* header: menu output + mobile drawer */
.site-nav .menu{display:flex;gap:4px;list-style:none;margin:0;padding:0}
.site-nav .menu a{display:block}
.drawer{display:none}
.drawer .menu{list-style:none;margin:0;padding:0}
.drawer .menu a{display:block;padding:12px 4px;font-weight:600;border-bottom:1px solid var(--line)}
@media (max-width:1000px){
  .drawer{position:absolute;inset-inline:0;top:100%;background:#fff;border-bottom:1px solid var(--line);padding:8px 20px 20px;box-shadow:0 20px 30px -20px rgba(31,21,48,.3)}
  .drawer .btn{width:100%;justify-content:center;margin-top:16px}
  .drawer-open .drawer{display:block}
}
.site-foot ul{margin:0;padding:0}
.site-foot .menu{list-style:none;margin:0;padding:0}
.site-foot .menu li{margin-bottom:8px}

/* ---------- Elementor widgets styled as the design ---------- */
.elementor-heading-title{line-height:1.35}
.elementor-widget-text-editor p:last-child{margin-bottom:0}
.elementor-widget-text-editor p{margin:0 0 12px}
h1.elementor-heading-title{font-size:clamp(32px,4.2vw,52px);line-height:1.3;font-weight:700;letter-spacing:-.5px}
h2.elementor-heading-title{font-size:clamp(26px,3vw,36px);font-weight:700}
h3.elementor-heading-title{font-size:19px;font-weight:700}
h4.elementor-heading-title{font-size:17px;font-weight:700}
.kicker .elementor-heading-title{color:var(--magenta);font-weight:600;font-size:14px;letter-spacing:.3px}
.kicker-light .elementor-heading-title{color:#ff8ad8}
.en .elementor-heading-title{font-size:13px;color:var(--muted);direction:ltr;text-align:right;font-weight:400}
.head-lead{max-width:480px;color:var(--muted)}
.lead-muted{color:var(--muted);font-size:17px}

/* buttons: .eb + variant on the widget wrapper */
.eb .elementor-button{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:10px;font-weight:600;font-size:15px;line-height:1.4;transition:transform .15s,box-shadow .15s,background .15s;fill:currentColor}
.eb .elementor-button:hover{transform:translateY(-1px)}
.eb .elementor-button-content-wrapper{gap:8px;align-items:center}
.eb .elementor-button-icon svg{width:18px;height:18px}
.eb-wa .elementor-button{background:var(--wa);color:#fff}
.eb-wa .elementor-button:hover{background:var(--wa);color:#fff;box-shadow:0 8px 20px -8px rgba(31,168,85,.6)}
.eb-ghost .elementor-button{background:transparent;border:1.5px solid rgba(255,255,255,.4);color:#fff}
.eb-ghost .elementor-button:hover{background:rgba(255,255,255,.08);color:#fff}
.eb-outline .elementor-button{background:transparent;border:1.5px solid var(--ink);color:var(--ink)}
.eb-outline .elementor-button:hover{background:var(--ink);color:#fff}
.eb-link .elementor-button{background:none;padding:0;margin-top:10px;color:var(--magenta);font-size:14px}
.eb-link .elementor-button:hover{background:none;color:var(--magenta-d);transform:none}
.eb-link .elementor-button-icon svg{width:14px;height:14px}

/* hero */
.e-con.hero{overflow:hidden;position:relative;color:#fff}
.e-con.hero>.e-con-inner{position:relative;z-index:1}
.hero h1.elementor-heading-title{color:#fff}
.hero h1.elementor-heading-title span{color:#f2a6dc}
.eyebrow .elementor-heading-title{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:400;color:#e6c9df;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);padding:6px 14px;border-radius:99px}
.eyebrow .elementor-heading-title::before{content:"";width:8px;height:8px;border-radius:50%;background:#f2a6dc}
.hero-lead{font-size:18px;color:#d9d1e4;max-width:560px}
.hero .stats{margin-top:30px}
.hero-art-col .elementor-widget-html{width:100%}
@media (max-width:620px){.hero-art-col{display:none}}

/* cards */
.e-con.sys{transition:border-color .2s,box-shadow .2s,transform .2s;background:#fff}
.e-con.sys:hover{border-color:transparent;box-shadow:0 20px 40px -20px rgba(61,43,89,.35);transform:translateY(-3px)}
.e-con.sys p,.e-con.value p,.e-con.step p{color:var(--muted);font-size:15px}
.e-con.step p{font-size:14px}
.ico .elementor-icon-wrapper{line-height:0}
.ico .elementor-icon{width:52px;height:52px;border-radius:12px;background:var(--soft);color:var(--magenta);fill:var(--magenta);display:grid;place-items:center;font-size:22px;margin-bottom:14px}
.e-con.value .ico .elementor-icon{background:var(--soft)}
.ico .elementor-icon svg{width:24px;height:24px}
.ico .elementor-widget-container{text-align:start}

/* process counter on Elementor containers */
.e-con.step{counter-increment:s}
.e-con:has(>.e-con.step),.e-con-inner:has(>.e-con.step){counter-reset:s}
.e-con.step::before{counter-increment:none;content:"0" counter(s);font-size:28px;font-weight:700;color:var(--magenta);display:block;margin-bottom:4px;line-height:1.2}

/* about / media tiles */
.media-tile img{width:100%;aspect-ratio:1/1;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.media-tile.tall{grid-row:span 2}
.media-tile.tall img{aspect-ratio:auto;height:100%}
.media-tile .elementor-widget-container,.media-tile.tall{height:100%}

/* dark branches section */
.branches-sec h2.elementor-heading-title{color:#fff}
.branches-sec .head-lead{color:#bdb2cc}

/* solutions */
.e-con.toc{position:sticky;top:84px;z-index:10;border-bottom:1px solid var(--line)}
.toc-links{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.toc-links a{white-space:nowrap;padding:8px 14px;border-radius:99px;font-size:14px;font-weight:500;border:1px solid var(--line)}
.toc-links a:hover{border-color:var(--magenta);color:var(--magenta)}
.e-con.sol{scroll-margin-top:150px;border-bottom:1px solid var(--line)}
.e-con.sol .checks{margin:14px 0 18px;padding:0}
.e-con.sol[style*="f6f3f9"] .checks li::before{background-color:#fff}
#more{scroll-margin-top:150px}
@media (max-width:620px){.e-con.toc{top:72px}}

/* page hero */
.e-con.page-hero{position:relative;overflow:hidden;color:#fff}
.e-con.page-hero>.e-con-inner{position:relative;z-index:1}
.page-hero h1.elementor-heading-title{color:#fff;font-size:clamp(28px,3.6vw,44px)}
.page-hero .crumbs{font-size:14px;color:#bdb2cc;margin:0}
.page-hero .crumbs a:hover{color:#fff}
.page-hero .hero-lead{font-size:17px;max-width:620px}

/* contact */
.info{margin:16px 0 0;padding:0}
.info .ico{width:46px;height:46px;border-radius:12px;background:#fff;color:var(--magenta);display:grid;place-items:center;font-size:18px;flex:none}
.wa-form{background:#fff}
.form-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.wa-form .btn svg{width:18px;height:18px}

/* brands strip from shortcode */
.brands .list a{font-size:22px;font-weight:700;color:#b7afc4;letter-spacing:.5px;transition:color .2s}
.brands .list a:hover{color:var(--plum)}

/* ---------- WooCommerce catalog ---------- */
.catalog-sec{padding:48px 0 88px}
.related-sec{padding:24px 0 88px}
.pd-sec{padding:48px 0}
.pd-crumbs .page-hero .wrap{padding-top:28px;padding-bottom:28px}
.products .prod .img img{width:auto;height:auto;max-height:100%;max-width:100%}
.prod h3 a:hover{color:var(--magenta)}
.fbox .fopt{display:flex;justify-content:space-between;align-items:center;padding:7px 0;font-size:14.5px;color:var(--text)}
.fbox .fopt span{display:flex;gap:10px;align-items:center}
.fbox .fopt i{width:16px;height:16px;border:1.5px solid #c9c2d4;border-radius:4px;flex:none;display:grid;place-items:center}
.fbox .fopt.on i{background:var(--magenta);border-color:var(--magenta)}
.fbox .fopt.on i::after{content:"";width:8px;height:4px;border:2px solid #fff;border-top:0;border-left:0;transform:rotate(45deg) translate(-1px,-1px);transform:rotate(-45deg)}
.fbox .fopt.on{color:var(--magenta);font-weight:600}
.fbox .fopt:hover{color:var(--magenta)}
.fbox.ltr-l .fopt span{direction:ltr}
.pager{display:flex;gap:6px;justify-content:center;margin-top:36px}
.pager .page-numbers{min-width:40px;height:40px;display:grid;place-items:center;border-radius:10px;border:1px solid var(--line);font-weight:600;padding:0 8px}
.pager .page-numbers.current{background:var(--ink);color:#fff;border-color:var(--ink)}
.pager a.page-numbers:hover{border-color:var(--ink)}
.empty{padding:40px;border:1px dashed var(--line);border-radius:var(--radius);text-align:center;color:var(--muted)}
.empty a{color:var(--magenta);font-weight:600}
.tags .tag:hover{background:var(--line)}
.gallery .main img{width:auto;max-width:100%;height:auto;max-height:100%}
.thumbs img{width:auto;height:auto;max-width:100%}
@media (max-width:1000px){
  .side.open{display:flex;margin-bottom:12px}
}

/* Astra leftovers on Woo pages */
.woocommerce-notices-wrapper:empty{display:none}

/* ---------- fixes after first render ---------- */
.site-content .ast-container{display:block}
.eyebrow{align-self:flex-start;width:auto!important}
.eyebrow .elementor-heading-title{display:inline-flex!important;width:auto}
.e-con.head>.e-con{--width:auto;flex:1 1 auto}
.e-con.head>.head-lead{--container-widget-width:auto;flex:0 1 480px}
@media (max-width:767px){.e-con.head>.head-lead{flex-basis:auto}}
.e-con.step::before{position:static;inset:auto;background:none;opacity:1;width:auto;height:auto}
.e-con .media-tile img{width:100%;aspect-ratio:1/1;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:none}
.e-con .media-tile.tall img{aspect-ratio:auto;height:100%}
.media-tile.tall .elementor-widget-container,.media-tile.tall>img{height:100%}
.info .ico svg{width:20px;height:20px}
.wa-form input,.wa-form select,.wa-form textarea{height:auto;line-height:1.5;font-size:15px;color:var(--text);box-shadow:none}
.wa-form select{padding:10px 12px;appearance:auto}
.e-con.sol .elementor-widget-text-editor{width:100%}
.elementor-widget.eyebrow{background:none;border:0;padding:0;display:block}
section.page-hero,section.catalog-sec,section.pd-sec,section.related-sec,section.cta{padding-inline:0}
section.page-hero{padding-block:0}
.page-hero h1,.cta-box h2,.branches-sec h2{color:#fff}
.menu-btn,.menu-btn:hover,.menu-btn:focus{color:var(--ink);background:#fff;padding:0;border:1px solid var(--line)}
.filter-btn,.filter-btn:hover{color:var(--ink);background:var(--soft);border:0}
/* product titles are Arabic + model code now */
.prod h3,.pd h1{direction:rtl;text-align:right}
.pd h1{font-size:28px;line-height:1.45}
.prod h3 bdi,.pd h1 bdi{display:inline-block;max-width:100%;overflow-wrap:anywhere}

/* ---------- contrast on dark backgrounds ---------- */
.br h3,.branches-sec h3{color:#fff}
.br .addr{color:#e2daec}
.br .phone{color:#fff}
.br{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16)}
.branches-sec .head-lead,.branches-sec .head-lead p{color:#e2daec}
.page-hero .crumbs,.page-hero .crumbs a,.page-hero .crumbs span{color:#e2daec}
.page-hero .hero-lead,.page-hero .hero-lead p,.page-hero p{color:#f1ecf6}
.hero-lead,.hero-lead p{color:#f1ecf6}
.stats span{color:#e2daec}
.eyebrow .elementor-heading-title{color:#fff;border-color:rgba(255,255,255,.25);background:rgba(255,255,255,.1)}
.cta-box p{color:#fff}
.site-foot{color:#ddd5e8}
.site-foot .copy{color:#c9bfd6}
.topbar{color:#e2daec}

/* "view all" style buttons: solid instead of thin outline */
.eb-outline .elementor-button{background:var(--magenta);border:0;color:#fff;padding:14px 28px;box-shadow:0 10px 24px -12px rgba(154,44,128,.7)}
.eb-outline .elementor-button:hover{background:var(--magenta-d);color:#fff}

/* brand logos */
.brands .list{gap:28px 44px;justify-content:flex-start}
.brands .list a{display:flex;align-items:center;height:44px}
.brands .list img{height:32px;width:auto;max-width:130px;object-fit:contain;filter:grayscale(1);opacity:.6;transition:filter .2s,opacity .2s}
.brands .list a:hover img{filter:none;opacity:1}
.tags{align-items:center}
.tag.tag-logo{background:#fff;border:1px solid var(--line);padding:6px 12px;display:inline-flex;align-items:center}
.tag.tag-logo img{height:22px;width:auto;max-width:110px;object-fit:contain}
@media (max-width:620px){.brands .list{gap:20px 28px}.brands .list img{height:26px}}

/* RTL: arrow icons point the other way */
.eb .elementor-button-icon svg[class*="arrow"],.eb .elementor-button-icon i[class*="arrow"]{transform:scaleX(-1)}

/* contact info icons (Elementor strips inline SVG from text widgets) */
.info .ico{position:relative}
.info .ico::before{content:"";width:20px;height:20px;background:var(--magenta);-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
.info li:nth-child(1) .ico{--i: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'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E")}
.info li:nth-child(2) .ico{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2Zm0 18.2a8.2 8.2 0 0 1-4.2-1.2l-.3-.2-3 .8.8-2.9-.2-.3A8.2 8.2 0 1 1 12 20.2Zm4.5-6.1c-.2-.1-1.5-.7-1.7-.8s-.4-.1-.6.1-.7.8-.8 1-.3.2-.5.1a6.7 6.7 0 0 1-3.3-2.9c-.3-.4.3-.4.7-1.4.1-.2 0-.3 0-.4l-.8-1.8c-.2-.5-.4-.4-.6-.4h-.5a1 1 0 0 0-.7.3 3 3 0 0 0-.9 2.2 5.2 5.2 0 0 0 1.1 2.7 11.8 11.8 0 0 0 4.5 4c1.7.7 2.3.8 3.2.6a2.7 2.7 0 0 0 1.8-1.3 2.2 2.2 0 0 0 .2-1.3c-.1-.1-.3-.2-.5-.3Z'/%3E%3C/svg%3E")}
.info li:nth-child(3) .ico{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 8h3V4h-3a4 4 0 0 0-4 4v2H8v4h2v8h4v-8h3l1-4h-4V8Z'/%3E%3C/svg%3E")}
.info .ico svg{display:none}
.specs ul{width:100%;margin:0;padding:0}

/* ---------- phone fixes ---------- */
.prod .btn{white-space:nowrap}
@media (max-width:620px){
  .topbar .wrap{min-height:34px;gap:8px;flex-wrap:nowrap;font-size:12.5px}
  .topbar .branches{gap:12px;flex-wrap:nowrap}
  .topbar .branches a[href^="mailto"]{display:none}
  .products{gap:10px}
  .prod .body{padding:10px}
  .prod h3{font-size:13.5px;line-height:1.5}
  .prod .meta{font-size:11.5px;flex-wrap:wrap;gap:2px 6px}
  .prod .btn{padding:9px 6px;font-size:13px;gap:5px}
  .prod .btn svg{width:15px;height:15px}
  .filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-16px;padding-inline:16px}
  .filters .chip{white-space:nowrap}
  .e-con:has(>.e-con.step),.e-con-inner:has(>.e-con.step){--e-con-grid-template-columns:repeat(2,1fr)!important;grid-template-columns:repeat(2,1fr)!important}
  .e-con.step{--padding-top:16px!important;--padding-bottom:16px!important;--padding-left:14px!important;--padding-right:14px!important}
  .e-con.step::before{font-size:22px}
  .e-con.sol{--padding-top:44px!important;--padding-bottom:44px!important;--gap:28px!important;--row-gap:28px!important}
  .e-con.sys{--padding-top:22px!important;--padding-bottom:22px!important;--padding-left:20px!important;--padding-right:20px!important}
  .ico .elementor-icon{margin-bottom:8px}
  .page-hero .wrap{padding-top:36px;padding-bottom:36px}
  .e-con.page-hero{--padding-top:36px!important;--padding-bottom:36px!important}
  .e-con.hero{--padding-top:44px!important;--padding-bottom:44px!important}
  .e-con:not(.hero):not(.page-hero):not(.sol):not(.toc)>.e-con-inner{--padding-top:0}
  .pd h1{font-size:22px}
  .catalog-sec{padding:28px 0 56px}
  .cta-box{transform:translateY(40%)}
}
.e-con.sol>.e-con-inner,.e-con.sol-more>.e-con-inner{padding-block:0}