/**
 * Адаптивные стили для интерактивных карт
 * 
 * Этот файл содержит media queries для адаптации интерактивных карт
 * под различные размеры экранов.
 */

/* Координаты интерактивных зон здесь не переопределяются:
   мобильные классы зон в interactive-maps.css заданы в процентах
   и масштабируются вместе со схемой на любой ширине экрана. */

/* ============================================
   СМАРТФОНЫ (max-width: 768px)
   ============================================ */

@media (max-width: 768px) {
    /* Модальное окно с информацией о номере */
    .room-info-content {
        width: 95%;
        max-height: 90vh;
    }
    
    .room-info-body {
        padding: 20px;
    }
    
    .room-info-title {
        font-size: 24px;
    }
    
    /* Кнопки действий становятся вертикальными */
    .room-info-actions {
        flex-direction: column;
    }
    
    .room-info-btn {
        width: 100%;
    }
    
    /* Кнопки переключения этажей */
    .floor-buttons {
        gap: 10px;
    }
    
    .floor-button {
        padding: 10px 20px;
        font-size: 14px;
    }
    
    /* Модальное окно с планом */
    .plan-modal-content {
        margin: 10% auto;
        padding: 15px;
        width: 95%;
    }
}

/* ============================================
   МАЛЕНЬКИЕ СМАРТФОНЫ (max-width: 480px)
   ============================================ */

@media (max-width: 480px) {
    /* Кнопки переключения этажей */
    .floor-button {
        padding: 8px 16px;
        font-size: 13px;
    }
    
    .floor-buttons {
        gap: 8px;
    }
    
    /* Размер цены в модальном окне */
    .room-info-price {
        font-size: 28px;
    }
    
    /* Уменьшенное изображение номера */
    .room-info-image {
        height: 200px;
    }
}