@use "../../../styles/mixins";

$font-display: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
$font-body:  'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

.container {
  display: flex;
  // Use dvh (dynamic viewport height) with fallback for older browsers
  // This fixes iOS Safari where 100vh includes the address bar height
  min-height: 100vh;
  min-height: 100dvh;
  font-family: $font-body;

  // CSS variables are set by CheckoutThemeProvider via MantineProvider cssVariablesResolver
  // Available variables:
  // --checkout-accent, --checkout-accent-contrast, --checkout-accent-soft, --checkout-accent-muted
  // --checkout-background, --checkout-surface
  // --checkout-text-primary, --checkout-text-secondary, --checkout-text-tertiary
  // --checkout-border

  background-color: var(--checkout-background, #F9FAFB);
  color: var(--checkout-text-primary, #1a1a1a);

  // Countdown timer colors - semantic colors that don't change with theme
  .countdown {
    color: var(--mantine-color-teal-6, #0ca678);
    font-weight: 600;
  }

  .countdownCloseToExpiry {
    color: var(--mantine-color-red-7, #ad2f26);
  }

  .timerGroup {
    flex-shrink: 0;
  }

  .timerLabel {
    color: var(--checkout-text-secondary);
    font-size: 0.875rem;

    @include mixins.respond-below(sm) {
      display: none;
    }
  }

  .subTitle {
    font-size: 0.95em;
    margin-top: 10px;
    color: var(--checkout-text-secondary);
  }

  .mainContent {
    flex: 1;

    .header {
      height: 60px;
      background-color: var(--checkout-surface);
      border-bottom: 1px solid var(--checkout-border);
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
      text-align: center;

      .actionBar {
        padding: var(--hi-spacing-md);
        width: 100%;

        .title {
          font-family: $font-display;
          font-size: 1.2em;
          font-weight: 600;
          color: var(--checkout-text-primary);
        }
      }

      h1 {
        font-family: $font-display;
        font-size: 1.3em;
        font-weight: 600;
        width: 100%;
        max-width: 700px;
        padding: 0 15px;
        color: var(--checkout-text-primary);

        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;

        @include mixins.respond-below(md) {
          font-size: 1em;
        }
      }
    }
  }

  a:not([class]) {
    color: var(--checkout-accent);

    &:hover {
      text-decoration: underline;
    }
  }

  :global(.mantine-SegmentedControl-label[data-active]) {
    color: var(--checkout-accent-contrast) !important;
  }
}
