/* iOS Safe Area Support */
:root {
  --safe-area-inset-top: env(safe-area-inset-top, 0px);
  --safe-area-inset-right: env(safe-area-inset-right, 0px);
  --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-inset-left: env(safe-area-inset-left, 0px);
}

/* Global Font Family - Manrope */
body, html {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
}

/* Ionic CSS Variable Overrides for Tailwind compatibility */
ion-app {
  --ion-background-color: transparent;
  --ion-text-color: inherit;
}

ion-content {
  --background: transparent;
  --color: inherit;
}

/* Ionic Header Customization */
ion-header {
  --ion-toolbar-background: transparent;
  --ion-toolbar-color: inherit;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

ion-header.ion-no-border::after {
  display: none;
}

ion-header ion-toolbar:first-of-type {
  padding-top: env(safe-area-inset-top, 0px);
}

ion-toolbar {
  --background: transparent;
  --color: inherit;
  --padding-start: 0;
  --padding-end: 0;
  --padding-bottom: 0;
  --min-height: auto;
}

/* Ensure body respects safe areas */
body {
  margin: 0;
  padding: 0;
}

/* Apply safe area padding only on iOS devices */
/* @supports (-webkit-touch-callout: none) {
  body {
    padding-top: var(--safe-area-inset-top);
    padding-bottom: var(--safe-area-inset-bottom);
    padding-left: var(--safe-area-inset-left);
    padding-right: var(--safe-area-inset-right);
  }
} */

/* For fixed headers */
/* .safe-area-top {
  padding-top: var(--safe-area-inset-top);
} */

/* For fixed bottom navigation */
.safe-area-bottom {
  padding-bottom: var(--safe-area-inset-bottom);
}

/* Combination for full safe area */
.safe-area-inset {
  padding-top: var(--safe-area-inset-top);
  padding-bottom: var(--safe-area-inset-bottom);
  padding-left: var(--safe-area-inset-left);
  padding-right: var(--safe-area-inset-right);
}

.no-safe-area-for-banner {
  --ion-safe-area-bottom: 10px;
}

.safe-area-for-banner {
  --ion-safe-area-bottom: env(safe-area-inset-bottom);
}