/*
 * common.css — агрегатор стилей приложения (импорты elements/*).
 * Не дублировать flow-логику здесь: шапки и Flow — в соответствующих elements/*.css.
 * Точка входа: app/index.html, legal-страницы.
 */
@import 'root.css?v=2.0'; /* + */
@import 'fonts.css?v=1.9'; /* + */
@import 'layouts.css?v=2.2'; /* + */
@import 'text.css?v=2.0'; /* + */

@import 'elements/branding.css?v=1.9'; /* + */

@import 'elements/hero.css?v=2.3'; /* + */

@import 'elements/hero-slider.css?v=2.7'; /* + */
@import 'elements/liquid-glass.css?v=2.9'; /* + */

@import 'elements/buttons.css?v=2.6'; /* + */

@import 'elements/preview.css?v=4.0'; /* + */

@import 'elements/disclaimer.css?v=2.2'; /* + */

@import 'elements/consent-item.css?v=1.0'; /* + */
@import 'elements/app-view-screens.css?v=4.6'; /* + */
@import 'elements/app-screen-transition.css?v=1.3'; /* + */

@import 'elements/review.css?v=1.1'; /* + */
@import 'elements/processing-settings.css?v=1.5'; /* + */
@import 'elements/onboarding.css?v=3.5'; /* + */

@import 'elements/preloader.css?v=1.9'; /* + */

@import 'elements/header.css?v=2.4'; /* + */
@import 'elements/legal-links.css?v=1.0'; /* + */
@import 'elements/site-contacts.css?v=1.3'; /* + */
@import 'elements/navigation-menu.css?v=1.5'; /* + */
@import 'elements/footer.css?v=2.2';
@import 'elements/legal-page.css?v=1.1'; /* + */
@import 'elements/bottom-navigation.css?v=1.9';


html {
  font-family: 'SF Pro Display', sans-serif;
  line-height: 1;
  font-size: 10px;
  font-weight: 400;
  background: var(--color-background-dark-1);
  color: var(--color-text-light-1);
}

body {
  font-family: 'SF Pro Display', sans-serif;
  line-height: 1;
  font-size: 1.6rem;
  font-weight: 400;
  overflow-x: hidden;
  background: var(--color-background-dark-1);
  color: var(--color-text-light-1);
  padding-bottom: 0;
  display: flex;
  flex-direction: column; /* Вертикальное расположение */
  min-height: 100vh; /* Минимальная высота — весь экран */
  justify-content: space-between;

}

@media (max-width: 375px) {
  html {
    font-size: 8px !important;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  body {
    padding-bottom: 0;
  }
}

a {
  text-decoration: none !important;
}

.min-w-0 {
  min-width: 0;
}

.divider {
  background: var(--color-dark-2);
  height: 1px;
  width: 100%;
  opacity: 0.3;
}

/* Гарантируем, что [hidden] работает даже если CSS переопределяет display */
[hidden] {
  display: none !important;
}

/* Icon displayed at top of full-screen state screens */
.screen-hero-icon {
    display: block;
    width: 6rem;
    height: 6rem;
    margin-inline: auto;
    margin-bottom: var(--padding-middle);
    pointer-events: none;
}

/* =============================================
   .screen-topbar — шапка оверлея/модали (лого + крестик)
   ============================================= */
.screen-topbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    padding-top: calc(env(safe-area-inset-top, 0px) + var(--padding-middle));
    padding-bottom: var(--padding-middle);
    padding-inline: var(--padding-large);
}

.screen-topbar .logo-wrapper {
    flex: 1;
}

.screen-topbar:has(> .container) {
    padding-inline: 0;
}

.screen-topbar-inner {
    width: 100%;
}

.screen-topbar--fade-in {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.overlay--open .screen-topbar--fade-in,
.modal--open .screen-topbar--fade-in {
    opacity: 1;
    pointer-events: auto;
}

/* =============================================
   .stepper — степпер выбора числового значения
   ============================================= */
.stepper--inactive {
    opacity: 0.55;
    pointer-events: none;
}

.stepper {
    /* Высота = .button--primary: padding-middle ×2 + зона контента */
    --stepper-content-height: 2.4rem;
    --stepper-inner-size: calc(var(--padding-middle) + var(--stepper-content-height) + var(--padding-middle));
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    border-radius: var(--border-radius-pill);
    border: 1px solid rgb(255 255 255 / 0.12);
    padding: var(--padding-micro);
    gap: 0;
    background: color-mix(in srgb, var(--color-background-dark-1) 36%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(1.25);
    backdrop-filter: blur(14px) saturate(1.25);
}

.stepper-button {
    flex-shrink: 0;
    width: calc(var(--stepper-inner-size) - 2 * var(--padding-micro));
    height: calc(var(--stepper-inner-size) - 2 * var(--padding-micro));
    border-radius: var(--border-radius-pill);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.15s ease, transform 0.1s ease;
}

.stepper-button:active {
    transform: scale(0.93);
    opacity: 0.75;
}

.stepper-button:focus-visible {
    box-shadow: 0 0 0 2px var(--color-accent-main);
    outline: none;
}

.stepper-button-icon {
    display: block;
    font-size: 2rem;
    line-height: 1;
    font-weight: 300;
    color: var(--color-text-light-1);
    pointer-events: none;
    position: relative;
    z-index: 1;
}

.stepper-display {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding-inline: var(--padding-small);
}

/* =============================================
   .tabs / .tab — горизонтальные вкладки
   ============================================= */
.tabs {
    display: flex;
    flex-direction: row;
    gap: var(--padding-middle);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.tab {
    padding: var(--padding-small) 0;
    color: var(--color-text-dark-2);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.tab--active {
    color: var(--color-text-light-1);
    border-bottom-color: var(--color-accent-main);
}

/* =============================================
   .overlay — полноэкранный оверлей
   Двухступенчатый показ: --visible (display) → --open (opacity)
   ============================================= */
.overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    display: none;
    flex-direction: column;
    overflow-y: auto;
    background: var(--color-background-dark-1);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}
.overlay--visible { display: flex; }
.overlay--open    { opacity: 1; pointer-events: auto; }

.overlay--frosted {
    background: rgb(0 0 0 / 0.72);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    align-items: center;
    justify-content: center;
}