/* Safe areas for the iOS WebView.
 *
 * capacitor.config.json sets server.url to this site, and the templates set
 * viewport-fit=cover, so the page extends under the notch, the home indicator
 * and the rounded corners. Without these rules content sits on the physical
 * edges of the device.
 *
 * Left/right only at body level: index.html and services.html already handle
 * top and bottom on the header and footer, and adding them here would double
 * the padding.
 */
body {
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  box-sizing: border-box;
}

/* Fixed elements ignore body padding, so they need their own insets. */
.fixed-safe,
[data-safe-area="true"] {
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Anything pinned to the bottom clears the home indicator. */
.cookie-consent,
.pwa-install-banner,
#pwa-install-btn {
  margin-bottom: env(safe-area-inset-bottom, 0px);
}

/* Modals and dialogs must not run under the notch or the indicator. */
.modal-dialog,
.checkout-modal,
.modal-content {
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}