/* ============================================================
   layout.css  — Structural Layout: Header, Nav, Pages, Modals
   ============================================================ */

/* ── LOADING SCREEN ─────────────────────────────────────── */
#loadScreen {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--bg);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 12px; transition: opacity .6s;
}
#loadScreen.hide { opacity: 0; pointer-events: none; }

.load-logo-wrap { margin-bottom: 6px; }
.load-logo-wrap img { width: 120px; height: auto; }

.load-msg {
  font-size: 0.78rem; color: var(--text2);
  text-align: center; padding: 0 36px; line-height: 1.9;
}
.load-dots { display: flex; gap: 6px; margin-top: 6px; }
.load-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--c1); opacity: .3;
  animation: dotAnim 1.2s infinite;
}
.load-dot:nth-child(2) { animation-delay: .2s; }
.load-dot:nth-child(3) { animation-delay: .4s; }

/* ── PICKER SCREEN ──────────────────────────────────────── */
#picker {
  position: fixed; inset: 0; z-index: 900;
  background: var(--bg);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 28px 24px;
  transition: opacity .45s, transform .45s;
}
#picker.hide { opacity: 0; transform: scale(1.04); pointer-events: none; }

.pk-logo-wrap { margin-bottom: 10px; }
.pk-logo-wrap img { width: 160px; height: auto; }

.pk-sub {
  font-size: 0.82rem; color: var(--text2);
  margin-bottom: 36px; text-align: center; line-height: 1.7;
}
.pk-q {
  font-size: 0.95rem; font-weight: 800;
  color: var(--text); margin-bottom: 18px; text-align: center;
}
.pk-cards { display: flex; gap: 14px; width: 100%; max-width: 340px; }
.pk-card {
  flex: 1; background: var(--glass); border: 1px solid var(--gb);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border-radius: 22px; padding: 24px 12px 20px;
  display: flex; flex-direction: column;
  align-items: center; gap: 10px;
  cursor: pointer; transition: all .22s;
  -webkit-user-select: none; user-select: none;
}
.pk-card:active { transform: scale(.93); }
.pk-card.sd:active { background: rgba(253,184,20,.1); border-color: rgba(253,184,20,.35); }
.pk-card.sa:active { background: rgba(27,107,58,.1);  border-color: rgba(27,107,58,.35); }
.pk-flag { font-size: 3rem; line-height: 1; }
.pk-cn   { font-size: 0.88rem; font-weight: 800; color: var(--text); }
.pk-cur  { font-size: 0.7rem; color: var(--text2); font-weight: 600; text-align: center; line-height: 1.4; }
.pk-hint { font-size: 0.72rem; color: var(--text3); margin-top: 24px; text-align: center; }

/* ── HEADER ─────────────────────────────────────────────── */
.hdr {
  position: sticky; top: 0; z-index: 100;
  background: rgba(9,9,15,0.72);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border-bottom: 1px solid var(--bd);
  display: flex; align-items: center;
  justify-content: space-between; padding: 11px 16px;
}
body.light .hdr { background: rgba(245,245,247,0.92); }

.logo { display: flex; align-items: center; }
.logo-img { height: 30px; width: auto; aspect-ratio: 4/1; }

.hdr-r { display: flex; align-items: center; gap: 7px; }

.sw-pill {
  display: flex; align-items: center; gap: 5px;
  background: var(--glass); border: 1px solid var(--gb);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border-radius: 50px; padding: 5px 10px 5px 12px;
  cursor: pointer; font-family: 'Cairo', sans-serif;
  font-size: 0.72rem; font-weight: 700; color: var(--text2);
  transition: all .2s;
}
.sw-pill:active { transform: scale(.93); }
.sw-flag { font-size: 1rem; }
.sw-arr  { font-size: 0.5rem; color: var(--text3); }

.ibtn {
  width: 33px; height: 33px; border-radius: 10px;
  border: 1px solid var(--bd2); background: var(--glass);
  backdrop-filter: blur(12px); color: var(--text2);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 0.72rem; font-weight: 700;
  font-family: 'Cairo', sans-serif; transition: all .2s;
}
.ibtn:active { transform: scale(.91); }

/* ── SEARCH ─────────────────────────────────────────────── */
.srch-w { padding: 10px 16px; }
.srch {
  background: var(--glass); border: 1px solid var(--gb);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border-radius: 13px; display: flex; align-items: center;
  gap: 9px; padding: 11px 14px; transition: border-color .2s;
}
.srch:focus-within { border-color: rgba(253,184,20,.4); }
.srch input {
  background: none; border: none; outline: none;
  color: var(--text); font-family: 'Cairo', sans-serif;
  font-size: 0.87rem; flex: 1; direction: rtl;
}
.srch input::placeholder { color: var(--text3); }

/* ── PAGES ──────────────────────────────────────────────── */
.pg { display: none; padding-bottom: 88px; }
.pg.on { display: block; }

.phdr {
  font-size: 1rem; font-weight: 900; color: var(--text);
  padding: 16px 16px 12px; border-bottom: 1px solid var(--bd);
}

/* ── BOTTOM NAV ─────────────────────────────────────────── */
.bnav {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 480px; z-index: 200;
  background: var(--nav); backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border-top: 1px solid var(--bd);
  display: flex; padding: 8px 0 env(safe-area-inset-bottom,8px);
}
.nbtn {
  flex: 1; background: none; border: none;
  display: flex; flex-direction: column; align-items: center;
  gap: 3px; padding: 4px 0; cursor: pointer;
  font-family: 'Cairo', sans-serif; transition: all .2s;
}
.nic { color: var(--text3); transition: color .2s; }
.nlbl { font-size: 0.6rem; font-weight: 700; color: var(--text3); transition: color .2s; }
.nbtn.on .nic, .nbtn.on .nlbl { color: var(--c1); }
.cart-wrap { position: relative; }
.cart-badge {
  position: absolute; top: -4px; right: -7px;
  background: var(--c1); color: #231F20;
  width: 16px; height: 16px; border-radius: 50%;
  font-size: 0.55rem; font-weight: 900;
  display: none; align-items: center; justify-content: center;
}
.cart-badge.on { display: flex; }

/* ── CART FLOAT BUTTON ──────────────────────────────────── */
#cfloat {
  position: fixed; bottom: 76px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  width: calc(100% - 32px); max-width: 448px; z-index: 150;
  background: var(--c1); color: #231F20;
  border: none; border-radius: 16px; padding: 13px 20px;
  font-family: 'Cairo', sans-serif; font-size: 0.88rem; font-weight: 900;
  cursor: pointer; display: none; align-items: center;
  justify-content: space-between;
  box-shadow: var(--sha); opacity: 0; transition: all .3s;
}
#cfloat.on { display: flex; opacity: 1; transform: translateX(-50%) translateY(0); }
#cfloat:active { transform: translateX(-50%) scale(.97); }

/* ── BACK TO TOP ────────────────────────────────────────── */
#backTop {
  position: fixed; bottom: 90px; left: 16px;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--glass); border: 1px solid var(--bd2);
  backdrop-filter: var(--blur); color: var(--text2);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 150;
  opacity: 0; pointer-events: none; transition: all .3s; font-size: 1.1rem;
}
#backTop.on { opacity: 1; pointer-events: all; }

/* ── WELCOME TOAST ──────────────────────────────────────── */
#wlcm {
  position: fixed; top: 70px; left: 50%;
  transform: translateX(-50%) translateY(-10px);
  background: var(--c1); color: #231F20;
  padding: 10px 20px; border-radius: 50px;
  font-size: 0.78rem; font-weight: 800;
  opacity: 0; pointer-events: none;
  transition: all .4s; z-index: 500; white-space: nowrap;
}
#wlcm.on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── GENERIC TOAST ──────────────────────────────────────── */
#toast {
  position: fixed; bottom: 88px; left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: rgba(30,30,38,.97); border: 1px solid var(--bd2);
  color: var(--text); padding: 10px 20px;
  border-radius: 50px; font-size: 0.8rem; font-weight: 700;
  opacity: 0; pointer-events: none; transition: all .35s;
  z-index: 9999; white-space: nowrap;
  backdrop-filter: blur(16px);
}
#toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── MODAL BASE ─────────────────────────────────────────── */
.modal {
  position: fixed; inset: 0; z-index: 600;
  background: rgba(0,0,0,.78); backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: none; align-items: flex-end; justify-content: center;
}
.modal.on { display: flex; }

.msheet {
  background: rgba(14,14,22,.98); border: 1px solid var(--gb);
  border-radius: 26px 26px 0 0; width: 100%; max-width: 480px;
  padding: 0 0 env(safe-area-inset-bottom,20px);
  max-height: 90vh; overflow-y: auto;
  animation: slideIn .3s ease;
}
body.light .msheet { background: rgba(250,250,252,0.98); }

.mclose {
  position: absolute; top: 14px; left: 16px;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,255,255,.1); border: none;
  color: var(--text2); cursor: pointer;
  font-size: 0.75rem; display: flex;
  align-items: center; justify-content: center;
}

/* ── MAP MODAL ──────────────────────────────────────────── */
.mapsh {
  background: rgba(14,14,22,.98); border: 1px solid var(--gb);
  border-radius: 26px 26px 0 0; width: 100%; max-width: 480px;
  padding-bottom: env(safe-area-inset-bottom,20px);
  animation: slideIn .3s ease;
}
body.light .mapsh { background: rgba(250,250,252,0.98); }

.map-hdr {
  display: flex; align-items: center;
  justify-content: space-between; padding: 16px 16px 12px;
}
.map-hdr h3 { font-size: 0.93rem; font-weight: 800; }
#map { width: 100%; height: 310px; border-radius: 16px; overflow: hidden; }
.map-foot { padding: 12px 16px; display: flex; gap: 10px; }
.map-cancel {
  flex: 1; background: var(--glass); border: 1px solid var(--bd);
  color: var(--text2); padding: 12px; border-radius: 12px;
  font-family: 'Cairo', sans-serif; font-size: 0.82rem; font-weight: 700; cursor: pointer;
}
.map-confirm {
  flex: 2; background: var(--c1); border: none;
  color: #231F20; padding: 12px; border-radius: 12px;
  font-family: 'Cairo', sans-serif; font-size: 0.82rem; font-weight: 900; cursor: pointer;
}

/* ── SWITCH MODAL ───────────────────────────────────────── */
.swsh {
  background: rgba(14,14,22,.98); border: 1px solid var(--gb);
  border-radius: 26px 26px 0 0; width: 100%; max-width: 480px;
  padding: 24px 20px env(safe-area-inset-bottom,24px);
  text-align: center; animation: slideIn .3s ease;
}
body.light .swsh { background: rgba(250,250,252,0.98); }
.swsh h3 { font-size: 1rem; font-weight: 800; margin-bottom: 8px; }
.swsh p  { font-size: 0.78rem; color: var(--text2); line-height: 1.7; margin-bottom: 22px; }
.swbtns  { display: flex; gap: 10px; }
.swcancel {
  flex: 1; background: var(--glass); border: 1px solid var(--bd);
  color: var(--text2); padding: 12px; border-radius: 12px;
  font-family: 'Cairo', sans-serif; font-size: 0.82rem; font-weight: 700; cursor: pointer;
}
.swgo {
  flex: 1; background: var(--c1); border: none;
  color: #231F20; padding: 12px; border-radius: 12px;
  font-family: 'Cairo', sans-serif; font-size: 0.82rem; font-weight: 900; cursor: pointer;
}

/* ── INSTALL MODAL ──────────────────────────────────────── */
.instsh {
  background: rgba(14,14,22,.98); border: 1px solid var(--gb);
  border-radius: 26px 26px 0 0; width: 100%; max-width: 480px;
  padding: 22px 20px env(safe-area-inset-bottom,20px);
  animation: slideIn .3s ease;
}
body.light .instsh { background: rgba(250,250,252,0.98); }
.inst-hdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.inst-hdr h3 { font-size: 0.93rem; font-weight: 800; }
.itstep {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px; background: var(--glass); border: 1px solid var(--bd);
  border-radius: 12px; margin-bottom: 8px;
  font-size: 0.8rem; line-height: 1.5;
}
.itstepn {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--c1); color: #231F20;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.72rem; font-weight: 900; flex-shrink: 0;
}

/* ── COOPERATIVE MODAL ──────────────────────────────────── */
.coop-modal {
  position: fixed; inset: 0; z-index: 700;
  background: rgba(0,0,0,.78); backdrop-filter: blur(10px);
  display: none; align-items: center;
  justify-content: center; padding: 24px;
}
.coop-modal.on { display: flex; }
.coop-sheet {
  background: rgba(14,14,22,.97); border: 1px solid var(--gb);
  border-radius: 24px; width: 100%; max-width: 340px;
  padding: 28px 22px; text-align: center;
}
body.light .coop-sheet { background: rgba(250,250,252,0.98); }
.coop-ico { font-size: 2.8rem; margin-bottom: 10px; }
.coop-sheet h3 { font-size: 1rem; font-weight: 800; color: var(--text); margin-bottom: 8px; }
.coop-sheet p  { font-size: 0.78rem; color: var(--text2); line-height: 1.85; margin-bottom: 8px; }
.coop-warn {
  font-size: 0.74rem; color: #f59e0b;
  background: rgba(245,158,11,0.1); border: 1px solid rgba(245,158,11,0.25);
  border-radius: 10px; padding: 9px 13px; margin-bottom: 20px;
}
.coop-btns   { display: flex; gap: 10px; }
.coop-cancel {
  flex: 1; background: var(--c1); color: #231F20;
  border: none; padding: 12px; border-radius: 12px;
  font-family: 'Cairo', sans-serif; font-size: 0.82rem; font-weight: 900; cursor: pointer;
}
.coop-go {
  flex: 1; background: var(--glass); border: 1px solid var(--bd);
  color: var(--text2); padding: 12px; border-radius: 12px;
  font-family: 'Cairo', sans-serif; font-size: 0.82rem; font-weight: 700; cursor: pointer;
}

/* ── INSTALL BANNER ─────────────────────────────────────── */
.inst-ban {
  margin: 12px 16px 0; background: var(--c1s);
  border: 1px solid rgba(253,184,20,.25);
  border-radius: 14px; padding: 11px 14px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 0.8rem; color: var(--text);
}
.inst-ban button {
  background: var(--c1); border: none; color: #231F20;
  padding: 6px 14px; border-radius: 50px;
  font-family: 'Cairo', sans-serif; font-size: 0.75rem;
  font-weight: 900; cursor: pointer;
}

/* ── MAP INSTRUCTIONS ───────────────────────────────────── */
.map-instructions {
  background: rgba(255,255,255,0.04); border: 1px solid var(--bd);
  border-radius: 11px; padding: 11px 14px; margin-bottom: 11px;
  font-size: 0.73rem; color: var(--text2); line-height: 2;
}
.map-instructions strong { color: var(--c1); font-weight: 800; }


/* ── LCP & CLS Optimizations ── */
.bn-slide { min-height: 160px; contain: layout; }
.pcard { contain: layout style; }
.pimg { min-height: 108px; }
.cg { contain: layout; }
#loadScreen { will-change: opacity; }
/* Prevent nav icon shifts */
.nbtn { will-change: auto; contain: layout style; }