/* Подключение шрифта Helvetica */
@font-face {
    font-family: 'Montserrat';
    src: url('/fonts/Montserrat-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat-Bold';
    src: url('/fonts/Montserrat-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

html { scroll-behavior: smooth; scroll-padding-top: 90px; } /* было calc(70px + 80px) */


/* Сброс отступов у всех элементов */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
}

/* Цвет фона страницы и цвет текста */
body {
    background-color: #000000; /* Цвет фона страницы */
    color: #ffffff; /* Цвет текста по всей странице */
    overflow-x: hidden; /* отключаем горизонтальную прокрутку */
    padding-bottom: 56px;
}

/* Стиль для фиксированной шапки */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #000000; /* Цвет фона шапки */
    padding: 15px 20px 15px 8px;
    display: flex;
    justify-content: space-between;
    align-items: center; /* Выравнивает элементы по вертикали */
    z-index: 1001; /* Убедитесь, что шапка сверху */
    border-bottom: 2px solid #333;
}

/* Стили для логотипа */
.logo {
    height: auto;
    padding: 4px 15px;
}


/* Стили для текста логотипа */
.logo-text {
    color: #cda266;
    font-family: 'Montserrat-Bold', sans-serif;
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    border: 2px solid #cda266;
    border-radius: 8px;
    padding: 8px 15px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); /* добавить эффект текста */
    background-color: rgba(205, 162, 102, 0.1); /* приятный наличие фона */
    transition: all 0.3s ease; /* плавная анимация */
}

/* Эффект при наведении */
.logo-text:hover {
    background-color: rgba(205, 162, 102, 0.2); /* ярче фон при наведении */
    letter-spacing: 3px; /* увеличить расстояние между буквами */
}

/* Установим переменные для использования в нескольких местах */
:root {
    --slider-padding: 20px; /* Отступы карусели */
    --slider-max-width: 1200px; /* Максимальная ширина карусели */
}

/* Бургер-меню */
.burger-menu {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 30px; /* Ширина бургер-меню */
    height: 20px; /* Высота бургер-меню */
    cursor: pointer;
    margin-right: var(--slider-padding); /* Отступ справа от бургер-меню */
    position: relative;
    right:-8px;
}

/* Линии бургер-меню */
.burger-line {
    width: 100%;
    height: 3px;
    background-color: #cda266; /* Цвет линий бургер-меню */
    transition: all 0.3s ease; /* Плавная анимация */
}

.burger-line.active:nth-child(1) {
    transform: rotate(45deg) translate(5px, 6px);
}
.burger-line.active:nth-child(2) {
    opacity: 0;
}
.burger-line.active:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -6px);
}

/* === МОБИЛЬНОЕ МЕНЮ (исправлено для плавной анимации) === */
.mobile-nav{
  position: fixed;
  top: 70px;
  right: 0;
  width: 70%;
  height: calc(100vh - 70px);
  padding: 40px 25px;
  border-left: 2px solid #cda266;
  backdrop-filter: blur(15px);
  z-index: 999;

  /* всегда в DOM, но за экраном */
  transform: translateX(100%);
  opacity: 0;
  pointer-events: none;

  transition: transform 0.3s ease, opacity 0.3s ease;
  background:
        linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),
        url('/media/menuback.jpg') no-repeat center center / cover;
}
.mobile-nav.active {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

/* Сохраняем ваши стили для ссылок */
.mobile-nav ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 25px;
    margin-top: 30px;
}

.mobile-nav a {
    color: #cda266;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    display: block;
    padding: 10px 20px;
    background-color: transparent;
    border: 2px solid #cda266;
    border-radius: 8px;
    text-align: center;
    transition: all 0.3s ease;
    letter-spacing: 4px; /* Игривый эффект межбуквенного интервала */
    text-transform: uppercase;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); /* Элегантная тень текста */
}

.mobile-nav a:hover {
    background-color: rgba(205, 162, 102, 0.2); /* Акцентный фон */
    letter-spacing: 3px; /* Уменьшаем межбуквенный интервал для эффекта */
    transform: translateY(-3px); /* Лёгкий подъем */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* Мягкая тень при наведении */
}

body.menu-open { overflow: hidden; height: 100vh; }
body.menu-open::before {
  content:'';
  position: fixed; inset: 0;
  background: rgba(0,0,0,.7);
  backdrop-filter: blur(8px);
  z-index: 998;
}

/* =========================== */
/*  Секция с логотипом Vinoguard */
/* =========================== */

.VG {
    width: 100%;
    height: 38vh;
    margin-left: 15px;
    margin-top: -70px;
    background-color: #000000;
    overflow: hidden; /* обрезаем все по размеру блока */
    display: flex; /* быстрый центрирование в вертикали и горизонтали */
    justify-content: center;
    align-items: center; /* вертикальное центрирование */
    position: relative; /* для композиции с другим блоком  */
    /* border: 2px solid #cda266; */
}

/* Изображение внутри блока */
.VG img.vg-image {
    position: relative; /* Устанавливаем z-index только для этого изображения */
    z-index: 1; /* Установите z-index для расположения изображения */
}

/* Отмеряем ширину и высоту с правильным свойством object-fit */
.VG img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* убираем растягивание изображения */
}

/* =========================== */
/*        Секция с логотипом    */
/* =========================== */
.logo1 {
    width: 100%;
    height: calc(100vh - 70px); /* Теперь учитывается шапка */
    margin-top: 70px; /* чтобы не перекрывалось шапкой */
    background-color: #000000; /* Цвет фона */
    overflow: hidden; /* обрезаем контент по размеру */
}

/* Изображение внутри блока */
.logo1 img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* корректное позиционирование */
}

/* =========================== */
/*        Секция с логотипом    */
/* =========================== */
.logo2 {
    position: relative;
    width: 100%;
    height: calc(140vh - 5px);
    background-color: #000000; /* Цвет фона */
    overflow: hidden; /* обрезаем контент по размеру */
    display: flex;
    flex-direction: column; /* вертикальное расположение */
    justify-content: flex-start; /* сверху потому что erth не надо */
    align-items: center;
}

/* Изображение внутри блока */
.logo2 img {
    position: absolute;  /* Изображение абсолютно позиционируется внутри .logo2 */
    top: 0;              /* Приложим изображение к верхней границе */
    left: 0;             /* Приложим изображение к левой границе */
    width: 100%;
    height: 100%;
    object-fit: cover;   /* Изображение заполняет весь блок без искажений */
    object-position: left top; /* Сдвигаем изображение в левый верхний угол */
    z-index: 10;         /* Помещаем изображение под контент */
}

/* Контейнер над изображением с зумом */
.logo2 .work-stages-container {
    position: relative; /* Остаётся на своём месте */
    top: 33vh; /* Сдвиг контейнера вниз */
    width: 90%;
    max-width: 800px;
    margin: 0 auto 40px;
    z-index: 20;  /* Делаем его поверх изображения */
    padding: 20px 0;
}

/* ===== Work Stages (План работ) ===== */
.work-stages-container{
  position:relative;
  width:90%;
  max-width:800px;
  margin:0 auto;
  z-index:20;
}
.work-stages-slider{
  background-color:rgba(0,0,0,0.85);
  border:2px solid #cda266;
  border-radius:22px;
  box-shadow:0 10px 30px rgba(0,0,0,0.45);
  backdrop-filter: blur(6px);
  padding:24px 22px;
}
.work-stages-title{
  font-family:'Montserrat-Bold',sans-serif;
  color:#cda266;
  text-align:center;
  text-transform:uppercase;
  letter-spacing:2px;
  font-size:18px;
  line-height:1.6;
  margin:4px 0 14px;
  text-shadow:1px 1px 3px rgba(0,0,0,0.3);
}
.work-stages-list{
  display:flex;
  flex-direction:column;
  gap:18px;
  margin:0;
  padding:0;
  list-style:none;
}
.work-stage{
  display:flex;
  gap:14px;
  padding-bottom:14px;
  border-bottom:1px solid rgba(255,255,255,0.18);
}
.work-stage:last-child{ border-bottom:none; }
.stage-number{
  min-width:28px;
  height:28px;
  border:2px solid #cda266;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#cda266;
  font-family:'Montserrat-Bold',sans-serif;
  font-size:14px;
  line-height:1;
  margin-top:2px;
  box-shadow:0 2px 8px rgba(0,0,0,0.25);
}
.stage-content{ flex:1; }
.stage-content h4{
  color:#cda266;
  font-family:'Montserrat-Bold',sans-serif;
  font-size:16px;
  margin:2px 0 6px;
}
.stage-content p{
  color:#cda266;
  opacity:.9;
  font-size:14px;
  line-height:1.55;
  margin:5px;
}

/* Иконки под карточкой */
.work-stages-actions{
  display:flex;
  justify-content:center;
  gap:26px;
  margin-top:16px;
}
.work-stages-actions .action-btn{
  width:52px; height:52px;
  border-radius:50%;
  border:2px solid #cda266;
  color:#cda266;
  display:flex; align-items:center; justify-content:center;
  transition:transform .25s ease, background-color .25s ease;
}
.work-stages-actions .action-btn:hover{
  transform:translateY(-2px);
  background-color:rgba(205,162,102,.12);
}
.work-stages-actions .action-btn svg{
  width:24px; height:24px; display:block;
}


/* ================================== */
/* Секция Винные комнаты и Винные стены */
/* ================================== */

.logo4 {
    width: 100%;
    height: calc(100vh - 70px); /* полная высота окна браузера */
    background-color: #000000; /* Цвет фона */
    overflow: hidden; /* обрезаем контент по размеру */
}

/* изображение заполнения */
.logo4 img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* корректное позиционирование */
}

main {
    padding: 30px 20px;
    min-height: 100vh;
}

/* Скрываем десктопные элементы */
.desktop-nav,
.desktop-hero {
    display: none;
}

/* Типографика */
h1 {
    font-size: 2rem;
    margin-bottom: 20px;
    font-weight: bold;
}

p {
    font-size: 1rem;
    line-height: 1.5;
}

.intersection-overlay {
  position: relative;
  width: 100vw;
  pointer-events: none;
  z-index: 50;
  margin-top: 0;
  /*scroll-margin-top: 200px;*/
}

.slider-like-overlay {
  position: relative;
  width: calc(100% - 40px);
  max-width: 1200px;
  margin: 0 auto;
  padding: 30px;
  border: 2px solid #cda266;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  background-color: #000;
  pointer-events: auto;
}

@media (max-width: 768px) {
  .slider-like-overlay {
    top: 0;
    height: auto;       /* заменили фиксированную высоту */
    padding: 30px 15px; /* подогнали внутренние отступы */
  }
}

/* Для мобильных */
@media (max-width: 768px) {
    .VG {
        margin-top: -70px;
        height: 42vh;
        padding-bottom: env(safe-area-inset-bottom, 20px);
    }
    .smeta-button-wrapper {
        bottom: 38%;
    }
}



@media (min-width: 768px) {
    .burger-menu {
        margin-right: calc((100vw - 1200px)/2); /* Выравниваем по слайдеру */
    }
}
@media (min-width: calc(var(--slider-max-width) + 2*var(--slider-padding))) {
    .burger-menu {
        margin-right: calc((100vw - var(--slider-max-width))/2);
    }
}
/* Стили для анкеты */
.quiz-form {
  padding: 40px 20px; /* Увеличенный внутренний отступ для формы */
  width: 100%;
  color: #cda266;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 35px;
}
.quiz-form *:not(.iti):not(.iti *) {
  -webkit-appearance: none;
  -moz-appearance: none;
  box-sizing: border-box;
  margin: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
}

.form-group {
  width: 100%;
  max-width: 400px; /* Ограничение ширины для аккуратного вида */
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-family: 'Montserrat-Bold', sans-serif;
  letter-spacing: 1px;
}

.form-group input,
.form-group select {
  /* фон мягко-золотой с прозрачностью */
  background: rgba(205, 162, 102, 0.10) !important;
  border: 1px solid #cda266 !important;
  color: #cda266 !important;
}

.form-group input::placeholder,
.form-group select::placeholder {
  color: rgba(205,162,102,0.75);
}

/* телефонное поле из intl-tel-input в ту же гамму */
.iti input[type="tel"] {
  background: rgba(205, 162, 102, 0.10) !important;
  border: 1px solid #cda266 !important;
  color: #cda266 !important;
}
.iti__country-list { border-color: #cda266; }


.form-title {
  color: #cda266;
  font-family: 'Montserrat-Bold', sans-serif;
  text-align: center;
  font-size: 18px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.gold-button {
  background-color: rgba(205, 162, 102, 0.1);
  color: #cda266;
  font-family: 'Montserrat-Bold', sans-serif;
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  border: 2px solid #cda266;
  border-radius: 8px;
  padding: 12px 25px;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 100%;
  max-width: 400px; /* Соответствие ширине input */
}

.gold-button {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.gold-button:hover {
  background-color: rgba(205, 162, 102, 0.2);
  letter-spacing: 3px;
}

/* Базовые стили кнопки с улучшенной кросс-браузерностью */

/* Обертка для кнопки */
.smeta-button-wrapper {
    position: absolute;
    bottom: 38%;
    right: calc(50% - 100px); /* Центрирование относительно буквы D */
    z-index: 20;
    transform: translateX(50%);
    width: 100%;
    text-align: center;
}

/* Основные стили кнопки */
.smeta-button {
    display: inline-block;
    padding: 12px 30px;
    font-family: 'Montserrat-Bold', sans-serif;
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #cda266;
    text-decoration: none;
    background-color: rgba(205, 162, 102, 0.1);
    border: 2px solid #cda266;
    border-radius: 8px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
    white-space: nowrap;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    animation: pulse 2s infinite;
}

/* Точная настройка положения для мобильных */
@media (max-width: 768px) {
    .smeta-button-wrapper {
        bottom: 33%;
        right: calc(50% - 70px);
    }
    .smeta-button {
        padding: 8px 20px;
        font-size: 12px;
    }
}

/* Анимация пульсации */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* Ховер-эффекты */
.smeta-button:hover {
    background-color: rgba(205, 162, 102, 0.2);
    letter-spacing: 3px;
    transform: scale(1.05);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}


/* Обновленные стили для контейнера этапов */

.work-stages-container {
    padding: 20px 0;
}

.work-stages-slider {
    background-color: rgba(0, 0, 0, 0.85);
    border: 2px solid #cda266;
    border-radius: 8px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
}

.stages-title {
    color: #cda266;
    font-family: 'Montserrat-Bold', sans-serif;
    text-align: center;
    margin-bottom: 30px;
    font-size: 18px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.stage-item {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(205, 162, 102, 0.3);
}

.stage-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

/* Адаптивные стили */
@media (max-width: 768px) {
    .logo2 {
        scroll-margin-top: 80px;
        padding: 80px 0;
    }
    
    .work-stages-slider {
        padding: 20px 15px;
    }
    
    .stage-item {
        margin-bottom: 12px;
        padding-bottom: 12px;
    }
    
    .stages-title {
        margin-bottom: 20px;
        font-size: 16px;
    }
}

/* Стили для слайдера этапов */
.stages-slider {
    width: 100vw;
    height: min(40vh, calc((100vh - 70px) * 0.3));
    margin: 0 auto;
    background-color: #000;
    position: relative;
    z-index: 10;
}

/* Стили для второго слайдера */
.slider-container.stages-slider {
    margin-top: 80px; /* Убираем отступ сверху */
    margin-bottom: 20px; /* Добавляем отступ снизу */
}

.stages-slider .slider {
    border: 2px solid #cda266;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.stages-slider .slide-image {
    object-fit: cover;
}

.stages-content-wrapper {
    position: relative;
    width: 100%;
    margin: 0 auto;
    max-width: 1200px; /* Или ваш максимальный размер */
}
@media (max-width: 768px) {
    .work-stages-container {
        margin: 150px auto 30px; /* Меньший отступ на мобильных */
    }
}
/* Общие стили для кнопок */
/* Для скринридеров */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.social-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
  padding: 15px 0;
}

/* Увеличиваем зону клика и добавляем эффекты */
.social-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  border: 2px solid;
  position: relative;
  cursor: pointer;
  padding: 5px; /* Добавлено */
}

/* Стили для темного фона */
.dark-bg .social-btn {
  background-color: rgba(205, 162, 102, 0.1);
  border-color: #cda266;
}
.dark-bg .social-btn:hover {
  background-color: rgba(205, 162, 102, 0.3);
}

/* Стили для светлого фона */
.light-bg .social-btn {
  background-color: rgba(0, 0, 0, 0.1);
  border-color: #000;
}
.light-bg .social-btn:hover {
  background-color: rgba(0, 0, 0, 0.3);
}

/* Иконки (можно использовать SVG или Font Awesome) */
.social-btn svg {
  width: 24px;
  height: 24px;
  fill: currentColor; /* Изменено с #cda266 на currentColor */
  transition: all 0.3s ease;
}

/* для лучшей видимости */
.dark-bg .social-btn {
  color: #cda266; /* Явно задаем цвет для темного фона */
}

.social-btn:hover {
  color: white; /* Цвет при наведении */
}

.light-bg .social-btn svg {
  fill: #000; /* Черный цвет для светлого фона */
}

/* Подсказки при наведении */
.social-btn::after {
  content: attr(aria-label);
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.7);
  color: white;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 12px;
  opacity: 0;
  transition: opacity 0.3s;
  white-space: nowrap;
}

.social-btn:hover::after {
  opacity: 1;
}
/* Цвета для разных кнопок */
.tg-btn:hover svg { fill: #0088cc; }
.wa-btn:hover svg { fill: #25D366; }
.call-btn:hover svg { fill: #34b7f1; }
/* Стили для intl-tel-input */
.iti {
    width: 100%;
}

.iti__flag-container {
    background: rgba(205, 162, 102, 0.1);
    border: 1px solid #cda266;
    border-radius: 6px 0 0 6px;
}

.iti__selected-flag {
    background: transparent;
    color: #cda266;
}

.iti__country-list {
    background: #000;
    border: 1px solid #cda266;
    color: #fff;
}

.iti__country-list .iti__country {
    color: #fff;
}

.iti__country-list .iti__country:hover {
    background: rgba(205, 162, 102, 0.2);
}

@media (max-width: 768px) {
  .quiz {
    scroll-margin-top: 300px;
    padding-top: 20px;
  }

  .quiz-form {
    padding-bottom: 80px;
  }
}

.quiz {
  scroll-margin-top: 300px;
}

.quiz-form .gold-button {
    border: 2px solid #cda266 !important; /* Принудительно устанавливаем границу */
    background-color: rgba(205, 162, 102, 0.1) !important;
    padding: 12px 25px !important;
    border-radius: 8px !important;
}

.slide {
    opacity: 0;
    transition: opacity 1s ease;
}
.slide.active {
    opacity: 1;
}
.slide.fading {
    opacity: 0;
    transition: opacity 1s ease;
}
.slide-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* ===== Технология хранения ===== */
.storage-tech-section{
  width:100%;
  padding: 60px 20px;
  background:#000;
  border-top:2px solid #333;
}
.storage-tech-section .container{
  max-width:1200px; margin:0 auto;
}
.section-title{
  font-family:'Montserrat-Bold',sans-serif;
  color:#cda266;
  text-align:center;
  text-transform:uppercase;
  letter-spacing:2px;
  font-size:20px;
  margin-bottom:8px;
}
.section-subtitle{
  text-align:center;
  color:#cda266;
  opacity:.9;
  margin-bottom:18px;
  font-size:14px;
}
.controls-row{
  display:flex; flex-wrap:wrap; gap:14px;
  align-items:center; justify-content:center;
  margin-bottom:18px;
}
.controls-row .control{
  color:#cda266;
  font-size:14px;
  display:flex; align-items:center; gap:8px;
}
.methods-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(260px,1fr));
  gap:16px;
}
.method-card{
  border:2px solid #cda266;
  border-radius:16px;
  padding:14px;
  background: rgba(0,0,0,.85);
  backdrop-filter: blur(6px);
  box-shadow:0 10px 24px rgba(0,0,0,.4);
}
.method-card h3{
  color:#cda266; font-family:'Montserrat-Bold',sans-serif;
  font-size:16px; margin-bottom:6px;
}
.method-meta{
  display:flex; gap:10px; flex-wrap:wrap; margin-bottom:8px;
  font-size:12px; color:#cda266; opacity:.95;
}
.badge{
  border:1px solid #cda266; border-radius:999px; padding:3px 8px;
}
.method-card p{ font-size:13px; color:#cda266; opacity:.9; margin-bottom:8px; }
.method-list{ margin:0 0 8px 18px; color:#cda266; font-size:13px; }
.method-list li{ margin:2px 0; }
.meta-line{ font-size:12px; opacity:.95; color:#cda266; }
.calc-emph{ font-family:'Montserrat-Bold',sans-serif; }
.calculator-card{
  margin-top:22px;
  border:2px solid #cda266;
  border-radius:16px; padding:16px;
  background: rgba(0,0,0,.85);
}
.calc-row{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:10px 0; }
.calc-result{ margin-top:8px; color:#cda266; font-size:14px; }
.gold-button{ border:2px solid #cda266; color:#cda266; background:transparent; padding:8px 14px; border-radius:10px; cursor:pointer; }
.gold-button:hover{ background:rgba(205,162,102,.15); }
/* Общий стиль для всех текстовых полей и селектов */
input[type="text"],
input[type="tel"],
input[type="number"],
select {
  background: rgba(205, 162, 102, 0.10);
  border: 1px solid #cda266;
  color: #cda266;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  padding: 12px 10px;
  height: 44px; /* увеличиваем высоту */
  border-radius: 6px;
  box-sizing: border-box;
}

input::placeholder,
select::placeholder {
  color: rgba(205, 162, 102, 0.75);
}
/* === Общий заголовок калькуляторов === */
.calc-title{
  margin: 10px 0 6px;
  text-align: center;
  color: #cda266;
  font-family: 'Montserrat-Bold', sans-serif;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 18px;
}

/* === Калькуляторы: единая сетка и цвета === */
.calculator-card,
.calculator-card * {
  color: #cda266; /* перекрашиваем всё внутри калькуляторов в фирм. цвет */
}

.calculator-card .calc-row{
  display: grid;
  grid-template-columns: 1fr;    /* одна колонка на мобильных */
  gap: 12px;
}

/* На широкой — по две колонки, чтобы поля шли ровно сеткой */
@media (min-width: 540px){
  .calculator-card .calc-row{
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Лейбл над полем, поле занимает всю ширину ячейки сетки */
.calculator-card label{
  display: block;
  font-size: 14px;
  letter-spacing: .5px;
}
.calculator-card input,
.calculator-card select{
  width: 100%;
  display: block;
  margin-top: 6px;
  background: rgba(205, 162, 102, 0.10);
  border: 1px solid #cda266;
  color: #cda266;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  padding: 12px 10px;
  height: 44px;
  border-radius: 10px;
  box-sizing: border-box;
}
.calculator-card input::placeholder,
.calculator-card select::placeholder{
  color: rgba(205,162,102,0.75);
}

/* Кнопка — на всю ширину грид-строки */
.calculator-card .gold-button{
  grid-column: 1 / -1;
}

/* Для первого калькулятора, где 3 поля + кнопка, сетка сама разложит ровно */