:root {
  /* Dark Theme Variables from variables.css (.ion-palette-dark) */
  --your-text-color-primary: #e3e3e3;
  --your-text-color-secondary: #9d9b98;
  --your-text-color-additional: #777777;

  --your-background-color-primary: #141414;
  --your-background-color-secondary: #202020;

  --your-stroke-color: #393939;

  --ion-color-primary: #e3e3e3;
  --ion-color-primary-rgb: 227, 227, 227;
  --ion-color-primary-contrast: #000000;
  --ion-color-primary-contrast-rgb: 0, 0, 0;
  --ion-color-primary-shade: #c8c8c8;
  --ion-color-primary-tint: #e6e6e6;

  --ion-color-light: #202020;
  --ion-color-light-rgb: 32, 32, 32;
  --ion-color-light-contrast: #ffffff;
  --ion-color-light-contrast-rgb: 255, 255, 255;
  --ion-color-light-shade: #1c1c1c;
  --ion-color-light-tint: #363636;

  --ion-text-color: var(--your-text-color-primary);
  --ion-background-color: var(--your-background-color-primary);

  --ion-font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Roboto", sans-serif;

  --ion-safe-area-top: env(safe-area-inset-top);
  --ion-safe-area-bottom: env(safe-area-inset-bottom);
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--ion-font-family);
  color: var(--ion-text-color);
  background-color: var(--ion-background-color);
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

/* Ionic Component Simulation */
.ion-page {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  z-index: 100;
}

.ion-page--safe-area-top {
  padding-top: var(--ion-safe-area-top);
}

.ion-content {
  position: relative;
  flex: 1;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background-color: var(--ion-background-color);
}

.ion-grid {
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  box-sizing: border-box;
}

.ion-grid[fixed] {
  max-width: 768px;
}

.ion-padding {
  padding: 16px;
}

.ion-row {
  display: flex;
  flex-wrap: wrap;
}

.ion-col {
  padding: 5px;
  position: relative;
  width: 100%;
  margin: 0;
  min-height: 1px;
  flex-basis: 0;
  flex-grow: 1;
  max-width: 100%;
  box-sizing: border-box;
}

.ion-col[size="12"] {
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
}

/* Support Page Specific Styles */
.support__wrapper {
  position: relative;
  min-height: 100%;
  padding: 32px 16px 16px !important;
  box-sizing: border-box;
  isolation: isolate;
}

.support__wrapper::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
  height: 50%;
  background: var(--ion-background-color) no-repeat bottom center / contain;
  background-image: url('./assets/img.png');
  background-image: image-set(
    url('./assets/img.avif') type('image/avif'),
    url('./assets/img.webp') type('image/webp'),
    url('./assets/img.png') type('image/png')
  );
}

.support__title {
  margin-top: 0;
  margin-bottom: 20px;
  font-weight: 700;
  font-size: 24px;
}

.support__description {
  margin-top: 0;
  margin-bottom: 20px;
  line-height: 1.5;
}

.support__email {
  font-size: 18px;
  text-decoration: none;
  color: #ffffff;
}