html,
body,
#root {
  height: 100%;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  background: #0a0a0a;
}

:root {
  --app-safe-top: env(safe-area-inset-top, 0px);
  --app-safe-bottom: env(safe-area-inset-bottom, 34px);
  --app-vh: 100dvh;
}

body {
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

#root {
  width: 100%;
  max-width: none;
  min-height: 0;
}

* {
  box-sizing: border-box;
}

/* ── Phone / tablet browser: lock to visible viewport (not 100vh ghost height) ── */
@media (max-width: 1023px) {
  html,
  body,
  #root {
    height: var(--app-vh, 100dvh);
    max-height: var(--app-vh, 100dvh);
    overflow: hidden;
  }

  body > div,
  [data-expo-router-root],
  .expo-router-root {
    width: 100% !important;
    max-width: none !important;
    height: var(--app-vh, 100dvh) !important;
    max-height: var(--app-vh, 100dvh) !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  #root > div {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 0;
    overflow: hidden;
  }
}

/* Desktop: stretch full height normally */
@media (min-width: 1024px) {
  html,
  body,
  #root {
    min-height: 100dvh;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }

  #root {
    flex: 1;
  }

  #root > div {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 0;
  }

  body > div,
  [data-expo-router-root],
  .expo-router-root {
    width: 100% !important;
    max-width: none !important;
    min-height: 100dvh;
    min-height: 100vh;
  }
}

/* Fixed bottom action bars — checkout, booking, studio detail, events */
.sticky-bottom-bar {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 900 !important;
  margin: 0 !important;
  padding-top: 12px !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  padding-bottom: calc(12px + var(--app-safe-bottom, 34px)) !important;
  background-color: #0d0d0d !important;
  border-top: 2px solid #2a2a2a !important;
  box-sizing: border-box !important;
}

.sticky-bottom-bar .checkout-pay-btn,
.sticky-bottom-bar .sticky-pay-btn {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 52px !important;
  padding-top: 14px !important;
  padding-bottom: 14px !important;
  box-sizing: border-box !important;
}

.sticky-bottom-bar .checkout-pay-btn-text,
.sticky-bottom-bar .sticky-pay-btn-text {
  line-height: 20px !important;
}

/* Tab bar clearance on phone browsers */
.mobile-tab-bar {
  padding-bottom: var(--app-safe-bottom, 34px) !important;
  height: calc(56px + var(--app-safe-bottom, 34px)) !important;
}

/* Razorpay modal — stay inside visible viewport */
.razorpay-container,
.razorpay-backdrop {
  max-height: var(--app-vh, 100dvh) !important;
}

iframe.razorpay-checkout-frame {
  max-height: calc(var(--app-vh, 100dvh) - var(--app-safe-bottom, 34px) - 12px) !important;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #141414;
}

::-webkit-scrollbar-thumb {
  background: #444;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #666;
}