.main-home-appointment,
.main-home-appointment * { box-sizing: border-box; }
.main-home-appointment { padding: 90px 20px 60px; background: #fff; }
.main-home-appointment__container { width: min(100%, 1520px); margin: 0 auto; }
.main-home-appointment__card { position: relative; display: grid; min-height: 415px; padding: 60px; overflow: hidden; border-radius: 20px; background: #d71f27; color: #fff; grid-template-columns: 1fr 480px; gap: 80px; }
.main-home-appointment__decor { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .8; pointer-events: none; }
.main-home-appointment__content,
.main-home-appointment__form { position: relative; z-index: 1; }
.main-home-appointment__title { margin: 0; color: #fff; font-family: "Playfair Display", Georgia, serif; font-size: 40px; font-weight: 600; line-height: .95; }
.main-home-appointment__description { margin: 29px 0 0; color: #fff; font-family: Manrope, "Open Sans", Arial, sans-serif; font-size: 20px; line-height: 1.5; }
.main-home-appointment__form { display: flex; gap: 20px; flex-direction: column; }
.main-home-appointment__select-button,
.main-home-appointment__select-list,
.main-home-appointment__date-button,
.main-home-appointment__date-picker { display: none; }
.main-home-appointment__field-label { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.main-home-appointment__field { position: relative; display: block; width: 100%; min-height: 50px; margin: 0; border: 0; border-radius: 25px; background: #fff; }
.main-home-appointment__field::after { position: absolute; top: 50%; right: 20px; width: 10px; height: 6px; background: url("/local/templates/academ_aspro/images/main-home-appointment/asset-3.svg") center/contain no-repeat; content: ""; transform: translateY(-50%); pointer-events: none; }
.main-home-appointment__field select { width: 100%; height: 50px; padding: 0 48px 0 30px; border: 0; outline: 0; border-radius: 25px; background: transparent; color: #d71f27; font-family: Manrope, "Open Sans", Arial, sans-serif; font-size: 16px; font-weight: 700; appearance: none; cursor: pointer; }
.main-home-appointment__field select:disabled { opacity: .7; cursor: default; }
.main-home-appointment__date { cursor: pointer; }
.main-home-appointment__date input { position: relative; z-index: 2; width: 100%; height: 50px; padding: 0 48px 0 30px; border: 0; outline: 0; border-radius: 25px; background: transparent; color: #d71f27; font-family: Manrope, "Open Sans", Arial, sans-serif; font-size: 16px; font-weight: 700; opacity: 0; cursor: pointer; }
.main-home-appointment__date input:disabled { opacity: 0; cursor: default; }
.main-home-appointment__date--has-value input { opacity: 1; }
.main-home-appointment__date input::-webkit-calendar-picker-indicator { width: 100%; height: 100%; position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.main-home-appointment__date-placeholder { position: absolute; z-index: 1; top: 50%; left: 30px; color: #d71f27; font-family: Manrope, "Open Sans", Arial, sans-serif; font-size: 16px; font-weight: 700; transform: translateY(-50%); pointer-events: none; }
.main-home-appointment__date input:disabled + .main-home-appointment__date-placeholder { opacity: .7; }
.main-home-appointment__date--has-value .main-home-appointment__date-placeholder { display: none; }
.main-home-appointment__consent { display: grid; margin-top: 0; color: #fff; font-family: Manrope, "Open Sans", Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; grid-template-columns: 25px 1fr; gap: 15px; cursor: pointer; }
.main-home-appointment__consent input { position: absolute; opacity: 0; }
.main-home-appointment__checkbox { width: 25px; height: 25px; border: 2px solid #fff; border-radius: 5px; }
.main-home-appointment__consent input:checked + .main-home-appointment__checkbox::after { display: block; width: 12px; height: 7px; margin: 6px 5px; border-bottom: 2px solid #fff; border-left: 2px solid #fff; content: ""; transform: rotate(-45deg); }
.main-home-appointment__consent a { color: #fff; text-decoration: underline; }
.main-home-appointment__form-trigger { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.main-home-appointment__error { min-height: 18px; margin: -10px 0 0 40px; color: #fff; font-size: 12px; }
@media (max-width: 991px) {
    .main-home-appointment__card { padding: 45px 40px; grid-template-columns: 1fr 420px; gap: 40px; }
    .main-home-appointment__description br { display: none; }
}
@media (max-width: 767px) {
    .main-home-appointment { width: 100%; min-width: 0; min-height: 760px; padding: 47px 15px 45px; overflow-x: clip; background: #d71f27; }
    .main-home-appointment__container { width: 100%; max-width: 330px; min-width: 0; }
    .main-home-appointment__card { display: block; min-height: 0; padding: 0; overflow: visible; border-radius: 0; background: transparent; }
    .main-home-appointment__decor { display: none; }
    .main-home-appointment__content { text-align: center; }
    .main-home-appointment__title { width: 300px; max-width: 100%; margin: 0 auto; font-size: 28px; line-height: 35px; }
    .main-home-appointment__description { width: 300px; max-width: 100%; margin: 28px auto 0; font-size: 14px; line-height: 1.5; }
    .main-home-appointment__description br { display: none; }
    .main-home-appointment__form { width: 100%; max-width: 330px; min-width: 0; min-height: 445px; margin: 55px auto 0; padding: 45px 15px 30px; border-radius: 20px; background: #fff; gap: 15px; }
    .main-home-appointment__field { width: 100%; min-width: 0; min-height: 90px; border-radius: 0; background: transparent; }
    .main-home-appointment__field-label { position: static; display: block; width: auto; height: 21px; margin: 0 0 15px; overflow: visible; clip: auto; color: #282828; font-family: Manrope, "Open Sans", Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 21px; text-align: left; white-space: normal; }
    .main-home-appointment__field::after { top: auto; right: 15px; bottom: 20px; }
    .main-home-appointment__field select,
    .main-home-appointment__date input { height: 45px; padding: 0 45px 0 15px; border: 1px solid #d9d9d9; border-radius: 5px; background: #f8f7f5; color: #282828; font-size: 14px; font-weight: 400; }
    .main-home-appointment__field select { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); opacity: 0; pointer-events: none; }
    .main-home-appointment__select-button { display: block; width: 100%; height: 45px; padding: 0 45px 0 15px; overflow: hidden; border: 1px solid #d9d9d9; border-radius: 5px; background: #f8f7f5; color: #282828; font-family: Manrope, "Open Sans", Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 43px; text-align: left; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
    .main-home-appointment__select-button--placeholder { color: #bdbdbd; }
    .main-home-appointment__select-button:disabled { opacity: .7; cursor: default; }
    .main-home-appointment__select-list { position: absolute; z-index: 20; top: 90px; right: 0; left: 0; width: 100%; max-width: 100%; max-height: min(240px, 45vh); overflow-x: hidden; overflow-y: auto; border: 1px solid #d9d9d9; border-radius: 5px; background: #fff; box-shadow: 0 10px 25px rgba(0, 0, 0, .15); overscroll-behavior: contain; }
    .main-home-appointment__field--open .main-home-appointment__select-list { display: block; }
    .main-home-appointment__field--open { z-index: 10; }
    .main-home-appointment__field--open::after { transform: translateY(-50%) rotate(180deg); }
    .main-home-appointment__select-option { display: block; width: 100%; min-height: 42px; padding: 10px 15px; border: 0; border-bottom: 1px solid #eee; background: #fff; color: #282828; font-family: Manrope, "Open Sans", Arial, sans-serif; font-size: 14px; line-height: 1.4; text-align: left; cursor: pointer; }
    .main-home-appointment__select-option:last-child { border-bottom: 0; }
    .main-home-appointment__select-option:hover,
    .main-home-appointment__select-option:focus,
    .main-home-appointment__select-option[aria-selected="true"] { background: #fdf2f0; color: #d71f27; }
    .main-home-appointment__date input:disabled { opacity: 1; color: transparent; cursor: default; }
    .main-home-appointment__date input,
    .main-home-appointment__date-placeholder { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); opacity: 0; pointer-events: none; }
    .main-home-appointment__date-button { display: block; width: 100%; height: 45px; padding: 0 45px 0 15px; overflow: hidden; border: 1px solid #d9d9d9; border-radius: 5px; background: #f8f7f5; color: #282828; font-family: Manrope, "Open Sans", Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 43px; text-align: left; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
    .main-home-appointment__date-button:disabled { color: #bdbdbd; opacity: .7; cursor: default; }
    .main-home-appointment__date-picker { position: absolute; z-index: 20; top: 90px; right: 0; left: 0; width: 100%; max-width: 100%; height: min(260px, 48vh); padding: 8px; overflow: hidden; border: 1px solid #d9d9d9; border-radius: 5px; background: #fff; box-shadow: 0 10px 25px rgba(0, 0, 0, .15); grid-template-columns: minmax(0, 2fr) minmax(58px, 1fr); gap: 8px; }
    .main-home-appointment__date-picker:not([hidden]) { display: grid; }
    .main-home-appointment__date-picker-column { overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
    .main-home-appointment__date-option { display: block; width: 100%; min-height: 38px; padding: 8px 10px; border: 0; border-radius: 4px; background: #fff; color: #282828; font-family: Manrope, "Open Sans", Arial, sans-serif; font-size: 13px; line-height: 1.3; text-align: left; cursor: pointer; }
    .main-home-appointment__date-option:hover,
    .main-home-appointment__date-option:focus,
    .main-home-appointment__date-option.is-selected { background: #fdf2f0; color: #d71f27; }
    .main-home-appointment__date-picker-column:last-child .main-home-appointment__date-option { text-align: center; }
    .main-home-appointment__date--open { z-index: 10; }
    .main-home-appointment__date--open::after { transform: translateY(-50%) rotate(180deg); }
    .main-home-appointment__consent { margin-top: 0; color: #bdbdbd; font-size: 10px; line-height: 1.5; grid-template-columns: 25px 1fr; gap: 15px; }
    .main-home-appointment__checkbox { border-color: #d71f27; }
    .main-home-appointment__consent input:checked + .main-home-appointment__checkbox::after { border-color: #d71f27; }
    .main-home-appointment__consent a { color: #bdbdbd; }
    .main-home-appointment__error { margin: 0; color: #d71f27; }
}

@media (max-width: 340px) {
    .main-home-appointment { padding-right: 10px; padding-left: 10px; }
    .main-home-appointment__form { padding-right: 12px; padding-left: 12px; }
    .main-home-appointment__title { font-size: 25px; line-height: 31px; }
    .main-home-appointment__description { font-size: 13px; }
    .main-home-appointment__consent { grid-template-columns: 22px minmax(0, 1fr); gap: 10px; }
    .main-home-appointment__checkbox { width: 22px; height: 22px; }
}