/*
 * SNOW EXP — Trip Planner Discovery V1 (October 2026)
 * Planner index ONLY; existing rail links, route AJAX, ranking and forms retained.
 * Based on approved Resorts/Airports Discovery card and SVG button language.
 * The page's legacy inline CSS loads later, so ID-scoped and page-scoped rules
 * deliberately outrank it without editing shared global styles.
 */

body.template-plannerpage {
    --pd-coral: #ef7353;
    --pd-coral-bright: #ffa083;
    --pd-ink: #122330;
    --pd-navy: #142632;
    --pd-focus: #ff926e;
}

/* A full-width product shell rather than a 78vw content island. */
body.template-plannerpage .planner-page-shell {
    width: 100%;
    max-width: 1620px;
    padding: 0 clamp(10px, 2vw, 28px) 38px;
    margin-inline: auto;
}
body.template-plannerpage .planner-page-columns {
    grid-template-columns: minmax(0, 1fr) 310px;
    gap: clamp(18px, 2vw, 30px);
}
body.template-plannerpage .planner-page-main,
body.template-plannerpage .planner-tools-rail {min-width: 0;}

/* Bring page title, tool and rail into the same visual coordinate system. */
body.template-plannerpage .planner-page-hero {padding: 11px 0 21px;}
body.template-plannerpage .planner-page-hero__eyebrow {
    margin: 0 0 8px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .16em;
    color: var(--pd-coral-bright);
    text-shadow: 0 2px 10px rgba(0,0,0,.5);
}
body.template-plannerpage .planner-page-hero .main-text-resorts {
    padding: 0 !important;
    font-size: clamp(2.3rem, 3.7vw, 3.9rem);
    line-height: 1.04;
}
body.template-plannerpage .planner-page-hero__subline {
    color: #f5f8fa;
    max-width: 660px;
    margin: 10px 0 0;
    line-height: 1.45;
    font-size: clamp(14px, 1.15vw, 16px);
    text-shadow: 0 2px 10px rgba(0,0,0,.55);
}

/* Hero planning surface is the clear first action. */
body.template-plannerpage .planner-page-main #planner-index-back {
    width: 100%;
    margin-top: 0;
    padding: clamp(20px, 2.1vw, 31px);
    border-radius: 21px;
    border: 1px solid rgba(255,255,255,.7);
    background: linear-gradient(143deg, rgba(251,252,253,.97), rgba(235,239,242,.91));
    backdrop-filter: blur(16px);
    box-shadow: 0 22px 50px rgba(7,18,28,.22);
    color: var(--pd-ink);
}
body.template-plannerpage #planner-index-back .planner-hero-intro {margin-bottom: 19px;}
body.template-plannerpage #planner-index-back .planner-lead,
body.template-plannerpage #planner-index-back .intro p {
    margin-top: 0;
    margin-bottom: 14px;
    font-size: clamp(15px, 1.25vw, 17px);
    line-height: 1.52;
    color: #243540;
}
body.template-plannerpage #planner-index-back .planner-value-strip {
    margin: 14px 0 17px;
    gap: 8px;
}
body.template-plannerpage #planner-index-back .planner-value-pill {
    display: inline-flex;
    padding: 7px 11px;
    gap: 7px;
    color: #263743;
    font-size: 12px;
    font-weight: 800;
    background: rgba(20,38,50,.055);
    border: 1px solid rgba(20,38,50,.12);
}
body.template-plannerpage .planner-value-pill svg,
body.template-plannerpage .planner-transfer-time svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    stroke: #d65c3f;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
body.template-plannerpage #planner-index-back .planner-how-it-works {
    gap: 10px;
    margin-top: 12px;
}
body.template-plannerpage #planner-index-back .planner-how-card {
    min-width: 0;
    padding: 12px 13px;
    border-radius: 12px;
    border-color: rgba(239,115,83,.20);
    background: rgba(239,115,83,.07);
    line-height: 1.34;
    font-size: 12.5px;
}
body.template-plannerpage #planner-index-back .planner-how-card strong {
    color: #182935;
    font-size: 13px;
}

/* Readable labels, compact selects; keep real select IDs and Select2 handlers. */
body.template-plannerpage #planner-index-back .planner-search-panel {
    margin-bottom: 20px;
}
body.template-plannerpage #planner-index-back .planner-form-row {gap: 12px 13px;}
body.template-plannerpage #planner-index-back .planner-field label {
    color: #182b37;
    font-size: 13px;
    margin-bottom: 7px;
}
body.template-plannerpage #planner-index-back .planner-select {
    min-width: 0;
    width: 100%;
}
body.template-plannerpage #planner-index-back .select2-container .select2-selection--single {
    min-height: 46px !important;
    height: 46px !important;
    background: #fff !important;
    border: 1px solid rgba(28,46,58,.22) !important;
    border-radius: 10px !important;
}
body.template-plannerpage #planner-index-back .select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 44px !important;
    padding-left: 18px !important;
    padding-right: 36px !important;
    color: #213541 !important;
    font-size: 13.5px;
}
body.template-plannerpage #planner-index-back .select2-container .select2-selection__arrow {
    height: 44px !important;
}
body.template-plannerpage #planner-index-back .select2-container--default.select2-container--focus .select2-selection--single,
body.template-plannerpage #planner-index-back .select2-container--default.select2-container--open .select2-selection--single,
body.template-plannerpage #planner-index-back .planner-field-highlight .select2-selection--single {
    border-color: #dc664a !important;
    box-shadow: 0 0 0 3px rgba(239,115,83,.18) !important;
}

/* Exact dark/coral-outline action vocabulary approved on the Discovery pages. */
body.template-plannerpage #planner-index-back .planner-button {
    display: inline-flex !important;
    gap: 7px;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    max-width: 100%;
    padding: 10px 13px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(239,115,83,.72) !important;
    background: #142631 !important;
    box-shadow: 0 6px 15px rgba(4,13,20,.13);
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 800;
    line-height: 1.2 !important;
    text-decoration: none !important;
    cursor: pointer;
}
body.template-plannerpage #planner-index-back .planner-button:hover,
body.template-plannerpage #planner-index-back .planner-button:focus-visible {
    background: #273e4a !important;
    border-color: #ff9c82 !important;
    color: #fff !important;
}
body.template-plannerpage #planner-index-back .planner-button-primary {
    background: #111b22 !important;
    box-shadow: 0 8px 21px rgba(4,13,20,.19);
}
body.template-plannerpage #planner-index-back .planner-button-icon svg {
    width: 17px;
    height: 17px;
    stroke: var(--pd-coral-bright);
    fill: none;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}
body.template-plannerpage #planner-index-back .planner-actions {gap: 9px;}
body.template-plannerpage #planner-index-back .planner-main-cta {min-width: 137px;}
body.template-plannerpage #planner-index-back .planner-next-step-copy {
    margin-top: 14px;
    color: #344653;
    line-height: 1.45;
    font-size: 13.5px;
}
body.template-plannerpage #planner-index-back .planner-account-nudge {border-radius: 10px;}
body.template-plannerpage #planner-index-back .planner-empty-note {
    margin-top: 17px;
    color: #344653;
    font-size: 13.5px;
}

/* Results retain content and URLs while taking on a more deliberate card design. */
body.template-plannerpage #planner-index-back .planner-results-heading {
    margin: 21px 0 13px;
    color: #142631;
    font-size: clamp(22px, 2vw, 28px);
}
body.template-plannerpage #planner-index-back .planner-results-layout {gap: 13px;}
body.template-plannerpage #planner-index-back .planner-feature-card {
    padding: 19px;
    border-radius: 17px;
    border-color: rgba(239,115,83,.45);
    background: rgba(255,255,255,.82);
    box-shadow: 0 11px 24px rgba(10,25,35,.08);
}
body.template-plannerpage #planner-index-back .planner-route-fact {
    border-radius: 11px;
    padding: 10px 12px;
    background: #f1f4f5;
}
body.template-plannerpage .planner-transfer-time {
    display: inline-flex;
    gap: 6px;
    align-items: center;
}
body.template-plannerpage #planner-index-back .other-route-card {
    border-radius: 14px;
    border: 1px solid rgba(19,37,48,.14);
    background: rgba(255,255,255,.78);
    box-shadow: 0 6px 17px rgba(10,25,35,.06);
}

/* Sidebar: preserve ALL guide links, affiliate slot, responsive rail JS and order. */
body.template-plannerpage .planner-tools-rail__sticky {gap: 15px;}
body.template-plannerpage .planner-tools-rail__support {gap: 15px;}
body.template-plannerpage .planner-rail-card {
    padding: 18px 17px;
    border-radius: 18px;
    background: linear-gradient(155deg, #263d49, #12232e 65%, #11212a);
    border: 1px solid rgba(255,255,255,.25);
    color: #f9fafc;
    box-shadow: 0 17px 34px rgba(5,13,19,.24);
}
body.template-plannerpage .planner-rail-title {
    margin-bottom: 11px;
    color: #fff;
    font-size: 18px;
    line-height: 1.22;
}
body.template-plannerpage .planner-rail-eyebrow {color: #ff9b7f;}
body.template-plannerpage .planner-tool-link,
body.template-plannerpage .planner-guide-link {
    color: #fff;
    border-radius: 11px;
}
body.template-plannerpage .planner-tool-link:hover,
body.template-plannerpage .planner-guide-link:hover,
body.template-plannerpage .planner-tool-link:focus-visible,
body.template-plannerpage .planner-guide-link:focus-visible {
    color: #fff;
    background: rgba(255,255,255,.10);
}
body.template-plannerpage .planner-tool-link.is-current,
body.template-plannerpage .planner-guide-link.is-current {
    background: rgba(239,115,83,.14);
    box-shadow: inset 3px 0 0 #ef7353;
}
body.template-plannerpage .planner-tool-link + .planner-tool-link {border-top-color: rgba(255,255,255,.1);}
body.template-plannerpage .planner-tool-copy strong,
body.template-plannerpage .planner-guide-copy strong {color: #fff; font-size: 12.5px;}
body.template-plannerpage .planner-tool-copy small,
body.template-plannerpage .planner-guide-copy small {color: rgba(243,246,248,.74); font-size: 11px;}
body.template-plannerpage .planner-tool-icon {
    background: rgba(255,255,255,.09);
    border-color: rgba(239,115,83,.6);
    color: #ffb39c;
}
body.template-plannerpage .planner-tool-arrow {color: var(--pd-coral-bright);}

/* Search-friendly editorial explanations remain real server-rendered HTML. */
body.template-plannerpage .planner-seo-support-card {
    border-radius: 18px;
    padding: clamp(20px, 2vw, 28px);
    margin-top: 22px;
}
body.template-plannerpage .planner-seo-support-card h2 {
    font-size: clamp(21px, 2vw, 27px);
    line-height: 1.2;
}
body.template-plannerpage .planner-seo-support-card__body {max-width: 90ch;}
body.template-plannerpage .planner-seo-support-card__body p {line-height: 1.56;}

/* Secondary discovery module: real photography with modern dark cards. */
body.template-plannerpage .planner-page-main .planner-inspiration-footer-buffer {margin-top: 25px !important;}
body.template-plannerpage .planner-inspiration-shell {
    width: 100%;
    max-width: none;
    padding: clamp(19px, 2vw, 27px);
    margin: 0;
    border-radius: 19px;
    border: 1px solid rgba(255,255,255,.18);
    background: linear-gradient(145deg, rgba(14,29,39,.94), rgba(10,22,29,.91));
}
body.template-plannerpage .planner-inspiration__head {margin-bottom: 17px;}
body.template-plannerpage .planner-inspiration__head h2 {font-size: clamp(24px,2.1vw,31px);}
body.template-plannerpage .planner-inspiration__pills span {padding: 6px 10px; font-size: 12px;}
body.template-plannerpage .planner-inspiration__grid {gap: 13px;}
body.template-plannerpage .planner-inspiration-card {min-width: 0;}
body.template-plannerpage .planner-inspiration-card__link {
    min-width: 0;
    border-radius: 16px;
    border-color: rgba(239,115,83,.43);
    background: linear-gradient(145deg,#263e49,#162833 70%,#13242d);
    color: #fff;
    box-shadow: 0 11px 24px rgba(0,0,0,.25);
}
body.template-plannerpage .planner-inspiration-card__link:hover,
body.template-plannerpage .planner-inspiration-card__link:focus-within {border-color: #ffa083;}
body.template-plannerpage .planner-inspiration-card__media {min-height: 142px;}
body.template-plannerpage .planner-inspiration-card__body {padding: 16px;}
body.template-plannerpage .planner-inspiration-card__body h3 {font-size: 17px; color: #ffab90;}
body.template-plannerpage .planner-inspiration-card__meta,
body.template-plannerpage .planner-inspiration-card__text {color: rgba(255,255,255,.82);}
body.template-plannerpage .planner-inspiration-card__text {font-size: 13px; line-height: 1.5;}
body.template-plannerpage .planner-inspiration-card__actions {gap: 8px; flex-wrap: wrap;}
body.template-plannerpage .planner-inspiration-card__cta,
body.template-plannerpage .planner-inspiration-card__secondary,
body.template-plannerpage .planner-inspiration-card__secondary:visited {
    display: inline-flex;
    min-height: 37px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(239,115,83,.67);
    border-radius: 9px;
    padding: 8px 11px;
    background: rgba(4,13,20,.64);
    color: #fff !important;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none !important;
}
body.template-plannerpage .planner-inspiration-card__cta:hover,
body.template-plannerpage .planner-inspiration-card__secondary:hover {
    background: rgba(45,66,77,.96);
    color: #fff !important;
}
body.template-plannerpage .planner-inspiration-card__cta span {margin-left: 6px; color: #ff9d81;}

/* All new focus treatments are keyboard-visible and section-scoped. */
body.template-plannerpage :is(.planner-page-main,.planner-tools-rail) a:focus-visible,
body.template-plannerpage :is(.planner-page-main,.planner-tools-rail) button:focus-visible {
    outline: 3px solid var(--pd-focus) !important;
    outline-offset: 3px;
}
body.template-plannerpage .planner-inspiration-card__secondary:focus-visible {color: #fff !important;}

/* Rails already stack below 1280px in existing, tested rail CSS / JS. */
@media (max-width: 1280px) {
    body.template-plannerpage .planner-page-columns {grid-template-columns: minmax(0,1fr);}
    body.template-plannerpage .planner-tools-card .planner-tool-links {grid-template-columns: repeat(3,minmax(0,1fr));}
    body.template-plannerpage .planner-tools-rail__sticky,
    body.template-plannerpage .planner-tools-rail__support {gap: 14px !important;}
}
@media (max-width: 900px) {
    body.template-plannerpage .planner-page-shell {padding-inline: 14px;}
    body.template-plannerpage .planner-page-main #planner-index-back {padding: 23px;}
    body.template-plannerpage .planner-tools-card .planner-tool-links {grid-template-columns: repeat(2,minmax(0,1fr));}
}
@media (max-width: 760px) {
    body.template-plannerpage .planner-page-hero {padding: 5px 0 15px;}
    body.template-plannerpage .planner-page-hero__eyebrow {font-size: 10px;}
    body.template-plannerpage .planner-page-main #planner-index-back {padding: 19px 16px; border-radius: 16px;}
    body.template-plannerpage #planner-index-back .planner-how-it-works {display: none;}
    body.template-plannerpage #planner-index-back .planner-form-row {grid-template-columns: minmax(0,1fr);}
    body.template-plannerpage #planner-index-back .planner-actions {
        width: 100%;
        grid-column: 1;
        display: grid !important;
        grid-template-columns: minmax(0,1fr);
    }
    body.template-plannerpage #planner-index-back .planner-actions .planner-button {width: 100%;}
    body.template-plannerpage .planner-tools-card .planner-tool-links {grid-template-columns: minmax(0,1fr);}
    body.template-plannerpage .planner-inspiration-shell {padding: 17px;}
    body.template-plannerpage .planner-inspiration__grid {gap: 12px;}
}
@media (max-width: 540px) {
    body.template-plannerpage .planner-page-shell {padding-inline: 3px;}
    body.template-plannerpage .planner-page-hero {padding-inline: 9px;}
    body.template-plannerpage .planner-page-hero .main-text-resorts {font-size: 2.25rem;}
    body.template-plannerpage #planner-index-back .planner-value-pill {font-size: 11px; padding: 6px 9px;}
    body.template-plannerpage #planner-index-back .planner-results-heading {font-size: 22px;}
    body.template-plannerpage .planner-inspiration-card__media {min-height: 170px;}
}
@media (prefers-reduced-motion: reduce) {
    body.template-plannerpage .planner-inspiration-card__link,
    body.template-plannerpage #planner-index-back .planner-button {transition: none !important; transform: none !important;}
}


/* =======================================================================
 * PLANNER V1 REFINEMENT — main route finder (review iteration 16 Oct 2026)
 * Scope: Planner only. All original Select2 IDs/forms/route logic untouched.
 * This block deliberately follows V1 and overrides the old inline styles.
 * ======================================================================= */
body.template-plannerpage #planner-index-back .planner-hero-intro {
    position: relative;
    overflow: hidden;
    margin: 0 0 12px;
    padding: clamp(19px, 2.3vw, 29px);
    border-radius: 16px;
    background:
        radial-gradient(ellipse at 94% -10%, rgba(246,129,93,.27), transparent 43%),
        linear-gradient(120deg, #1b3543, #102430 70%, #0c202a);
    color: #fff;
    box-shadow: 0 12px 25px rgba(4,16,24,.13);
}
body.template-plannerpage #planner-index-back .planner-start-heading {position:relative; z-index:1;}
body.template-plannerpage #planner-index-back .planner-start-heading__eyebrow {
    margin: 0 0 4px; color: #ffad91; font-size: 10px;
    font-weight: 900; letter-spacing: .16em;
}
body.template-plannerpage #planner-index-back .planner-start-heading h2 {
    margin: 0 0 9px; color: #fff;
    font-size: clamp(22px, 2.45vw, 32px); font-weight: 800;
    line-height: 1.12; letter-spacing: -.025em;
}
body.template-plannerpage #planner-index-back .planner-hero-intro .planner-lead,
body.template-plannerpage #planner-index-back .planner-hero-intro .intro p,
body.template-plannerpage #planner-index-back .planner-hero-intro .intro {
    position:relative; z-index:1; color: #e6eef3;
    max-width: 78ch; margin: 0 0 14px; font-size: 13.5px;
    line-height: 1.5;
}
body.template-plannerpage #planner-index-back .planner-hero-intro .intro a {color: #ffbea8;}
body.template-plannerpage #planner-index-back .planner-how-it-works {
    display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
    position: relative; z-index:1; gap: 9px; margin: 12px 0 0;
}
body.template-plannerpage #planner-index-back .planner-how-card {
    display: flex; flex-direction: row; align-items: center; gap: 11px;
    min-width: 0; padding: 12px 11px;
    background: rgba(255,255,255,.065);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 11px; color: #fff;
    transition: background .18s ease, border-color .18s ease;
}
body.template-plannerpage #planner-index-back .planner-how-card:hover {
    background: rgba(255,255,255,.11); border-color: rgba(255,161,128,.55);
}
body.template-plannerpage #planner-index-back .planner-step-num {
    display: grid; place-items: center; flex: 0 0 36px;
    width: 36px; height: 36px; border-radius: 10px;
    color: #152935; background: #ff9878;
    font-size: 13px; font-weight: 900; letter-spacing: -.02em;
    box-shadow: 0 4px 14px rgba(255,130,94,.22);
}
body.template-plannerpage #planner-index-back .planner-step-copy {display: grid; min-width: 0; gap: 2px;}
body.template-plannerpage #planner-index-back .planner-step-copy strong {
    color: #fff; font-size: 12.5px; line-height: 1.2;
}
body.template-plannerpage #planner-index-back .planner-step-copy > span {
    opacity: 1; color: rgba(239,244,248,.84); font-size: 11px;
    line-height: 1.3;
}
body.template-plannerpage #planner-index-back .planner-search-panel {
    padding: 16px; margin: 0 0 11px;
    border: 1px solid rgba(27,50,63,.13);
    border-radius: 14px; background: #fff;
    box-shadow: 0 6px 18px rgba(11,28,39,.055);
}
body.template-plannerpage #planner-index-back .planner-form-row {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr) auto;
    gap: 12px; align-items: stretch;
}
body.template-plannerpage #planner-index-back .planner-field {
    padding: 11px; background: #f6f8f9; border-radius: 12px;
    border: 1px solid rgba(21,43,55,.11);
    transition: border-color .2s ease, box-shadow .2s ease;
}
body.template-plannerpage #planner-index-back .planner-field:focus-within {
    border-color: #e87a58; box-shadow: 0 0 0 3px rgba(239,115,83,.14);
}
body.template-plannerpage #planner-index-back .planner-field-label {
    display: flex; align-items: center; gap: 10px; margin: 0 0 10px;
    color: #152b38; cursor: pointer;
}
body.template-plannerpage #planner-index-back .planner-field-label > span:last-child {display: grid; gap: 2px;}
body.template-plannerpage #planner-index-back .planner-field-label small {
    display: block; font-size: 11px; color: #536470; font-weight: 500;
}
body.template-plannerpage #planner-index-back .planner-field-icon {
    display: grid; place-items: center; width: 36px; height: 36px;
    flex: 0 0 36px; border-radius: 10px;
    background: #172d3a; border: 1px solid #ec8b68;
}
body.template-plannerpage #planner-index-back .planner-field-icon svg,
body.template-plannerpage #planner-index-back .planner-quick-route__icon svg {
    width: 20px; height: 20px; stroke: #ffab8b; fill: none;
    stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
body.template-plannerpage #planner-index-back .planner-field .select2-container .select2-selection--single {
    height: 45px !important; min-height: 45px !important;
    border: 1px solid #ccd5da !important; border-radius: 9px !important;
}
body.template-plannerpage #planner-index-back .planner-field .select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 43px !important;
}
body.template-plannerpage #planner-index-back .planner-field .select2-container .select2-selection__arrow {
    height: 43px !important;
}
body.template-plannerpage #planner-index-back .planner-actions {
    align-self: end; display: flex; align-items: stretch;
}
body.template-plannerpage #planner-index-back .planner-actions .planner-main-cta {
    min-height: 52px; padding: 12px 18px !important;
    background: #172d39 !important;
    border: 1px solid #f28d69 !important;
    box-shadow: 0 6px 17px rgba(14,39,55,.16);
}
body.template-plannerpage #planner-index-back .planner-actions .planner-main-cta:hover,
body.template-plannerpage #planner-index-back .planner-actions .planner-main-cta:focus-visible {
    background: #294653 !important;
    box-shadow: 0 8px 19px rgba(14,39,55,.24);
}
body.template-plannerpage #planner-index-back .planner-next-step-copy {
    margin-top: 10px; padding: 0 2px; font-size: 12px; color: #435664;
}
body.template-plannerpage #planner-index-back .planner-account-nudge {
    margin-top: 8px; padding: 8px 11px;
    border: 1px solid rgba(239,115,83,.2);
    background: #fff8f5; color: #394a54; font-size: 12px;
    border-radius: 9px;
}
/* Real, already-curated routes — links point to existing prefilled URLs. */
body.template-plannerpage #planner-index-back .planner-quick-routes {
    padding: 14px 15px 15px; margin: 0 0 5px;
    border: 1px solid rgba(21,43,55,.12);
    border-radius: 13px; background: #eff3f5;
}
body.template-plannerpage #planner-index-back .planner-quick-routes__heading {
    display: flex; justify-content: space-between; align-items: end;
    gap: 9px; margin-bottom: 11px;
}
body.template-plannerpage #planner-index-back .planner-quick-routes__eyebrow {
    color: #a94f38; font-size: 10px; font-weight: 900;
    letter-spacing: .11em; margin: 0 0 3px;
}
body.template-plannerpage #planner-index-back .planner-quick-routes h3 {
    font-size: 16px; line-height: 1.25; color: #142936; margin: 0;
}
body.template-plannerpage #planner-index-back .planner-quick-routes__browse {
    display: flex; flex-wrap: wrap; gap: 6px 12px;
}
body.template-plannerpage #planner-index-back .planner-quick-routes__browse a {
    color: #aa4d34; font-weight: 800; font-size: 11.5px;
    text-decoration: underline; text-underline-offset: 2px;
}
body.template-plannerpage #planner-index-back .planner-quick-routes__grid {
    display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px;
}
body.template-plannerpage #planner-index-back .planner-quick-route {
    min-width:0; display: flex; align-items:center; gap:10px;
    min-height: 66px; padding: 10px; text-decoration: none !important;
    border-radius: 10px; border: 1px solid #cbd5da;
    color: #192e3b; background: #fff;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
body.template-plannerpage #planner-index-back .planner-quick-route:hover,
body.template-plannerpage #planner-index-back .planner-quick-route:focus-visible {
    color: #142c38; border-color: #f08c67;
    box-shadow: 0 5px 13px rgba(19,46,60,.11);
    transform: translateY(-2px);
}
body.template-plannerpage #planner-index-back .planner-quick-route__icon {
    display: grid; place-items:center; width: 32px; height: 32px;
    flex:0 0 32px; background: #213a47; border-radius: 9px;
}
body.template-plannerpage #planner-index-back .planner-quick-route__icon svg {width: 17px; height: 17px;}
body.template-plannerpage #planner-index-back .planner-quick-route__copy {
    display: grid; gap: 3px; flex: 1; min-width: 0;
}
body.template-plannerpage #planner-index-back .planner-quick-route__copy strong {
    font-size: 12px; line-height: 1.26; font-weight: 850;
}
body.template-plannerpage #planner-index-back .planner-quick-route__copy small {
    font-size: 10.5px; line-height: 1.27; color: #556773;
}
body.template-plannerpage #planner-index-back .planner-quick-route__arrow {
    font-size: 21px; line-height: 1; color: #b85a3d;
}
@media (max-width: 1280px) {
    body.template-plannerpage #planner-index-back .planner-form-row {grid-template-columns: repeat(2,minmax(0,1fr));}
    body.template-plannerpage #planner-index-back .planner-actions {grid-column: 1/-1;}
    body.template-plannerpage #planner-index-back .planner-quick-routes__grid {grid-template-columns: repeat(3,minmax(0,1fr));}
}
@media (max-width: 860px) {
    body.template-plannerpage #planner-index-back .planner-form-row {grid-template-columns: repeat(2,minmax(0,1fr));}
    body.template-plannerpage #planner-index-back .planner-how-card {padding: 9px 8px; gap: 7px;}
    body.template-plannerpage #planner-index-back .planner-step-num {width: 30px; height: 30px; flex-basis:30px;}
    body.template-plannerpage #planner-index-back .planner-step-copy > span {display: none;}
    body.template-plannerpage #planner-index-back .planner-quick-routes__grid {grid-template-columns: minmax(0,1fr);}
}
@media (max-width: 760px) {
    body.template-plannerpage #planner-index-back .planner-hero-intro {padding: 18px 15px;}
    body.template-plannerpage #planner-index-back .planner-how-it-works {display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap:6px;}
    body.template-plannerpage #planner-index-back .planner-how-card {flex-direction:column; align-items:flex-start; gap: 6px;}
    body.template-plannerpage #planner-index-back .planner-step-num {width: 27px; height:27px; flex-basis:27px; border-radius:8px; font-size:11px;}
    body.template-plannerpage #planner-index-back .planner-step-copy strong {font-size: 11px;}
    body.template-plannerpage #planner-index-back .planner-form-row {grid-template-columns: minmax(0,1fr);}
    body.template-plannerpage #planner-index-back .planner-actions {grid-column: 1;}
    body.template-plannerpage #planner-index-back .planner-quick-routes__heading {align-items:start; flex-direction:column;}
    body.template-plannerpage #planner-index-back .planner-actions .planner-main-cta {width:100%;}
}
/* Empty state: the coral outlines identify both starting controls without motion. */
@media (prefers-reduced-motion: reduce) {
    body.template-plannerpage #planner-index-back .planner-how-card,
    body.template-plannerpage #planner-index-back .planner-field,
    body.template-plannerpage #planner-index-back .planner-quick-route {
        transition: none !important;
        transform: none !important;
    }
}


/* === PLANNER RESULTS / ONBOARDING V1.3 — SCOPED TO PLANNER ONLY === */
/* Same dark, coral-accented design language as Resorts/Airports Discovery. */
body.template-plannerpage #planner-index-back .planner-route-results {
    margin-top: 19px;
    padding-top: 20px;
    border-top: 1px solid rgba(24,45,57,.12);
}
body.template-plannerpage #planner-index-back .planner-route-results-heading-row {
    display: flex; justify-content: space-between; gap: 12px; align-items: end;
    flex-wrap: wrap; margin-bottom: 12px;
}
body.template-plannerpage #planner-index-back .planner-results-kicker {
    color: #b25339; font-weight: 900; font-size: 10px; letter-spacing: .14em;
    margin: 0 0 5px;
}
body.template-plannerpage #planner-index-back #planner-route-results-heading {
    color: #172d39; font-size: clamp(21px,2vw,27px); line-height: 1.2;
    margin: 0;
}
body.template-plannerpage #planner-index-back .planner-route-results-hint {
    color: #51636f; font-size: 11px; margin: 0 0 3px;
}
/* Force parity with the 3-column discovery grid, overriding legacy inline rules. */
body.template-plannerpage #planner-index-back #planner-other-results.planner-discovery-route-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: stretch;
    gap: 14px !important;
    margin-top: 0 !important;
}
body.template-plannerpage #planner-index-back #planner-other-results > .other-route-item {
    min-width: 0; height: 100%; margin: 0 !important;
}
body.template-plannerpage #planner-index-back #planner-other-results > .other-route-item .other-route-card.planner-discovery-route-card {
    position: relative; isolation: isolate; overflow: hidden;
    display: flex !important; flex-direction: column; min-height: 272px;
    height: 100%; padding: 0 !important;
    border-radius: 16px; border: 1px solid rgba(255,255,255,.21);
    background: linear-gradient(154deg,#213a49,#091923 93%) !important;
    box-shadow: 0 12px 27px rgba(7,17,25,.20);
    color: #f4f8fa; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
body.template-plannerpage #planner-index-back #planner-other-results > .other-route-item--best .other-route-card {
    border-color: rgba(255,149,108,.8) !important;
    box-shadow: 0 0 0 1px rgba(255,133,87,.27), 0 13px 28px rgba(7,17,25,.23);
}
body.template-plannerpage #planner-index-back #planner-other-results > .other-route-item .other-route-card:hover,
body.template-plannerpage #planner-index-back #planner-other-results > .other-route-item .other-route-card:focus-within {
    border-color: #ffa181 !important;
    box-shadow: 0 17px 34px rgba(7,17,25,.30);
    transform: translateY(-2px);
}
body.template-plannerpage .planner-route-photo {
    position: absolute; z-index: 0; inset: 0;
    pointer-events: none;
}
body.template-plannerpage .planner-route-photo::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg,rgba(8,19,29,.44),rgba(8,19,29,.78) 43%,rgba(7,17,24,.97));
}
body.template-plannerpage .planner-route-photo img {
    display: block; width: 100%; height: 100%; object-fit: cover; object-position: center;
}
body.template-plannerpage #planner-index-back .planner-route-card-content {
    padding: 16px 16px 15px; height: 100%; display: flex; flex-direction: column;
    position: relative; z-index: 1; min-width: 0;
}
body.template-plannerpage .planner-route-topline {
    display:flex; justify-content:space-between; align-items:center; gap: 9px; min-height: 20px;
}
body.template-plannerpage .planner-route-status {
    color:#ffd0bf; font-size:11px; font-weight:900; letter-spacing:.095em;
}
body.template-plannerpage .planner-route-status--best {color: #ffab8e;}
body.template-plannerpage .planner-route-best-mark svg {
    width:19px; height:19px; stroke: #ffb296; fill:rgba(255,147,107,.18);
    stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}
body.template-plannerpage #planner-index-back .planner-route-name {
    margin: 9px 0 6px; font-size:clamp(22px,2.1vw,26px); line-height:1.17;
}
body.template-plannerpage #planner-index-back .planner-route-name a {
    color: #ff9474 !important; text-decoration:none !important; font-weight:800;
}
body.template-plannerpage #planner-index-back .planner-route-name a:hover,
body.template-plannerpage #planner-index-back .planner-route-name a:focus-visible {
    color:#ffc2aa !important; text-decoration:underline !important; text-underline-offset:3px;
}
body.template-plannerpage .planner-route-location {
    display:flex; flex-wrap:wrap; gap:5px 8px; font-size:14px; line-height:1.35; color:#ebf2f5;
}
body.template-plannerpage .planner-route-location span + span::before {
    content:'·'; margin-right: 8px; color: #ffa48b;
}
body.template-plannerpage .planner-route-card-facts {
    display:grid; gap:7px; padding:8px 0 10px; margin-top:7px;
}
body.template-plannerpage .planner-route-card-facts p {
    display:flex; gap:9px; align-items:center; margin:0; min-width:0; color:#fff;
    font-size:14px; line-height:1.36;
}
body.template-plannerpage .planner-route-card-facts p svg {
    flex:0 0 17px; width:17px; height:17px; fill:none;
    stroke:#ff9875;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;
}
body.template-plannerpage .planner-route-card-facts p span {min-width:0;}
body.template-plannerpage .planner-route-card-facts p small {
    display:block; color:#bfcfdb; font-size:12px; font-weight:650; margin-bottom: 2px;
}
body.template-plannerpage .planner-route-card-facts p strong {
    color:#fff; font-weight:760; overflow-wrap:anywhere;
}
body.template-plannerpage .planner-route-card-actions {
    display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; padding-top:11px;
    border-top: 1px solid rgba(255,255,255,.17);
}
body.template-plannerpage #planner-index-back .planner-route-card-actions .planner-button {
    min-height:39px; padding:9px 12px !important;
    white-space:normal; font-size:13px; line-height:1.26; font-weight:750;
}
body.template-plannerpage #planner-index-back .planner-route-create-form {margin:0;}
body.template-plannerpage #planner-index-back .planner-route-card-actions :is(a,button):focus-visible {
    outline:2px solid #fff; outline-offset:3px;
}
body.template-plannerpage #planner-index-back #planner-scroll-sentinel {
    grid-column: 1 / -1; min-height:1px; margin:0; padding:0;
}
/* Guided start: both empty fields get a warm, steady coral outline.
   When one value is chosen, existing Select2 JS cues ONLY the other field.
   A single, restrained comet travels around the edge without flashing. */
body.template-plannerpage #planner-index-back .planner-field label.planner-field-label {
    font-size: 15px;
    font-weight: 800;
    line-height: 1.28;
}
body.template-plannerpage #planner-index-back .planner-field label.planner-field-label small {
    font-size: 12px;
    line-height: 1.4;
}
body.template-plannerpage #planner-index-back .planner-field-icon {
    width: 40px; height: 40px; flex-basis: 40px;
}
body.template-plannerpage #planner-index-back .planner-field .select2-container .select2-selection--single {
    min-height: 54px !important;
    height: 54px !important;
    border-radius: 11px !important;
    background-color: #fff !important;
}
body.template-plannerpage #planner-index-back .planner-field .select2-container .select2-selection--single .select2-selection__rendered {
    font-size: 16.5px !important;
    font-weight: 650;
    line-height: 52px !important;
    padding-left: 15px !important;
    padding-right: 33px !important;
}
body.template-plannerpage #planner-index-back .planner-field .select2-container .select2-selection__arrow {
    height: 52px !important;
}
body.template-plannerpage #planner-index-back .planner-field {
    background: #fff;
    border-color: rgba(29, 52, 64, .16);
}
body.template-plannerpage #planner-index-back :is(.planner-search-panel--empty .planner-field, .planner-field--cue) {
    border-color: rgba(228, 114, 79, .36);
}
body.template-plannerpage #planner-index-back :is(.planner-search-panel--empty .planner-field, .planner-field--cue) .select2-container {
    position: relative;
    border-radius: 12px;
    isolation: isolate;
}
body.template-plannerpage #planner-index-back :is(.planner-search-panel--empty .planner-field, .planner-field--cue) .select2-selection--single {
    border-color: #e38a68 !important;
    box-shadow: 0 0 0 1px rgba(237, 129, 93, .30), 0 0 12px rgba(237, 129, 93, .10);
}
body.template-plannerpage #planner-index-back .planner-field:focus-within .select2-container::after {
    animation: none !important;
    opacity: 0 !important;
}
body.template-plannerpage #planner-index-back .planner-field:focus-within .select2-selection--single {
    border-color: #db694b !important;
    box-shadow: 0 0 0 3px rgba(239,115,83,.22) !important;
}

@media (max-width: 1260px) {
    body.template-plannerpage #planner-index-back #planner-other-results.planner-discovery-route-grid {
       grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }
}
@media (max-width: 860px) {
    body.template-plannerpage #planner-index-back #planner-other-results.planner-discovery-route-grid {
       grid-template-columns:minmax(0,1fr) !important;
    }
    body.template-plannerpage #planner-index-back #planner-other-results > .other-route-item .other-route-card {
       min-height:0;
    }
}
@media (prefers-reduced-motion: reduce) {
    body.template-plannerpage #planner-index-back :is(.planner-search-panel--empty .planner-field, .planner-field--cue) .select2-container::after {animation:none !important; opacity:0 !important;}
    body.template-plannerpage #planner-index-back #planner-other-results .other-route-card {animation:none !important; transition:none !important;transform:none !important;}
}


/* === PLANNER V1.5 — selector clarity, guided follow-on, compact browse links ===
   Scoped to the Planner only; main Select2 instances and AJAX remain untouched. */

/* Select2's allowClear glyph previously sat at left:14px, directly over the
   chosen resort name. Place it BETWEEN text and the native arrow instead. */
body.template-plannerpage #planner-index-back .planner-field .select2-container--default .select2-selection--single .select2-selection__clear {
    left: auto !important;
    right: 43px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 19px !important;
    height: 22px !important;
    line-height: 21px !important;
    text-align: center !important;
    color: #6f7680 !important;
}
body.template-plannerpage #planner-index-back .planner-field .select2-container .select2-selection--single .select2-selection__rendered {
    padding-left: 15px !important;
    padding-right: 72px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.template-plannerpage #planner-index-back .planner-field .select2-container--default .select2-selection--single .select2-selection__clear:hover {
    color: #bd573a !important;
}

/* Static coral outlines remain on both empty controls; only the next
   unselected control animates when a single selection is made. */
body.template-plannerpage #planner-index-back :is(
    .planner-search-panel--choose-airport #airport-field,
    .planner-search-panel--choose-resort #resort-field
) .select2-container {
    position: relative;
    isolation: isolate;
    border-radius: 12px;
}
body.template-plannerpage #planner-index-back :is(
    .planner-search-panel--choose-airport #airport-field,
    .planner-search-panel--choose-resort #resort-field
) .select2-selection--single {
    border-color: #e38a68 !important;
    box-shadow: 0 0 0 1px rgba(237, 129, 93, .30), 0 0 12px rgba(237, 129, 93, .10);
}
body.template-plannerpage #planner-index-back .planner-search-panel--empty .planner-field .select2-container::after {
    animation: none !important;
    opacity: 0 !important;
}
body.template-plannerpage #planner-index-back .planner-search-panel--empty #airport-field .planner-field-icon {
    animation: none !important;
}
body.template-plannerpage #planner-index-back .planner-field:focus-within .select2-container::after {
    animation: none !important;
    opacity: 0 !important;
}

/* Keep the two browse destinations inside the form's existing guidance row,
   not in a second quick-start module with duplicate inspiration content. */
body.template-plannerpage #planner-index-back .planner-form-help-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-top: 10px;
}
body.template-plannerpage #planner-index-back .planner-form-help-row .planner-next-step-copy {
    margin-top: 0;
    flex: 1 1 280px;
    min-width: 0;
    line-height: 1.45;
}
body.template-plannerpage #planner-index-back .planner-browse-shortcuts {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-left: auto;
}
body.template-plannerpage #planner-index-back .planner-browse-shortcuts__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    white-space: nowrap;
    text-decoration: none;
    border-radius: 9px;
    border: 1px solid rgba(218, 108, 74, .45);
    background: #fff;
    color: #9e422c;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.25;
    transition: background-color .16s ease, border-color .16s ease;
}
body.template-plannerpage #planner-index-back .planner-browse-shortcuts__link:hover,
body.template-plannerpage #planner-index-back .planner-browse-shortcuts__link:focus-visible {
    background: #fff0e9;
    border-color: #e46e4d;
    color: #843921;
}
body.template-plannerpage #planner-index-back .planner-browse-shortcuts__link svg {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
@media (max-width: 760px) {
    body.template-plannerpage #planner-index-back .planner-browse-shortcuts {
        margin-left: 0;
    }
}
@media (prefers-reduced-motion: reduce) {
    body.template-plannerpage #planner-index-back :is(
        .planner-search-panel--choose-airport #airport-field,
        .planner-search-panel--choose-resort #resort-field,
        .planner-field--cue
    ) .select2-container::after {
        animation: none !important;
        opacity: 0 !important;
    }
    body.template-plannerpage #planner-index-back .planner-browse-shortcuts__link {
        transition: none !important;
    }
}


/* === PLANNER V1.11 — VISIBLE, CONTINUOUS CORAL BREATHING CUE ===
   No pseudo-element glint, rotating gradient, motion path, opacity-only pulse
   or movement of the real input. Animate the OUTER field shadow directly, so
   Select2 cannot cover it. Never dim the outline to zero, even between peaks.

   Empty state: quiet static coral outlines on both selects.
   One selected: a gentle, clearly visible rising-and-falling shadow on the
   still-unselected field. Both selected: the Build CTA receives it instead.
   Hover/focus: steady visible halo, no jumping or disappearing effect.
*/
body.template-plannerpage #planner-index-back .planner-field .select2-container::after,
body.template-plannerpage #planner-index-back .planner-field::after,
body.template-plannerpage #planner-index-back .planner-actions .planner-main-cta--ready::before {
    content: none !important;
    animation: none !important;
}

body.template-plannerpage #planner-index-back :is(
    .planner-search-panel--choose-airport #airport-field,
    .planner-search-panel--choose-resort #resort-field,
    .planner-field--cue
) {
    position: relative;
    border-color: rgba(230, 113, 78, .70);
    /* Box-shadow never changes hit targets or Select2 geometry. */
    animation: planner-v111-coral-breathe 4.8s ease-in-out infinite;
}
body.template-plannerpage #planner-index-back .planner-actions .planner-main-cta--ready {
    position: relative;
    border-color: #ef8b69 !important;
    animation: planner-v111-cta-breathe 4.8s ease-in-out infinite;
}

@keyframes planner-v111-coral-breathe {
    0%, 100% {
        box-shadow: 0 0 0 1px rgba(235, 115, 80, .32),
                    0 0 9px rgba(236, 111, 75, .12),
                    0 4px 11px rgba(20, 37, 48, .065);
    }
    50% {
        box-shadow: 0 0 0 2px rgba(239, 115, 83, .66),
                    0 0 0 6px rgba(239, 115, 83, .135),
                    0 8px 27px rgba(226, 98, 64, .22);
    }
}
@keyframes planner-v111-cta-breathe {
    0%, 100% {
        box-shadow: 0 0 0 1px rgba(241, 132, 95, .39),
                    0 0 10px rgba(239, 115, 83, .12),
                    0 7px 16px rgba(8, 23, 33, .20);
    }
    50% {
        box-shadow: 0 0 0 2px rgba(250, 140, 103, .79),
                    0 0 0 6px rgba(239, 115, 83, .16),
                    0 9px 25px rgba(226, 98, 64, .29);
    }
}

/* Don't blank the guidance when pointer is over the input/button. Pause the
   animation and use a stable coral focus halo instead. */
body.template-plannerpage #planner-index-back :is(
    .planner-search-panel--choose-airport #airport-field,
    .planner-search-panel--choose-resort #resort-field,
    .planner-field--cue
):is(:hover, :focus-within) {
    animation: none !important;
    box-shadow: 0 0 0 2px rgba(239, 115, 83, .56),
                0 0 0 5px rgba(239, 115, 83, .10),
                0 7px 20px rgba(228, 100, 70, .18);
}
body.template-plannerpage #planner-index-back .planner-actions .planner-main-cta--ready:is(:hover, :focus-visible, :active) {
    animation: none !important;
    box-shadow: 0 0 0 2px rgba(249, 137, 100, .70),
                0 0 0 5px rgba(239, 115, 83, .13),
                0 8px 21px rgba(226, 98, 64, .24) !important;
}
body.template-plannerpage #planner-index-back .planner-actions .planner-main-cta--ready:disabled {
    animation: none !important;
    box-shadow: none !important;
}

@media (prefers-reduced-motion: reduce) {
    body.template-plannerpage #planner-index-back :is(
        .planner-search-panel--choose-airport #airport-field,
        .planner-search-panel--choose-resort #resort-field,
        .planner-field--cue
    ),
    body.template-plannerpage #planner-index-back .planner-actions .planner-main-cta--ready {
        animation: none !important;
        box-shadow: 0 0 0 2px rgba(239, 115, 83, .46),
                    0 0 0 5px rgba(239, 115, 83, .10);
    }
}