:root {
  --sat: var(--safe-area-inset-top, env(safe-area-inset-top, 0px));
  --sab: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
  --sal: var(--safe-area-inset-left, env(safe-area-inset-left, 0px));
  --sar: var(--safe-area-inset-right, env(safe-area-inset-right, 0px));
  --header-height: 4rem;
  --titlebar-height: 0px;
}

@media (display-mode: window-controls-overlay) {
  :root {
    --titlebar-height: env(titlebar-area-height, 3.5rem);
  }
}

html {
  background: linear-gradient(180deg, #2d1b4e 0%, #1e1b3a 30%, #F5F3FF 100%);
  min-height: 100%;
  height: 100%;
}

/* Tablets only. Phones stay at 16px. Scale by the side that still fits a 440 by 780 screen. */
@media (pointer: coarse) and (min-width: 600px) {
  html:root {
    font-size: calc(16px * max(1, min(100vw / 440, 100vh / 780)));
  }
}

html,
body,
#root {
  height: 100vh;
  /* fallback for older Safari */
  height: 100dvh;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-y: none;
}

/* iOS PWA standalone: avoid 100dvh jump when Safari UI shows/hides; use large viewport. */
@media (display-mode: standalone) {

  html,
  body,
  #root {
    height: 100lvh;
    min-height: 100lvh;
  }
}

/* One face for every weight, so bold text still draws the regular emoji glyph. */
@font-face {
  font-family: "DocValidity Emoji";
  src: local("Apple Color Emoji"), local("Segoe UI Emoji"), local("Noto Color Emoji");
  unicode-range: U+1F1E6-1F1FF, U+1F300-1FAFF, U+2600-26FF, U+2700-27BF, U+FE0F, U+200D;
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DocValidity Symbols";
  src: local("Apple Symbols"), local("Segoe UI Symbol");
  unicode-range: U+2794, U+2190-21FF, U+2B00-2BFF;
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

.verify-code-input {
  color: #000 !important;
  -webkit-text-fill-color: #000;
}

.verify-code-input::placeholder {
  color: #cbd5e1;
  -webkit-text-fill-color: #cbd5e1;
}

.glyph {
  font-weight: 400 !important;
  font-style: normal !important;
  font-synthesis: none;
  font-family: "Apple Color Emoji", "Apple Symbols", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif !important;
}

body {
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
  font-family: "DocValidity Emoji", "DocValidity Symbols", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: linear-gradient(180deg, #2d1b4e 0%, #1e1b3a 30%, #F5F3FF 100%);
}

#root {
  min-height: 100%;
  background: linear-gradient(180deg, #2d1b4e 0%, #1e1b3a 30%, #F5F3FF 100%);
}

input,
textarea,
[contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
}

@media screen and (max-width: 768px) {

  input,
  select,
  textarea,
  .mobile-text-base {
    font-size: 16px !important;
  }
}

input:not([type="checkbox"]):not([type="radio"]),
textarea,
select {
  -webkit-appearance: none;
  appearance: none;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Enhanced iOS Scrolling */
.overflow-y-auto,
.overflow-x-auto,
.custom-scrollbar {
  -webkit-overflow-scrolling: touch;
}

.draggable {
  -webkit-app-region: drag;
}

.non-draggable {
  -webkit-app-region: no-drag;
}