/* Capacitor 8 supplies CSS insets and clears them when native padding applies.
   Safari and other browsers use the standard safe-area environment variables. */
:root {
  --wg-safe-top: var(--safe-area-inset-top, env(safe-area-inset-top, 0px));
  --wg-safe-right: var(--safe-area-inset-right, env(safe-area-inset-right, 0px));
  --wg-safe-bottom: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
  --wg-safe-left: var(--safe-area-inset-left, env(safe-area-inset-left, 0px));
}

@media screen {
  body {
    padding-left: var(--wg-safe-left);
    padding-right: var(--wg-safe-right);
  }
  .appbar, .tool-header, .topbar {
    padding-top: calc(10px + var(--wg-safe-top));
  }
  .topbar { padding-top: calc(12px + var(--wg-safe-top)); }
  body.wg-has-navigation {
    padding-bottom: calc(84px + var(--wg-safe-bottom));
  }
  .wg-return-nav {
    left: var(--wg-safe-left);
    right: var(--wg-safe-right);
    padding-bottom: calc(10px + var(--wg-safe-bottom));
  }
  body .billing-overlay {
    padding: max(16px, var(--wg-safe-top)) max(16px, var(--wg-safe-right))
      max(16px, var(--wg-safe-bottom)) max(16px, var(--wg-safe-left));
  }
  .contact-fab {
    right: calc(18px + var(--wg-safe-right));
    bottom: calc(18px + var(--wg-safe-bottom));
  }
  body > footer {
    padding-bottom: calc(32px + var(--wg-safe-bottom));
  }
}

@media screen and (max-width: 700px) {
  body:not(.wg-has-navigation) > .wg-nav {
    left: var(--wg-safe-left);
    right: var(--wg-safe-right);
    padding-bottom: max(8px, var(--wg-safe-bottom));
  }
}

@media screen and (max-width: 640px) {
  .appbar, .tool-header { padding-top: calc(8px + var(--wg-safe-top)); }
}