body {
  margin: 0;
  font-family: 'Josefin Sans', sans-serif;
  letter-spacing: 0.1rem;
}

.bottom-bar {
position: fixed;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 75vw; /* Динамическая ширина - 75% от viewport */
min-width: 500px; /* Минимальная ширина для предотвращения слишком узкого бара */
max-width: 1200px; /* Максимальная ширина для больших экранов */
height: calc(75vw * 0.05); /* Высота = 4% от ширины бара */
min-height: 30px; /* Минимальная высота */
max-height: 90px; /* Максимальная высота */
background: #f6f3e8;
display: flex;
justify-content: flex-end;
box-shadow: 0 -2px 5px rgba(15, 51, 43, 0.3);
border-radius: 20px 20px 0 0;
overflow: hidden;
z-index: 10;
padding-bottom: env(safe-area-inset-bottom);
opacity: 0.8;
z-index: 1001;
}

.control {
  display: flex;
  justify-content: center;
  align-items: center;
  border-left: 1px solid #dcdcdc;
  font-weight: bold;
  font-size: clamp(08px, 1.2vw, 18px); /* Адаптивный размер шрифта */
  font-weight: 500;
  box-sizing: border-box;
  z-index: 2;
  padding: 0 clamp(8px, 1vw, 16px); /* Адаптивные отступы */
}

/* Фиксированные ширины для каждого контрола - все равные */
.control:nth-child(1) { /* Stamp */
  flex: 0 0 25%;
  min-width: 120px;
}

.control:nth-child(2) { /* Address */
  flex: 0 0 25%;
  min-width: 120px;
}

.control:nth-child(3) { /* Toggle */
  flex: 0 0 25%;
  min-width: 130px;
}

.control:nth-child(4) { /* Order */
  flex: 0 0 25%;
  min-width: 150px;
  padding: 0; /* Убираем padding для кнопки Order */
}

.control:not(:first-child) {
box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.3);
}

.control:first-child {
  border-left: none;
}

.control:has(.custom-toggle) {
  background: #f6f3e8;
  z-index: 2;
}

#addressBtn.active {
background-color: #ffffff !important;
color: rgb(0, 0, 0) !important;
font-weight: 800 !important; /* Делаем шрифт чуть потяжелее */
}

#stampBtn.active {
background-color: #ffffff !important; /* Белый фон для активной кнопки */
color: rgb(0, 0, 0) !important;
font-weight: 800 !important; /* Делаем шрифт чуть потяжелее */
}

/* Hover стили для активных кнопок - ближе к белому */
#addressBtn.active:hover {
background-color: #f8f8f8; /* Очень светло-серый при hover */
color: rgb(0, 0, 0);
}

#stampBtn.active:hover {
background-color: #f8f8f8; /* Очень светло-серый при hover */
color: rgb(0, 0, 0);
}

/* Когда STAMP активен, все остальные элементы становятся полупрозрачными и неактивными */
body:has(#stampBtn.active) .control:not(#stampBtn) {
  opacity: 0.4 !important;
  pointer-events: none;
}

/* Когда ADDRESS активен, все остальные элементы становятся полупрозрачными и неактивными */
body:has(#addressBtn.active) .control:not(#addressBtn) {
  opacity: 0.4 !important;
  pointer-events: none;
}

/* Когда ADDRESS активен, добавляем класс для затемнения других кнопок */
.bottom-bar.address-active .control:not(#addressBtn) {
  opacity: 0.4 !important;
  pointer-events: none;
}



/* Hover эффект для кнопки STAMP при наведении на марку */
#stampBtn.hover {
  background-color: #000000 !important;
  color: #ffffff !important;
}

/* Активная кнопка ADDRESS остается полностью непрозрачной с белым фоном */
#addressBtn.active {
  opacity: 1 !important;
  background-color: #ffffff !important;
  color: rgb(0, 0, 0) !important;
}

.order-btn-wrapper {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}

.order-btn {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
transition: transform 0.4s ease;
display: flex;
justify-content: center;
align-items: center;
white-space: nowrap; /* Запрещаем перенос для всей кнопки */
overflow: hidden; /* Скрываем выходящий за границы текст */
}

/* Начальные позиции */
.order-btn.paper {
transform: translateY(0%);
z-index: 1;
}
.order-btn.metal {
transform: translateY(-100%);
z-index: 1;
}

/* Состояние, когда металл активен */
.wrapper-metal .order-btn.paper {
transform: translateY(100%);
}
.wrapper-metal .order-btn.metal {
transform: translateY(0%);
}

/* Состояние, когда бумага активна */
.wrapper-paper .order-btn.paper {
transform: translateY(0%);
}
.wrapper-paper .order-btn.metal {
transform: translateY(-100%);
}

.order-btn.paper {
background: #c6ac73;
color: white;
}

.order-btn.metal {
background: #5b5b5b;
color: white;
}

.order-btn.paper:hover {
background: #ac8807
}

.order-btn.metal:hover {
  background: #423f32
}

.control:hover {
background: #ffffff;
}

.order-btn .price {
font-weight: 300;
font-size: clamp(12px, 1.2vw, 18px); /* Адаптивный размер шрифта */
  color: rgba(255, 255, 255, 0.85); /* Чуть приглушено */
white-space: nowrap; /* Запрещаем перенос строк */
  margin-left: 0.35em; /* визуальный один пробел между "Order" и ценой в flex-контейнере */
}

.order-btn .plane-icon {
width: clamp(24px, 2.5vw, 36px); /* Адаптивный размер иконки */
height: auto;
margin-left: clamp(6px, 0.8vw, 12px); /* Адаптивный отступ */
filter: brightness(0) invert(1);
  opacity: 0.45; /* приглушено в 2 раза */
transform: translateY(1px);
}

/* === Custom toggle === */
.custom-toggle {
display: flex;
align-items: center;
gap: 0.6em; /* Пропорциональный gap относительно размера шрифта */
padding: 0.8em 1em; /* Пропорциональные отступы */
cursor: pointer;
-webkit-tap-highlight-color: transparent;
font-size: calc(0.8vw + 0.8vh); /* Пропорциональный размер базируется на обеих осях */
}

.custom-toggle:focus {
outline: none;
}

.custom-toggle .label {
font-size: 1em; /* Относительный размер от родителя */
font-weight: 100;
white-space: nowrap;
}

.switch {
width: 3em; /* Пропорциональная ширина */
height: 1.6em; /* Пропорциональная высота */
background-color: #e5ecde;
border: 1px solid black;
border-radius: 100px;
position: relative;
cursor: pointer;
box-sizing: border-box;
display: flex;
align-items: center;
transition: background-color 0.3s ease;
}

.switch .slider {
width: 1.2em; /* Пропорциональный размер */
height: 1.2em;
background-color: black;
border-radius: 50%;
position: absolute;
left: 0.2em;
top: 50%;
transform: translateY(-50%);
transition: left 0.3s ease;
}

.switch.active .slider {
left: calc(100% - 1.4em); /* Пропорциональная позиция */
}

.control {
border-left: 1px solid rgba(0,0,0,.1);
}

.control:first-child { 
border-left: 0; 
}

/* Убираем safe-area padding в landscape mode на мобильных */
@media (max-width: 1024px) and (orientation: landscape) {
  .bottom-bar {
    padding-bottom: 0 !important;
    bottom: 0 !important;
  }
}