/* ==========================================================================
   BAWAXICT FAMILYHUB — MOCKUP DESIGN SYSTEM
   Single source of truth for the 9 in-scope pages. Palette, typography,
   spacing and component language read from "BAWAXICT FamilyHub UI Showcase.png".
   Self-hosted font stack: Google Fonts CDN is blocked pre-auth on a captive
   portal, so we use a system geometric-sans stack rather than a CDN link.
   ========================================================================== */

:root{
  /* Core palette — from the mockup */
  --fh-green-900:#0B2E23;
  --fh-green-800:#123B2C;
  --fh-green-700:#175C43;
  --fh-green-600:#0FA968;
  --fh-green-500:#12B76A;
  --fh-green-100:#DCFCE7;
  --fh-green-050:#EEF7F1;

  --fh-orange-600:#E8690F;
  --fh-orange-500:#FF7A2E;
  --fh-orange-100:#FFF0E6;

  --fh-bg:#F6F8F5;
  --fh-card:#FFFFFF;
  --fh-border:#EAECF0;
  --fh-ink:#101828;
  --fh-ink-700:#344054;
  --fh-muted:#667085;
  --fh-faint:#98A2B3;

  --fh-danger:#B42318;
  --fh-danger-bg:#FEF3F2;
  --fh-info:#1570EF;

  --fh-radius-lg:20px;
  --fh-radius:16px;
  --fh-radius-sm:12px;
  --fh-pill:999px;

  --fh-shadow-sm:0 1px 2px rgba(16,24,40,.05);
  --fh-shadow:0 4px 16px rgba(16,24,40,.08);
  --fh-shadow-lg:0 20px 60px rgba(11,46,35,.22);

  --fh-font:'Plus Jakarta Sans','Segoe UI Variable','Segoe UI',Inter,system-ui,
            -apple-system,'Helvetica Neue',Arial,sans-serif;

  --fh-rail:248px;
  --fh-header:64px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--fh-font);
  background:var(--fh-bg);
  color:var(--fh-ink);
  -webkit-font-smoothing:antialiased;
  font-size:14px;
  line-height:1.5;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
img{max-width:100%}

/* ---------- Buttons ---------- */
.fh-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:0;border-radius:var(--fh-pill);padding:11px 20px;
  font-weight:700;font-size:14px;cursor:pointer;transition:.16s ease;
  background:var(--fh-green-900);color:#fff;
}
.fh-btn:hover{background:var(--fh-green-800)}
.fh-btn:active{transform:translateY(1px)}
.fh-btn:disabled{opacity:.55;cursor:not-allowed}
.fh-btn-accent{background:var(--fh-orange-500)}
.fh-btn-accent:hover{background:var(--fh-orange-600)}
.fh-btn-green{background:var(--fh-green-500)}
.fh-btn-green:hover{background:var(--fh-green-600)}
.fh-btn-ghost{background:var(--fh-card);color:var(--fh-ink);border:1px solid var(--fh-border)}
.fh-btn-ghost:hover{background:var(--fh-bg)}
.fh-btn-sm{padding:8px 14px;font-size:12.5px}
.fh-btn-block{width:100%}

/* ---------- Cards ---------- */
.fh-card{
  background:var(--fh-card);border:1px solid var(--fh-border);
  border-radius:var(--fh-radius);box-shadow:var(--fh-shadow-sm);
}
.fh-card-p{padding:18px}

/* ---------- Badges / pills ---------- */
.fh-badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 10px;border-radius:var(--fh-pill);
  font-size:11.5px;font-weight:700;
  background:var(--fh-green-100);color:#166534;
}
.fh-badge-muted{background:var(--fh-bg);color:var(--fh-muted);border:1px solid var(--fh-border)}
.fh-badge-orange{background:var(--fh-orange-100);color:var(--fh-orange-600)}

.fh-tab{
  padding:8px 16px;border-radius:var(--fh-pill);border:1px solid var(--fh-border);
  background:var(--fh-card);color:var(--fh-muted);
  font-size:13px;font-weight:700;cursor:pointer;transition:.16s;
}
.fh-tab:hover{background:var(--fh-bg)}
.fh-tab.active{background:var(--fh-green-900);color:#fff;border-color:var(--fh-green-900)}

/* ---------- Avatars ---------- */
.fh-av{
  width:40px;height:40px;border-radius:50%;flex:none;
  display:grid;place-items:center;overflow:hidden;
  background:var(--fh-green-900);color:#fff;font-weight:800;font-size:15px;
}
.fh-av img{width:100%;height:100%;object-fit:cover}
.fh-av-sm{width:32px;height:32px;font-size:13px}
.fh-av-lg{width:72px;height:72px;font-size:26px}

/* ---------- Brand header ---------- */
.fh-brand{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--fh-green-900)}
.fh-brand-mark{
  width:34px;height:34px;border-radius:10px;flex:none;
  background:linear-gradient(135deg,var(--fh-green-800),var(--fh-green-600));
  color:#fff;display:grid;place-items:center;font-size:16px;font-weight:800;
}
.fh-brand-text{line-height:1.1}
.fh-brand-text b{display:block;font-size:15px;letter-spacing:-.2px}
.fh-brand-text span{display:block;font-size:11px;color:var(--fh-green-600);font-weight:700}

/* ---------- Sidebar rail ---------- */
.fh-rail{
  width:var(--fh-rail);flex:none;background:var(--fh-card);
  border-right:1px solid var(--fh-border);padding:18px 14px;
  display:flex;flex-direction:column;gap:4px;
  position:sticky;top:0;height:100vh;overflow:auto;
}
.fh-nav-item{
  display:flex;align-items:center;gap:12px;padding:11px 14px;
  border-radius:var(--fh-radius-sm);font-weight:700;font-size:14px;
  color:var(--fh-ink-700);transition:.14s;
}
.fh-nav-item:hover{background:var(--fh-bg)}
.fh-nav-item.active{background:var(--fh-green-900);color:#fff}
.fh-nav-item .ic{width:20px;text-align:center;font-size:16px;flex:none}

/* ---------- Wifi chip ---------- */
.fh-wifi{
  display:flex;align-items:center;gap:9px;padding:11px 14px;
  border:1px solid var(--fh-border);border-radius:var(--fh-radius-sm);
  font-size:12.5px;font-weight:700;color:var(--fh-green-700);background:var(--fh-green-050);
}
.fh-dot{width:9px;height:9px;border-radius:50%;background:var(--fh-green-500);flex:none;
  box-shadow:0 0 0 3px rgba(18,183,106,.18)}
.fh-dot.off{background:var(--fh-faint);box-shadow:0 0 0 3px rgba(152,162,179,.18)}

/* ---------- Inputs ---------- */
.fh-input{
  width:100%;border:1px solid var(--fh-border);border-radius:var(--fh-radius-sm);
  padding:12px 14px;font-family:inherit;font-size:14px;background:var(--fh-card);
  color:var(--fh-ink);outline:0;transition:.14s;
}
.fh-input:focus{border-color:var(--fh-green-500);box-shadow:0 0 0 3px rgba(18,183,106,.14)}
.fh-input::placeholder{color:var(--fh-faint)}
textarea.fh-input{resize:vertical;min-height:96px;line-height:1.55}
.fh-label{display:block;font-size:12.5px;font-weight:700;color:var(--fh-ink-700);margin-bottom:6px}
.fh-field{margin-bottom:14px}

/* ---------- Modal / panel ---------- */
.fh-modal{
  position:fixed;inset:0;z-index:400;display:none;
  background:rgba(11,46,35,.5);backdrop-filter:blur(3px);
  align-items:center;justify-content:center;padding:20px;
}
.fh-modal.open{display:flex}
.fh-modal-box{
  background:var(--fh-card);border-radius:var(--fh-radius-lg);
  width:min(460px,100%);max-height:88vh;overflow:auto;
  box-shadow:var(--fh-shadow-lg);
}
.fh-modal-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 20px;border-bottom:1px solid var(--fh-border);
}
.fh-modal-head h3{margin:0;font-size:17px;font-weight:800;color:var(--fh-green-900)}
.fh-modal-body{padding:20px}
.fh-x{
  border:0;background:var(--fh-bg);width:32px;height:32px;border-radius:50%;
  cursor:pointer;font-size:17px;color:var(--fh-muted);line-height:1;
}
.fh-x:hover{background:var(--fh-border)}

/* ---------- Toast ---------- */
.fh-toast{
  position:fixed;left:50%;bottom:28px;transform:translateX(-50%);
  background:var(--fh-green-900);color:#fff;padding:12px 20px;
  border-radius:var(--fh-pill);font-size:13.5px;font-weight:600;
  box-shadow:var(--fh-shadow-lg);z-index:900;animation:fhToast .25s ease;
}
@keyframes fhToast{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}

/* ---------- Empty state ---------- */
.fh-empty{
  text-align:center;padding:44px 22px;color:var(--fh-muted);
}
.fh-empty .ico{font-size:40px;margin-bottom:10px;opacity:.7}
.fh-empty b{display:block;color:var(--fh-ink);font-size:15px;margin-bottom:5px}

/* ---------- Mobile tab bar ---------- */
.fh-tabbar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:300;
  background:var(--fh-card);border-top:1px solid var(--fh-border);
  padding:8px 6px calc(8px + env(safe-area-inset-bottom));
  justify-content:space-around;align-items:center;
}
.fh-tabbar a{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  font-size:10.5px;font-weight:700;color:var(--fh-muted);padding:4px 10px;
}
.fh-tabbar a.active{color:var(--fh-green-900)}
.fh-tabbar .ic{font-size:19px}
.fh-tabbar .fab{
  width:46px;height:46px;border-radius:50%;background:var(--fh-green-500);
  color:#fff;display:grid;place-items:center;font-size:24px;
  box-shadow:0 6px 16px rgba(18,183,106,.4);margin-top:-18px;
}

/* ---------- Utility ---------- */
.fh-row{display:flex;align-items:center;gap:10px}
.fh-spacer{flex:1}
.fh-muted{color:var(--fh-muted)}
.fh-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.fh-err{color:var(--fh-danger);font-size:13px;min-height:18px}

@media(max-width:900px){
  .fh-rail{display:none}
  .fh-tabbar{display:flex}
  body.has-tabbar{padding-bottom:74px}
}

/* ==========================================================================
   MOBILE OPTIMIZATION PASS
   Measured at 360x740 (common low-end Android) across every rebuilt page.
   ========================================================================== */
@media (max-width:900px){

  /* iOS Safari zooms the whole page when a focused input's font-size is
     under 16px. Every form control therefore goes to 16px on small
     screens; this is the single most disruptive mobile bug because the
     zoom persists after blur and leaves the layout shifted. */
  .fh-input,
  input[type=text],input[type=search],input[type=email],
  input[type=tel],input[type=number],input[type=password],
  textarea,select{ font-size:16px }

  /* WCAG 2.5.8 / platform guidance: 44x44 minimum touch target.
     Buttons and nav links were rendering 31-37px tall. */
  .fh-btn{ min-height:44px }
  .fh-btn-sm{ min-height:40px; padding:9px 16px }
  .fh-nav-item{ min-height:44px }
  .fh-tab{ min-height:40px }
  .icon-btn,.fh-x{ min-width:40px; min-height:40px }

  /* Tab bar items were 56x36. */
  .fh-tabbar a{ min-height:48px; justify-content:center }

  /* Supporting copy under 11px is unreadable at arm's length outdoors,
     which is the actual usage context for a hotspot portal. */
  .fh-badge{ font-size:12px }
  .fh-muted{ font-size:13px }

  /* Filter/tab strips must scroll rather than force the page sideways.
     services.html's category row was overflowing the viewport by ~26px. */
  .filters,.fh-tabs,.tabs{
    overflow-x:auto; flex-wrap:nowrap;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .filters::-webkit-scrollbar,
  .fh-tabs::-webkit-scrollbar,
  .tabs::-webkit-scrollbar{ display:none }
  .filters > *,.fh-tabs > *,.tabs > *{ flex:0 0 auto }
}

/* Long unbroken strings (URLs, invite links, usernames) are the most
   common cause of horizontal overflow on narrow screens. */
.fh-card,.fh-input,.bub,.post-body{ overflow-wrap:anywhere }

/* Respect the OS reduced-motion setting. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ==========================================================================
   ENGAGEMENT BADGE — inline, next to a username
   Deliberately compact: a coloured dot plus a short label, sized to sit on a
   post header or a chat row without pushing the name around. Novice is not
   rendered by the clients (it is the default state and would add noise to
   every single row), but the API returns it so the decision stays in the UI.
   ========================================================================== */
.fh-badge-mini{
  display:inline-flex;align-items:center;gap:4px;vertical-align:middle;
  align-self:center;width:auto;max-width:max-content;
  padding:1px 7px 1px 5px;border-radius:var(--fh-pill);
  font-size:10px;font-weight:800;letter-spacing:.2px;line-height:1.6;
  color:#fff;white-space:nowrap;flex:none;
}
.fh-badge-mini .bdot{
  width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.9);flex:none;
}
/* Dot-only variant for very tight rows (chat list, typing row). */
.fh-badge-dot{
  display:inline-block;width:7px;height:7px;border-radius:50%;
  vertical-align:middle;flex:none;margin-left:5px;
  box-shadow:0 0 0 1.5px var(--fh-card);
}
@media(max-width:560px){
  /* Keep the tier readable but give long usernames room on narrow phones. */
  .fh-badge-mini{font-size:9.5px;padding:1px 6px 1px 4px}
}

/* ==========================================================================
   HOTSPOT-ONLY MARKERS
   The web build is used by both hotspot users and general web visitors.
   These mark the destinations that only mean something to someone actually
   connected to the BAWAXICT WiFi, so a web-only visitor is not sent to a
   ticket page they cannot use or a portal that does not exist for them.
   ========================================================================== */
.fh-hs-tag{
  display:inline-block;margin-left:6px;padding:1px 7px;border-radius:var(--fh-pill);
  background:var(--fh-orange-100);color:var(--fh-orange-600);
  font-size:9.5px;font-weight:800;letter-spacing:.2px;line-height:1.7;
  text-transform:uppercase;white-space:nowrap;vertical-align:middle;
}
.fh-nav-item .fh-hs-tag{margin-left:auto}
.fh-hs-note{
  display:block;font-size:10.5px;font-weight:600;color:var(--fh-muted);
  line-height:1.35;margin-top:2px;
}