/* ===== Hostess Profile Modal (no gallery; single image) ===== */
:root{
  --hm-border: var(--edge, rgba(255,255,255,.14));
  --hm-bg: var(--panel, #141824);
  --hm-ink: var(--ink, #E8E6E3);
  --hm-muted: var(--muted, #A6ADBD);
}

/* === Hostess Profile Modal: fixed, on top, centered === */
#hostessModal{
  position: fixed !important;       /* never flow at the bottom */
  inset: 0;
  z-index: 10000 !important;        /* above header/video/etc. */
  display: none;
  pointer-events: none;             /* block clicks until opened */
}
#hostessModal[aria-hidden="false"]{
  display: block;
  pointer-events: auto;
}

/* Backdrop */
#hostessModal .modal-backdrop{
  position: absolute; inset: 0;
  background: rgba(0,0,0,.5);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

/* Card (viewport-clamped, respects safe areas) */
#hostessModal .modal-card{
  position: absolute;
  /* clamp from edges; safe on phones & notches */
  inset: clamp(8px, 5vh, 40px) clamp(8px, 5vw, 40px);
  background: var(--hm-bg);
  color: var(--hm-ink);
  border: 1px solid var(--hm-border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  display: flex; flex-direction: column;
  min-height: 340px; max-height: 92vh;
  overflow: hidden;
  z-index: 1;                        /* above backdrop */
  will-change: transform;
}

/* Extra nicety: pad against notches if supported */
@supports (padding: max(0px)){
  #hostessModal .modal-card{
    /* add tiny inset if your design needs it */
    /* padding: max(0px, env(safe-area-inset-top) * 0) max(0px, env(safe-area-inset-right) * 0)
               max(0px, env(safe-area-inset-bottom) * 0) max(0px, env(safe-area-inset-left) * 0); */
  }
}


/* Header */
#hostessModal .modal-header{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 16px;border-bottom:1px solid var(--hm-border);
  flex-wrap:wrap; /* allow CTAs to wrap on small screens */
}
#hostessModal .hm-id{display:flex;align-items:center;gap:12px;min-width:0;flex:1}
#hostessModal .hm-avatar{width:44px;height:44px;border-radius:12px;object-fit:cover;border:1px solid var(--hm-border)}
#hostessModal .hm-title{margin:0;font-size:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
#hostessModal .hm-cta{display:flex;align-items:center;gap:10px;flex:0 1 auto}
#hostessModal .modal-close{border:1px solid var(--hm-border);background:transparent;color:var(--hm-ink);
  border-radius:8px;padding:.25rem .5rem;font-size:20px;line-height:1}

/* CTA lines (phone/SMS numbers + icons) */
#hostessModal .cta-line{
  display:inline-flex;align-items:center;gap:.55em;
  padding:.45rem .75rem;border:1px solid var(--hm-border);
  border-radius:999px;background:#111523;color:var(--hm-ink);
  text-decoration:none;line-height:1;
  font-size: clamp(13px, 1.6vw, 16px);
  max-width: 100%;
}
#hostessModal .cta-line svg{width:1.1em;height:1.1em;opacity:.9;flex:0 0 auto}
#hostessModal .cta-line .cta-num{white-space:nowrap}

/* Body: 2-column grid on desktop; stacked on mobile */
#hostessModal .modal-body{padding:14px 16px;overflow:auto}
#hostessModal .grid{
  display:grid;gap:16px;
  grid-template-columns: 1.2fr 1fr; /* media larger than info on desktop */
}

/* Media (photo) */
#hostessModal .media{
  display:flex;flex-direction:column;gap:8px;min-width:0
}
#hostessModal .media .photo-wrap{
  display:flex;justify-content:center;align-items:center;
  border:1px solid var(--hm-border);border-radius:12px;padding:8px;background:rgba(255,255,255,.02)
}
#hostessModal .media img{
  max-width:100%;
  width:auto !important;height:auto !important;
  max-height: min(62vh, 640px) !important;
  object-fit: contain; /* keep full image, no crop */
  border-radius:8px;
}
#hostessModal .media .note{color:var(--hm-muted);font-size:12px}

/* Info column */
#hostessModal .info{display:flex;flex-direction:column;gap:14px;min-width:0}
#hostessModal .panel{border:1px solid var(--hm-border);border-radius:12px;min-width:0}
#hostessModal .panel .ph{padding:10px 12px;border-bottom:1px solid var(--hm-border);font-weight:600}
#hostessModal .panel .pc{padding:12px}

/* About(meta) grid */
#hostessModal .meta-grid{
  display:grid;grid-template-columns:minmax(110px, 150px) 1fr;gap:10px 14px;align-items:start;min-width:0
}
#hostessModal .meta-grid .label{color:var(--hm-muted)}
#hostessModal .meta-grid .val{font-weight:600;min-width:0}
#hostessModal .meta-grid .val.empty{opacity:.6;font-weight:400}

/* Upcoming schedule */
#hostessModal .chips{display:flex;flex-wrap:wrap;gap:8px}
#hostessModal .chip{
  border:1px solid var(--hm-border);border-radius:999px;
  padding:.45rem .75rem;background:#111523;color:var(--hm-ink);
  font-size: clamp(12px, 1.5vw, 14px);
}
#hostessModal .chip .muted{opacity:.7}
#hostessModal .chip-btn{
  border:1px solid var(--hm-border);border-radius:8px;background:transparent;color:var(--hm-ink);
  padding:.35rem .6rem;font-size:14px
}

/* Mobile layout */
@media (max-width: 860px){
  #hostessModal .grid{ grid-template-columns: 1fr; }
  #hostessModal .media img{ max-height: 48vh !important; }
  #hostessModal .hm-cta{ gap:8px; flex-wrap:wrap }
  #hostessModal .modal-header{ align-items:flex-start }
}

/* Very small screens: make labels stack to avoid squish */
@media (max-width: 520px){
  #hostessModal .meta-grid{ grid-template-columns: 1fr; }
  #hostessModal .meta-grid .label{ opacity:.9 }
  #hostessModal .meta-grid .val{ font-weight:600 }
}

/* Make button “pills” look like your existing ones (in case anchors became buttons) */
button.pill{ all:unset; display:inline-flex; align-items:center; gap:8px; cursor:pointer }
button.pill img{ width:28px;height:28px;border-radius:8px;object-fit:cover}