:root {
    --black: #000;
    --gray: #9b9b9b;
    --light: #f5f5f5;
}

* {
    box-sizing: border-box
}



/* заголовок */
.customer {
    margin: 0 auto;
    padding: 40px 100px 80px;
}

.customer__head {
    text-align: left;
}

.customer__title {
    margin: 0 0 8px;
    font-weight: 400;
    letter-spacing: .04em;
    font-size: 36px;
    text-transform: uppercase;
}

.customer__lead {
    max-width: 50%;
    font-size: 24px;
    font-weight: 300;
    line-height: 1;
    color: #222;
}

/* блок ссылок */


.customer__links {
    margin: 32px 0 40px;
    text-align: center;
}

.customer__links h2 {
    font-size: 24px;
    font-weight: 300;
    text-align: left;
    margin-top: 100px;
}

.customer__links p {
    margin: 14px 0;
}

.customer__links a {
    display: inline-block;
    text-decoration: none;
    color: #3b3b3b;
    letter-spacing: .12em;
    font-size: 24px;
    font-weight: 300;
    text-transform: uppercase;
    transition: opacity .2s ease;
}

.customer__links a:hover {
    opacity: .6
}

/* форма */
.customer__form-block {
    margin-top: 50px;
}

.customer__note {
    font-size: 24px;
    font-weight: 300;
    max-width: 61%;
    color: #222;
    margin: 0 0 18px;
}

.customer-form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 14px;
}

.f-label {
    display: block;
    font-size: 16px;
    color: #6b6b6b;
    letter-spacing: .06em;
    max-width: 500px;
    width: 500px;
}

.f-input,
.f-textarea,
.f-select select {
    width: 100%;
    border: 1px solid #000000;
    background: #fff;
    outline: none;
    padding: 10px 12px;
    font-size: 16px;
    color: #000;
}

.f-input:focus,
.f-textarea:focus,
.f-select select:focus {
    border-color: #000
}

.f-textarea {
    min-height: 90px;
    resize: vertical
}

/* кастомный select */
.f-select {
    position: relative
}

.f-select select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 34px;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.f-caret {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    pointer-events: none;
    color: #000;
}

/* чекбоксы */
.f-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 11.5px;
    color: #5a5a5a;
    line-height: 1.45;
    width: 500px;
}

.f-check a {
    color: #000
}

.f-check input {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border: 1px solid #000;
    margin-top: 2px;
    display: grid;
    place-items: center;
}

.f-check input:checked {
    background: #000;
    box-shadow: inset 0 0 0 2px #fff;
}

/* кнопка */
.f-actions {
    display: flex;
    justify-content: center;
    margin-top: 4px
}

.f-submit {
    border: 0;
    background: #000;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .12em;
    padding: 12px 28px;
    cursor: pointer;
}

.f-submit:active {
    transform: translateY(1px)
}



.agree {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 500px;
    width: 500px
}

.remember {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 12px;
    line-height: 1.45;
    color: #5a5a5a;
}

.remember a {
    color: #000;
    text-decoration: none
}

.remember a:hover {
    text-decoration: underline
}

/* прячем системный чекбокс, работаем через соседний .check */
.remember input {
    position: absolute;
    left: -9999px;
    /* или appearance:none;width:0;height:0; */
}

.remember .check {
    position: relative;
    width: 22px;
    height: 22px;
    border: 1px solid #111;
    background: #fff;
    display: inline-block;
    transition: background .15s ease, border-color .15s ease;
    min-width: 22px;
}

/* белая галка */
.remember .check::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 1px;
    width: 7px;
    height: 13px;
    border: 2px solid #fff;
    border-top: 0;
    border-left: 0;
    transform: rotate(45deg);
    opacity: 0;
    transition: opacity .15s ease;
}

.remember input:checked+.check {
    background: #000;
    border-color: #000
}

.remember input:checked+.check::after {
    opacity: 1
}


/* адаптив */
@media (max-width:767px) {
    .customer {
        padding: 30px 20px;
    }

    .customer__lead {
        max-width: unset;
        font-size: 16px;
    }

    .customer__links h2 {
        margin-top: 50px;
    }


    .customer__note {
        max-width: unset;
        font-size: 16px;
    }

    .f-label {
        width: 100%;
    }

    .f-input,
    .f-textarea,
    .f-select select {
        border-radius: 0px;
    }

    .agree {
        width: unset;
        max-width: unset;
    }
}


@media (min-width: 768px) and (max-width: 1350px) {
    .customer {
        padding: 50px 40px;
    }


    .f-input,
    .f-textarea,
    .f-select select {
        border-radius: 0px;
    }
}