/* ==========================================================================
   COMPONENTS — anything reused by two or more pages: chrome, buttons, badges,
   overlays, toast and the shimmer placeholders.
   ========================================================================== */
.top{position:sticky;top:0;z-index:40;background:rgba(15,46,94,.97);box-shadow:0 5px 24px rgba(4,18,40,.16)}
.top-in{height:68px;width:min(1240px,100% - 36px);margin:auto;display:flex;align-items:center;gap:18px}
.brand{display:flex;align-items:center;gap:10px;color:#fff;flex:none}
/* No frame of its own: the logo file is already a rounded tile with its own
   shadow, so a radius and a box-shadow here would only draw a second one. */
.brand-mark{width:35px;height:35px;display:grid;place-items:center}
.brand-mark svg{width:23px;height:23px}
.brand-name{font-family:var(--display);font-size:18px;font-weight:600;line-height:1}
.brand-name span{opacity:.7;font-weight:400}
.tabs{display:flex;gap:2px;margin-inline-start:16px}
.tab{padding:8px 15px;border-radius:999px;color:rgba(255,255,255,.72);font-size:13.5px;font-weight:600;transition:.2s;white-space:nowrap}
/* Every :hover in this file is gated on a real pointer. A touch screen has no
   hover, so the browser fakes one on tap and then leaves it stuck — the button
   sits there lit up long after the finger has gone, which reads as a stray
   animation. Keyboard focus is unaffected; that is :focus-visible in base.css. */
@media (hover:hover){ .tab:hover{background:rgba(255,255,255,.1);color:#fff} }
.tab.on{background:rgba(255,255,255,.16);color:#fff}
.tab b{display:inline-block;margin-inline-start:6px;background:#fff;color:#0A1A2F;font-size:11px;font-weight:700;border-radius:999px;padding:1px 7px;line-height:1.6}
.top-right{display:flex;align-items:center;gap:12px;margin-inline-start:auto}
/* "Back to site" — the only link on the chrome of pages that have no tabs. */
.top-back{
  display:inline-flex;align-items:center;gap:8px;
  color:rgba(255,255,255,.85);font-size:13.5px;font-weight:600;transition:color .2s;
}
@media (hover:hover){ .top-back:hover{color:#fff} }
.top-back svg{width:16px;height:16px}
html[dir="rtl"] .top-back svg{transform:scaleX(-1)}
.seg{display:flex;background:rgba(255,255,255,.14);border-radius:999px;padding:3px;flex:none}
.seg button{padding:5px 12px;border-radius:999px;color:rgba(255,255,255,.82);font-size:12px;font-weight:700;transition:.25s}
.seg button.on{background:#fff;color:var(--navy)}
.seg [data-lang="ur"]{font-family:"Noto Nastaliq Urdu",serif;padding-block:2px;font-size:13px}
.me{display:flex;align-items:center;gap:9px;color:#fff;font-size:13px;font-weight:600;flex:none}
.me-av{width:33px;height:33px;border-radius:50%;background:linear-gradient(150deg,#3C74CE,#1B4FA6);display:grid;place-items:center;font-size:12px;font-weight:700;border:1.5px solid rgba(255,255,255,.35)}
.logout-form{display:flex;flex:none}
.logout-btn{
  width:36px;height:36px;border-radius:11px;display:grid;place-items:center;flex:none;
  background:rgba(255,255,255,.13);color:rgba(255,255,255,.85);transition:.2s;
}
@media (hover:hover){ .logout-btn:hover{background:rgba(255,255,255,.24);color:#fff} }
.logout-btn svg{width:17px;height:17px}
/* The label only shows once the form has moved into the burger sheet. */
.logout-label{display:none}
html[dir="rtl"] .logout-btn svg{transform:scaleX(-1)}
/* Burger — phone only, where .tabs becomes a drawer. Same design as the
   landing page nav (landing.css .burger/.sheet) so both headers behave alike. */
.burger{
  display:none;flex-direction:column;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:11px;flex:none;
  background:rgba(255,255,255,.17);transition:background .2s,transform .2s var(--ease);
}
@media (hover:hover){ .burger:hover{background:rgba(255,255,255,.26)} }
.burger:active{transform:scale(.92)}
.burger i{display:block;width:18px;height:2px;background:#fff;border-radius:2px;transition:transform .3s var(--ease),opacity .18s}
.burger i + i{margin-top:3.6px}
.burger.on i:nth-child(1){transform:translateY(5.6px) rotate(45deg)}
.burger.on i:nth-child(2){opacity:0}
.burger.on i:nth-child(3){transform:translateY(-5.6px) rotate(-45deg)}
.badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.badge{
  display:inline-flex;align-items:center;gap:5px;border-radius:999px;
  padding:3px 10px;font-size:11px;font-weight:700;line-height:1.7;
}
.badge svg{width:11px;height:11px}
.badge.ok{background:#E8F7EE;color:var(--green);border:1px solid #C8EBD8}
/* How much of what the reader asked for a profile answers — the exact figure
   the listing is ordered by. */
.badge.match{background:var(--gold-soft);color:var(--gold);border:1px solid #EFDFBC}
.badge.match svg{fill:currentColor;opacity:.85}
.btn{
  min-height:44px;border-radius:999px;padding:0 18px;font-size:13.5px;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:.22s var(--ease);
}
.btn svg{width:16px;height:16px;flex:none}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 6px 17px rgba(27,79,166,.24);flex:1}
@media (hover:hover){ .btn-primary:hover{background:var(--navy);transform:translateY(-1px)} }
.btn-ghost{background:#fff;color:var(--muted);border:1.5px solid var(--line)}
@media (hover:hover){ .btn-ghost:hover{border-color:var(--blue);color:var(--blue)} }
.btn-wa{background:#fff;border:1.5px solid var(--line);color:var(--green);width:46px;padding:0;flex:none}
.btn-reject{background:#fff;border:1.5px solid var(--line);color:var(--light);width:46px;padding:0;flex:none}
@media (hover:hover){ .btn-reject:hover{border-color:#E0A9A5;color:var(--error);background:#FDF4F3} }
.btn-reject svg{width:19px;height:19px}
.sheet-foot .btn-reject{width:52px;padding:0;flex:none}
@media (hover:hover){ .btn-wa:hover{border-color:var(--wa);background:rgba(37,211,102,.07)} }
.btn-wa svg{width:19px;height:19px}
/* Same button as .btn-wa, but it carries the "Fetch Number" label — used on the
   profiles the admin recorded extra numbers for. */
.btn-fetch{background:#fff;border:1.5px solid var(--line);color:var(--green);padding:0 14px;gap:7px;flex:none;white-space:nowrap}
@media (hover:hover){ .btn-fetch:hover{border-color:var(--wa);background:rgba(37,211,102,.07)} }
.btn-fetch svg{width:18px;height:18px}
/* On the narrowest cards the label would push the rest of the row out, so the
   button falls back to the icon it shares with .btn-wa. */
@media(max-width:400px){ .btn-fetch{width:46px;padding:0} .btn-fetch span{display:none} }
.toast{
  position:fixed;z-index:90;inset-block-end:22px;inset-inline:0;margin-inline:auto;
  width:max-content;max-width:calc(100% - 32px);
  display:none;align-items:center;gap:16px;
  background:#12233C;color:#fff;border-radius:14px;
  padding:13px 15px 13px 19px;box-shadow:0 16px 44px rgba(4,18,40,.4);
  font-size:14px;
}
.toast.show{display:flex;animation:toastIn .3s var(--ease) both}
.toast span{line-height:1.5}
.toast button{
  flex:none;background:rgba(255,255,255,.15);color:#fff;border-radius:999px;
  padding:7px 15px;font-size:13px;font-weight:700;transition:.2s;
}
@media (hover:hover){ .toast button:hover{background:rgba(255,255,255,.28)} }
body.ur .toast{line-height:1.9;font-size:14.5px}
body.ur .toast button{line-height:1.8;padding-block:4px}
@media(max-width:560px){
  .toast{inset-block-end:14px;width:calc(100% - 24px);justify-content:space-between}
}
.scrim{
  position:fixed;inset:0;z-index:60;display:none;
  background:rgba(6,20,42,.55);
  -webkit-backdrop-filter:blur(10px) saturate(120%);backdrop-filter:blur(10px) saturate(120%);
  padding:24px 18px;
  animation:fadeIn .22s var(--ease) both;
}
.scrim.open{display:flex;align-items:center;justify-content:center}
.scrim,.gate{-webkit-overflow-scrolling:touch}
.sheet{
  width:min(920px,100%);background:#fff;border-radius:24px;
  box-shadow:var(--shadow-3);overflow:hidden;
  max-height:88vh;max-height:88svh;
  display:flex;flex-direction:column;
  animation:sheetIn .32s var(--ease) both;
}
.sheet-scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.grab{display:none}
.sheet-top{
  flex:none;z-index:3;background:#fff;
  border-bottom:1px solid var(--line);padding:13px 20px;
  display:flex;align-items:center;gap:12px;
}
.sheet-top h2{font-family:var(--display);font-size:18px;font-weight:600;flex:1;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.icon-btn{
  width:40px;height:40px;border-radius:12px;flex:none;display:grid;place-items:center;
  color:var(--muted);border:1.5px solid var(--line);background:#fff;transition:.2s;
}
@media (hover:hover){ .icon-btn:hover:not(:disabled){border-color:var(--blue);color:var(--blue)} }
.icon-btn:disabled{opacity:.4;cursor:not-allowed}
.icon-btn svg{width:17px;height:17px}
html[dir="rtl"] .nav-arrow svg{transform:scaleX(-1)}
.pos{font-size:12.5px;color:var(--muted);font-weight:600;flex:none}
.sheet-hero{
  background:linear-gradient(160deg,#0B2447 0%,#123A72 52%,#17509A 100%);
  color:#fff;padding:26px 28px;display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap;
}
.hero-locked{
  width:118px;height:118px;border-radius:20px;flex:none;position:relative;overflow:hidden;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
  display:grid;place-items:center;
}
.hero-locked .mesh{position:absolute;inset:0;width:100%;height:100%;opacity:.28}
.hero-locked svg.lk{width:28px;height:28px;color:#fff;opacity:.8;position:relative;z-index:1}
.hero-locked small{
  position:absolute;z-index:2;inset-block-end:0;inset-inline:0;background:rgba(4,18,40,.6);
  font-size:8.5px;font-weight:700;letter-spacing:.05em;text-align:center;padding:3px 2px;line-height:1.4;
}
.hero-who{flex:1;min-width:220px}
.hero-who h3{font-family:var(--display);font-size:clamp(24px,3vw,31px);font-weight:600;line-height:1.15}
.hero-line{color:rgba(255,255,255,.78);font-size:15px;margin-top:6px}
.hero-badges{display:flex;gap:7px;flex-wrap:wrap;margin-top:13px}
.hero-badges .badge{background:rgba(255,255,255,.13);color:#fff;border:1px solid rgba(255,255,255,.22)}
.hero-badges .badge.ok{background:rgba(116,216,164,.18);color:#A9EFC6;border-color:rgba(116,216,164,.35)}
.hero-badges .badge.match{background:rgba(232,185,79,.18);color:#F0D08A;border-color:rgba(232,185,79,.36)}
.sheet-body{padding:24px 28px 20px;display:grid;gap:16px}
/* White on purpose: the head band below is --mist, and the page these blocks
   sit on (my-profile) is --mist too — without a paper-coloured body the band
   vanishes into the page and every section loses its title strip. Inside the
   browse sheet the parent is already white, so nothing changes there. */
.block{background:var(--paper);border:1px solid var(--line);border-radius:15px;overflow:hidden}
.block-head{background:var(--mist);padding:12px 16px;display:flex;align-items:center;gap:9px}
.block-head svg{width:16px;height:16px;color:var(--blue);flex:none}
.block-head strong{font-size:13.5px}
.block-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px 26px;padding:8px 16px 16px}
.item{padding:9px 0;border-bottom:1px solid #F1F5FA}
.item small{display:block;color:var(--muted);font-size:12px;margin-bottom:4px;line-height:1.5}
.item span{font-size:14.5px;font-weight:600;line-height:1.55;overflow-wrap:anywhere}
.item.wide{grid-column:1/-1}
.item.wide span{font-weight:500;color:#243B57;line-height:1.75}
.sheet-foot{
  flex:none;background:#fff;
  border-top:1px solid var(--line);padding:14px 28px;display:flex;gap:10px;align-items:center;
}
.sheet-foot .btn-primary{flex:1}
.gate{
  position:fixed;inset:0;z-index:80;display:none;
  background:rgba(6,20,42,.6);
  -webkit-backdrop-filter:blur(10px) saturate(120%);backdrop-filter:blur(10px) saturate(120%);
  padding:24px 18px;
  animation:fadeIn .22s var(--ease) both;
}
.gate.open{display:flex;align-items:center;justify-content:center}
.gate-box{
  width:min(540px,100%);background:#fff;border-radius:22px;
  box-shadow:var(--shadow-3);overflow:hidden;
  max-height:88vh;max-height:88svh;
  display:flex;flex-direction:column;
  animation:sheetIn .28s var(--ease) both;
}
.gate-head{flex:none}
/* min-height:0 lets this flex child shrink below its content, which is what
   makes the requirement rows scroll inside the box instead of being clipped */
.gate-list{
  flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain;
}
.gate-note,.gate-foot{flex:none}
.gate-head{display:flex;gap:14px;padding:22px 24px 16px;align-items:flex-start}
.gate-ico{
  width:44px;height:44px;border-radius:14px;flex:none;display:grid;place-items:center;
  background:#FDF3E3;color:var(--gold);border:1px solid #F0DFC0;
}
.gate-ico svg{width:22px;height:22px}
.gate-head h3{font-family:var(--display);font-size:20px;font-weight:600;line-height:1.25}
.gate-head p{color:var(--muted);font-size:13.5px;margin-top:4px;line-height:1.6}
.gate-list{margin:0 24px;border:1px solid var(--line);border-radius:14px}
.gate-row{display:flex;gap:14px;padding:11px 15px;border-bottom:1px solid #F1F5FA;font-size:14.5px}
.gate-row:last-child{border-bottom:0}
.gate-row dt{color:var(--muted);flex:none;width:112px;font-size:13.5px}
.gate-row dd{font-weight:600;flex:1;overflow-wrap:anywhere}
.gate-row.note dd{font-weight:500;color:#243B57;line-height:1.7}
/* The fetched numbers: one row per number, with the channels it may be used on. */
.num-list{
  flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  margin:0 24px;border:1px solid var(--line);border-radius:14px;
}
.num-row{
  display:flex;gap:12px;align-items:center;flex-wrap:wrap;
  padding:12px 15px;border-bottom:1px solid #F1F5FA;
}
.num-row:last-child{border-bottom:0}
.num-who{color:var(--muted);font-size:13px;flex:none;width:88px}
.num-value{font-weight:600;font-size:15px;flex:1;direction:ltr;overflow-wrap:anywhere}
.num-acts{display:flex;gap:8px;flex:none}
.num-acts .btn{padding:7px 12px;font-size:13px}
.num-acts .btn svg{width:17px;height:17px}
.num-empty{padding:16px;color:var(--muted);font-size:14px;text-align:center}
@media(max-width:560px){
  .num-list{margin-inline:18px}
  .num-who{width:100%}
}

.gate-note{
  display:flex;gap:10px;align-items:flex-start;margin:16px 24px 0;
  background:var(--mist);border-radius:13px;padding:13px 15px;
  font-size:13px;line-height:1.65;color:#2C3F58;
}
.gate-note svg{width:16px;height:16px;flex:none;margin-top:3px;color:var(--blue)}
.gate-foot{display:flex;gap:10px;padding:18px 24px 22px}
.gate-ico.danger{background:#FDF3F2;color:var(--error);border-color:#F2D6D3}
.btn-danger{background:var(--error);color:#fff;flex:1;box-shadow:0 6px 17px rgba(180,35,24,.22)}
@media (hover:hover){ .btn-danger:hover{background:#8F1B12;transform:translateY(-1px)} }
.gate-foot .btn-ghost{flex:none;padding-inline:20px}
body.ur .gate-head h3{line-height:1.7}
body.ur .gate-head p,body.ur .gate-note,body.ur .gate-row{line-height:2.1}
@media(max-width:560px){
  .gate{padding:12px 12px calc(12px + env(safe-area-inset-bottom))}
  .gate-box{
    border-radius:24px;max-height:86vh;max-height:86svh;
    animation:sheetUp .3s var(--ease) both;
  }
  .gate-list{margin-inline:18px}
  .gate-head,.gate-note{padding-inline:18px}
  .gate-note{margin-inline:18px}
  .gate-foot{padding:16px 18px}
  .gate-row dt{width:96px}
}
.btn-wa-full{background:var(--green);color:#fff;box-shadow:0 6px 17px rgba(22,132,73,.22);flex:1}
@media (hover:hover){ .btn-wa-full:hover{background:#116A3A;transform:translateY(-1px)} }
body.ur .brand-name,body.ur .head h1,body.ur .card-who h3,body.ur .hero-who h3,
body.ur .sheet-top h2,body.ur .empty h3,body.ur button,body.ur input,body.ur select{font-family:"Noto Nastaliq Urdu",serif}
body.ur .head small,body.ur .badge{letter-spacing:0;text-transform:none}
body.ur .btn{line-height:1.8;padding-block:9px}
body.ur .tab{line-height:1.9;padding-block:5px}
body.ur .fact,body.ur .item span{line-height:2}
body.ur .item small,body.ur .fg label{line-height:1.9;font-size:12.5px}
body.ur .badge{line-height:2;padding-block:1px}
@media(max-width:1080px){
  /* keep the tabs — they are the portal's only navigation — drop the id chip */
  .me{display:none}
  .tabs{margin-inline-start:8px}
}
/* --------------------------------------------------------------------------
   SMALL SCREENS — the portal chrome collapses into the same burger + drop-down
   sheet the landing page uses (landing.css .nav/.sheet), at the same 980px
   breakpoint, so both headers look and behave identically on a phone.
   ui/nav.js watches the same width.
   -------------------------------------------------------------------------- */
@media(max-width:980px){
  .burger{display:flex}
  /* The tabs leave the bar and become the drawer — same markup as the desktop,
     so view switching and the counts carry on working untouched. */
  .tabs{
    display:none;flex-direction:column;gap:2px;margin:0;
    position:absolute;inset-block-start:100%;inset-inline:0;z-index:41;
    background:rgba(12,37,78,.95);
    -webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);
    padding:10px 20px calc(20px + env(safe-area-inset-bottom));
    border-bottom:1px solid rgba(255,255,255,.12);
    box-shadow:0 18px 34px rgba(4,18,40,.3);
  }
  .tabs.open{display:flex;animation:navSheetIn .3s var(--ease)}
  .tab{
    display:flex;align-items:center;text-align:start;
    color:#fff;background:none;border-radius:0;
    padding:13px 6px;font-size:15px;font-weight:500;
    border-bottom:1px solid rgba(255,255,255,.09);
  }
  .tab:last-child{border-bottom:0}
  .tab:hover{background:none}
  /* Log out rides into the sheet with the tabs (ui/nav.js moves the node) and
     reads as its last row instead of an icon squeezed into the bar. */
  .top-right .logout-form{display:none}
  .tabs .logout-form{display:flex;width:100%}
  .tabs .logout-btn{
    width:100%;height:auto;background:none;border-radius:0;color:#fff;
    display:flex;align-items:center;justify-content:flex-start;gap:10px;
    padding:13px 6px;font-size:15px;font-weight:500;
    border-top:1px solid rgba(255,255,255,.09);
  }
  .tabs .logout-btn:hover{background:none}
  .tabs .logout-label{display:inline}
  .tab.on{background:none;color:#F2CB80}
  .tab b{margin-inline-start:auto}
  body.ur .tab{line-height:1.9;padding-block:11px}
}
@media(max-width:760px){
  .top-in{width:calc(100% - 24px);gap:8px}
  .scrim{padding:12px 12px calc(12px + env(safe-area-inset-bottom))}
  .sheet{
    border-radius:24px;width:100%;
    max-height:86vh;max-height:86svh;
    animation:sheetUp .34s var(--ease) both;
  }
  .grab{
    display:block;flex:none;padding:9px 0 3px;cursor:grab;touch-action:none;
  }
  .grab::before{
    content:"";display:block;width:42px;height:4.5px;border-radius:999px;
    background:#CBD8E8;margin:0 auto;
  }
  .sheet.dragging{animation:none;transition:none}
  .sheet-top{padding:8px 14px 11px;border-bottom:1px solid var(--line)}
  .sheet-hero{padding:20px;gap:16px}
  .hero-locked{width:80px;height:80px;border-radius:16px}
  .sheet-body{padding:18px 20px 16px}
  .block-grid{grid-template-columns:1fr;padding:6px 14px 12px}
  .sheet-foot{padding:12px 16px}
}
/* Phone — same compact bar as the landing nav at this width: shorter chrome,
   brand cut to one word, smaller language switch and burger. */
@media(max-width:640px){
  .top-in{height:58px;gap:10px}
  .top-right{gap:8px}
  .brand{gap:8px}
  .brand-mark{width:30px;height:30px}
  .brand-mark svg{width:20px;height:20px}
  .brand-name{font-size:16px}
  .brand-name span{display:none}
  .seg{padding:2.5px}
  .seg button{padding:4px 9px;font-size:11.5px}
  .seg [data-lang="ur"]{font-size:11.5px}
  .burger{width:34px;height:34px;border-radius:10px}
  .top-back span{display:none}
  .top-back{padding:4px}
}
@keyframes navSheetIn{
  from{opacity:0;transform:translateY(-10px)}
  to{opacity:1;transform:none}
}
@keyframes toastIn{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}
@keyframes fadeIn{
  from{opacity:0}
  to{opacity:1}
}
@keyframes sheetIn{
  from{opacity:0;transform:translateY(22px) scale(.985)}
  to{opacity:1;transform:none}
}

/* ==========================================================================
   SKELETON / SHIMMER
   Shown while a request is in flight. Each block mirrors the box of the real
   element it stands in for, so nothing jumps when the data lands.
   ========================================================================== */
.sk{position:relative;overflow:hidden;background:var(--skeleton-base);border-radius:8px}
.sk::after{
  content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent 0%,var(--skeleton-sheen) 50%,transparent 100%);
  animation:sheen 1.25s var(--ease) infinite;
}
html[dir="rtl"] .sk::after{animation-name:sheenRtl}
@keyframes sheen{100%{transform:translateX(100%)}}
@keyframes sheenRtl{100%{transform:translateX(-200%)}}
@media (prefers-reduced-motion:reduce){.sk::after{display:none}}

.sk-text{height:12px;border-radius:6px}
.sk-text.lg{height:18px;border-radius:7px}
.sk-text.sm{height:10px}
.sk-w-25{width:25%}.sk-w-33{width:33%}.sk-w-40{width:40%}.sk-w-50{width:50%}
.sk-w-60{width:60%}.sk-w-70{width:70%}.sk-w-85{width:85%}.sk-w-100{width:100%}
.sk-circle{border-radius:50%}
.sk-block{border-radius:14px}

/* screen readers get a word rather than a wall of empty boxes */
.sk-label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* The site logo inside the brand mark — the bundled one, or whatever admin
   uploaded over it. The artwork is transparent (and an uploaded one may be
   either), so the tile is painted flat white underneath rather than left as
   the gradient the old line-art mark was drawn on. The logo brings its own
   background, corners and margin — the frame adds none of them. */
.brand-mark img{width:100%;height:100%;object-fit:contain;display:block}

/* Keep LTR values (phone, height, dates) readable inside the RTL layout. */
.item span,.gate-row dd{unicode-bidi:plaintext}
/* …but plaintext also decides the alignment from the value itself, so a purely
   numeric one — 5'4" – 5'8" — resolves to LTR and drifts to the far left of an
   Urdu row. The glyphs stay latin; only the box is pulled back to the start. */
html[dir="rtl"] .gate-row dd,
html[dir="rtl"] .item{text-align:right}

/* ==========================================================================
   SITE FOOTER
   The landing page's footer (landing.css .foot) for every other front-end
   page. Same four columns, socials and bottom line — carried here rather than
   shared with landing.css because the two pages load different stylesheets.
   Markup: resources/views/frontend/partials/footer.blade.php
   ========================================================================== */
.site-foot{
  background:#08172B;color:rgba(255,255,255,.68);
  padding:56px 0 0;margin-top:auto;
}
.site-foot-in{width:min(1240px,100% - 36px);margin:auto}
.site-foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:44px;padding-bottom:44px}
.site-foot .brand-name{color:#fff}
.site-foot-about{margin-top:16px;font-size:14px;max-width:300px;line-height:1.75}
.site-foot h4{
  color:#fff;font-family:var(--display);font-size:14px;font-weight:600;
  letter-spacing:.02em;margin-bottom:16px;
}
.site-foot ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.site-foot ul a,.site-foot ul span{font-size:14px}
.site-foot ul a{transition:color .2s}
@media (hover:hover){ .site-foot ul a:hover{color:#fff} }
.socials{display:flex;gap:10px;margin-top:18px}
.soc{
  width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.08);
  display:grid;place-items:center;color:#fff;flex:none;
  transition:transform .25s var(--ease),background .25s;
}
.soc svg{width:18px;height:18px}
@media (hover:hover){
  .soc:hover{transform:translateY(-3px)}
  .soc.fb:hover{background:#1877F2}
  .soc.wa:hover{background:var(--wa)}
  .soc.ig:hover{background:linear-gradient(45deg,#F09433,#DC2743,#BC1888)}
  .soc.em:hover{background:var(--blue)}
}
.site-foot-bot{
  border-top:1px solid rgba(255,255,255,.09);padding:22px 0;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:13px;
}
body.ur .site-foot h4{font-family:var(--urdu);line-height:2}
body.ur .site-foot-about{line-height:2.5}
body.ur .site-foot ul a,body.ur .site-foot ul span,body.ur .site-foot-bot{line-height:2.1}
@media(max-width:980px){
  .site-foot-grid{grid-template-columns:1fr 1fr;gap:34px}
}
@media(max-width:640px){
  .site-foot{padding-top:42px}
  .site-foot-in{width:calc(100% - 32px)}
  .site-foot-grid{grid-template-columns:1fr;gap:30px;padding-bottom:30px}
  .site-foot-about{max-width:none}
  .site-foot-bot{
    justify-content:center;text-align:center;gap:6px;
    padding:18px 0 calc(20px + env(safe-area-inset-bottom));
  }
}

/* ==========================================================================
   SEARCHABLE SELECT — Select2-style dropdown built by ui/searchable-select.js.
   The control's box look (border, height, arrow) comes from the page sheet
   (.field select / .fg select rules also target .ss-control), so it sits in
   the layout exactly like the native select it replaces.
   ========================================================================== */
.ss{position:relative;min-width:0}
.ss-native{display:none !important}
.ss-control{
  display:flex;align-items:center;text-align:start;cursor:pointer;
  font:inherit;color:var(--ink);
}
.ss-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ss-control.ss-empty .ss-label{color:var(--light)}
.ss-panel{
  position:absolute;z-index:30;inset-inline:0;top:calc(100% + 7px);
  background:#fff;border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow-2);display:none;overflow:hidden;
}
.ss.open .ss-panel{display:block;animation:ssIn .22s var(--ease) both}
.ss.up .ss-panel{top:auto;bottom:calc(100% + 7px)}
@keyframes ssIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.ss-search{padding:10px 10px 8px;border-bottom:1px solid var(--line)}
.ss-search input{
  width:100%;border:1.5px solid var(--line);border-radius:10px;
  padding:8px 12px;font:inherit;font-size:13.5px;background:#fff;color:var(--ink);
}
.ss-search input:focus{outline:none;border-color:var(--blue)}
.ss-options{max-height:230px;overflow-y:auto;padding:6px}
.ss-option{
  display:flex;align-items:center;gap:10px;border-radius:9px;
  padding:8px 11px;font-size:14px;cursor:pointer;transition:background .15s;
}
.ss-option span{flex:1;min-width:0;line-height:1.7}
body.ur .ss-option span{line-height:2}
.ss-option.hi{background:var(--mist)}
.ss-option.hidden{display:none}
.ss-option.on{background:var(--blue-soft);color:var(--navy);font-weight:600}
.ss-option.on svg{width:14px;height:14px;flex:none;color:var(--blue)}
.ss-empty-msg{padding:12px;color:var(--light);font-size:13px;text-align:center}
/* Matched profiles: call sits next to WhatsApp, same weight, different colour */
.btn-call{background:#fff;border:1.5px solid var(--line);color:var(--blue);width:46px;padding:0;flex:none}
@media (hover:hover){ .btn-call:hover{border-color:var(--blue);background:var(--blue-soft)} }
.btn-call svg{width:19px;height:19px}
.sheet-foot .btn-call{width:auto;padding-inline:18px;gap:8px}
.sheet-foot .btn-call[hidden]{display:none}