/*
 * Дополнения к стилям макета.
 *
 * Основные стили — в wine.css (перенесён из макета, там всё: сетка, карточки, карта,
 * модалка места, кнопки, фильтры). Здесь только то, чего в макете не было:
 * сетевые хуки нашей страницы, градиенты по формату места, «сердечко» избранного
 * и страницы входа/регистрации, которые в макете сделаны модалками.
 */

/* ── Состояния нашей страницы ────────────────────────────────────────────── */

/* Пока идут результаты — блок чуть притухает, чтобы было видно, что запрос ушёл */
#catalog-results.is-loading {
    opacity: .6;
    transition: opacity .15s;
}

/* Карта занимает всю панель: и контейнер API, и заглушка */
.map-panel .leaflet-map {
    width: 100%;
    height: 100%;
}

.map-panel > iframe {
    border: 0;
    width: 100%;
    height: 100%;
}

/* Пустой результат — карточка на всю ширину сетки (в макете это inline-стиль) */
.place-card.empty-card {
    grid-column: 1 / -1;
}

/* ── Модалка места ───────────────────────────────────────────────────────── */

/* Один кадр в галерее: убираем нижнюю строку сетки, чтобы не было пустой полосы */
.place-gallery.single {
    grid-template-rows: 1fr;
}

/* ── Формат места ────────────────────────────────────────────────────────── */

/* Градиенты для случаев без фотографии: цвета взяты из макета (artA/artB мест) */
.cat-food {
    background-image: linear-gradient(150deg, #421016, #a95d56);
}

.cat-culture {
    background-image: linear-gradient(150deg, #a46d5c, #542128);
}

.cat-activity {
    background-image: linear-gradient(150deg, #3f6d6a, #9b6d59);
}

/* ── Карточка ────────────────────────────────────────────────────────────── */

/* «Сердечко» — наше дополнение к макету: в макете карточка без избранного */
.place-card .heart {
    color: var(--wine);
    background: rgba(251, 248, 241, .88);
    border: 0;
    border-radius: 50%;
    place-items: center;
    width: 34px;
    height: 34px;
    display: grid;
    position: absolute;
    top: 12px;
    right: 12px;
    cursor: pointer;
}

.place-card .heart:hover {
    background: var(--paper);
}

.place-card .heart.saved {
    color: var(--paper);
    background: var(--wine);
}

/* Выбранное место: и карточка, и метка получают класс selected */
.place-card.selected {
    outline: none;
}

.swaha-marker.selected {
    transform: scale(1.12);
}

/* ── Форма поиска внутри панели фильтров ─────────────────────────────────── */

.filter-search {
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    display: flex;
}

.filter-search .form-input {
    max-width: 280px;
}

.filter-search .select {
    max-width: 200px;
}

/* ── Шапка ───────────────────────────────────────────────────────────────── */

/* Выход — форма, поэтому убираем отступы, чтобы кнопка стояла как остальные */
.nav-logout {
    margin: 0;
    display: inline-flex;
}

/* ── Страницы входа и регистрации ────────────────────────────────────────── */

/* В макете вход и регистрация — модалки (#authDialog). У нас это страницы,
   поэтому нужен свой контейнер в той же палитре */
.auth-form {
    background: var(--paper);
    border: 1px solid var(--line);
    grid-template-columns: 1fr;
    gap: 22px;
    max-width: 560px;
    margin-bottom: 112px;
    padding: 34px;
    display: grid;
}

.alert {
    color: #8c1f2c;
    background: #fbeae4;
    border: 1px solid #d59b84;
    margin: 0;
    padding: 12px 14px;
    font-size: .9rem;
    font-weight: 700;
}

.alert.ok {
    color: #2f6b4f;
    background: #eef7f0;
    border-color: #9bbfa9;
}

.hint {
    color: var(--muted);
    margin: 0;
    font-size: .9rem;
}

.hint a {
    color: var(--wine);
    font-weight: 700;
    text-decoration: underline;
}


/* Yandex marker preview, before opening full place details. */
.map-place-popup { width: 260px; max-width: 100%; color: #322b2d; font-family: Arial, sans-serif; padding: 6px; }
.map-place-popup h3 { font: 700 22px/1.2 Georgia, serif; margin: 10px 0; }
.map-place-popup p { font-size: 14px; line-height: 1.5; margin: 8px 0; overflow-wrap: anywhere; }
.map-popup-meta { color: #a44860; font-size: 12px; }
.map-place-popup .button { margin-top: 8px; }

/* Keep mobile navigation on one row, with readable controls. */
@media (max-width: 780px) {
    .topbar { height: auto; }
    .topbar .nav { min-height: 64px; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 12px; padding-block: 8px; }
    .topbar .logo { flex-shrink: 0; font-size: 18px; gap: 6px; }
    .topbar .nav-actions { flex-wrap: nowrap; gap: 8px; min-width: 0; }
    .topbar .nav-actions .link-btn { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; white-space: nowrap; padding-inline: 0; }
    .topbar .nav-actions .small { display: inline-flex; min-height: 44px; padding: 8px 10px; font-size: 12px; white-space: nowrap; }
    .topbar .nav-logout { flex-shrink: 0; margin: 0; }
    .topbar .nav-logout .button { white-space: nowrap; }
    .places-grid { gap: 12px; }
    .place-card .place-art { height: 156px; }
    .place-card .place-body { padding: 12px 14px; }
    .place-card .place-body h3 { font-size: 18px; line-height: 1.2; margin-bottom: 5px; }
    .place-card .place-body p { font-size: 13px; line-height: 1.4; }
    .place-card .place-foot { margin-top: 10px; padding-top: 8px; gap: 8px; }
    .place-card .place-price { font-size: 14px; }
    .place-card .place-link { font-size: 12px; text-align: right; }
    .place-card .place-badge { top: 10px; left: 10px; padding: 5px 8px; font-size: 10px; }
    .place-card .place-rating { top: 10px; right: 60px; padding: 5px 8px; font-size: 11px; }
}
@media (max-width: 480px) {
    .topbar .nav { gap: 8px; }
    .topbar .logo { font-size: 17px; }
    .topbar .logo-mark { display: none; }
    .topbar .nav-actions .link-btn { font-size: 12px; }
    .place-card .place-art { height: 132px; }
}

/* Account navigation and breathing room before the footer. */
#page-screen > footer { margin-top: clamp(40px, 6vw, 80px); }
.logout-button { background: #c83243; border-color: #c83243; color: #fff; }
.logout-button:hover { background: #a92434; border-color: #a92434; }
.account-panel { padding-block: 40px; }
.account-heading { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; margin-bottom: 24px; }
.account-heading h1 { font: 700 clamp(28px, 5vw, 44px)/1.15 Georgia, serif; margin: 0; }
.account-events { display: grid; gap: 16px; margin-top: 24px; }
.account-event { padding: 22px; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; }
.account-event h2 { font: 700 24px Georgia, serif; margin: 0 0 12px; }
.account-event p { overflow-wrap: anywhere; }
.event-editor { display: grid; gap: 16px; max-width: 680px; padding: 24px; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; }
.event-editor label { display: grid; gap: 6px; }
.account-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.account-nav a { padding: 12px 16px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); }
.account-nav a.active { background: var(--wine); border-color: var(--wine); color: #fff; }
.account-user { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); }
.account-user h2 { margin: 0; font-size: 20px; overflow-wrap: anywhere; }
.account-user > div { min-width: 0; flex: 1 1 240px; }
.user-status { display: inline-block; border-radius: 20px; padding: 5px 10px; font-size: 14px; }
.user-status.enabled { background: #dff2e5; color: #205b33; }
.user-status.disabled { background: #fae1e4; color: #a92434; }
.event-editor .checkbox-field { display: flex; align-items: center; gap: 10px; }
.event-editor .checkbox-field input { width: 20px; min-height: 20px; }
.event-editor input, .event-editor select { width: 100%; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); }

.photo-editor { min-width: 0; margin: 12px 0; padding: 20px; border: 1px solid var(--line); border-radius: 16px; }
.photo-editor legend { padding-inline: 8px; font-weight: 700; }
.event-editor .photo-dropzone { display: flex; align-items: center; flex-direction: column; gap: 8px; padding: 24px 12px; border: 2px dashed #cda0ac; border-radius: 14px; background: #fbf2f5; cursor: pointer; text-align: center; }
.photo-dropzone.dragover { background: #f4dae3; border-color: var(--wine); }
.photo-add-icon { font-size: 32px; color: var(--wine); }
.photo-dropzone span:last-of-type { font-size: 13px; color: var(--muted); }
.event-editor .photo-dropzone input { max-width: 100%; background: transparent; border: 0; padding: 4px; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 18px; }
.photo-tile { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.photo-tile img, .photo-grid > div > img { width: 100%; height: 140px; object-fit: cover; display: block; }
.photo-badge { position: absolute; top: 8px; left: 8px; padding: 4px 8px; background: #fff; color: var(--wine); font-size: 12px; border-radius: 20px; }
.photo-actions { display: flex; gap: 4px; padding: 8px; }
.photo-actions button { border: 1px solid var(--line); border-radius: 6px; background: #fff; padding: 9px; min-height: 44px; min-width: 44px; cursor: pointer; }
.photo-actions button:last-child { color: #a92434; flex: 1; }
.photo-actions button:disabled { opacity: .35; cursor: default; }
.photo-message { color: var(--wine); font-size: 14px; overflow-wrap: anywhere; }
.event-cover { width: 100%; max-height: 240px; object-fit: cover; border-radius: 12px; margin-bottom: 16px; }
.event-gallery { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 12px; }
.event-gallery img { width: 180px; height: 130px; object-fit: cover; border-radius: 10px; flex-shrink: 0; }
@media(max-width:480px) { .photo-editor { padding: 12px; } .photo-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; } .photo-actions { flex-wrap: wrap; } .photo-actions button:last-child { flex-basis: 100%; } }

/* Hide the sticky header without changing the document's layout. */
.topbar { transition: transform .2s ease, visibility .2s; }
.topbar.header-hidden { transform: translateY(-100%); visibility: hidden; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .topbar { transition: none; } }

@media (max-width: 780px) {
    #page-screen > footer { padding-block: 28px; }
    #page-screen > footer .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; }
    .footer-grid > div { min-width: 0; }
    .footer-grid .footer-brand, .footer-grid .footer-meta { grid-column: 1 / -1; }
    #page-screen > footer .footer-brand .logo { display: inline-flex; margin: 0; color: var(--ink); }
    #page-screen > footer .footer-brand .footer-note { max-width: none; margin: 10px 0 0; font-size: 13px; line-height: 1.5; }
    .footer-grid > div:not(.footer-brand) { padding-top: 16px; border-top: 1px solid var(--line); }
    #page-screen > footer h4 { margin: 0 0 8px; font-size: 11px; letter-spacing: .08em; }
    #page-screen > footer .footer-grid a:not(.logo) { margin: 0; padding-block: 8px; font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
    #page-screen > footer .footer-meta .footer-note { display: block; margin: 0; font-size: 13px; }
}
@media (max-width: 359px) {
    #page-screen > footer .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}

.venue-picker { min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: 14px; }
.venue-picker legend { font-weight: 700; padding-inline: 8px; }
.venue-map { height: 360px; width: 100%; overflow: hidden; border-radius: 12px; background: #e8e2d8; }
.venue-coordinates { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-block: 16px; }
.venue-picker [data-map-touch] { margin-top: 12px; }
.venue-picker [data-map-touch][hidden] { display: none; }
.public-event-dialog { width: min(680px,calc(100% - 24px)); max-height: 85dvh; overflow: auto; padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); color: var(--ink); }
.public-event-dialog::backdrop { background: rgba(0,0,0,.5); }
.public-event-dialog h2 { overflow-wrap: anywhere; }
.public-event-dialog p { overflow-wrap: anywhere; }
.map-events-error { position: absolute; bottom: 8px; left: 8px; right: 8px; padding: 8px; background: var(--paper); font-size: 12px; }
@media(max-width:480px) { .venue-picker { padding: 12px; } .venue-map { height: 280px; } .venue-coordinates { gap: 8px; } .venue-coordinates input { padding-inline: 8px; } .public-event-dialog { padding: 16px; } }

.subscription-panel, .event-venue-summary, .event-period, .schedule-editor { min-width: 0; padding: 20px; border: 1px solid var(--line); border-radius: 14px; margin-block: 16px; background: var(--paper); }
.subscription-panel h2 { margin-top: 0; }
.event-editor textarea { width: 100%; resize: vertical; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font: inherit; color: var(--ink); }
.event-period legend, .schedule-editor legend { padding-inline: 8px; font-weight: 700; }
.schedule-rule { border: 1px solid var(--line); border-radius: 12px; padding: 16px; margin-bottom: 14px; }
.schedule-rule h3 { font-size: 16px; margin: 0 0 12px; }
.schedule-days { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 4px; margin-bottom: 14px; }
.event-editor .schedule-day { display: flex; align-items: center; justify-content: center; gap: 3px; padding: 6px 2px; min-height: 44px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; }
.event-editor .schedule-day input { width: 15px; min-height: 15px; margin: 0; padding: 0; }
.schedule-slot { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-block: 14px; }
.schedule-slot button { grid-column: 1 / -1; justify-self: start; }
.schedule-rule > button { margin: 4px; }
.event-period [hidden] { display: none; }
@media(max-width:480px){ .subscription-panel, .event-venue-summary, .event-period, .schedule-editor { padding: 12px; } .schedule-rule { padding: 10px; } .schedule-days { grid-template-columns: repeat(4,minmax(0,1fr)); } .schedule-rule > button { width: 100%; margin: 4px 0; } .schedule-slot { gap: 8px; } }

.profile-editor { display: grid; grid-template-columns: 220px minmax(0,1fr); gap: 28px; max-width: 880px; padding: 28px; border: 1px solid var(--line); border-radius: 18px; background: var(--paper); }
.profile-error { grid-column: 1 / -1; margin: 0; }
.profile-avatar { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; border: 0; padding: 0; margin: 0; text-align: center; }
.profile-avatar legend { margin: 0 auto 16px; font-weight: 700; }
.avatar-preview { width: 144px; height: 144px; border-radius: 50%; overflow: hidden; background: #ead9db; border: 2px solid var(--line); display: grid; place-items: center; }
.avatar-preview img { width: 100%; height: 100%; object-fit: cover; }
.avatar-preview span { font-size: 52px; color: var(--wine); font-weight: 700; }
.avatar-preview [hidden] { display: none; }
.avatar-upload { cursor: pointer; position: relative; overflow: hidden; }
.avatar-upload input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.avatar-upload:focus-within { outline: 2px solid var(--wine); outline-offset: 3px; }
.profile-fields { display: grid; align-content: start; gap: 14px; min-width: 0; }
.profile-fields label { display: grid; gap: 8px; font-weight: 600; min-width: 0; }
.profile-fields input { width: 100%; min-width: 0; min-height: 44px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font: inherit; color: var(--ink); }
.profile-fields input[readonly] { background: #eee9e1; color: var(--muted); }
.profile-fields .hint { margin: -4px 0 0; }
.profile-name-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.profile-fields > button { justify-self: start; margin-top: 6px; }
.profile-links { margin-top: 24px; }
.profile-avatar .hint { margin: 0; font-size: 13px; overflow-wrap: anywhere; }
.profile-avatar button:disabled, .profile-fields button:disabled { opacity: .5; cursor: default; }
.password-editor > .hint { margin: 0; }
@media(max-width:640px) { .profile-editor { grid-template-columns: minmax(0,1fr); padding: 18px; gap: 24px; } .profile-name-fields { grid-template-columns: minmax(0,1fr); } .profile-fields > button { width: 100%; } .profile-avatar { border-bottom: 1px solid var(--line); padding-bottom: 24px; } }

/* Keep intrinsic image/text widths inside the detail dialog at every viewport. */
dialog.place-detail-dialog { box-sizing: border-box; max-width: calc(100vw - 28px); overflow-x: hidden; }
.place-detail-grid { grid-template-columns: minmax(0, 1.03fr) minmax(0, .97fr); }
.place-detail-grid > *, .place-gallery-main, .place-gallery-pair, .place-detail-copy > * { min-width: 0; max-width: 100%; }
.place-detail-copy { overflow-x: hidden; overflow-wrap: anywhere; }
.place-gallery-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.place-detail-dialog .event-list { border: 0; gap: 18px; min-width: 0; }
.place-detail-dialog .event-card { box-sizing: border-box; min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: #fffdf8; box-shadow: 0 3px 12px rgba(65, 28, 28, .06); }
.place-detail-dialog .event-card h3 { margin: 0 0 10px; font-size: 1.15rem; line-height: 1.3; }
.place-detail-dialog .event-card p { margin: 8px 0; font-size: .95rem; line-height: 1.5; }
.place-detail-dialog .event-card > strong { display: block; margin-top: 14px; color: var(--wine); }
.place-detail-dialog .event-gallery { max-width: 100%; min-width: 0; }
.event-schedule { white-space: pre-line; font-size: .9rem; line-height: 1.65; margin-block: 12px; overflow-wrap: anywhere; }
.place-detail-actions > * { min-width: 0; white-space: normal; text-align: center; }
@media (max-width: 900px) { .place-detail-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .place-detail-dialog .event-card { padding: 12px; } .place-detail-dialog .event-gallery img { width: 150px; height: 110px; } }

.interest-editor { min-width: 0; border: 1px solid var(--line); padding: 16px; border-radius: 14px; margin-block: 16px; }
.interest-options { display: flex; flex-wrap: wrap; gap: 8px; }
.event-editor .interest-option { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 22px; padding: 8px 12px; min-height: 44px; cursor: pointer; }
.event-editor .interest-option input { width: 18px; min-height: 18px; padding: 0; margin: 0; accent-color: var(--wine); }
.interest-option:has(input:checked) { background: var(--wine); color: white; }
.interest-option:has(input:disabled) { opacity: .5; }
.place-detail-dialog .detail-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-block: 10px; }
.other-events-title { margin: 16px 0 0; font-size: 1.15rem; }
.tag-admin-row { padding: 16px; border: 1px solid var(--line); border-radius: 14px; margin-block: 12px; }
.tag-admin-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.tag-admin-form label { flex: 1 1 180px; }
.tag-admin-form input { display: block; width: 100%; min-height: 44px; box-sizing: border-box; }
.tag-admin-row form + form { margin-top: 12px; }

/* Catalog interests sit on a light panel, unlike the route builder chips. */
.filter-panel .chips .chip { background: var(--paper); color: var(--ink); border-color: var(--line); }
.filter-panel .chips .chip:hover { background: var(--cream); border-color: var(--wine); }
.filter-panel .chips .chip.active { background: var(--wine); color: var(--paper); border-color: var(--wine); }
.filter-panel .chips .chip:focus-visible { outline: 2px solid var(--wine); outline-offset: 3px; }

/* Titles wrap at words or language-aware hyphens, never at arbitrary letters. */
.place-detail-copy h2, .place-card h3, .place-detail-dialog .event-card h3 { overflow-wrap: normal; word-break: normal; hyphens: auto; line-height: 1.12; }
.place-detail-copy h2 { max-width: 100%; padding-right: 38px; font-size: clamp(1.7rem, 3vw, 2.9rem); letter-spacing: -.035em; }
.place-detail-dialog .service-option { grid-template-columns: minmax(0,1fr) auto; }
.place-detail-dialog .service-option > span { min-width: 0; }
.services-more { justify-self: start; margin-top: 6px; }
.extra-editor { margin-block: 18px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; }
.extra-editor label { display: block; margin-block: 10px; }
.extra-editor input, .extra-editor textarea { display: block; width: 100%; min-height: 44px; box-sizing: border-box; }
.extra-editor .extra-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
@media(max-width:480px) { .extra-editor .extra-fields { grid-template-columns: 1fr; } .place-detail-copy h2 { font-size: 1.8rem; } .place-detail-dialog .service-option { grid-template-columns: minmax(0,1fr); } }

.catalog-price,.catalog-time { min-width: 0; }
.price-range { position: relative; height: 48px; margin: 10px 12px; }
.price-range-track { position: absolute; inset: 22px 0 auto; height: 4px; background: var(--line); border-radius: 4px; }
.price-range input[type=range] { position: absolute; inset: 0; width: 100%; height: 48px; margin: 0; padding: 0; appearance: none; background: transparent; pointer-events: none; }
.price-range input::-webkit-slider-thumb { appearance: none; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--paper); background: var(--wine); pointer-events: auto; cursor: grab; box-shadow: 0 0 0 1px var(--wine); }
.price-range input::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--paper); background: var(--wine); pointer-events: auto; cursor: grab; }
.price-range input:focus-visible { outline: 2px solid var(--wine); outline-offset: 4px; }
.price-values { display: flex; justify-content: space-between; gap: 8px; font-weight: 700; font-variant-numeric: tabular-nums; }
.catalog-time label { display: block; font-size: 13px; margin-top: 8px; }
.catalog-time select,.catalog-time input { display: block; box-sizing: border-box; width: 100%; min-width: 0; min-height: 44px; border: 1px solid var(--line); border-radius: 8px; padding: 8px; background: var(--paper); color: var(--ink); }
.search-time-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }

/* Keep one filter panel: move it into a native dialog on phones. */
.mobile-filter-toggle { display: none; }
.catalog-filters-dialog { box-sizing: border-box; width: min(560px, calc(100vw - 24px)); max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); padding: 0; border: 1px solid var(--line); border-radius: 20px; background: var(--paper); color: var(--ink); overflow: hidden; }
.catalog-filters-dialog[open] { display: flex; flex-direction: column; }
.catalog-filters-dialog::backdrop { background: rgba(25, 17, 15, .55); }
.catalog-filters-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px; border-bottom: 1px solid var(--line); flex: none; }
.catalog-filters-head h2 { margin: 0; font-size: 1.5rem; }
.catalog-filters-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 12px; background: var(--paper); }
.catalog-filters-dialog .filter-panel { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0; border: 0; box-shadow: none; background: transparent; }
.catalog-filters-dialog .filter-group { min-width: 0; width: 100%; }
.catalog-filters-dialog .filter-search { display: flex; flex-direction: column; align-items: stretch; }
.catalog-filters-dialog input, .catalog-filters-dialog select { min-width: 0; max-width: 100%; box-sizing: border-box; }
.catalog-filters-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 16px 16px max(16px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--paper); flex: none; }
.filters-modal-open { overflow: hidden; }
@media(max-width:768px) { .mobile-filter-toggle { display: inline-flex; margin-bottom: 20px; } [data-filter-home] > .filter-panel { display: none; } }

@media(max-width:768px) {
 .place-detail-dialog .place-detail-copy { padding: 18px 12px; }
 .place-detail-dialog .place-detail-copy h2 { font-size: 1.55rem; letter-spacing: -.035em; max-width: calc(100% - 34px); }
 .place-detail-dialog .place-detail-copy .modal-close { top: 10px; right: 10px; }
 .place-detail-dialog .place-detail-lead { font-size: .9rem; line-height: 1.45; }
 .place-detail-dialog .detail-fact, .place-detail-dialog .service-option { font-size: .85rem; }
 .place-detail-dialog .services-title { font-size: 1.05rem; }
 .place-detail-dialog .event-card { padding: 10px; }
 .place-detail-dialog .event-card h3 { font-size: 1rem; }
 .place-detail-dialog .event-card p, .place-detail-dialog .event-schedule { font-size: .85rem; line-height: 1.45; }
 .place-detail-dialog .detail-tag { font-size: .75rem; }
 .place-detail-dialog .place-detail-actions { display: flex; flex-wrap: wrap; gap: 8px; }
 .place-detail-dialog .place-detail-actions .button { padding: 12px 14px; font-size: .85rem; }
}
.place-detail-dialog .place-gallery img, .place-detail-dialog .event-gallery img { cursor: zoom-in; }
#place-share-link { width: 100%; min-width: 0; padding: 10px; box-sizing: border-box; }
#catalog-results { scroll-margin-top: 90px; }
.photo-viewer { box-sizing: border-box; width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; border-radius: 0; padding: 60px 48px; background: rgba(16,14,14,.97); color: white; overflow: hidden; }
.photo-viewer[open] { display: flex; align-items: center; justify-content: center; }
.photo-viewer::backdrop { background: #100e0e; }
.photo-viewer img { max-width: 100%; max-height: 100%; object-fit: contain; touch-action: pan-y; }
.photo-viewer button { position: absolute; border: 0; border-radius: 50%; width: 44px; height: 44px; padding: 0; background: rgba(255,255,255,.15); color: white; font-size: 32px; cursor: pointer; }
.photo-viewer-close { top: max(12px, env(safe-area-inset-top)); right: 12px; }
.photo-viewer-prev { left: 4px; top: calc(50% - 22px); }
.photo-viewer-next { right: 4px; top: calc(50% - 22px); }
.photo-viewer output { position: absolute; bottom: max(16px, env(safe-area-inset-bottom)); left: 0; right: 0; text-align: center; }
.photo-viewer-open { overflow: hidden; }
@media(max-width:768px) { .photo-viewer { padding: 60px 8px; } }

/* Compact filter controls on both the inline panel and mobile dialog. */
.filter-panel .filter-btn, .filter-panel .chips .chip { padding: 6px 10px; font-size: .82rem; line-height: 1.3; min-height: 32px; }
.filter-panel .chips, .filter-panel .place-filters { gap: 6px; }
.filter-panel .filter-group > span { margin-bottom: 8px; letter-spacing: .06em; }
.filter-panel .button { padding: 8px 12px; font-size: .85rem; min-height: 36px; }
.filter-panel .hint, .filter-panel .price-values { font-size: .82rem; }
.filter-panel .catalog-time input, .filter-panel .catalog-time select, .filter-panel .filter-search .form-input, .filter-panel .filter-search .select { min-height: 36px; padding: 6px 8px; font-size: .9rem; }
.catalog-filters-head { padding: 12px; background: var(--paper); }
.catalog-filters-head h2 { font-size: 1.25rem; }
.catalog-filters-actions { gap: 8px; padding: 12px 12px max(12px, env(safe-area-inset-bottom)); }
.catalog-filters-actions .button, .catalog-filters-head .button { min-height: 36px; padding: 8px 12px; font-size: .88rem; }
@media(max-width:768px) {
 .catalog-filters-dialog .filter-panel { gap: 14px; }
 .catalog-filters-dialog input:not([type=range]), .catalog-filters-dialog select { font-size: 16px; }
}

/* Wide chip rows prevent sparse columns and excessive desktop filter height. */
@media(min-width:769px) {
 [data-filter-home] > .filter-panel { grid-template-columns: minmax(0,1fr) minmax(0,1fr); grid-template-areas: "formats formats" "interests interests" "price time"; align-items: start; gap: 16px 24px; padding: 18px; }
 [data-filter-home] .filter-group { min-width: 0; }
 [data-filter-home] .catalog-formats { grid-area: formats; }
 [data-filter-home] .catalog-interests { grid-area: interests; }
 [data-filter-home] .catalog-price { grid-area: price; }
 [data-filter-home] .catalog-time { grid-area: time; }
 [data-filter-home] .catalog-query { grid-area: query; }
 [data-filter-home] .catalog-formats, [data-filter-home] .catalog-interests { padding-bottom: 14px; border-bottom: 1px solid var(--line); }
 [data-filter-home] .filter-search { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
 [data-filter-home] .filter-search input[type=search] { flex: 1 1 180px; min-width: 0; width: 100%; }
 [data-filter-home] .filter-search select { flex: 1 1 140px; min-width: 0; max-width: 100%; }
 [data-filter-home] .filter-search .button { flex: 0 0 auto; }
 [data-filter-home] .catalog-time label:first-of-type { margin-top: 0; }
}
@media(min-width:1100px) {
 [data-filter-home] > .filter-panel { grid-template-columns: minmax(0,1fr) minmax(0,1.3fr); grid-template-areas: "formats formats" "interests interests" "price time"; }
}

/* Маршруты свиданий: компактный обзор и последовательный план. */
.routes-section { padding-block: 32px; }
.routes-section h1 { font-size: clamp(26px, 4vw, 42px); }
.routes-section h2 { font-size: clamp(20px, 2vw, 28px); }
.route-catalog-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 18px; }
.date-route-card { display: grid; grid-template-columns: 200px minmax(0,1fr); width: 100%; box-sizing: border-box; border: 1px solid #d1c7bb; border-radius: 18px; overflow: hidden; background: #faf7f0; height: 100%; }
.route-card-cover { min-width: 0; background: #e8ddd0; display: grid; place-items: center; font-size: 52px; color: #67121c; }
.route-card-cover img { width: 100%; height: 100%; object-fit: cover; min-height: 180px; }
.route-card-copy { padding: 18px; min-width: 0; }
.route-card-copy h3 { margin: 0 0 8px; font-size: 20px; line-height: 1.25; }
.route-card-copy h3 a { text-decoration: none; color: inherit; }
.route-card-description { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; line-height: 1.45; margin: 10px 0; }
.route-card-summary { font-size: 12px; line-height: 1.5; margin: 0 0 12px; color: #6f605a; }
.route-meta { display: flex; flex-wrap: wrap; gap: 5px 12px; color: #756962; font-size: 12px; line-height: 1.5; }
.date-route-card .button.small { padding: 9px 14px; font-size: 13px; }
.featured-date-route { margin-block: 32px; }
.featured-date-route > .account-heading { margin-bottom: 16px; }
.featured-date-route .date-route-card { max-width: none; grid-template-columns: 200px minmax(0,1fr); }
.route-pagination, .route-inline-actions, .route-add-actions, .route-insert-actions, .route-editor-submit { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-block: 18px; }
.route-inline-actions form { margin: 0; }
.route-management-card, .route-edit-block, .route-step { background: #faf7f0; border: 1px solid #d1c7bb; border-radius: 18px; padding: 22px; margin-bottom: 18px; min-width: 0; }
.routes-section :is(h1,h2,h3,p,a,strong) { overflow-wrap: anywhere; }
.route-state { font-size: 13px; color: #64151d; background: #f0e2d7; padding: 6px 10px; border-radius: 20px; }
.route-warning, .route-problems { color: #9d2734; font-size: 14px; }
.route-editor-status { margin-block: 12px 18px; }
.route-editor-status .route-state { display: inline-flex; }
.route-editor-status :is(ul,p) { margin-top: 12px; color: #9d2734; }
.route-editor-form { width: 100%; max-width: none; min-width: 0; }
.route-editor-form label { display: grid; gap: 6px; font-size: 14px; margin-block: 12px; min-width: 0; }
.route-editor-form :is(input:not([type=checkbox]):not([type=range]):not([type=hidden]):not([type=hidden]),textarea,select), .route-moderation input, [data-route-share-link] { width: 100%; max-width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid #c8bfb3; border-radius: 10px; background: #fffdf8; color: #2b2320; font: inherit; }
.route-editor-form textarea { resize: vertical; }
.route-editor-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.route-edit-block-heading, .route-step-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.route-edit-block-heading { justify-content: space-between; margin-bottom: 14px; }
.route-step-tools .button { min-width: 42px; min-height: 42px; padding: 8px 12px; }
.route-editor-form fieldset { border: 1px solid #d1c7bb; border-radius: 12px; margin-top: 16px; padding: 12px 16px; }
.route-editor-form label.route-service-choice, .route-editor-form label.route-publish { display: flex; align-items: baseline; gap: 10px; }
.route-service-choice input, .route-publish input { width: 18px; height: 18px; flex-shrink: 0; }
.route-picker-preview { display: flex; align-items: flex-start; gap: 12px; margin-top: 12px; }
.route-picker-preview img { width: 80px; height: 80px; border-radius: 10px; object-fit: cover; }
.route-picker-preview p { margin: 6px 0; font-size: 13px; }
.route-insert-actions { border-top: 1px solid #e0d8ce; padding-top: 12px; margin-bottom: 0; }
.route-insert-actions .button { font-size: 12px; padding: 8px 12px; }
.route-moderation { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.route-moderation input { flex: 1; min-width: 180px; }
.route-moderation input[type=hidden] { display: none; }
.route-detail-heading { display: grid; grid-template-columns: minmax(0,1fr) 30%; gap: 30px; margin-top: 24px; align-items: start; }
.route-detail-cover { width: 100%; max-height: 260px; border-radius: 18px; object-fit: cover; }
.route-rich-text { white-space: pre-wrap; line-height: 1.6; overflow-wrap: anywhere; }
.route-map { width: 100%; height: 350px; border: 1px solid #d1c7bb; border-radius: 16px; background: #ede6dc; overflow: hidden; }
.route-map:empty { min-height: 200px; }
.route-timeline { margin-block: 26px; max-width: 1000px; }
.route-step { position: relative; padding-left: 68px; }
.route-step-number { position: absolute; top: 22px; left: 20px; width: 32px; height: 32px; border-radius: 50%; background: #64151d; color: white; display: grid; place-items: center; font-size: 14px; }
.route-event-heading { display: flex; gap: 18px; margin-bottom: 14px; }
.route-event-heading img { width: 110px; height: 110px; border-radius: 12px; object-fit: cover; }
.route-event-heading h2 { margin: 5px 0; }
.route-event-heading p { margin: 6px 0; font-size: 14px; }
.route-step .event-schedule { margin-block: 14px; font-size: 14px; }
.route-author-note, .route-extra-services { padding: 14px; background: #f0e8dc; border-radius: 12px; margin-block: 16px; }
.route-author-note p { margin: 8px 0 0; }
.route-extra-services h3 { margin-top: 0; font-size: 17px; }
.route-text-step { background: transparent; }
@media (max-width: 1000px) { .route-catalog-grid { grid-template-columns: minmax(0,1fr); } }
@media (max-width: 768px) {
  .routes-nav-link { display: none; }
  .routes-section { padding-block: 20px; }
  .date-route-card, .featured-date-route .date-route-card { grid-template-columns: 92px minmax(0,1fr); border-radius: 14px; }
  .route-card-copy { padding: 12px; }
  .route-card-copy h3 { font-size: 17px; }
  .route-card-description { font-size: 13px; }
  .route-meta { font-size: 11px; gap: 4px 8px; }
  .route-management-card, .route-edit-block { padding: 14px; border-radius: 14px; }
  .route-editor-fields { gap: 10px; }
  .route-editor-form :is(input,select,textarea) { font-size: 16px; }
  .route-editor-form fieldset { padding: 10px; }
  .route-detail-heading { grid-template-columns: minmax(0,1fr); gap: 16px; }
  .route-detail-cover { max-height: 200px; }
  .route-map { height: 250px; }
  .route-step { padding: 14px 12px 14px 48px; border-radius: 14px; }
  .route-step-number { width: 26px; height: 26px; top: 14px; left: 12px; }
  .route-event-heading { gap: 10px; }
  .route-event-heading img { width: 64px; height: 76px; }
  .route-event-heading h2 { font-size: 18px; }
  .route-rich-text { font-size: 14px; }
  .route-author-note, .route-extra-services { padding: 10px; }
  .route-inline-actions .button { font-size: 13px; padding: 10px 14px; }
}
@media (max-width: 380px) { .route-editor-fields { grid-template-columns: minmax(0,1fr); } }
.route-card-copy h3, .route-card-summary { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.routes-section :is(h1,h2,h3) { overflow-wrap: break-word; hyphens: auto; }

/* Выбор события для маршрута — карточки вместо выпадающего списка. */
.route-event-picker { width: min(960px,calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 1px solid #c8bfb3; border-radius: 18px; background: #faf7f0; color: #2b2320; overflow-y: auto; box-sizing: border-box; }
.route-event-picker::backdrop { background: rgb(25 12 15 / .65); }
.route-picker-open { overflow: hidden; }
.route-picker-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; background: #faf7f0; border-bottom: 1px solid #d1c7bb; }
.route-picker-head h2 { font-size: 23px; margin: 0; }
.route-picker-head button { min-width: 42px; min-height: 42px; }
.route-picker-filters { padding: 14px 20px; border-bottom: 1px solid #d1c7bb; }
.route-picker-filters label { display: grid; gap: 5px; font-size: 13px; min-width: 0; }
.route-picker-filters :is(input,select) { width: 100%; box-sizing: border-box; border: 1px solid #c8bfb3; border-radius: 9px; padding: 9px 10px; font: inherit; background: #fffdf8; color: inherit; }
.route-picker-search { margin-bottom: 12px; }
.route-picker-filters details { padding: 8px 0; }
.route-picker-filters summary { cursor: pointer; font-size: 14px; }
.route-picker-filters .chips { gap: 6px; margin-top: 10px; }
.route-picker-filters .chip { padding: 6px 10px; font-size: 12px; min-height: 32px; }
.route-picker-filter-fields { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-block: 12px; }
.route-picker-results { padding: 18px 20px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.route-picker-card { border: 1px solid #d1c7bb; border-radius: 14px; background: #fffdf8; min-width: 0; overflow: hidden; display: flex; flex-direction: column; }
.route-picker-card > img { width: 100%; height: 150px; object-fit: cover; }
.route-picker-card-copy { padding: 14px; display: flex; flex-direction: column; flex: 1; gap: 8px; min-width: 0; }
.route-picker-card-copy h3 { font-size: 19px; line-height: 1.25; margin: 0; overflow-wrap: break-word; hyphens: auto; }
.route-picker-card-copy p { margin: 0; font-size: 13px; overflow-wrap: anywhere; }
.route-picker-card-copy .route-picker-description { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.route-picker-card-copy .detail-tag { padding: 4px 8px; font-size: 11px; }
.route-picker-card-copy details { font-size: 12px; }
.route-picker-card-copy .event-schedule { margin-top: 8px; white-space: pre-wrap; }
.route-picker-card-copy button { margin-top: auto; font-size: 13px; padding: 10px 14px; align-self: flex-start; }
.route-editor-form .route-weekdays { display: flex; flex-wrap: wrap; gap: 8px; }
.route-editor-form .route-weekdays label { display: flex; align-items: center; gap: 6px; padding: 8px; border: 1px solid #c8bfb3; border-radius: 9px; }
.route-weekdays input { width: 18px; height: 18px; }
.route-timing [hidden], .route-picker-filters [hidden] { display: none !important; }
.route-budget output { font-size: 24px; color: #64151d; display: block; margin-block: 8px; }
.route-expense-note { padding: 14px; border-radius: 12px; background: #f0e8dc; margin-block: 16px; }
@media (max-width: 640px) {
 .route-event-picker { width: calc(100% - 16px); max-height: calc(100dvh - 16px); border-radius: 12px; }
 .route-picker-head, .route-picker-filters, .route-picker-results { padding: 12px; }
 .route-picker-head h2 { font-size: 19px; }
 .route-picker-filter-fields { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .route-picker-filters :is(input,select) { font-size: 16px; }
 .route-picker-results { grid-template-columns: minmax(0,1fr); }
 .route-picker-card > img { height: 140px; }
 .route-picker-card-copy h3 { font-size: 18px; }
 .route-budget output { font-size: 21px; }
}
.route-picker-filters .route-picker-follow { display: flex; align-items: center; gap: 8px; margin-block: 12px; }
.route-picker-filters .route-picker-follow input { width: 18px; height: 18px; flex-shrink: 0; }

.extra-order-controls { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 12px; }
.extra-order-controls button { min-width: 44px; min-height: 44px; }
#extras-order-form { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-block: 20px; }

/* Карточка занимает всю ширину; расширенный обзор виден при достаточном месте. */
.route-budget { margin-bottom: 24px; }
[data-route-blocks] { min-width: 0; }
.date-route-card { container-type: inline-size; }
.route-card-stops { display: none; }
@container (min-width: 850px) {
  .route-card-copy:has(.route-card-stops) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, .65fr); column-gap: 28px; align-content: start; }
  .route-card-copy > :not(.route-card-stops) { grid-column: 1; }
  .route-card-copy > .button { justify-self: start; }
  .route-card-stops { display: block; grid-column: 2; grid-row: 1 / span 5; border-left: 1px solid #d1c7bb; padding-left: 24px; min-width: 0; font-size: 14px; }
  .route-card-stops ol { margin: 10px 0 0; padding-left: 20px; }
  .route-card-stops li { margin-bottom: 10px; overflow-wrap: anywhere; }
  .route-card-stops small { display: block; color: #756962; line-height: 1.4; margin-top: 3px; }
}
@media (max-width: 600px) { .route-budget { margin-bottom: 18px; } }

.place-route-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0; font-size: 12px; color: var(--muted); }
.place-route-links .button.small, .event-route-link { font-size: 12px; padding: 8px 10px; }
.event-route-link { display: inline-flex; margin-top: 12px; white-space: normal; }
.route-search-panel { border: 1px solid #d1c7bb; background: #faf7f0; border-radius: 14px; padding: 16px; margin-block: 18px; }
.route-search-panel > summary { font-weight: 700; cursor: pointer; }
.route-search-main { display: grid; grid-template-columns: minmax(180px,.7fr) minmax(0,1fr) minmax(0,1.2fr); gap: 12px; margin-top: 14px; }
.route-search-main fieldset { min-width: 0; border: 1px solid #d1c7bb; border-radius: 10px; padding: 12px; }
.route-search-main label, .route-filter-picker > label { display: grid; gap: 5px; font-size: 13px; margin-bottom: 10px; }
.route-search-main input:not([type=checkbox]):not([type=range]):not([type=hidden]), .route-filter-picker input[type=search] { min-width: 0; width: 100%; box-sizing: border-box; padding: 9px; border: 1px solid #c8bfb3; border-radius: 8px; background: #fffdf8; font: inherit; }
.route-search-pair { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.route-search-main .hint, .route-search-panel > form > .hint { font-size: 12px; line-height: 1.5; margin-top: 10px; }
.route-search-options { margin-block: 12px; }
.route-search-options summary { cursor: pointer; font-size: 14px; }
.route-filter-chips, .route-filter-days, [data-route-selected], [data-route-dates] { display: flex; flex-wrap: wrap; gap: 6px; margin-block: 10px; }
.route-filter-chips label, .route-filter-days label { display: flex; align-items: center; gap: 5px; font-size: 12px; padding: 7px 9px; border: 1px solid #d1c7bb; border-radius: 20px; cursor: pointer; margin: 0; }
.route-filter-chips label:has(:checked), .route-filter-days label:has(:checked) { color: #fff; background: #64151d; border-color: #64151d; }
.route-filter-selection { max-width: 100%; overflow-wrap: anywhere; white-space: normal; font-size: 12px; border: 1px solid #d1c7bb; border-radius: 12px; padding: 7px 9px; cursor: pointer; background: #f0e2d7; color: #64151d; }
.route-filter-picker { box-sizing: border-box; width: min(760px,94vw); max-height: 90dvh; padding: 18px; border: 1px solid #d1c7bb; border-radius: 16px; overflow-y: auto; background: #faf7f0; color: #2b2320; }
.route-filter-picker::backdrop { background: rgba(20,12,12,.6); }
.route-filter-choice { display: flex; align-items: center; gap: 12px; padding: 12px; margin-top: 8px; border: 1px solid #d1c7bb; border-radius: 12px; cursor: pointer; }
.route-filter-choice:has(:checked) { border-color: #64151d; background: #f0e2d7; }
.route-filter-choice input { flex: 0 0 auto; }
.route-filter-choice img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; flex: 0 0 auto; }
.route-filter-choice span { min-width: 0; overflow-wrap: anywhere; }
.route-filter-choice small { display: block; margin-top: 4px; color: #756962; }
.route-filter-picker-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; position: sticky; bottom: -18px; background: #faf7f0; padding-block: 12px; border-top: 1px solid #d1c7bb; margin-top: 12px; }
@media(max-width:900px) { .route-search-main { grid-template-columns: repeat(2,minmax(0,1fr)); } .route-search-main fieldset:last-child { grid-column: 1 / -1; } }
@media(max-width:600px) { .route-search-main { grid-template-columns: minmax(0,1fr); } .route-search-panel { padding: 12px; } .route-filter-picker { padding: 12px; } .route-filter-picker input[type=search], .route-search-main input:not([type=checkbox]):not([type=range]):not([type=hidden]) { font-size: 16px; } .route-filter-choice { padding: 10px; } .route-filter-picker-actions { bottom: -12px; } }

.route-filters-open { margin-block: 16px; }
.route-search-dialog .route-search-panel { border: 0; margin: 0; padding: 0; background: inherit; }
.route-search-dialog .route-search-panel > summary, .route-search-dialog .route-inline-actions { display: none; }
.route-search-dialog .route-search-main { grid-template-columns: minmax(0,1fr); margin-top: 0; }
.route-search-dialog .route-search-main fieldset { grid-column: auto; }
.route-search-dialog .route-search-main input:not([type=range]):not([type=hidden]):not([type=checkbox]) { font-size: 16px; }

/* Three destinations, with a floating dock on small screens. */
.site-nav { display: flex; align-items: center; gap: 6px; }
.site-nav a { padding: 12px 18px; border-radius: 999px; font-size: 14px; font-weight: 700; white-space: nowrap; transition: background .15s, color .15s; }
.site-nav a:hover { background: rgba(96,18,29,.07); }
.site-nav a.active { color: #c52e43; background: transparent; }
.site-nav a { position: relative; }
.site-nav a.active::after { content: ""; position: absolute; height: 2px; bottom: 5px; left: 18px; right: 18px; border-radius: 2px; background: #c52e43; }
.site-nav a:focus-visible, .mobile-bottom-nav a:focus-visible { outline: 2px solid var(--wine); outline-offset: 3px; }
.mobile-bottom-nav { display: none; }
.account-logout { display: flex; align-items: center; margin: 0 0 0 auto; }
@media (max-width:768px) {
 .site-header { display: none; }
 body { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
 .mobile-bottom-nav { position: fixed; z-index: 60; left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); bottom: calc(12px + env(safe-area-inset-bottom, 0px)); max-width: 440px; margin-inline: auto; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 4px; padding: 6px; border: 1px solid rgba(96,18,29,.13); border-radius: 24px; background: rgba(251,248,241,.96); backdrop-filter: blur(18px); box-shadow: 0 8px 30px rgba(50,24,20,.17); }
 .mobile-bottom-nav a { min-width: 0; min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 6px 2px; border-radius: 18px; font-size: 11px; line-height: 1.15; font-weight: 700; color: var(--muted); text-align: center; }
 .mobile-bottom-nav svg { width: 22px; height: 22px; flex-shrink: 0; }
 .mobile-bottom-nav a { position: relative; }
 .mobile-bottom-nav a.active { color: #c52e43; background: transparent; }
 .mobile-bottom-nav a.active::after { content: ""; position: absolute; height: 2px; bottom: 0; left: 25%; right: 25%; border-radius: 2px; background: #c52e43; }
 .account-logout { margin-left: 0; }
}
@media (prefers-reduced-motion: no-preference) { .mobile-bottom-nav { animation: nav-dock-appear .28s ease-out both; } }
@keyframes nav-dock-appear { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

#page-screen { min-width: 0; }
.site-header { view-transition-name: site-header; }
.mobile-bottom-nav { view-transition-name: bottom-nav; }
#page-screen { view-transition-name: page-screen; }
.navigation-status { position: fixed; z-index: 100; left: 16px; right: 16px; top: 88px; max-width: 600px; margin-inline: auto; padding: 14px 18px; border-radius: 14px; background: var(--paper); border: 1px solid #c52e43; box-shadow: 0 8px 28px #0002; font-size: 14px; }
.navigation-status a { color: #c52e43; text-decoration: underline; margin-left: 8px; }
.nav-transitioning .site-header.header-hidden { transform: none; visibility: visible; pointer-events: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
::view-transition-old(site-header), ::view-transition-new(site-header), ::view-transition-old(bottom-nav), ::view-transition-new(bottom-nav) { animation: none; }
::view-transition-old(page-screen) { animation: page-out .24s ease both; }
::view-transition-new(page-screen) { animation: page-in .24s ease both; }
@keyframes page-out { to { opacity: 0; transform: translateX(calc(-35px * var(--nav-direction, 1))); } }
@keyframes page-in { from { opacity: 0; transform: translateX(calc(35px * var(--nav-direction, 1))); } }
@media(prefers-reduced-motion:reduce) { ::view-transition-old(page-screen), ::view-transition-new(page-screen) { animation: none; } }

/* Compact mobile cards: square cover beside the heading, details below. */
@media (max-width: 768px) {
 .date-route-card, .featured-date-route .date-route-card { grid-template-columns: 34% minmax(0, 1fr); align-items: start; padding: 12px; gap: 10px 12px; }
 .date-route-card .route-card-cover { aspect-ratio: 1; width: 100%; border-radius: 10px; overflow: hidden; }
 .date-route-card .route-card-cover img { min-height: 0; height: 100%; }
 .date-route-card .route-card-copy { display: contents; }
 .date-route-card .route-card-heading { min-width: 0; align-self: center; }
 .date-route-card .route-card-heading h3 { font-size: 16px; line-height: 1.25; overflow-wrap: break-word; hyphens: auto; }
 .date-route-card .route-meta { display: grid; gap: 3px; line-height: 1.35; }
 .date-route-card :is(.route-card-description,.route-card-summary,.route-card-stops,.route-card-copy > .button) { grid-column: 1 / -1; margin: 0; }
 .date-route-card .route-card-description { font-size: 13px; line-height: 1.4; }
 .date-route-card .route-card-stops { padding-top: 8px; }
 #page-screen > footer { padding-block: 20px; }
 #page-screen > footer .footer-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px 16px; }
 #page-screen > footer .footer-grid > div:not(.footer-brand) { padding-top: 10px; }
 #page-screen > footer .footer-grid a:not(.logo) { padding-block: 5px; }
 #page-screen > footer .footer-brand .footer-note { margin-top: 8px; line-height: 1.4; }
}
@media (max-width: 359px) { #page-screen > footer .footer-grid { grid-template-columns: minmax(0,1fr); } }

.route-event-place { margin-bottom: 14px; }
.route-event-place p { margin: 6px 0 0; font-size: 14px; }
@media (max-width: 768px) {
 .route-detail { padding: 14px 12px; }
 .route-detail .route-step { padding: 14px 12px; }
 .route-text-step { display: flow-root; }
 .route-text-step .route-step-number { position: static; float: left; margin: 0 10px 4px 0; }
 .route-text-step .route-rich-text { line-height: 1.55; overflow-wrap: break-word; }
 .route-event-step .route-event-heading { margin-left: 36px; gap: 10px; align-items: flex-start; }
 .route-event-step .route-event-heading img { width: 56px; height: 56px; flex: 0 0 56px; }
 .route-event-step .route-event-heading > div { min-width: 0; flex: 1; }
 .route-event-step .route-event-heading h2 { margin: 4px 0 0; font-size: 17px; line-height: 1.3; overflow-wrap: break-word; }
 .route-event-place { margin-block: 10px 12px; overflow-wrap: break-word; }
 .route-event-step :is(.route-rich-text,.event-schedule) { overflow-wrap: break-word; }
 .route-event-step :is(.route-author-note,.route-extra-services) { padding: 12px; }
}

.route-visit-time { display: grid; gap: 6px; align-self: center; }
.route-visit-time small { color: var(--muted); font-size: 12px; }
.route-visit-time strong { color: var(--wine); font-size: 28px; line-height: 1.2; }
.route-event-title { margin: 12px 0; line-height: 1.3; overflow-wrap: break-word; }
.route-event-modal { max-width: 720px; }
.route-event-modal .place-detail-copy { padding-top: 44px; }
.route-event-modal .event-gallery img { width: 220px; height: 160px; }
@media(max-width:768px){
 .route-event-step .route-event-heading img { width: 104px; height: 104px; flex-basis: 104px; }
 .route-event-step .route-event-heading { gap: 14px; }
 .route-event-title { font-size: 20px; }
 .route-visit-time { min-width: 0; }
 .route-visit-time strong { font-size: 30px; }
 .route-event-modal .event-gallery img { width: 180px; height: 135px; }
}

/* Independent data loading keeps the static page usable. */
.async-progress { height: 3px; overflow: hidden; border-radius: 3px; background: var(--line); position: relative; margin-block: 8px 12px; }
.async-progress::after { content: ''; position: absolute; width: 35%; height: 100%; background: var(--wine); animation: catalog-progress 1.1s ease-in-out infinite; }
@keyframes catalog-progress { from { transform: translateX(-110%); } to { transform: translateX(400%); } }
.card-skeleton-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.card-skeleton { min-height: 220px; border-radius: 18px; background: linear-gradient(100deg,#eae2d6 20%,#f8f4ec 45%,#eae2d6 70%); background-size: 240% 100%; animation: skeleton-shimmer 1.5s infinite; }
@keyframes skeleton-shimmer { to { background-position: -200% 0; } }
.scroll-reveal-pending { opacity: 0; transform: translateY(14px); }
.scroll-reveal-shown { animation: cards-arrive .45s cubic-bezier(.2,.7,.2,1) both; animation-delay: var(--reveal-delay,0ms); }
@keyframes cards-arrive { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.catalog-card-column { min-width: 0; }
.catalog-pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; margin-block: 20px; }
.map-progress { position: absolute; inset: 0 0 auto; z-index: 3; margin: 0; }
.map-retry { position: absolute; bottom: 12px; left: 12px; right: 12px; background: var(--paper); padding: 12px; border-radius: 12px; z-index: 3; }
.place-load-status { position: relative; min-height: 160px; padding: 48px 20px 20px; }
@media(max-width:768px){ .card-skeleton-grid { grid-template-columns: minmax(0,1fr); } }
@media(prefers-reduced-motion:reduce){ .async-progress::after,.card-skeleton,.scroll-reveal-shown { animation: none; } .scroll-reveal-pending { opacity: 1; transform: none; } }

/* The next screen appears immediately while its HTML/data are in flight. */
.navigation-loading { min-height: 65vh; padding: 24px max(16px, calc((100vw - 1200px) / 2)); }
.navigation-loading .async-progress { width: 100%; }

.route-card-actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.route-like { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:40px; padding:8px 13px; border:1px solid var(--line); border-radius:24px; background:var(--paper); color:var(--wine); font:inherit; text-decoration:none; cursor:pointer; }
.route-like [aria-hidden] { font-size:22px; line-height:1; }
.route-like[aria-pressed="true"] { background:#f9e4e8; border-color:var(--wine); }
.route-like:disabled { opacity:.6; cursor:wait; }
.route-sort { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.route-sort select { min-width:0; max-width:100%; }
.favorites-sections { display:flex; flex-wrap:wrap; gap:16px; margin-bottom:24px; }
#favorite-routes,#favorite-events { scroll-margin-top:80px; margin-block:24px; }
.route-like-warning { border-left:3px solid var(--wine); }
@media (max-width:768px) {
 .route-card-actions { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:10px; }
 .route-card-actions > .route-like { grid-column:1; grid-row:1; justify-self:start; }
 .route-card-actions > .button { grid-column:2; grid-row:1; justify-self:end; width:auto; max-width:100%; padding-inline:12px; font-size:13px; }
 .route-card-actions > [data-like-error] { grid-column:1 / -1; }
}
.place-contact-fields,.place-contacts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.place-contacts { margin-block:18px; }
.place-contact { display:flex; flex-direction:column; gap:4px; padding:12px; background:var(--paper); border:1px solid var(--line); border-radius:12px; color:var(--wine); text-decoration:none; overflow-wrap:anywhere; min-width:0; }
.place-contact span { font-size:12px; color:var(--muted); }
.place-contact strong { font-size:14px; }
.subscription-warning { border-left:3px solid var(--wine); }
@media(max-width:600px){.place-contact-fields { grid-template-columns:minmax(0,1fr); }.place-contacts { gap:8px; }.place-contact { padding:10px; }}
.place-contacts[hidden] { display:none; }
/* Actions are one full-width row in the mobile card's outer two-column grid. */
.route-card-actions { min-width:0; }
@media(max-width:768px) {
 .date-route-card .route-card-actions { grid-column:1 / -1; width:100%; min-width:0; }
 .date-route-card .route-card-actions > .button { min-width:0; white-space:nowrap; overflow-wrap:normal; word-break:normal; }
 .favorites-view .section-head { min-width:0; }
 .favorites-view .section-head > div { min-width:0; max-width:100%; }
 .favorites-view .display { font-size:clamp(28px,8vw,40px); line-height:1.15; letter-spacing:-.5px; overflow-wrap:normal; word-break:normal; }
}

/* Square place cards: the diagonal border fades at bottom-left and top-right. */
.place-card {
    border-radius: 0;
    border: 1px solid transparent;
    background:
        linear-gradient(var(--paper), var(--paper)) padding-box,
        linear-gradient(45deg,
            rgba(100, 20, 35, .035) 0%,
            rgba(100, 20, 35, .24) 50%,
            rgba(100, 20, 35, .035) 100%) border-box;
}
.place-card.selected {
    background:
        linear-gradient(var(--paper), var(--paper)) padding-box,
        linear-gradient(45deg,
            rgba(100, 20, 35, .08) 0%,
            rgba(100, 20, 35, .46) 50%,
            rgba(100, 20, 35, .08) 100%) border-box;
}

/* A single 20px cut at the bottom-right; the cut has no border. */
.place-card:not(.empty-card) {
    position: relative;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
}

.place-routes-link { display: inline-flex; align-items: center; gap: 6px; color: var(--wine); font-size: 12px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; padding: 4px 0; }
.place-routes-link span { font-size: 17px; transition: transform .18s ease; }
.place-routes-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.place-routes-link:hover span { transform: translateX(2px); }
.place-routes-link:focus-visible { outline: 2px solid var(--wine); outline-offset: 3px; }

/* Suppress the browser's rectangular touch highlight; keyboard focus stays visible. */
a, button, input[type="button"], input[type="submit"], input[type="reset"], summary, [role="button"], .place-card {
    -webkit-tap-highlight-color: transparent;
}

/* Desktop navigation remains visible above the page while scrolling. */
@media (min-width: 769px) {
    body { padding-top: 74px; }
    .site-header { position: fixed; top: 0; left: 0; right: 0; height: 74px; }
    .site-header.header-hidden { transform: none; visibility: visible; pointer-events: auto; }
}

/* Keep append progress beside the load-more control, including the map sidebar. */
.catalog-append-status{flex-basis:100%;width:100%;max-width:360px;margin:8px auto;text-align:center;font-size:14px;color:var(--wine)}
.catalog-append-status[hidden]{display:none}
.catalog-append-status .async-progress{margin-top:8px;width:100%}
@media(prefers-reduced-motion:reduce){.catalog-append-status .async-progress::after{animation:none;transform:translateX(90%)}}

.registration-consent{display:grid;grid-template-columns:20px minmax(0,1fr);gap:6px 10px;align-items:start;font-size:14px;line-height:1.5}.registration-consent input[type=checkbox]{width:18px;height:18px;margin:2px 0 0;accent-color:var(--wine)}.registration-consent label{display:block;cursor:pointer}.registration-consent a{grid-column:2;overflow-wrap:anywhere}

.admin-premium-form{display:flex;flex:1 1 280px;flex-direction:column;gap:8px;max-width:340px}
.admin-premium-form label{display:flex;flex-direction:column;gap:8px;font-size:13px}
.admin-premium-form input[type="date"]{box-sizing:border-box;min-width:0;width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--paper);font:inherit}
.admin-premium-actions{display:flex;flex-wrap:wrap;gap:8px}

/* Premium catalog and admin forms share a compact, responsive layout. */
.premium-page{padding-bottom:110px}.premium-heading{max-width:640px;margin:28px 0}.premium-heading h1{font-size:36px;margin:8px 0 12px}.premium-heading p{color:var(--muted);line-height:1.6}
.premium-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:20px;margin:28px 0}.premium-plan{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:24px;background:var(--paper);border:1px solid var(--line);border-radius:18px;min-width:0}.premium-plan h2{margin:0;font-size:23px;overflow-wrap:anywhere}.premium-plan p{margin:0;line-height:1.5}.premium-label{font-size:12px;color:var(--wine);background:#f7edf1;border-radius:20px;padding:5px 9px}.premium-price{font-size:30px;font-weight:650;white-space:nowrap}.premium-price-row{display:flex;align-items:center;flex-wrap:wrap;gap:12px}.premium-price-row s{color:var(--muted)}.premium-plan form,.premium-payment-pending{width:100%;margin-top:auto}.premium-plan .button{width:100%;box-sizing:border-box;justify-content:center;gap:5px}.premium-plan small{display:block;font-size:12px;color:var(--muted);line-height:1.5;margin-top:8px}.premium-payment-pending button:disabled{opacity:.65;cursor:default}.premium-progress{padding:14px 0;width:100%;border-top:1px solid var(--line);font-size:14px}.premium-progress p+p{margin-top:8px}.premium-reward-note{padding:20px 22px;border-left:3px solid var(--wine);background:#faf3f6;border-radius:0 14px 14px 0;line-height:1.6}.premium-reward-note p{font-size:14px;color:var(--muted);max-width:780px}.premium-reward-note a,.premium-back{color:var(--wine);font-size:14px}.premium-back{display:inline-block;margin:12px 0 24px}.premium-active{padding:16px;border:1px solid var(--line);border-radius:12px;line-height:1.6}
.premium-editor{max-width:640px;display:flex;flex-direction:column;gap:22px}.premium-editor label{display:flex;flex-direction:column;gap:8px;font-size:14px;min-width:0}.premium-editor input:not([type=hidden]):not([type=checkbox]),.premium-editor select{box-sizing:border-box;width:100%;min-width:0;border:1px solid var(--line);border-radius:10px;background:var(--paper);padding:12px;font:inherit}.premium-form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}.premium-editor fieldset{margin:0;padding:20px;border:1px solid var(--line);border-radius:14px;display:flex;flex-direction:column;gap:20px;min-width:0}.premium-editor legend{padding:0 8px;font-weight:600}.premium-editor .hint{font-size:13px;line-height:1.6;margin:0}.premium-editor .premium-enabled{flex-direction:row;align-items:center;gap:10px}.premium-enabled input{width:18px;height:18px;accent-color:var(--wine)}.premium-editor-actions{display:flex;gap:12px;flex-wrap:wrap}
@media(max-width:480px){.premium-heading h1{font-size:29px}.premium-grid{gap:14px}.premium-plan{padding:20px}.premium-form-row{grid-template-columns:1fr}.premium-editor fieldset{padding:16px}.premium-reward-note{padding:16px}.premium-editor-actions .button{flex:1}}

/* Customer premium page: editorial intro, clear prices and earned rewards. */
.premium-catalog{--premium-ink:#38242e;--premium-muted:#867680;--premium-line:#e9dfe4}
.premium-catalog .premium-hero{display:grid;grid-template-columns:1.15fr 1fr;gap:48px;align-items:center;margin:30px 0 32px;padding:36px 38px;border-radius:24px;background:linear-gradient(115deg,#faf1f4 0%,#fcf8f3 100%);border:1px solid #f2e7eb}
.premium-signature{display:inline-flex;align-items:center;gap:8px;color:var(--wine);font-size:12px;font-weight:650;letter-spacing:.04em}.premium-signature svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round}
.premium-catalog .premium-hero h1{font-size:clamp(29px,3.2vw,42px);line-height:1.13;letter-spacing:-.035em;color:var(--premium-ink);margin:16px 0}.premium-hero-copy>p{max-width:370px;margin:0;color:#82717b;font-size:14px;line-height:1.65}
.premium-benefits{display:grid;gap:20px}.premium-benefits>div{display:flex;align-items:center;gap:14px}.premium-benefit-icon{display:grid;place-items:center;flex:0 0 40px;height:40px;border:1px solid #e9d8df;border-radius:12px;color:var(--wine);background:#fff9}.premium-benefit-icon svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}.premium-benefits strong{display:block;font-size:14px;font-weight:600;color:var(--premium-ink)}.premium-benefits small{display:block;margin-top:4px;font-size:12px;line-height:1.5;color:var(--premium-muted)}
.premium-membership{display:flex;gap:12px;align-items:flex-start;margin:0 0 30px;padding:15px 18px;border:1px solid #dce6de;border-radius:12px;background:#f8fbf8}.premium-membership-dot{width:7px;height:7px;margin-top:6px;flex:0 0 7px;border-radius:50%;background:#58846b}.premium-membership strong{font-size:13px;color:#466653}.premium-membership p{margin:4px 0 0;font-size:12px;line-height:1.6;color:#77827b}
.premium-section-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:30px 0 18px}.premium-section-heading h2{font-size:21px;letter-spacing:-.025em;margin:0;color:var(--premium-ink)}.premium-section-heading>span{font-size:12px;color:var(--premium-muted)}
.premium-catalog .premium-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:18px;margin:0 0 30px;align-items:stretch}.premium-catalog .premium-plan{position:relative;gap:0;padding:24px;border-radius:20px;border-color:var(--premium-line);background:#fff;box-shadow:0 4px 16px #4c263305}.premium-catalog .premium-plan::before{content:"";position:absolute;left:24px;right:24px;top:0;height:3px;background:#d6b2c0;border-radius:0 0 3px 3px}.premium-catalog .premium-plan.is-reward-ready{border-color:#b56380;background:linear-gradient(145deg,#fff 45%,#fff8fb);box-shadow:0 6px 24px #8d2c4910}.premium-catalog .premium-plan.is-reward-ready::before{background:var(--wine)}
.premium-plan-top{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:22px;width:100%;margin-bottom:16px}.premium-plan-kicker{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--premium-muted);font-weight:600}.premium-catalog .premium-label{font-size:10px;padding:4px 8px;border:1px solid #eedbe3;background:#fbf0f5;white-space:nowrap}.premium-catalog .premium-plan h2{font-size:19px;letter-spacing:-.02em;line-height:1.4;color:var(--premium-ink)}
.premium-period{display:flex;align-items:center;gap:12px;width:100%;margin:14px 0 18px}.premium-period>strong{font-size:60px;font-weight:500;letter-spacing:-.07em;line-height:1;color:var(--premium-ink)}.premium-period>span:not(.premium-period-symbol){font-size:12px;line-height:1.5;color:var(--premium-muted)}.premium-period-symbol{font-size:48px;font-weight:400;line-height:1;color:#ba869b;margin-left:auto;padding:0 4px;transform:rotate(12deg)}
.premium-catalog .premium-price-row{width:100%;gap:9px;margin:0 0 20px;padding-top:16px;border-top:1px solid var(--premium-line);align-items:baseline}.premium-catalog .premium-price{font-size:30px;letter-spacing:-.035em;color:var(--premium-ink)}.premium-catalog .premium-price-row s{font-size:13px}.premium-price-note{font-size:11px;color:var(--premium-muted);margin-left:auto}
.premium-catalog .premium-progress{box-sizing:border-box;padding:15px;margin:0 0 20px;border:0;border-radius:12px;background:#f8f5f6}.premium-reward-price{display:flex;justify-content:space-between;gap:8px;align-items:baseline;margin-bottom:12px}.premium-reward-price>span{font-size:12px;color:#796671}.premium-reward-price>strong{font-size:17px;font-weight:650;color:var(--wine);white-space:nowrap}.premium-progress-caption{display:flex;justify-content:space-between;gap:8px;font-size:11px;line-height:1.5;color:#6a5360}.premium-progress-caption>strong{flex-shrink:0;font-size:11px;font-weight:600}.premium-progress-divider{color:#ad9da5;font-weight:400}.premium-catalog progress{display:block;appearance:none;-webkit-appearance:none;width:100%;height:5px;margin:9px 0 10px;border:0;overflow:hidden;border-radius:9px;background:#e8dce2;accent-color:var(--wine)}.premium-catalog progress::-webkit-progress-bar{background:#e8dce2;border-radius:9px}.premium-catalog progress::-webkit-progress-value{background:var(--wine);border-radius:9px}.premium-catalog progress::-moz-progress-bar{background:var(--wine);border-radius:9px}.premium-catalog .premium-progress .premium-rule{font-size:11px;line-height:1.5;color:#96828d;margin:0}.premium-catalog .premium-reward-state{font-size:12px;color:#867680;margin-bottom:10px}
.premium-usage{margin-top:8px;font-size:11px;color:#96828d}.premium-usage summary{cursor:pointer;width:fit-content}.premium-usage p{font-size:11px;line-height:1.6;margin-top:6px!important}
.premium-catalog .premium-plan form,.premium-catalog .premium-payment-pending{margin-top:auto}.premium-catalog .premium-plan .button{display:flex;align-items:center;font-size:12px;min-height:43px;padding:11px 14px;border-radius:10px;gap:5px}.premium-catalog .premium-plan .button>span:last-child[aria-hidden]{margin-left:auto}.premium-catalog .premium-plan small{font-size:11px;line-height:1.6;text-align:center;margin-top:8px;color:#a18e99}.premium-catalog .premium-payment-pending .button{border:1px solid #e7dde2;background:#f6f1f4;color:#8c7884;opacity:1}
.premium-route-reward{display:grid;grid-template-columns:46px 1fr auto;gap:20px;align-items:start;padding:26px 0;border-top:1px solid var(--premium-line)}.premium-route-mark{width:44px;height:44px;border:1px solid #ead9e1;border-radius:13px;background:#fcf6f9;display:grid;place-items:center;color:var(--wine)}.premium-route-mark svg{width:29px;height:29px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.premium-route-copy h2{font-size:20px;letter-spacing:-.025em;margin:7px 0 9px;color:var(--premium-ink)}.premium-route-copy>p{max-width:560px;font-size:13px;line-height:1.65;color:var(--premium-muted);margin:0}.premium-route-copy details{margin-top:13px;font-size:12px;color:#887580}.premium-route-copy summary{cursor:pointer;width:fit-content}.premium-route-copy details p{font-size:12px;line-height:1.7;margin:10px 0 0;max-width:560px}.premium-route-link{display:inline-flex;align-items:center;gap:14px;padding:11px 14px;border:1px solid #e7d9e0;border-radius:10px;text-decoration:none;color:var(--wine);font-size:12px;white-space:nowrap;margin-top:4px}.premium-empty{border:1px dashed var(--premium-line);padding:28px;border-radius:18px;text-align:center}.premium-empty h3{font-size:18px;margin:0 0 8px}.premium-empty p{font-size:13px;color:var(--premium-muted);margin:0;line-height:1.6}
@media(min-width:1100px){.premium-catalog .premium-grid:has(>.premium-plan:only-child){max-width:420px}}
@media(max-width:700px){.premium-catalog .premium-hero{grid-template-columns:1fr;gap:24px;padding:25px 23px;margin-top:24px;border-radius:20px}.premium-catalog .premium-hero h1{font-size:32px;margin:14px 0}.premium-benefits{gap:15px;padding-top:21px;border-top:1px solid #ebdce3}.premium-benefit-icon{flex-basis:35px;height:35px;border-radius:10px}.premium-benefits strong{font-size:13px}.premium-benefits small{font-size:11px}.premium-section-heading{display:block;margin:26px 0 17px}.premium-section-heading h2{font-size:20px}.premium-section-heading>span{display:block;margin-top:6px;font-size:11px}.premium-catalog .premium-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.premium-catalog .premium-plan{padding:20px}.premium-route-reward{grid-template-columns:38px 1fr;gap:14px}.premium-route-mark{width:36px;height:36px;border-radius:10px}.premium-route-mark svg{width:25px;height:25px}.premium-route-copy h2{font-size:18px}.premium-route-link{grid-column:2;justify-self:start}.premium-plan-top{flex-wrap:wrap}.premium-catalog .premium-price-row{flex-wrap:wrap}.premium-price-note{margin-left:0}}
@media(max-width:480px){.premium-catalog .premium-grid{grid-template-columns:1fr}.premium-catalog .premium-plan{padding:22px}.premium-plan-top{flex-wrap:nowrap}.premium-catalog .premium-price-row{flex-wrap:wrap}.premium-price-note{margin-left:auto}.premium-catalog .premium-hero h1{font-size:30px}.premium-period{margin:12px 0 16px}.premium-period>strong{font-size:57px}.premium-catalog .premium-plan .button{font-size:13px}}