/* ===========================================================================
   Bayet (بيت الوطن) — a section of aqaratk.net
   ---------------------------------------------------------------------------
   Drawn inside the site's own header and footer, in Aqaratk's navy and gold,
   with Cairo type. Everything here is scoped under .bx (the section wrapper)
   so none of it reaches the rest of the site, and class names the site's
   style.css already uses (card, chip, kpi, hero...) carry a b- prefix here so
   the site's rules cannot reach in either.

   Colours live in the tokens on .bx and nowhere else. Available is green and
   reserved is red everywhere, from the map to a table cell. Light only, like
   the rest of Aqaratk. Arabic only, right to left, whatever language the
   visitor chose elsewhere.
   =========================================================================== */
.bx{
  --bg:#FAF9F7; --surface:#FFFFFF; --surface-2:#F4F2EF; --ink:#0F1729; --ink-2:#3D4A5C; --ink-3:#617086; --line:#E7E5E1;
  --brand:#0B1B33; --brand-2:#C9A227; --brand-ink:#FFFFFF; --brand-soft:#EEF1F6; --brand-dark:#0B1B33; --gold-dark:#886B12;
  --avail:#047857; --avail-soft:#E3F5EE; --resv:#C81E1E; --resv-soft:#FDECEC; --star:#C9A227; --warn:#B35309; --warn-soft:#FFF8E6;
  --hero-ink:#FFFFFF; --hero-ink-2:rgba(255,255,255,.82);
  --hero-overlay:linear-gradient(245deg,rgba(11,27,51,.95) 0%,rgba(11,27,51,.84) 46%,rgba(11,27,51,.3) 88%);
  --glass:rgba(255,255,255,.1); --glass-line:rgba(255,255,255,.2); --blur:blur(10px);
  --grad:linear-gradient(135deg,#0B1B33,#16325B);
  --pal:#1E3E69,#16325B,#132B4D,#24497A,#1A3960,#2B5285; --pal-road:#0E2240; --pal-green:#2C5A4E;
  --fd:"Cairo","Tajawal","Segoe UI",Tahoma,sans-serif; --fb:"Cairo","Tajawal","Segoe UI",Tahoma,sans-serif;
  --r:14px; --r-sm:12px; --r-xs:9px;
  --shadow:0 4px 6px -1px rgba(11,27,51,.05),0 12px 20px -10px rgba(11,27,51,.08);
  direction:rtl;text-align:right;color:var(--ink);font:15px/1.7 var(--fb);background:var(--bg);
}
.bx *,.bx *::before,.bx *::after{box-sizing:border-box}
.bx a{color:var(--brand-dark);text-decoration:none}
.bx a:hover{text-decoration:underline}
.bx :focus-visible{outline:2px solid var(--brand-2);outline-offset:2px;border-radius:6px}
.bx img,.bx svg,.bx canvas{max-width:100%}
.bx h1,.bx h2,.bx h3{font-family:var(--fd);color:var(--brand)}
.bx .num{font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
.bx .b-muted{color:var(--ink-3)}
.bx .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:no-preference){.bx .bt,.bx .b-card,.bx .b-chip{transition:background-color .15s,border-color .15s,transform .15s,box-shadow .15s}}
.bx .bt{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 14px/1 var(--fb);padding:11px 18px;border-radius:99px;border:0;cursor:pointer;
  background:var(--grad);color:var(--brand-ink)!important;text-decoration:none!important;white-space:nowrap;box-shadow:0 10px 22px -12px var(--brand)}
.bx .bt:hover{transform:translateY(-1px)}
.bx .bt.ghost{background:transparent;color:var(--ink)!important;box-shadow:none}
.bx .bt.ghost:hover{background:var(--surface-2)}
.bx .bt.soft{background:var(--brand-soft);color:var(--brand-dark)!important;box-shadow:none}
.bx .bt.danger{background:var(--resv-soft);color:var(--resv)!important;box-shadow:none}
.bx .bt.sm{padding:9px 14px;font-size:13px}
.bx .bt[disabled]{opacity:.5;cursor:not-allowed;transform:none}

.bx .notice{font-size:12.5px;color:var(--ink-2);text-align:center;padding:6px 12px 0}
.bx .flash{margin-block:10px 0;padding:12px 16px;border-radius:var(--r-sm);font-weight:500;background:var(--brand-soft);color:var(--brand-dark)}
.bx .flash.error,.bx .flash.danger{background:var(--resv-soft);color:var(--resv)}
.bx .flash.warning{background:var(--warn-soft);color:var(--warn)}

/* ---- Hero ---------------------------------------------------------------- */
.bx .b-hero{position:relative;border-radius:var(--r);overflow:hidden;min-height:420px;display:flex;align-items:flex-end;margin-top:4px}
.bx .b-hero canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.bx .b-hero::after{content:"";position:absolute;inset:0;background:var(--hero-overlay)}
.bx .hbody{position:relative;z-index:1;padding:44px 44px 40px;max-width:720px;flex:1;min-width:0}
.bx .b-eyebrow{display:inline-flex;align-items:center;gap:8px;font:600 12.5px/1 var(--fb);color:var(--hero-ink);background:var(--glass);border:1px solid var(--glass-line);
  padding:8px 12px;border-radius:99px;backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)}
.bx .b-eyebrow b{width:8px;height:8px;border-radius:50%;background:var(--resv);box-shadow:0 0 0 4px var(--resv-soft)}
.bx .hbody h1{font:800 clamp(30px,5vw,46px)/1.22 var(--fd);color:var(--hero-ink);margin:16px 0 10px;text-wrap:balance}
.bx .hbody h1 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.bx .hbody p{font-size:16.5px;color:var(--hero-ink-2);margin:0 0 22px;max-width:52ch}
.bx .search{display:flex;align-items:center;gap:10px;background:var(--surface);border-radius:99px;padding:7px;box-shadow:0 18px 40px -20px rgba(0,0,0,.35);max-width:620px}
.bx .search .b-ic{width:40px;height:40px;border-radius:50%;background:var(--surface-2);display:grid;place-items:center;color:var(--ink-3);flex:none}
.bx .search input{flex:1;min-width:0;border:0;background:transparent;font:15px var(--fb);color:var(--ink);outline:none}
.bx .search input::placeholder{color:var(--ink-3)}
.bx .floats{position:absolute;inset-inline-end:36px;bottom:36px;z-index:1;display:grid;gap:10px;width:230px}
.bx .fl{background:var(--glass);border:1px solid var(--glass-line);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border-radius:var(--r-sm);padding:12px 14px;
  display:flex;align-items:center;gap:12px;color:var(--hero-ink)}
.bx .fl .n{display:block;font:800 24px/1.1 var(--fd)}
.bx .fl .t{font-size:12.5px;color:var(--hero-ink-2)}
.bx .dot{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;flex:none;font-weight:700}
.bx .dot.g{background:var(--avail-soft);color:var(--avail)}
.bx .dot.r{background:var(--resv-soft);color:var(--resv)}
@media (max-width:860px){.bx .b-hero{min-height:0;flex-direction:column;align-items:stretch}.bx .hbody{padding:30px 22px 26px}.bx .floats{position:relative;inset:auto;width:auto;display:flex;flex-wrap:wrap;padding:0 22px 22px}
  .bx .floats .fl{flex:1 1 150px}}

/* ---- Bento --------------------------------------------------------------- */
.bx .bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px;margin-block:16px}
.bx .b-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px;box-shadow:var(--shadow);min-width:0}
.bx .b-card h2,.bx .b-card h3{font:700 17px/1.3 var(--fd);margin:0 0 14px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.bx .b-card h2 small,.bx .b-card h3 small{font:500 12.5px/1.3 var(--fb);color:var(--ink-3)}
.bx .s3{grid-column:span 3}.bx .s4{grid-column:span 4}.bx .s5{grid-column:span 5}.bx .s6{grid-column:span 6}.bx .s7{grid-column:span 7}.bx .s8{grid-column:span 8}.bx .s12{grid-column:1/-1}
@media (max-width:980px){.bx .s3,.bx .s4,.bx .s5{grid-column:span 6}.bx .s6,.bx .s7,.bx .s8{grid-column:1/-1}}
@media (max-width:620px){.bx .bento>*{grid-column:1/-1}}
.bx .b-kpi .l{font-size:13px;color:var(--ink-2)}
.bx .b-kpi .v{display:block;font:800 34px/1.15 var(--fd);margin-top:4px}
.bx .b-kpi .s{font-size:12.5px;color:var(--ink-3)}
.bx .b-kpi.r .v{color:var(--resv)} .bx .b-kpi.g .v{color:var(--avail)}
.bx .split{display:flex;gap:10px;margin-top:10px}
.bx .split span{flex:1;background:var(--surface-2);border-radius:var(--r-xs);padding:8px 10px;font-size:12px;color:var(--ink-2)}
.bx .split b{display:block;font:700 15px/1.3 var(--fd);color:var(--ink)}
.bx .bar{height:8px;border-radius:99px;background:var(--avail-soft);overflow:hidden;display:flex}
.bx .bar i{display:block;height:100%;background:var(--resv);border-radius:99px}
.bx .cities{display:grid;gap:10px}
.bx .city{display:grid;grid-template-columns:minmax(0,150px) 1fr 120px;gap:12px;align-items:center;font-size:13.5px}
.bx .city .n{font-size:12.5px;color:var(--ink-3);text-align:left}
.bx .city .n b{color:var(--ink);font-weight:600}
@media (max-width:620px){.bx .city{grid-template-columns:1fr 90px}.bx .city .bar{grid-column:1/-1;order:3}}
.bx .legend{display:flex;gap:14px;font-size:12px;color:var(--ink-3);margin-top:12px}
.bx .legend i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-inline-end:6px}
.bx .empty{text-align:center;padding:48px 20px}
.bx .empty h2{justify-content:center;font-size:22px}
.bx .empty p{color:var(--ink-2);max-width:48ch;margin:0 auto 18px}

/* ---- Pages ---------------------------------------------------------------- */
.bx .ph{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-block:14px 16px}
.bx .ph h1{font:800 clamp(26px,4vw,34px)/1.2 var(--fd);margin:0}
.bx .ph p{margin:4px 0 0;color:var(--ink-2)}
.bx .b-chips{display:flex;flex-wrap:wrap;gap:8px}
.bx .b-chip{display:inline-flex;align-items:center;gap:6px;font-size:13px;padding:7px 12px;border-radius:99px;background:var(--surface-2);border:1px solid var(--line);color:var(--ink-2)}
.bx .b-chip b{font-weight:700;color:var(--ink)}
.bx .b-chip.g{background:var(--avail-soft);border-color:transparent;color:var(--avail)} .bx .b-chip.g b{color:var(--avail)}
.bx .b-chip.r{background:var(--resv-soft);border-color:transparent;color:var(--resv)} .bx .b-chip.r b{color:var(--resv)}
.bx .b-chip.w{background:var(--warn-soft);border-color:transparent;color:var(--warn)} .bx .b-chip.w b{color:var(--warn)}
.bx .tw{overflow-x:auto;border-radius:var(--r-sm);border:1px solid var(--line)}
.bx table.t{width:100%;border-collapse:collapse;font-size:13.5px;background:var(--surface)}
.bx table.t th{font:600 12.5px/1.3 var(--fb);color:var(--ink-3);text-align:right;padding:11px 14px;background:var(--surface-2);border-bottom:1px solid var(--line);white-space:nowrap}
.bx table.t td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.bx table.t tr:last-child td{border-bottom:0}
.bx .pill{display:inline-flex;align-items:center;font:600 12px/1 var(--fb);padding:6px 10px;border-radius:99px;white-space:nowrap}
.bx .pill.a{background:var(--avail-soft);color:var(--avail)}
.bx .pill.r{background:var(--resv-soft);color:var(--resv)}
.bx .pill.n{background:var(--surface-2);color:var(--ink-2)}
.bx .upload{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.bx .upload input[type=file]{flex:1 1 260px;font:14px var(--fb);padding:10px;border:1.5px dashed var(--line);border-radius:var(--r-sm);background:var(--surface-2);color:var(--ink-2)}
.bx .b-field{display:grid;gap:6px;margin-block:12px}
.bx .b-field label{font-weight:600;font-size:14px}
.bx .b-field input,.bx .b-field textarea{font:15px var(--fb);padding:11px 13px;border:1.5px solid var(--line);border-radius:var(--r-xs);background:var(--surface);color:var(--ink);width:100%;max-width:480px}
.bx .b-field textarea{max-width:100%}
.bx .b-field .b-hint{font-size:12.5px;color:var(--ink-3)}
.bx .acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.bx details.more summary{cursor:pointer;color:var(--brand-dark);font-weight:600;margin-top:10px}
.bx .soon{text-align:center;padding:60px 20px}
.bx .soon h1{font:800 30px/1.2 var(--fd);margin:14px 0 8px}
.bx .soon p{color:var(--ink-2);max-width:46ch;margin:0 auto 20px}
.bx .soon .b-badge{display:inline-block;font:600 12.5px/1 var(--fb);padding:8px 12px;border-radius:99px;background:var(--brand-soft);color:var(--brand-dark)}


/* ---- Plots list: filters beside results; one row per plot ----------------- */
.bx .sortf{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2)}
.bx .sortf select,.bx .fg select,.bx .fg input,.bx .savef input{font:14px var(--fb);padding:10px 12px;border:1.5px solid var(--line);border-radius:var(--r-xs);background:var(--surface);color:var(--ink);width:100%;min-width:0}
.bx .sortf select{width:auto}
.bx .lay{display:grid;grid-template-columns:290px minmax(0,1fr);gap:16px;align-items:start}
.bx .lay aside{display:grid;gap:14px}
@media (max-width:980px){.bx .lay{grid-template-columns:1fr}}
.bx .b-filters{padding:0}
.bx .b-filters summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:16px 20px;font:700 16px/1.2 var(--fd)}
.bx .b-filters summary::-webkit-details-marker{display:none}
.bx .b-filters summary::after{content:"⌄";margin-inline-start:auto;color:var(--ink-3);font-size:18px;line-height:1}
.bx .b-filters[open] summary::after{transform:rotate(180deg)}
.bx .b-filters summary .count{min-width:24px;height:24px;border-radius:99px;background:var(--brand-soft);color:var(--brand-dark);display:grid;place-items:center;font:700 12px/1 var(--fb)}
.bx .b-filters form{padding:0 20px 20px;border-top:1px solid var(--line)}
.bx .fg{display:grid;gap:7px;margin:14px 0 0;padding:0;border:0;min-width:0}
.bx .fg>label,.bx .fg legend{font:600 13px/1.3 var(--fb);color:var(--ink-2);padding:0}
.bx .fg legend{margin-bottom:7px}
.bx .seg{display:flex;background:var(--surface-2);border-radius:99px;padding:3px;gap:2px}
.bx .seg label{flex:1;position:relative;cursor:pointer}
.bx .seg input,.bx .checks input{position:absolute;opacity:0;pointer-events:none}
.bx .seg span{display:block;text-align:center;font-size:13px;padding:8px 6px;border-radius:99px;color:var(--ink-2);white-space:nowrap}
.bx .seg input:checked+span{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:0 1px 3px rgba(10,60,45,.12)}
.bx .seg input:focus-visible+span,.bx .checks input:focus-visible+span{outline:2px solid var(--brand);outline-offset:1px}
.bx .seg.sm{margin-top:8px}
.bx .seg.sm span{font-size:12px;padding:6px}
.bx .rng{display:flex;align-items:center;gap:8px;color:var(--ink-3)}
.bx .checks{display:flex;flex-wrap:wrap;gap:6px}
.bx .checks label{position:relative;cursor:pointer}
.bx .checks span{display:inline-block;font-size:13px;padding:7px 12px;border-radius:99px;border:1.5px solid var(--line);color:var(--ink-2)}
.bx .checks input:checked+span{border-color:var(--brand);background:var(--brand-soft);color:var(--brand-dark);font-weight:600}
.bx .b-filters .acts{margin-top:18px}
.bx .b-filters .acts .bt{flex:1}

.bx .saved h2{font-size:15px}
.bx .slist{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:4px}
.bx .slist li{display:flex;align-items:center;gap:8px;padding:6px 10px 6px 4px;border-radius:var(--r-xs);background:var(--surface-2)}
.bx .slist li a{flex:1;min-width:0;font-weight:500;overflow:hidden;text-overflow:ellipsis}
.bx .slist.wide li{padding:10px 14px 10px 8px}
.bx .slist.wide li a b{display:block}
.bx .slist.wide li a small{display:block;color:var(--ink-3);font-size:12.5px;font-weight:400}
.bx .x{width:30px;height:30px;border-radius:50%;border:0;background:transparent;color:var(--ink-3);font-size:18px;cursor:pointer;flex:none}
.bx .x:hover{background:var(--resv-soft);color:var(--resv)}
.bx .savef{display:flex;gap:8px}
.bx .b-chips.on{margin-bottom:12px}
.bx a.b-chip.x{width:auto;height:auto;font-size:13px;text-decoration:none;color:var(--ink)}
.bx a.b-chip.x span{color:var(--ink-3);font-size:15px;line-height:1}
.bx a.b-chip.x:hover{background:var(--resv-soft);border-color:transparent}

.bx .plist{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.bx .b-card .plist{box-shadow:none;border-radius:var(--r-sm)}
.bx .prow{display:grid;grid-template-columns:minmax(0,2.2fr) repeat(4,minmax(0,1fr)) 110px 44px;gap:12px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line);font-size:14px}
.bx .prow:last-child{border-bottom:0}
.bx .prow.head{background:var(--surface-2);font:600 12px/1.3 var(--fb);color:var(--ink-3);padding-block:10px}
.bx .prow:not(.head):hover{background:var(--surface-2)}
.bx .prow.dim .pid b,.bx .prow.dim .dn b{color:var(--ink-2)}
.bx .pid{display:grid;gap:2px;color:var(--ink)!important;text-decoration:none!important;min-width:0}
.bx .pid b{font:700 15px/1.3 var(--fd)}
.bx .pid small{color:var(--ink-3);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bx .pid:hover b{color:var(--brand-dark)}
.bx .tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px}
.bx .tag{font-size:11px;padding:3px 8px;border-radius:99px;background:var(--brand-soft);color:var(--brand-dark);font-weight:500}
.bx .dn b{font:700 15px/1.3 var(--fd)}
.bx .c small{display:block;font-size:11.5px;color:var(--ink-3)}
.bx .st{display:grid;justify-items:start;gap:3px}
.bx .starf{margin:0}
.bx .star{width:38px;height:38px;border-radius:50%;border:0;background:transparent;font-size:21px;line-height:1;color:var(--ink-3);cursor:pointer;display:grid;place-items:center;text-decoration:none!important}
.bx .star:hover{background:var(--surface-2);color:var(--star)}
.bx .star.on{color:var(--star)}
@media (max-width:760px){
  .bx .prow.head{display:none}
  .bx .prow{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 12px;padding:14px}
  .bx .pid{grid-column:1/3}
  .bx .sr-c{grid-column:3;grid-row:1;justify-self:end;align-self:start}
  .bx .prow .c[data-l]::before{content:attr(data-l);display:block;font-size:11.5px;color:var(--ink-3)}
  .bx .dn{grid-column:1/3}
  .bx .st{grid-column:3;justify-items:end;align-self:end}
}
.bx .pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;font-size:13px}
.bx .pgs,.bx .ppf{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.bx .pg{min-width:36px;height:36px;padding-inline:8px;border-radius:99px;display:grid;place-items:center;color:var(--ink-2);text-decoration:none!important}
.bx a.pg:hover{background:var(--surface-2)}
.bx .pg.on{background:var(--ink);color:var(--bg);font-weight:700}
.bx .gap{color:var(--ink-3);padding-inline:4px}

/* ---- One plot -------------------------------------------------------------- */
.bx .b-crumbs{font-size:13px;color:var(--ink-3);margin-block:10px 12px}
.bx .b-crumbs a{color:var(--ink-2)}
.bx .phead{position:relative;border-radius:var(--r);overflow:hidden;min-height:190px;display:flex;align-items:flex-end}
.bx .phead canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.bx .phead::after{content:"";position:absolute;inset:0;background:var(--hero-overlay)}
.bx .phead .in{position:relative;z-index:1;flex:1;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:26px 30px;color:var(--hero-ink)}
.bx .phead h1{font:800 clamp(28px,4.4vw,40px)/1.15 var(--fd);margin:10px 0 4px}
.bx .phead p{margin:0 0 4px;color:var(--hero-ink-2)}
.bx .phead .side{display:flex;align-items:center;gap:4px;background:var(--glass);border:1px solid var(--glass-line);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border-radius:99px;padding:3px 4px 3px 14px;font-size:13px;font-weight:600;white-space:nowrap}
@media (max-width:620px){.bx .phead .in{flex-direction:column;align-items:flex-start;padding:22px}}
.bx .phead+.flash{margin-top:14px}
.bx .price{margin:0;display:grid}
.bx .price div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px dashed var(--line);font-size:14px}
.bx .price dt{color:var(--ink-2)}
.bx .price dd{margin:0;font-weight:600}
.bx .price .sum{border-bottom-style:solid}
.bx .price .sum dt{color:var(--ink);font-weight:600}
.bx .price .hl{border:0;margin-top:8px;padding:12px 14px;border-radius:var(--r-xs);background:var(--brand-soft)}
.bx .price .hl dt,.bx .price .hl dd{color:var(--brand-dark);font-weight:700}
.bx .fine{font-size:12px;margin:12px 0 0}
.bx .tl{list-style:none;margin:0;padding:0;display:grid}
.bx .tl li{position:relative;padding:0 24px 16px 0;display:grid;gap:1px}
.bx .tl li::before{content:"";position:absolute;inset-inline-start:4px;top:7px;width:10px;height:10px;border-radius:50%;background:var(--ink-3);box-shadow:0 0 0 4px var(--surface)}
.bx .tl li::after{content:"";position:absolute;inset-inline-start:8.5px;top:17px;bottom:-2px;width:1px;background:var(--line)}
.bx .tl li:last-child::after{display:none}
.bx .tl li.r::before{background:var(--resv)}
.bx .tl li.g::before,.bx .tl li.g0::before{background:var(--avail)}
.bx .tl b{font-weight:600;font-size:14px}
.bx .tl small{color:var(--ink-3);font-size:12.5px}

/* ---- Home extras: today, day-by-day chart, save as image ------------------- */
.bx .snaprow{display:flex;justify-content:flex-end;margin-top:-4px}
.bx .tnum{display:flex;align-items:baseline;gap:10px;color:var(--ink-2);margin-bottom:6px}
.bx .tnum .big{font:800 34px/1.1 var(--fd);color:var(--resv)}
.bx .tlist{list-style:none;margin:0;padding:0}
.bx .tlist li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.bx .tlist li:last-child{border-bottom:0}
.bx .tlist a{color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bx .tlist a span{color:var(--ink-3);font-size:12.5px}
.bx .today .more{display:inline-block;margin-top:8px;font-weight:600;font-size:13px}
.bx .dch,.bx .sch{display:flex;align-items:flex-end;gap:6px;height:150px;border-bottom:1px solid var(--line)}
.bx .dch .b,.bx .sch .b{flex:1;min-width:0;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:3px;text-decoration:none!important}
.bx .dch b,.bx .sch b{font:600 11px/1 var(--fb);color:var(--ink-2)}
.bx .dch i{display:block;width:100%;max-width:36px;background:var(--resv);border-radius:5px 5px 0 0;min-height:0}
.bx .sch{height:180px}
.bx .sch i{display:block;width:100%;max-width:56px}
.bx .sch i.r{background:var(--resv);border-radius:6px 6px 0 0}
.bx .sch i.g{background:var(--avail)}
.bx .sch .b:hover i{filter:brightness(1.08)}
.bx .dlab{display:flex;gap:6px;margin-top:6px}
.bx .dlab span{flex:1;min-width:0;text-align:center;font-size:11px;color:var(--ink-3);white-space:nowrap;overflow:visible}
.bx .seg-l{display:flex;gap:4px;margin-top:14px;flex-wrap:wrap}
.bx .seg-l a{font-size:12.5px;padding:7px 12px;border-radius:99px;background:var(--surface-2);color:var(--ink-2);text-decoration:none}
.bx .seg-l a.on{background:var(--brand-soft);color:var(--brand-dark);font-weight:600}

/* ---- Statistics ---------------------------------------------------------------- */
.bx table.sortable th button{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:4px}
.bx table.sortable th button::after{content:"↕";opacity:.35;font-size:11px}
.bx table.sortable th button[aria-sort=ascending]::after{content:"↑";opacity:1}
.bx table.sortable th button[aria-sort=descending]::after{content:"↓";opacity:1}
.bx table.sortable th button:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}
.bx .pc{display:flex;align-items:center;gap:8px}
.bx .pc b{min-width:44px;font-weight:600}
.bx .pc .bar{flex:1;min-width:50px}
.bx .zlist{list-style:none;margin:0;padding:0}
.bx .zlist li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line)}
.bx .zlist li:last-child{border-bottom:0}
.bx .zlist a{display:grid;min-width:0;color:var(--ink)}
.bx .zlist a b{font-weight:600;font-size:13.5px}
.bx .zlist small{color:var(--ink-3);font-size:12px}
.bx .zr{display:grid;text-align:left;flex:none}
.bx .zr b{font:700 15px/1.3 var(--fd)}
.bx .zr b.out{color:var(--resv)}

/* ---- Budget ------------------------------------------------------------------ */
.bx .budget label[for=bd]{font-weight:600;display:block;margin-bottom:8px}
.bx .brow{display:flex;gap:8px;max-width:520px}
.bx .brow input{flex:1;min-width:0;font:600 18px var(--fb);padding:12px 16px;border:1.5px solid var(--line);border-radius:99px;background:var(--surface);color:var(--ink)}
.bx .budget .b-chips{margin-top:12px}
.bx .budget .b-chip{text-decoration:none}
.bx .budget .flash{margin-top:14px}
.bx .bnum{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;color:var(--ink-2);font-size:15px}
.bx .bnum .v{font:800 44px/1.1 var(--fd);color:var(--avail)}
.bx .bres .acts{align-items:center}
.bx .bres .savef input{font:14px var(--fb);padding:10px 14px;border:1.5px solid var(--line);border-radius:99px;background:var(--surface);color:var(--ink);min-width:0;width:220px}
.bx .hbars{display:grid;gap:2px}
.bx .hb{display:grid;grid-template-columns:minmax(0,170px) 1fr 60px 120px;gap:12px;align-items:center;padding:7px 8px;border-radius:var(--r-xs);color:var(--ink)!important;text-decoration:none!important;font-size:13.5px}
.bx .hb:hover{background:var(--surface-2)}
.bx .hb .tr{height:10px;border-radius:99px;background:var(--surface-2);overflow:hidden}
.bx .hb .tr i{display:block;height:100%;background:var(--avail);border-radius:99px}
.bx .hb small{color:var(--ink-3);font-size:12px}
@media (max-width:620px){.bx .hb{grid-template-columns:minmax(0,1fr) 54px;row-gap:4px}.bx .hb .tr{grid-column:1/-1;order:3}.bx .hb small{display:none}
  .bx .bres .savef{flex-wrap:wrap}.bx .bres .savef input{width:100%}}

/* ---- Map ------------------------------------------------------------------------ */
.bx .maplay{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start}
@media (max-width:980px){.bx .maplay{grid-template-columns:1fr}}
.bx .mapc{padding:10px}
.bx .bmap{height:min(72vh,660px);min-height:420px;border-radius:var(--r-sm);overflow:hidden;direction:ltr;background:var(--surface-2);z-index:0}
.bx .bmap.armed,.bx .bmap.armed .leaflet-interactive{cursor:crosshair}
.bx .mapc .legend{flex-wrap:wrap;padding:8px 6px 2px}
.bx .bm-fail{padding:40px 20px;text-align:center;color:var(--ink-2);direction:rtl}
.bx .bm-i{background:none;border:0}
.bx .bm-c{width:var(--s);height:var(--s);border-radius:50%;background:var(--c);color:#fff;display:grid;place-items:center;position:relative;
  box-shadow:0 0 0 3px rgba(255,255,255,.92),0 6px 16px -6px rgba(0,0,0,.45);font:700 12px/1 var(--fb);cursor:pointer}
.bx .bm-c i{position:absolute;top:calc(100% + 5px);left:50%;transform:translateX(-50%);white-space:nowrap;font:600 11.5px/1.2 var(--fb);font-style:normal;
  color:var(--ink);background:var(--surface);padding:3px 7px;border-radius:99px;box-shadow:0 2px 6px rgba(0,0,0,.15);direction:rtl}
.bx .bm-z{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:conic-gradient(var(--resv) var(--d),var(--avail-soft) 0);box-shadow:0 3px 10px -3px rgba(0,0,0,.4)}
.bx .bm-z::before{content:"";position:absolute;inset:7px;border-radius:50%;background:var(--surface)}
.bx .bm-z{position:relative}
.bx .bm-z b{position:relative;font:700 11px/1 var(--fb);color:var(--ink)}
.bx .bm-z.on{outline:3px solid var(--brand-2);outline-offset:2px}
.bx .leaflet-popup-content-wrapper{border-radius:14px;background:var(--surface);color:var(--ink)}
.bx .leaflet-popup-tip{background:var(--surface)}
.bx .leaflet-popup-content{margin:12px 14px;min-width:190px}
.bx .leaflet-container{font:13px var(--fb)}
.bx .leaflet-container a.leaflet-popup-close-button{left:auto;right:4px}
.bx .bm-p{direction:rtl;text-align:right;display:grid;gap:4px}
.bx .bm-p>b{font:700 14px/1.35 var(--fd)}
.bx .bm-p small{color:var(--ink-3);font-size:12px}
.bx .bm-n{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:var(--ink-2);margin-top:4px}
.bx .bm-n b{color:var(--avail);font-size:14px}
.bx .bm-bar{display:block;height:6px;border-radius:99px;background:var(--avail-soft);overflow:hidden}
.bx .bm-bar i{display:block;height:100%;background:var(--resv)}
.bx .bm-bar.g{margin-top:6px}.bx .bm-bar.g i{background:var(--avail)}
.bx .bm-p a{font-weight:600;margin-top:4px;color:var(--brand-dark)}
.bx .mside{max-height:calc(min(72vh,660px) + 60px);overflow:auto;padding:16px}
.bx .mside h2{font-size:16px}
.bx .mside h3{font:700 14px/1.3 var(--fd);margin:14px 0 6px;display:flex;justify-content:space-between}
.bx .mside h3 small{color:var(--ink-3);font:500 12px var(--fb)}
.bx .bm-l{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.bx .bm-l li{display:flex;align-items:center;gap:4px}
.bx .bm-l button,.bx .bm-l a{all:unset;box-sizing:border-box;flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;border-radius:var(--r-xs);cursor:pointer;color:var(--ink)}
.bx .bm-l button:hover,.bx .bm-l a:hover,.bx .bm-l button.on{background:var(--surface-2)}
.bx .bm-l button:focus-visible,.bx .bm-l a:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.bx .bm-l button.on{box-shadow:inset 0 0 0 2px var(--brand-2)}
.bx .bm-l span{display:grid;min-width:0}
.bx .bm-l b{font-weight:600;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bx .bm-l small{color:var(--ink-3);font-size:12px}
.bx .bm-l em{font-style:normal;font-size:11.5px;color:var(--warn);white-space:nowrap}
.bx .bm-l em.ok{color:var(--brand-dark)}
.bx .bm-dot{width:10px;height:10px;border-radius:50%;flex:none}
.bx .bm-back{all:unset;cursor:pointer;color:var(--brand-dark);font-weight:600;font-size:13px;margin-bottom:8px;display:inline-block}
.bx .bm-sum{margin:0 0 8px;color:var(--ink-2)}.bx .bm-sum b{color:var(--avail)}
.bx .bm-note{font-size:12px;color:var(--ink-3);margin:0 0 6px}
.bx .bm-prog{font-size:13px;color:var(--ink-2);margin:0 0 10px}
.bx .bm-hint{margin:8px 4px 0;font-size:13px;font-weight:600;color:var(--brand-dark);min-height:0}
.bx .bm-hint:not(.on){display:none}
.bx .bm-hint.bad{color:var(--resv)}
.bx .bm-l.z b{white-space:normal;overflow:visible;line-height:1.35}
.bx .bm-l.z button{align-items:flex-start}
.bx .bm-l.z em{padding-top:2px}

/* ===========================================================================
   The section frame: the menu down the right, content beside it.
   ---------------------------------------------------------------------------
   RTL grid, so the first column (the menu) is on the right. From 1024px the
   menu stays in view (sticky under the site's 78px header). Below that it is
   a panel that slides in from the right, opened by the bar above the content,
   with a scrim behind it; nothing ever scrolls sideways.
   =========================================================================== */
.bx .bx-lay{display:grid;grid-template-columns:248px minmax(0,1fr);gap:24px;align-items:start;padding-block:22px 40px}
.bx .bx-side{position:sticky;top:94px;max-height:calc(100vh - 110px);overflow:auto;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:14px 12px;display:flex;flex-direction:column;gap:6px;box-shadow:var(--shadow);overscroll-behavior:contain}
.bx .bx-side-top{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 4px 12px;border-bottom:1px solid var(--line);margin-bottom:6px}
.bx .bx-brand{display:flex;align-items:center;gap:10px;color:var(--brand)!important;text-decoration:none!important;min-width:0}
.bx .bx-brand-i{width:38px;height:38px;border-radius:11px;background:var(--brand);color:var(--brand-2);display:grid;place-items:center;flex:none}
.bx .bx-brand b{display:block;font:800 16px/1.25 var(--fd)}
.bx .bx-brand small{display:block;color:var(--ink-3);font-size:12px;line-height:1.3}
.bx .bx-close{display:none;width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);cursor:pointer;place-items:center;flex:none}
.bx .bx-menu{display:flex;flex-direction:column;gap:2px}
.bx .bx-menu a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--r-xs);color:var(--ink-2);font-weight:600;font-size:14.5px;text-decoration:none;line-height:1.3}
.bx .bx-menu a .bx-ico{flex:none;color:var(--ink-3)}
.bx .bx-menu a:hover{background:var(--surface-2);color:var(--brand);text-decoration:none}
.bx .bx-menu a:hover .bx-ico{color:var(--brand)}
.bx .bx-menu a.on{background:var(--brand);color:#fff}
.bx .bx-menu a.on .bx-ico{color:var(--brand-2)}
.bx .bx-sep{height:1px;background:var(--line);margin:6px 4px}
.bx .bx-guest{margin-top:8px;padding:12px;border-radius:var(--r-xs);background:var(--surface-2);display:flex;flex-wrap:wrap;gap:8px}
.bx .bx-guest p{margin:0;font-size:13px;color:var(--ink-2);flex-basis:100%;line-height:1.6}
.bx .bx-guest .bt{flex:1}
.bx .bx-note{margin:8px 4px 0;font-size:11.5px;line-height:1.6;color:var(--ink-3)}
.bx .bx-main{min-width:0}
.bx .bx-bar{display:none}
.bx .bx-scrim{display:none}

@media (max-width:1023px){
  .bx .bx-lay{grid-template-columns:minmax(0,1fr);padding-block:14px 32px}
  .bx .bx-side{position:fixed;top:0;bottom:0;inset-inline-start:0;width:min(300px,86vw);max-height:none;border-radius:0;border:0;
    border-inline-end:1px solid var(--line);z-index:1001;transform:translateX(105%);visibility:hidden;
    transition:transform .25s ease,visibility 0s linear .25s;padding-top:max(14px,env(safe-area-inset-top))}
  .bx.bx-open .bx-side{transform:none;visibility:visible;transition:transform .25s ease}
  .bx .bx-close{display:grid}
  .bx .bx-scrim{display:block;position:fixed;inset:0;background:rgba(11,27,51,.42);z-index:1000;opacity:0;pointer-events:none;transition:opacity .25s}
  .bx .bx-scrim[hidden]{display:block}
  .bx.bx-open .bx-scrim{opacity:1;pointer-events:auto}
  .bx .bx-bar{display:flex;align-items:center;gap:10px;margin-bottom:12px}
  .bx .bx-open{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:var(--r-xs);border:1px solid var(--line);background:var(--surface);
    color:var(--brand);font:700 14px/1 var(--fb);cursor:pointer;box-shadow:var(--shadow)}
  .bx .bx-open .bx-ico{color:var(--brand-2)}
  .bx .bx-where{font-weight:700;color:var(--ink-2);font-size:14px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){.bx .bx-side,.bx .bx-scrim{transition:none!important}}
/* The site's header has no reason to scroll under an open panel. */
html.bx-lock,html.bx-lock body{overflow:hidden}

/* ---- Page parts, adjusted to Aqaratk ------------------------------------- */
.bx .ph{margin-block:4px 16px}
.bx .ph h1{color:var(--brand)}
.bx .b-hero{margin-top:0}
.bx .hbody h1 em{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--brand-2);-webkit-text-fill-color:currentColor}
.bx .b-eyebrow b{background:var(--brand-2);box-shadow:0 0 0 4px rgba(201,162,39,.25)}
.bx .search .bt{background:var(--brand-2);color:var(--brand)!important}
.bx .fl{color:#fff}
.bx .b-kpi .v{color:var(--brand)}
.bx .b-kpi.r .v{color:var(--resv)}
.bx .b-kpi.g .v{color:var(--avail)}
.bx .bt{box-shadow:none;border-radius:var(--r-xs);font-family:var(--fb)}
.bx .bt:not(.ghost):not(.soft):not(.danger):hover{background:#132B4D}
.bx .bt.soft:hover{background:#E2E7F0}
.bx table.t th{font-family:var(--fb)}
.bx input,.bx select,.bx textarea,.bx button{font-family:var(--fb)}

/* ---- In the dashboard (بيت الوطن tab) ------------------------------------ */
.bx.bx-dash{background:transparent}
.bx .bx-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.bx .bx-tabs a{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:var(--r-xs);border:1px solid var(--line);background:var(--surface);color:var(--ink-2);font-weight:600;font-size:14px;text-decoration:none}
.bx .bx-tabs a:hover{border-color:var(--brand);color:var(--brand)}
.bx .bx-tabs a.on{background:var(--brand);border-color:var(--brand);color:#fff}
.bx .bx-tabs a.on .bx-ico{color:var(--brand-2)}
/* With the menu beside it the content is ~250px narrower than the page, so
   four figures in a row only fit on wide screens; two per row below that. */
@media (max-width:1439px) and (min-width:1024px){.bx .bento .s3{grid-column:span 6}}
/* The site sets overflow-x:hidden on <body>, which turns it into a scroll box
   and quietly stops anything position:sticky - the menu here, and the site's
   own header. On بيت الوطن pages, clip instead: still no sideways scrolling,
   and both stay in view. (This file only loads on بيت الوطن pages and the
   dashboard's بيت الوطن tab.) */
body.page-bayet{overflow-x:clip;overflow-y:visible}
/* In the site's main menu, show that بيت الوطن is the section you are in:
   a light gold pill behind the item (desktop bar and the phone drawer). */
body.page-bayet .header .nav a.active{background:#FBF3DC;color:var(--navy,#0B1B33);font-weight:700;box-shadow:inset 0 0 0 1px #EFD98F}
body.page-bayet .header .nav a.active:hover{background:#F7EBC6}
/* "Available only" switch under the status buttons. */
.bx .sw{display:flex;align-items:center;gap:10px;margin-top:10px;cursor:pointer;font-size:13.5px;color:var(--ink-2);position:relative}
.bx .sw input{position:absolute;opacity:0;pointer-events:none}
.bx .sw span::before{content:"";display:inline-block;vertical-align:middle;width:36px;height:20px;border-radius:99px;background:var(--line);margin-inline-end:8px;transition:background .15s;
  background-image:radial-gradient(circle at 10px 50%,#fff 7px,transparent 7.5px)}
.bx .sw input:checked+span::before{background-color:var(--avail);background-image:radial-gradient(circle at 26px 50%,#fff 7px,transparent 7.5px)}
.bx .sw input:focus-visible+span::before{outline:2px solid var(--brand-2);outline-offset:2px}
.bx .fg input[type=date]{direction:ltr;text-align:right}
/* Reservation dates: one row each - two date boxes side by side do not fit the panel. */
.bx .rng-d{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 10px;align-items:center}
.bx .rng-d label{font-size:13px;color:var(--ink-3)}
.bx .rng-d input{min-width:0}

/* ---- تحليل حوالتك: the 3-step wizard ------------------------------------------ */
.bx .wz{max-width:820px;margin-inline:auto;padding:22px}
.bx .wz-steps{list-style:none;margin:0 0 20px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.bx .wz-steps li{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 8px;border-radius:99px;background:var(--surface-2);color:var(--ink-3);font-weight:700;font-size:14px}
.bx .wz-steps li .num{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--surface);font-size:12.5px}
.bx .wz-steps li.on{background:var(--brand);color:#fff}
.bx .wz-steps li.on .num{background:var(--brand-2);color:var(--brand)}
.bx .wz-steps li.done{background:var(--brand-soft);color:var(--brand)}
.bx .wz-steps li.done .num{background:var(--avail);color:#fff}
.bx .wz-p{border:0;margin:0;padding:0;min-width:0}
.bx .wz-p+.wz-p{margin-top:26px;padding-top:22px;border-top:1px dashed var(--line)}
.bx .wz.wz-js .wz-p+.wz-p{margin-top:0;padding-top:0;border-top:0}
.bx .wz-p legend{display:block;width:100%;text-align:center;font:800 22px/1.4 var(--fd);color:var(--brand);margin-bottom:18px;padding:0}
.bx .wz-p legend:focus{outline:none}
.bx .wz-tag{display:table;margin:0 auto 8px;font:700 12px/1 var(--fb);padding:7px 12px;border-radius:99px;background:#F6ECCB;color:var(--gold-dark)}
.bx .wz-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 16px}
.bx .wz-grid .b-field{margin-block:6px}
.bx .wz-grid input{max-width:none;font-size:16px}
.bx .wz-grid input[aria-invalid="true"]{border-color:var(--resv)}
@media (max-width:620px){.bx .wz{padding:16px}.bx .wz-grid{grid-template-columns:1fr}.bx .wz-steps li{font-size:12.5px;padding:9px 4px}.bx .wz-p legend{font-size:19px}}
.bx .wz-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:520px;margin-inline:auto}
.bx .wz-choice{position:relative;cursor:pointer}
.bx .wz-choice input{position:absolute;opacity:0;pointer-events:none}
.bx .wz-choice>span{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:104px;padding:14px;border-radius:var(--r-sm);border:1.5px solid var(--line);background:var(--surface);color:var(--ink-2);text-align:center;transition:border-color .15s,background .15s}
.bx .wz-choices.sm .wz-choice>span{min-height:54px;flex-direction:row}
.bx .wz-choice b{font:800 17px/1.2 var(--fd);color:var(--brand)}
.bx .wz-choice .bx-ico{color:var(--ink-3)}
.bx .wz-choice:hover>span{border-color:var(--brand)}
.bx .wz-choice input:checked+span{border-color:var(--brand);background:var(--brand-soft);box-shadow:inset 0 0 0 1px var(--brand)}
.bx .wz-choice input:checked+span .bx-ico{color:var(--brand-2)}
.bx .wz-choice input:focus-visible+span{outline:2px solid var(--brand-2);outline-offset:2px}
.bx .wz-q{text-align:center;font-weight:700;color:var(--ink);margin:22px 0 12px}
.bx .wz-nav{display:flex;justify-content:center;gap:10px;margin-top:22px}
.bx .wz-nav .bt{min-width:120px}
.bx .wz-err{display:block;color:var(--resv);font-size:13px;font-weight:600;margin-top:6px;text-align:center}
.bx .b-field .wz-err{text-align:right}
.bx .wz-hp{position:absolute!important;inset-inline-start:-9999px;width:1px;height:1px;overflow:hidden}
.bx .wz-sum{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:560px;margin:0 auto;padding:14px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface)}
.bx .wz-sum div{background:var(--surface-2);border-radius:var(--r-xs);padding:12px 14px;text-align:center}
.bx .wz-sum dt{font-size:12.5px;color:var(--ink-3)}
.bx .wz-sum dd{margin:4px 0 0;font:800 19px/1.3 var(--fd);color:var(--brand)}
.bx .wz-note{text-align:center;font-size:13px;margin:14px 0 0}
.bx .wz-done{max-width:640px;margin-inline:auto;text-align:center;padding:34px 22px}
.bx .wz-ok{width:60px;height:60px;border-radius:50%;background:var(--avail-soft);color:var(--avail);display:grid;place-items:center;font-size:28px;font-weight:800;margin:0 auto 12px}
.bx .wz-done h2{justify-content:center;font-size:22px}
.bx .wz-hint{margin:16px auto 0;padding:14px;border-radius:var(--r-sm);background:#F6ECCB;color:#5C4708;max-width:460px;line-height:1.8}
.bx .wz-grid{align-items:start}
.bx .wz-grid .b-field{align-content:start}
.bx .wz{scroll-margin-top:96px}

/* KML import review */
.bx .kml-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;margin:14px 0}
.bx .kml-pin{border:1px solid #E5E7EB;border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:6px;background:#fff}
.bx .kml-pin.is-auto{border-color:#C9A227;background:#FFFCF2}
.bx .kml-h{display:flex;flex-direction:column;gap:2px}
.bx .kml-c{display:flex;gap:8px;align-items:start;cursor:pointer}
.bx .kml-ol{border-top:1px dashed #E5E7EB;padding-top:6px;margin-top:2px}
.bx .kml-act{display:flex;gap:10px;flex-wrap:wrap;position:sticky;bottom:0;background:#fff;padding:10px 0}
.bx .kml-pick{display:flex;flex-direction:column;gap:4px;margin-top:4px}
.bx .kml-pick select{width:100%;max-width:100%}

/* ---- Home search box: the round bar plus the same filters as the list ----- */
.bx .hsearch{position:relative;z-index:2;display:block;background:none;box-shadow:none;border-radius:0;padding:0;max-width:680px}
.bx .hsearch .sbar{display:flex;align-items:center;gap:10px;background:var(--surface);border-radius:99px;padding:7px;box-shadow:0 18px 40px -20px rgba(0,0,0,.35)}
.bx .hsearch .sbar input{flex:1;min-width:0;border:0;background:transparent;font:15px var(--fb);color:var(--ink);outline:none}
.bx .hsearch .sbar input::placeholder{color:var(--ink-3)}
.bx .hsearch .sopts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 12px;margin-top:12px;
  background:var(--glass);border:1px solid var(--glass-line);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border-radius:var(--r-sm);padding:14px}
.bx .hsearch .sopts .fg{display:flex;flex-direction:column;gap:6px;min-width:0;margin:0;border:0;padding:0}
.bx .hsearch .sopts label,.bx .hsearch .sopts legend{font:600 12.5px/1.3 var(--fb);color:var(--hero-ink-2);padding:0}
.bx .hsearch .sopts select{width:100%;max-width:100%}
.bx .hsearch .sopts fieldset{grid-column:1/-1}
.bx .hsearch .sopts .sw span{color:var(--hero-ink-2)}
@media (max-width:720px){.bx .hsearch .sopts{grid-template-columns:1fr}}

/* ---- Home dashboard: the same board the source site shows ----------------- */
.bx .dash{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px;margin-block:16px}
.bx .dash > *{grid-column:1/-1;min-width:0}
.bx .perf{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.bx .perf .ring{--p:0;width:92px;height:92px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(var(--brand-2) calc(var(--p)*1%), var(--surface-2) 0)}
.bx .perf .ring span{width:70px;height:70px;border-radius:50%;background:var(--surface);display:grid;place-items:center;text-align:center;line-height:1.1}
.bx .perf .ring b{font:800 17px/1 var(--fd);color:var(--brand)}
.bx .perf .ring i{font:500 10.5px/1.4 var(--fb);font-style:normal;color:var(--ink-3)}
.bx .perf .pf{display:flex;flex-direction:column;gap:3px;padding-inline-start:26px;border-inline-start:1px solid var(--line);flex:1 1 190px}
.bx .perf .pf .l{font:600 12.5px/1.3 var(--fb);color:var(--ink-3)}
.bx .perf .pf b{font:800 22px/1.15 var(--fd);color:var(--ink)}
.bx .perf .pf .s{font-size:11.5px;color:var(--ink-3)}
.bx .fig{grid-column:span 4;display:flex;flex-direction:column;gap:10px}
.bx .fig h3{margin:0;font:700 14px/1.3 var(--fd);color:var(--ink-2);display:flex;justify-content:space-between}
.bx .fig .row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.bx .fig .v{font:800 30px/1 var(--fd);color:var(--brand)}
.bx .fig.r .v{color:var(--resv)}.bx .fig.g .v{color:var(--avail)}
.bx .fig .badge{font:700 11.5px/1 var(--fb);padding:5px 9px;border-radius:99px;background:var(--surface-2);color:var(--ink-2)}
.bx .fig.r .badge{background:var(--resv-soft);color:var(--resv)}
.bx .fig.g .badge{background:var(--avail-soft);color:var(--avail)}
.bx .split-bar{display:flex;height:8px;border-radius:99px;overflow:hidden;background:var(--surface-2)}
.bx .split-bar i.big{background:var(--brand)}.bx .split-bar i.small{background:var(--brand-2)}
.bx .keys{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px;color:var(--ink-3)}
.bx .keys i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-inline-end:6px}
.bx .keys i.big{background:var(--brand)}.bx .keys i.small{background:var(--brand-2)}
.bx .keys b{color:var(--ink);margin-inline-start:4px}
.bx .daily-fig{grid-column:span 4}
.bx .board .bhead{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.bx .board .bhead .big{font:800 30px/1 var(--fd);color:var(--brand);display:block}
.bx .board .bhead span{font-size:12.5px;color:var(--ink-3)}
.bx .board .bhead .top b{color:var(--ink)}
.bx .zlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.bx .zlist li{display:flex;align-items:center;gap:12px}
.bx .zlist .rank{width:26px;height:26px;flex:none;border-radius:8px;background:var(--surface-2);color:var(--ink-2);display:grid;place-items:center;font:700 12px/1 var(--fb)}
.bx .zlist .z{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.bx .zlist .zt{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.bx .zlist .zt b{font:700 13.5px/1.3 var(--fb);color:var(--ink)}
.bx .zlist .chip{font:600 11px/1 var(--fb);padding:4px 8px;border-radius:99px;background:var(--surface-2);color:var(--ink-3)}
.bx .zlist .chip.cool{background:var(--avail-soft);color:var(--avail)}
.bx .zlist .chip.warm{background:var(--warn-soft);color:var(--warn)}
.bx .zlist .chip.hot{background:var(--resv-soft);color:var(--resv)}
.bx .zlist .bar{display:block;height:7px;border-radius:99px;background:var(--surface-2);overflow:hidden}
.bx .zlist .bar i{display:block;height:100%;background:var(--resv);border-radius:99px}
.bx .zlist .zs{font-size:11.5px;color:var(--ink-3)}
.bx .zlist .zn{flex:none;text-align:center;min-width:74px;display:flex;flex-direction:column;gap:1px}
.bx .zlist .zn b{font:800 16px/1.1 var(--fd);color:var(--avail)}
.bx .zlist .zn span{font-size:11px;color:var(--ink-3)}
.bx .zlist .zn i{font-style:normal;font-size:11.5px;color:var(--ink-2)}
.bx .board .more{display:inline-block;margin-top:12px;font-size:12.5px}
.bx .cities-card .hi{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0}
.bx .hi-c{flex:1 1 220px;display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:var(--r-sm);font-size:11.5px;color:var(--ink-3)}
.bx .hi-c b{font:700 13px/1.35 var(--fb)}
.bx .hi-c.r{background:var(--resv-soft)}.bx .hi-c.r b{color:var(--resv)}
.bx .hi-c.g{background:var(--avail-soft)}.bx .hi-c.g b{color:var(--avail)}
.bx .dash .snaprow{display:flex;justify-content:flex-start}
@media (min-width:1000px){
  .bx .dash .board#today{grid-column:span 7}
  .bx .dash .board#cities{grid-column:span 5}
}
@media (max-width:820px){
  .bx .fig,.bx .daily-fig{grid-column:span 6}
  .bx .perf .pf{padding-inline-start:0;border:0;flex-basis:140px}
}
@media (max-width:520px){
  .bx .fig,.bx .daily-fig{grid-column:1/-1}
  .bx .zlist .zn{min-width:58px}
}

/* "Tell me when a plot is taken" */
.bx .watch .watchf{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px}
.bx .watch .watchf input[type=email]{flex:1 1 220px;min-width:0}

/* ---- Transfer page: "sell your transfer for more" ------------------------- */
.bx .sell-cta{margin-top:18px;background:var(--brand);color:#fff;border-radius:var(--r);padding:32px 30px;
  display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.bx .sell-cta .sell-logo{width:160px;height:260px;flex:none;background:#000;border-radius:16px;display:grid;place-items:center;padding:12px;border:1px solid rgba(201,162,39,.35)}
.bx .sell-cta .sell-logo img{max-width:100%;max-height:100%;object-fit:contain}
.bx .sell-cta .sell-text{flex:1 1 260px;min-width:0}
.bx .sell-cta h2{margin:0;font:800 28px/1.3 var(--fd);color:var(--brand-2)}
.bx .sell-cta p{margin:8px 0 0;font-size:16px;color:#D7DEEA}
.bx .sell-cta .sell-phones{flex:1 1 280px;display:flex;flex-direction:column;gap:10px}
.bx .sell-cta .sell-phones a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-radius:12px;
  background:#13294A;color:#fff;font:700 19px/1 var(--fb);text-decoration:none;font-variant-numeric:tabular-nums;transition:background .15s}
.bx .sell-cta .sell-phones a.first{background:var(--brand-2);color:var(--brand)}
.bx .sell-cta .sell-phones a:hover{background:#1B3760}
.bx .sell-cta .sell-phones a.first:hover{background:#D9B43A}
.bx .sell-cta .sell-phones a:focus-visible{outline:2px solid var(--brand-2);outline-offset:2px}
@media (max-width:640px){
  .bx .sell-cta{padding:24px 18px;gap:18px;text-align:center;justify-content:center}
  .bx .sell-cta .sell-logo{width:120px;height:200px;margin:0 auto}
  .bx .sell-cta h2{font-size:23px}
}