/* ================================================================
   EARTHVASI — INSTAGRAM-STYLE MOBILE SYSTEM
   Complete mobile-first design — every element pixel perfect
   ================================================================ */

/* ── ROOT VARIABLES ── */
:root {
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
  --bnav-h: 56px;
  --topnav-h: 56px;
  --transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
}

/* ── GLOBAL RESETS ── */
*, *::before, *::after { -webkit-tap-highlight-color: transparent; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { touch-action: manipulation; overflow-x: hidden; max-width: 100vw; }
img, video { max-width: 100%; }
input, textarea, select, button { touch-action: manipulation; }
/* Prevent iOS zoom on inputs */
@media(max-width: 768px) {
  input, textarea, select { font-size: 16px !important; }
}
a { touch-action: manipulation; }
button { cursor: pointer; }

/* ================================================================
   HAMBURGER BUTTON
   ================================================================ */
.ham-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px; height: 40px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  cursor: pointer; padding: 0; flex-shrink: 0;
  transition: var(--transition); z-index: 201;
}
.ham-btn span {
  display: block; width: 20px; height: 2px;
  background: var(--t1, #faf0ff);
  border-radius: 2px; transition: var(--transition); transform-origin: center;
}
.ham-btn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ham-btn.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.ham-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.ham-btn:active { transform: scale(0.9); }

/* ================================================================
   MOBILE DRAWER (WhatsApp / Instagram DM style)
   ================================================================ */
.mob-drawer {
  display: block;
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  z-index: 700; pointer-events: none;
  visibility: hidden;
}
.mob-drawer.open { pointer-events: all; visibility: visible; }
.mob-drawer-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.6); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity 0.3s;
}
.mob-drawer.open .mob-drawer-backdrop { opacity: 1; }
.mob-drawer-panel {
  position: absolute; top: 0; right: 0;
  width: min(80vw, 280px); height: 100%;
  background: #0d0018;
  border-left: 1px solid rgba(255,255,255,0.08);
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
  overflow-y: auto; display: flex; flex-direction: column;
  padding-top: max(16px, var(--safe-top));
  padding-bottom: max(20px, var(--safe-bottom));
}
.mob-drawer.open .mob-drawer-panel { transform: translateX(0); }

.mob-drawer-header {
  padding: 14px 16px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06); margin-bottom: 6px;
}
.mdb-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.mdb-logo img { width: 32px; height: 32px; border-radius: 8px; border: 1px solid rgba(245,200,66,0.2); padding: 3px; }
.mdb-brand {
  font-weight: 800; font-size: 1rem;
  background: linear-gradient(135deg,#f5c842,#fb7185,#a855f7);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.mdb-user { display: flex; align-items: center; gap: 10px; }
.mdb-av {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg,#f5c842,#a855f7);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.9rem; color: #000; overflow: hidden;
}
.mdb-av img { width: 100%; height: 100%; object-fit: cover; }
.mdb-uname { font-weight: 700; font-size: 0.85rem; color: #faf0ff; }
.mdb-email { font-size: 0.7rem; color: #7a6490; margin-top: 1px; }

.mob-drawer-nav { flex: 1; padding: 6px 10px; display: flex; flex-direction: column; gap: 1px; }
.mob-drawer-nav a, .mob-drawer-nav button {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 12px; border-radius: 10px;
  color: #c4a8d4; font-size: 0.87rem; font-weight: 600;
  text-decoration: none; transition: var(--transition);
  background: transparent; border: none;
  cursor: pointer; font-family: inherit; width: 100%; text-align: left;
  min-height: 44px;
}
.mob-drawer-nav a i, .mob-drawer-nav button i {
  width: 18px; text-align: center; font-size: 0.9rem; color: #7a6490; flex-shrink: 0;
}
.mob-drawer-nav a:active, .mob-drawer-nav button:active { background: rgba(255,255,255,0.07); }
.mob-drawer-nav a.active { background: rgba(245,200,66,0.1); color: #f5c842; }
.mob-drawer-nav a.active i { color: #f5c842; }
.mob-drawer-divider { height: 1px; background: rgba(255,255,255,0.06); margin: 5px 0; }
.mob-drawer-footer {
  padding: 12px 14px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.mob-start-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 13px; border: none; border-radius: 12px;
  background: linear-gradient(135deg,#f5c842,#fb7185,#a855f7);
  color: #000; font-size: 0.9rem; font-weight: 800;
  cursor: pointer; font-family: inherit;
}
.mob-start-btn:active { transform: scale(0.97); }

/* ================================================================
   MOBILE TOPBAR (for pages without main nav)
   ================================================================ */
.mob-topbar {
  display: none;
  position: sticky; top: 0; z-index: 200; height: 56px;
  padding: 0 14px;
  padding-top: var(--safe-top);
  background: rgba(6,0,14,0.96); backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  align-items: center; justify-content: space-between; gap: 12px;
}
.mob-topbar-logo { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.mob-topbar-logo img { width: 28px; height: 28px; border-radius: 7px; border: 1px solid rgba(245,200,66,0.2); padding: 3px; }
.mob-topbar-logo span {
  font-weight: 800; font-size: 1rem;
  background: linear-gradient(135deg,#f5c842,#fb7185,#a855f7);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* ================================================================
   INSTAGRAM-STYLE BOTTOM NAV BAR
   ================================================================ */
.bottom-nav {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0;
  height: calc(var(--bnav-h) + var(--safe-bottom));
  background: rgba(6,0,14,0.97); backdrop-filter: blur(24px);
  border-top: 1px solid rgba(255,255,255,0.08);
  z-index: 300;
  padding-bottom: var(--safe-bottom);
}
.bottom-nav-inner {
  display: flex; align-items: center; justify-content: space-around;
  height: var(--bnav-h);
}
.bn-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; flex: 1; height: 100%;
  text-decoration: none; color: rgba(255,255,255,0.35);
  font-size: 0.58rem; font-weight: 600;
  transition: color 0.2s; position: relative;
  cursor: pointer; background: none; border: none; font-family: inherit; padding: 0;
  min-width: 44px;
}
.bn-item i { font-size: 1.3rem; transition: transform 0.2s, color 0.2s; }
.bn-item:active { transform: scale(0.85); }
.bn-item.active { color: #f5c842; }
.bn-item.active i { transform: scale(1.15); }

/* Center play button (Instagram-style "+" in center) */
.bn-item.bn-center {
  width: 48px; height: 48px; flex: none;
  border-radius: 14px;
  background: linear-gradient(135deg,#f5c842,#fb7185,#a855f7);
  color: #000 !important;
  box-shadow: 0 4px 20px rgba(245,200,66,0.35);
  margin-top: -8px;
}
.bn-item.bn-center i { font-size: 1.2rem; color: #000; transform: none !important; }
.bn-item.bn-center span { display: none; }
.bn-item.bn-center:active { transform: scale(0.88); }

.bn-badge {
  position: absolute; top: 4px; right: calc(50% - 18px);
  min-width: 15px; height: 15px;
  background: #f43f5e; border-radius: 50px;
  font-size: 0.55rem; font-weight: 800; color: #fff;
  display: none; align-items: center; justify-content: center;
  padding: 0 3px; border: 1.5px solid #06000e;
}
.bn-badge.show { display: flex; }

/* Body padding for bottom nav */
body.has-bottom-nav { padding-bottom: calc(var(--bnav-h) + var(--safe-bottom)); }
body.in-chat { padding-bottom: 0 !important; }
body.in-chat .bottom-nav { display: none !important; }

/* Toast above bottom nav */
.toast, #ev-toast {
  bottom: calc(var(--bnav-h) + var(--safe-bottom) + 12px) !important;
}

/* ================================================================
   DESKTOP — hide mobile elements
   ================================================================ */
@media(min-width: 769px) {
  .ham-btn { display: none !important; }
  .mob-drawer { visibility: hidden !important; pointer-events: none !important; }
  .mob-topbar { display: none !important; }
  .bottom-nav { display: none !important; }
  body.has-bottom-nav { padding-bottom: 0 !important; }
  #chatBackBtn { display: none !important; }
  .desktop-only { display: initial !important; }
  .mob-only { display: none !important; }
}

/* ================================================================
   TABLET + MOBILE — 768px and below
   ================================================================ */
@media(max-width: 768px) {
  /* Show mobile elements */
  .mob-drawer { display: block; visibility: visible; }
  .bottom-nav { display: flex; flex-direction: column; }
  .ham-btn { display: flex !important; }
  .mob-topbar { display: flex; }
  .desktop-only { display: none !important; }

  /* ── NAV ── */
  .nav, .site-nav {
    height: 56px !important; padding: 0 14px !important;
    padding-top: var(--safe-top);
  }
  .nav-inner { padding: 0 !important; gap: 8px !important; }
  .nav-links { display: none !important; }
  .nav-logo .brand, .nav-logo .logo-name { font-size: 1.2rem !important; }
  #navGuest .btn-nav-ghost { display: none !important; }
  #navGuest .btn-nav-cta { padding: 7px 14px !important; font-size: 0.8rem !important; }
  .nav-uname { display: none !important; }
  .nav-avatar-btn { padding: 4px 8px 4px 4px !important; }
  .nav-user { gap: 5px !important; }

  /* ── NOTIFICATION PANEL ── */
  #notifPanel {
    position: fixed !important; top: 62px !important; right: 12px !important;
    width: calc(100vw - 24px) !important; max-height: 55vh; overflow-y: auto;
    border-radius: 16px !important;
  }

  /* ── HERO ── */
  .hero { padding: 72px 16px 32px !important; }
  .hero-eyebrow { font-size: 0.7rem !important; padding: 5px 14px !important; margin-bottom: 16px !important; }
  .hero h1 { font-size: clamp(1.9rem, 8vw, 3rem) !important; letter-spacing: -0.3px !important; margin-bottom: 14px !important; }
  .hero-sub { font-size: 0.9rem !important; margin-bottom: 20px !important; }
  .hero-ctas { flex-direction: column !important; align-items: center !important; gap: 10px !important; width: 100% !important; }
  .cta-main, .cta-secondary { width: 100% !important; max-width: 320px !important; justify-content: center !important; padding: 14px 20px !important; font-size: 0.95rem !important; }
  .hero-stats { gap: 14px !important; padding: 14px !important; border-radius: 14px !important; flex-wrap: wrap !important; }
  .hs-n { font-size: 1.3rem !important; }
  .hs-l { font-size: 0.66rem !important; }

  /* ── DISCOVER SECTION ── */
  .discover-inner { padding: 0 14px !important; }
  .discover-title { font-size: 1.1rem !important; }

  /* ── FEATURES ── */
  .section { padding: 44px 16px !important; }
  .s-h { font-size: clamp(1.4rem, 5vw, 2rem) !important; }
  .feats { grid-template-columns: 1fr 1fr !important; gap: 1px !important; }
  .feat { padding: 18px 12px !important; }
  .feat h3 { font-size: 0.86rem !important; }
  .feat p { font-size: 0.76rem !important; }

  /* ── FEMALE SECTION ── */
  .female-section { padding: 44px 16px !important; }
  .female-inner { grid-template-columns: 1fr !important; gap: 24px !important; }
  .female-text h2 { font-size: clamp(1.7rem, 7vw, 2.4rem) !important; }
  .female-card { padding: 24px 18px !important; }
  .female-card .price { font-size: 3.5rem !important; }

  /* ── PRICING ── */
  .pricing-section { padding: 44px 16px !important; }
  .pricing-grid { grid-template-columns: 1fr !important; gap: 12px !important; margin-top: 24px !important; }
  .price-card { padding: 24px 18px !important; }
  .price-card .ribbon { display: none; }
  .price-card.female > div { grid-template-columns: 1fr !important; gap: 16px !important; }
  .pc-num { font-size: 3.5rem !important; }
  .pc-btn { min-height: 48px !important; padding: 13px !important; }

  /* ── HOW IT WORKS ── */
  .how-section { padding: 44px 16px !important; }
  .steps { grid-template-columns: 1fr !important; gap: 10px !important; margin-top: 24px !important; }
  .steps::before { display: none !important; }
  .step { padding: 22px 16px !important; }

  /* ── GIFT SECTION ── */
  .gift-section { padding: 44px 16px !important; }
  .gift-showcase { grid-template-columns: 1fr !important; gap: 20px !important; margin-top: 24px !important; }
  .gift-phone { padding: 20px 16px !important; }
  .gift-amounts { flex-wrap: wrap !important; gap: 6px !important; }

  /* ── TESTIMONIALS ── */
  .testi-section { padding: 44px 16px !important; }
  .testi-grid { grid-template-columns: 1fr !important; gap: 10px !important; margin-top: 24px !important; }
  .testi { padding: 18px 14px !important; }

  /* ── FOOTER ── */
  .footer { padding: 36px 16px 20px !important; }
  .footer-top { grid-template-columns: 1fr 1fr !important; gap: 24px !important; margin-bottom: 24px !important; }
  .footer-bottom { flex-direction: column !important; text-align: center !important; gap: 6px !important; padding-top: 16px !important; }

  /* ── AUTH MODAL (Instagram-style bottom sheet) ── */
  .overlay { padding: 0 !important; align-items: flex-end !important; }
  .modal {
    width: 100% !important; max-width: 100% !important;
    border-radius: 22px 22px 0 0 !important;
    padding: 28px 20px !important;
    padding-bottom: max(24px, var(--safe-bottom)) !important;
    max-height: 94vh !important;
  }
  .modal-head h2 { font-size: 1.5rem !important; }
  .auth-tab { padding: 9px !important; font-size: 0.84rem !important; }
  .field input, .field select, .field textarea { min-height: 48px !important; font-size: 16px !important; }
  .gender-selector { gap: 6px !important; }
  .gender-opt { padding: 12px !important; }
  .submit-btn { min-height: 50px !important; padding: 14px !important; }
  .google-btn { min-height: 48px !important; }

  /* ── PAYMENT MODAL ── */
  .pay-modal .country-grid { grid-template-columns: 1fr 1fr 1fr !important; gap: 6px !important; }
  .pay-methods-row { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .pm { padding: 12px 8px !important; }

  /* ── FRIENDS PAGE (WhatsApp layout) ── */
  .app {
    display: flex !important; flex-direction: column !important;
    height: 100dvh !important; overflow: hidden !important;
    grid-template-columns: unset !important;
  }
  .topbar { height: 56px !important; padding: 0 12px !important; gap: 6px !important; flex-shrink: 0 !important; position: sticky !important; top: 0 !important; z-index: 100 !important; }
  .topbar-logo span { display: none !important; }
  .topbar-nav { display: flex !important; flex: 1 !important; overflow-x: auto !important; scrollbar-width: none !important; gap: 2px !important; }
  .topbar-nav::-webkit-scrollbar { display: none; }
  .tn { flex-shrink: 0 !important; padding: 7px 9px !important; font-size: 0.78rem !important; }
  .tn-label { display: none; }
  .topbar-right { display: none !important; }
  .left-panel, .mid-panel { display: none !important; }
  .right-panel { flex: 1 !important; display: flex !important; flex-direction: column !important; min-height: 0 !important; overflow: hidden !important; width: 100% !important; }

  /* DM Chat header */
  .chat-header { height: 58px !important; padding: 0 12px !important; background: rgba(6,0,14,0.97) !important; backdrop-filter: blur(16px) !important; gap: 6px !important; flex-shrink: 0 !important; position: sticky !important; top: 0 !important; z-index: 50 !important; }
  .ch-av { width: 36px !important; height: 36px !important; font-size: 0.9rem !important; }
  .ch-name { font-size: 0.88rem !important; }
  .ch-actions { gap: 6px !important; }
  .ch-action { width: 36px !important; height: 36px !important; font-size: 0.82rem !important; }
  #chatBackBtn { display: flex !important; }

  /* DM messages */
  .chat-msgs-wrap { padding: 10px 12px !important; -webkit-overflow-scrolling: touch !important; }
  .msg > div:last-child { display: flex; flex-direction: column; max-width: 78%; }

  /* DM input (WhatsApp-style) */
  .chat-input-wrap { padding: 8px 10px !important; padding-bottom: max(10px, var(--safe-bottom)) !important; background: rgba(6,0,14,0.97) !important; border-top: 1px solid rgba(255,255,255,0.07) !important; position: sticky !important; bottom: 0 !important; z-index: 30 !important; flex-shrink: 0 !important; }
  .chat-input-row { gap: 7px !important; }
  .chat-input-box { font-size: 16px !important; min-height: 42px !important; border-radius: 21px !important; padding: 10px 14px !important; max-height: 100px !important; }
  .ia-btn, .send-btn { width: 42px !important; height: 42px !important; flex-shrink: 0 !important; }
  .send-btn:active { transform: scale(0.87) !important; }
  .emoji-picker { bottom: 58px !important; max-height: 200px !important; border-radius: 14px !important; }

  /* ── ROOMS PAGE ── */
  .two-col { grid-template-columns: 1fr !important; }
  .mr-sidebar { display: none !important; }
  .page, .rooms-page { padding: 16px !important; }
  .rooms-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }

  /* ── RANDOM VIDEO CHAT (chat screen) ── */
  #chatScreen { position: fixed !important; inset: 0 !important; z-index: 500 !important; }
  .chat-bar { height: 52px !important; padding: 0 10px !important; gap: 5px !important; background: rgba(6,0,14,0.96) !important; backdrop-filter: blur(16px) !important; flex-shrink: 0 !important; }
  .cb-logo { width: 24px !important; }
  .cb-status span { font-size: 0.75rem !important; max-width: 90px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
  .cb-right { gap: 4px !important; overflow-x: auto !important; scrollbar-width: none !important; flex-wrap: nowrap !important; }
  .cb-right::-webkit-scrollbar { display: none; }
  .cc { height: 34px !important; min-width: 34px !important; padding: 0 9px !important; font-size: 0.76rem !important; border-radius: 50px !important; flex-shrink: 0 !important; }
  .cc span, .cc .cc-label { display: none !important; }
  #videoGrid { display: block !important; position: relative !important; padding: 0 !important; }
  #remoteBox { position: absolute !important; inset: 0 !important; border-radius: 0 !important; z-index: 1 !important; cursor: pointer; }
  #localBox { position: absolute !important; bottom: 88px !important; right: 10px !important; width: 88px !important; height: 132px !important; z-index: 10 !important; border-radius: 12px !important; border: 2px solid rgba(245,200,66,0.5) !important; box-shadow: 0 4px 20px rgba(0,0,0,0.7) !important; touch-action: none !important; overflow: hidden !important; cursor: pointer; }
  #localControls { opacity: 1 !important; bottom: 4px !important; padding: 3px 6px !important; gap: 3px !important; transform: translateX(-50%) !important; }
  #localControls .fvc-btn { width: 26px !important; height: 26px !important; font-size: 0.65rem !important; }
  #floatBar { padding: 8px 10px 12px !important; gap: 7px !important; }
  .fvc-btn { width: 40px !important; height: 40px !important; font-size: 0.85rem !important; background: rgba(0,0,0,0.55) !important; backdrop-filter: blur(8px) !important; }
  #chatInputArea { min-height: 40px !important; border-radius: 20px !important; padding: 6px 10px !important; }
  #msgInp { font-size: 16px !important; }
  #sendBtn { width: 28px !important; height: 28px !important; }
  #chatPanel { max-height: 62vh !important; border-radius: 18px 18px 0 0 !important; padding-bottom: max(0px, var(--safe-bottom)) !important; }
  #chatPanel textarea { font-size: 16px !important; }
  .gift-dlg { left: 10px !important; right: 10px !important; bottom: 80px !important; width: auto !important; max-width: none !important; border-radius: 16px !important; padding: 16px 14px !important; }
  .gift-presets { gap: 5px !important; }
  .gp { padding: 7px 10px !important; font-size: 0.8rem !important; }
  .gift-custom { font-size: 16px !important; min-height: 42px !important; }
  .gift-send-btn { min-height: 44px !important; }
  #frReqPopup { width: min(88vw, 310px) !important; top: 62px !important; border-radius: 14px !important; }

  /* ── VCALL (FaceTime style on mobile) ── */
  .vcall-videos { display: block !important; position: relative !important; flex: 1 !important; overflow: hidden !important; }
  #vcRemBox { position: absolute !important; inset: 0 !important; border-radius: 0 !important; z-index: 1 !important; }
  #vcRemBox video { width: 100% !important; height: 100% !important; object-fit: cover !important; }
  #vcLocBox { position: absolute !important; bottom: 78px !important; right: 10px !important; width: 85px !important; height: 126px !important; z-index: 10 !important; border-radius: 12px !important; border: 2px solid rgba(245,200,66,0.4) !important; overflow: hidden !important; }
  #vcLocBox video { width: 100% !important; height: 100% !important; object-fit: cover !important; }
  #vcChatPanel { position: absolute !important; bottom: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; height: 50vh !important; z-index: 20 !important; border-left: none !important; border-radius: 18px 18px 0 0 !important; background: rgba(13,0,24,0.97) !important; backdrop-filter: blur(20px) !important; transform: translateY(100%) !important; transition: transform 0.32s cubic-bezier(0.34,1.56,0.64,1) !important; display: flex !important; flex-direction: column !important; }
  #vcChatPanel.open { transform: translateY(0) !important; }
  .vcall-controls { height: 70px !important; gap: 14px !important; padding: 0 16px !important; padding-bottom: max(0px, var(--safe-bottom)) !important; background: rgba(6,0,14,0.96) !important; flex-shrink: 0 !important; }
  .vcall-btn { width: 50px !important; height: 50px !important; font-size: 1.05rem !important; }
  .vcall-btn.danger { width: 58px !important; height: 58px !important; }
  .vcall-bar { height: 54px !important; padding: 0 12px !important; gap: 8px !important; }

  /* ── AUDIO CALL ── */
  .acall-avatar { width: 96px !important; height: 96px !important; font-size: 2.4rem !important; }
  .acall-name { font-size: 1.5rem !important; }
  .acall-controls { gap: 14px !important; }
  .ac-btn { width: 54px !important; height: 54px !important; font-size: 1.05rem !important; }
  .ac-btn.end { width: 62px !important; height: 62px !important; }
  .ac-chat-inp input { font-size: 16px !important; min-height: 44px !important; }

  /* ── GROUP ROOM ── */
  .room-bar { height: 52px !important; padding: 0 10px !important; }
  .rb-btn span { display: none !important; }
  .rb-room-name { max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.82rem !important; }
  .room-sidebar { display: none !important; }
  .room-sidebar.mobile-open { display: flex !important; position: fixed !important; inset: 0 !important; z-index: 200 !important; background: rgba(13,0,24,0.98) !important; backdrop-filter: blur(20px) !important; flex-direction: column !important; }
  .controls-bar { height: 66px !important; gap: 10px !important; padding: 0 14px !important; padding-bottom: max(0px, var(--safe-bottom)) !important; background: rgba(6,0,14,0.97) !important; flex-shrink: 0 !important; }
  .ctrl { min-width: 48px !important; height: 48px !important; border-radius: 50% !important; }
  .ctrl-label { display: none !important; }
  #mobileChatToggle { display: flex !important; }
  .vid-grid.count-2 { grid-template-columns: 1fr !important; grid-template-rows: 1fr 1fr !important; }
  .vid-grid.count-3, .vid-grid.count-4, .vid-grid.count-5, .vid-grid.count-6 { grid-template-columns: 1fr 1fr !important; }

  /* ── PROFILE PAGE ── */
  .topbar { display: flex !important; align-items: center !important; justify-content: space-between !important; }
  .topbar .ham-btn { display: flex !important; margin-left: auto !important; }
  .main { padding: 16px !important; }
  .profile-card { flex-direction: column !important; text-align: center !important; align-items: center !important; gap: 12px !important; padding: 18px 14px !important; }
  .av-big { width: 72px !important; height: 72px !important; font-size: 1.8rem !important; }
  .pinfo { text-align: center !important; }
  .tabs { overflow-x: auto !important; scrollbar-width: none !important; flex-wrap: nowrap !important; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab-btn { flex-shrink: 0 !important; white-space: nowrap !important; min-height: 40px !important; }
  .frow { grid-template-columns: 1fr !important; gap: 10px !important; }

  /* ── BLOG PAGE ── */
  .blog-outer, .blog-wrap { padding: 16px !important; grid-template-columns: 1fr !important; }
  .blog-sidebar { display: none !important; }
  .blog-main, .blog-content { width: 100% !important; }
  .blog-card { flex-direction: column !important; }
  .blogs-grid { grid-template-columns: 1fr !important; gap: 12px !important; }

  /* ── PAYMENT PAGE ── */
  .pay-page { padding: 0 !important; }
  .pay-wrap { grid-template-columns: 1fr !important; padding: 16px !important; gap: 18px !important; max-width: 100% !important; }
  .pay-left { order: 2 !important; }
  .pay-card { order: 1 !important; padding: 22px 16px !important; border-radius: 14px !important; }
  .payment-methods { grid-template-columns: 1fr 1fr !important; gap: 7px !important; }

  /* ── ABOUT / CONTACT / TERMS ── */
  .main-container, .terms-wrap, .privacy-wrap { padding: 16px !important; }
  .about-page, .contact-page { padding: 12px 0 !important; }
  .values-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
  .stats-row { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .contact-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .contact-form input, .contact-form textarea { font-size: 16px !important; min-height: 44px !important; }

  /* ── ADMIN PAGE ── */
  .admin-wrap, .admin-layout { flex-direction: column !important; }
  .admin-sidebar { display: none !important; }
  .admin-main, .admin-content { width: 100% !important; padding: 14px !important; }
  .stat-grid, .stats-grid, .stat-cards { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .admin-table-wrap, .table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; display: block !important; }
  table { min-width: 560px !important; }
}

/* ================================================================
   MOBILE — 480px and below
   ================================================================ */
@media(max-width: 480px) {
  .feats { grid-template-columns: 1fr 1fr !important; }
  .stat-grid, .stats-grid, .stat-cards { grid-template-columns: 1fr !important; }
  .pricing-grid { grid-template-columns: 1fr !important; }
  .rooms-grid { grid-template-columns: 1fr !important; }
  .pay-modal .country-grid { grid-template-columns: 1fr 1fr !important; }
  .hero h1 { font-size: 1.85rem !important; }
  .hero-ctas .cta-main, .hero-ctas .cta-secondary { max-width: 100% !important; }
}

/* ================================================================
   SMALL MOBILE — 380px and below
   ================================================================ */
@media(max-width: 380px) {
  .feats { grid-template-columns: 1fr !important; }
  .hero h1 { font-size: 1.65rem !important; }
  #localBox { width: 74px !important; height: 108px !important; bottom: 82px !important; right: 7px !important; }
  #vcLocBox { width: 74px !important; height: 108px !important; }
  .chat-bar { height: 48px !important; }
  .cc { height: 30px !important; min-width: 30px !important; }
  .fvc-btn { width: 36px !important; height: 36px !important; }
  .vcall-btn { width: 44px !important; height: 44px !important; }
  .ctrl { min-width: 42px !important; height: 42px !important; }
  .bn-item i { font-size: 1.15rem !important; }
  .controls-bar { gap: 7px !important; padding: 0 10px !important; }
}

/* ================================================================
   TOUCH DEVICE IMPROVEMENTS
   ================================================================ */
@media(hover: none) and (pointer: coarse) {
  button, .btn, a, .cc, .fvc-btn, .vcall-btn, .ctrl, .ch-action, .ia-btn, .send-btn, .tn, .tab-btn, .gp, .ga, .bn-item { touch-action: manipulation !important; }
  .fvc-btn, #floatBar { opacity: 1 !important; }
  #localBox { touch-action: none !important; }
  .card:hover, .feat:hover, .testi:hover, .price-card:hover { transform: none !important; }
}

/* ================================================================
   SAFE AREA — iPhone notch support
   ================================================================ */
.chat-bar, .vcall-bar, .room-bar { padding-top: max(0px, var(--safe-top)); }
.chat-input-wrap, .vcall-controls, .controls-bar { padding-bottom: max(0px, var(--safe-bottom)); }

/* ================================================================
   REDUCE MOTION
   ================================================================ */
@media(prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ================================================================
   EARTHVASI — ENHANCED MOBILE FIXES v2
   All desktop features → fully mobile-friendly
   ================================================================ */

/* ── BLOG PAGE MOBILE ── */
@media(max-width: 768px) {
  /* Blog hero */
  .blog-hero { padding: 80px 16px 32px !important; }
  .blog-hero h1 { font-size: clamp(1.8rem, 7vw, 2.8rem) !important; }
  .blog-hero p { font-size: 0.9rem !important; }
  .search-wrap { max-width: 100% !important; }
  .search-wrap input { font-size: 16px !important; min-height: 46px !important; }

  /* Filter row horizontal scroll */
  .filters, #filterRow {
    display: flex !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    gap: 7px !important;
    padding: 0 16px 8px !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .filters::-webkit-scrollbar, #filterRow::-webkit-scrollbar { display: none; }
  .filter-btn { flex-shrink: 0 !important; white-space: nowrap !important; min-height: 36px !important; padding: 7px 14px !important; font-size: 0.8rem !important; border-radius: 50px !important; }

  /* Posts grid → single column */
  .posts-grid { grid-template-columns: 1fr !important; gap: 12px !important; padding: 0 16px !important; }
  .post-card { border-radius: 14px !important; }
  .post-card img { max-height: 180px !important; object-fit: cover !important; }
  .post-meta { font-size: 0.72rem !important; }
  .post-title { font-size: 1.1rem !important; }
  .post-excerpt { font-size: 0.84rem !important; }

  /* Single blog post */
  .single-post-view { padding: 0 16px !important; }
  .back-btn { margin: 16px 0 !important; display: inline-flex !important; min-height: 40px !important; }
  #postArticle { font-size: 0.95rem !important; }
  #postArticle h1 { font-size: 1.7rem !important; }
  #postArticle h2 { font-size: 1.3rem !important; }
  #postArticle img { max-width: 100% !important; height: auto !important; border-radius: 10px !important; }
  #postArticle pre, #postArticle code { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; font-size: 0.8rem !important; }

  /* Blog footer */
  .blog-footer { flex-direction: column !important; text-align: center !important; gap: 12px !important; padding: 24px 16px !important; }
  .footer-links-row { flex-wrap: wrap !important; justify-content: center !important; gap: 8px 14px !important; }

  /* Blog nav */
  .blog-nav, .blog-header nav { padding: 0 14px !important; height: 56px !important; }
  .nav-label { display: none !important; }
  .nav-cta { padding: 7px 14px !important; font-size: 0.8rem !important; }
}

/* ── RANDOM CHAT PAGE MOBILE ── */
@media(max-width: 768px) {
  /* Full-screen chat takeover */
  #chatScreen { position: fixed !important; inset: 0 !important; z-index: 500 !important; display: flex !important; flex-direction: column !important; }
  #waitScreen { padding: 24px 16px !important; }
  .wait-actions { flex-direction: column !important; gap: 10px !important; }
  .wait-actions button { width: 100% !important; min-height: 48px !important; }

  /* Interest tags scroll */
  .interest-tags, #interestTags { display: flex !important; flex-wrap: wrap !important; gap: 7px !important; justify-content: center !important; padding: 0 8px !important; }
  .int-tag { min-height: 36px !important; padding: 7px 14px !important; font-size: 0.8rem !important; border-radius: 50px !important; }

  /* Landing / start screen */
  .rc-hero, .start-screen { padding: 60px 16px 30px !important; text-align: center !important; }
  .rc-hero h1 { font-size: clamp(1.8rem, 7vw, 2.8rem) !important; }
  .rc-hero p { font-size: 0.9rem !important; max-width: 100% !important; }
  .start-btn, .rc-start { width: 100% !important; max-width: 280px !important; min-height: 52px !important; font-size: 1rem !important; }
  .gender-select { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .gender-opt { padding: 16px 8px !important; font-size: 0.85rem !important; }
}

/* ── ROOM PAGE MOBILE ── */
@media(max-width: 768px) {
  .rooms-page, .page { padding: 16px !important; }
  .page-header { padding: 70px 16px 24px !important; }
  .page-header h1 { font-size: clamp(1.8rem, 7vw, 2.8rem) !important; }
  .rooms-filter { overflow-x: auto !important; scrollbar-width: none !important; flex-wrap: nowrap !important; padding-bottom: 6px !important; }
  .rooms-filter::-webkit-scrollbar { display: none; }
  .room-card { border-radius: 14px !important; }
  .room-card-footer { flex-direction: column !important; gap: 8px !important; align-items: stretch !important; }
  .room-card-footer .btn { width: 100% !important; min-height: 44px !important; }
  .create-room-btn { width: 100% !important; min-height: 50px !important; font-size: 1rem !important; }

  /* Room video grid - mobile */
  .room-main { flex-direction: column !important; }
  .vid-grid { gap: 4px !important; padding: 4px !important; }
  .vid-tile { border-radius: 10px !important; min-height: 120px !important; }
  .vid-name { font-size: 0.72rem !important; padding: 3px 7px !important; }
}

/* ── LOGIN PAGE MOBILE ── */
@media(max-width: 768px) {
  .login-page, .auth-page { padding: 0 !important; min-height: 100dvh !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; }
  .login-card, .auth-card { width: 100% !important; max-width: 100% !important; border-radius: 22px 22px 0 0 !important; padding: 32px 20px !important; padding-bottom: max(24px, var(--safe-bottom)) !important; margin-top: auto !important; }
  .login-card h1, .auth-card h1 { font-size: 1.8rem !important; }
  .login-card .input, .auth-card .input, .auth-page input { font-size: 16px !important; min-height: 48px !important; }
  .login-card .btn, .auth-card .btn { min-height: 50px !important; font-size: 1rem !important; }
}

/* ── WELCOME OVERLAY MOBILE ── */
@media(max-width: 768px) {
  .welcome-content { padding: 24px 16px !important; }
  .welcome-content h2 { font-size: 1.5rem !important; }
  .welcome-content p { font-size: 0.9rem !important; }
  .welcome-actions { flex-direction: column !important; gap: 10px !important; }
  .welcome-actions .btn { width: 100% !important; min-height: 50px !important; }
  .welcome-video-wrap video { max-height: 240px !important; border-radius: 12px !important; }
}

/* ── GENERAL: Any horizontal-scrolling table on mobile ── */
@media(max-width: 768px) {
  .table-responsive, .scroll-table { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; display: block !important; width: 100% !important; }

  /* Notification panel full-width on mobile */
  #notifPanel {
    position: fixed !important;
    top: 62px !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-height: 60vh !important;
    overflow-y: auto !important;
    border-radius: 16px !important;
  }

  /* Modals / overlays — bottom sheet style */
  .overlay, .modal-overlay { padding: 0 !important; align-items: flex-end !important; }
  .modal, .modal-box {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 22px 22px 0 0 !important;
    padding: 28px 20px !important;
    padding-bottom: max(24px, var(--safe-bottom)) !important;
    max-height: 92vh !important;
    overflow-y: auto !important;
  }

  /* Pay modal */
  .pay-modal { border-radius: 22px 22px 0 0 !important; padding: 24px 16px !important; padding-bottom: max(20px, var(--safe-bottom)) !important; max-height: 90vh !important; overflow-y: auto !important; }
  .country-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .country-item { padding: 10px 8px !important; font-size: 0.78rem !important; }
  .pay-methods-row { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .pm { padding: 10px 8px !important; }
  .pm-name { font-size: 0.75rem !important; }

  /* Footer social links */
  .social-links { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; justify-content: center !important; }
  .social-link { width: 40px !important; height: 40px !important; font-size: 1rem !important; }

  /* Marquee on mobile — reduce gap */
  .marquee-item { padding: 0 18px !important; font-size: 0.76rem !important; }

  /* Scroll to top button */
  #scrollTopBtn, .scroll-top { bottom: calc(var(--bnav-h) + var(--safe-bottom) + 12px) !important; right: 14px !important; width: 40px !important; height: 40px !important; font-size: 0.9rem !important; }

  /* Cookie/toast banners above bottom nav */
  .cookie-banner, .banner-notice { bottom: calc(var(--bnav-h) + var(--safe-bottom) + 8px) !important; left: 10px !important; right: 10px !important; border-radius: 14px !important; }

  /* Floating action buttons */
  .fab, .float-btn { bottom: calc(var(--bnav-h) + var(--safe-bottom) + 16px) !important; }

  /* Problems / Help page */
  .problem-list { gap: 10px !important; }
  .problem-item { padding: 16px 14px !important; border-radius: 12px !important; }
  .problem-item h3 { font-size: 0.95rem !important; }
  .problem-item p { font-size: 0.83rem !important; }
  .faq-item { padding: 16px 14px !important; }
  .faq-question { font-size: 0.9rem !important; }
  .faq-answer { font-size: 0.83rem !important; }

  /* About page */
  .about-hero { padding: 80px 16px 40px !important; }
  .about-hero h1 { font-size: clamp(2rem, 8vw, 3rem) !important; }
  .team-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  .team-card { padding: 16px 12px !important; }
  .mission-grid { grid-template-columns: 1fr !important; gap: 14px !important; }

  /* Discover section cards — compact */
  .discover-section { padding: 20px 0 28px !important; }
  .dp-card { padding: 12px 8px !important; border-radius: 12px !important; min-width: 100px !important; }
  .dp-av { width: 50px !important; height: 50px !important; font-size: 1.3rem !important; }
  .dp-name { font-size: 0.75rem !important; }
  .dp-loc { font-size: 0.65rem !important; }
  .dp-btn { padding: 5px 10px !important; font-size: 0.7rem !important; min-height: 28px !important; }

  /* Hero section — better mobile spacing */
  .hero { padding: 80px 16px 40px !important; }
  .hero-stats { gap: 20px !important; padding: 18px 20px !important; border-radius: 20px !important; flex-wrap: wrap !important; justify-content: center !important; }
  .hs { min-width: 70px !important; }
  .hs-n { font-size: 1.5rem !important; }
  .hs-l { font-size: 0.68rem !important; }

  /* Hero CTAs — full width */
  .cta-main, .cta-secondary { padding: 14px 24px !important; font-size: 0.95rem !important; width: 100% !important; max-width: 320px !important; justify-content: center !important; }
  .hero-ctas { flex-direction: column !important; align-items: center !important; gap: 10px !important; width: 100% !important; }

  /* Pricing cards — better mobile */
  .price-card { padding: 22px 16px !important; }
  .pc-num { font-size: 3rem !important; }
  .price-features { gap: 8px !important; }
  .price-feature { font-size: 0.83rem !important; }

  /* Section headings */
  .s-h { font-size: clamp(1.6rem, 6vw, 2.5rem) !important; letter-spacing: -0.5px !important; }
  .s-p { font-size: 0.9rem !important; }

  /* Feature grid 2-col on medium mobile */
  .feats { grid-template-columns: 1fr 1fr !important; gap: 1px !important; }
  .feat { padding: 18px 12px !important; }
  .feat-icon { font-size: 1.4rem !important; margin-bottom: 12px !important; }
  .feat h3 { font-size: 0.9rem !important; }
  .feat p { font-size: 0.78rem !important; }

  /* Steps */
  .steps { grid-template-columns: 1fr !important; gap: 10px !important; }
  .step { padding: 20px 16px !important; }
  .step-num { width: 40px !important; height: 40px !important; font-size: 1.1rem !important; }
  .step h3 { font-size: 1rem !important; }
  .step p { font-size: 0.84rem !important; }

  /* Testimonials */
  .testi-grid { grid-template-columns: 1fr !important; }
  .testi { padding: 16px !important; }
  .testi-text { font-size: 0.87rem !important; }
  .testi-name { font-size: 0.85rem !important; }

  /* Gift amounts */
  .gift-amounts { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; }
  .gift-amt { padding: 8px 14px !important; font-size: 0.85rem !important; min-height: 38px !important; border-radius: 50px !important; }

  /* Female section */
  .female-perks { gap: 8px !important; }
  .female-perk { padding: 12px !important; font-size: 0.84rem !important; }
  .female-card { padding: 24px 16px !important; border-radius: 18px !important; }

  /* Footer complete mobile */
  .footer { padding: 40px 16px 20px !important; }
  .footer-top { grid-template-columns: 1fr 1fr !important; gap: 24px !important; }
  .footer-brand { grid-column: 1 / -1 !important; }
  .footer-col h4 { font-size: 0.8rem !important; }
  .footer-col a { font-size: 0.82rem !important; min-height: 32px !important; display: flex !important; align-items: center !important; }
  .footer-bottom { flex-direction: column !important; gap: 8px !important; text-align: center !important; font-size: 0.78rem !important; }

  /* Nav avatar in mobile — smaller */
  .nav-avatar-btn { padding: 4px 8px 4px 4px !important; }
  .nav-av { width: 30px !important; height: 30px !important; font-size: 0.8rem !important; }
}

/* ── 480px and below ── */
@media(max-width: 480px) {
  .feats { grid-template-columns: 1fr !important; }
  .team-grid { grid-template-columns: 1fr !important; }
  .rooms-grid { grid-template-columns: 1fr !important; }
  .hero h1 { font-size: 1.85rem !important; }
  .hero-ctas .cta-main, .hero-ctas .cta-secondary { max-width: 100% !important; }
  .blog-nav .nav-cta { display: none !important; }
  .mob-start-btn { font-size: 0.85rem !important; }
}

/* ── 380px and below ── */
@media(max-width: 380px) {
  .hero h1 { font-size: 1.65rem !important; }
  .hs-n { font-size: 1.3rem !important; }
  .feat { padding: 14px 10px !important; }
  .footer-top { grid-template-columns: 1fr !important; }
  .mob-drawer-panel { width: 90vw !important; }
}

/* ── PERFORMANCE: GPU-accelerate animations on mobile ── */
@media(max-width: 768px) {
  .mob-drawer-panel, .bottom-nav, .mob-topbar, .chat-panel, #chatPanel, #vcChatPanel {
    will-change: transform;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  /* Reduce heavy animations on mobile */
  .bg-mesh, .bg-grid, .orb { display: none !important; }
  #canvas-bg { display: none !important; }
  /* Keep subtle gradient background only */
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background: radial-gradient(ellipse 80% 60% at 20% 10%, rgba(168,85,247,0.12) 0%, transparent 50%),
                radial-gradient(ellipse 60% 50% at 80% 90%, rgba(251,113,133,0.10) 0%, transparent 50%),
                #06000e;
    pointer-events: none;
  }
}