/* Shared UI states and editorial hierarchy. Loaded after legacy component CSS. */
:root {
  --card-title: clamp(1.125rem, 1.5vw, 1.375rem);
  --control-pressed: #d76a05;
  --control-disabled: #eeeeee;
  --control-disabled-ink: #737373;
  --field-error: #b32e23;
  --field-error-surface: #fff5f3;
  --focus-ring: #a64b00;
}

.section h2, .page-hero h1, .modal h2 { font-weight: 700; }
.page-hero h1 { font-size: clamp(2.125rem, 4.5vw, 4rem); line-height: 1.12; }
.section h2 { line-height: 1.2; }
.section .picker__controls h2 { font-weight: 700; }
.section :is(.tariff-card, .picker__result, .offer-card, .news-card, .catalog-card, .value-card, .step-card) h3 {
  font-size: var(--card-title);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
}
:is(.tariff-card, .picker__result, .offer-card, .news-card, .catalog-card, .value-card, .step-card) p {
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.6;
}
:is(.tariff-card, .picker__result, .offer-card, .news-card, .catalog-card, .value-card, .step-card, .faq-list, .account-card) {
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: none;
}
.tariff-card--featured { background: var(--paper); border-color: var(--orange); }
:is(.tariff-card, .offer-card, .catalog-card, .news-card, .value-card):hover {
  box-shadow: none;
  border-color: #f3bf8d;
}
.tariff-card--featured:hover { border-color: var(--orange); }
.tariff-badge { color: var(--link); }
.service-showcase__stage, .service-showcase__panel { background: var(--paper); }
.service-showcase-section { background: var(--surface); }
.service-showcase__copy h3 { font-weight: 700; }
.service-illustration { display: block; width: min(100%, 380px); height: auto; flex: 0 1 auto; }
.service-illustration-group { width: min(100%, 380px); }
.service-illustration__caption { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.service-illustration__caption span { padding: 5px 10px; color: var(--ink-soft); border: 1px solid var(--line); border-radius: 8px; font: 500 12px/1.4 var(--font-body); }
.page-hero__visual--illustrated { background: transparent; border: 0; box-shadow: none; }
.page-hero__visual--illustrated::before, .page-hero__visual--illustrated::after { display: none; }
.page-hero__visual--illustrated .service-illustration { width: min(100%, 420px); }
.page-hero__icon { backdrop-filter: none; }
.feature-split__visual { background: var(--surface); border: 1px solid var(--line); }
.feature-split__visual::before { background: var(--orange-soft); }
.feature-split__visual::after { background: linear-gradient(145deg, #fff, #fff2e5); border: 1px solid var(--line); box-shadow: 0 12px 28px #22222212; }
.faq-aside { padding: 0; }
.faq-aside h2 { margin-bottom: 16px; }
.faq-aside__art { margin: 0 0 18px; }
.faq-aside__art .service-illustration { width: 190px; }
.faq-question { font-family: var(--font-body); font-weight: 600; }

/* Press feedback changes colour, never geometry or text sharpness. */
:is(.button, .picker-section .picker__actions .picker-details):hover:not(:disabled) { box-shadow: none; }
:is(.button--primary, .button--dark, .equipment-slide .button, .catalog-card .button):active:not(:disabled) {
  color: var(--action-ink);
  background: var(--control-pressed);
  border-color: var(--control-pressed);
  box-shadow: inset 0 2px 0 #a64b0033;
  transform: none;
}
:is(.button--ghost, .button--light, .picker-section .picker__actions .picker-details):active:not(:disabled) {
  color: var(--link-hover);
  background: #ffe3c5;
  border-color: var(--link);
  transform: none;
}
:is(.chip, .tab, .offer-tab, .service-showcase__tab, .picker-section .picker__filters .chip, .tariff-section .chip):hover:not(:disabled):not(.is-active) {
  color: var(--link);
  background: var(--orange-soft);
}
:is(.chip, .tab, .offer-tab, .service-showcase__tab, .picker-section .picker__filters .chip, .tariff-section .chip):active:not(:disabled) {
  color: var(--action-ink);
  background: var(--control-pressed);
  box-shadow: none;
  transform: none;
}
:is(.tariff-carousel__arrow, .equipment-showcase__arrows button, .hero-network__footer a, .floating-help):active:not(:disabled) {
  color: var(--action-ink);
  background: var(--control-pressed);
  border-color: var(--control-pressed);
}
:is(.faq-question, .city-button, .modal__close):active { background: var(--orange-soft); color: var(--link); }
:is(.button, .picker-details, .chip, .tab, .offer-tab, .service-showcase__tab, .city-button, .text-link, .offer-card__link, .equipment-showcase__arrows button, .tariff-carousel__arrow):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  box-shadow: none;
}
/* Disabled must override every legacy per-card/selected/hover colour. */
button:disabled, a[aria-disabled="true"] {
  color: var(--control-disabled-ink) !important;
  background: var(--control-disabled) !important;
  border-color: var(--line) !important;
  box-shadow: none !important;
  opacity: 1;
  cursor: not-allowed;
}

.field-control { flex: 1 1 0; min-width: 0; display: grid; align-content: start; gap: 7px; }
:is(.address-form, .chat-form) { flex-wrap: wrap; align-items: start; }
.address-form { box-shadow: none; }
.address-form > .field-control > input, .chat-form > .field-control > input { width: 100%; min-width: 0; }
:is(.form-field, .search-field, .address-form, .chat-form) :is(input, select, textarea) {
  min-height: 48px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--brand-control-radius);
  font-size: 16px;
  line-height: 1.5;
  box-shadow: none;
}
:is(input, textarea)::placeholder { color: var(--muted); opacity: 1; }
:is(.form-field, .search-field, .address-form, .chat-form) :is(input, select, textarea):hover:not(:disabled):not(:focus) { border-color: #adb2b5; }
:is(.form-field, .search-field, .address-form, .chat-form) :is(input, select, textarea):focus {
  border-color: var(--orange);
  outline: 2px solid var(--orange-soft);
  outline-offset: 1px;
  box-shadow: none;
}
:is(.form-field, .address-form, .chat-form) :is(input, select, textarea)[aria-invalid="true"] {
  border-color: var(--field-error);
  background: var(--field-error-surface);
  outline-color: #f3cbc6;
}
:is(.form-field, .search-field, .address-form, .chat-form) :is(input, select, textarea):disabled {
  color: var(--control-disabled-ink);
  background: var(--control-disabled);
  border-color: var(--line);
  cursor: not-allowed;
  opacity: 1;
}
.form-field :is(input, textarea)[readonly] { background: var(--surface); }
:is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--orange); }
input[type="checkbox"][aria-invalid="true"] { outline: 2px solid var(--field-error); outline-offset: 2px; }
.field-error { display: block; color: var(--field-error); font-size: 13px; line-height: 1.4; }
.form-feedback { flex: 1 0 100%; grid-column: 1 / -1; margin: 0; padding: 12px 14px; border: 1px solid #f3cbc6; border-radius: 12px; background: var(--field-error-surface); color: var(--field-error); font-size: 14px; line-height: 1.5; }
.field-error[hidden], .form-feedback[hidden] { display: none; }
.modal-form { gap: 18px; }
.modal__lead { color: var(--ink-soft); line-height: 1.6; }
.modal-layer { backdrop-filter: none; }
form[aria-busy="true"] [type="submit"] { cursor: progress; }

@media (max-width: 700px) {
  .service-showcase__visual { min-height: 210px; }
  .service-showcase__visual .service-illustration { width: min(100%, 290px); }
  .faq-aside { display: grid; grid-template-columns: minmax(0, 1fr) 105px; column-gap: 12px; align-items: start; }
  .faq-aside > .eyebrow, .faq-aside > h2 { grid-column: 1 / -1; }
  .faq-aside__art { grid-column: 2; grid-row: 3; margin: 0; align-self: center; }
  .faq-aside__art .service-illustration { width: 105px; }
  .faq-aside p { grid-column: 1; margin-bottom: 16px; }
  .faq-aside .button { grid-column: 1 / -1; justify-self: start; }
  .address-form > .field-control { flex-basis: 100%; }
}