/* Страница «Задать мне вопрос» (mailme.php). Общие стили шапки и меню — в blean.css */

.ask-page {
    min-height: 100vh;
    padding-bottom: 80px;
    background:
        url(../img/hero-ask.svg) no-repeat center bottom / max(1920px, 100%) auto,
        radial-gradient(ellipse at 75% 80%, #3B3530 0%, #2D2A27 50%, #242220 100%) #2d2b29;
}

.ask {max-width: 560px;margin-left: 100px;padding: 20px 0 40px;color: #fff;}
.ask__title {color: #fff;font-size: 32px;font-weight: bold;letter-spacing: 0.32px;line-height: 50px;}
.ask__desc {color: #E8E1D6;font-size: 18px;letter-spacing: 0.18px;line-height: 28px;margin: 12px 0 36px;}

.ask-label {display: block;color: #BFAE85;font-size: 14px;letter-spacing: 0.14px;line-height: 20px;margin-bottom: 8px;}
.ask-field {
    display: block;
    width: 100%;
    margin-bottom: 24px;
    padding: 12px 14px;
    color: #fff;
    font-family: 'PT Sans', sans-serif;
    font-size: 16px;
    line-height: 24px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 4px;
    transition: border-color .2s, background .2s;
}
.ask-field::placeholder {color: #8F867B;}
.ask-field:focus {border-color: #E9C46A;background: rgba(255, 255, 255, 0.08);}
.ask-field.is-invalid {border-color: #FA6A6A;}
.ask-field_area {min-height: 170px;resize: vertical;}

.ask-submit {
    height: 44px;
    padding: 0 30px;
    color: #2d2b29;
    font-family: 'PT Sans', sans-serif;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 0.16px;
    background: #E9C46A;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    transition: background .2s, color .2s;
}
.ask-submit:hover {background: #F5D98E;}
.ask-submit:focus-visible {outline: 2px solid #F5D98E;outline-offset: 3px;}
.ask-submit:disabled {background: rgba(233, 196, 106, 0.22);color: rgba(255, 255, 255, 0.45);cursor: not-allowed;}

/* Ссылка «На главную» на месте «Задать мне вопрос» */
.ask-page .mail-question-wrp:hover {color: #E9C46A;}

/* На узких экранах — спокойный фон без вопросительного знака */
@media (max-width: 1240px) {
    .ask-page {
        padding-bottom: 50px;
        background: #2d2b29 url(../img/hero-narrow.svg) center / cover;
    }
}
@media (max-width: 840px) {
    .ask {margin-left: 55px;}
}
@media (max-width: 560px) {
    .ask-top {padding-top: 10px;}
    .ask {margin-left: 0;max-width: 100%;padding-top: 40px;}
    .ask__title {font-size: 26px;line-height: 1.3;}
    .ask__desc {font-size: 16px;line-height: 1.5;margin-bottom: 28px;}
    .ask-submit {width: 100%;}
}