/*
 * Основной экран поездок.
 *
 * Темы:
 *
 * - Premium Green;
 * - Map Marker.
 */


/* =========================================================
   Переменные
   ========================================================= */

:root {
    --trips-max-width: 1180px;
    --trips-gap: 18px;

    --trips-green:
        var(--brand-green);

    --trips-green-soft:
        var(--brand-pale-green);

    --trips-pink:
        var(--brand-pink);

    --trips-gray:
        var(--brand-gray);

    --route-from-color:
        var(--route-from);

    --route-to-color:
        var(--route-to);

    --trips-surface:
        color-mix(
            in srgb,
            var(--surface) 82%,
            var(--trips-gray)
        );

    --trips-raised:
        color-mix(
            in srgb,
            var(--surface-raised) 86%,
            var(--trips-gray)
        );

    --trips-hover:
        color-mix(
            in srgb,
            var(--surface-hover) 84%,
            var(--trips-gray)
        );

    --trips-border:
        color-mix(
            in srgb,
            var(--border) 91%,
            var(--trips-gray)
        );

    --trips-accent-border:
        color-mix(
            in srgb,
            var(--trips-green) 17%,
            var(--trips-border)
        );

    --trips-shadow:
        0 24px 64px
        rgba(
            0,
            0,
            0,
            0.30
        );

    --trips-shadow-soft:
        0 14px 34px
        rgba(
            0,
            0,
            0,
            0.20
        );
}


html.light-theme {
    --trips-surface:
        color-mix(
            in srgb,
            var(--surface) 90%,
            var(--trips-gray)
        );

    --trips-raised:
        color-mix(
            in srgb,
            var(--surface-raised) 92%,
            var(--trips-gray)
        );

    --trips-hover:
        color-mix(
            in srgb,
            var(--surface-hover) 88%,
            var(--trips-gray)
        );

    --trips-shadow:
        0 22px 54px
        rgba(
            51,
            55,
            58,
            0.13
        );

    --trips-shadow-soft:
        0 12px 30px
        rgba(
            51,
            55,
            58,
            0.10
        );
}


/* =========================================================
   Общая компоновка
   ========================================================= */

.trips-page {
    display: flex;

    width:
        min(
            calc(
                100%
                - 24px
            ),
            var(--trips-max-width)
        );

    min-width: 0;

    flex-direction: column;

    gap: var(--trips-gap);

    margin:
        22px
        auto
        44px;

    box-sizing: border-box;
}


.trips-page [hidden] {
    display: none !important;
}


#step1,
#step2 {
    scroll-margin-top: 78px;
}


#step1:not([hidden]),
#step2:not([hidden]) {
    display: flex;
}


#trips-main-content:not([hidden]) {
    display: grid;
}


#step1,
#step2,
#trips-main-content {
    width: 100%;
    min-width: 0;

    box-sizing: border-box;
}


/* =========================================================
   Шапка страницы
   ========================================================= */

.trips-header-heading {
    min-width: 0;

    text-align: center;
}


.trips-header-heading
.page-header-eyebrow {
    color:
        color-mix(
            in srgb,
            var(--trips-green) 70%,
            var(--muted)
        );
}


/* =========================================================
   Hero
   ========================================================= */

.trips-hero {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(
            0,
            1.12fr
        )
        minmax(
            330px,
            0.88fr
        );

    min-width: 0;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            var(--trips-raised),
            var(--trips-surface)
        );

    border:
        1px solid
        var(--trips-accent-border);

    border-radius:
        calc(
            var(--radius)
            + 7px
        );

    box-shadow:
        var(--trips-shadow);
}


.trips-hero::before {
    position: absolute;

    z-index: 3;

    top: 0;
    right: 0;
    left: 0;

    height: 3px;

    background:
        linear-gradient(
            90deg,
            var(--route-from-color),
            color-mix(
                in srgb,
                var(--trips-green-soft) 46%,
                var(--trips-gray)
            ),
            var(--route-to-color)
        );

    content: "";
}


.trips-hero__copy {
    position: relative;

    z-index: 2;

    display: flex;

    min-width: 0;

    flex-direction: column;

    align-items: flex-start;
    justify-content: center;

    padding:
        clamp(
            29px,
            5vw,
            54px
        );

    box-sizing: border-box;
}


.trips-hero__eyebrow,
.trip-step-card__eyebrow,
.trip-section-heading__eyebrow,
.map-modal-heading__eyebrow {
    color:
        color-mix(
            in srgb,
            var(--trips-green-soft) 54%,
            var(--muted)
        );

    font-size: 0.7rem;
    font-weight: 850;
    letter-spacing: 0.11em;
    line-height: 1.3;

    text-transform: uppercase;
}


.trips-hero__eyebrow {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 13px;
}


.trips-hero__eyebrow > span {
    color: var(--trips-green);

    font-size: 0.6rem;
}


.trips-hero__copy h2 {
    max-width: 700px;

    margin: 0;

    color: var(--text);

    font-size:
        clamp(
            2rem,
            5.7vw,
            3.85rem
        );

    font-weight: 840;
    letter-spacing: -0.045em;
    line-height: 0.99;

    text-wrap: balance;
}


.trips-hero__copy > p {
    max-width: 640px;

    margin:
        18px
        0
        0;

    color: var(--muted);

    font-size: 0.94rem;
    line-height: 1.62;

    overflow-wrap: anywhere;
}


.trips-hero__actions {
    display: flex;

    flex-wrap: wrap;

    gap: 9px;

    margin-top: 26px;
}


.trips-hero__actions .btn {
    min-height: 49px;
}


.trips-hero__stats {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(
                0,
                1fr
            )
        );

    gap: 8px;

    width: 100%;

    margin:
        25px
        0
        0;
}


.trips-hero__stats > div {
    min-width: 0;

    padding:
        10px
        11px;

    background:
        color-mix(
            in srgb,
            var(--trips-hover) 91%,
            var(--trips-gray)
        );

    border:
        1px solid
        var(--trips-border);

    border-radius: 13px;
}


.trips-hero__stats dt,
.trips-hero__stats dd {
    margin: 0;
}


.trips-hero__stats dt {
    color: var(--muted);

    font-size: 0.62rem;
    font-weight: 650;
    line-height: 1.35;
}


.trips-hero__stats dd {
    margin-top: 4px;

    color: var(--text);

    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1.25;
}


/* =========================================================
   Декоративная карта
   ========================================================= */

.trips-hero__map {
    position: relative;

    min-width: 0;
    min-height: 390px;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            color-mix(
                in srgb,
                var(--trips-green) 3%,
                transparent
            ),
            transparent
        ),
        var(--trips-hover);

    border-left:
        1px solid
        var(--trips-border);
}


.trips-hero__map-grid,
.trips-route-preview__grid {
    position: absolute;

    inset: 0;

    opacity: 0.42;

    background-image:
        linear-gradient(
            color-mix(
                in srgb,
                var(--trips-gray) 20%,
                transparent
            )
            1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            color-mix(
                in srgb,
                var(--trips-gray) 20%,
                transparent
            )
            1px,
            transparent 1px
        );

    background-size:
        34px
        34px;
}


.trips-hero__route-line,
.trips-route-preview__line {
    position: absolute;

    height: 16px;

    background:
        color-mix(
            in srgb,
            var(--trips-gray) 27%,
            var(--trips-raised)
        );

    border:
        1px solid
        var(--trips-border);

    border-radius: 999px;

    transform:
        rotate(-15deg);
}


.trips-hero__route-line {
    top: 43%;
    left: -7%;

    width: 114%;
}


.trips-hero__route-line::after,
.trips-route-preview__line::after {
    position: absolute;

    top: 50%;
    left: 5%;

    width: 90%;

    border-top:
        2px dashed
        color-mix(
            in srgb,
            var(--trips-green) 65%,
            var(--trips-gray)
        );

    content: "";

    transform:
        translateY(-50%);
}


.trips-hero__point,
.trips-route-preview__point {
    position: absolute;

    z-index: 2;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    color: var(--brand-white);

    border:
        5px solid
        var(--trips-raised);

    box-shadow:
        0 14px 28px
        rgba(
            0,
            0,
            0,
            0.22
        );

    font-size: 0.74rem;
    font-weight: 900;
    line-height: 1;
}


.trips-hero__point {
    width: 49px;
    height: 49px;

    border-radius: 16px;
}


.trips-hero__point--from {
    top: 55%;
    left: 14%;

    background:
        color-mix(
            in srgb,
            var(--route-from-color) 72%,
            var(--trips-gray)
        );
}


.trips-hero__point--to {
    top: 15%;
    right: 12%;

    background:
        color-mix(
            in srgb,
            var(--route-to-color) 78%,
            var(--trips-gray)
        );
}


.trips-hero__map-card {
    position: absolute;

    right: 16px;
    bottom: 16px;
    left: 16px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 14px;

    padding:
        14px
        16px;

    background:
        color-mix(
            in srgb,
            var(--trips-raised) 92%,
            transparent
        );

    border:
        1px solid
        var(--trips-border);

    border-radius: 16px;

    box-shadow:
        var(--trips-shadow-soft);

    backdrop-filter:
        blur(16px);

    -webkit-backdrop-filter:
        blur(16px);
}


.trips-hero__map-card span {
    min-width: 0;

    color: var(--muted);

    font-size: 0.7rem;
    line-height: 1.4;
}


.trips-hero__map-card strong {
    flex:
        0
        0
        auto;

    color:
        color-mix(
            in srgb,
            var(--trips-green-soft) 62%,
            var(--text)
        );

    font-size: 1.15rem;
    line-height: 1;
}


/* =========================================================
   Карточки этапов
   ========================================================= */

.trip-step-card,
.trip-create-card,
.trip-search-card,
.trips-route-preview {
    position: relative;

    min-width: 0;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            var(--trips-raised),
            var(--trips-surface)
        );

    border:
        1px solid
        var(--trips-border);

    border-radius:
        calc(
            var(--radius)
            + 2px
        );

    box-shadow:
        var(--trips-shadow-soft);
}


.trip-step-card {
    flex-direction: column;

    gap: 22px;

    padding: 25px;
}


.trip-step-card::before,
.trip-create-card::before,
.trip-search-card::before {
    position: absolute;

    z-index: 1;

    top: 0;
    right: 0;
    left: 0;

    height: 3px;

    background:
        linear-gradient(
            90deg,
            color-mix(
                in srgb,
                var(--trips-green) 70%,
                var(--trips-gray)
            ),
            color-mix(
                in srgb,
                var(--trips-gray) 72%,
                transparent
            ),
            color-mix(
                in srgb,
                var(--trips-pink) 66%,
                var(--trips-gray)
            )
        );

    content: "";

    pointer-events: none;
}


.trip-step-card__header {
    display: grid;

    grid-template-columns:
        auto
        minmax(
            0,
            1fr
        );

    align-items: start;

    gap: 14px;

    min-width: 0;
}


.trip-step-card__number {
    display: inline-flex;

    width: 50px;
    height: 50px;

    flex:
        0
        0
        50px;

    align-items: center;
    justify-content: center;

    color:
        color-mix(
            in srgb,
            var(--trips-green-soft) 58%,
            var(--trips-gray)
        );

    background:
        var(--trips-hover);

    border:
        1px solid
        var(--trips-border);

    border-radius: 15px;

    font-size: 0.75rem;
    font-weight: 900;
    line-height: 1;
}


.trip-step-card__heading {
    min-width: 0;
}


.trip-step-card__heading h2,
.trip-section-heading h2,
.trips-results__heading h2,
.trips-route-preview__heading h2,
.map-modal-heading h3 {
    margin: 0;

    color: var(--text);

    line-height: 1.3;

    overflow-wrap: anywhere;
}


.trip-step-card__heading h2 {
    margin-top: 4px;

    font-size:
        clamp(
            1.18rem,
            4vw,
            1.52rem
        );
}


.trip-step-card__heading p,
.trip-section-heading__text p,
.trips-results__heading p,
.trips-route-preview > p {
    margin:
        6px
        0
        0;

    color: var(--muted);

    font-size: 0.8rem;
    line-height: 1.5;

    overflow-wrap: anywhere;
}


/* =========================================================
   Выбор количества
   ========================================================= */

.seat-buttons {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(
                0,
                1fr
            )
        );

    gap: 10px;

    min-width: 0;
}


.btn-seat {
    display: flex;

    min-width: 0;
    min-height: 112px;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 5px;

    padding:
        14px
        10px;

    color: var(--text);

    background:
        var(--trips-hover);

    border:
        1px solid
        var(--trips-border);

    border-radius: 16px;

    box-shadow: none;

    cursor: pointer;

    -webkit-tap-highlight-color:
        transparent;

    transition:
        color 0.16s ease,
        background-color 0.16s ease,
        border-color 0.16s ease,
        transform 0.14s ease,
        box-shadow 0.16s ease;
}


.btn-seat:hover {
    color: var(--text);

    background:
        color-mix(
            in srgb,
            var(--trips-green) 5%,
            var(--trips-hover)
        );

    border-color:
        var(--trips-accent-border);

    transform:
        translateY(-2px);
}


.btn-seat:active {
    transform:
        scale(0.98);
}


.btn-seat.is-selected,
.btn-seat[aria-pressed="true"] {
    color: var(--brand-white);

    background:
        linear-gradient(
            145deg,
            color-mix(
                in srgb,
                var(--trips-green) 72%,
                var(--trips-gray)
            ),
            color-mix(
                in srgb,
                var(--trips-green) 58%,
                var(--brand-dark-green)
            )
        );

    border-color:
        transparent;

    box-shadow:
        0 14px 30px
        rgba(
            18,
            159,
            78,
            0.18
        );
}


.btn-seat:focus-visible {
    outline:
        3px solid
        color-mix(
            in srgb,
            var(--trips-green) 46%,
            transparent
        );

    outline-offset: 3px;
}


.btn-seat__icon {
    min-height: 17px;

    color:
        color-mix(
            in srgb,
            var(--trips-green-soft) 52%,
            var(--trips-gray)
        );

    font-size: 0.68rem;
    letter-spacing: -0.18em;
    line-height: 1;
}


.btn-seat.is-selected
.btn-seat__icon,
.btn-seat[aria-pressed="true"]
.btn-seat__icon {
    color:
        rgba(
            255,
            255,
            255,
            0.78
        );
}


.btn-seat__number {
    font-size: 1.65rem;
    font-weight: 900;
    line-height: 1;
}


.btn-seat__caption {
    color: var(--muted);

    font-size: 0.7rem;
    font-weight: 650;
    line-height: 1.3;
}


.btn-seat.is-selected
.btn-seat__caption,
.btn-seat[aria-pressed="true"]
.btn-seat__caption {
    color:
        rgba(
            255,
            255,
            255,
            0.78
        );
}


/* =========================================================
   Основная сетка
   ========================================================= */

.trips-main-content {
    grid-template-columns:
        minmax(
            0,
            1.28fr
        )
        minmax(
            310px,
            0.72fr
        );

    align-items: start;

    gap: var(--trips-gap);

    min-width: 0;
}


.trip-create-card,
.trip-search-card,
.trips-route-preview {
    padding: 22px;

    box-sizing: border-box;
}


.trip-create-card {
    grid-column: 1;

    grid-row:
        1
        /
        span 2;
}


.trips-search-column {
    display: flex;

    grid-column: 2;
    grid-row: 1;

    min-width: 0;

    flex-direction: column;

    gap: var(--trips-gap);
}


.trips-results {
    display: flex;

    grid-column:
        1
        /
        -1;

    min-width: 0;

    flex-direction: column;

    gap: 13px;

    padding-top: 5px;
}


/* =========================================================
   Заголовки секций
   ========================================================= */

.trip-section-heading {
    display: flex;

    min-width: 0;

    align-items: flex-start;
    justify-content: space-between;

    gap: 14px;

    margin-bottom: 18px;
}


.trip-section-heading__text {
    min-width: 0;
}


.trip-section-heading h2 {
    margin-top: 4px;

    font-size:
        clamp(
            1.18rem,
            4vw,
            1.48rem
        );
}


.trip-section-heading__icon,
.map-modal-heading__icon {
    display: inline-flex;

    flex:
        0
        0
        auto;

    align-items: center;
    justify-content: center;

    color:
        color-mix(
            in srgb,
            var(--trips-green-soft) 52%,
            var(--trips-gray)
        );

    background:
        var(--trips-hover);

    border:
        1px solid
        var(--trips-border);

    box-shadow:
        var(--trips-shadow-soft);
}


.trip-section-heading__icon {
    width: 46px;
    height: 46px;

    border-radius: 14px;

    font-size: 1.1rem;
}


/* =========================================================
   Сводка мест
   ========================================================= */

.trip-seats-summary {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(
                0,
                1fr
            )
        );

    gap: 8px;

    margin-bottom: 18px;
}


.trip-seats-summary__item {
    display: flex;

    min-width: 0;
    min-height: 70px;

    flex-direction: column;

    align-items: flex-start;
    justify-content: space-between;

    gap: 8px;

    padding: 11px;

    background:
        var(--trips-hover);

    border:
        1px solid
        var(--trips-border);

    border-radius: 13px;
}


.trip-seats-summary__label {
    color: var(--muted);

    font-size: 0.67rem;
    line-height: 1.35;
}


.trip-seats-summary__value {
    color: var(--text);

    font-size: 1.02rem;
    font-weight: 850;
    line-height: 1.15;

    font-variant-numeric:
        tabular-nums;
}


/* =========================================================
   Форма
   ========================================================= */

#trip-form {
    display: flex;

    flex-direction: column;

    gap: 17px;

    margin-top: 0;
}


#trip-form .form-group,
.trip-search-controls .form-group {
    min-width: 0;

    margin: 0;
}


.trips-page .form-group label {
    display: inline-block;

    margin-bottom: 8px;

    color: var(--text);

    font-size: 0.82rem;
    font-weight: 750;
    line-height: 1.35;
}


.trip-route-fields {
    position: relative;

    display: grid;

    gap: 13px;
}


.trip-route-field {
    position: relative;

    z-index: 1;
}


.trip-route-line {
    position: absolute;

    z-index: 0;

    top: 66px;
    bottom: 66px;
    left: 20px;

    width: 2px;

    background:
        linear-gradient(
            var(--route-from-color),
            color-mix(
                in srgb,
                var(--route-to-color) 72%,
                var(--trips-gray)
            )
        );

    opacity: 0.58;

    pointer-events: none;
}


.address-row {
    display: grid;

    grid-template-columns:
        minmax(
            0,
            1fr
        )
        auto;

    align-items: stretch;

    gap: 9px;

    min-width: 0;
}


.trip-address-input {
    position: relative;

    min-width: 0;
}


.trip-address-input__marker {
    position: absolute;

    z-index: 2;

    top: 50%;
    left: 10px;

    display: inline-flex;

    width: 28px;
    height: 28px;

    align-items: center;
    justify-content: center;

    color: var(--brand-white);

    border:
        3px solid
        var(--trips-raised);

    border-radius: 10px;

    box-shadow:
        0 5px 12px
        rgba(
            0,
            0,
            0,
            0.18
        );

    font-size: 0.64rem;
    font-weight: 900;
    line-height: 1;

    transform:
        translateY(-50%);

    pointer-events: none;
}


.trip-address-input__marker--from {
    background:
        color-mix(
            in srgb,
            var(--route-from-color) 72%,
            var(--trips-gray)
        );
}


.trip-address-input__marker--to {
    background:
        color-mix(
            in srgb,
            var(--route-to-color) 78%,
            var(--trips-gray)
        );
}


.trips-page input,
.trips-page select,
.trips-page textarea {
    color: var(--text);

    background:
        var(--trips-hover);

    border-color:
        var(--trips-border);
}


.trips-page input:hover,
.trips-page select:hover,
.trips-page textarea:hover {
    border-color:
        color-mix(
            in srgb,
            var(--trips-gray) 60%,
            var(--trips-border)
        );
}


.trips-page input:focus-visible,
.trips-page select:focus-visible,
.trips-page textarea:focus-visible {
    border-color:
        var(--trips-green);

    box-shadow:
        0 0 0 3px
        color-mix(
            in srgb,
            var(--trips-green) 20%,
            transparent
        );
}


.trips-page input.is-invalid,
.trips-page select.is-invalid,
.trips-page textarea.is-invalid,
.trips-page [aria-invalid="true"] {
    border-color:
        var(--danger);

    box-shadow:
        0 0 0 3px
        color-mix(
            in srgb,
            var(--danger) 18%,
            transparent
        );
}


.trips-page .trip-address-input input {
    width: 100%;
    min-width: 0;
    min-height: 50px;

    padding-left: 48px;

    box-sizing: border-box;
}


.trips-page
.trip-address-input
input[readonly] {
    cursor: default;
}


.trips-page
.trip-address-input
input::placeholder,
.trips-page textarea::placeholder {
    color:
        color-mix(
            in srgb,
            var(--muted) 82%,
            transparent
        );
}


.trip-map-button {
    min-width: 156px;
    min-height: 50px;

    gap: 7px;

    white-space: nowrap;
}


.trip-map-button > span {
    display: inline-flex;

    width: 25px;
    height: 25px;

    align-items: center;
    justify-content: center;

    background:
        var(--trips-surface);

    border:
        1px solid
        var(--trips-border);

    border-radius: 8px;

    font-size: 0.8rem;
}


.trip-date-time-grid,
.trip-search-controls {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap: 12px;
}


.trips-page #date-input,
.trips-page #time-select,
.trips-page #sort-select {
    width: 100%;
    min-height: 50px;
}


.trips-page #trip-comment {
    width: 100%;
    min-height: 116px;

    resize: vertical;
}


.trip-field-hint {
    margin-top: 7px;

    color: var(--muted);

    font-size: 0.68rem;
    line-height: 1.45;
}


#publish-btn {
    width: 100%;
    min-height: 53px;

    gap: 8px;

    font-size: 0.94rem;
    font-weight: 820;
}


/* =========================================================
   Поиск
   ========================================================= */

.trip-search-controls {
    grid-template-columns:
        minmax(
            0,
            1fr
        );
}


.trip-control-heading {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 10px;

    margin-bottom: 5px;
}


.trip-control-heading label {
    margin-bottom:
        0
        !important;
}


.trip-radius-value {
    flex:
        0
        0
        auto;

    padding:
        5px
        9px;

    color:
        color-mix(
            in srgb,
            var(--trips-green-soft) 60%,
            var(--text)
        );

    background:
        var(--trips-hover);

    border:
        1px solid
        var(--trips-border);

    border-radius: 999px;

    font-size: 0.75rem;
    line-height: 1;
}


.trips-page #radius-slider {
    width: 100%;
    min-height: 38px;

    margin:
        3px
        0
        0;

    accent-color:
        var(--trips-green);

    cursor: pointer;
}


.trip-radius-scale {
    display: flex;

    justify-content: space-between;

    margin-top: -3px;

    color: var(--muted);

    font-size: 0.66rem;
}


/* =========================================================
   Предпросмотр
   ========================================================= */

.trips-route-preview {
    overflow: hidden;
}


.trips-route-preview__heading span {
    color:
        color-mix(
            in srgb,
            var(--trips-green-soft) 52%,
            var(--muted)
        );

    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1.3;

    text-transform: uppercase;
}


.trips-route-preview__heading h2 {
    margin-top: 4px;

    font-size: 1.02rem;
}


.trips-route-preview__map {
    position: relative;

    min-height: 190px;

    margin-top: 14px;

    overflow: hidden;

    background:
        var(--trips-hover);

    border:
        1px solid
        var(--trips-border);

    border-radius: 15px;
}


.trips-route-preview__line {
    top: 47%;
    left: -10%;

    width: 120%;
    height: 13px;
}


.trips-route-preview__point {
    width: 38px;
    height: 38px;

    border-width: 4px;
    border-radius: 13px;

    font-size: 0.66rem;
}


.trips-route-preview__point--from {
    top: 59%;
    left: 13%;

    background:
        color-mix(
            in srgb,
            var(--route-from-color) 72%,
            var(--trips-gray)
        );
}


.trips-route-preview__point--to {
    top: 15%;
    right: 12%;

    background:
        color-mix(
            in srgb,
            var(--route-to-color) 78%,
            var(--trips-gray)
        );
}


/* =========================================================
   Результаты
   ========================================================= */

.trips-results__heading {
    display: flex;

    min-width: 0;

    align-items: flex-end;
    justify-content: space-between;

    gap: 16px;

    padding:
        0
        2px;
}


.trips-results__heading > div {
    min-width: 0;
}


.trips-results__heading h2 {
    margin-top: 4px;

    font-size:
        clamp(
            1.2rem,
            4vw,
            1.52rem
        );
}


.trips-results__places {
    display: inline-flex;

    flex:
        0
        0
        auto;

    align-items: center;

    gap: 6px;

    padding:
        8px
        12px;

    color: var(--muted);

    background:
        var(--trips-surface);

    border:
        1px solid
        var(--trips-border);

    border-radius: 999px;

    font-size: 0.74rem;
    line-height: 1;
}


.trips-results__places strong {
    color:
        color-mix(
            in srgb,
            var(--trips-green-soft) 60%,
            var(--text)
        );

    font-size: 0.9rem;
}


#trips-container {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap: 14px;

    width: 100%;
    min-width: 0;
}


#trips-container[aria-busy="true"] {
    opacity: 0.72;
}


.trips-empty-message {
    grid-column:
        1
        /
        -1;

    margin: 0;

    padding:
        32px
        18px;

    color: var(--muted);

    background:
        linear-gradient(
            145deg,
            var(--trips-raised),
            var(--trips-surface)
        );

    border:
        1px solid
        var(--trips-border);

    border-radius:
        calc(
            var(--radius)
            + 1px
        );

    box-shadow:
        var(--trips-shadow-soft);

    text-align: center;
    line-height: 1.55;
}


.trips-empty-message h3,
.trips-empty-message p {
    margin: 0;
}


.trips-empty-message h3 {
    color: var(--text);

    font-size:
        clamp(
            1.08rem,
            3vw,
            1.28rem
        );
}


.trips-empty-message p {
    max-width: 560px;
}


.trips-empty-actions {
    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 10px;

    margin-top: 18px;
}


/* =========================================================
   Карточки поездок
   ========================================================= */

.trip-card {
    position: relative;

    display: flex;

    min-width: 0;
    height: 100%;

    flex-direction: column;

    gap: 13px;

    padding: 18px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            var(--trips-raised),
            var(--trips-surface)
        );

    border:
        1px solid
        var(--trips-border);

    border-radius:
        calc(
            var(--radius)
            + 1px
        );

    box-shadow:
        var(--trips-shadow-soft);

    transition:
        border-color 0.16s ease,
        box-shadow 0.16s ease,
        transform 0.16s ease;
}


.trip-card::before {
    position: absolute;

    top: 0;
    right: 0;
    left: 0;

    height: 3px;

    background:
        linear-gradient(
            90deg,
            color-mix(
                in srgb,
                var(--route-from-color) 70%,
                var(--trips-gray)
            ),
            color-mix(
                in srgb,
                var(--trips-gray) 74%,
                transparent
            ),
            color-mix(
                in srgb,
                var(--route-to-color) 72%,
                var(--trips-gray)
            )
        );

    content: "";
}


.trip-card:hover {
    border-color:
        var(--trips-accent-border);

    box-shadow:
        var(--trips-shadow);

    transform:
        translateY(-2px);
}


.trip-card-link {
    display: flex;

    min-width: 0;

    flex:
        1
        1
        auto;

    flex-direction: column;

    gap: 10px;

    color: var(--text);

    text-decoration: none;
}


.trip-card-link:hover {
    text-decoration: none;
}


.trip-card-link:focus-visible {
    outline:
        3px solid
        color-mix(
            in srgb,
            var(--trips-green) 42%,
            transparent
        );

    outline-offset: 4px;

    border-radius: 12px;
}


.trip-card-summary,
.trip-card-details {
    margin: 0;

    overflow-wrap: anywhere;
}


.trip-card-summary {
    color: var(--text);

    font-size: 0.96rem;
    line-height: 1.55;
}


.trip-card-summary strong {
    color:
        color-mix(
            in srgb,
            var(--trips-green-soft) 58%,
            var(--text)
        );
}


.trip-card-details {
    padding-top: 10px;

    color: var(--muted);

    border-top:
        1px solid
        var(--trips-border);

    font-size: 0.8rem;
    line-height: 1.5;
}


.trip-card-distance {
    display: inline-flex;

    align-items: center;

    align-self: flex-start;

    min-height: 28px;

    padding:
        5px
        9px;

    color: var(--muted);

    background:
        var(--trips-hover);

    border:
        1px solid
        var(--trips-border);

    border-radius: 999px;

    font-size: 0.7rem;
    line-height: 1;
}


.trip-favorite-button {
    width: 100%;
    min-height: 44px;

    margin-top: auto;

    font-size: 0.78rem;
}



/* =========================================================
   Страница деталей поездки: избранное
   ========================================================= */

.trip-detail-actions
.trip-detail-favorite-button {
    display: inline-flex;

    width: 44px;
    min-width: 44px;
    max-width: 44px;

    height: 44px;
    min-height: 44px;

    flex:
        0
        0
        44px;

    align-items: center;
    justify-content: center;
    justify-self: start;
    align-self: start;

    padding: 0;

    font-size: 1.45rem;
    font-weight: 750;
    line-height: 1;

    cursor: pointer;
}


.trip-detail-actions
.trip-detail-favorite-button.is-favorite {
    font-weight: 850;
}


.trip-detail-actions
.trip-detail-favorite-button.is-loading {
    cursor: progress;
    opacity: 0.7;
}


.trip-detail-actions
.trip-detail-favorite-button:focus-visible {
    outline:
        3px solid
        color-mix(
            in srgb,
            var(--accent) 55%,
            transparent
        );

    outline-offset: 2px;
}


/* =========================================================
   Модальное окно карты
   ========================================================= */

#map-modal {
    position: fixed;

    z-index: 3200;

    inset: 0;

    display: none;

    align-items: center;
    justify-content: center;

    padding:
        max(
            14px,
            env(
                safe-area-inset-top,
                0px
            )
        );

    box-sizing: border-box;

    background:
        rgba(
            0,
            0,
            0,
            0.72
        );

    backdrop-filter:
        blur(7px);

    -webkit-backdrop-filter:
        blur(7px);
}


#map-modal.active,
#map-modal[aria-hidden="false"] {
    display: flex;
}


.map-container {
    position: relative;

    display: flex;

    width:
        min(
            100%,
            780px
        );

    max-height:
        calc(
            100dvh
            - 28px
        );

    flex-direction: column;

    gap: 14px;

    padding: 20px;

    box-sizing: border-box;

    overflow-y: auto;

    background:
        linear-gradient(
            145deg,
            var(--trips-raised),
            var(--trips-surface)
        );

    border:
        1px solid
        var(--trips-border);

    border-radius:
        calc(
            var(--radius)
            + 4px
        );

    box-shadow:
        0 26px 76px
        rgba(
            0,
            0,
            0,
            0.48
        );
}


.map-container .close-btn {
    position: absolute;

    z-index: 5;

    top: 12px;
    right: 12px;

    display: inline-flex;

    width: 42px;
    height: 42px;

    align-items: center;
    justify-content: center;

    padding: 0;

    color: var(--text);

    background:
        var(--trips-hover);

    border:
        1px solid
        var(--trips-border);

    border-radius: 13px;

    font-size: 1.45rem;
    line-height: 1;

    cursor: pointer;
}


.map-modal-heading {
    display: grid;

    grid-template-columns:
        auto
        minmax(
            0,
            1fr
        );

    align-items: center;

    gap: 11px;

    min-width: 0;

    padding-right: 48px;
}


.map-modal-heading__icon {
    display: inline-flex;

    width: 44px;
    height: 44px;

    align-items: center;
    justify-content: center;

    color:
        color-mix(
            in srgb,
            var(--trips-green-soft) 52%,
            var(--trips-gray)
        );

    background:
        var(--trips-hover);

    border:
        1px solid
        var(--trips-border);

    border-radius: 14px;

    font-size: 1rem;
}


.map-modal-heading h3 {
    margin-top: 3px;

    font-size: 1.12rem;
}


#yandex-map {
    width: 100%;
    min-height: 410px;

    overflow: hidden;

    background:
        var(--trips-hover);

    border:
        1px solid
        var(--trips-border);

    border-radius: 16px;
}


#selected-address {
    min-height: 48px;

    padding:
        11px
        13px;

    color: var(--muted);

    background:
        var(--trips-hover);

    border:
        1px solid
        var(--trips-border);

    border-radius: 13px;

    font-size: 0.8rem;
    line-height: 1.45;

    overflow-wrap: anywhere;
}


#confirm-location {
    width: 100%;
    min-height: 49px;
}


/* =========================================================
   Предупреждения
   ========================================================= */

.auth-warning {
    position: fixed;

    z-index: 3500;

    top: 12px;
    right: 12px;
    left: 12px;

    display: flex;

    max-width: 640px;

    align-items: flex-start;
    justify-content: space-between;

    gap: 12px;

    margin: 0 auto;

    padding:
        12px
        10px
        12px
        14px;

    color: var(--text);

    background:
        var(--trips-raised);

    border:
        1px solid
        color-mix(
            in srgb,
            var(--danger) 34%,
            var(--trips-border)
        );

    border-radius: 15px;

    box-shadow:
        var(--trips-shadow);
}


.auth-warning-text {
    padding-top: 7px;

    line-height: 1.45;
}


.auth-warning-close {
    display: inline-flex;

    width: 40px;
    height: 40px;

    flex:
        0
        0
        40px;

    align-items: center;
    justify-content: center;

    padding: 0;

    color: var(--muted);

    background:
        transparent;

    border: 0;
    border-radius: 12px;

    cursor: pointer;
}


.block-info {
    margin:
        16px
        0;

    padding:
        13px
        15px;

    color:
        color-mix(
            in srgb,
            var(--danger) 78%,
            var(--text)
        );

    background:
        color-mix(
            in srgb,
            var(--danger) 6%,
            var(--trips-surface)
        );

    border:
        1px solid
        color-mix(
            in srgb,
            var(--danger) 28%,
            var(--trips-border)
        );

    border-radius: 14px;
}


/* =========================================================
   Планшеты
   ========================================================= */

@media (max-width: 960px) {
    .trips-hero {
        grid-template-columns:
            minmax(
                0,
                1fr
            );
    }


    .trips-hero__map {
        min-height: 300px;

        border-top:
            1px solid
            var(--trips-border);

        border-left: 0;
    }


    .trips-main-content {
        grid-template-columns:
            minmax(
                0,
                1fr
            );
    }


    .trip-create-card,
    .trips-search-column,
    .trips-results {
        grid-column: 1;
        grid-row: auto;
    }


    .trips-search-column {
        display: grid;

        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );
    }
}


/* =========================================================
   Мобильные устройства
   ========================================================= */

@media (max-width: 700px) {
    :root {
        --trips-gap: 13px;
    }


    .trips-page {
        width:
            calc(
                100%
                - 12px
            );

        gap: var(--trips-gap);

        margin:
            8px
            auto
            calc(
                28px
                + env(
                    safe-area-inset-bottom,
                    0px
                )
            );
    }


    #step1,
    #step2 {
        scroll-margin-top: 68px;
    }


    .trips-hero,
    .trip-step-card,
    .trip-create-card,
    .trip-search-card,
    .trips-route-preview,
    .trip-card,
    .trips-empty-message {
        border-radius: 17px;
    }


    .trips-hero__copy {
        padding:
            25px
            15px;
    }


    .trips-hero__copy h2 {
        font-size:
            clamp(
                1.85rem,
                11vw,
                2.75rem
            );
    }


    .trips-hero__actions {
        width: 100%;
    }


    .trips-hero__actions .btn {
        flex:
            1
            1
            180px;
    }


    .trips-hero__stats {
        grid-template-columns:
            minmax(
                0,
                1fr
            );
    }


    .trips-hero__stats > div {
        display: flex;

        align-items: center;
        justify-content: space-between;

        gap: 12px;
    }


    .trips-hero__stats dd {
        margin-top: 0;
    }


    .trips-hero__map {
        min-height: 250px;
    }


    .trip-step-card,
    .trip-create-card,
    .trip-search-card,
    .trips-route-preview {
        padding:
            18px
            14px;
    }


    .trip-step-card__header {
        gap: 11px;
    }


    .trip-step-card__number {
        width: 44px;
        height: 44px;

        flex-basis: 44px;

        border-radius: 13px;
    }


    .seat-buttons {
        gap: 8px;
    }


    .btn-seat {
        min-height: 96px;

        padding:
            12px
            7px;

        border-radius: 14px;
    }


    .btn-seat__number {
        font-size: 1.48rem;
    }


    .trip-seats-summary,
    .trip-date-time-grid,
    .trip-search-controls,
    .trips-search-column {
        grid-template-columns:
            minmax(
                0,
                1fr
            );
    }


    .trip-seats-summary__item {
        min-height: 54px;

        flex-direction: row;

        align-items: center;
        justify-content: space-between;
    }


    .address-row {
        grid-template-columns:
            minmax(
                0,
                1fr
            );
    }


    .trip-map-button {
        width: 100%;
        min-width: 0;
    }


    .trip-route-line {
        top: 66px;
        bottom: 116px;
    }


    .trips-results__heading {
        align-items: flex-start;

        flex-direction: column;
    }


    .trips-results__places {
        align-self: flex-start;
    }


    #trips-container {
        grid-template-columns:
            minmax(
                0,
                1fr
            );
    }


    .trip-card {
        padding:
            16px
            14px;
    }


    .map-container {
        width: 100%;
        max-height: 100dvh;

        padding:
            16px
            12px
            calc(
                16px
                + env(
                    safe-area-inset-bottom,
                    0px
                )
            );

        border-radius: 18px;
    }


    #yandex-map {
        min-height: 330px;
    }
}


/* =========================================================
   Маленькие телефоны
   ========================================================= */

@media (max-width: 430px) {
    .trips-page {
        width:
            calc(
                100%
                - 8px
            );
    }


    .trips-hero__copy {
        padding-right: 12px;
        padding-left: 12px;
    }


    .trips-hero__actions {
        flex-direction: column;
    }


    .trips-hero__actions .btn {
        width: 100%;
    }


    .seat-buttons {
        grid-template-columns:
            repeat(
                3,
                minmax(
                    72px,
                    1fr
                )
            );
    }


    .btn-seat {
        min-height: 88px;
    }


    .btn-seat__caption {
        font-size: 0.64rem;
    }


    .trip-section-heading__icon {
        width: 42px;
        height: 42px;

        flex-basis: 42px;
    }


    .trip-detail-actions
    .trip-detail-favorite-button {
        width: 42px;
        min-width: 42px;
        max-width: 42px;

        height: 42px;
        min-height: 42px;

        flex-basis: 42px;

        justify-self: start;
        align-self: start;
    }


    #yandex-map {
        min-height: 300px;
    }
}


/* =========================================================
   Уменьшение анимации
   ========================================================= */

@media (
    prefers-reduced-motion: reduce
) {
    .btn-seat,
    .trip-card,
    .trips-hero__actions .btn {
        transition: none;
    }


    .btn-seat:hover,
    .trip-card:hover {
        transform: none;
    }
}

/* Published address privacy notice */
.trip-address-note {
    margin: 0 0 1rem;
    padding: 0.8rem 1rem;
    border: 1px solid rgba(37, 99, 235, 0.28);
    border-radius: 0.75rem;
    background: rgba(37, 99, 235, 0.08);
    font-size: 0.9rem;
    line-height: 1.45;
}

@media (max-width: 600px) {
    .trip-address-note {
        margin-top: 0.25rem;
        padding: 0.75rem;
        font-size: 0.85rem;
    }
}


/* Public meeting point confirmation */
.trip-address-note strong {
    display: block;

    margin-bottom: 0.35rem;

    color: var(--text);

    font-size: 0.92rem;
}

.trip-public-points-confirmation {
    display: flex;

    align-items: flex-start;

    gap: 0.75rem;

    margin: 0 0 1rem;
    padding: 0.9rem 1rem;

    color: var(--muted);

    background:
        color-mix(
            in srgb,
            var(--trips-green) 8%,
            var(--trips-raised)
        );

    border:
        1px solid
        color-mix(
            in srgb,
            var(--trips-green) 35%,
            var(--trips-border)
        );

    border-radius: 0.75rem;

    font-size: 0.88rem;
    line-height: 1.45;

    cursor: pointer;
}

.trip-public-points-confirmation
input[type="checkbox"] {
    flex: 0 0 auto;

    width: 20px;
    min-width: 20px;
    height: 20px;
    min-height: 20px;

    margin: 2px 0 0;
    padding: 0;

    accent-color: var(--trips-green);

    cursor: pointer;
}

.trip-public-points-confirmation strong {
    display: block;

    margin-bottom: 0.2rem;

    color: var(--text);
}

@media (max-width: 600px) {
    .trip-public-points-confirmation {
        padding: 0.8rem;
    }
}