/**
 * Euroblock Calculator Styles
 * Version: 4.0.0
 * Исправления: модальное окно — убран 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;
}

/* === CTA: звонок / копирование / PDF === */
.ebc-call-block {
    margin: 18px 0;
    padding: 14px;
    background: #252525;
    border-radius: 6px;
    border-left: 3px solid #c69d4d;
    text-align: center;
}
.ebc-call-block.ebc-closed { border-left-color: #666; }

.ebc-status { margin: 0 0 10px; font-size: 14px; font-weight: 600; }
.ebc-status-open   { color: #4caf50; }
.ebc-status-closed { color: #ffb74d; }

.ebc-call-btn {
    display: inline-block;
    padding: 14px 24px;
    background: #25D366;
    color: #fff !important;
    text-decoration: none !important;
    border-radius: 6px;
    font-size: 17px;
    font-weight: 700;
    transition: background 0.2s;
    min-height: 48px;
    line-height: 1.2;
}
.ebc-call-btn:hover { background: #1EAE54; color: #fff !important; }

.ebc-call-hint,
.ebc-closed-text {
    margin: 10px 0 0;
    font-size: 13px;
    color: #bbb;
    line-height: 1.5;
}

.ebc-muted { color: #999; font-size: 13px; }
.ebc-disclaimer {
    margin-top: 12px;
    font-size: 12px;
    color: #888;
    font-style: italic;
}

.ebc-actions {
    display: flex;
    gap: 10px;
    margin-top: 14px;
    flex-wrap: wrap;
}
.ebc-copy-btn,
.ebc-print-btn {
    flex: 1 1 140px;
    padding: 11px 14px;
    background: #2a2a2a;
    color: #fff;
    border: 1px solid #444;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    min-height: 44px;
}
.ebc-copy-btn:hover,
.ebc-print-btn:hover {
    background: #333;
    border-color: #c69d4d;
}
.ebc-closed-text {
    white-space: normal;
}
.ebc-closed-text strong {
    white-space: nowrap;
    display: inline-block;
}
/* === Печать / PDF === */
@media print {
    body.ebc-printing * { visibility: hidden !important; }
    body.ebc-printing .result,
    body.ebc-printing .result * { visibility: visible !important; }
    body.ebc-printing .result {
        position: absolute !important;
        left: 0; top: 0; width: 100%;
        background: #fff !important;
        color: #000 !important;
        padding: 20px !important;
        box-shadow: none !important;
        border: none !important;
    }
    body.ebc-printing .result h4 { color: #000 !important; }
    body.ebc-printing .result strong { color: #000 !important; }
    body.ebc-printing .ebc-actions { display: none !important; }
    body.ebc-printing .ebc-call-block {
        background: #f5f5f5 !important;
        color: #000 !important;
        border-left-color: #c69d4d !important;
    }
    body.ebc-printing .ebc-call-block * { color: #000 !important; }
}