﻿/* Ряд промо-баннеров над карточками продуктов. Раньше лежал в .row-wrapper
   рядом с пустым (на десктопе) блоком мобильной формы, из-за чего прижимался
   к правому краю и не совпадал по левой границе с карточками. */
.promo-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 30px;
    /* Плашки фиксированной ширины (330px) занимают лишь часть ряда, а он тянется
       на всю ширину контейнера (1341px) — без этого они прижимались к левому краю
       и оставляли пустоту справа. */
    justify-content: center;
}

.promo-border {
    min-height: 60px;
    padding: 5px;
    display: flex;
    align-items: center;
    width: 330px;
    max-width: 100%;
    cursor: pointer;
}

    .promo-border label {
        display: block;
    }

    .promo-border {
        border-radius: 12px;
        transition: background-color 0.25s;
    }

        .promo-border:hover {
            background-color: rgba(14, 140, 26, 0.07);
        }
.content2 {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
    margin-right: auto;
    margin-bottom: 80px;
    margin-left: auto;
}
.product-form {
    display: flex;
    justify-content: center;
    position: relative;
    background: #FFFFFF;
    box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.05), 0px 5px 25px rgba(0, 0, 0, 0.07);
    border-radius: 15px;
    flex-direction: column;
    /*padding-left: 2%;
    padding-right: 2%;*/
}
.product-image {
    width: 200px;
    height: 190px;
    /* бокс фиксирован, а исходники разной высоты (193/192/183) — без contain
       иллюстрации растягивало по вертикали */
    object-fit: contain;
    margin-left: auto;
    margin-top: 40px;
    margin-right: auto;
    margin-bottom: 30px;
}
.greeting-label {
    font-family: 'Inter Tight';
    font-style: normal;
    font-weight: 300;
    font-size: 24px;
    line-height: 30px;
    /* identical to box height, or 125% */
    margin-bottom:7px;
    margin-left:20px;

    color: rgba(68, 68, 68, 0.5);
}
.choose-label {
    font-family: "Inter Tight";
    font-style: normal;
    font-weight: 600;
    font-size: 15px;
    line-height: 20px;
    margin-bottom: 25px;
    color: rgb(34, 34, 34);
}

.font-1 {
    font-family: 'Inter Tight';
    font-style: normal;
    font-weight: 600;
    font-size: 22px;
    line-height: 30px;
    /* identical to box height, or 136% */


    color: #222222;
}

.font-2 {
    font-family: 'Inter Tight';
    font-style: normal;
    font-weight: 500;
    font-size: 15px;
    line-height: 20px;
    /* identical to box height, or 133% */


    /* было #999999 — контраст 2.84 на белом, ниже WCAG AA (нужно 4.5) */
    color: #6f6f6f;
}
.font-3 {
    font-family: 'Inter Tight';
    font-style: normal;
    font-weight: 500;
    font-size: 13px;
    line-height: 16px;
    /* identical to box height, or 123% */
    margin-top:3%;
    /* было rgba(153,153,153,.5) — по факту #cccccc, контраст 1.6 на белом */
    color: #6f6f6f;
}
.font-4 {
    vertical-align:top;
    font-family: 'Inter Tight';
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 20px;
    /* identical to box height, or 133% */
    margin-left:3px;
    letter-spacing: 0.02em;
    color: #333333;
}
.font-5 {
    font-family: 'Inter Tight';
    font-style: normal;
    font-weight: 500;
    font-size: 13px;
    line-height: 30px;
    /* or 231% */

    letter-spacing: 0.02em;
    color: #444444;
}
/* Карточка продукта. Раньше была position:absolute с фиксированными 420x555 —
   контент не мог растянуть .hovers и вылезал за пределы белого блока.
   Теперь это флекс-элемент .hovers, растягивающийся по содержимому. */
.front-page {
    display: flex;
    justify-content: start;
    position: relative;
    flex: 1 1 auto;
    backface-visibility: hidden;
    background: #FFFFFF;
    box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.05), 0px 5px 25px rgba(0, 0, 0, 0.07);
    border-radius: 15px;
    flex-direction: column;
    padding-left: 4%;
    padding-right: 2%;
    transform: perspective(600px) rotateY(0deg);
    transition: transform .4s linear;
}

.hovers {
    display: flex;
    position: relative;
    cursor: pointer;
}


/* Прижата к низу карточки потоком (margin-top:auto), а не absolute —
   длинный текст «Ставок» больше не наезжает на кнопку. */
/* #0E8C1A под белым текстом даёт 4.39 — ниже WCAG AA (4.5). Затемнено до 5.30. */
.create-request-button {
    margin-top: auto;
    margin-bottom: 4%;
    width: 60%;
    min-height: 45px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    border-color: #0C7D16;
    border-style: solid;
    border-width: 2px;
    border-radius: 50px;
    justify-content: center;
    background-color: #0C7D16;
    color: rgba(255, 255, 255, 1);
    transition: background-color 0.25s, border-color 0.25s, transform 0.1s;
    font-size: 15px;
    align-self: auto;
    font-style: Bold;
    text-align: left;
    font-family: Inter Tight;
    font-weight: 700;
    line-height: 20px;
    font-stretch: normal;
    text-decoration: none;
    align-self: center;
}
    .create-request-button:hover {
        background-color: #0a6e14;
        border-color: #0a6e14;
    }

    .create-request-button:active {
        background-color: #0a6e14;
        border-color: #0a6e14;
        transform: scale(0.98);
    }
.create-request-button a {
    
    box-sizing: border-box;
    /* Auto layout */
    color: rgba(255, 255, 255, 1);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px 20px;
    gap: 10px;
    position: relative;
    width: 104px;
    height: 80px;
    top: 0px;
    border-bottom: 3px solid transparent;
    font-size: 18px;
    align-self: auto;
    font-style: normal;
    text-align: left;
    font-family: Inter Tight;
    font-weight: bold;
    font-stretch: normal;
    text-decoration: none;
}

/* ================= Перенесено из инлайнового <style> в Views/Home/Index.cshtml =================
   Брейкпоинт 768px сведён к общей шкале сайта (767px). */

._partners {
    position: absolute;
    left: 0;
    top: 0;
    padding: 2px 15px 4px 15px;
    background: #f4f4f4;
    border-bottom-right-radius: 15px;
    color: #0E8C1A !important;
    border-top-left-radius: 15px;
    -webkit-box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.2);
    box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.1);
}

._general {
    color: rgba(68, 68, 68, 0.5);
}

.submit-btn {
    right: 20px;
    cursor: pointer;
    position: absolute;
    right: 10px;
    top: 30px;
    border-radius: 10px;
    background: #0E8C1A;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    padding: 5px 10px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #fff;
    font-size: 10px;
    height: 25px;
    font-weight: 700;
    line-height: 14px;
    letter-spacing: 0.28px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.edit-button {
    position: absolute;
    right: 20px;
    top: 15px;
    cursor: pointer;
}

.hidden-input {
    display: none;
}

    .hidden-input.active {
        width:90%;
        display: block;
    }

.hidden-value.active {
    display: none;
}

.hidden-input textarea {
    width: 100%;
    min-height: 60px;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-family: 'Inter Tight', sans-serif;
    font-size: 14px;
    resize: vertical;
}

    .hidden-input textarea:focus {
        outline: none;
        border-color: #0E8C1A;
    }

/* Стили для быстрой заявки (только мобильная версия) */
.mobile-only {
    display: none;
}

@media (max-width: 767px) {
    .mobile-only {
        display: block;
    }
}

.quick-request-section {
    padding: 40px 0 20px 0;
}

.quick-request-block {
    background: #FFFFFF;
    box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.05), 0px 5px 25px rgba(0, 0, 0, 0.07);
    border-radius: 15px;
    padding: 25px 20px;
}

.quick-request-title {
    font-size: 24px;
    font-weight: 700;
    color: #333;
    text-align: center;
    margin-bottom: 20px;
}

.quick-request-success {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    background: #d4edda;
    border: 1px solid #c3e6cb;
    border-radius: 8px;
    margin-bottom: 15px;
    color: #155724;
    font-size: 14px;
}

.quick-request-error {
    padding: 12px;
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 8px;
    margin-bottom: 15px;
    color: #721c24;
    font-size: 14px;
    text-align: center;
}

.quick-request-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.quick-form-group {
    display: flex;
    flex-direction: column;
}

.quick-label {
    font-weight: 600;
    font-size: 14px;
    color: #444;
    margin-bottom: 6px;
}

    .quick-label .required {
        color: #dc3545;
    }

.quick-input,
.quick-textarea {
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    transition: border-color 0.3s;
}

    .quick-input:focus,
    .quick-textarea:focus {
        outline: none;
        border-color: #0E8C1A;
    }

.quick-textarea {
    resize: vertical;
    min-height: 70px;
    max-height: 200px;
    font-family: inherit;
}

/* #0E8C1A под белым текстом даёт 4.39 — ниже WCAG AA (4.5). Затемнено до 5.30. */
.quick-submit-btn {
    background: #0C7D16;
    color: #fff;
    padding: 14px 24px;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.3s;
    margin-top: 5px;
}

    .quick-submit-btn:hover {
        background: #0a6e14;
    }

    .quick-submit-btn:active {
        transform: scale(0.98);
    }

    .quick-submit-btn:disabled {
        background: #ccc;
        cursor: not-allowed;
    }

/* Стили для блока обратной связи */
.callback-section {
    padding: 60px 0;
    margin-top: 40px;
}

.callback-block {
    max-width: 800px;
    margin: 0 auto;
    background: #FFFFFF;
    box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.05), 0px 5px 25px rgba(0, 0, 0, 0.07);
    border-radius: 15px;
    padding: 40px;
}

.callback-title {
    font-size: 28px;
    font-weight: 700;
    color: #333;
    text-align: center;
    margin-bottom: 30px;
}

.callback-success {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px;
    background: #d4edda;
    border: 1px solid #c3e6cb;
    border-radius: 10px;
    margin-bottom: 20px;
    color: #155724;
    font-size: 14px;
}

    .callback-success img {
        width: 20px;
        height: 20px;
    }

.callback-error {
    padding: 15px;
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 10px;
    margin-bottom: 20px;
    color: #721c24;
    font-size: 14px;
    text-align: center;
}

.callback-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.callback-form-group {
    display: flex;
    flex-direction: column;
}

.callback-label {
    font-weight: 600;
    font-size: 14px;
    color: #444;
    margin-bottom: 8px;
}

    .callback-label .required {
        color: #dc3545;
    }

.callback-input,
.callback-textarea {
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    transition: border-color 0.3s;
}

    .callback-input:focus,
    .callback-textarea:focus {
        outline: none;
        border-color: #0E8C1A;
    }

.callback-textarea {
    resize: vertical;
    min-height: 50px;
    max-height: 300px;
}

/* #0E8C1A под белым текстом даёт 4.39 — ниже WCAG AA (4.5). Затемнено до 5.30. */
.callback-submit-btn {
    background: #0C7D16;
    color: #fff;
    padding: 15px 30px;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.3s;
    align-self: center;
    min-width: 200px;
}

    .callback-submit-btn:hover {
        background: #0a6e14;
    }

    .callback-submit-btn:active {
        transform: scale(0.98);
    }

@media (max-width: 767px) {
    .callback-block {
        padding: 25px 20px;
    }

    .callback-title {
        font-size: 22px;
    }

    .callback-submit-btn {
        width: 100%;
    }
}
