/* Общие элементы нового макета. Главная и витрина используют одни классы. */
:root {
    --color-primary: #ff0032;
    --color-primary-hover: #e5002d;
    --color-text: #1d2023;
    --color-secondary: #626c77;
    --color-surface: #f2f3f7;
    --color-border: #bcc3d0;
    --color-disabled: #f8f8fb;
    --color-focus: #26a2ff;
    --radius-control: 12px;
    --radius-panel: 20px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.landing-page, body.legal-page { margin: 0; color: var(--color-text); background: #fff; font: 16px/1.25 'MTS Text', Arial, sans-serif; }
button, input, select, textarea { font: inherit; }
button, a, input, select { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }
button { cursor: pointer; }
button, input, select { color: inherit; }
button { border: 0; }
a { color: inherit; }
img { max-width: 100%; vertical-align: middle; }
h1, h2, h3, p { margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.container, .mts-container { width: calc(100% - 64px); max-width: 1216px; margin-inline: auto; }
.section-title, .mts-section__title { font: 500 32px/1.05 'MTS Wide', Arial, sans-serif; }
.skip-link { position: fixed; left: 16px; top: -100px; z-index: 100; padding: 12px; background: #fff; }
.skip-link:focus { top: 12px; }
.skip-link:not(:focus) { width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 12px 20px; border: 0; border-radius: var(--radius-control); background: var(--color-primary); color: #fff; font-weight: 700; text-decoration: none; text-align: center; transition: background-color .15s; }
.button:hover { background: var(--color-primary-hover); }
.button:active { background: #cc0028; }
.button:disabled, .button[aria-disabled="true"] { cursor: default; background: #bcc3d0; color: #fff; }
.button--secondary { min-height: 40px; border-radius: 8px; color: var(--color-text); background: #f2f2f5; font-weight: 500; }
.button--secondary:hover, .button--icon:hover { background: #e2e5eb; }
.button--icon { width: 40px; min-height: 40px; padding: 12px; border-radius: 8px; background: #f2f2f5; }
.button--icon img { width: 16px; height: 16px; }
.city-button { display: inline-flex; align-items: center; gap: 8px; padding: 0; background: transparent; font-weight: 500; text-align: left; }
.city-button img { flex: 0 0 20px; width: 20px; height: 20px; }
.field { position: relative; min-width: 0; }
.field__input { display: block; width: 100%; min-width: 0; height: 44px; padding: 11px 40px 11px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-control); background: #fff; color: var(--color-text); appearance: none; outline: none; }
.field__input::placeholder { color: var(--color-secondary); opacity: 1; }
.field__input:hover:not(:disabled) { border-color: #8d969f; }
.field--hover .field__input { border-color: #8d969f; }
.field__input:focus, .field--focus .field__input { border-color: var(--color-focus); }
.field__input:disabled { background: var(--color-disabled); color: var(--color-secondary); border-color: #e8eaed; cursor: not-allowed; }
.field__input[aria-invalid="true"], .field--error .field__input { border-color: var(--color-primary); }
.field__error, .lead-form__field-error { display: block; margin-top: 4px; color: var(--color-primary); font-size: 12px; line-height: 16px; }
.field__error:empty { display: none; }
.field__arrow { position: absolute; right: 16px; top: 12px; pointer-events: none; }
.field select { padding-right: 40px; color: var(--color-secondary); cursor: pointer; }
.lead-form__hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0; }
.lead-form__clear { position: absolute; top: 10px; right: 10px; width: 24px; height: 24px; padding: 0; border-radius: 50%; color: #8d969f; background: transparent; font-size: 22px; line-height: 22px; }
.connection-form { width: 100%; }
.connection-form__city { margin-bottom: 16px; }
.connection-form__summary { display: none; }
.connection-form__fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.connection-form__street { grid-column: 1 / 3; }
.connection-form__house { grid-column: 3; }
.connection-form__submit { width: 100%; }
.connection-form__submit-mobile { display: none; }
.connection-form__legal { margin-top: 16px; color: var(--color-secondary); font-size: 14px; line-height: 18px; }
.connection-form__legal a { text-decoration: underline; text-underline-offset: 2px; }
.connection-form--inline { position: relative; z-index: 1; max-width: 800px; color: #fff; }
.connection-form--inline .field__input { height: 52px; padding-block: 15px; border-color: transparent; }
.connection-form--inline .field__input:focus { border-color: var(--color-focus); }
.connection-form--inline .field__input[aria-invalid="true"] { border-color: var(--color-primary); }
.connection-form--inline .field__arrow { top: 16px; }
.connection-form--inline .lead-form__clear { top: 14px; }
.connection-form--inline .connection-form__legal { color: #fff; }
.connection-form--inline .connection-form__submit { min-height: 52px; }
.connection-form--inline .city-button img { filter: brightness(0) invert(1); }
.connection-form--inline .connection-form__fields { gap: 16px 12px; }
.connection-form--inline .connection-form__street { grid-column: 1 / 3; }
.connection-form--inline .connection-form__house { grid-column: 3; }
.connection-form--inline .field__error { padding: 2px 4px; border-radius: 4px; background: #fff; }
.connection-form--cottage .connection-form__street { grid-column: 1 / -1; }
.connection-form--cottage .connection-form__house { display: none; }
.lead-form__suggestions { position: absolute; z-index: 12; top: calc(100% + 4px); left: 0; right: 0; max-height: 256px; overflow-y: auto; padding: 8px 0; border-radius: 12px; background: #fff; color: var(--color-text); box-shadow: 0 4px 16px #00000014; font-size: 16px; }
.lead-form__suggestions:empty { display: none; }
.lead-form__suggestions .address-item { padding: 8px 16px; cursor: pointer; }
.lead-form__suggestions .address-item:hover, .lead-form__suggestions .address-item.focused { background: #f2f3f7; }
.lead-form__suggestions .loading, .lead-form__suggestions .no-results { padding: 8px 16px; }
.lead-form__suggestions small, .lead-form__suggestions .district-name, .lead-form__suggestions .address-item__meta, .lead-form__suggestions .address-item__subtitle { display: block; color: var(--color-secondary); font-size: 12px; }
.field__retry { display: block; padding: 4px 0 0; color: var(--color-primary); background: transparent; font-size: 14px; }
.modal { width: min(1010px, calc(100% - 64px)); max-width: none; max-height: calc(100dvh - 48px); margin: auto; padding: 40px; border: 0; border-radius: var(--radius-panel); background: var(--color-surface); color: var(--color-text); overflow: auto; box-shadow: 0 4px 16px #0000000d; }
.modal::backdrop { background: #1d202366; }
.modal__close { position: absolute; top: 20px; right: 20px; display: grid; place-items: center; width: 24px; height: 24px; padding: 0; background: transparent; }
.modal__close img { width: 24px; height: 24px; }
.modal__title { padding-right: 20px; font-size: 24px; line-height: 28px; font-weight: 500; }
.modal__subtitle { margin-top: 8px; margin-bottom: 24px; color: var(--color-secondary); font-size: 16px; line-height: 20px; }
.modal--tariff { width: min(588px, calc(100% - 64px)); }
.modal--tariff .connection-form__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.modal--tariff .connection-form__street, .modal--tariff .connection-form__house { grid-column: auto; }
.modal--tariff .connection-form__submit, .modal--tariff .connection-form--cottage .connection-form__street { grid-column: 1 / -1; }
.modal--support { max-width: 588px; }
.modal--support p { margin-top: 20px; }
.contact-phone { display: inline-block; margin-top: 20px; font-size: 24px; text-decoration: none; }
.tariff-summary { margin: 32px 0; }
.tariff-summary__title { margin-bottom: 16px; font-size: 24px; line-height: 28px; }
.tariff-summary__list { margin: 0; }
.tariff-summary__list > div { display: flex; justify-content: space-between; gap: 16px; margin-top: 8px; }
.tariff-summary__list dt { font-weight: 400; }
.tariff-summary__list dd { margin: 0; text-align: right; font-weight: 700; }
.city-modal__input { margin: 24px 0; }
.city-modal__list { max-height: min(50dvh, 360px); overflow: auto; scrollbar-width: thin; scrollbar-color: #bcc3d0 transparent; padding-right: 16px; }
.city-modal__group { margin-bottom: 24px; }
.city-modal__group h3 { margin-bottom: 16px; font-size: 20px; font-weight: 500; }
.city-modal__cities { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 24px; }
.city-modal__item { font-size: 16px; line-height: 20px; text-decoration: none; }
.city-modal__item:hover { color: var(--color-primary); }
.Accordion { border-bottom: 1px solid #e2e5eb; }
.Accordion__title { margin: 0; font-weight: 400; }
.Accordion__header { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; padding: 20px 0; background: transparent; text-align: left; font-size: 18px; line-height: 24px; }
.Accordion__chevron { flex: 0 0 24px; transition: transform .15s; }
.Accordion__body { display: none; padding-bottom: 20px; color: var(--color-secondary); line-height: 1.5; }
.Accordion.is-open .Accordion__body { display: block; }
.Accordion.is-open .Accordion__chevron { transform: rotate(180deg); }
.accordion-card { padding: 24px; border-radius: 20px; background: #fff; box-shadow: 0 4px 16px #00000014; }
.accordion-card + .accordion-card { margin-top: 20px; }
.accordion-card summary { display: flex; justify-content: space-between; gap: 16px; cursor: pointer; list-style: none; font-size: 20px; line-height: 24px; font-weight: 500; }
.accordion-card summary::-webkit-details-marker { display: none; }
.accordion-card summary img { width: 24px; height: 24px; flex: 0 0 24px; }
.accordion-card[open] summary img { transform: rotate(180deg); }
.accordion-card__body { margin-top: 20px; font-size: 16px; line-height: 20px; }
.accordion-card__body p + p { margin-top: 12px; }
.accordion-card__body ul { margin: 0; padding-left: 20px; }
.accordion-card__body li + li { margin-top: 12px; }
@media (max-width: 767px) {
    .container, .mts-container { width: calc(100% - 32px); }
    .section-title, .mts-section__title { font-size: 20px; line-height: 24px; }
    .button { font-size: 14px; }
    .connection-form__fields { grid-template-columns: 168px minmax(0, 1fr); gap: 8px; }
    .connection-form__street, .connection-form__house { grid-column: 1 / -1; }
    .connection-form__phone { grid-column: 1; }
    .connection-form__segment { grid-column: 2; }
    .connection-form__submit { grid-column: 1 / -1; }
    .connection-form__legal { font-size: 12px; line-height: 16px; }
    .connection-form--inline .connection-form__fields { grid-template-columns: 168px minmax(0, 1fr); gap: 8px; }
    .connection-form--inline .connection-form__street, .connection-form--inline .connection-form__house { grid-column: 1 / -1; }
    .connection-form--inline .field__input { height: 44px; padding-block: 11px; }
    .connection-form--inline .field__arrow { top: 12px; }
    .connection-form--inline .lead-form__clear { top: 10px; }
    .connection-form--inline .connection-form__submit { min-height: 44px; }
    .connection-form__submit-desktop { display: none; }
    .connection-form__submit-mobile { display: inline; }
    .connection-form__city { margin-bottom: 12px; }
    .modal, .modal--tariff, .modal--support { width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 60px 16px 32px; border-radius: 0; box-shadow: none; }
    .modal__close { top: 12px; right: 12px; }
    .modal__title { font-size: 20px; line-height: 24px; }
    .modal__subtitle { font-size: 14px; line-height: 18px; }
    .modal:not(.modal--tariff) .connection-form__fields { grid-template-columns: 1fr; }
    .modal:not(.modal--tariff) .connection-form__phone, .modal:not(.modal--tariff) .connection-form__segment { grid-column: 1; }
    .tariff-summary { margin: 24px 0; }
    .tariff-summary__title { font-size: 20px; line-height: 24px; }
    .tariff-summary__list { font-size: 14px; line-height: 18px; }
    .city-modal__cities { grid-template-columns: 1fr; gap: 12px; }
    .city-modal__list { max-height: calc(100dvh - 200px); }
    .city-modal__group h3 { font-size: 18px; }
    .Accordion__header { padding: 16px 0; font-size: 14px; line-height: 18px; }
    .Accordion__body { font-size: 14px; }
    .accordion-card { padding: 20px 16px; }
    .accordion-card + .accordion-card { margin-top: 12px; }
    .accordion-card summary { font-size: 16px; line-height: 20px; }
    .accordion-card__body { font-size: 14px; line-height: 18px; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; }
}