/*
 * Trip planner — public page (/pathfinder, /kak-doexat/…)
 *
 * Standalone stylesheet so it can be loaded only on pathfinder pages and
 * kept out of the critical CSS of the rest of the site. Uses plain
 * properties (no CSS vars) to match the site's existing stylesheets.
 *
 * BEM-ish naming to line up with the Blade markup:
 *   .pathfinder-page       — page wrapper
 *   .pathfinder-form__*    — form controls
 *   .pathfinder-main       — map + results side-by-side
 *   .pathfinder-results    — list of route-cards
 *   .route-card            — a single route option
 *   .route-step            — a step inside a card (walk or transport)
 *   .pathfinder-favorites  — favorites (above the form)
 */

.pathfinder-page { display:block; max-width:1200px; margin:0 auto; padding:0 12px; }

.pathfinder-favorites { margin:12px 0; padding:10px 12px; background:#f6f6fb; border-radius:8px; }
.pathfinder-favorites__title { font-weight:600; font-size:13px; color:#555; margin-bottom:6px; }
.pathfinder-favorites__list { display:flex; flex-wrap:wrap; gap:6px; list-style:none; padding:0; margin:0; }
.pathfinder-favorites__item { display:inline-flex; align-items:center; gap:4px; background:#fff; border:1px solid #e4e4ec; border-radius:20px; padding:4px 4px 4px 10px; }
.pathfinder-favorites__link { font-size:13px; color:#333; text-decoration:none; }
.pathfinder-favorites__link:hover { text-decoration:underline; }
.pathfinder-favorites__del { border:0; background:transparent; color:#888; font-size:16px; cursor:pointer; padding:0 6px; line-height:1; }
.pathfinder-favorites__del:hover { color:#e74c3c; }

/* ── Form ──────────────────────────────────────────────────────────────── */
.pathfinder-form { display:flex; flex-direction:column; gap:10px; background:#fff; padding:14px; border:1px solid #e6e6ee; border-radius:10px; margin:14px 0; box-shadow:0 1px 3px rgba(0,0,0,0.03); }
.pathfinder-form__points { display:grid; grid-template-columns: 1fr auto 1fr; gap:10px; align-items:stretch; }
.pathfinder-form__point  { position:relative; display:flex; align-items:center; background:#f6f6fb; border-radius:8px; padding:0 10px; height:44px; }
.pathfinder-form__point-icon { width:10px; height:10px; border-radius:50%; flex:0 0 auto; margin-right:10px; }
.pathfinder-form__point-icon--from { background:#2ecc71; }
.pathfinder-form__point-icon--to   { background:#e74c3c; }
.pathfinder-form__input { flex:1; background:transparent; border:0; outline:0; font:inherit; font-size:15px; color:#222; padding:0; height:44px; }
.pathfinder-form__geo   { background:transparent; border:0; cursor:pointer; color:#888; padding:6px; }
.pathfinder-form__geo:hover { color:#4b43de; }
.pathfinder-form__geo.is-loading { opacity:0.5; animation:pf-spin 1s linear infinite; }
@keyframes pf-spin { to { transform: rotate(360deg); } }

.pathfinder-form__swap { background:#fff; border:1px solid #dcdce8; border-radius:8px; cursor:pointer; width:44px; display:flex; align-items:center; justify-content:center; color:#4b43de; }
.pathfinder-form__swap:hover { background:#4b43de; color:#fff; }

/* Mobile: stack the points full-width. Row 1 = "Откуда" + swap button on its
   right (so the input is a touch narrower); row 2 = "Куда" across full width. */
@media (max-width: 600px) {
    .pathfinder-form__points {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "from swap"
            "to   to";
    }
    .pathfinder-form__points > :nth-child(1) { grid-area: from; } /* Откуда */
    .pathfinder-form__points > :nth-child(2) { grid-area: swap; } /* swap   */
    .pathfinder-form__points > :nth-child(3) { grid-area: to;   } /* Куда   */

    /* iOS Safari zooms the viewport when a focusable form control has
       font-size < 16px — 16px on mobile disables that auto-zoom. (The mode
       control is now a button, which doesn't zoom.) */
    .pathfinder-form__input,
    .route-time__input { font-size:16px; }
    .pf-select__btn,
    .pf-select__item { font-size:16px; }

    /* "Поделиться": icon only on mobile. */
    .pf-share-label { display:none; }
    #pf-share { gap:0; }
}

/* Desktop: narrower time field (~half the native width). */
@media (min-width: 601px) {
    .route-time__input { flex:0 0 auto; width:96px; }
}

.pathfinder-form__suggest { position:absolute; top:100%; left:0; right:0; background:#fff; border:1px solid #e0e0ec; border-top:0; border-radius:0 0 8px 8px; list-style:none; margin:0; padding:4px 0; z-index:20; max-height:260px; overflow-y:auto; box-shadow:0 6px 16px rgba(0,0,0,0.08); }
.pathfinder-form__suggest-item { padding:8px 12px; cursor:pointer; font-size:14px; }
.pathfinder-form__suggest-item:hover { background:#f5f5fa; }

/* Keep the mode <select>, the time input and "Сейчас" on a single row. */
.pathfinder-form__time { display:flex; align-items:center; gap:10px; flex-wrap:nowrap; }
.pathfinder-form__time-label { display:inline-flex; align-items:center; gap:6px; color:#666; font-size:13px; }
.pathfinder-form__time-mode { display:inline-flex; flex:0 0 auto; margin:0; }

/* Custom depart/arrive dropdown (replaces the native <select> popup, which
   the browser mispositions on mobile). The native <select> stays in the DOM
   as the value holder but is visually hidden. */
.pf-select__native { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.pf-select { position:relative; display:inline-block; }
.pf-select__btn { display:inline-flex; align-items:center; justify-content:space-between; gap:8px; min-width:140px; height:40px; padding:0 12px; border:1px solid #dcdce8; border-radius:8px; background:#fff; font:inherit; font-size:16px; line-height:1.2; color:#222; cursor:pointer; box-sizing:border-box; }
.pf-select__chev { width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; border-top:6px solid #666; flex:0 0 auto; }
.pf-select.is-open .pf-select__chev { transform:rotate(180deg); }
.pf-select__list { position:absolute; top:calc(100% + 4px); left:0; min-width:100%; margin:0; padding:4px 0; list-style:none; background:#fff; border:1px solid #e0e0ec; border-radius:8px; box-shadow:0 6px 16px rgba(0,0,0,0.12); z-index:30; }
.pf-select__item { padding:8px 12px; cursor:pointer; white-space:nowrap; font-size:14px; }
.pf-select__item:hover { background:#f5f5fa; }

.route-time__input { flex:0 1 auto; min-width:0; height:40px; padding:0 10px; border:1px solid #dcdce8; border-radius:8px; font:inherit; font-size:16px; line-height:1.2; box-sizing:border-box; }
.route-time__reset { flex:0 0 auto; align-self:flex-end; line-height:1.5; background:transparent; border:0; color:#4b43de; font-size:13px; cursor:pointer; }
.route-time__reset:hover { text-decoration:underline; }

.pathfinder-form__actions { display:flex; gap:8px; flex-wrap:wrap; }
.pathfinder-form__actions .button { display:inline-flex; align-items:center; gap:6px; padding:10px 16px; border-radius:8px; font-weight:600; font-size:14px; cursor:pointer; border:0; }
.pathfinder-form__actions .button--primary { background:#4b43de; color:#fff; }
.pathfinder-form__actions .button--primary:hover { background:#3a34b8; }
.pathfinder-form__actions .button--primary:disabled { opacity:0.6; cursor:wait; }
.pathfinder-form__actions .button--ghost { background:#f5f5fa; color:#333; border:1px solid #e4e4ec; }
.pathfinder-form__actions .button--ghost:hover { background:#ececf5; }
.pathfinder-form__actions .button--active { background:#fff5d5; border-color:#f0c330; color:#b17c00; }
.pathfinder-form__actions .button.is-done::after { content:' ✓'; color:#2ecc71; }

/* Mobile action buttons — placed after the base rule so it actually wins. */
@media (max-width: 600px) {
    .pathfinder-form__actions .button { padding:10px 12px; gap:4px; }
}

/* ── Main area: map + results side-by-side on desktop ──────────────────── */
.pathfinder-main { display:grid; grid-template-columns: 1fr 1.2fr; gap:16px; margin-top:14px; }
@media (max-width: 860px) { .pathfinder-main { grid-template-columns: 1fr; } }

.pathfinder-map { height:520px; border-radius:10px; border:1px solid #e0e0ea; overflow:hidden; background:#eef; position:sticky; top:12px; }
@media (max-width: 860px) { .pathfinder-map { height:320px; position:static; } }

/* Floating feedback button & "back to top" must sit above the Leaflet map
   (its controls/panes go up to ~z-index 800); their defaults (1 and 7) put
   them under the map on this page. */
.social-links--aside { z-index:1100; }
.scroll-top { z-index:1100; }

/* Clickable (non-active) route lines on the map. */
.pf-route-line { cursor:pointer; }

.pathfinder-results { min-height:240px; }
.pathfinder-results__placeholder { padding:32px 16px; text-align:center; color:#777; background:#f8f8fc; border-radius:10px; border:1px dashed #dcdce8; }
.pathfinder-hint-list { text-align:left; display:inline-block; margin:12px 0 0; color:#555; font-size:13px; }
.pathfinder-results__loading { padding:24px; text-align:center; color:#555; }
.pathfinder-results__error { padding:16px; background:#fff4f4; border:1px solid #f3c8c8; border-radius:8px; color:#b13333; }
.pathfinder-results__empty { padding:24px; text-align:center; color:#777; background:#f8f8fc; border-radius:10px; }
.pathfinder-results__header { display:flex; justify-content:space-between; align-items:center; padding:4px 2px 10px; font-size:13px; color:#666; }
.pathfinder-results__count { font-weight:600; color:#333; }

/* ── Route card ────────────────────────────────────────────────────────── */
.route-card { background:#fff; border:1px solid #e4e4ec; border-radius:10px; padding:14px; margin-bottom:10px; cursor:pointer; transition: border-color .15s, box-shadow .15s; }
.route-card:hover  { border-color:#bfbff5; }
.route-card--active { border-color:#4b43de; box-shadow:0 3px 12px rgba(75,67,222,0.15); }
.route-card__tags { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.route-card__tag { display:inline-block; font-size:12px; font-weight:600; line-height:1; padding:4px 8px; border-radius:20px; }
.route-card__tag--fastest { background:#e8f7ee; color:#1e9e54; }
.route-card__tag--convenient { background:#eceafe; color:#4b43de; }
.route-card__summary { display:flex; justify-content:space-between; gap:12px; align-items:center; flex-wrap:wrap; }
.route-card__meta { display:flex; gap:10px; align-items:baseline; }
.route-card__duration { font-size:18px; font-weight:700; color:#222; }
.route-card__hint { font-size:13px; color:#666; }
.route-card__segments { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.route-segment { display:inline-flex; align-items:center; gap:4px; padding:3px 8px; background:#f0efff; color:#4b43de; border-radius:14px; font-size:12px; font-weight:600; }
.route-segment--walk { background:#f3f3f3; color:#555; }
.route-segment__arrow { color:#999; font-size:14px; }

.route-card__steps { margin-top:10px; border-top:1px solid #f0f0f6; padding-top:10px; display:flex; flex-direction:column; gap:10px; }
.route-step { display:grid; grid-template-columns: 44px 32px 1fr; align-items:start; gap:8px; }
.route-step__time { font-size:12px; font-weight:600; color:#888; padding-top:4px; }
.route-step__icon { width:32px; height:32px; border-radius:50%; background:#4b43de; color:#fff; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; }
.route-step__icon--walk { background:#e0e0ea; color:#555; }
.route-step__route-badge { line-height:1; font-size:12px; }
.route-step__title { font-weight:600; font-size:14px; }
.route-step__direction { color:#777; font-weight:400; font-size:13px; }
.route-step__subtitle, .route-step__board, .route-step__alight { font-size:13px; color:#555; margin-top:2px; }
.route-step__departs, .route-step__arrives { color:#4b43de; font-weight:600; }

/* ── SEO variant (pathfinder/seo.blade.php) nuances ──────────────────── */
.pathfinder-form--seo { margin-bottom:12px; }
.pathfinder-seo__hint { font-size:13px; color:#666; padding:8px 0; }
.pathfinder-seo__article { margin-top:16px; }
.pathfinder-seo__article h2 { font-size:18px; margin:12px 0 8px; }

/* Leaflet: hide attribution on tight mobile layouts for breathing room */
@media (max-width: 480px) { .leaflet-control-attribution { font-size:10px; } }

/* ── SEO: FAQ block ─────────────────────────────────────────────────── */
.pathfinder-seo__faq { margin-top:24px; padding:18px; background:#fafafd; border-radius:10px; border:1px solid #ececf4; }
.pathfinder-seo__faq h2 { font-size:18px; margin:0 0 12px; }
.pathfinder-faq__item { border-top:1px solid #ececf4; padding:10px 0; }
.pathfinder-faq__item:first-of-type { border-top:0; padding-top:0; }
.pathfinder-faq__q { cursor:pointer; font-weight:600; color:#333; font-size:15px; padding:4px 0; list-style:none; }
.pathfinder-faq__q::-webkit-details-marker { display:none; }
.pathfinder-faq__q::before { content:'＋'; color:#4b43de; display:inline-block; width:20px; font-weight:400; }
.pathfinder-faq__item[open] .pathfinder-faq__q::before { content:'−'; }
.pathfinder-faq__a { padding:8px 0 8px 20px; color:#555; font-size:14px; line-height:1.55; }

/* ── SEO: Related pairs ─────────────────────────────────────────────── */
.pathfinder-seo__related { margin-top:18px; }
.pathfinder-seo__related h2 { font-size:18px; margin:0 0 10px; }
.pathfinder-related__list { display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; margin:0; }
.pathfinder-related__item { flex:0 0 auto; }
.pathfinder-related__link { display:inline-block; padding:6px 12px; background:#f0efff; color:#4b43de; border-radius:16px; font-size:13px; text-decoration:none; }
.pathfinder-related__link:hover { background:#e0dffc; text-decoration:none; }