/**
 * Euroblock Calculator Styles
 * Version: 3.0.4
 * Исправления: модальное окно — убран display:none (теперь только visibility/opacity), добавлены transition,
 * убран backdrop-filter для совместимости, улучшена анимация, исправлены конфликты с глобальным классом hidden,
 * улучшена адаптивность и доступность (min-height для кнопок).
 */

/* === Контейнер калькулятора === */
.euroblock-calc {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    max-width: 500px;
    margin: 0 auto;
    color: #fff;
    background: #1a1a1a;
    padding: 25px;
    border-radius: 8px;
    box-sizing: border-box;
}
.euroblock-calc h3 { margin: 0 0 20px; color: #c69d4d; text-align: center; }

/* === Форма расчета === */
.euroblock-calc label { display: block; margin-bottom: 15px; font-size: 14px; color: #ddd; }
.euroblock-calc input[type="number"],
.euroblock-calc select {
    width: 100%; padding: 10px 12px; margin-top: 5px; background: #2a2a2a;
    border: 1px solid #444; border-radius: 4px; color: #fff; font-size: 15px; box-sizing: border-box;
}
.euroblock-calc input:focus, .euroblock-calc select:focus { outline: none; border-color: #c69d4d; }

/* === ДЕСКТОПНАЯ СЕТКА (≥768px) === */
@media (min-width: 768px) {
    .wall-dimensions-row,
    .modifiers-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 15px;
        margin-bottom: 15px;
    }
    .wall-dimensions-row label,
    .modifiers-row label {
        margin-bottom: 0 !important;
        display: flex;
        flex-direction: column;
    }
    .euroblock-modal-content { padding: 20px !important; }
}

/* === Радио-кнопки (тип стены) === */
.radio-group { display: flex; gap: 20px; margin: 15px 0; padding: 10px; background: #252525; border-radius: 4px; }
.radio-group label { display: flex; align-items: center; gap: 6px; margin: 0; cursor: pointer; font-size: 14px; }
.radio-group input[type="radio"] { width: auto; margin: 0; cursor: pointer; }
.hidden { display: none !important; }

/* === Кнопка расчета === */
.calc-btn {
    width: 100%; padding: 14px; margin-top: 10px; background: #c69d4d; color: #fff;
    border: none; border-radius: 4px; font-size: 16px; font-weight: 600; cursor: pointer; transition: background 0.2s;
    min-height: 48px; /* улучшение доступности на мобильных */
}
.calc-btn:hover { background: #b08a3d; }
.calc-btn:disabled { background: #555; cursor: not-allowed; }

/* === Блок результатов === */
.result { margin-top: 25px; padding: 15px; background: #252525; border-radius: 4px; border-left: 3px solid #c69d4d; }
.result h4 { margin: 0 0 10px; color: #c69d4d; }
.result p { margin: 5px 0; font-size: 15px; }

/* === Форма заявки === */
.orderFormContainer { margin-top: 30px; padding-top: 20px; border-top: 1px solid #444; animation: fadeIn 0.4s ease-out; }
.orderFormContainer h4 { margin: 0 0 10px; color: #fff; }
.input-field {
    width: 100%; padding: 12px; margin-bottom: 15px; background: #2a2a2a;
    border: 1px solid #444; border-radius: 4px; color: #fff; font-size: 15px; box-sizing: border-box;
}
.input-field:focus { outline: none; border-color: #c69d4d; }
.privacy-check { margin: 15px 0; font-size: 12px; color: #aaa; display: flex; align-items: flex-start; gap: 8px; }
.privacy-check input { width: auto; margin: 3px 0 0; cursor: pointer; }
.privacy-check a { color: #c69d4d; text-decoration: none; }
.privacy-check a:hover { text-decoration: underline; }
.submit-order-btn {
    width: 100%; padding: 14px; background: #25D366; color: #fff;
    border: none; border-radius: 4px; font-size: 16px; font-weight: 600; cursor: pointer; transition: background 0.2s;
    min-height: 48px;
}
.submit-order-btn:hover { background: #1EAE54; }
.submit-order-btn:disabled { background: #555; cursor: not-allowed; }
.orderStatus { margin-top: 15px; text-align: center; font-weight: 500; }
.status-success { color: #4caf50; }
.status-error { color: #f44336; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* === МОДАЛЬНОЕ ОКНО (исправлено: убран display:none, добавлены transition) === */
.euroblock-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 999999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px !important;
    box-sizing: border-box !important;
    transition: visibility 0.2s, opacity 0.2s !important;
    /* display не управляет видимостью — используется visibility/opacity */
}
.euroblock-modal.hidden {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
.euroblock-modal:not(.hidden) {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}
.euroblock-modal-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0,0,0,0.75) !important;
    /* backdrop-filter убран для совместимости и производительности */
}
.euroblock-modal-content {
    position: relative !important;
    z-index: 1000000 !important;
    background: #1a1a1a !important;
    padding: 25px !important;
    border-radius: 10px !important;
    max-width: 520px !important;
    width: 100% !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    border: 1px solid #444 !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.8) !important;
}
.euroblock-modal-close {
    position: absolute !important;
    top: 12px !important;
    right: 18px !important;
    background: none !important;
    border: none !important;
    color: #fff !important;
    font-size: 32px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    padding: 0 !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    transition: background 0.2s, color 0.2s !important;
}
.euroblock-modal-close:hover {
    background: rgba(255,255,255,0.1) !important;
    color: #c69d4d !important;
}

.euroblock-modal-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 28px;
    background: #c69d4d;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    min-height: 48px;
}
.euroblock-modal-trigger:hover {
    background: #b08a3d;
    transform: translateY(-1px);
}
.euroblock-modal-trigger:active {
    transform: translateY(0);
}
.hp-field {
    position: absolute !important;
    left: -9999px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* === Адаптив === */
@media (max-height: 700px) {
    .euroblock-modal-content { max-height: 85vh !important; padding: 20px !important; }
}
@media (max-height: 500px) {
    .euroblock-modal-content { max-height: 95vh !important; padding: 15px !important; }
}
@media (max-width: 480px) {
    .euroblock-calc, .euroblock-modal-content { padding: 20px 18px !important; }
    .radio-group { flex-direction: column !important; gap: 10px !important; }
    .euroblock-modal-content { max-width: 95% !important; }
}
@media (min-width: 481px) and (max-width: 768px) {
    .euroblock-modal-content { max-width: 450px !important; }
}

/* === Валидация (красная рамка для ошибок) === */
.euroblock-calc input:invalid {
    border-color: #f44336;
}
.euroblock-calc .error-border {
    border-color: #f44336 !important;
}