/* Хаб #rent-pay / форма Life Pay — вынесено из style.css */

.rent-pay-hub__title {
    margin: 0 0 14px;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.25;
    color: #fff;
    text-shadow: var(--glass-pay-title-shadow);
}
/* ========================================
   СЕКЦИЯ «ОПЛАТА АРЕНДЫ» (хаб Life-Pay)
   ======================================== */

.rent-pay-section {
    padding: 44px 0 80px;
    background: linear-gradient(165deg, #f0f4f8 0%, #e4eaf0 45%, #eef2f6 100%);
    overflow-anchor: none;
}

.rent-pay-container {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 24px;
}

.rent-pay-hub-layout {
    display: grid;
    grid-template-columns: minmax(280px, 1.2fr) minmax(220px, 0.82fr);
    gap: 32px 40px;
    align-items: start;
    max-width: 960px;
    margin: 0 auto;
}

.rent-pay-form-column {
    min-width: 0;
}

.rent-pay-section-header .section-title {
    font-size: clamp(1.85rem, 4vw, 2.5rem);
}

.rent-pay-trust {
    padding: 24px 22px 26px 26px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(0, 0, 0, 0.07);
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.75);
    color: var(--text-dark);
}

/* На мобильных правый блок «Перед оплатой» убираем — дублирует смысл и растягивает путь к CTA */
@media (max-width: 768px) {
    .rent-pay-trust {
        display: none;
    }
}

.rent-pay-trust__title {
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--text-dark);
}

.rent-pay-trust__conditions {
    margin: 0;
    padding: 4px 0 2px 14px;
    border-left: 3px solid rgba(2, 136, 209, 0.35);
}

.rent-pay-trust__conditions p {
    margin: 0 0 0.72em;
    font-size: 0.88rem;
    line-height: 1.48;
    font-weight: 400;
    color: var(--text-medium);
}

.rent-pay-trust__conditions p:nth-child(2) {
    margin-bottom: 0.95em;
}

.rent-pay-trust__conditions p:last-child {
    margin-bottom: 0;
}

.rent-pay-trust__list {
    margin: 0;
    padding-left: 1.15rem;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--text-medium);
}

.rent-pay-trust__list li {
    margin-bottom: 10px;
}

.rent-pay-trust__list li:last-child {
    margin-bottom: 0;
}

.rent-pay-trust__list--scan {
    list-style: none;
    padding: 0;
}

.rent-pay-trust__list--scan li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 0.88rem;
    line-height: 1.35;
    font-weight: 500;
    color: var(--text-dark);
}

.rent-pay-trust__list--scan li:last-child {
    margin-bottom: 0;
}

.rent-pay-trust__tick {
    flex-shrink: 0;
    color: var(--oak-accent);
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.3;
}

.rent-pay-trust__link {
    color: var(--water-dark);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.rent-pay-trust__link:hover {
    color: var(--pay-gradient-mid);
}

.rent-pay-hub-card {
    max-width: none;
    margin: 0;
    padding: 22px 22px 24px;
    border-radius: var(--glass-pay-radius);
    background: var(--glass-pay-bg);
    backdrop-filter: blur(var(--glass-pay-blur));
    -webkit-backdrop-filter: blur(var(--glass-pay-blur));
    border: 1px solid var(--glass-pay-border);
    box-shadow: var(--glass-pay-shadow);
    color: var(--glass-pay-text);
}

.rent-pay-form-kicker {
    margin: 0 0 10px;
    font-size: 0.98rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.88);
    text-shadow: var(--glass-pay-title-shadow);
}

.rent-pay-selected-line {
    margin: 0 0 16px;
    padding: 14px 18px;
    border-radius: 12px;
    font-size: 1.12rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.02em;
    color: #fff;
    background: rgba(79, 195, 247, 0.28);
    border: 1px solid rgba(165, 220, 255, 0.62);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.1) inset,
        0 10px 28px rgba(0, 0, 0, 0.22);
}

.rent-pay-selected-line[hidden] {
    display: none !important;
}

.rent-pay-hub-rules-link {
    color: var(--water-light);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.rent-pay-hub-rules-link:hover {
    color: #fff;
}

.rent-pay-segment-label {
    margin-bottom: 8px;
}

.rent-pay-segment {
    margin-bottom: 4px;
}

/* Номера и часы в хабе: единая система состояний (спокойный default, явный hover, заметный active — слабее главного CTA) */
.rent-pay-hub-form .rent-pay-segment .hero-rental-segment__btn:not(.is-active) {
    opacity: 1;
    color: rgba(255, 255, 255, 0.99);
    background: rgba(196, 232, 250, 0.11);
    border-color: rgba(255, 255, 255, 0.42);
}

.rent-pay-hub-form .rent-pay-segment .hero-rental-segment__btn:not(.is-active) .hero-rental-segment__price {
    opacity: 1;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.96);
}

.rent-pay-hub-form .rent-pay-segment .hero-rental-segment__btn:not(.is-active):hover {
    background: rgba(255, 255, 255, 0.24);
    border-color: rgba(129, 212, 250, 0.68);
    box-shadow: 0 0 0 2px rgba(129, 212, 250, 0.45);
}

.rent-pay-hub-form .rent-pay-segment .hero-rental-segment__btn:not(.is-active):focus-visible {
    outline: 2px solid var(--water-light);
    outline-offset: 2px;
}

.rent-pay-hub-form .rent-pay-segment .hero-rental-segment__btn.is-active {
    opacity: 1;
    color: #fff;
    border-color: rgba(179, 235, 255, 0.95);
    background: rgba(79, 195, 247, 0.44);
    text-shadow: 0 1px 2px rgba(0, 40, 65, 0.42);
    box-shadow:
        0 0 0 2px rgba(79, 195, 247, 0.58),
        0 3px 14px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.rent-pay-hub-form .rent-pay-segment .hero-rental-segment__btn.is-active .hero-rental-segment__price {
    opacity: 1;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 40, 65, 0.38);
}

.rent-pay-hub-form .rent-pay-segment .hero-rental-segment__btn.is-active:hover {
    background: rgba(79, 195, 247, 0.47);
    border-color: #e3f7ff;
    box-shadow:
        0 0 0 2px rgba(79, 195, 247, 0.64),
        0 3px 14px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Дата и время визита (нативный календарь / колёсико времени) */
.rent-pay-visit {
    margin-top: 14px;
    margin-bottom: 4px;
}

.rent-pay-visit .rent-pay-scenario__title {
    margin-bottom: 8px;
}

.rent-pay-visit__row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 16px;
}

.rent-pay-visit__field {
    flex: 1 1 160px;
    min-width: 0;
    margin: 0;
}

.rent-pay-visit__field .room-tile-pay-label {
    margin-bottom: 6px;
}

.rent-pay-visit__input {
    min-height: 44px;
    display: block;
    width: 100%;
    max-width: 100%;
    color-scheme: light;
}

select.rent-pay-visit__input {
    cursor: pointer;
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 500;
    padding: 10px 12px;
    box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.96);
    color: var(--text-dark);
}

.rent-pay-visit__hint {
    margin: 10px 0 0;
    padding: 0;
    font-size: 0.8rem;
    line-height: 1.45;
    font-weight: 500;
    color: var(--glass-pay-muted);
}

@media (max-width: 600px) {
    .rent-pay-visit__row {
        flex-direction: column;
        align-items: stretch;
    }

    .rent-pay-visit__field {
        flex: 1 1 auto;
        width: 100%;
    }
}

.rent-pay-hours-field {
    position: relative;
    margin-top: 12px;
    /* Зазор под чипами (тень/is-active), чтобы не визуально наползать на блок «Подтвердите время» */
    margin-bottom: 18px;
}

.rent-pay-hours-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.rent-pay-hours-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.rent-pay-hours-chip {
    min-height: 44px;
    min-width: 3.25rem;
    padding: 8px 14px;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.9);
    background: var(--glass-pay-segment-bg);
    border: 1px solid var(--glass-pay-segment-border);
    border-radius: var(--glass-pay-segment-radius);
    cursor: pointer;
    transition:
        background var(--transition-fast),
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        color var(--transition-fast);
}

.rent-pay-hours-chip:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(129, 212, 250, 0.42);
}

.rent-pay-hours-chip:focus-visible {
    outline: 2px solid var(--water-light);
    outline-offset: 2px;
}

.rent-pay-hours-chip.is-active {
    border-color: var(--water-light);
    background: rgba(79, 195, 247, 0.22);
    box-shadow: 0 0 0 1px rgba(79, 195, 247, 0.28);
    color: #fff;
}

.rent-pay-hub-form .rent-pay-hours-chip:not(.is-active) {
    opacity: 1;
    color: rgba(255, 255, 255, 0.99);
    background: rgba(196, 232, 250, 0.11);
    border-color: rgba(255, 255, 255, 0.42);
}

.rent-pay-hub-form .rent-pay-hours-chip:not(.is-active):hover {
    background: rgba(255, 255, 255, 0.24);
    border-color: rgba(129, 212, 250, 0.68);
    box-shadow: 0 0 0 2px rgba(129, 212, 250, 0.45);
}

.rent-pay-hub-form .rent-pay-hours-chip.is-active {
    border-color: rgba(179, 235, 255, 0.95);
    background: rgba(79, 195, 247, 0.44);
    text-shadow: 0 1px 2px rgba(0, 40, 65, 0.42);
    box-shadow:
        0 0 0 2px rgba(79, 195, 247, 0.58),
        0 3px 14px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
    color: #fff;
}

.rent-pay-hub-form .rent-pay-hours-chip.is-active:hover {
    background: rgba(79, 195, 247, 0.47);
    border-color: #e3f7ff;
    box-shadow:
        0 0 0 2px rgba(79, 195, 247, 0.64),
        0 3px 14px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Сценарий оплаты: бронирование (1000 ₽) / полностью */
.rent-pay-scenario {
    margin-top: 12px;
}

.rent-pay-scenario__title {
    margin: 0 0 6px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--glass-pay-label);
}

.rent-pay-scenario__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.rent-pay-scenario__btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    min-height: 44px;
    margin: 0;
    padding: 8px 6px;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    color: rgba(255, 255, 255, 0.88);
    background: var(--glass-pay-segment-bg);
    border: 1px solid var(--glass-pay-segment-border);
    border-radius: var(--glass-pay-segment-radius);
    cursor: pointer;
    transition:
        background var(--transition-fast),
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        opacity var(--transition-fast);
}

.rent-pay-scenario__btn:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.35);
}

.rent-pay-scenario__btn:focus-visible {
    outline: 2px solid var(--water-light);
    outline-offset: 2px;
}

.rent-pay-scenario__btn:not(.is-active) {
    opacity: 0.72;
}

.rent-pay-scenario__btn--lead:not(.is-active) {
    opacity: 0.86;
}

.rent-pay-scenario__btn--lead {
    min-height: 44px;
    font-size: 0.8rem;
}

.rent-pay-scenario__btn.is-active {
    opacity: 1;
    border-color: var(--water-light);
    background: rgba(79, 195, 247, 0.28);
    box-shadow:
        0 0 0 2px rgba(79, 195, 247, 0.35),
        0 3px 10px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.rent-pay-scenario__btn--lead.is-active {
    font-weight: 700;
    color: #fff;
    background: rgba(79, 195, 247, 0.42);
    border-color: rgba(160, 228, 255, 0.95);
    box-shadow:
        0 0 0 2px rgba(79, 195, 247, 0.58),
        0 6px 18px rgba(0, 0, 0, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

/* Вторичный сценарий: полная оплата — ниже контраст, слабее акцент */
.rent-pay-scenario__btn--secondary {
    font-weight: 500;
    gap: 3px;
}

.rent-pay-scenario__btn--secondary .rent-pay-scenario__sub {
    display: block;
    max-width: 100%;
    margin: 0;
    padding: 0 2px;
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.64);
}

.rent-pay-scenario__btn--secondary:not(.is-active) .rent-pay-scenario__sub {
    color: rgba(255, 255, 255, 0.52);
}

.rent-pay-scenario__btn--secondary.is-active .rent-pay-scenario__sub {
    color: rgba(255, 255, 255, 0.68);
}

.rent-pay-scenario__btn--secondary:not(.is-active) {
    opacity: 0.55;
    color: rgba(255, 255, 255, 0.72);
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.14);
}

.rent-pay-scenario__btn--secondary:hover:not(.is-active) {
    opacity: 0.72;
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.22);
}

.rent-pay-scenario__btn--secondary.is-active {
    opacity: 0.88;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.38);
    background: rgba(255, 255, 255, 0.11);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.22),
        0 2px 8px rgba(0, 0, 0, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.rent-pay-scenario__main {
    color: #fff;
}

.rent-pay-scenario__amount {
    font-weight: 700;
    white-space: nowrap;
}

.rent-pay-after-pay {
    margin: 0 0 12px;
}

.rent-pay-after-pay-link {
    display: inline;
    margin: 0;
    padding: 0;
    font: inherit;
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--water-light);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    background: none;
    border: none;
    text-align: left;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}

.rent-pay-after-pay-link:hover,
.rent-pay-after-pay-link:focus-visible {
    color: #fff;
    outline: none;
}

.rent-pay-after-pay-link:focus-visible {
    box-shadow: 0 0 0 2px rgba(129, 212, 250, 0.55);
    border-radius: 4px;
}

.rent-pay-after-pay-panel {
    margin-top: 10px;
    padding: 12px 14px;
    border-radius: var(--glass-pay-segment-radius);
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.rent-pay-after-pay-text {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.78);
}

.rent-pay-prepay-wrap {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.rent-pay-prepay-wrap--footnote {
    margin-top: 14px;
    padding-top: 12px;
}

.rent-pay-prepay-note {
    margin: 0 0 12px;
    font-size: 0.84rem;
    line-height: 1.5;
    color: var(--glass-pay-muted);
}

.rent-pay-prepay-btn {
    width: 100%;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 10px 14px;
    line-height: 1.35;
    white-space: normal;
    color: rgba(255, 255, 255, 0.95);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: var(--glass-pay-btn-radius);
    box-shadow: none;
    text-shadow: none;
}

.rent-pay-prepay-btn:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(129, 212, 250, 0.5);
}

.rent-pay-prepay-btn:focus-visible {
    outline: 2px solid var(--water-light);
    outline-offset: 2px;
}

.rent-pay-hub-card .room-tile-pay-label {
    color: var(--glass-pay-label);
    font-size: 0.82rem;
    margin-bottom: 6px;
}

.rent-pay-hub-card .room-tile-pay-select {
    width: 100%;
    padding: 10px 12px;
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--text-dark);
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 10px;
    cursor: pointer;
    font-family: inherit;
    box-sizing: border-box;
}

.rent-pay-hub-card .room-tile-pay-select:hover {
    border-color: rgba(2, 136, 209, 0.45);
}

.rent-pay-hub-card .room-tile-pay-select:focus {
    outline: 2px solid var(--water-primary);
    outline-offset: 2px;
}

/* Консультация по телефону перед оплатой + поля контакта для эквайринга */
.rent-pay-consult-box {
    padding: 10px 12px;
    margin: 0 0 14px;
    border-radius: var(--glass-pay-segment-radius);
    background: rgba(125, 214, 255, 0.14);
    border: 1px solid rgba(165, 220, 255, 0.35);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset;
}

.rent-pay-consult-box__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.rent-pay-consult-box__title-desktop {
    display: inline;
}

.rent-pay-consult-box__title-mobile {
    display: none;
}

.rent-pay-consult-box__title {
    margin: 0;
    flex: 1 1 12rem;
    min-width: 0;
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--glass-pay-text);
    line-height: 1.3;
    text-align: left;
}

.rent-pay-consult-box__call {
    flex-shrink: 0;
    align-self: center;
}

.rent-pay-consult-box__call .btn-secondary {
    border-radius: var(--glass-pay-btn-radius);
    padding: 8px 16px;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.rent-pay-consult-box__text {
    margin: 12px 0 0;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--glass-pay-muted);
    text-align: left;
}

@media (max-width: 768px) {
    .rent-pay-consult-box__head {
        flex-wrap: nowrap;
        gap: 8px;
    }

    .rent-pay-consult-box__title-desktop {
        display: none;
    }

    .rent-pay-consult-box__title-mobile {
        display: inline;
    }

    .rent-pay-consult-box__title {
        flex: 1 1 auto;
        min-width: 0;
        font-size: 0.86rem;
    }

    .rent-pay-consult-box__call .btn-secondary {
        padding: 8px 14px;
        font-size: 0.82rem;
    }

    .rent-pay-consult-box--aux .rent-pay-consult-box__title {
        font-size: 0.8rem;
    }

    .rent-pay-consult-box--aux .rent-pay-consult-box__call .btn-secondary {
        padding: 6px 11px;
        font-size: 0.76rem;
    }
}

/* Блок звонка — компактная карточка, визуально второстепенная (опция, не шаг к оплате) */
.rent-pay-consult-box--aux {
    padding: 8px 10px;
    margin: 0 0 10px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.068);
    box-shadow: none;
}

.rent-pay-consult-box--aux .rent-pay-consult-box__title {
    font-weight: 500;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.6);
}

.rent-pay-consult-box--aux .rent-pay-consult-box__text {
    margin-top: 8px;
    font-size: 0.76rem;
    color: rgba(255, 255, 255, 0.47);
}

.room-tile-pay-field--optional .room-tile-pay-label {
    opacity: 0.78;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.72);
}

.rent-pay-payer-fields {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 14px 0 8px;
    width: 100%;
}

.rent-pay-payer-fields .room-tile-pay-field {
    margin: 0;
}

/* Компактнее: без резерва min-height под пустые подсказки, ритм label→поле 6–8px */
.rent-pay-payer-fields .room-tile-pay-label {
    margin-bottom: 7px;
}

.rent-pay-payer-fields .rent-pay-field-feedback {
    margin: 2px 0 0;
    min-height: 0;
}

.rent-pay-payer-fields + .rent-pay-scenario {
    margin-top: 8px;
}

.rent-pay-contact-step__input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--text-dark);
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 10px;
    font-family: inherit;
}

/* Телефон: один блок — флаг, список стран, префикс +код, цифры. overflow:visible — иначе список обрезается. */
.rent-pay-phone-combo {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100%;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 10px;
    overflow: visible;
    min-height: calc(1.35em + 22px);
}

.rent-pay-phone-combo:focus-within {
    outline: 2px solid var(--water-primary);
    outline-offset: 2px;
    border-color: rgba(2, 136, 209, 0.45);
}

.rent-pay-phone-prefix {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding: 4px 4px 4px 8px;
    background: transparent;
}

.rent-pay-country-slot {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.rent-pay-country-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 6px 8px;
    border: none;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    font: inherit;
    color: inherit;
    line-height: 0;
}

.rent-pay-country-trigger:hover {
    background: rgba(0, 0, 0, 0.04);
}

.rent-pay-country-trigger:focus {
    outline: none;
}

.rent-pay-country-trigger:focus-visible {
    outline: 2px solid var(--water-primary);
    outline-offset: 2px;
}

.rent-pay-country-trigger__chev {
    display: block;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #424242;
    flex-shrink: 0;
    transition: transform 0.15s ease;
}

.rent-pay-country-trigger[aria-expanded='true'] .rent-pay-country-trigger__chev {
    transform: rotate(180deg);
}

.rent-pay-country-listbox {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 200;
    min-width: min(280px, calc(100vw - 32px));
    max-height: min(50vh, 320px);
    margin: 0;
    padding: 4px 0;
    list-style: none;
    overflow-y: auto;
    background: rgba(255, 255, 255, 0.99);
    border: 1px solid rgba(0, 0, 0, 0.14);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.rent-pay-country-option {
    padding: 9px 14px;
    cursor: pointer;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text-dark);
    line-height: 1.35;
}

.rent-pay-country-option:hover,
.rent-pay-country-option[aria-selected='true'] {
    background: rgba(2, 136, 209, 0.12);
}

.rent-pay-phone-flag-img {
    display: block;
    width: 20px;
    height: 15px;
    object-fit: cover;
    flex-shrink: 0;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.rent-pay-phone-national-wrap {
    display: flex;
    flex: 1 1 120px;
    align-items: stretch;
    min-width: 0;
}

/* Как у input: те же метрики; stretch + flex по центру — одна вертикаль с цифрами (не center между разными высотами блоков) */
.rent-pay-phone-dial-prefix {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 8px 0 4px;
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 500;
    line-height: 1.35;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    color: var(--text-dark);
    background: transparent;
    user-select: none;
}

.rent-pay-phone-combo--error {
    border-color: #c62828;
    box-shadow: 0 0 0 1px rgba(198, 40, 40, 0.32);
}

.rent-pay-phone-national-wrap .rent-pay-contact-step__input {
    flex: 1 1 80px;
    align-self: stretch;
    min-width: 0;
    min-height: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    line-height: 1.35;
}

.rent-pay-phone-national-wrap .rent-pay-contact-step__input:focus {
    outline: none;
}

.rent-pay-phone-combo:focus-within:has(.rent-pay-contact-step__input--ok) {
    outline-color: rgba(46, 125, 50, 0.65);
    border-color: rgba(27, 94, 32, 0.55);
}

.rent-pay-phone-combo:has(.rent-pay-contact-step__input--ok) {
    background: rgba(245, 255, 246, 0.98);
}

.rent-pay-phone-combo:has(.rent-pay-contact-step__input--ok) .rent-pay-phone-prefix {
    background: transparent;
}

.rent-pay-phone-combo:focus-within:has(.rent-pay-contact-step__input--error),
.rent-pay-phone-combo:focus-within:has(.rent-pay-contact-step__input[aria-invalid='true']) {
    outline: 2px solid rgba(198, 40, 40, 0.75);
    outline-offset: 2px;
    border-color: #b71c1c;
}

.rent-pay-phone-combo:focus-within:has(.rent-pay-contact-step__input--warning) {
    border-color: rgba(255, 183, 77, 0.75);
}

.rent-pay-contact-step__input--phone-mask {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

.rent-pay-contact-step__input::placeholder {
    color: rgba(0, 0, 0, 0.38);
}

.rent-pay-contact-step__input:focus {
    outline: 2px solid var(--water-primary);
    outline-offset: 2px;
    border-color: rgba(2, 136, 209, 0.45);
}

.rent-pay-contact-step__input--ok {
    border-color: rgba(46, 125, 50, 0.55);
    background: rgba(245, 255, 246, 0.98);
}

.rent-pay-contact-step__input--ok:focus {
    outline-color: rgba(46, 125, 50, 0.65);
    border-color: rgba(27, 94, 32, 0.55);
}

.rent-pay-contact-step__input--error,
.rent-pay-contact-step__input[aria-invalid='true'] {
    border-color: #c62828;
    background: rgba(255, 236, 236, 0.97);
    box-shadow: 0 0 0 1px rgba(198, 40, 40, 0.32);
}

.rent-pay-contact-step__input--error:focus,
.rent-pay-contact-step__input[aria-invalid='true']:focus {
    outline: 2px solid rgba(198, 40, 40, 0.75);
    outline-offset: 2px;
    border-color: #b71c1c;
}

.rent-pay-contact-step__input--warning {
    border-color: rgba(255, 183, 77, 0.58);
    background: rgba(255, 252, 244, 0.98);
    box-shadow: 0 0 0 1px rgba(255, 160, 60, 0.22);
}

.rent-pay-contact-step__input--warning:focus {
    outline: 2px solid rgba(255, 160, 60, 0.45);
    outline-offset: 2px;
    border-color: rgba(255, 152, 0, 0.55);
}

.rent-pay-field-feedback {
    margin: 6px 0 0;
    padding: 0;
    font-size: 0.76rem;
    line-height: 1.45;
    min-height: 1.45em;
    transition: color 0.15s ease;
}

.rent-pay-field-feedback--help {
    color: rgba(255, 255, 255, 0.68);
    font-weight: 400;
}

.rent-pay-field-feedback--warning {
    color: rgba(255, 220, 168, 0.96);
    font-weight: 500;
}

.rent-pay-field-feedback--error {
    color: #ffcdd2;
    font-weight: 600;
}

.rent-pay-field-feedback--ok {
    color: rgba(200, 230, 201, 0.95);
    font-weight: 500;
}

.rent-pay-submit-avans-note {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.78);
    text-align: center;
}

.rent-pay-selection-summary {
    margin: 10px 0 10px;
    padding: 0;
    font-size: 0.8rem;
    line-height: 1.4;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.9);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rent-pay-submit-phone-hint.rent-pay-field-feedback {
    margin: 0 0 8px;
    min-height: 0;
    text-align: center;
}

.rent-pay-submit-mask {
    position: relative;
    display: block;
    width: 100%;
    border-radius: var(--glass-pay-btn-radius);
}

.rent-pay-submit-mask .rent-pay-submit-btn {
    position: relative;
    z-index: 1;
}

.rent-pay-submit-mask--blocked::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: inherit;
    cursor: not-allowed;
    background: transparent;
    pointer-events: auto;
}

.rent-pay-submit-mask--blocked .rent-pay-submit-btn {
    z-index: 0;
}

.rent-pay-hub-card .rent-pay-submit-cluster {
    margin-top: 14px;
}

.rent-pay-submit-cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 12px;
    margin-bottom: 10px;
}

.rent-pay-legal {
    margin: 0 0 12px;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--glass-pay-muted);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    max-width: 100%;
}

.rent-pay-legal__lead {
    display: block;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.84);
    line-height: 1.35;
}

.rent-pay-legal__docs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
}

.rent-pay-legal__sep {
    color: rgba(255, 255, 255, 0.38);
    font-weight: 300;
    user-select: none;
    line-height: 1;
}

.rent-pay-legal__doc {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: var(--glass-pay-segment-radius);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #e8f7fe;
    text-decoration: none;
    background: rgba(79, 195, 247, 0.12);
    border: 1px solid rgba(165, 220, 255, 0.42);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset;
    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease;
}

.rent-pay-legal__doc:hover {
    background: rgba(79, 195, 247, 0.22);
    border-color: rgba(165, 220, 255, 0.62);
    color: #fff;
}

.rent-pay-legal__doc:focus-visible {
    outline: 2px solid var(--water-light);
    outline-offset: 2px;
}

.rent-pay-legal--prepay {
    margin-top: 12px;
    margin-bottom: 0;
}

.rent-pay-submit-cluster .rent-pay-submit-stack {
    flex: 1 1 220px;
    width: auto;
    min-width: min(100%, 200px);
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

.rent-pay-submit-stack .room-tile-pay-btn {
    width: 100%;
    flex: none;
    padding: 12px 18px;
    font-size: 0.95rem;
}

/* Подпись на всю ширину кнопки, по центру */
.rent-pay-submit-btn {
    width: 100%;
    justify-content: center;
    text-align: center;
    font-weight: 800;
    font-size: 1.02rem;
    letter-spacing: 0.05em;
    line-height: 1.25;
    text-shadow: 0 1px 3px rgba(0, 40, 70, 0.45);
    white-space: normal;
}

/* Блок «Безопасная оплата»: колонка — заголовок → ряд логотипов → подпись (тёмная карточка) */
.rent-pay-submit-paymarks {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 14px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 14px 0 0;
    padding: 18px 20px;
    box-sizing: border-box;
    border-radius: 10px;
    background: #3c414a;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    pointer-events: none;
    cursor: default;
    text-align: left;
}

.rent-pay-submit-paymarks__lead {
    margin: 0;
    padding: 0;
    width: 100%;
    font-size: 0.95rem;
    line-height: 1.3;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.96);
    letter-spacing: 0.02em;
}

.rent-pay-submit-paymarks__logos {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    min-width: 0;
}

.rent-pay-submit-paymarks__logo {
    width: auto;
    height: 26px;
    margin: 0;
    padding: 0;
    object-fit: contain;
    flex-shrink: 0;
    display: block;
    opacity: 1;
    pointer-events: none;
}

/* СБП — широкая марка; ограничиваем высоту, ширину даёт aspect ratio */
.rent-pay-submit-paymarks__logo--sbp {
    height: 24px;
    max-width: 100%;
}

.rent-pay-submit-paymarks__note {
    margin: 0;
    padding: 0;
    width: 100%;
    font-size: 0.78rem;
    line-height: 1.45;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.82);
    text-align: left;
}

@media (max-width: 600px) {
    .rent-pay-submit-paymarks {
        padding: 16px 18px;
        gap: 12px;
    }

    .rent-pay-submit-paymarks__lead {
        font-size: 0.9rem;
    }

    .rent-pay-submit-paymarks__logos {
        gap: 8px;
        flex-wrap: wrap;
    }

    .rent-pay-submit-paymarks__logo {
        height: 22px;
    }

    .rent-pay-submit-paymarks__logo--sbp {
        height: 20px;
    }
}

@media (max-width: 360px) {
    .rent-pay-submit-paymarks__logo {
        height: 18px;
    }

    .rent-pay-submit-paymarks__logo--sbp {
        height: 16px;
    }
}

.rent-pay-prepay-links {
    margin: 10px 0 0;
    padding: 0;
    text-align: center;
    font-size: 0.72rem;
    line-height: 1.45;
    font-weight: 500;
    color: var(--glass-pay-muted);
}

.rent-pay-prepay-links__lead {
    display: block;
    margin-bottom: 5px;
}

.rent-pay-prepay-links__docs {
    display: block;
}

.rent-pay-prepay-links__link {
    color: var(--water-light);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.rent-pay-prepay-links__link:hover {
    color: #fff;
}

.rent-pay-prepay-links__link:focus-visible {
    outline: 2px solid var(--water-light);
    outline-offset: 2px;
    border-radius: 2px;
}

.rent-pay-prepay-links__sep {
    color: rgba(255, 255, 255, 0.4);
    user-select: none;
}

.rent-pay-prepay-links--legal {
    margin: 8px 0 0;
    font-size: 0.66rem;
    line-height: 1.4;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.42);
    text-align: center;
}

.rent-pay-prepay-links--legal .rent-pay-prepay-links__lead {
    display: inline;
    margin-bottom: 0;
}

.rent-pay-prepay-links--legal .rent-pay-prepay-links__docs {
    display: inline;
}

.rent-pay-prepay-links--legal .rent-pay-prepay-links__link {
    color: rgba(129, 212, 250, 0.72);
    font-weight: 500;
}

.rent-pay-prepay-links--legal .rent-pay-prepay-links__link:hover {
    color: rgba(179, 229, 252, 0.95);
}

.rent-pay-prepay-links--legal .rent-pay-prepay-links__sep {
    color: rgba(255, 255, 255, 0.32);
}

.rent-pay-submit-context {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.45;
    font-weight: 500;
    color: var(--glass-pay-muted);
}

.rent-pay-hub-form .room-tile-pay-btn {
    padding: 12px 18px;
    font-size: 0.95rem;
}

.rent-pay-hub-form .room-tile-pay-btn.rent-pay-submit-btn {
    padding: 14px 20px;
}

.rent-pay-hub-form .rent-pay-submit-btn:disabled {
    opacity: 0.52;
    cursor: not-allowed;
    transform: none;
    box-shadow: 0 2px 12px rgba(0, 35, 55, 0.28);
    filter: saturate(0.62);
}

.rent-pay-hub-form .rent-pay-submit-btn:disabled:hover,
.rent-pay-hub-form .rent-pay-submit-btn:disabled:focus-visible,
.rent-pay-hub-form .rent-pay-submit-btn:disabled:active {
    transform: none;
    filter: saturate(0.62);
    box-shadow: 0 2px 12px rgba(0, 35, 55, 0.28);
}

@media (max-width: 800px) {
    .rent-pay-hub-layout {
        grid-template-columns: 1fr;
    }

    .rent-pay-submit-cluster {
        flex-direction: column;
        align-items: stretch;
    }

    .rent-pay-submit-cluster .rent-pay-submit-stack {
        flex: none;
        width: 100%;
    }

    .rent-pay-scenario__grid {
        grid-template-columns: 1fr;
    }
}

/* Хаб #rent-pay: без глобальных 100px/60px у .section-header (иначе огромный зазор на десктопе) */
.section-header.rent-pay-section-header {
    padding: 0 0 20px;
    background: transparent;
}

/* Оплата внутри стеклянной карточки хаба */
.rent-pay-hub-form .btn-pay {
    border-radius: var(--glass-pay-btn-radius);
}

@media (max-width: 768px) {
    .section-header.rent-pay-section-header {
        padding: 0 0 20px;
        background: transparent;
    }
}