/* Hala Global Styles
 * Scope: reset + cross-browser normalization + mobile-first phone shell.
 *
 * IMPORTANT: keep layout consistent across Safari/Chrome/Firefox and iOS/Android.
 */

/* ----------------------------- */
/* Modern reset (cross-browser)  */
/* ----------------------------- */

*,
*::before,
*::after{
  box-sizing: border-box;
}

*{
  margin: 0;
}

html{
  /* Improve text rendering consistency */
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  background: var(--wa-app-bg);
}

body{
  margin: 0;
  font-family: var(--font-sans);
  line-height: var(--line-height-body);
  color: var(--wa-text);
  background: var(--wa-app-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ----------------------------- */
/* Global responsive app container */
/* ----------------------------- */

.appShell{
  min-height: 100svh;
  background: var(--wa-bg, #F2F2F7);
  display: flex;
  justify-content: center;
}

.appFrame{
  width: 100%;
  max-width: var(--app-max-w);
  min-height: 100svh;
  background: #fff;
  display: flex;
  flex-direction: column;
}

img,
picture,
video,
canvas,
svg{
  display: block;
  max-width: 100%;
}

/* ----------------------------- */
/* Form element normalization     */
/* ----------------------------- */

input,
button,
textarea,
select{
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button{
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: 0;
}

/* Remove iOS inner shadows / rounded corners for inputs (we style them) */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="search"],
input[type="url"],
input[type="number"],
textarea{
  -webkit-appearance: none;
  appearance: none;
}

/* Search input quirks (Safari/Chrome) */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration{
  -webkit-appearance: none;
}

/* Number input spinners (Chrome/Safari) */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}

/* Number input spinners (Firefox) */
input[type="number"]{
  -moz-appearance: textfield;
}

/* Tap highlight (iOS/Android) */
button,
input,
select,
textarea{
  -webkit-tap-highlight-color: transparent;
}

/* ----------------------------- */
/* Accessibility helpers         */
/* ----------------------------- */

.srOnly{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ----------------------------- */
/* Phone shell layout everywhere  */
/* ----------------------------- */

:root{
  /*
   * Phone shell width:
   * Keep a consistent phone-sized canvas on larger screens so the UI
   * doesn't feel "zoomed" on tablets/desktop.
   *
   * <=480px still uses full-bleed layout (handled by media query below).
   */
  --nearby-pad-x: 14px;
  --nearby-pad-y: 10px;
  --nearby-avatar: 44px;
  --nearby-row-minh: 64px;
  --nearby-name: 16px;
  --nearby-sub: 13px;
  --nearby-meta: 11px;
  --nearby-divider: rgba(0,0,0,.08);
  --places-pad-x: 14px;
  --places-pad-y: 10px;
  --places-avatar: 44px;
  --places-row-minh: 64px;
  --places-name: 16px;
  --places-sub: 13px;
  --places-meta: 11px;
  --places-divider: rgba(0,0,0,.08);
  --settings-bg: #f2f2f7;
  --settings-card: #ffffff;
  --settings-pad-x: 14px;
  --settings-radius: 18px;
}

.center{
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: var(--wa-app-bg);
}

.phone{
  width: min(var(--app-max-w), 100%);
  /* Keyboard-safe fallback: visualViewport drives --kb (see inline JS). */
  height: min(900px, calc(100svh - 24px - var(--kb, 0px)));
  background: var(--wa-card);
  border-radius: 24px;
  overflow: visible;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Prefer dynamic viewport units when available (avoids 100vh quirks on iOS). */
@supports (height: 100dvh){
  .phone{ height: min(900px, calc(100dvh - 24px)); }
}

/* Mobile: app-like full-height layout (prevents keyboard overlap + flex collapse). */
@media (max-width: 480px){
  .center{ padding: 0; }
  .phone{
    width: 100%;
    height: var(--vvh, calc(100svh - var(--kb, 0px)));
    min-height: 100svh;
    max-height: none;
    border-radius: 0;
    box-shadow: none;
  }
}

@supports (height: 100dvh){
  @media (max-width: 480px){
    .phone{
      height: var(--vvh, calc(100dvh - var(--kb, 0px)));
      min-height: 100dvh;
    }
  }
}

/* ----------------------------- */
/* Shared UI component classes    */
/* ----------------------------- */

label{
  display: block;
  font-size: var(--font-size-13);
  color: #333;
  margin-top: 10px;
}

input,
select,
textarea{
  width: 100%;
  padding: 12px 12px;
  min-height: var(--control-height);
  border-radius: var(--rLg);
  border: 1px solid var(--border);
  font-size: var(--font-size-14);
  outline: none;
  background: var(--surface);
  color: var(--text);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

textarea{
  resize: vertical;
  min-height: var(--control-height);
}

#profileAboutInput{
  resize: none;
  overflow-y: auto;
  min-height: 96px;
  max-height: 96px;
}

input:focus,
select:focus,
textarea:focus{
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brandRing);
}

/* Radios should not inherit full-width input styling */
input[type="radio"]{
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none !important;
  accent-color: var(--wa-green-2);
  flex: 0 0 auto;
  margin: 0;
}

/* Mobile: prevent input zoom on focus */
@media (max-width: 480px){
  input,
  textarea,
  select{
    font-size: 16px !important;
  }

  input::placeholder,
  textarea::placeholder{
    font-size: 16px !important;
  }

  #chatTextInput,
  .composer textarea{
    font-size: 16px !important;
  }

  #chatTextInput::placeholder,
  .composer textarea::placeholder{
    font-size: 16px !important;
  }
}

.btn{
  width: 100%;
  border: 0;
  border-radius: var(--rLg);
  padding: 12px;
  min-height: var(--control-height);
  font-weight: 900;
  cursor: pointer;
  font-size: var(--font-size-15);
  touch-action: manipulation;
  transition: transform 120ms ease, opacity 120ms ease;
  -webkit-appearance: none;
  appearance: none;
}

.btnSmall{
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 13px;
}

.btn:active:not(:disabled){
  transform: scale(.985);
  opacity: .96;
}

.btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px var(--brandRing);
}

.btn:disabled{
  opacity: .55;
  cursor: default;
  transform: none !important;
}

.btnPrimary{
  background: var(--brand);
  color: #fff;
  box-shadow: var(--shadowSm);
}

.btnPrimary:active:not(:disabled){
  background: var(--brandDark);
}

.btnSecondary{
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
}

.btnGhost{
  background: var(--surface2, rgba(0,0,0,.04));
  color: var(--text);
}
.btnGhost:active:not(:disabled){
  background: rgba(0,0,0,.08);
}

.btnDanger{
  background: var(--dangerBg);
  border: 1px solid rgba(176,0,32,.18);
  color: var(--danger);
}

/* ----------------------------- */
/* Nearby list (Step 10)         */
/* ----------------------------- */

.nearbyRow,
#nearbyTab .nearbyRow.nearbyRow{
  display:grid;
  grid-template-columns: calc(var(--nearby-avatar) + 12px) 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 10px;
  padding: var(--nearby-pad-y) var(--nearby-pad-x);
  min-height: var(--nearby-row-minh);
  background:#fff;
  align-items:center;
  position: relative;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: pan-y;
}

.nearbyRow:active,
#nearbyTab .nearbyRow.nearbyRow:active{
  background: rgba(0,0,0,.04);
}

.nearbyRow:focus-visible,
#nearbyTab .nearbyRow.nearbyRow:focus-visible{
  outline: none;
  box-shadow: inset 0 0 0 2px var(--wa-green-2, var(--brand));
}

/* Divider starts after avatar (WhatsApp pattern) */
.nearbyRow::after,
#nearbyTab .nearbyRow.nearbyRow::after{
  content:"";
  position:absolute;
  left: calc(var(--nearby-pad-x) + var(--nearby-avatar) + 18px);
  right: 0;
  bottom: 0;
  height:1px;
  background: var(--nearby-divider);
}

.nearbyAvatar,
#nearbyTab .nearbyRow .nearbyAvatar{
  grid-column:1;
  grid-row:1 / span 2;
  width:var(--nearby-avatar);
  height:var(--nearby-avatar);
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow: visible;
  background:#E5E7EB;
  font-weight: 850;
  color: rgba(0,0,0,.78);
  position: relative;
}

.nearbyName,
#nearbyTab .nearbyRow .nearbyName{
  grid-column:2;
  grid-row:1;
  font-size: var(--nearby-name);
  font-weight: 800;
  line-height:1.15;
  color: rgba(0,0,0,.92);
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.nearbyName.hasOnlineDot,
#nearbyTab .nearbyRow .nearbyName.hasOnlineDot{
  position: relative;
  padding-right: 14px;
}

.nearbyName .nearbyOnlineDot,
#nearbyTab .nearbyRow .nearbyName .nearbyOnlineDot{
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2ecc71;
  display: inline-block;
  box-shadow: 0 0 0 1px rgba(0,0,0,.08);
}

.nearbyRightTop,
#nearbyTab .nearbyRow .nearbyRightTop{
  grid-column:3;
  grid-row:1;
  justify-self:end;
  font-size: var(--nearby-meta);
  color: rgba(0,0,0,.45);
  font-weight: 700;
}

.nearbySubtitle,
#nearbyTab .nearbyRow .nearbySubtitle{
  grid-column:2;
  grid-row:2;
  min-width:0;
  font-size: var(--nearby-sub);
  color: rgba(0,0,0,.55);
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.nearbyRightBottom,
#nearbyTab .nearbyRow .nearbyRightBottom{
  grid-column:3;
  grid-row:2;
  justify-self:end;
  font-size: var(--nearby-meta);
  color: rgba(0,0,0,.42);
  font-weight: 600;
  max-width: 120px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.nearbyDistance,
#nearbyTab .nearbyRow .nearbyDistance{
  font-size: var(--nearby-meta);
  color: rgba(0,0,0,.45);
  font-weight: 700;
}

.nearbyLastSeen,
#nearbyTab .nearbyRow .nearbyLastSeen{
  font-size: var(--nearby-meta);
  color: rgba(0,0,0,.42);
  font-weight: 600;
}

.nearbyAbout,
#nearbyTab .nearbyRow .nearbyAbout{
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.nearbyDivider{
  margin-left: calc(var(--nearby-pad-x) + var(--nearby-avatar) + 18px);
  border-bottom: 1px solid var(--nearby-divider);
}

.nearbyPill{
  height:18px;
  padding:0 8px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  background:rgba(0,0,0,.08);
  color:rgba(0,0,0,.7);
  display:inline-flex;
  align-items:center;
}

.nearbyCountHint{
  font-size:12px;
  color: rgba(0,0,0,.45);
  text-align:center;
  margin: 10px 0 6px;
}

/* ----------------------------- */
/* Places (Step 20)               */
/* ----------------------------- */

#placesTab .placesSearchSticky{
  padding: 0;
}

#placesTab .placesControls{
  padding: 8px var(--pad-r) 8px var(--pad-l);
  gap: 8px;
}

#placesTab .placesSearchWrap{
  margin: 0;
}

#placesTab #placesMsg,
#placesTab .placesGeoHint{
  margin-left: 0;
  margin-right: 0;
}

#placesTab .placesQuickRow{
  margin: 0;
  gap: 10px;
}

#placesTab .placesCats{
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 2px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

#placesTab .placesCats::-webkit-scrollbar{
  display: none;
}

#placesTab .placeCat{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
}

#placesTab .placeCat.active{
  border-color: var(--brand);
  background: var(--brandSoft);
}

#placesTab .placeCat .ico{
  font-size: 20px;
  line-height: 1;
  display: block;
}

#placesTab .placeCat .txt{
  display: none;
}

#placesTab .placeCat:focus{
  outline: none;
}

#placesTab .placeCat:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(27,149,11,.25);
}

#placesTab .placesRadiusPill:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(27,149,11,.20);
}

.locBanner{
  margin: 10px 14px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(0,0,0,.04);
  display:flex;
  align-items:center;
  gap: 10px;
}

.locBanner--compact{
  padding: 10px 12px;
}

.locBannerIcon{
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(0,0,0,.06);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 14px;
}

.locBannerText{ flex: 1 1 auto; min-width: 0; }

.locBannerTitle{
  font-size: 13px;
  font-weight: 800;
  color: rgba(0,0,0,.82);
  line-height: 1.15;
}

.locBannerSub{
  margin-top: 2px;
  font-size: 12px;
  color: rgba(0,0,0,.55);
  line-height: 1.25;
  /* prevent the banner from growing too tall */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.locBannerActions{
  flex: 0 0 auto;
  display:flex;
  align-items:center;
  gap: 8px;
}

.locBannerActions .btn{
  width: auto !important;
  min-width: 88px;
}

.locBannerClose{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 0;
  background: rgba(0,0,0,.06);
  color: rgba(0,0,0,.55);
  font-size: 16px;
  font-weight: 800;
  display:flex;
  align-items:center;
  justify-content:center;
}

.locBannerClose:active{
  background: rgba(0,0,0,.10);
}

.btnLink{
  background: transparent;
  border: 0;
  padding: 0;
  font-size: 12px;
  font-weight: 700;
  color: rgba(0,0,0,.55);
}

#placesTab .placesModeToggle{
  margin: 0;
  height: 36px;
  padding: 2px;
  border-radius: 18px;
  background: rgba(0,0,0,.08);
  display:flex;
  gap: 2px;
}

#placesTab .locBanner:not(.hidden) + .placesModeToggle{
  margin-top: 0;
}

#placesTab .placesModeBtn{
  flex: 1 1 0;
  height: 32px;
  border-radius: 16px;
  border: 0;
  background: transparent;
  color: rgba(0,0,0,.75);
  font-weight: 700;
  font-size: 13px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition: transform 80ms ease, box-shadow 160ms ease, color 160ms ease;
}

#placesTab .placesModeBtn[aria-selected="true"],
#placesTab .placesModeBtn.isActive{
  background: #fff;
  color: var(--brand);
  box-shadow: 0 1px 2px rgba(0,0,0,.12);
}

#placesTab .placesModeBtn:active{ transform: translateY(1px); }

#placesTab .placesModeBtn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(27,149,11,.20), 0 1px 2px rgba(0,0,0,.12);
}

@media (max-width: 360px){
  #placesTab .placesQuickRow{ gap: 8px; }
  #placesTab .placesCats{ gap: 8px; }
}

.placeRow{
  display:grid;
  grid-template-columns: calc(var(--places-avatar) + 12px) 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 10px;
  padding: var(--places-pad-y) var(--places-pad-x);
  min-height: var(--places-row-minh);
  background:#fff;
  align-items:center;
}

.placeAvatar{
  grid-column:1; grid-row:1 / span 2;
  width:var(--places-avatar); height:var(--places-avatar);
  border-radius:999px;
  background: rgba(0,0,0,.05);
  display:flex; align-items:center; justify-content:center;
}

.placeAvatar .placeSkelIcon{
  width: var(--places-avatar);
  height: var(--places-avatar);
  border-radius: 999px;
}

.placeName{
  grid-column:2; grid-row:1;
  font-size: var(--places-name);
  font-weight: 800;
  color: rgba(0,0,0,.92);
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}

.placeRightTop{
  grid-column:3; grid-row:1; justify-self:end;
  font-size: var(--places-meta);
  color: rgba(0,0,0,.45);
  font-weight: 700;
}

.placeSubtitle{
  grid-column:2; grid-row:2;
  font-size: var(--places-sub);
  color: rgba(0,0,0,.55);
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}

.placeRightBottom{
  grid-column:3; grid-row:2; justify-self:end;
  font-size: var(--places-meta);
  color: rgba(0,0,0,.42);
  font-weight: 600;
}

.placeDivider{
  margin-left: calc(var(--places-pad-x) + var(--places-avatar) + 18px);
  border-bottom: 1px solid var(--places-divider);
}

.placeRow:active{ background: rgba(0,0,0,.04); }

#nearbyTab .nearbyControls .waChip{
  height: 32px;
  font-size: 13px;
  border-radius: 16px;
}

.emptyUnreadWrap{
  padding: 40px 18px;
  text-align: center;
}

.emptyUnreadTitle{
  font-size: 16px;
  font-weight: 800;
  color: rgba(0,0,0,.82);
}

.emptyUnreadSub{
  margin-top: 6px;
  font-size: 13px;
  color: rgba(0,0,0,.50);
}

/* ----------------------------- */
/* Settings UI (Account page)    */
/* ----------------------------- */

.settingsPage{
  --row-minh: 56px;
  --row-gap: 12px;
  --title: 16px;
  --sub: 13px;
  --meta: 13px;
  --divider: rgba(0,0,0,.08);
  --muted: rgba(0,0,0,.55);
  --muted2: rgba(0,0,0,.40);
  background: var(--settings-bg);
  min-height: 100%;
}

.settingsTitle{
  font-size: 34px;
  font-weight: 900;
  line-height: 1.05;
  margin: 12px var(--settings-pad-x) 12px;
}

.settingsSectionTitle{
  margin: 18px var(--settings-pad-x) 8px;
  font-size: 12px;
  letter-spacing: .14em;
  font-weight: 900;
  color: rgba(0,0,0,.40);
}

.settingsCard{
  margin: 0 var(--settings-pad-x);
  background: var(--settings-card);
  border-radius: var(--settings-radius);
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(0,0,0,.03);
}

.settingsRow{
  min-height: var(--row-minh);
  display: flex;
  align-items: center;
  gap: var(--row-gap);
  padding: 10px 12px;
}

.settingsRow:active{
  background: rgba(0,0,0,.04);
}

.settingsIcon{
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: rgba(0,0,0,.06);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.settingsMain{
  flex: 1 1 auto;
  min-width: 0;
}

.settingsMainTitle{
  font-size: var(--title);
  font-weight: 900;
  color: rgba(0,0,0,.92);
  line-height: 1.15;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.settingsMainSub{
  margin-top: 2px;
  font-size: var(--sub);
  font-weight: 600;
  color: var(--muted);
  line-height: 1.2;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.settingsRight{
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  color: var(--muted2);
  font-weight: 700;
  font-size: var(--meta);
}

.settingsValue{
  max-width: 140px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.settingsValue.settingsValueFull{
  max-width: none;
  overflow: visible;
  text-overflow: clip;
}

.settingsChevron{
  font-size: 18px;
  color: rgba(0,0,0,.28);
}

.settingsDivider{
  margin-left: 60px; /* aligns divider after icon */
  border-bottom: 1px solid var(--divider);
}

.settingsFooter{
  margin: 16px var(--settings-pad-x) calc(var(--page-body-pad-b) + var(--safe-bottom));
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted2);
}