/* Основные стили и кастомизация Tailwind */
html {
    scroll-behavior: smooth; /* Плавная прокрутка для всей страницы */
}
body {
    font-family: 'Inter', sans-serif;
}

/* Стили для "бенто-боксов" */
.bento-box {
    border-radius: 1.5rem; /* Более скругленные углы */
    padding: 2rem;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.05);
}

.bento-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

/* Анимация появления при скролле */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Стили для контейнера карты */
#map-container {
    width: 100%;
    height: 100%;
    min-height: 450px;
    border-radius: 1rem;
    overflow: hidden;
    border-width: 1px;
    border-style: solid;
}

/* Стили для FAQ аккордеона */
details > summary {
    list-style: none;
}
details > summary::-webkit-details-marker {
    display: none;
}
details[open] summary .arrow-down {
    transform: rotate(180deg);
}

/* Стили для модального окна */
.modal-overlay {
    transition: opacity 0.3s ease;
}
.modal-content {
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Стили для ползунков калькулятора */
input[type=range] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    border-radius: 5px;
    outline: none;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    cursor: pointer;
    border-radius: 50%;
}

input[type=range]::-moz-range-thumb {
    width: 24px;
    height: 24px;
    cursor: pointer;
    border-radius: 50%;
}

/* Стили для валидации форм */
.input-error {
    border-color: #ef4444 !important; /* red-500 */
}