.dr-native-app {
  --dr-safe-top: env(safe-area-inset-top, 0px);
  --dr-safe-right: env(safe-area-inset-right, 0px);
  --dr-safe-bottom: env(safe-area-inset-bottom, 0px);
  --dr-safe-left: env(safe-area-inset-left, 0px);
  min-height: 100%;
  background: #eef4f6;
  overscroll-behavior: none;
}

.dr-native-app body {
  min-width: 280px;
  min-height: 100%;
  margin: 0;
  padding: var(--dr-safe-top) var(--dr-safe-right) var(--dr-safe-bottom) var(--dr-safe-left);
  -webkit-tap-highlight-color: transparent;
}

.dr-native-app *,
.dr-native-app *::before,
.dr-native-app *::after {
  min-width: 0;
  box-sizing: border-box;
}

.dr-native-app :where(h1, h2, h3, h4, p, span, strong, small, label, button, a, dd, dt) {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.dr-native-app :where(img, video, canvas, svg, iframe) {
  max-width: 100%;
}

.dr-native-app :where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid #d6ad48 !important;
  outline-offset: 3px;
}

.dr-native-app :where(button, [role="button"], input, select) {
  min-height: 44px;
}

.dr-native-app .screen-layer,
.dr-native-app .screen-shell,
.dr-native-app .admin-panel,
.dr-native-app .admin-modal,
.dr-native-app .publisher-panel {
  max-width: 100vw;
}

.dr-native-app .dr-connectivity-status {
  position: fixed;
  z-index: 2147483647;
  left: 50%;
  bottom: calc(14px + var(--dr-safe-bottom));
  max-width: calc(100vw - 28px - var(--dr-safe-left) - var(--dr-safe-right));
  padding: 10px 14px;
  border: 1px solid rgba(199, 169, 106, 0.45);
  border-radius: 999px;
  background: rgba(12, 18, 23, 0.92);
  color: #fff;
  font: 700 0.78rem/1.25 system-ui, sans-serif;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 12px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.dr-native-app .dr-connectivity-status.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.dr-native-app.is-offline .dr-connectivity-status {
  border-color: rgba(255, 200, 92, 0.72);
}

@media (max-width: 599px) {
  .dr-native-app .page-layout-toolbar.is-compact {
    right: calc(max(12px, var(--dr-safe-right)) + 88px) !important;
    bottom: max(12px, var(--dr-safe-bottom)) !important;
  }

  .dr-native-app :where(.admin-panel, .admin-modal, .publisher-panel) {
    width: calc(100vw - var(--dr-safe-left) - var(--dr-safe-right)) !important;
    max-height: calc(100dvh - var(--dr-safe-top) - var(--dr-safe-bottom)) !important;
    border-radius: 18px 18px 0 0;
  }

  .dr-native-app :where(.doctor-card, .service-card, .review-card, .client-card, .document-card, .contact-card) {
    width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 820px) {
  .dr-native-app .services-grid--four .service-row:has(> [data-admin-delete-item]) {
    display: block;
    min-height: 168px;
    padding: 62px 16px 16px !important;
  }

  .dr-native-app .services-grid--four .service-row .admin-inline-edit {
    display: inline-flex;
    width: 44px;
    min-width: 44px;
    vertical-align: middle;
  }

  .dr-native-app .contact-card-grid:has([data-admin-delete-item]) {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: none !important;
    grid-auto-rows: minmax(150px, auto) !important;
  }

  .dr-native-app .contact-card:has(> [data-admin-delete-item]) {
    min-height: 150px;
    padding: 62px 20px 20px !important;
  }
}

@media (min-width: 600px) and (max-width: 1199px) {
  .dr-native-app .screen-shell {
    width: min(100%, 1120px);
    margin-inline: auto;
  }
}

.dr-native-app[data-dr-device="tv"] body,
.dr-native-app[data-dr-device="car"] body {
  font-size: clamp(17px, 1.45vw, 25px);
}

.dr-native-app[data-dr-device="tv"] :where(button, a, input, select),
.dr-native-app[data-dr-device="car"] :where(button, a, input, select) {
  min-height: 52px;
}

.dr-native-app[data-dr-device="tv"] .screen-shell,
.dr-native-app[data-dr-device="car"] .screen-shell {
  width: min(94vw, 1680px);
  margin-inline: auto;
}

@media (prefers-reduced-motion: reduce) {
  .dr-native-app *,
  .dr-native-app *::before,
  .dr-native-app *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}