@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

* {
    box-sizing: border-box;
    font-family: "DM Sans", sans-serif;
}


.sf-form {
    max-width: 768px;
    margin: 0 auto;
    padding: 48px;
    box-shadow: 0px 64px 64px -48px rgba(15, 15, 15, 0.1);
    border-radius: 20px;
    overflow: hidden;
}

.sf-form .select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 12px;
}

.sf-form .select2-container--default .select2-selection--single {
    border-radius: 12px;
}

.sf-form label {
    display: inline-block;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    letter-spacing: 2%;
    margin: 0 0 12px 0;
    color: #777E90;
}

.sf-form .sf-row {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
}

.sf-form .sf-row--two {
    flex-direction: row;
    gap: 20px;
    justify-content: center;
}


.sf-form .sf-row input,
.sf-form .sf-row select {
    padding: 12px;
    font-weight: 400;
    font-size: 18px;
    line-height: 1;
    color: rgba(35, 38, 47, 1);
}

.sf-form .sf-row select {
    width: 100%;
}

.sf-form input {
    border: 2px solid rgba(230, 232, 236, 1);
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
}

.sf-row--two .sf-field {
    width: 50%;
}

.sf-form .sf-row button {
    background-color: #cb5d44;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    width: 104px;
    height: 56px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    font-size: 16px;
}

.sf-row.btn-style {
    align-items: flex-end;
    margin-top: 80px;
}

.sf-form .sf-row button:hover {
    background-color: #b34c36;
}


.sf-country-wrapper {
    position: relative;
    display: flex;
    align-items: flex-start;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    font-size: 18px;
    color: #23262F !important;
}

.select2-container .select2-selection--single {
    height: auto !important;
}

.sf-country-wrapper .selected-flag {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
}

.sf-country-wrapper select {
    padding-left: 40px !important;
}

.select2-container .select2-selection--single {
    height: 48px;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid #ddd;
}

.sf-error {
    border-color: red;
}

.sf-response {
    margin-top: 10px;
    font-size: 14px;
}

.sf-error-msg {
    color: red;
}

.sf-success-msg {
    color: green;
}

:root {
    --srf-text: #101828;
    --srf-muted: #667085;
    --srf-border: #E6E6E6;
    --srf-bg: #fff;
    --srf-shadow: 0 12px 40px rgba(16, 24, 40, .08);
    --srf-primary: #dd5a3a;
}

.srf {
    padding: 24px 0 8px;
    max-width: 100%;
}

/* FLEX layout */
.srf__inner {
    display: flex;
    align-items: flex-start;
    gap: 40px;
    min-width: 0;
}

.srf__content {
    display: flex;
    max-width: 738px;
    width: 100%;
    min-width: 0;
    flex-direction: column;
}

.srf__side {
    flex: 0 0 320px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.srf__title {
    font-weight: 700;
    font-style: Bold;
    font-size: 48px;
    line-height: 1;
    letter-spacing: -0.5%;
    margin-bottom: 40px;
}

.srf__image {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Card */
.srf-card {
    background: var(--srf-bg);
    border-radius: 16px;
    box-shadow: var(--srf-shadow);
    padding: 48px 48px 64px;
}

.srf-row {
    margin-bottom: 16px;
}

.srf-field label {
    display: block;
    font-weight: 700;
    font-style: Bold;
    font-size: 14px;
    line-height: 1;
    letter-spacing: 2%;
    font-family: "Inter", sans-serif;
    margin-bottom: 12px;
    color: rgba(119, 126, 144, 1);

}

.srf-field label span {
    color: var(--srf-primary);
}

.srf-field {
    margin-bottom: 20px;
}

.srf-field input,
.srf-field select,
.srf-field textarea {
    width: 100%;
    height: 54px;
    border-radius: 12px;
    padding: 16px;
    border: 2px solid rgba(230, 232, 236, 1);
    color: rgba(119, 126, 144, 1);
    font-size: 18px;
    line-height: 1;
    font-family: "Inter", sans-serif;
}

.srf-select select {
    appearance: none;
    -webkit-appearance: none;
    /* Safari, Chrome */
    -moz-appearance: none;
    /* Firefox */
    background: #fff;
    /* фон, чтобы скрыть дефолт */
    font-weight: 400;
    font-size: 18px;
    line-height: 1;
    letter-spacing: 2%;

    color: rgba(35, 38, 47, 1);
}

.srf-select {
    position: relative;

}



.srf-select__chev {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #98A2B3;
}

/* textarea icon */
.srf-textarea {
    position: relative;
}

.srf-textarea .srf-ico {
    position: absolute;
    right: 12px;
    bottom: 12px;
    opacity: .9;
    background: none;
    border: none;
    outline: none;
}

/* Actions */
.srf-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 6px;
}

.srf-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 141px;
    height: 56px;
    opacity: 1;
    border-radius: 16px;
    background-color: rgba(200, 87, 67, 1);
    border: none;
    font-family: "Inter", sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    color: rgba(255, 255, 255, 1);
    cursor: pointer;
}

.srf-btn:hover {
    filter: brightness(.95);
}

/* Anti-spam */
.srf-hp {
    position: absolute;
    left: -9999px;
    width: 0;
    height: 0;
    opacity: 0;
}

.srf-textarea textarea {
    width: 100%;
    height: 150px;
    /* фикс. высота */
    min-height: 150px;
    box-sizing: border-box;
    /* чтобы padding не ломал размер */
    padding-right: 48px;
    /* место под иконку-скрепку */
    resize: vertical;
    /* можно тянуть по высоте, если не нужно — поставь none */
}

/* позиция иконки над полем */
.srf-textarea {
    position: relative;
}

.srf-textarea .srf-attach-trigger {
    position: absolute;
    right: 12px;
    bottom: 12px;
    background: transparent;
    border: 0;
    padding: 4px;
    cursor: pointer;
}

/* размеры/базовый цвет звёзд (контур) */
.srf-rating__stars {
    display: inline-flex;
    flex-direction: row-reverse;
    gap: 6px;
    align-items: center;
}

.srf-rating__stars input {
    position: absolute;
    left: -9999px;
}

.srf-rating__star {
    cursor: pointer;
    color: #D0D5DD;
    /* цвет КОНТУРА по умолчанию */
    display: inline-flex;
    padding: 2px;
}

/* сам путь звезды: белая заливка по умолчанию, контур берёт currentColor */
.srf-rating__star svg path {
    fill: #fff;
    stroke: currentColor;
    /* важное место: контур = color метки */
}

/* HOVER-превью: делаем цвет для контура и заливаем */
.srf-rating__star:hover,
.srf-rating__star:hover~.srf-rating__star {
    color: #FBCB4A;
    /* контур на hover */
}

.srf-rating__star:hover svg path,
.srf-rating__star:hover~.srf-rating__star svg path {
    fill: currentColor;
    /* заливка на hover */
}

/* CHECKED: выбранные и все слева залиты постоянным цветом */
.srf-rating__stars input:checked~.srf-rating__star {
    color: #F59E0B;
    /* контур выбранных */
}

.srf-rating__stars input:checked~.srf-rating__star svg path {
    fill: currentColor;
    /* заливка выбранных */
}

/* Фокус клавиатурой */
.srf-rating__stars input:focus+.srf-rating__star {
    outline: 2px solid #F59E0B;
    outline-offset: 2px;
    border-radius: 6px;
}


/* === Thank-you modal === */
.sa-thx-overlay {
    position: fixed;
    inset: 0;
    background: rgba(16, 24, 40, .55);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.sa-thx-overlay.is-open {
    display: flex;
}

.sa-thx-modal {
    max-width: 481px;
    width: 100%;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(16, 24, 40, .18);
    padding: 28px 28px 24px;
    text-align: center;
}

.sa-thx-ico {
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: #EFF8F1;
    display: grid;
    place-items: center;
}

.sa-thx-ico svg {
    display: block;
}

.sa-thx-title {
    font-weight: 700;
    font-style: Bold;
    font-size: 36px;
    line-height: 1;
    letter-spacing: -0.5%;
    text-align: center;
    color: rgba(35, 38, 47, 1);
}

.sa-thx-desc {
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    color: rgba(119, 126, 144, 1);
}

.sa-thx-btn {
    display: inline-flex;
    border: 0;
    border-radius: 16px;
    background: rgba(200, 87, 67, 1);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    font-size: 16px;
    width: 104px;
    height: 56px;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

.sa-thx-btn:hover {
    filter: brightness(.96);
}


/* Responsive */
@media (max-width:980px) {
    .srf__inner {
        flex-direction: column;
    }

    .srf__side {
        order: -1;
        width: 100%;
        flex: 0 0 auto;
    }
}

@media (max-width: 768px) {
    .sf-form .sf-row--two {
        flex-direction: column;
    }

    .sf-row--two .sf-field {
        width: 100%;
    }

    .sf-form {
        padding: 10px;
    }
}