@custom-variant dark (&:is(.dark *));


* {
    margin: 0;
    padding: 0;
}

/* Предотвращение белой вспышки при загрузке в dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
  }

  html:not(.light) {
    background-color: #0a0a0a;
    color: #fafafa;
  }
}

/* Базовые стили для html до загрузки темы */
html {
  /* Используем CSS переменные для плавного перехода */
  background-color: var(--background);
  color: var(--foreground);
  /* Отключаем transitions при первой загрузке */
  transition: none !important;
}

/* Включаем transitions только после загрузки */
html.theme-loaded,
html.theme-loaded * {
  transition-property: background-color, border-color, color, fill, stroke;
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
  --color-sidebar-ring: var(--sidebar-ring);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar: var(--sidebar);
  --color-chart-5: var(--chart-5);
  --color-chart-4: var(--chart-4);
  --color-chart-3: var(--chart-3);
  --color-chart-2: var(--chart-2);
  --color-chart-1: var(--chart-1);
  --color-ring: var(--ring);
  --color-input: var(--input);
  --color-border: var(--border);
  --color-destructive: var(--destructive);
  --color-accent-foreground: var(--accent-foreground);
  --color-accent: var(--accent);
  --color-muted-foreground: var(--muted-foreground);
  --color-muted: var(--muted);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-secondary: var(--secondary);
  --color-primary-foreground: var(--primary-foreground);
  --color-primary: var(--primary);
  --color-popover-foreground: var(--popover-foreground);
  --color-popover: var(--popover);
  --color-card-foreground: var(--card-foreground);
  --color-card: var(--card);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
}

:root{
  --font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
}
html, body{ font-family: var(--font-sans); }


:root {
  --radius: 0.25rem;
  --background: #ffffff;
  --foreground: #0a0a0a;
  --card: #ffffff;
  --card-foreground: #0a0a0a;
  --popover: #ffffff;
  --popover-foreground: #0a0a0a;
  --primary: #0a0a0a;
  --primary-foreground: #ffffff;
  --secondary: #fafafa;
  --secondary-foreground: #0a0a0a;
  --muted: #f5f5f5;
  --muted-foreground: #737373;
  --accent: #2563eb;
  --accent-foreground: #ffffff;
  --destructive: #dc2626;
  --border: #e5e5e5;
  --input: #e5e5e5;
  --ring: #2563eb;
  --chart-1: #2563eb;
  --chart-2: #16a34a;
  --chart-3: #0a0a0a;
  --chart-4: #737373;
  --chart-5: #a3a3a3;
  --sidebar: #fafafa;
  --sidebar-foreground: #0a0a0a;
  --sidebar-primary: #0a0a0a;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #f5f5f5;
  --sidebar-accent-foreground: #0a0a0a;
  --sidebar-border: #e5e5e5;
  --sidebar-ring: #2563eb;
}

.dark {
  --background: #0a0a0a;
  --foreground: #fafafa;
  --card: #141414;
  --card-foreground: #fafafa;
  --popover: #141414;
  --popover-foreground: #fafafa;
  --primary: #fafafa;
  --primary-foreground: #0a0a0a;
  --secondary: #1f1f1f;
  --secondary-foreground: #fafafa;
  --muted: #262626;
  --muted-foreground: #a3a3a3;
  --accent: #3b82f6;
  --accent-foreground: #ffffff;
  --destructive: #ef4444;
  --border: #262626;
  --input: #262626;
  --ring: #3b82f6;
  --chart-1: #3b82f6;
  --chart-2: #22c55e;
  --chart-3: #fafafa;
  --chart-4: #a3a3a3;
  --chart-5: #525252;
  --sidebar: #0a0a0a;
  --sidebar-foreground: #fafafa;
  --sidebar-primary: #fafafa;
  --sidebar-primary-foreground: #0a0a0a;
  --sidebar-accent: #1f1f1f;
  --sidebar-accent-foreground: #fafafa;
  --sidebar-border: #262626;
  --sidebar-ring: #3b82f6;
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  
  /* КРИТИЧНО: Установка фона для body */
  body {
    @apply bg-background text-foreground;
    /* Дублируем для надежности */
    background-color: var(--background);
    color: var(--foreground);
  }
}

@layer utilities {
  /* Скрытие скроллбара */
  .scrollbar-hide {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }
  
  .scrollbar-hide::-webkit-scrollbar {
    display: none;  /* Chrome, Safari and Opera */
  }
  
  /* Snap scrolling для галереи */
  .snap-x {
    scroll-snap-type: x mandatory;
  }
  
  .snap-center {
    scroll-snap-align: center;
  }
  
  .snap-mandatory {
    scroll-snap-stop: always;
  }
  
  .scroll-smooth {
    scroll-behavior: smooth;
  }
}

.gallery-block {
  overflow-y: hidden;
}

        /* РЕШЕНИЕ 2: Более специфичная стилизация для react-phone-number-input */
        .PhoneInput {
            --PhoneInput-color--focus: var(--foreground);
            --PhoneInputCountryFlag-borderColor: var(--border);
            --PhoneInputCountrySelectArrow-color: var(--foreground);
            --PhoneInputCountrySelectArrow-opacity: 0.8;
        }

        .PhoneInputCountrySelect {
            background: var(--background) !important;
            color: var(--foreground) !important;
            border-color: var(--border) !important;
        }

        .PhoneInputCountrySelect:focus {
            outline-color: var(--ring) !important;
        }

        /* Для темной темы - более сильные селекторы */
        .dark .PhoneInputCountrySelect,
        html.dark .PhoneInputCountrySelect {
            background-color: var(--background) !important;
            color: var(--foreground) !important;
            border-color: var(--border) !important;
        }

        .dark .PhoneInputCountrySelect option,
        html.dark .PhoneInputCountrySelect option {
            background-color: var(--background) !important;
            color: var(--foreground) !important;
        }

        .dark .PhoneInputCountrySelect option:hover,
        html.dark .PhoneInputCountrySelect option:hover {
            background-color: var(--muted) !important;
            color: var(--foreground) !important;
        }

.pb-dd {
  padding-bottom: 24px;
}

/* ===== Base Footer (idx__) ===== */
.idx__footer{
  position: relative;  /* важно: чтобы z-index работал */
  z-index: 2;          /* важно: поверх aab__spots */
  margin-top: 22px;
  padding: 14px 18px 22px;
  color: var(--foreground);
}

.idx__footerInner{
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;

  border-top: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
  padding-top: 14px;
}

.idx__footLeft{
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 200px;
}

.idx__footBrand{
  font-weight: 850;
  font-size: 12.5px;
  letter-spacing: -0.01em;
  color: var(--foreground);
}

.idx__footSub{
  font-size: 12px;
  opacity: 0.72;
  color: var(--foreground);
}

.idx__footRight{
  display: inline-flex;
  gap: 10px;
  align-items: center;
}

.idx__footLink{
  color: var(--foreground);
  text-decoration: none;
  font-size: 12.5px;
  opacity: 0.78;

  padding: 6px 8px;
  border-radius: 10px;
  border: 1px solid transparent;
}

.idx__footLink:hover{
  opacity: 1;
  background: color-mix(in srgb, var(--foreground) 6%, transparent);
  border-color: color-mix(in srgb, var(--foreground) 10%, transparent);
}

@media (max-width: 620px){
  .idx__footerInner{
    justify-content: flex-start;
  }
}


/* ===== Logo ===== */
.idx__logo{
  width: 32px;
  height: 32px;
  object-fit: contain;
  display: block;
  border-radius: 8px; /* если хочешь мягкие углы */
}

/* выравнивание бренда */
.idx__brand{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}

/* если PNG светлый — чуть подчёркнуть на тёмном фоне */
html.dark .idx__logo{
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
}


.idx__brand{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}

.idx__brandMark{
  width: 32px;
  height: 32px;
  border-radius: 12px;
  display: grid;
  place-items: center;

  background: color-mix(in srgb, var(--foreground) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent);
  font-weight: 900;
}

.idx__brandText{
  font-weight: 900;
  letter-spacing: -0.02em;
}

.idx__brandSub{
  opacity: 0.7;
  font-size: 13px;
}