/* ══════════════════════════════════════════════════════════════════════
   Perfix Directory — shared stylesheet
   Tokens lifted verbatim from the designer's Figma file B4REsJIYa7qRTimNoiBivK
   (Brand Primary, Tailwind neutral scale, Inter Tight, radius + spacing scale).
   Type: IBM Plex Sans Arabic / Hebrew (SIL OFL) + Inter Tight for Latin.
   ══════════════════════════════════════════════════════════════════════ */

:root{
  --brand:#0a2463;            /* Brand Primary            */
  --fg:#0a0a0a;               /* base/foreground          */
  --muted:#737373;            /* base/muted-foreground    */
  --bg:#ffffff;               /* base/background          */
  --bg2:#f9fafb;              /* Background Secondary     */
  --border:#e5e5e5;           /* Borders                  */
  --sky:#3e92cc;              /* BRAND sky blue — sampled from perfix-icon.png (#3d92cb) */
  --blue:#3b82f6;             /* tailwind blue/500 — designer token, NOT the brand blue */
  --blue50:#eff6ff;           /* tailwind blue/50         */
  --amber:#b45309; --amber-bg:#fffbeb; --amber-br:#fde68a;
  --green:#166534; --green-bg:#f0fdf4; --green-br:#bbf7d0;

  --r-sm:6px; --r-md:8px; --r-2xl:16px; --r-3xl:24px; --r-full:9999px;
  --s1:4px; --s2:8px; --s3:12px; --s35:14px; --s4:16px; --s5:20px; --s6:24px; --s8:32px;
  --xs:12px; --lh-xs:16px;
  --sm:14px; --lh-sm:20px;
  --base:16px; --lh-base:24px;

  --font-he:'IBM Plex Sans Hebrew','Inter Tight',system-ui,sans-serif;
  --font-ar:'IBM Plex Sans Arabic','Inter Tight',system-ui,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
html[lang="he"] body{font-family:var(--font-he)}
html[lang="ar"] body{font-family:var(--font-ar)}
body{background:var(--bg);color:var(--fg);font-size:var(--sm);line-height:var(--lh-sm);
     -webkit-font-smoothing:antialiased;padding-bottom:var(--s8)}
a{color:inherit}
.wrap{max-width:520px;margin:0 auto;padding:0 var(--s4)}
[hidden]{display:none!important}

/* ── header ───────────────────────────────────────────── */
header{border-bottom:1px solid var(--border);background:var(--bg);position:sticky;top:0;z-index:20}
.hdr{display:flex;align-items:center;justify-content:space-between;height:56px;gap:var(--s2)}
.logo{display:flex;align-items:center;gap:var(--s2);font-weight:700;color:var(--brand);
      font-size:var(--base);text-decoration:none}
.logo .mark{width:26px;height:26px;display:block;flex-shrink:0}
.logo .word{font-weight:700;letter-spacing:-.01em}
.hdr-r{display:flex;align-items:center;gap:var(--s2)}
.lang{display:flex;gap:var(--s1)}
.lang button{border:1px solid var(--border);background:var(--bg);border-radius:var(--r-full);
             padding:4px 11px;cursor:pointer;color:var(--muted);font:inherit;font-size:var(--xs)}
.lang button[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600}
.hdr-link{font-size:var(--xs);color:var(--muted);text-decoration:none;white-space:nowrap}

/* ── breadcrumb ───────────────────────────────────────── */
.crumb{display:flex;flex-wrap:wrap;gap:6px;font-size:var(--xs);color:var(--muted);padding:var(--s3) 0 0}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--brand)}

/* ── page head ────────────────────────────────────────── */
.head{padding:var(--s5) 0 var(--s4)}
h1{font-size:22px;line-height:30px;font-weight:700;letter-spacing:-.01em}
h2{font-size:var(--base);line-height:var(--lh-base);font-weight:600}
h3{font-size:var(--sm);line-height:var(--lh-sm);font-weight:600}
.sub{color:var(--muted);font-size:var(--sm);margin-top:var(--s2)}
.count{margin-top:var(--s3);font-size:var(--xs);color:var(--muted)}
.count b{color:var(--fg);font-weight:600}

/* ── chips / filters ──────────────────────────────────── */
.filters{display:flex;gap:var(--s2);overflow-x:auto;padding-bottom:var(--s3);scrollbar-width:none}
.filters::-webkit-scrollbar{display:none}
.chip{white-space:nowrap;border:1px solid var(--border);background:var(--bg);border-radius:var(--r-full);
      padding:7px 14px;font:inherit;font-size:var(--xs);color:var(--muted);cursor:pointer;text-decoration:none}
.chip[aria-pressed="true"],.chip.on{border-color:var(--brand);color:var(--brand);background:var(--blue50);font-weight:600}

/* ── provider card ────────────────────────────────────── */
.card{display:flex;gap:var(--s3);padding:var(--s35);border:1px solid var(--border);
      border-radius:var(--r-2xl);background:var(--bg);margin-bottom:var(--s3);text-decoration:none;color:inherit}
.card.block{display:block}
.thumb{width:76px;height:76px;border-radius:var(--r-md);flex-shrink:0;object-fit:cover;background:var(--bg2)}
.thumb.ph{display:grid;place-items:center;background:var(--blue50);color:var(--sky);
          font-weight:700;font-size:22px;letter-spacing:-.02em}
.cbody{flex:1;min-width:0}
.name{font-size:var(--sm);line-height:var(--lh-sm);font-weight:600;color:var(--brand)}
.desc{font-size:var(--xs);line-height:var(--lh-xs);color:var(--muted);margin-top:var(--s1)}
.meta{display:flex;align-items:center;gap:var(--s1);font-size:var(--xs);color:var(--muted);margin-top:var(--s2)}
.badges{display:flex;flex-wrap:wrap;gap:var(--s1);margin-top:var(--s2)}
.badge{display:inline-flex;align-items:center;gap:3px;font-size:11px;line-height:14px;padding:3px 8px;
       border-radius:var(--r-full);background:var(--blue50);color:var(--brand);font-weight:600}
.badge.n{background:var(--bg2);color:var(--muted);font-weight:500}
.strip{display:flex;gap:6px;margin-top:var(--s3);overflow-x:auto;scrollbar-width:none}
.strip::-webkit-scrollbar{display:none}
.strip i{width:44px;height:44px;border-radius:var(--r-sm);background:var(--bg2);
         border:1px solid var(--border);display:block;flex-shrink:0}

/* ── buttons ──────────────────────────────────────────── */
.btn{margin-top:var(--s3);display:block;width:100%;border:0;border-radius:var(--r-md);padding:11px;
     font:inherit;font-size:var(--sm);font-weight:600;cursor:pointer;background:var(--brand);
     color:#fff;text-align:center;text-decoration:none}
.btn.ghost{background:var(--bg);border:1px solid var(--brand);color:var(--brand)}
.btn.claim{background:var(--bg);border:1px dashed var(--border);color:var(--muted);font-weight:500}
.btn.sm{padding:8px;font-size:var(--xs);margin-top:var(--s2)}

/* ── rows / lists ─────────────────────────────────────── */
.row{display:flex;align-items:center;gap:var(--s3);padding:var(--s35);border:1px solid var(--border);
     border-radius:var(--r-2xl);background:var(--bg);margin-bottom:var(--s2);text-decoration:none;color:inherit}
.row .ico{width:40px;height:40px;border-radius:var(--r-md);background:var(--blue50);flex-shrink:0;
          display:grid;place-items:center;color:var(--sky);font-size:17px}
.row .rb{flex:1;min-width:0}
.row .rt{font-size:var(--sm);font-weight:600;color:var(--brand)}
.row .rs{font-size:var(--xs);color:var(--muted);margin-top:2px}
.row .chev{color:var(--muted);font-size:var(--base)}

/* ── stats ────────────────────────────────────────────── */
.stats{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);margin:var(--s3) 0}
.stat{border:1px solid var(--border);border-radius:var(--r-2xl);padding:var(--s35);background:var(--bg)}
.stat .n{font-size:26px;line-height:32px;font-weight:700;color:var(--brand);letter-spacing:-.02em}
.stat .l{font-size:var(--xs);color:var(--muted);margin-top:2px}
.stat.wide{grid-column:1/-1}

/* ── forms ────────────────────────────────────────────── */
label{display:block;font-size:var(--xs);color:var(--muted);margin:var(--s3) 0 var(--s1)}
input,textarea,select{width:100%;border:1px solid var(--border);border-radius:var(--r-md);
       padding:11px var(--s3);font:inherit;font-size:var(--sm);background:var(--bg);color:var(--fg)}
input:focus,textarea:focus,select:focus{outline:2px solid var(--blue50);border-color:var(--brand)}
.otp{display:flex;gap:var(--s2);direction:ltr;justify-content:center;margin:var(--s4) 0}
.otp input{width:44px;height:52px;text-align:center;font-size:20px;font-weight:600;padding:0}

/* ── notes / states (wireframe annotations) ───────────── */
.note{font-size:11px;line-height:15px;color:#92400e;background:var(--amber-bg);
      border:1px dashed var(--amber-br);border-radius:var(--r-md);padding:8px 10px;margin:var(--s3) 0}
.state{font-size:11px;line-height:15px;color:var(--amber);background:var(--amber-bg);
       border:1px solid var(--amber-br);border-radius:var(--r-md);padding:6px 10px;margin-top:var(--s3)}
.ok{font-size:11px;line-height:15px;color:var(--green);background:var(--green-bg);
    border:1px solid var(--green-br);border-radius:var(--r-md);padding:6px 10px;margin-top:var(--s3)}

/* ── internal links · crawl paths ─────────────────────── */
.links{margin:var(--s6) 0;padding-top:var(--s6);border-top:1px solid var(--border)}
.linkrow{display:flex;flex-wrap:wrap;gap:var(--s2);margin-bottom:var(--s4)}
.linkrow a{font-size:var(--xs);color:var(--brand);text-decoration:none;
           border:1px solid var(--border);border-radius:var(--r-full);padding:6px 12px}

/* ── gallery ──────────────────────────────────────────── */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);margin-top:var(--s3)}
.gal i{aspect-ratio:1;border-radius:var(--r-md);background:var(--bg2);border:1px solid var(--border);display:block}

/* ── price table ──────────────────────────────────────── */
.ptab{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--border);
      border-radius:var(--r-2xl);overflow:hidden;margin-top:var(--s3);font-size:var(--sm)}
.ptab th,.ptab td{padding:var(--s3) var(--s35);text-align:start;border-bottom:1px solid var(--border)}
.ptab th{background:var(--bg2);font-size:var(--xs);color:var(--muted);font-weight:600}
.ptab tr:last-child td{border-bottom:0}
.ptab td b{color:var(--brand)}

/* ── faq ──────────────────────────────────────────────── */
.faq{border:1px solid var(--border);border-radius:var(--r-2xl);padding:var(--s35);margin-bottom:var(--s2)}
.faq h3{color:var(--brand)}
.faq p{font-size:var(--xs);line-height:18px;color:var(--muted);margin-top:var(--s1)}

/* ── footer ───────────────────────────────────────────── */
footer{background:var(--bg2);border-top:1px solid var(--border);padding:var(--s6) 0;
       margin-top:var(--s6);font-size:var(--xs);color:var(--muted)}
footer a{color:var(--muted);text-decoration:none;margin-inline-end:var(--s3)}

/* ── modal ────────────────────────────────────────────── */
.ovl{position:fixed;inset:0;background:rgba(10,10,10,.45);z-index:30;display:grid;place-items:end center}
.sheet{background:var(--bg);width:100%;max-width:520px;border-radius:var(--r-3xl) var(--r-3xl) 0 0;
       padding:var(--s5) var(--s4) var(--s6)}
.grab{width:36px;height:4px;border-radius:2px;background:var(--border);margin:0 auto var(--s4)}

/* production additions */
.lang a{text-decoration:none}
.num-ok{text-align:center;font-size:18px;font-weight:700;padding:12px;background:var(--green-bg);border:1px solid var(--green-br);color:var(--green);border-radius:var(--r-md);margin-top:var(--s3)}
/* mobile tap targets — lang toggle bumped from 29px to ~38px (audit 2026-08-19) */
.lang button{padding:8px 13px;min-height:38px}
.hdr-link{padding:8px 4px}
.lb{position:fixed;inset:0;z-index:100;background:rgba(10,10,10,.92);display:grid;place-items:center;padding:20px}
.lb img{max-width:100%;max-height:88vh;border-radius:12px;box-shadow:0 8px 40px rgba(0,0,0,.5)}
.lb .lb-x{position:absolute;top:14px;inset-inline-end:14px;width:40px;height:40px;border-radius:9999px;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:20px;line-height:1;cursor:pointer}
.lb .lb-x:hover{background:rgba(255,255,255,.28)}
body.lb-open{overflow:hidden}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:64px;border:0;border-radius:10px;background:rgba(255,255,255,.12);color:#fff;font-size:30px;line-height:1;cursor:pointer;display:grid;place-items:center}
.lb-nav:hover{background:rgba(255,255,255,.24)}.lb-prev{inset-inline-start:10px}.lb-next{inset-inline-end:10px}
.lb-count{position:absolute;top:18px;inset-inline-start:16px;color:#fff;font-size:13px;font-weight:600;background:rgba(0,0,0,.35);padding:4px 10px;border-radius:9999px}
.fan{display:flex;flex-shrink:0;align-items:center}
.fan img{width:44px;height:44px;border-radius:12px;object-fit:cover;border:2px solid #fff;box-shadow:0 1px 5px rgba(0,0,0,.14)}
.fan img:not(:first-child){margin-inline-start:-16px}
.cta2{display:flex;gap:8px;margin-top:12px}.cta2 .btn{margin-top:0;flex:1}
.gal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:12px}
.gal-grid a{display:block;aspect-ratio:1/1}
.gal-grid img{width:100%;height:100%;object-fit:cover;border-radius:10px;display:block}
@media(max-width:360px){.gal-grid{grid-template-columns:repeat(2,1fr)}}
.badge.new{background:#eff6ff;border-color:#bfdbfe;color:#1d4ed8}
.badge.sp{background:#fffbeb;border-color:#fcd34d;color:#b45309;font-weight:700}
.card.sp{border-color:#fcd34d;box-shadow:0 1px 8px rgba(245,158,11,.16)}
/* ── brand personality (2026-08-20): the original site's navy squiggle + pink accent ── */
body{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 260'%3E%3Cpath d='M-60 200 C 140 30 330 30 480 150 S 780 270 950 130 S 1160 20 1280 110' fill='none' stroke='%230a2463' stroke-width='9' stroke-linecap='round' opacity='0.06'/%3E%3Cpath d='M-40 60 C 120 160 260 170 420 90' fill='none' stroke='%233e92cc' stroke-width='7' stroke-linecap='round' opacity='0.07'/%3E%3C/svg%3E"),linear-gradient(180deg,#f4f8ff 0,#ffffff 340px);background-repeat:no-repeat,no-repeat;background-position:top center,top;background-size:1500px auto,100% 340px}
.head h1::after{content:'';display:block;width:64px;height:5px;border-radius:9999px;background:linear-gradient(90deg,#ec4899,#3e92cc);margin-top:10px}
.hico{display:inline-block;transform:translateY(1px)}
@media(hover:hover){.card{transition:box-shadow .16s ease,transform .16s ease}.card:hover{box-shadow:0 8px 26px rgba(10,36,99,.10);transform:translateY(-2px)}.chip{transition:background .12s ease}.chip:hover{background:var(--blue50)}}
footer{background:#0a2463;color:#c7d4ee;margin-top:44px}
footer .wrap{padding:26px 16px}
footer a{color:#a8c6ff;text-decoration:none;display:inline-block;padding:8px 4px}footer a:hover{text-decoration:underline}
.cards{display:grid;grid-template-columns:1fr;gap:12px;margin-top:4px}.cards .card{margin:0}
.rows{display:grid;grid-template-columns:1fr;gap:10px}.rows .row{margin:0}
/* ── DESKTOP layout (Ahmad 2026-08-19: mobile-first left huge side gutters on PC) ── */
@media(min-width:920px){
  .wrap{max-width:1100px}
  .cards{grid-template-columns:1fr 1fr;gap:14px}
  /* equal-height pairs: stretch cards to the row, pin CTAs to the bottom (Ahmad 2026-08-19) */
  .cards .card{height:100%;box-sizing:border-box}
  .cards .cbody{display:flex;flex-direction:column}
  .cards .cbody .cta2{margin-top:auto;padding-top:12px}
  .rows{grid-template-columns:1fr 1fr;gap:12px}
  .pgrid.has-gal{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:40px;align-items:start}
  .pgrid.has-gal .pside .gal-grid{margin-top:12px}
  .pgrid.has-gal .pside h2{margin-top:20px}
  .stats{max-width:560px}
}
.rq{position:fixed;inset:0;z-index:110;background:rgba(10,10,10,.55);display:grid;place-items:end center}
.rq-card{background:#fff;width:100%;max-width:520px;border-radius:20px 20px 0 0;padding:20px 16px calc(20px + env(safe-area-inset-bottom));animation:rqup .22s ease}
@keyframes rqup{from{transform:translateY(100%)}to{transform:translateY(0)}}
.rq-card h3{margin-bottom:4px}.rq-card .sub{margin-bottom:12px}
.rq-card textarea,.rq-card input{width:100%;padding:11px;border:1px solid var(--border);border-radius:8px;font-family:inherit;font-size:16px;margin-top:8px}
.rq-x{background:none;border:0;color:var(--muted);font:inherit;font-size:13px;width:100%;padding:10px;margin-top:6px;cursor:pointer}
body.rq-open{overflow:hidden}