/* PARTNERS HOME — design system v4
   Modern app-feel on mobile, rich on desktop. RTL Arabic. */

:root{
  --navy:#0b1f3a;
  --navy-2:#13325c;
  --gold:#c9a35b;
  --gold-2:#a98441;
  --ink:#101418;
  --muted:#5b6470;
  --paper:#fbf9f4;
  --line:#e7e3d8;
  --shadow:0 6px 20px rgba(11,31,58,.08);
  --shadow-lg:0 20px 40px rgba(11,31,58,.18);
  --radius:16px;
  --radius-sm:10px;
  --maxw:1200px;
  --header-h:60px;
  --bottom-nav-h:64px;
}

*,*::before,*::after{box-sizing:border-box;min-width:0}
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  overflow-x:hidden;
}
html,body{
  margin:0;padding:0;
  width:100%;max-width:100%;
  overflow-x:clip;
}
body{
  font-family:'Tajawal',system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial,sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  word-wrap:break-word;
  overflow-wrap:break-word;
  position:relative;
}
@media(max-width:780px){
  body{padding-bottom:var(--bottom-nav-h)}
}
img,svg,video{max-width:100%;display:block;height:auto}
a{color:var(--navy);text-decoration:none;transition:color .2s}
a:hover{color:var(--gold-2)}
h1,h2,h3,h4{font-weight:700;line-height:1.25;margin:0 0 .6em;color:var(--navy);word-wrap:break-word}
h1{font-size:clamp(1.6rem,5vw,2.6rem)}
h2{font-size:clamp(1.3rem,3.8vw,1.95rem)}
h3{font-size:clamp(1.05rem,2.5vw,1.18rem)}
p{margin:0 0 .9em}
button,input,select,textarea{font-family:inherit}

.container{max-width:var(--maxw);margin:0 auto;padding:0 1rem;width:100%}
@media(min-width:600px){.container{padding:0 1.25rem}}

.skip{position:absolute;inset-inline-start:-9999px}
.skip:focus{inset-inline-start:1rem;top:1rem;background:var(--navy);color:#fff;padding:.5rem 1rem;border-radius:8px;z-index:1000}

/* ============ HEADER ============ */
.site-header{
  position:sticky;top:0;z-index:50;
  background:#ffffff;
  border-bottom:1px solid var(--line);
  width:100%;
  height:var(--header-h);
  box-shadow:0 1px 0 rgba(0,0,0,.02);
}
@media(min-width:781px){
  .site-header{
    background:rgba(251,249,244,.96);
    backdrop-filter:saturate(180%) blur(10px);
  }
}
.nav-wrap{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 1rem;gap:.5rem;
  height:100%;
  max-width:var(--maxw);margin:0 auto;width:100%;
}
.brand{
  display:flex;align-items:center;gap:.55rem;
  font-weight:900;color:var(--navy);
  flex-shrink:1;min-width:0;
}
.brand-mark{
  display:inline-grid;place-items:center;flex-shrink:0;
  width:38px;height:38px;border-radius:10px;
  background:linear-gradient(135deg,var(--navy),var(--navy-2));
  color:var(--gold);font-weight:900;letter-spacing:.05em;font-size:.9rem;
  box-shadow:0 4px 10px rgba(11,31,58,.15);
}
.brand-name{
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-size:.85rem;letter-spacing:.01em;
}
.brand-name em{font-style:normal;color:var(--gold-2);font-weight:900}
/* Always show the full "PARTNERS HOME" — just shrink the font on very narrow screens */
.brand-name .partners-word{display:inline}
@media(min-width:420px){
  .brand-name{font-size:.95rem;letter-spacing:.02em}
}
@media(min-width:560px){
  .brand-name{font-size:1rem}
}

.main-nav{display:flex;gap:.2rem;align-items:center;flex-wrap:nowrap;min-width:0}
.main-nav a{
  padding:.45rem .5rem;border-radius:8px;font-weight:500;font-size:.9rem;color:#2a3340;
  white-space:nowrap;flex-shrink:0;
}
.main-nav a:hover{background:rgba(201,163,91,.12);color:var(--navy)}
.main-nav a.active{color:var(--gold-2);font-weight:700}
.main-nav .nav-cta{background:var(--navy);color:#fff !important;font-weight:700;margin-inline-start:.4rem}
.main-nav .nav-cta:hover{background:var(--navy-2);color:#fff !important}

/* Desktop layout safeguards: brand never shrinks/truncates, items never wrap */
@media (min-width:901px){
  .nav-wrap{flex-wrap:nowrap;gap:.75rem}
  .brand{flex-shrink:0}
  .brand-name{overflow:visible;text-overflow:clip}
}

/* Desktop: appliances filter always expanded (override <details> default) */
@media (min-width:781px){
  .filter-collapse > summary { display:none !important; }
  .filter-collapse > .filter-form { display:block !important; padding:0 !important; }
  .filter-collapse {
    background:transparent !important;border:0 !important;border-radius:0 !important;overflow:visible !important;
  }
}

.nav-toggle{display:none;background:transparent;border:0;cursor:pointer;flex-shrink:0}
.nav-toggle:active{background:rgba(11,31,58,.05)}

/* Cart link in the top nav */
.nav-cart{padding:.45rem .6rem;border-radius:8px;min-width:40px;min-height:40px;justify-content:center}
.nav-cart:hover{background:rgba(201,163,91,.12)}

/* Client dashboard greeting — base styles apply at ALL widths (were mobile-only → invisible text on desktop) */
.client-greeting{position:relative;background:linear-gradient(135deg,var(--navy),var(--navy-2));color:#fff;border-radius:18px;padding:1.25rem 1.5rem;margin-bottom:1.25rem}
.client-greeting h1{color:#fff;font-size:1.5rem;margin:0 0 .25rem}
.client-greeting p,.client-greeting .cg-sub{color:rgba(255,255,255,.85);margin:0}
.client-greeting .cg-logout{position:absolute;top:1.1rem;inset-inline-end:1.2rem;font-size:.78rem;font-weight:700;color:#fff;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);padding:.3rem .85rem;border-radius:99px;text-decoration:none;line-height:1.25}
.client-greeting .cg-logout:hover{background:rgba(255,255,255,.26)}

/* SMS settings status pill */
.status-pill{display:inline-block;border-radius:99px;padding:.15rem .6rem;font-weight:700;font-size:.8rem}
.status-pill.on{background:#dcfce7;color:#166534}
.status-pill.off{background:#fee2e2;color:#b91c1c}

/* Inline 2-col grids that should stack on phones */
@media(max-width:780px){.stack-mobile{grid-template-columns:1fr !important}}

@media (max-width:900px){
  .nav-toggle{display:flex}
  .main-nav{
    position:fixed;
    /* Cover the FULL viewport so the page header doesn't show through */
    inset:0;
    background:#fff;
    display:block;flex-wrap:nowrap;
    padding:0 0 calc(var(--bottom-nav-h) + 1rem);
    gap:0;
    transform:translateY(-110%);
    transition:transform .25s ease-out;
    overflow-y:auto;overflow-x:hidden;
    width:100%;max-width:100%;
    /* Above the page header */
    z-index:100;
  }
  body.nav-open{overflow:hidden}
  body.nav-open .main-nav{transform:translateY(0)}

  /* Menu's own top header — always visible inside the menu */
  .main-nav-header{
    position:sticky;top:0;z-index:1;
    display:flex;align-items:center;justify-content:space-between;
    height:var(--header-h);
    padding:0 1rem;
    background:#fff;
    border-bottom:1px solid var(--line);
    margin-bottom:.5rem;
  }
  .main-nav-header .brand{font-size:.95rem}
  .main-nav-header .nav-close{
    width:42px;height:42px;border-radius:10px;
    background:#f8f5ec;border:1px solid var(--line);
    display:grid;place-items:center;cursor:pointer;
    color:var(--navy);
    font-size:1.8rem;font-weight:900;line-height:1;
    font-family:Arial,sans-serif;
    padding:0;
  }
  .main-nav-header .nav-close:active{background:rgba(11,31,58,.06)}
  .main-nav-header .brand{flex-shrink:0}
  /* Brand inside the menu header must NOT inherit the menu-item icon/chevron pseudo-elements */
  .main-nav-header .brand::before,
  .main-nav-header .brand::after{display:none !important;content:none !important}
  /* Direct-child <a> only (the actual menu items, NOT the brand inside .main-nav-header) */
  .main-nav > a{
    display:flex;align-items:center;gap:.7rem;
    padding:.75rem 1rem;
    font-size:.88rem;font-weight:600;
    background:transparent;border:0;border-radius:0;
    border-bottom:1px solid var(--line);
    color:var(--navy);text-align:right;
    width:100%;
  }
  .main-nav > a:active{background:#f8f5ec}
  .main-nav > a.active{background:rgba(201,163,91,.12);color:var(--gold-2);font-weight:800;
    border-inline-start:3px solid var(--gold)}
  .main-nav > a::before{
    content:'';flex-shrink:0;width:30px;height:30px;border-radius:9px;
    background:#f6f1e3 var(--mnav-ico) center/16px 16px no-repeat;
    border:1px solid var(--line);
  }
  /* chevron arrow on the left (RTL "next" direction), drawn as SVG so it never flips */
  .main-nav > a::after{
    content:'';
    width:8px;height:14px;flex-shrink:0;
    margin-inline-start:auto;
    background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14' fill='none' stroke='%23999' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 1 1 7 6 13'/></svg>") center/contain no-repeat;
  }
  .main-nav a.nav-cta{
    display:flex;justify-content:center;
    margin:.75rem 1rem 0;
    background:linear-gradient(135deg,var(--navy),var(--navy-2));
    color:#fff !important;
    font-weight:800;font-size:.9rem;padding:.8rem;
    border:0;border-radius:12px;
    box-shadow:0 8px 20px rgba(11,31,58,.25);
    width:auto;
  }
  .main-nav a.nav-cta::before,.main-nav a.nav-cta::after{display:none}

  /* Per-link icons via SVG-encoded background-image */
  .main-nav > a[data-ico="home"]::before    {--mnav-ico:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b1f3a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12l9-8 9 8'/><path d='M5 10v10h14V10'/></svg>")}
  .main-nav > a[data-ico="kitchen"]::before {--mnav-ico:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b1f3a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 21V9l9-6 9 6v12'/><path d='M9 21V12h6v9'/></svg>")}
  .main-nav > a[data-ico="cabinet"]::before {--mnav-ico:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b1f3a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='3' width='16' height='18' rx='1'/><line x1='4' y1='12' x2='20' y2='12'/></svg>")}
  .main-nav > a[data-ico="appliance"]::before {--mnav-ico:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b1f3a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='4' width='16' height='16' rx='2'/><circle cx='12' cy='13' r='3'/></svg>")}
  .main-nav > a[data-ico="calc"]::before    {--mnav-ico:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b1f3a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='5' y='3' width='14' height='18' rx='2'/><line x1='9' y1='7' x2='15' y2='7'/></svg>")}
  .main-nav > a[data-ico="work"]::before    {--mnav-ico:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b1f3a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='14' rx='2'/><circle cx='9' cy='11' r='2'/><path d='M21 17l-5-5-8 8'/></svg>")}
  .main-nav > a[data-ico="how"]::before     {--mnav-ico:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b1f3a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2'/><rect x='9' y='3' width='6' height='4' rx='1'/><path d='M9 13l2 2 4-4'/></svg>")}
  .main-nav > a[data-ico="blog"]::before    {--mnav-ico:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b1f3a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 19V5a2 2 0 0 1 2-2h14v18H6a2 2 0 0 1-2-2z'/><line x1='8' y1='8' x2='16' y2='8'/><line x1='8' y1='12' x2='16' y2='12'/><line x1='8' y1='16' x2='12' y2='16'/></svg>")}
  .main-nav > a[data-ico="contact"]::before {--mnav-ico:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b1f3a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.12.93.34 1.84.66 2.7a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.38-1.23a2 2 0 0 1 2.11-.45c.86.32 1.77.54 2.7.66A2 2 0 0 1 22 16.92z'/></svg>")}
  .main-nav > a[data-ico="about"]::before   {--mnav-ico:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b1f3a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='8' x2='12' y2='13'/><circle cx='12' cy='16' r='.5'/></svg>")}
  .main-nav > a[data-ico="cart"]::before    {--mnav-ico:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b1f3a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='21' r='1'/><circle cx='20' cy='21' r='1'/><path d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/></svg>")}
  .main-nav > a[data-ico="install"]::before {--mnav-ico:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b1f3a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3v12'/><polyline points='7 10 12 15 17 10'/><path d='M5 21h14'/></svg>")}
  .main-nav > a.nav-install{ color:var(--gold-2); font-weight:800; }
  /* Cart row must read like every other drawer row: tile on the right + label,
     not an inline icon hugging the text, and the count as a clear inline pill. */
  .main-nav > a.nav-cart{ display:flex !important; gap:.7rem !important; }
  .main-nav > a.nav-cart > svg{ display:none !important; }
  .main-nav > a.nav-cart .cart-lbl{ font-weight:600; }
  .main-nav > a.nav-cart .nav-cart-badge{
    position:static !important; top:auto !important; inset-inline-start:auto !important;
    margin-inline-start:.45rem; box-shadow:none;
  }
}

/* ============ MOBILE BOTTOM NAV ============ */
.bottom-nav{
  display:none;
  position:fixed;bottom:0;left:0;right:0;z-index:48;
  background:#fff;
  border-top:1px solid var(--line);
  height:var(--bottom-nav-h);
  padding:.25rem 0 max(.25rem, env(safe-area-inset-bottom));
  box-shadow:0 -4px 12px rgba(11,31,58,.06);
}
@media(max-width:780px){
  .bottom-nav{display:grid;grid-template-columns:repeat(5,1fr)}
}
.bottom-nav a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.18rem;color:#6b7484;font-size:.7rem;font-weight:600;padding:.25rem;
}
.bottom-nav a svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bottom-nav a.active{color:var(--gold-2)}
.bottom-nav a.active svg{stroke:var(--gold-2)}
.bottom-nav .center-action{
  background:linear-gradient(135deg,var(--gold),var(--gold-2));color:#fff;
  border-radius:50%;width:54px;height:54px;
  align-self:center;justify-self:center;
  margin-top:-22px;box-shadow:0 10px 22px rgba(201,163,91,.45);
  font-size:0;
}
.bottom-nav .center-action svg{width:26px;height:26px;stroke:#fff;stroke-width:2.2}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.85rem 1.4rem;border-radius:12px;font-weight:700;
  border:1px solid transparent;cursor:pointer;
  transition:transform .15s, box-shadow .2s, background .2s;
  font-family:inherit;font-size:1rem;line-height:1;
  text-align:center;text-decoration:none;
}
.btn-primary{background:var(--navy);color:#fff}
.btn-primary:hover{background:var(--navy-2);color:#fff;transform:translateY(-1px);box-shadow:var(--shadow)}
.btn-gold{background:linear-gradient(135deg,var(--gold),var(--gold-2));color:#fff;box-shadow:0 6px 16px rgba(201,163,91,.35)}
.btn-gold:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(201,163,91,.45);color:#fff}
.btn-ghost{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn-ghost:hover{background:var(--navy);color:#fff}
.btn-wa{background:#25d366;color:#fff}
.btn-wa:hover{background:#1ebe5a;color:#fff}
.btn-sm{padding:.55rem 1rem;font-size:.88rem;border-radius:10px}
.btn-block{width:100%}
/* Inline button icons: hidden by default (desktop untouched); shown only on mobile (see media query). */
.btn-ico{display:none}

/* ============ HERO ============ */
.hero{
  position:relative;overflow:hidden;
  background-color:var(--navy);
  background-image:
    linear-gradient(135deg, rgba(11,31,58,.78) 0%, rgba(19,50,92,.65) 50%, rgba(11,31,58,.88) 100%),
    url('https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=1600&q=80&auto=format&fit=crop');
  background-size:cover;background-position:center;
  color:#fff;
  padding:2.5rem 0 3rem;
}
@media(min-width:780px){.hero{padding:4.5rem 0 5rem}}
.hero .container{position:relative;z-index:1}
.hero h1{color:#fff;margin-bottom:.5rem;font-weight:900;letter-spacing:-.01em}
.hero .slogan-en{
  display:inline-block;letter-spacing:.28em;color:var(--gold);font-weight:700;
  font-size:.72rem;margin-bottom:.6rem;
}
.hero p.lead{font-size:clamp(.95rem,2.3vw,1.1rem);color:#e9eef5;max-width:60ch;margin-bottom:1.3rem;opacity:.92}
.hero-cta{display:flex;gap:.55rem;flex-wrap:wrap}
@media(max-width:480px){
  .hero-cta .btn{flex:1 1 auto;min-width:0}
}

/* Quick app-style chip row */
.quick-chips{
  display:grid;grid-template-columns:repeat(4,1fr);gap:.45rem;
  background:#fff;border-radius:18px;padding:.75rem;
  box-shadow:var(--shadow-lg);
  margin-top:-1.75rem;position:relative;z-index:3;
  border:1px solid rgba(231,227,216,.6);
}
.quick-chips a{
  display:flex;flex-direction:column;align-items:center;gap:.4rem;
  padding:.65rem .25rem;border-radius:12px;color:var(--navy);
  font-size:.78rem;font-weight:700;text-align:center;line-height:1.2;
}
.quick-chips a:hover{background:rgba(201,163,91,.08)}
.quick-chips a:active{background:rgba(201,163,91,.14)}
.quick-chips .chip-ico{
  width:44px;height:44px;border-radius:13px;
  background:linear-gradient(135deg,#f6f1e3,#fff);
  display:grid;place-items:center;color:var(--gold-2);
  border:1px solid var(--line);
}
.quick-chips .chip-ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ============ SECTIONS ============ */
section.block{padding:2rem 0}
@media(min-width:780px){section.block{padding:3.5rem 0}}
.block-head{text-align:center;max-width:60ch;margin:0 auto 1.5rem}
.block-head p{color:var(--muted);font-size:.95rem;margin:0}
.eyebrow{
  display:inline-block;letter-spacing:.22em;font-size:.7rem;font-weight:700;
  color:var(--gold-2);margin-bottom:.4rem;text-transform:uppercase;
}

/* ============ STAT STRIP ============ */
.stat-strip{
  display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;
  background:linear-gradient(135deg,var(--navy),var(--navy-2));
  border-radius:var(--radius);padding:1.25rem 1rem;color:#fff;
}
@media(max-width:480px){.stat-strip{grid-template-columns:repeat(2,1fr);gap:.75rem;padding:1rem}}
.stat{text-align:center}
.stat .num{font-size:clamp(1.4rem,4.5vw,2rem);font-weight:900;color:var(--gold);line-height:1.1;display:block}
.stat .lbl{font-size:.82rem;color:#cdd5e0;display:block;margin-top:.15rem}

/* ============ CARDS ============ */
.card-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
@media(min-width:600px){.card-grid{gap:1.25rem}}
@media(max-width:380px){.card-grid{grid-template-columns:1fr}}

.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .2s, box-shadow .2s;
  width:100%;
}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.card-img{
  aspect-ratio:4/3;
  background:linear-gradient(135deg,#e8eef5,#f6f1e3);
  display:grid;place-items:center;color:var(--navy);font-weight:900;font-size:1.1rem;
  overflow:hidden;position:relative;
}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.card:hover .card-img img{transform:scale(1.05)}
.card-img.bg{background-size:cover;background-position:center}
.card-img.bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,31,58,0) 45%,rgba(11,31,58,.78));}
.card-img .label{position:absolute;bottom:.7rem;inset-inline-start:.85rem;color:#fff;font-size:1.05rem;font-weight:900;z-index:1;text-shadow:0 2px 8px rgba(0,0,0,.5)}
.card-body{padding:.95rem 1rem;display:flex;flex-direction:column;gap:.4rem;flex:1}
.card-body h3{margin:0;font-size:1.05rem}
.card-body p{color:var(--muted);margin:0;flex:1;font-size:.9rem;line-height:1.5}
.card-body .price{font-weight:900;color:var(--navy);font-size:1.05rem}
.card-body .btn{align-self:flex-start;margin-top:.4rem;width:auto}

/* Big "feature" card for mobile-prominent items */
.big-card{
  position:relative;border-radius:var(--radius);overflow:hidden;
  aspect-ratio:16/10;display:flex;align-items:flex-end;
  padding:1.25rem;color:#fff;background-size:cover;background-position:center;
  box-shadow:var(--shadow);
}
.big-card::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,31,58,0) 35%,rgba(11,31,58,.85));}
.big-card > *{position:relative;z-index:1}
.big-card h3{color:#fff;margin:0 0 .25rem;font-size:1.4rem}
.big-card p{color:#e9eef5;margin:0;font-size:.92rem;max-width:30ch}
.big-card .btn{margin-top:.75rem}

/* Horizontal scroll cards (mobile only) */
.scroll-row{
  display:grid;grid-auto-flow:column;grid-auto-columns:78%;gap:.85rem;
  overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:.75rem;
  margin:0 -1rem;padding-inline:1rem;
  -webkit-overflow-scrolling:touch;
}
.scroll-row > *{scroll-snap-align:start}
.scroll-row::-webkit-scrollbar{height:4px}
.scroll-row::-webkit-scrollbar-thumb{background:var(--line);border-radius:2px}
@media(min-width:780px){
  .scroll-row{display:grid;grid-auto-flow:row;grid-template-columns:repeat(3,1fr);grid-auto-columns:unset;overflow:visible;margin:0;padding:0;gap:1.25rem}
}

/* Features (compact strip) */
.features{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
@media(max-width:480px){.features{grid-template-columns:1fr 1fr;gap:.65rem}}
.feature{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:1.1rem .85rem;text-align:center;
}
.feature .ico{
  width:48px;height:48px;border-radius:14px;
  background:linear-gradient(135deg,var(--gold),var(--gold-2));
  color:#fff;display:grid;place-items:center;margin:0 auto .55rem;font-size:1.3rem;
}
.feature h3{font-size:.96rem;margin-bottom:.2rem}
.feature p{font-size:.82rem;color:var(--muted);margin:0;line-height:1.45}

/* Steps */
.steps-list{display:grid;gap:.55rem;grid-template-columns:1fr;max-width:560px;margin:0 auto}
@media(min-width:680px){.steps-list{grid-template-columns:1fr 1fr;max-width:none}}
.step{
  display:flex;gap:.75rem;align-items:flex-start;
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:.85rem;
}
.step-n{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--navy),var(--navy-2));color:var(--gold);
  display:grid;place-items:center;font-weight:900;font-size:.95rem;
}
.step h4{margin:0 0 .15rem;color:var(--navy);font-size:.96rem}
.step p{margin:0;color:var(--muted);font-size:.85rem;line-height:1.4}

/* ============ FORMS ============ */
.field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:.9rem}
.field label{font-weight:700;color:var(--navy);font-size:.92rem}
.field input, .field select, .field textarea{
  font-family:inherit;font-size:16px;
  padding:.75rem .85rem;
  border:1px solid var(--line);border-radius:10px;background:#fff;
  transition:border-color .15s, box-shadow .15s;width:100%;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,163,91,.18);
}
.field .hint{font-size:.82rem;color:var(--muted)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:640px){.grid-2{grid-template-columns:1fr}}

/* ============ CALCULATOR ============ */
.calc-shell{display:grid;grid-template-columns:1.4fr 1fr;gap:1.5rem;align-items:start}
@media (max-width:900px){.calc-shell{grid-template-columns:1fr;gap:1rem}}
.calc-panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.25rem}
@media(min-width:600px){.calc-panel{padding:1.5rem}}
.calc-summary{
  background:linear-gradient(135deg,var(--navy),var(--navy-2));
  color:#fff;border-radius:var(--radius);padding:1.25rem;
}
@media(min-width:900px){.calc-summary{position:sticky;top:calc(var(--header-h) + 16px);padding:1.5rem}}
.calc-summary h3{color:#fff}
.calc-line{display:flex;justify-content:space-between;padding:.5rem 0;border-bottom:1px dashed rgba(255,255,255,.15);font-size:.92rem;gap:.5rem}
.calc-line.total{font-size:1.3rem;font-weight:900;color:var(--gold);border:none;padding-top:1rem}
.calc-disclaimer{font-size:.85rem;color:#dbe2ec;margin-top:1rem;background:rgba(255,255,255,.08);padding:.75rem;border-radius:8px}

/* ============ TABLES ============ */
.table{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.table th,.table td{padding:.7rem .8rem;text-align:right;border-bottom:1px solid var(--line);font-size:.9rem}
.table th{background:var(--navy);color:#fff;font-weight:700;white-space:nowrap}
.table tbody tr:hover{background:#fafaf6}
.table tbody tr[data-href]:hover{background:#f5efdf;box-shadow:inset 3px 0 0 var(--gold)}

/* ============ BADGES ============ */
.badge{display:inline-flex;align-items:center;justify-content:center;padding:.3rem .65rem;border-radius:999px;font-size:.78rem;font-weight:700;background:#eef2f7;color:var(--navy);white-space:nowrap;line-height:1.2;vertical-align:middle;text-align:center}
.badge.new{background:#e3f6e7;color:#1f7a3b}
.badge.warn{background:#fdf1d9;color:#8a6310}
.badge.done{background:#d8f0ff;color:#0a558a}

/* ============ WHATSAPP FAB ============ */
.wa-fab{
  position:fixed;bottom:calc(var(--bottom-nav-h) + 12px);inset-inline-end:14px;z-index:55;
  width:52px;height:52px;border-radius:50%;background:#25d366;color:#fff;
  display:grid;place-items:center;box-shadow:0 12px 28px rgba(37,211,102,.4);
  transition:transform .2s;
}
@media(min-width:781px){.wa-fab{bottom:18px;inset-inline-end:18px;width:56px;height:56px}}
.wa-fab:hover{transform:scale(1.06);color:#fff}

/* ============ FOOTER ============ */
.site-footer{background:var(--navy);color:#cdd5e0;padding:2rem 0 1rem;margin-top:2rem}
@media(max-width:780px){.site-footer{padding:1.5rem 0 1rem;margin-top:1.5rem}}
.site-footer h4{color:#fff;font-size:1rem;margin-bottom:.6rem}
.site-footer a{color:#cdd5e0}
.site-footer a:hover{color:var(--gold)}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:1.5rem;margin-bottom:1.25rem}
@media (max-width:780px){.footer-grid{grid-template-columns:1fr 1fr;gap:1rem}}
@media (max-width:480px){.footer-grid{grid-template-columns:1fr;gap:1rem}}
.site-footer ul{list-style:none;padding:0;margin:0;line-height:1.9;font-size:.9rem}
.brand-block{display:flex;align-items:center;gap:.6rem;color:#fff;margin-bottom:.5rem;font-size:1.05rem}
.slogan{letter-spacing:.2em;color:var(--gold);font-weight:700;margin:.25rem 0 .75rem;font-size:.82rem}
.copyright{border-top:1px solid rgba(255,255,255,.1);padding-top:.75rem;color:#8b97a8;font-size:.85rem;text-align:center}

/* ============ UTILITIES ============ */
.text-center{text-align:center}
.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}.mt-4{margin-top:2.5rem}
.mb-1{margin-bottom:.5rem}.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.5rem}
.flex{display:flex}.flex-gap{gap:1rem}.center{align-items:center;justify-content:center}
.muted{color:var(--muted)}
.danger{color:#b8002a}
.tag{display:inline-block;padding:.2rem .6rem;background:var(--paper);border:1px solid var(--line);border-radius:999px;font-size:.78rem;color:var(--navy);margin-inline-end:.25rem}

/* ============ FILTERS ============ */
.filters{display:grid;grid-template-columns:240px 1fr;gap:1.5rem;align-items:start}
@media (max-width:780px){.filters{grid-template-columns:1fr;gap:1rem}}
.filter-panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.25rem}
@media(min-width:781px){.filter-panel{position:sticky;top:calc(var(--header-h) + 16px)}}
.filter-group{margin-bottom:1.25rem}
.filter-group h4{margin:0 0 .5rem;font-size:.95rem}
.chk{display:flex;align-items:center;gap:.5rem;padding:.25rem 0;font-size:.95rem;color:#2a3340;cursor:pointer}

/* ============ MOBILE-ONLY ENFORCEMENT ============ */
@media(max-width:780px){
  /* prevent any container from causing horizontal overflow */
  section, header, footer, main, div.container { max-width:100%; }
  .container[style*="grid-template-columns"]{grid-template-columns:1fr !important}
  /* Grid items default to min-width:auto, so an image can blow past its column
     (e.g. the product hero image overflowing left). Constrain children + image. */
  .container[style*="grid-template-columns"] > *{ min-width:0; }
  .container[style*="grid-template-columns"] .card-img{ width:100%; min-width:0; }
  .container[style*="grid-template-columns"] .card-img img{ max-width:100%; }
  /* tables get a scroll wrapper effect */
  .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* ============ VISIBILITY UTILITIES ============ */
@media(min-width:781px){
  .mobile-only{display:none !important}
}
@media(max-width:780px){
  .desktop-only{display:none !important}
}

/* ===================== MOBILE-ONLY POLISH (≤780px) ===================== */
@media(max-width:780px){

  /* Header toggle: 3-line icon + "القائمة" label */
  .nav-toggle{
    display:inline-flex;align-items:center;gap:.5rem;
    height:38px;padding:0 .65rem;
    background:#f8f5ec;border:1px solid var(--line);
    border-radius:10px;line-height:1;color:var(--navy);
  }
  .nav-toggle .bars{
    display:inline-flex;flex-direction:column;justify-content:center;gap:4px;
    width:18px;height:14px;flex-shrink:0;
  }
  .nav-toggle .bars > span{
    display:block;width:100%;height:2.2px;
    background:var(--navy);border-radius:2px;
    transition:transform .2s, opacity .2s;
  }
  .nav-toggle .lbl{font-size:.88rem;font-weight:700;color:var(--navy);white-space:nowrap}
  body.nav-open .nav-toggle .bars > span:nth-child(1){transform:translateY(6.2px) rotate(45deg)}
  body.nav-open .nav-toggle .bars > span:nth-child(2){opacity:0}
  body.nav-open .nav-toggle .bars > span:nth-child(3){transform:translateY(-6.2px) rotate(-45deg)}

  /* Hero icon-only WhatsApp button */
  .btn-wa-icon{
    width:48px;height:48px;border-radius:50%;background:#25d366;color:#fff;
    display:inline-grid;place-items:center;flex:0 0 auto;
    box-shadow:0 6px 14px rgba(37,211,102,.4);
  }
  .btn-wa-icon svg{width:24px;height:24px;fill:currentColor}

  /* ===== Services — modern photo cards (mobile) ===== */
  .svc-mobile{display:grid;gap:.85rem}
  .svc-card{
    position:relative;display:block;overflow:hidden;
    border-radius:18px;aspect-ratio:16/10;
    background-size:cover;background-position:center;
    box-shadow:0 8px 24px rgba(11,31,58,.12);
    text-decoration:none;
  }
  .svc-card::after{
    content:'';position:absolute;inset:0;
    /* Dark on RIGHT (where Arabic text sits), transparent on LEFT — stronger so text stays legible over any photo */
    background:linear-gradient(to left, rgba(11,31,58,.94) 0%, rgba(11,31,58,.68) 48%, rgba(11,31,58,.15) 100%);
  }
  .svc-body{
    position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
    /* extra padding on the LEFT to leave room for the chevron */
    padding:1.1rem 1.25rem 1.1rem 3.5rem;
    z-index:1;color:#fff;text-align:right;
    text-shadow:0 1px 5px rgba(0,0,0,.6);
  }
  .svc-body h3{color:#fff;margin:0 0 .3rem;font-size:1.25rem;font-weight:900}
  /* Higher specificity than the generic ".container p" content rule (which is dark) so
     this description stays white over the photo instead of being forced to #2b323b. */
  .svc-card .svc-body p{color:#fff;margin:0;font-size:.92rem;font-weight:500;line-height:1.5;max-width:74%;opacity:.97}
  .svc-arrow{
    position:absolute;top:50%;
    /* LEFT side in RTL */
    inset-inline-end:.85rem;
    transform:translateY(-50%);
    width:38px;height:38px;border-radius:50%;
    background:rgba(255,255,255,.18);backdrop-filter:blur(8px);
    display:grid;place-items:center;color:#fff;z-index:2;
  }
  .svc-arrow svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

  /* ===== Portfolio peek carousel (mobile) ===== */
  .peek-row{
    display:flex;gap:.85rem;
    overflow-x:auto;scroll-snap-type:x mandatory;
    padding:.5rem 12%;margin:0 -1rem;
    -webkit-overflow-scrolling:touch;scroll-behavior:smooth;
  }
  .peek-row::-webkit-scrollbar{display:none}
  .peek-row{scrollbar-width:none}
  .peek-card{
    flex:0 0 76%;scroll-snap-align:center;
    border-radius:18px;overflow:hidden;
    aspect-ratio:4/5;position:relative;
    background-size:cover;background-position:center;
    box-shadow:0 12px 30px rgba(11,31,58,.18);
    transform:scale(.95);transition:transform .35s ease, opacity .35s ease;
    opacity:.75;text-decoration:none;
  }
  .peek-card.is-active{transform:scale(1);opacity:1}
  .peek-card::after{
    content:'';position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(11,31,58,0) 50%,rgba(11,31,58,.85));
  }
  .peek-card .label{
    position:absolute;bottom:1rem;inset-inline-start:1rem;color:#fff;
    font-size:1.1rem;font-weight:900;z-index:1;text-shadow:0 2px 8px rgba(0,0,0,.5);
  }

  /* ===== Steps — 2-column compact timeline (mobile) ===== */
  .tl-compact{
    background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;
    display:grid;grid-template-columns:1fr 1fr;
  }
  .tl-item{
    display:flex;align-items:center;gap:.6rem;
    padding:.6rem .75rem;
    border-bottom:1px solid var(--line);
  }
  /* vertical divider between columns */
  .tl-item:nth-child(2n+1){border-inline-end:1px solid var(--line)}
  /* last row: drop bottom border */
  .tl-item:nth-last-child(-n+2){border-bottom:0}
  /* if odd total (e.g. 7), the last item spans both columns */
  .tl-item:last-child:nth-child(odd){grid-column:1 / -1;border-inline-end:0;border-bottom:0}
  .tl-n{
    flex-shrink:0;width:24px;height:24px;border-radius:50%;
    background:linear-gradient(135deg,var(--gold),var(--gold-2));color:#fff;
    display:grid;place-items:center;font-weight:900;font-size:.75rem;
  }
  .tl-item span.title{font-weight:700;color:var(--navy);font-size:.88rem;flex:1}
  .tl-item span.hint{color:var(--muted);font-size:.78rem}

  /* ===== Mobile CTA card ===== */
  .cta-mobile{
    background:linear-gradient(135deg,var(--navy),var(--navy-2));
    color:#fff;padding:1.5rem 1.25rem;border-radius:18px;text-align:center;
    box-shadow:0 12px 30px rgba(11,31,58,.2);
  }
  .cta-mobile h2{color:#fff;margin:0 0 .4rem;font-size:1.25rem;line-height:1.4}
  /* .block prefix raises specificity to (0,2,1) so this beats the global
     `.container p {color:#2b323b}` (0,1,1) that otherwise darkens it to invisibility on the navy card */
  .block .cta-mobile p{color:#dbe2ec;font-size:.9rem;margin:0 0 1rem}
  .cta-mobile-actions{display:flex;flex-direction:column;gap:.5rem}
  .cta-mobile-actions .btn{width:100%}

  /* ===== Compact mobile footer ===== */
  .site-footer{margin-top:1.25rem;padding:1rem 0 .75rem}
  .footer-grid{display:none}
  .footer-mini{display:block}
  .footer-mini .footer-brand-row{
    display:flex;align-items:center;justify-content:space-between;gap:.5rem;
    margin-bottom:.85rem;
  }
  .footer-mini .brand-block{margin:0;font-size:1rem}
  .footer-mini .map-btn{
    display:inline-flex;align-items:center;gap:.4rem;
    background:rgba(255,255,255,.08);color:#fff;
    padding:.5rem .75rem;border-radius:10px;
    font-size:.82rem;font-weight:700;
    border:1px solid rgba(255,255,255,.15);
  }
  .footer-mini .map-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .footer-mini .map-btn:hover{background:rgba(255,255,255,.14);color:#fff}
  .footer-mini .legal-links{
    display:flex;flex-wrap:wrap;justify-content:center;
    gap:.35rem .9rem;
    margin-top:.25rem;
  }
  .footer-mini .legal-links a{
    background:transparent;
    border:0;
    padding:0;border-radius:0;
    color:#cdd5e0;font-size:.85rem;font-weight:500;
    text-align:center;line-height:1.6;
  }
  .footer-mini .legal-links a:active,
  .footer-mini .legal-links a:hover{color:var(--gold);background:transparent}
  .copyright{margin-top:.85rem;padding-top:.65rem;font-size:.75rem}

  /* ===== Bottom nav: unified icons + active highlight ===== */
  .bottom-nav a{position:relative;color:#7a8595}
  .bottom-nav a svg{stroke-width:2;width:23px;height:23px}
  .bottom-nav a.active{color:var(--gold-2)}
  .bottom-nav a.active::before{
    content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
    width:24px;height:3px;border-radius:0 0 3px 3px;
    background:linear-gradient(135deg,var(--gold),var(--gold-2));
  }
  .bottom-nav a.active svg{stroke:var(--gold-2)}

  /* Hide the floating WhatsApp FAB on mobile — bottom nav already has WhatsApp */
  .wa-fab{display:none !important}
}

/* ════════════════════════════════════════════════════════════════
   COMPREHENSIVE MOBILE PAGE REDESIGN
   All rules below apply ONLY at mobile widths.
   Desktop layout is preserved entirely.
   ════════════════════════════════════════════════════════════════ */
@media (max-width:780px) {

  /* ===== Universal section/typography polish ===== */
  section.block { padding: 1.5rem 0; }
  .container { padding: 0 1rem; }
  h1 { font-size: 1.55rem; line-height:1.3; margin-bottom:.6rem; }
  h2 { font-size: 1.25rem; line-height:1.35; margin-bottom:.5rem; }
  h3 { font-size: 1.05rem; margin-bottom:.4rem; }
  p  { font-size: .95rem; line-height:1.65; }
  .block-head { margin-bottom: 1.25rem; }
  .block-head p { font-size:.9rem; }

  /* Hero (sub-pages): compact + photo dominant + better contrast */
  .hero { padding: 2.25rem 0 2.5rem !important; }
  .hero h1 { font-size: 1.4rem; }
  .hero .lead { font-size:.95rem; max-width:90%; }
  .hero .slogan-en { font-size:.7rem; letter-spacing:.22em; }

  /* Cards: single column on narrow phones, two on wider */
  .card-grid { gap:.85rem; grid-template-columns:1fr; }
  @media (min-width:420px) {
    .card-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
  }
  .card { border-radius: 16px; }
  .card-img { aspect-ratio: 16/11; }
  .card-body { padding: .85rem 1rem; }
  .card-body h3 { font-size: 1rem; }

  /* Forms: bigger touch targets, rounded modern look */
  .field { margin-bottom: .85rem; }
  .field label { font-size:.9rem; margin-bottom:.35rem; }
  .field input, .field select, .field textarea {
    padding:.85rem 1rem;
    border-radius:12px;
    background:#fff;
    border:1.5px solid var(--line);
    font-size:16px; /* prevent iOS zoom */
  }
  .field .hint { font-size:.78rem; }
  .grid-2 { gap:.75rem; }

  /* Buttons inside forms: full width, more prominent */
  form > .btn,
  form > button.btn { width:100%; padding:1rem; font-size:1rem; }
  .btn { padding:.85rem 1.25rem; }
  .btn-sm { padding:.55rem 1rem; font-size:.85rem; }

  /* Better-looking badges/tags */
  .badge { padding:.3rem .7rem; font-size:.75rem; }

  /* ===== Article / Legal pages typography ===== */
  .article-body, .container p { font-size:.95rem; line-height:1.8; color:#2b323b; }
  .container > h2 { margin-top:1.5rem; padding-bottom:.4rem; border-bottom:2px solid var(--line); }
  .container > h3 { color: var(--gold-2); font-size:1rem; margin-top:1.25rem; }
  .container > ul, .container > ol { padding-inline-start:1.25rem; line-height:1.85; }
  .container > ul li, .container > ol li { margin-bottom:.4rem; font-size:.92rem; }

  /* ===== Tables: convert to scrollable cards ===== */
  .table {
    font-size:.85rem;
    background:#fff;
    box-shadow:none;
    border:1px solid var(--line);
    border-radius:12px;
    overflow:hidden;
  }
  .table th, .table td { padding:.6rem .6rem; font-size:.85rem; }
  .table-wrap {
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    margin:0 -1rem; padding:0 1rem .5rem;
  }
  .table-wrap > .table { min-width:560px; }

  /* ===== Features grid (why-us etc): nice compact 2-col ===== */
  .features { grid-template-columns:1fr 1fr; gap:.6rem; }
  .feature { padding:1rem .65rem; border-radius:16px; }
  .feature .ico { width:42px; height:42px; }
  .feature h3 { font-size:.92rem; }
  .feature p { font-size:.78rem; }

  /* ===== AUTH PAGES (login / register / client login) ===== */
  body[class*="login"], body[class*="register"] { background: linear-gradient(180deg, var(--paper) 0%, #f1ece1 100%); }
  /* Login/register cards (admin too) */
  form[method="post"][action=""], section.block form[method="post"] {
    /* gentle defaults — page-specific styles take precedence */
  }
  .auth-shell {
    max-width:420px; margin:1.5rem auto;
    background:#fff; border-radius:20px; padding:1.5rem 1.25rem;
    box-shadow:0 16px 40px rgba(11,31,58,.08);
  }
  .auth-shell h1 { text-align:center; font-size:1.4rem; margin-bottom:.4rem; }
  .auth-shell .auth-sub { text-align:center; color:var(--muted); font-size:.9rem; margin-bottom:1rem; }

  /* ===== CONTACT PAGE polish ===== */
  .contact-info { background:#fff; border-radius:16px; padding:1.25rem; margin-top:1rem; }
  .contact-info p { margin:.5rem 0; }

  /* ===== FAQ accordion polish ===== */
  details {
    border-radius:14px !important;
    box-shadow:0 2px 8px rgba(11,31,58,.04);
    border-color:var(--line) !important;
  }
  details summary { padding:.95rem 1.1rem !important; font-size:.95rem !important; }
  details[open] { background:#fff !important; }

  /* ===== Step list / Timeline polish ===== */
  .steps-list { gap:.5rem; }
  .step { padding:.7rem; border-radius:14px; }

  /* ===== APPLIANCES page (filters) ===== */
  .filters { grid-template-columns:1fr; }
  .filter-panel {
    position:static !important;
    background:#fff;border-radius:14px;padding:1rem;
    margin-bottom:1rem;
  }
  .filter-panel > form {
    display:grid;grid-template-columns:1fr 1fr;gap:.6rem;
  }
  .filter-group { margin-bottom:.5rem; }
  .filter-group h4 { font-size:.8rem; color:var(--muted); margin-bottom:.3rem; }
  .filter-panel button.btn { grid-column:1/-1; }

  /* ===== CALCULATOR — sectioned step look ===== */
  .calc-panel { padding:0; background:transparent; border:0; }
  .calc-panel h3 {
    background:linear-gradient(135deg,var(--navy),var(--navy-2));
    color:var(--gold);
    margin:0 0 .85rem;
    padding:.7rem 1rem;
    border-radius:12px;
    font-size:.95rem;
    display:flex;align-items:center;gap:.5rem;
  }
  .calc-panel h3::before {
    content:'';width:8px;height:8px;border-radius:50%;background:var(--gold);
  }
  .calc-panel > .field, .calc-panel > .grid-2, .calc-panel > label.chk {
    background:#fff;border:1px solid var(--line);border-radius:12px;
    padding:1rem;margin-bottom:.85rem;
  }
  .calc-summary { border-radius:18px; padding:1.25rem; }
  .calc-summary h3 { font-size:1.05rem; }

  /* ===== PORTFOLIO grid: 2-col compact ===== */
  body[class*="portfolio"] .card-grid,
  section .card-grid { /* fallback */ }
  .portfolio-grid { display:grid;grid-template-columns:1fr 1fr;gap:.6rem; }

  /* ===== BLOG cards ===== */
  .blog-card { display:block; }

  /* ===== Client dashboard ===== */
  .client-greeting {
    background:linear-gradient(135deg,var(--navy),var(--navy-2));
    color:#fff;border-radius:18px;padding:1.25rem;margin-bottom:1rem;
  }
  .client-greeting h1 { color:#fff;font-size:1.3rem;margin-bottom:.25rem; }

  /* ===== ADMIN MOBILE LAYOUT ===== */
  .admin-shell {
    display:block !important;
    grid-template-columns:1fr !important;
    min-height:auto !important;
  }
  .admin-main {
    padding:.9rem !important;
    background:var(--paper);
    padding-bottom:5rem !important;
  }
  .admin-header {
    display:flex;align-items:center;justify-content:space-between;
    background:#fff;
    margin:-.9rem -.9rem .9rem;
    padding:.75rem .9rem;
    border-bottom:1px solid var(--line);
    position:sticky;top:0;z-index:50;
    flex-wrap:nowrap;gap:.5rem;
  }
  .admin-header h1 { font-size:1.05rem;margin:0;color:var(--navy); }
  .admin-header > div { font-size:.75rem;color:var(--muted); }

  /* Drawer: side slides in from the start edge (right in RTL) */
  .admin-side {
    position:fixed !important;
    top:0;right:0;bottom:0;
    width:78%;max-width:320px;
    padding:1rem !important;
    z-index:1000;
    transform:translateX(100%);
    transition:transform .25s ease-out;
    overflow-y:auto;
    box-shadow:-10px 0 30px rgba(0,0,0,.25);
    /* Make sure all interactions inside the drawer work normally */
    pointer-events:auto;
  }
  body.admin-drawer-open .admin-side { transform:translateX(0); }
  /* Explicit backdrop element (more reliable than ::before for stacking) */
  .admin-backdrop {
    display:none;
    position:fixed;inset:0;
    background:rgba(0,0,0,.5);
    z-index:900;
  }
  body.admin-drawer-open .admin-backdrop { display:block; }
  body.admin-drawer-open { overflow:hidden; }
  .admin-side .brand { margin-bottom:1.5rem; }
  .admin-side nav .sec { font-size:.7rem; margin:1rem .5rem .25rem; }
  .admin-side nav a {
    padding:.7rem .8rem;font-size:.9rem;margin-bottom:.15rem;
    border-radius:10px;
  }
  .admin-side nav a:hover, .admin-side nav a.active {
    background:rgba(255,255,255,.12);
  }

  /* Admin drawer toggle button (shows only on mobile) */
  .admin-drawer-toggle {
    display:inline-flex !important;align-items:center;gap:.4rem;
    background:#f8f5ec;border:1px solid var(--line);
    padding:.4rem .7rem;border-radius:10px;
    color:var(--navy);font-weight:700;font-size:.85rem;
    line-height:1;cursor:pointer;
  }
  .admin-drawer-toggle .bars{
    display:inline-flex;flex-direction:column;justify-content:center;gap:3px;
    width:16px;height:12px;
  }
  .admin-drawer-toggle .bars span{
    display:block;width:100%;height:2px;background:var(--navy);border-radius:2px;
  }

  /* Admin: cards/forms/details get nicer treatment */
  .admin-main > form, .admin-main > .card, .admin-main details {
    border-radius:14px;
  }
  /* Stats tiles on admin dashboards: compact 3-col strip */
  .admin-main .features { grid-template-columns:1fr 1fr 1fr; gap:.45rem; margin-bottom:.85rem; }
  .admin-main .features .feature { padding:.6rem .35rem; border-radius:12px; }
  .admin-main .features .feature .ico { width:32px;height:32px;font-size:.95rem;margin-bottom:.35rem }
  .admin-main .features .feature h3 { font-size:.95rem; margin:0 0 .15rem }
  .admin-main .features .feature p { font-size:.7rem; line-height:1.3 }

  /* Admin: stack form rows */
  .admin-main .grid-2 { grid-template-columns:1fr; gap:.5rem; }

  /* ════════════════════════════════════════════════════════
     ADMIN TABLES → cards on mobile (default)
     Editable tables (pricing/notifications) use this — each cell on its own line.
     ════════════════════════════════════════════════════════ */
  .admin-main .table {
    background:transparent !important;
    box-shadow:none !important;
    border:0 !important;
    overflow:visible !important;
    display:block !important;
    width:100% !important;
    min-width:0 !important;
  }
  /* A table marked .desktop-only must actually hide on mobile. The rule above
     (.admin-main .table → display:block!important, specificity 0,2,0) outranks the
     plain .desktop-only utility (0,1,0), so it was overriding it and BOTH the old
     table and the new mobile cards rendered (visible duplication, and الطلبات
     المتعاقدة looked unfixed). This higher-specificity rule (0,3,0) wins it back. */
  .admin-main .table.desktop-only { display:none !important; }
  .admin-main .adm-cards { display:flex !important; }
  .admin-main .table thead { display:none !important; }
  .admin-main .table tbody { display:block !important; }
  .admin-main .table tbody tr {
    display:block !important;
    background:#fff !important;
    border:1px solid var(--line) !important;
    border-radius:10px !important;
    margin-bottom:.4rem !important;
    padding:.55rem .75rem !important;
    box-shadow:0 1px 3px rgba(11,31,58,.04);
  }
  /* Inline edit/detail rows toggled via inline display:none must STAY hidden on mobile
     (the card-conversion above would otherwise force every row visible). Covers both the
     raw "display:none" markup and the JS-serialized "display: none". */
  .admin-main .table tbody tr[style*="display:none"],
  .admin-main .table tbody tr[style*="display: none"] {
    display:none !important;
    border:0 !important; margin:0 !important; padding:0 !important; box-shadow:none !important; background:transparent !important;
  }
  .admin-main .table tbody td {
    display:flex !important;
    align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.4rem;
    padding:.3rem 0 !important;
    border:0 !important;
    border-bottom:1px dashed var(--line) !important;
    font-size:.82rem !important;
    text-align:right !important;
    min-height:auto !important;
    line-height:1.4;
  }
  .admin-main .table tbody td:last-child { border-bottom:0 !important; padding-bottom:0 !important; }
  .admin-main .table tbody td:first-child {
    font-weight:800;color:var(--navy);
    font-size:.92rem !important;
    padding:0 0 .4rem !important;
    margin-bottom:.2rem !important;
    border-bottom:1.5px solid var(--line) !important;
  }
  .admin-main .table tbody td form,
  .admin-main .table tbody td select,
  .admin-main .table tbody td input { width:100%; }
  .admin-main .table tbody td form select { width:auto; flex:1 }

  /* ════════════════════════════════════════════════════════
     ULTRA-COMPACT LIST TABLES (mobile)
     Add class="table compact" to lists where each row is just title + action.
     Used by: dashboard recent orders, leads, orders, clients, staff.
     ════════════════════════════════════════════════════════ */
  .admin-main .table.compact tbody tr {
    display:flex !important;
    align-items:center;gap:.5rem;
    padding:.5rem .7rem !important;
    margin-bottom:.3rem !important;
  }
  .admin-main .table.compact tbody td {
    display:none !important;
    border:0 !important;
    padding:0 !important;
    margin:0 !important;
    font-size:.78rem !important;
    text-align:right !important;
  }
  /* Show first 2 cells (id + name/title) + last cell (action) */
  .admin-main .table.compact tbody td:nth-child(1) {
    display:inline-flex !important;flex:0 0 auto;
    background:var(--paper);
    padding:.18rem .45rem !important;
    border-radius:6px !important;
    color:var(--muted);font-weight:700;font-size:.72rem !important;
  }
  .admin-main .table.compact tbody td:nth-child(2) {
    display:flex !important;flex:1;min-width:0;
    font-weight:700;color:var(--navy);font-size:.85rem !important;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    line-height:1.3;
  }
  .admin-main .table.compact tbody td:last-child {
    display:inline-flex !important;flex:0 0 auto;gap:.25rem;
  }
  .admin-main .table.compact tbody td:last-child .btn {
    padding:.3rem .55rem !important;
    font-size:.72rem !important;
    border-radius:7px !important;
  }
  /* For tables where last cell has multiple action forms — keep them tiny */
  .admin-main .table.compact tbody td:last-child form { margin:0; }
  .admin-main .table.compact tbody td:last-child button {
    padding:.3rem .55rem !important;
    font-size:.72rem !important;
    border-radius:7px !important;
  }
  /* If table has ONLY 4-5 cells where 2nd is short, also show 3rd (status/badge) */
  .admin-main .table.compact.show-status tbody td:nth-last-child(2),
  .admin-main .table.compact.show-status tbody td:nth-child(3) {
    display:inline-flex !important;flex:0 0 auto;
  }

  /* ============ FILTER TABS (مفتوحة/الأرشيف/الكل) ============ */
  /* Inside admin-main, top row of filter tab buttons becomes a compact pill bar */
  .admin-main > div > a.btn,
  .admin-main > div > form a.btn {
    padding:.3rem .55rem !important;
    font-size:.72rem !important;
    border-radius:7px !important;
    line-height:1;
    height:auto;
  }
  /* Constrain the tab row so it doesn't take an entire stripe of the screen */
  .admin-main > div:has(> a.btn) {
    display:flex;flex-wrap:wrap;gap:.3rem !important;margin-bottom:.6rem !important;
  }
  /* Specifically the "+ إضافة طلب يدوي" gold CTA next to filter tabs stays compact */
  .admin-main > div > a.btn.btn-gold,
  .admin-main > div > a.btn.btn-primary {
    padding:.35rem .65rem !important;
    font-size:.75rem !important;
  }

  /* "Saved" success badge that appears at top — shrink too */
  .admin-main > div.badge.new {
    padding:.4rem .65rem !important;
    font-size:.78rem !important;
    margin-bottom:.5rem !important;
  }

  /* Filter status dropdown in leads.php (form at top) */
  .admin-main > form.mb-2 select,
  .admin-main > form > label > select {
    padding:.35rem .5rem !important;
    font-size:.8rem !important;
  }

  /* ═══════════════════════════════════════════════════════
     ORDER DETAIL PAGE — Tab navigation (mobile)
     ═══════════════════════════════════════════════════════ */
  .ord-tabs {
    display:flex;overflow-x:auto;gap:.3rem;
    background:#fff;padding:.4rem;border-radius:12px;
    margin-bottom:.65rem;
    border:1px solid var(--line);
    -webkit-overflow-scrolling:touch;
    box-shadow:0 1px 3px rgba(11,31,58,.04);
  }
  .ord-tabs::-webkit-scrollbar { display:none; }
  .ord-tabs { scrollbar-width:none; }
  .ord-tabs a {
    padding:.5rem .85rem;
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:9px;
    font-size:.82rem;font-weight:700;
    color:var(--navy);
    white-space:nowrap;flex-shrink:0;
    text-decoration:none;
    transition:background .15s, color .15s;
  }
  .ord-tabs a:active { background:rgba(201,163,91,.18); }
  .ord-tabs a.active {
    background:linear-gradient(135deg,var(--navy),var(--navy-2));
    color:#fff;border-color:var(--navy);
  }
  /* Hide all data-section by default; JS shows .ord-active */
  [data-section] { display:none !important; }
  [data-section].ord-active { display:block !important; }

  /* The 2-col grid inside the order page must stack on mobile */
  .ord-grid { grid-template-columns:1fr !important; gap:.5rem !important; }
  /* Defensive: any inline 2-col grid inside admin-main becomes 1-col on mobile */
  .admin-main [style*="grid-template-columns:1fr 1fr"],
  .admin-main [style*="grid-template-columns:1.2fr 1fr"],
  .admin-main [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Compact the forms inside the order page */
  .admin-main .ord-grid form.card,
  .admin-main .ord-grid .card {
    padding:1rem !important;
    border-radius:12px;
    margin-bottom:.6rem !important;
  }
  .admin-main .ord-grid form.card h3,
  .admin-main .ord-grid .card h3 {
    font-size:1rem;margin:0 0 .65rem;
  }
  .admin-main .ord-grid .field { margin-bottom:.55rem; }
  .admin-main .ord-grid .field label { font-size:.82rem;margin-bottom:.3rem; }
  .admin-main .ord-grid .field input,
  .admin-main .ord-grid .field select,
  .admin-main .ord-grid .field textarea {
    padding:.55rem .7rem;font-size:.92rem;
  }
  .admin-main .ord-grid label.chk { font-size:.85rem;padding:.3rem 0; }
  .admin-main .ord-grid form button.btn {
    width:100%;padding:.65rem;font-size:.9rem;margin-top:.4rem;
  }

  /* Stage navigation card stays sticky-ish, smaller */
  .admin-main .stage-nav {
    padding:.7rem .85rem !important;
    margin-bottom:.6rem !important;
  }
  .admin-main .stage-nav strong { font-size:.88rem; }
  .admin-main .stage-nav select {
    padding:.45rem .55rem !important;font-size:.85rem;flex:1;
  }

  /* Chat panel compact + better message bubbles */
  .admin-main [data-section="chat"] > div[style*="max-height"] {
    max-height:55vh !important;
  }


  /* ===== 404 PAGE ===== */
  .page-404 { padding:3rem 1rem;text-align:center; }
  .page-404 .big { font-size:5rem;color:var(--gold);font-weight:900;margin:0; }

  /* ===== Hero subpage variants: smaller padding ===== */
  section.hero.subpage { padding: 2rem 0 2.25rem !important; }

  /* ════════════════════════════════════════════════════════════════
     PAGE-SPECIFIC POLISH
     ════════════════════════════════════════════════════════════════ */

  /* ===== Kitchens / Cabinets product cards — uniform + beautiful ===== */
  /* Each card same aspect, fixed text height, clear price badge */
  body section.block .card {
    border-radius:18px;overflow:hidden;
    box-shadow:0 6px 18px rgba(11,31,58,.08);
    border-color:transparent;
  }
  body section.block .card-img.bg { aspect-ratio: 4/3; }
  body section.block .card-img.bg .label {
    bottom:.7rem;inset-inline-start:.85rem;
    font-size:1.15rem;font-weight:900;
    text-shadow:0 2px 12px rgba(0,0,0,.6);
  }
  body section.block .card-body {
    padding:.95rem 1rem 1rem;display:flex;flex-direction:column;gap:.5rem;
  }
  body section.block .card-body h3 { font-size:1.02rem;margin:0; }
  body section.block .card-body p {
    color:var(--muted);font-size:.85rem;margin:0;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden;line-height:1.5;
  }
  body section.block .card-body .price {
    display:inline-block;background:#f8f5ec;color:var(--navy);
    padding:.35rem .65rem;border-radius:8px;font-size:.85rem;font-weight:800;
    align-self:flex-start;
  }
  body section.block .card-body .btn {
    width:100%;padding:.7rem;font-size:.9rem;margin-top:.25rem;border-radius:10px;
  }

  /* ===== APPLIANCES filter: collapsible + compact ===== */
  .filter-panel { background:transparent;border-radius:0;padding:0;margin-bottom:1rem; }
  .filter-collapse {
    background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;
  }
  .filter-collapse > summary {
    display:flex;align-items:center;justify-content:space-between;gap:.5rem;
    padding:.75rem 1rem;cursor:pointer;font-weight:700;color:var(--navy);font-size:.9rem;
    list-style:none;
  }
  .filter-collapse > summary::-webkit-details-marker{display:none}
  .filter-collapse > summary::after{
    content:'▾';margin-inline-start:auto;color:var(--muted);transition:transform .2s;
  }
  .filter-collapse[open] > summary{border-bottom:1px solid var(--line)}
  .filter-collapse[open] > summary::after{transform:rotate(180deg)}
  .filter-collapse .filter-form {
    display:grid;grid-template-columns:1fr 1fr;gap:.5rem;
    padding:.85rem;
  }
  .filter-collapse .filter-group { margin:0; }
  .filter-collapse .filter-group h4 {
    margin:0 0 .25rem;font-size:.72rem;color:var(--muted);
    text-transform:uppercase;letter-spacing:.05em;font-weight:700;
  }
  .filter-collapse .filter-group select,
  .filter-collapse .filter-group input {
    padding:.5rem .6rem !important;font-size:.85rem !important;
    border-radius:8px !important;border:1px solid var(--line) !important;
    width:100% !important;background:#fafaf6;
  }
  .filter-collapse .filter-group .grid-2 { gap:.4rem; }
  .filter-collapse .filter-form button.btn {
    grid-column:1 / -1;margin-top:.25rem;width:100%;padding:.7rem;font-size:.9rem;
    border-radius:10px;
  }

  /* ===== CALCULATOR — compact form, 2-col where possible ===== */
  .calc-shell { gap:.75rem; }
  .calc-panel { background:transparent;border:0;padding:0; }
  .calc-panel h3 {
    background:linear-gradient(135deg,var(--navy),var(--navy-2));
    color:#fff;
    margin:.85rem 0 .55rem;padding:.6rem .85rem;
    border-radius:10px;font-size:.92rem;
    display:flex;align-items:center;gap:.5rem;
  }
  .calc-panel h3:first-child { margin-top:0; }
  .calc-panel h3::before {
    content:'';width:6px;height:6px;border-radius:50%;background:var(--gold);
  }
  .calc-panel .field,
  .calc-panel .grid-2,
  .calc-panel > label.chk {
    background:#fff;border:1px solid var(--line);border-radius:10px;
    padding:.65rem .8rem;margin-bottom:.45rem;
  }
  .calc-panel .field { margin-bottom:.45rem; }
  .calc-panel .field label { font-size:.85rem;margin-bottom:.25rem; }
  .calc-panel .field input,
  .calc-panel .field select,
  .calc-panel .field textarea {
    padding:.55rem .7rem;font-size:15px;border-radius:8px;
  }
  .calc-panel .grid-2 { display:grid;grid-template-columns:1fr 1fr;gap:.5rem;padding:.5rem; }
  .calc-panel .grid-2 .field {
    background:transparent;border:0;padding:0;margin:0;
  }
  /* Accessory rows: 2-col with name+price + qty */
  .calc-panel .grid-2 + .grid-2 { margin-top:.45rem; }
  .calc-panel label.chk { display:flex;align-items:center;gap:.5rem;font-size:.88rem;font-weight:600 }

  .calc-summary { padding:1rem;border-radius:14px; }
  .calc-summary h3 { font-size:1rem;margin-bottom:.6rem; }
  .calc-line { padding:.4rem 0;font-size:.85rem; }
  .calc-line.total { font-size:1.15rem;padding-top:.65rem }
  .calc-disclaimer { font-size:.75rem;margin-top:.6rem;padding:.55rem; }

  /* ===== CONTACT CHANNELS — mobile-specific tweaks only ===== */
  .contact-info { padding:0;background:transparent;border:0; }
  .contact-info h2 { margin:0 0 .65rem;font-size:1.05rem; }
}

/* ===== SOCIAL CLUSTER — organic floating bubbles in bottom corner (desktop only) =====
   Idle: bubbles overlap tightly with varied sizes + lateral offset → looks like a real cluster.
   Each bubble floats gently with its own delay/duration (independent rhythm).
   Hover the cluster: bubbles fan out + grow uniform so they're easy to pick. */
.social-cluster {
  position:fixed;
  bottom:22px;
  inset-inline-end:22px;
  z-index:55;
  display:flex;
  flex-direction:column-reverse; /* first child sits at the bottom (closest to corner) */
  align-items:center;
  gap:0;
  pointer-events:auto;
}
.social-cluster .sc-item {
  width:var(--social-size,32px);
  height:var(--social-size,32px);
  border-radius:50%;
  display:grid;place-items:center;
  text-decoration:none;
  color:var(--gold);
  background:rgba(255,255,255,.85);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  border:1.5px solid var(--gold);
  box-shadow:0 4px 10px rgba(11,31,58,.18),
             inset 0 -3px 6px rgba(11,31,58,.06),
             inset 0 2px 4px rgba(255,255,255,.7);
  margin-bottom:calc(var(--social-size,32px) * -0.58); /* tight overlap */
  animation: bubble-float 5s ease-in-out infinite;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1),
              margin-bottom .35s cubic-bezier(.34,1.56,.64,1),
              width .35s cubic-bezier(.34,1.56,.64,1),
              height .35s cubic-bezier(.34,1.56,.64,1),
              background .25s ease, color .25s ease,
              box-shadow .25s ease, border-color .25s ease;
}
.social-cluster .sc-item:first-child { margin-bottom:0; }
.social-cluster .sc-item svg {
  width:55%;
  height:55%;
  display:block;
  fill:currentColor;
}

/* Organic variation: vary size + lateral offset by position → looks hand-clustered */
.social-cluster .sc-item:nth-child(1)  { width:calc(var(--social-size,32px) * 1.08); height:calc(var(--social-size,32px) * 1.08); transform:translateX(0); animation-delay:-.2s;  animation-duration:5.2s }
.social-cluster .sc-item:nth-child(2)  { width:calc(var(--social-size,32px) * 0.92); height:calc(var(--social-size,32px) * 0.92); transform:translateX(-5px);  animation-delay:-1.0s; animation-duration:4.6s }
.social-cluster .sc-item:nth-child(3)  { width:calc(var(--social-size,32px) * 1.05); height:calc(var(--social-size,32px) * 1.05); transform:translateX(6px);   animation-delay:-2.3s; animation-duration:5.6s }
.social-cluster .sc-item:nth-child(4)  { width:calc(var(--social-size,32px) * 0.86); height:calc(var(--social-size,32px) * 0.86); transform:translateX(-7px);  animation-delay:-.7s;  animation-duration:4.2s }
.social-cluster .sc-item:nth-child(5)  { width:calc(var(--social-size,32px) * 1.02); height:calc(var(--social-size,32px) * 1.02); transform:translateX(4px);   animation-delay:-3.1s; animation-duration:5.8s }
.social-cluster .sc-item:nth-child(6)  { width:calc(var(--social-size,32px) * 0.94); height:calc(var(--social-size,32px) * 0.94); transform:translateX(-3px);  animation-delay:-1.6s; animation-duration:4.8s }
.social-cluster .sc-item:nth-child(7)  { width:calc(var(--social-size,32px) * 1.06); height:calc(var(--social-size,32px) * 1.06); transform:translateX(7px);   animation-delay:-2.7s; animation-duration:5.4s }
.social-cluster .sc-item:nth-child(8)  { width:calc(var(--social-size,32px) * 0.90); height:calc(var(--social-size,32px) * 0.90); transform:translateX(-6px);  animation-delay:-.4s;  animation-duration:5.0s }
.social-cluster .sc-item:nth-child(9)  { width:calc(var(--social-size,32px) * 1.00); height:calc(var(--social-size,32px) * 1.00); transform:translateX(3px);   animation-delay:-2.0s; animation-duration:5.2s }

@keyframes bubble-float {
  0%, 100% { translate: 0 0; }
  25%      { translate: -2px -3px; }
  50%      { translate: 1px -5px; }
  75%      { translate: 2px -2px; }
}

/* Cluster hover → fan out + uniform size + freeze floating for easy clicking */
.social-cluster:hover .sc-item,
.social-cluster:focus-within .sc-item {
  margin-bottom:.45rem;
  width:var(--social-size,32px);
  height:var(--social-size,32px);
  transform:translateX(0) scale(1.02);
  animation-play-state:paused;
}
.social-cluster:hover .sc-item:first-child,
.social-cluster:focus-within .sc-item:first-child {
  margin-bottom:0;
}

/* Per-item hover → pop forward + invert colors */
.social-cluster .sc-item:hover {
  transform:translateX(0) scale(1.22) !important;
  background:linear-gradient(135deg,var(--gold),var(--gold-2));
  color:var(--navy);
  border-color:var(--gold-2);
  box-shadow:0 12px 24px rgba(201,163,91,.5),
             inset 0 -3px 6px rgba(11,31,58,.1),
             inset 0 2px 4px rgba(255,255,255,.4);
  z-index:2;
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .social-cluster .sc-item { animation:none; }
}

/* Hide on mobile — bottom nav + mobile WA FAB handle this */
@media (max-width:780px) {
  .social-cluster { display:none !important; }
}

/* ===== PRICE WITH OPTIONAL DISCOUNT — one line, never wraps ===== */
.price-line {
  display:inline-flex;align-items:baseline;gap:.4rem;flex-wrap:nowrap;
  white-space:nowrap;
  background:#f8f5ec;color:var(--navy);
  padding:.4rem .7rem;border-radius:9px;
  font-weight:900;font-size:var(--price-size,.92rem);
  align-self:flex-start;
}
.price-line .price-was {
  color:#c0001a;
  font-weight:800;
  font-size:.88em;
  text-decoration:line-through;
  text-decoration-color:#c0001a;
  text-decoration-thickness:2px;
  opacity:1;
  background:rgba(211,47,47,.10);
  padding:.05rem .3rem;border-radius:5px;
}
.price-line .price-now {
  color:var(--navy);
  font-weight:900;
  font-size:1em;
}
.price-line .price-unit {
  color:var(--muted);font-weight:600;font-size:.8em;
}

/* "عرض خاص" badge on top of the card image */
.sale-badge {
  position:absolute;top:.75rem;inset-inline-end:.75rem;
  background:linear-gradient(135deg,#d32f2f,#a3001a);
  color:#fff;font-weight:900;font-size:.85rem;
  padding:.4rem .75rem;border-radius:10px;
  box-shadow:0 6px 16px rgba(211,47,47,.45);
  z-index:2;
  letter-spacing:.02em;
}

/* ===== CONTACT CHANNELS (universal — works on both desktop and mobile) ===== */
.channel-list { display:flex;flex-direction:column;gap:.6rem;margin:.5rem 0; }
.channel-row {
  display:flex;align-items:center;gap:.85rem;
  background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:.85rem 1rem;
  color:var(--navy);text-decoration:none;
  transition:background .15s, transform .15s, box-shadow .15s;
}
.channel-row:hover {
  background:#fafaf6;
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(11,31,58,.06);
}
.channel-row .ico {
  width:46px;height:46px;border-radius:12px;flex-shrink:0;
  background:linear-gradient(135deg,#f6f1e3,#fff);
  border:1px solid var(--line);
  display:grid;place-items:center;color:var(--gold-2);
}
.channel-row .ico svg {
  width:22px;height:22px;
  fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
}
.channel-row .ch-body { flex:1;min-width:0; }
.channel-row .ch-label { font-size:.78rem;color:var(--muted);font-weight:600;margin-bottom:.15rem; }
.channel-row .ch-value {
  font-size:.95rem;font-weight:700;color:var(--navy);
  direction:ltr;text-align:right;
  word-break:break-word;
}
.channel-row .chev { color:var(--muted);font-size:1.2rem;flex-shrink:0; }
.channel-row.wa .ico {
  background:linear-gradient(135deg,#25d366,#1ebe5a);
  color:#fff;border-color:#1faa4f;
}

.product-chips{
  position:fixed;
  bottom:calc(var(--bottom-nav-h) + 10px);
  left:50%;transform:translate(-50%, 8px);
  display:flex;flex-direction:row;gap:.45rem;
  background:#fff;border:1px solid var(--line);
  border-radius:14px;padding:.45rem;
  box-shadow:0 12px 28px rgba(11,31,58,.18);
  z-index:55;
  opacity:0;pointer-events:none;
  transition:opacity .18s ease-out, transform .18s ease-out;
  max-width:calc(100vw - 24px);
}
.product-chips.open{
  opacity:1;pointer-events:auto;
  transform:translate(-50%, 0);
}
.product-chips a{
  padding:.5rem .95rem;
  border-radius:10px;
  background:#f8f5ec;
  color:var(--navy);
  font-weight:700;font-size:.85rem;
  border:1px solid var(--line);
  text-decoration:none;
  white-space:nowrap;
}
.product-chips a:active{background:rgba(201,163,91,.18);color:var(--gold-2)}

/* ============================================================
   APPLIANCES STORE  (filters, sort, category chips, product grid)
   ============================================================ */
.store-hero{padding:2.5rem 0}
.cat-chips-wrap{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:var(--header-h);z-index:40}
.cat-chips{display:flex;gap:.5rem;overflow-x:auto;padding:.7rem 0;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.cat-chips::-webkit-scrollbar{display:none}
.cat-chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:.35rem;padding:.45rem .9rem;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--navy);font-weight:700;font-size:.88rem;text-decoration:none;white-space:nowrap;transition:.15s}
.cat-chip span{background:#f3f0e9;color:var(--muted);border-radius:999px;padding:0 .45rem;font-size:.74rem;font-weight:700}
.cat-chip:hover{border-color:var(--gold)}
.cat-chip.active{background:var(--navy);color:#fff;border-color:var(--navy)}
.cat-chip.active span{background:rgba(255,255,255,.18);color:#fff}

.store-block{padding-top:1.25rem}
.store-toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
.store-count{font-size:1rem}
.store-toolbar-actions{display:flex;align-items:center;gap:.6rem}
.store-filter-toggle{display:none;align-items:center;gap:.4rem;padding:.5rem .85rem}
.store-fcount{background:var(--gold);color:#0b1f3a;border-radius:999px;min-width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:900;padding:0 4px}
.store-sort-wrap{display:inline-flex;align-items:center;gap:.4rem;font-size:.88rem}
.store-sort{padding:.5rem .7rem;border:1px solid var(--line);border-radius:10px;background:#fff;font-weight:700;color:var(--navy);cursor:pointer}

.store-grid{display:grid;grid-template-columns:260px 1fr;gap:1.5rem;align-items:start}
.store-sidebar{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.25rem}
@media(min-width:901px){.store-sidebar{position:sticky;top:calc(var(--header-h) + 64px)}}
.store-sidebar-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}
.store-sidebar-head h3{margin:0;font-size:1.05rem}
.store-sidebar-close{display:none;background:#f3f0e9;border:0;border-radius:8px;width:32px;height:32px;font-size:1rem;cursor:pointer;color:var(--navy)}
.store-backdrop{display:none}
.fgroup{margin-bottom:1.1rem}
.fgroup-h{display:block;font-size:.9rem;font-weight:700;color:var(--navy);margin-bottom:.45rem}
.store-filter-form input[type=search],.store-filter-form input[type=number],.store-filter-form select{width:100%;padding:.6rem .7rem;border:1px solid var(--line);border-radius:9px;background:#fff;font-size:.92rem}
.fprice{display:flex;align-items:center;gap:.5rem}
.fcheck{display:flex;align-items:center;gap:.5rem;font-size:.9rem;margin:.3rem 0 1rem;cursor:pointer}
.fbtns{display:flex;flex-direction:column;gap:.5rem}
.fbtns .btn{width:100%}

.active-filters{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;margin-bottom:1rem}
.fchip{display:inline-flex;align-items:center;gap:.35rem;background:#f3f0e9;border:1px solid var(--line);border-radius:999px;padding:.3rem .7rem;color:var(--navy);text-decoration:none;font-weight:700;font-size:.82rem}
.fchip span{color:#b8002a;font-weight:900}
.fchip:hover{border-color:#b8002a}
.fchip-clear{background:transparent;color:var(--muted);border-style:dashed}

.prod-card{display:flex;flex-direction:column}
.prod-link{text-decoration:none;color:inherit;display:flex;flex-direction:column;flex:1}
.prod-card .card-img{aspect-ratio:1/1;background:#f6f3ec;display:flex;align-items:center;justify-content:center}
.card-img-ph{color:var(--muted);font-weight:900;letter-spacing:.08em;opacity:.5;font-size:1.05rem}
.oos-badge{position:absolute;top:.75rem;inset-inline-start:.75rem;background:rgba(11,31,58,.85);color:#fff;font-weight:800;font-size:.78rem;padding:.3rem .6rem;border-radius:8px;z-index:2}
.prod-brand{color:var(--muted);font-size:.82rem;font-weight:600}
.prod-card .card-body h3{font-size:.98rem;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.9em}
.prod-card .price-line{align-self:flex-start;margin-top:.2rem}
.prod-actions{padding:0 1rem 1rem;display:flex;gap:.5rem}

.store-pager{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;align-items:center;margin-top:2rem}
.store-pager .pg{min-width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;padding:0 .7rem;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--navy);text-decoration:none;font-weight:700;font-size:.9rem}
.store-pager .pg:hover{border-color:var(--gold)}
.store-pager .pg.active{background:var(--navy);color:#fff;border-color:var(--navy)}
.store-pager .pg-dots{color:var(--muted);padding:0 .2rem}

.store-empty{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:3rem 1.5rem;text-align:center}
.store-empty h3{margin:0 0 .5rem}

@media(max-width:900px){
  .store-filter-toggle{display:inline-flex !important}
  .store-grid{grid-template-columns:1fr}
  .store-sidebar{
    position:fixed;top:0;bottom:0;right:0;width:86%;max-width:340px;z-index:1200;
    border-radius:0;overflow-y:auto;transform:translateX(100%);transition:transform .28s ease;
    box-shadow:-10px 0 40px rgba(0,0,0,.3);
  }
  body.sf-open .store-sidebar{transform:translateX(0)}
  .store-sidebar-close{display:inline-flex;align-items:center;justify-content:center}
  body.sf-open .store-backdrop{display:block;position:fixed;inset:0;background:rgba(11,31,58,.5);z-index:1100}
  body.sf-open{overflow:hidden}
}
@media(max-width:600px){
  .store-products.card-grid{grid-template-columns:1fr 1fr;gap:.7rem}
  .prod-card .card-body{padding:.7rem .8rem}
  .prod-card .card-body h3{font-size:.9rem}
  .prod-actions{padding:0 .8rem .8rem}
  .store-count{font-size:.92rem}
  .store-sort{font-size:.82rem;padding:.45rem .55rem}
}

/* add-to-cart toast on the listing */
.store-toast{display:flex;align-items:center;gap:.5rem;background:#ecfdf3;border:1px solid #abefc6;color:#067647;border-radius:12px;padding:.7rem 1rem;margin-bottom:1rem;font-weight:700;transition:opacity .4s,transform .4s}
.store-toast a{color:#067647;text-decoration:underline}
.store-toast.hide{opacity:0;transform:translateY(-6px)}

/* mobile: keep the sort/filters toolbar reachable (sticky); chips scroll away */
@media(max-width:900px){
  .cat-chips-wrap{position:static}
  .store-toolbar{position:sticky;top:var(--header-h);z-index:39;background:var(--paper);padding:.55rem 0;margin-bottom:.9rem;border-bottom:1px solid var(--line)}
}

/* ============================================================
   CART  (item cards + order summary — responsive, no table)
   ============================================================ */
.cart-empty{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:3rem 1.5rem;text-align:center;max-width:480px;margin:1rem auto}
.cart-empty-ico{font-size:2.6rem;margin-bottom:.3rem}
.cart-empty h3{margin:0 0 .4rem}
.cart-layout{display:grid;grid-template-columns:1fr 330px;gap:1.5rem;align-items:start}
.cart-items{display:flex;flex-direction:column;gap:.7rem}
.cart-item{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;background:#fff;border:1px solid var(--line);border-radius:14px;padding:.8rem}
.cart-item-img{width:74px;height:74px;border-radius:10px;background:#f3f0e9;flex:none;overflow:hidden;display:flex;align-items:center;justify-content:center}
.cart-item-img img{width:100%;height:100%;object-fit:cover}
.cart-item-info{flex:1 1 150px;min-width:130px}
.cart-item-name{font-weight:800;color:var(--navy);text-decoration:none;display:block;line-height:1.45}
.cart-item-name:hover{color:var(--gold-2)}
.cart-item-meta{font-size:.82rem;margin-top:.1rem}
.cart-item-unit{font-size:.8rem}
.cart-item-controls{display:flex;align-items:center;gap:.9rem;margin-inline-start:auto}
.qty-stepper{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:#fff}
.qty-stepper button{width:36px;height:40px;border:0;background:#f3f0e9;font-size:1.2rem;font-weight:700;cursor:pointer;color:var(--navy);line-height:1}
.qty-stepper button:hover{background:#e9e3d6}
.qty-stepper input{width:46px;height:40px;border:0;text-align:center;font-weight:800;color:var(--navy);font-size:.95rem;-moz-appearance:textfield;background:#fff}
.qty-stepper input::-webkit-outer-spin-button,.qty-stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.cart-item-total{font-weight:900;color:var(--navy);min-width:88px;text-align:start;font-size:1rem}
.cart-item-remove{background:none;border:0;color:#b8002a;cursor:pointer;padding:.45rem;border-radius:8px;display:inline-flex;align-items:center;justify-content:center}
.cart-item-remove:hover{background:#fde2e2}
.cart-summary{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.25rem}
@media(min-width:781px){.cart-summary{position:sticky;top:calc(var(--header-h) + 16px)}}
.cart-summary h3{margin:0 0 .9rem}
.cart-sum-row{display:flex;justify-content:space-between;font-size:.92rem;margin-bottom:.5rem}
.cart-sum-total{display:flex;justify-content:space-between;font-weight:900;color:var(--navy);font-size:1.2rem;border-top:1px solid var(--line);padding-top:.7rem;margin-top:.2rem}
.cart-summary .btn{width:100%;margin-top:.6rem}
.cart-clear-btn{background:none;border:0;color:#b8002a;cursor:pointer;font-size:.85rem;font-weight:700;padding:.4rem;width:100%;text-align:center;margin-top:.2rem}
.cart-clear-btn:hover{text-decoration:underline}
@media(max-width:780px){
  .cart-layout{grid-template-columns:1fr}
  .cart-item-info{flex:1 1 0;min-width:0}
  .cart-item-controls{flex:1 0 100%;margin-inline-start:0;justify-content:space-between;border-top:1px solid #f0ece2;padding-top:.7rem;margin-top:.2rem}
}

/* ============================================================================
   MOBILE REDESIGN v5 — bold, app-like (phones ≤ 780px ONLY).
   Desktop is untouched. Brand palette / aesthetic / layout idea preserved.
   Appended last so it refines the v4 mobile styles. Fully reversible via the
   pre-redesign snapshot (revert_redesign.py).
   ============================================================================ */
@media (max-width:780px){
  :root{ --r-card:20px; --r-btn:15px; --tap:50px; }
  body{ -webkit-tap-highlight-color:transparent; }
  a,button{ -webkit-tap-highlight-color:transparent; }

  /* ---- Type scale: stronger, cleaner hierarchy ---- */
  h1{ font-size:1.48rem; line-height:1.28; font-weight:800; letter-spacing:-.01em; color:var(--navy); }
  h2{ font-size:1.24rem; line-height:1.32; font-weight:800; letter-spacing:-.008em; }
  h3{ font-size:1.06rem; line-height:1.4; font-weight:700; }
  p{ font-size:.95rem; line-height:1.72; }
  .lead{ font-size:1.02rem; line-height:1.62; }
  .eyebrow,.slogan-en{ font-size:.72rem; letter-spacing:.16em; font-weight:800; color:var(--gold-2); text-transform:uppercase; }
  .block-head{ margin-bottom:1.15rem; }

  /* ---- Buttons: tactile, gradient, app-like ---- */
  .btn{
    min-height:var(--tap); padding:.82rem 1.3rem; border-radius:var(--r-btn);
    font-weight:800; font-size:.98rem; line-height:1.1; gap:.45rem;
    transition:transform .12s ease, box-shadow .2s ease, filter .15s ease;
  }
  .btn:active{ transform:scale(.97); }
  .btn-primary{ background:linear-gradient(135deg,var(--navy),var(--navy-2)); color:#fff; box-shadow:0 8px 22px rgba(11,31,58,.22); border:0; }
  .btn-primary:active{ filter:brightness(1.08); }
  .btn-gold{ background:linear-gradient(135deg,var(--gold),var(--gold-2)); color:#13243f; box-shadow:0 8px 22px rgba(201,163,91,.32); border:0; }
  /* ── WhatsApp button, redesigned site-wide (mobile) to fit the navy/gold brand ──
     Default (light-background sections): clean white outline + navy text, distinct
     from the navy/gold primaries it sits beside. The green stays only as the icon. */
  .btn-wa{ background:#fff; color:var(--navy); border:1.5px solid var(--navy); box-shadow:0 2px 8px rgba(11,31,58,.08); }
  .btn-wa:active{ background:var(--paper); }
  /* On dark hero sections (home/kitchens/cabinets) use the navy-glass treatment
     so it reads on the photo — same look the owner approved on the homepage. */
  .hero .btn-wa{ background:rgba(11,31,58,.4); color:#fff; border:1.5px solid rgba(255,255,255,.45); box-shadow:0 6px 18px rgba(11,31,58,.25); -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px); }
  .hero .btn-wa:active{ background:rgba(11,31,58,.62); }
  .btn-ghost{ background:#fff; border:1.5px solid var(--line); color:var(--navy); box-shadow:0 1px 3px rgba(11,31,58,.05); }
  .btn-sm{ min-height:auto; padding:.5rem 1rem; font-size:.85rem; border-radius:11px; }
  /* inline button icons appear on mobile */
  .btn-ico{ display:inline-block; width:18px; height:18px; flex:0 0 auto; }
  .hero-cta{ display:flex; flex-direction:column; gap:.6rem; width:100%; }
  .hero-cta .btn{ width:100%; }
  /* hero-cta-2: two buttons side by side (homepage + calculator) — equal width, tidy */
  .hero-cta-2{ flex-direction:row !important; flex-wrap:nowrap; gap:.55rem; }
  .hero-cta-2 .btn{ flex:1 1 0; width:auto !important; min-width:0; padding:.8rem .55rem; gap:.4rem; font-size:.95rem; font-weight:800; border-radius:14px; }

  /* ---- Cards: rounder, softer, tappable ---- */
  .card{ border-radius:var(--r-card); box-shadow:0 6px 18px rgba(11,31,58,.07); transition:transform .14s ease, box-shadow .2s ease; }
  .card:active{ transform:scale(.985); }

  /* ---- Inputs: clear gold focus ring ---- */
  .field input,.field select,.field textarea,
  input[type=text],input[type=email],input[type=tel],input[type=number],input[type=password],input[type=search],input[type=date],input[type=datetime-local],select,textarea{
    border-radius:13px; border:1.5px solid var(--line);
  }
  .field input:focus,.field select:focus,.field textarea:focus,
  input:focus,select:focus,textarea:focus{
    outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,163,91,.18);
  }

  /* ---- Tap feedback on pills / chips ---- */
  .cat-chip:active,.fchip:active,.product-chips a:active,.quick-chips a:active,.tag:active,.chip:active{ transform:scale(.95); }

  /* ---- Bottom nav: bolder, tactile ---- */
  .bottom-nav{ box-shadow:0 -6px 22px rgba(11,31,58,.09); }
  .bottom-nav a{ font-weight:700; transition:transform .12s ease,color .15s ease; }
  .bottom-nav a:active{ transform:scale(.9); }

  /* ---- Header: crisper app bar ---- */
  .site-header{ box-shadow:0 1px 0 rgba(11,31,58,.04), 0 6px 16px rgba(11,31,58,.035); }

  /* ---- Badges polish ---- */
  .badge{ border-radius:999px; font-weight:800; }
}

/* ============================================================================
   MOBILE REDESIGN v5b — design-audit punch-list (phones only). Desktop untouched.
   ============================================================================ */
@media (max-width:780px){
  /* #18 — consistent section rhythm */
  section.block{ padding:1.75rem 0; }
  .block-head{ margin-bottom:1rem; }

  /* #0 — bottom nav: real tap targets, legible labels, decisive active */
  .bottom-nav a{ min-height:var(--tap); padding:.32rem .25rem .3rem; font-size:.75rem; letter-spacing:-.005em; }
  .bottom-nav a.active{ font-weight:800; }
  .bottom-nav a.active svg{ stroke-width:2.4; }

  /* #1 — header controls + bolder brand */
  .nav-cart{ min-width:44px; min-height:44px; }
  .brand-name{ font-size:.92rem; }

  /* #3 — button hierarchy: ghost reads as a real secondary (navy outline) */
  .btn-ghost{ background:#fff; border:1.5px solid var(--navy); color:var(--navy); box-shadow:0 1px 3px rgba(11,31,58,.05); }
  .btn-ghost:active{ background:var(--navy); color:#fff; }

  /* #36 — unify small pills */
  .badge,.tag,.fchip{ font-size:.78rem; font-weight:800; border-radius:999px; padding:.32rem .7rem; }

  /* #37 — round WhatsApp icon button must not stretch in a stacked hero-cta */
  .hero-cta .btn-wa-icon{ width:48px; align-self:center; flex:0 0 auto; }

  /* #19 — brand caret on selects (fixes the misaligned native RTL arrow) */
  select{
    -webkit-appearance:none; appearance:none;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6470' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat:no-repeat; background-position:left .8rem center; background-size:16px; padding-left:2.3rem;
  }

  /* #20 + #40 — unified, higher-contrast home icon tiles */
  .quick-chips .chip-ico{ width:46px; height:46px; border-radius:14px; background:linear-gradient(135deg,var(--navy),var(--navy-2)); border-color:transparent; box-shadow:0 4px 12px rgba(11,31,58,.14); }
  .quick-chips .chip-ico svg{ stroke:#fff; }
  .feature .ico{ width:46px; height:46px; border-radius:14px; }
  .feature .ico svg{ width:22px; height:22px; }

  /* #41 — accordion/details chevron affordance */
  details > summary{ list-style:none; display:flex; justify-content:space-between; align-items:center; gap:.5rem; }
  details > summary::-webkit-details-marker{ display:none; }
  details > summary::after{ content:'⌄'; color:var(--muted); font-size:1.15rem; line-height:1; transition:transform .2s; }
  details[open] > summary::after{ transform:rotate(180deg); }

  /* #11 — client greeting: restore headline prominence + app-bar weight */
  .client-greeting{ border-radius:var(--r-card); padding:2.3rem 1rem 1.2rem; box-shadow:0 10px 26px rgba(11,31,58,.18); text-align:center; }
  .client-greeting h1{ font-size:1.3rem; font-weight:800; letter-spacing:-.01em; }
  .client-greeting .cg-sub{ font-size:.88rem; }
  .client-greeting .cg-logout{ top:.7rem; inset-inline-end:.7rem; }

  /* #13 — admin editable-table cards: show the field label (gold) */
  /* Editable admin tables on mobile: each field = its gold label on its own line, then a
     full-width control. (Was a cramped 42% label + wrapping input = squeezed/messy.) */
  .admin-main .table tbody td[data-label]{ display:block !important; padding:.5rem 0 !important; }
  .admin-main .table tbody td[data-label]::before{ content:attr(data-label); display:block; font-size:.74rem; font-weight:800; color:var(--gold-2); margin:0 0 .28rem; }
  .admin-main .table tbody td[data-label] input:not([type=checkbox]),
  .admin-main .table tbody td[data-label] select,
  .admin-main .table tbody td[data-label] textarea{ width:100% !important; box-sizing:border-box; }
  .admin-main .table tbody td[data-label] input[type=checkbox]{ width:22px; height:22px; }
  .admin-main .table tbody td[data-label] .btn{ width:100%; }

  /* Packages list (admin/packages.php): the action + "مميّزة؟" cells hold several
     small buttons. Keep them small, auto-width and wrapping so they never stick out. */
  .admin-main .pkg-admin tbody td[data-label] form{ display:inline-block; width:auto; margin:0 0 .35rem .35rem; vertical-align:top; }
  .admin-main .pkg-admin tbody td[data-label] > .btn,
  .admin-main .pkg-admin tbody td[data-label] form .btn{ width:auto !important; padding:.42rem .8rem !important; font-size:.82rem !important; margin-bottom:.35rem; }
  /* the inline package edit form keeps full-width controls */
  .admin-main .pkg-admin tbody td[colspan] .btn-primary{ width:100% !important; }

  /* Compact list tables (clients/leads/orders) on mobile: id + a prominent NAME on the
     top row, then the action buttons on a tidy full-width row below — instead of long
     buttons squeezing the name and scattering items left/right. */
  .admin-main .table.compact tbody tr{ flex-wrap:wrap; gap:.45rem .5rem; padding:.65rem .8rem !important; }
  .admin-main .table.compact tbody td:nth-child(2){ font-size:.98rem !important; font-weight:800; color:var(--navy); white-space:normal; }
  .admin-main .table.compact tbody td:last-child{ flex-basis:100% !important; justify-content:flex-start !important; gap:.4rem; flex-wrap:wrap; }
  .admin-main .table.compact tbody td:last-child form{ flex:0 0 auto; margin:0; }
  .admin-main .table.compact tbody td:last-child .btn,
  .admin-main .table.compact tbody td:last-child button{ width:auto !important; padding:.38rem .7rem !important; font-size:.76rem !important; }

  /* Admin detail pages: any 2-column inline-grid layout (e.g. lead/order detail with a
     main column + side column) stacks into ONE column on phones — boxes above each
     other instead of squeezed side by side. */
  .admin-main div[style*="grid-template-columns"]{ grid-template-columns:1fr !important; }
  /* Action button rows in admin detail pages: equal, tidy, full-width-ish buttons */
  .admin-main > div[style*="display:flex"][style*="flex-wrap:wrap"] > form{ flex:1 1 auto; }
  .admin-main > div[style*="display:flex"][style*="flex-wrap:wrap"] > form > .btn,
  .admin-main > div[style*="display:flex"][style*="flex-wrap:wrap"] > .btn{ width:100%; }

  /* #31 — admin stat tiles read as tappable cards */
  .admin-main a.feature{ transition:transform .12s, box-shadow .12s; border-inline-start:3px solid var(--gold); }
  .admin-main a.feature:active{ transform:scale(.97); box-shadow:0 2px 10px rgba(11,31,58,.12); }

  /* #34 — admin filter pill rows → one swipeable line (saves vertical space) */
  .admin-main > div:has(> a.btn){ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:.25rem; }
  .admin-main > div:has(> a.btn)::-webkit-scrollbar{ display:none; }
  .admin-main > div:has(> a.btn) > a.btn,
  .admin-main > div:has(> a.btn) > form{ flex:0 0 auto; }
}

@media (max-width:600px){
  /* #17 — store action buttons keep a 44px target; #22 — tidy 2-control toolbar */
  .prod-actions .btn{ min-height:44px; padding:.55rem .6rem; font-size:.82rem; border-radius:11px; }
  .prod-card .card-body h3{ font-size:.92rem; line-height:1.45; }
  .store-sort-wrap .muted{ display:none; }
  .store-sort{ min-height:44px; flex:1; }
  .store-filter-toggle{ min-height:44px; }
  .store-toolbar-actions{ flex:1; gap:.4rem; }
}

/* #2 — fuller drawer rows; #44 — gold active marker in admin drawer (≤900) */
@media (max-width:900px){
  .main-nav > a{ padding:.95rem 1rem; font-size:.98rem; font-weight:700; }
  .main-nav > a::before{ width:34px; height:34px; background-size:18px 18px; }
  .admin-side nav a.active{ background:rgba(201,163,91,.16); box-shadow:inset 3px 0 0 var(--gold); color:#fff; }
  .admin-side nav .sec{ color:var(--gold); }
}

/* ============================================================================
   MOBILE REDESIGN v5c — page-specific (phones only). Desktop untouched.
   ============================================================================ */
@media (max-width:780px){
  /* #8 checkout — order summary/total surfaces ABOVE the form */
  .co-summary{ order:-1; position:static !important; margin-bottom:1.1rem; }

  /* #21 package — price + request form first; specs single column */
  .pkg-aside{ order:-1; position:static !important; margin-bottom:1.25rem; }
  .pkg-specs{ grid-template-columns:1fr !important; }

  /* #38 contact — WhatsApp/call channels above the message form */
  .contact-info{ order:-1; }

  /* #25 cart — sticky checkout bar pinned above the bottom nav */
  .cart-cta-bar{ display:flex !important; position:fixed; inset-inline:0; bottom:calc(var(--bottom-nav-h) + 8px); z-index:55; margin:0 .8rem; background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:0 10px 28px rgba(11,31,58,.16); padding:.55rem .9rem; align-items:center; gap:.8rem; }
  .cart-cta-bar .cart-cta-total{ display:flex; flex-direction:column; line-height:1.1; }
  .cart-cta-bar .cart-cta-total .muted{ font-size:.72rem; }
  .cart-cta-bar .cart-cta-total strong{ font-size:1.08rem; color:var(--navy); }
  .cart-cta-bar .btn{ flex:1; min-height:46px; }
  /* When the full-screen nav drawer is open, the sticky checkout bar must not bleed over it */
  body.nav-open .cart-cta-bar{ display:none !important; }
  /* Sticky checkout bar slides away when the real summary button is on screen (no duplicate) */
  .cart-cta-bar{ transition:transform .28s ease, opacity .2s ease; }
  .cart-cta-bar.is-hidden{ transform:translateY(180%); opacity:0; pointer-events:none; }
  .cart-layout{ padding-bottom:4.5rem; }
}
@media (max-width:480px){
  /* #26 calculator — one accessory per row for breathing room */
  .acc-grid{ grid-template-columns:1fr !important; }
}

/* ============================================================================
   CLIENT PORTAL — order status timeline (#10). BASE styles (all widths) so the
   desktop client order page is fully styled too — a clean vertical timeline
   reads well on desktop and phone alike.
   ============================================================================ */
.stg-timeline{ display:flex; flex-direction:column; }
.stg{ display:flex; gap:.7rem; align-items:center; padding:.7rem 0; }
.stg + .stg{ border-top:1px solid var(--line); }
.stg .dot{ width:26px; height:26px; border-radius:50%; flex:none; display:grid; place-items:center; font-size:.85rem; font-weight:900; }
.stg.on .dot{ background:var(--gold); color:#13243f; }
.stg.on .dot::before{ content:'✓'; }
.stg.off .dot{ background:#eef2f7; border:2px solid var(--line); }
.stg b{ display:block; color:var(--navy); font-size:1rem; }
.stg em{ font-style:normal; font-size:.85rem; color:var(--muted); }
.stg.on em{ color:var(--gold-2); font-weight:700; }

/* ============================================================================
   MOBILE REDESIGN v5d — client portal (phones only). Desktop untouched.
   ============================================================================ */
@media (max-width:780px){
  /* #9 — client payments table → stacked cards */
  .client-pay-table thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .client-pay-table, .client-pay-table tbody, .client-pay-table tr, .client-pay-table td{ display:block; width:100%; }
  .client-pay-table tr{ background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:0 4px 12px rgba(11,31,58,.06); padding:.7rem .9rem; margin-bottom:.6rem; }
  .client-pay-table td{ border:0; padding:.28rem 0; display:flex; justify-content:space-between; align-items:center; font-size:.92rem; gap:.6rem; }
  .client-pay-table td::before{ content:attr(data-l); color:var(--muted); font-weight:700; font-size:.8rem; }
  .client-pay-table td:first-child{ font-weight:800; color:var(--navy); font-size:1.08rem; border-bottom:1px solid var(--line); padding-bottom:.5rem; margin-bottom:.3rem; }

  /* #29 — contract/status banners: stack + full-width tap rows on phone */
  .ord-statusrow{ flex-direction:column !important; align-items:stretch !important; }
  .ord-statusrow .ord-action{ min-height:44px; display:flex; align-items:center; justify-content:center; width:100%; }

  /* #12 — chat bubbles, app-like */
  #clientChatBox .cc-msg{ border-radius:16px !important; max-width:86%; box-shadow:0 2px 6px rgba(11,31,58,.06); border-width:0 !important; }
  #clientChatBox .cc-msg.me{ margin-inline-start:auto; background:#fff7ec !important; border-bottom-right-radius:5px !important; }
  #clientChatBox .cc-msg.team{ margin-inline-end:auto; background:#fff !important; border-bottom-left-radius:5px !important; }
  #clientChatBox{ background:var(--paper); border-radius:14px; }

  /* #28 — contract signing: keep the save-CTA reachable */
  #sigForm .btn-block{ position:sticky; bottom:calc(var(--bottom-nav-h) + .6rem); z-index:5; box-shadow:0 10px 26px rgba(201,163,91,.4); }
  .ctr-body{ max-height:none !important; }

  /* #30 — dashboard quick-actions: 3 compact buttons on one row */
  .client-quick.features{ grid-template-columns:repeat(3,1fr) !important; }
  .client-quick .feature{ padding:.9rem .4rem; }
  .client-quick .feature p{ display:none; }
}

/* ============================================================================
   CALCULATOR — accessories as tidy single rows (was a messy checkbox + stacked
   number field). Applies at all widths.
   ============================================================================ */
.acc-item{ display:flex; align-items:center; gap:.55rem; background:#fff; border:1px solid var(--line); border-radius:12px; padding:.55rem .7rem; }
.acc-item .acc-pick{ display:flex; align-items:center; gap:.5rem; flex:1; min-width:0; margin:0; cursor:pointer; }
.acc-item .acc-pick > input[type=checkbox]{ width:19px; height:19px; flex:none; accent-color:var(--gold-2); }
.acc-item .acc-name{ flex:1; min-width:0; font-size:.9rem; line-height:1.35; color:var(--navy); }
.acc-item .acc-price{ flex:none; font-size:.84rem; font-weight:800; color:var(--gold-2); white-space:nowrap; }
.acc-item .acc-price s{ color:#d32f2f; font-weight:400; margin-inline-end:.2rem; }
.acc-item .acc-qty{ flex:none; width:54px; text-align:center; padding:.4rem .25rem; margin:0; }

/* Calculator on phones: stack the 2-up field rows into one column so the boxes
   and labels line up cleanly (uneven labels were leaving them misaligned/cramped). */
@media(max-width:600px){
  #calcForm .grid-2{ grid-template-columns:1fr !important; gap:.7rem; }
}

/* ============================================================================
   HOMEPAGE PROMO BANNER — eye-catching package advert at the top of the page.
   Background image is editable from admin → محتوى الموقع (home_promo_banner_image).
   ============================================================================ */
.promo-wrap{ padding:1rem 0 .25rem; }
.promo-banner{
  display:block; position:relative; overflow:hidden; border-radius:18px;
  padding:1.7rem 1.8rem; min-height:240px; text-decoration:none; color:#fff;
  /* Real kitchen photo as a prominent background, with a directional dark-navy
     overlay (darkest on the right where the RTL text sits) so text stays crisp
     while the photo shows through clearly on the left. */
  background:
    linear-gradient(to left, rgba(7,20,40,.94) 0%, rgba(9,26,52,.84) 44%, rgba(11,30,58,.42) 100%),
    var(--promo-bg, linear-gradient(120deg,var(--navy),var(--navy-2))) center/cover no-repeat;
  box-shadow:0 16px 38px rgba(11,31,58,.3); border:1px solid rgba(201,163,91,.5);
  transition:transform .2s ease, box-shadow .2s ease;
}
.promo-body{ position:relative; z-index:1; max-width:86%; }
.promo-eyebrow{ display:inline-block; color:var(--gold); font-weight:800; letter-spacing:.06em; font-size:.8rem; text-shadow:0 1px 6px rgba(0,0,0,.45); }
.promo-banner .promo-title{ color:#fff !important; margin:.35rem 0 .4rem; font-size:1.65rem; line-height:1.2; text-shadow:0 2px 10px rgba(0,0,0,.5); }
/* NOTE: selector must out-rank `.container p {color:#2b323b}` (line ~812) or the
   tagline renders dark and vanishes on the photo. .promo-banner .promo-tag = (0,2,0)
   beats .container p = (0,1,1). Do not weaken this selector. */
.promo-banner .promo-tag{ color:#fff; font-weight:600; margin:0 0 .9rem; font-size:.95rem; text-shadow:0 1px 3px rgba(0,0,0,.6); }
.promo-perks{ list-style:none; margin:0 0 1.1rem; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:.45rem .9rem; }
.promo-perks li{ display:flex; align-items:center; gap:.45rem; color:#eef2f8; font-size:.86rem; font-weight:600; text-shadow:0 1px 5px rgba(0,0,0,.45); }
.promo-tick{ display:inline-flex; align-items:center; justify-content:center; width:19px; height:19px; flex:0 0 19px; border-radius:50%; background:var(--gold); color:#13243f; font-size:.72rem; font-weight:900; box-shadow:0 2px 6px rgba(0,0,0,.3); }
.promo-perks li.promo-more{ color:var(--gold); font-weight:800; }
.promo-perks li.promo-more .promo-tick{ background:transparent; color:var(--gold); border:1.5px solid var(--gold); box-shadow:none; }
.promo-foot{ display:flex; align-items:center; justify-content:space-between; gap:.7rem 1rem; flex-wrap:wrap; }
.promo-price{ font-size:.96rem; color:#e9eef5; text-shadow:0 1px 6px rgba(0,0,0,.5); }
.promo-price strong{ color:var(--gold); font-size:1.3rem; }
.promo-cta{ display:inline-flex; align-items:center; justify-content:center; text-align:center; gap:.4rem; background:linear-gradient(135deg,var(--gold),var(--gold-2)); color:#13243f; font-weight:800; padding:.62rem 1.35rem; border-radius:99px; white-space:nowrap; box-shadow:0 6px 18px rgba(201,163,91,.4); }
.promo-banner:hover{ transform:translateY(-3px); box-shadow:0 22px 46px rgba(11,31,58,.38); }
@media(max-width:780px){
  .promo-banner{ padding:1.4rem 1.3rem; min-height:0; border-radius:var(--r-card); }
  .promo-body{ max-width:100%; }
  .promo-banner .promo-title{ font-size:1.32rem; }
  .promo-banner .promo-tag{ font-size:.86rem; margin-bottom:.8rem; }
  /* single column on phones so each perk always sits on ONE line (no wrapping) */
  .promo-perks{ grid-template-columns:1fr; gap:.42rem; }
  .promo-perks li{ font-size:.82rem; }
  /* stack price over a full-width button so the CTA text + arrow never overflow */
  .promo-foot{ flex-direction:column; align-items:stretch; gap:.55rem; }
  .promo-cta{ width:100%; justify-content:center; font-size:.95rem; padding:.6rem 1rem; }
}
/* "باقاتنا" homepage package rail — all packages in ONE horizontal row.
   One scrollable row on desktop; auto-scrolling carousel on mobile (JS). */
.pkg-rail{ display:flex; gap:1rem; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding:.25rem .25rem 1rem; scrollbar-width:thin; }
.pkg-rail::-webkit-scrollbar{ height:7px; }
.pkg-rail::-webkit-scrollbar-thumb{ background:rgba(11,31,58,.2); border-radius:99px; }
.pkg-rail-card{ flex:0 0 300px; scroll-snap-align:center; display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; text-decoration:none; box-shadow:0 6px 18px rgba(11,31,58,.07); transition:transform .15s ease, box-shadow .2s ease; }
.pkg-rail-card:hover{ transform:translateY(-3px); box-shadow:0 14px 30px rgba(11,31,58,.14); }
.pkg-rail-img{ height:160px; background:#f3f0e9 center/cover no-repeat; }
.pkg-rail-body{ padding:1rem 1.1rem 1.2rem; display:flex; flex-direction:column; gap:.35rem; }
.pkg-rail-body h3{ margin:0; color:var(--navy); font-size:1.1rem; }
.pkg-rail-body p{ margin:0; color:#5b6470; font-size:.88rem; line-height:1.5; }
.pkg-card-price{ display:block; color:var(--navy); font-size:.9rem; margin-top:.2rem; }
.pkg-card-price strong{ color:var(--gold-2); font-size:1.2rem; }
.pkg-rail-cta{ display:inline-flex; align-items:center; gap:.4rem; margin-top:.6rem; color:var(--gold-2); font-weight:800; font-size:.9rem; }
@media(max-width:780px){
  .pkg-rail-card{ flex-basis:80vw; max-width:320px; }
  .pkg-rail-img{ height:150px; }
}

/* ============================================================================
   ADMIN MOBILE CARD LISTS — purpose-built cards for the leads & orders lists.
   On mobile the desktop <table> is hidden (.desktop-only) and these show
   instead, giving a clean, predictable layout (the generic position-based
   .compact hiding was fragile). The whole card is tappable via data-href.
   ============================================================================ */
.adm-cards{ display:flex; flex-direction:column; gap:.55rem; }
.adm-cards .lc, .adm-cards .oc{
  background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:.8rem .9rem; box-shadow:0 1px 3px rgba(11,31,58,.05);
  transition:box-shadow .15s ease, transform .15s ease;
}
.adm-cards .lc:active, .adm-cards .oc:active{ box-shadow:0 4px 12px rgba(11,31,58,.13); transform:translateY(-1px); }

/* ----- LEAD card: name (right) + small action buttons (left) on one line ----- */
.lc-row1{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.lc-name{ font-weight:800; color:var(--navy); font-size:1rem; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lc-acts{ display:flex; align-items:center; gap:.35rem; flex:0 0 auto; }
.lc-acts form{ margin:0; }
.lc-acts .btn, .lc-acts button{ width:auto !important; padding:.34rem .6rem !important; font-size:.74rem !important; border-radius:8px !important; }
.lc-row2{ display:flex; flex-wrap:wrap; align-items:center; gap:.3rem .7rem; margin-top:.5rem; font-size:.8rem; color:var(--muted); }
.lc-row2 .lc-id{ background:var(--paper); padding:.1rem .42rem; border-radius:6px; font-weight:700; color:var(--muted); }
.lc-row2 a{ color:var(--navy); font-weight:700; text-decoration:none; }
.lc-row3{ margin-top:.55rem; }
.lc-row3 form{ margin:0; }
.lc-row3 select{ width:100%; padding:.48rem .55rem; border:1px solid var(--line); border-radius:9px; font-size:.85rem; background:#fff; color:var(--navy); }

/* ----- ORDER card: 3 lines (title / number+client / stage+archive) ----- */
.oc-title{ font-weight:800; color:var(--navy); font-size:1.02rem; line-height:1.3; }
.oc-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .7rem; margin-top:.45rem; font-size:.82rem; }
.oc-meta .oc-num{ background:var(--paper); padding:.12rem .45rem; border-radius:6px; font-weight:800; color:var(--navy); letter-spacing:.02em; }
.oc-meta .oc-client{ color:var(--muted); font-weight:600; }
.oc-foot{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-top:.6rem; padding-top:.55rem; border-top:1px solid var(--line); min-height:1.6rem; }
.oc-foot form{ margin:0; }
.oc-foot .btn, .oc-foot button{ width:auto !important; padding:.36rem .7rem !important; font-size:.76rem !important; border-radius:8px !important; }