/* Variant Request block injected into the editor-managed Classic
   accordion content (.package_accordion-content) on the booking page.
   Two columns sit side-by-side >= 992 (.col-lg-6 / .col-md-6), then
   stack at <= 991 because Bootstrap's .col-md-6 collapses. Below 992
   we wrap each column as a clearly separated card so the dashed
   divider doesn't read as a misalignment between unequal-height
   columns, and the user can clearly tell the two sub-packages apart. */
.bks-variant-accordion-disclaimer {
    margin: 6px 0 14px;
    color: #45545f;
    font-size: 13px;
    font-style: italic;
    text-align: center;
}
.bks-variant-request-block {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 12px;
    padding: 10px 12px;
    border-top: 1px dashed rgba(120, 197, 219, 0.6);
}
.bks-variant-request-price {
    font-family: 'ChivoMono-Regular', monospace;
    font-size: 18px;
    color: #0a2540;
    white-space: nowrap;
}
.bks-variant-request-price .bookCurrency {
    color: #78c5db;
    margin-right: 4px;
}
span.bookingButton.bks-classic-variant-btn {
    width: auto;
    height: auto;
    line-height: 1.2;
    padding: 10px 36px;
    font-size: 14px;
    border-radius: var(--wwh-btn-radius, 8px);
}

/* < 992: each variant column becomes its own light-blue card so the two
   sub-packages read as distinct boxes (no more dashed-divider misalign,
   no more ambiguous 'is this still part of Classic?'). */
@media (max-width: 991px) {
    .bookContent .package_accordion-content > .row.single_row {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    .bookContent .package_accordion-content > .row.single_row > .col-md-6 {
        width: 100%;
        max-width: 100%;
        background: #eaf6fb;
        border: 1px solid rgba(120, 197, 219, 0.4);
        border-radius: 8px;
        padding: 16px 18px;
    }
    .bookContent .package_accordion-content > .row.single_row > .col-md-6 h3 {
        margin-top: 0;
        color: #0a2540;
    }
    .bks-variant-request-block {
        border-top: 1px solid rgba(120, 197, 219, 0.6);
        margin-top: 10px;
        padding: 10px 0 0;
    }
}
@media (max-width: 600px) {
    .bks-variant-request-block {
        flex-direction: column;
        gap: 8px;
    }
}

/* LP photo gallery 768-991: 3-col layout. Items had flex-basis 33.333%
   which combined with the inter-item gap exceeded 100% wrapper width
   (~912 / 900) so the third thumbnail wrapped. Tighten basis. */
@media (min-width: 769px) and (max-width: 991px) {
    body.page-template-template-lp-canadian-powder-snow #galleryWrapper > div {
        flex: 1 0 32%;
        max-width: 32%;
    }
    body.page-template-template-lp-canadian-powder-snow #galleryWrapper .galTitle,
    body.page-template-template-lp-canadian-powder-snow #galleryWrapper .galDesc {
        font-size: 16px;
    }
}

/* LP hero spacing >= 768. Two competing constraints:
   - The lp-2024 hero content is ~570 px tall.
   - The site's <header> is position:fixed and ~206 px tall on desktop
     (logo bar + main nav + secondary stripe), which overlays the top of
     #pageHeader.
   So pageHeader needs height >= header + hero + breathing space. Use
   flexbox to vertically center the hero in the remaining space below
   the fixed header so it reads harmoniously without a huge empty band.
   Inner .container.h100 gets an explicit parent height (NOT just
   min-height) so its 100% resolves. */
/* Weather widget belongs to the global header. Hide it on the new LP
   template - the hero box already carries the marketing message and
   the weather strip just adds clutter at the top. */
body.page-template-template-lp-canadian-powder-snow .weather_header_wrapper {
    display: none !important;
}

/* "SCROLL" hint in the hero - the legacy element is a rotated -90deg
   text + horizontal :before line. Replace the English-only 'Scroll'
   text with a CSS chevron-down arrow (universal, no translation
   required) and add a subtle 'drift down' loop + line-pulse so it
   nudges visitors toward the booking form below. The rotation makes
   local x map to visual y (inverted), so animating the X translate
   down creates a downward visual movement. The chevron uses border
   tricks rotated 135 deg in local frame which composes with the
   parent's -90 deg rotation to a visually +45 deg 'down' chevron.
   Respects prefers-reduced-motion. */
body.page-template-template-lp-canadian-powder-snow #scroll-to-next-section {
    /* Hide the literal 'Scroll' text without collapsing the element's
       width (the rotation + translate3d positioning depends on the
       element having a non-zero size). */
    color: transparent;
    text-shadow: none;
}
body.page-template-template-lp-canadian-powder-snow #scroll-to-next-section::after {
    content: '';
    position: absolute;
    /* right:12 (instead of 0) shifts the chevron toward the line in the
       unrotated frame, halving the visual gap between the chevron tip
       and the top of the line in the rotated layout. */
    right: 12px;
    top: 50%;
    width: 14px;
    height: 14px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: translateY(-50%) rotate(135deg);
    transition: opacity 0.5s ease-in-out;
}

/* Move the scroll indicator to the far-left edge in the 1200-1290 px
   band too. The legacy rule at @media (max-width:1199) sets left:-50,
   but at >= 1200 the default left:-10 puts the indicator inside the
   wider container, overlapping the hero-box. Extend the same far-left
   placement up to 1290 px. Scoped to the new LP body class to leave
   the legacy /heliskiing-in-canadian-powder-snow/ untouched. */
@media (min-width: 1200px) and (max-width: 1290px) {
    body.page-template-template-lp-canadian-powder-snow #scroll-to-next-section {
        left: -50px;
    }
}
@media (prefers-reduced-motion: no-preference) {
    body.page-template-template-lp-canadian-powder-snow #scroll-to-next-section.active {
        animation: bks-scroll-hint 2.4s ease-in-out infinite;
    }
    body.page-template-template-lp-canadian-powder-snow #scroll-to-next-section.active::before {
        animation: bks-scroll-line-pulse 2.4s ease-in-out infinite;
    }
}
@keyframes bks-scroll-hint {
    0%, 100% { transform: rotate(-90deg) translate3d(100%, 0, 0); }
    50%      { transform: rotate(-90deg) translate3d(90%, 0, 0); }
}
@keyframes bks-scroll-line-pulse {
    0%, 100% { opacity: 1;    width: 240px; }
    50%      { opacity: 0.55; width: 220px; }
}

/* Breathing room around the inner .hero-box so the headline and
   'Plan my Trip' button don't sit flush against the blue card edges.
   Margins differ per breakpoint - mobile gets a tighter foot to keep
   the hero compact, wide desktop gets a larger top to compensate the
   bigger viewport visual weight. */
body.page-template-template-lp-canadian-powder-snow .lp-2024.big-box .hero-box {
    margin-top: 50px;
    margin-bottom: 50px;
}
@media (max-width: 767px) {
    body.page-template-template-lp-canadian-powder-snow .lp-2024.big-box .hero-box {
        margin-top: 60px;
        margin-bottom: 0;
    }
}
@media (min-width: 1200px) {
    body.page-template-template-lp-canadian-powder-snow .lp-2024.big-box .hero-box {
        margin-top: 80px;
        margin-bottom: 50px;
    }
}

/* .blue-button-rounded was historically a <span>; converted to a
   <button> for accessibility. Reset the browser's button defaults
   (border, padding, font inheritance) so the visual styling stays
   identical, and keep the button shrink-wrapped to its text + padding
   instead of stretching to the parent's width. */
button.blue-button-rounded {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background-color: #6FBDDC;
    font-family: "Montserrat-SemiBold", sans-serif;
    color: #fff;
    cursor: pointer;
    /* Auto-width + inline so consecutive flow doesn't fill the row.
       The legacy .title-button-holder display:table-shrinkwrap parent
       already sized the original <span> correctly; explicit
       inline-flex on the button itself guarantees it across all
       contexts (hero, intro, gallery). */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    align-self: flex-start;
}

@media (min-width: 769px) {
    /* Hero height is content-driven: pageHeader = padding-top + lp-2024
       (= hero-box + 50 top + 50 bottom margin) + padding-bottom. So
       longer translated copy makes the hero taller, without manually
       bumping a fixed height. */
    body.page-template-template-lp-canadian-powder-snow #pageHeader {
        height: auto;
        min-height: 0;
        padding-top: 170px;
        padding-bottom: 0;
        display: block;
    }
    body.page-template-template-lp-canadian-powder-snow #pageHeader > .container.h100 {
        height: auto;
    }
    body.page-template-template-lp-canadian-powder-snow #pageHeader .lp-2024,
    body.page-template-template-lp-canadian-powder-snow #pageHeader .lp-2024.big-box {
        position: static;
        bottom: auto;
        top: auto;
        margin: 0 auto;
    }
}

/* Intro section "Experience unlimited descents..." - clean 50/50 split
   between the video link (image-wrapper) and the text column on the
   new LP. Legacy text-wrapper had flex:1 + margin 0 115px which broke
   the symmetry on most viewports. */
@media (min-width: 769px) {
    body.page-template-template-lp-canadian-powder-snow #lpis-image-text-wrapper {
        align-items: stretch;
        gap: 40px;
    }
    body.page-template-template-lp-canadian-powder-snow #lpisitw-image-wrapper {
        flex: 1 1 50%;
        max-width: 50%;
        width: 50%;
    }
    body.page-template-template-lp-canadian-powder-snow #lpisitw-text-wrapper {
        flex: 1 1 50%;
        max-width: 50%;
        margin: 0;
        padding: 0 30px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

/* LP nights-tab #2 (6 Nights / 5 Days). The legacy style.css:11173-11179
   only handles option_1 + option_3. Without these rules option_2's
   container is always visible (default block) and overlaps the active
   tab so 5-night / 7-night switches appear broken. Mirror the pattern. */
#lp_form_option_2_container {
    display: none;
}
#lp_form_2024_option_2:checked ~ #lp_form_option_2_container {
    display: block;
}

/* Hide the chevron arrow on a disabled selectric so it reads as a
   passive label rather than an interactive dropdown. Applies to the
   single-season case on both LP filter row and the booking-page season
   selector. */
.filter-column.is-single-season .selectric-wrapper .selectric .button,
form#lp-form .lp-filters-holder .filter-column.is-single-season .selectric-wrapper .selectric .button,
.selectric-wrapper.selectric-disabled .selectric .button {
    display: none;
}

/* Booking-Season frontend: minimal overrides only.
   The new templates inherit ALL their visual styling from style.css
   (the existing /usca/book/ + /heliskiing-in-canadian-powder-snow/
   layouts). The two new templates `template-booking-season.php` and
   `template-lp-canadian-powder-snow.php` are 1:1 structural clones of
   `template-book-new.php` and `template-landing-page-2024.php` -
   identical class names, identical DOM, identical CSS hits. The
   booking-system-specific tweaks below are additive only. */

/* Booking modal must sit above the legacy weather-modal (.modal_background_bg
   z-index 101 + its .modalDesc z-index 103) which is part of the global
   header.php. Without a higher z-index it intercepts clicks on the booking
   form Submit. Override here. */
.bks-modal-background { z-index: 9999 !important; }
.bks-modal-background .bks-modal-container,
.bks-modal-background .modal_from_container { z-index: 10000 !important; position: relative; }

/* Floating-label pattern for the booking-modal form, mirroring the
   newsletter form treatment from style.css:1582-1602. The HTML pattern
   is `<input placeholder=" "><label.bks-floating-label>...` so the
   :placeholder-shown selector reliably tracks empty state. The literal
   space in the placeholder is hidden via ::placeholder { color:transparent }.
   .form-field is already position:relative in style.css:6655. */
form#bookForm .formFields .form-field input,
form#bookForm .formFields .form-field textarea {
    width: 100%;
}
form#bookForm .formFields .form-field input::placeholder,
form#bookForm .formFields .form-field textarea::placeholder {
    color: transparent;
}
form#bookForm .formFields .bks-floating-label {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #879097;
    font-family: "Montserrat-SemiBold", sans-serif;
    font-size: 1.5rem;
    line-height: 1;
    pointer-events: none;
    transition: top         .25s ease,
                transform   .25s ease,
                font-size   .25s ease,
                letter-spacing .25s ease,
                color       .25s ease;
}
/* Textarea label sits at the top, not vertically centered */
form#bookForm .formFields .form-field-textarea .bks-floating-label {
    top: 18px;
    transform: translateY(0);
}
form#bookForm .formFields .form-field input:focus ~ .bks-floating-label,
form#bookForm .formFields .form-field input:not(:placeholder-shown) ~ .bks-floating-label,
form#bookForm .formFields .form-field textarea:focus ~ .bks-floating-label,
form#bookForm .formFields .form-field textarea:not(:placeholder-shown) ~ .bks-floating-label,
form#bookForm .formFields .form-field-select select:focus ~ .bks-floating-label,
form#bookForm .formFields .form-field-select select:valid ~ .bks-floating-label {
    top: 6px;
    transform: translateY(0);
    font-size: 1rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #45545f;
}

/* Slightly more inner padding-top so the typed text doesn't collide
   with the floated mini-label. Existing form#bookForm input has
   padding 0 20px - we add a top inset only. */
form#bookForm .formFields .form-field input {
    padding-top: 12px;
    padding-bottom: 0;
}
form#bookForm .formFields .form-field-textarea textarea {
    padding-top: 28px;
}

/* Guests dropdown: native <select> styled to match the input fields next
   to it. Visual parity with the bookForm <input>: same height (58px from
   style.css:4438), same bg #ececec, same border #dddddd, same 10px
   bottom margin, same Montserrat-Bold typography. Padding-top 12px
   matches what the inputs use to clear the floating mini-label. */
form#bookForm .formFields .form-field-select select {
    width: 100%;
    font-size: 1.5rem;
    font-family: "Montserrat-Bold", sans-serif;
    color: #45545f;
    padding: 12px 40px 0 20px;
    border: 1px solid #dddddd;
    background-color: #ececec;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path fill='%23878c92' d='M6 8 0 0h12z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 17px center;
    background-size: 12px 8px;
    cursor: pointer;
    height: 58px;
    margin-bottom: 10px;
    box-sizing: border-box;
}
form#bookForm .formFields .form-field-select select:focus {
    outline: none;
    border-color: #78c5db;
}

/* LP Form (template-forms/lp_canadian_powder_snow_form.php) -
   mirror the booking-modal floating-label treatment for the inline
   contact-fields section. .field-wrapper is already position:relative
   in style.css so the absolutely-positioned label anchors correctly. */
form#lp-form .field-wrapper input::placeholder,
form#lp-form .field-wrapper textarea::placeholder {
    color: transparent;
}
form#lp-form .field-wrapper .lp-floating-label {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #879097;
    font-family: "Montserrat-SemiBold", sans-serif;
    font-size: 1.5rem;
    line-height: 1;
    pointer-events: none;
    transition: top         .25s ease,
                transform   .25s ease,
                font-size   .25s ease,
                letter-spacing .25s ease,
                color       .25s ease;
}
form#lp-form .field-wrapper-textarea .lp-floating-label {
    top: 18px;
    transform: translateY(0);
}
form#lp-form .field-wrapper input:focus ~ .lp-floating-label,
form#lp-form .field-wrapper input:not(:placeholder-shown) ~ .lp-floating-label,
form#lp-form .field-wrapper textarea:focus ~ .lp-floating-label,
form#lp-form .field-wrapper textarea:not(:placeholder-shown) ~ .lp-floating-label,
form#lp-form .field-wrapper-select select:focus ~ .lp-floating-label,
form#lp-form .field-wrapper-select select:valid ~ .lp-floating-label {
    top: 6px;
    transform: translateY(0);
    font-size: 1rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #45545f;
}
form#lp-form .field-wrapper input {
    padding-top: 12px;
    padding-bottom: 0;
}
form#lp-form .field-wrapper-textarea textarea {
    padding-top: 28px;
}

/* Guests dropdown: native <select> styled to match the input fields next
   to it. Dimensions mirror the LP input box from style.css:11101 so the
   select sits at the same height as the neighbouring inputs (28+18+17+2
   = 65px). The :valid pseudo drives the floating-label (selects don't
   support :placeholder-shown). Custom chevron is inlined SVG. */
form#lp-form .field-wrapper-select select {
    width: 100%;
    font-family: "Montserrat-SemiBold", sans-serif;
    font-size: 18px;
    line-height: 28px;
    padding: 18px 40px 17px 17px;
    color: #5d6a74;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background-color: #fff;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path fill='%23878c92' d='M6 8 0 0h12z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 17px center;
    background-size: 12px 8px;
    cursor: pointer;
    height: 65px;
    box-sizing: border-box;
}
form#lp-form .field-wrapper-select select:focus {
    outline: none;
    border-color: #78c5db;
}

/* Submit-button loading state. The current LEXO Captcha build does NOT
   auto-disable form submit buttons (the documented behaviour in
   CLAUDE-lexo-captcha.md "What happens on submit" is missing from the
   deployed bundle). The custom JS in js/form-submit-loader.js sets
   :disabled on submit and re-enables on lexocaptcha:response. The CSS
   below piggy-backs on :disabled to show a spinner so the user gets
   unambiguous feedback during the 5+s server roundtrip (CleverReach +
   admin email + visitor confirm).

   Two submit buttons share the same loader visual:
   - #lp-submit (LP Canadian Powder Snow inline form)
   - #contactSubmit (Booking-Season modal booking-request form)

   Specificity beats the legacy gray-out at style.css:10146
   (#lp-submit[disabled]) and the legacy #contactSubmit base rules. */
form#lp-form #lp-submit:disabled,
form#bookForm #contactSubmit:disabled {
    background-color: #5fb5d3;
    color: rgba(255, 255, 255, 0.85);
    cursor: wait;
    position: relative;
    /* Symmetric padding keeps the centred button text in place when the
       spinner appears. padding-right alone would shift the text left; the
       spinner is absolutely positioned and sits inside the right padding. */
    padding-left: 56px;
    padding-right: 56px;
}
form#lp-form #lp-submit:disabled:hover,
form#bookForm #contactSubmit:disabled:hover {
    background-color: #5fb5d3;
    /* Cancel the unified-button hover lift+brightness while loading - moving
       a button that the user can't click is confusing. */
    filter: none;
    transform: none;
    box-shadow: none;
}
form#lp-form #lp-submit:disabled::after,
form#bookForm #contactSubmit:disabled::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 22px;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: lp-submit-spin 0.7s linear infinite;
}
@keyframes lp-submit-spin {
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    form#lp-form #lp-submit:disabled::after,
    form#bookForm #contactSubmit:disabled::after {
        animation: none;
        border-top-color: rgba(255, 255, 255, 0.7);
    }
}
/* Legacy style.css:11098 reset margin-bottom to 0 for input[type="text"]
   inside .lp-form-2024-top but NOT for input[type="email"]. With flex
   align-items:stretch on the row, the taller email wrapper stretched
   the phone wrapper next to it - and the floating-label position:50%
   then drifted off centre by ~5 px. Reset email + tel + url too. */
form#lp-form .lp-form-2024-top input[type="email"],
form#lp-form .lp-form-2024-top input[type="tel"],
form#lp-form .lp-form-2024-top input[type="url"] {
    margin-bottom: 0;
}

/* The guests + message field-wrappers sit directly after the
   .lp-form-2024-top 2x2 grid. Below 768 the inputs already have a
   10 px bottom margin between rows so the rhythm is fine. >= 768 the
   2x2 row has its margins reset (so rows align cleanly) and the next
   sibling fields end up flush against the email/phone row. Add
   breathing room above guests + message to restore vertical rhythm. */
@media (min-width: 769px) {
    form#lp-form .lp-form-2024-top + .field-wrapper,
    form#lp-form .lp-form-2024-top + .field-wrapper + .field-wrapper {
        margin-top: 14px;
    }
}

/* Override the booking-page .book_package_info_wrapper rule
   (style.css:295-299 is `width:30px; right:20px; text-align:center` which
   collapses the wrapper to a tiny strip when used inline next to a column
   header). For the LP price-title context render it inline-block so the
   info-circle sits next to PRICE on the same baseline; tooltip still
   anchors via the .relative parent. The legacy rule has high specificity
   on mobile, so use !important on display + width to win. */
form#lp-form .price-title {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}
form#lp-form .price-title .book_package_info_wrapper {
    display: inline-block !important;
    width: auto !important;
    right: auto !important;
    margin: 0;
    vertical-align: middle;
    color: #fff;
    font-size: 14px;
    line-height: 1;
}
form#lp-form .price-title .book_package_info_wrapper i {
    color: #fff;
}
form#lp-form .price-title .book_package_info_wrapper:hover {
    color: #0a2540;
}
form#lp-form .price-title .hidden_book_info {
    width: 240px;
    color: #fff;
    font-weight: normal;
    text-transform: none;
    letter-spacing: 0;
}
@media (max-width: 768px) {
    /* On mobile keep the tooltip inside the viewport - shift its anchor
       to the right edge of the icon instead of centering. */
    form#lp-form .price-title .hidden_book_info {
        right: 0;
        left: auto;
        transform: none;
        width: 200px;
    }
    form#lp-form .price-title .hidden_book_info:after {
        left: auto;
        right: 8px;
        transform: none;
    }
}

/* Filter row: gap between Season + Display Currency dropdowns. The shared
   .flex helper centers + aligns but doesn't space its children, so without
   this the two filter cards sat flush. */
form#lp-form .lp-filters-holder {
    gap: 16px;
    flex-wrap: wrap;
}
/* Selectric inside the filter cards: legacy rule from style.css drops the
   right-side label padding to 0 below 991 px, which lets the value text
   collide with the dropdown chevron. Add right inset back so the value
   stays clear of the arrow at every breakpoint. */
form#lp-form .lp-filters-holder .selectric .label {
    padding-right: 50px;
}

/* Below 768 px (canonical mobile breakpoint, see CLAUDE.md) the filter
   row stacks. Above 768 px both filter columns sit side-by-side. */
@media (max-width: 768px) {
    form#lp-form .lp-filters-holder {
        display: block;
    }
}

/* The legacy 600 px breakpoint pulled the snowflake/dollar icon to
   left:-15px and dropped the label padding to `38px 0 17px 55px`,
   which on the new LP makes the icon flush against the column's left
   edge and the value text butt up against the chevron arrow. Restore
   sane breathing room: 6 px between the column edge and the icon,
   55 px label-left for the icon, 50 px label-right for the chevron. */
@media (max-width: 600px) {
    form#lp-form .lp-filters-holder .filter-column .filter-title-icon {
        left: 6px;
    }
    form#lp-form .lp-filters-holder .selectric .label {
        padding: 38px 50px 17px 73px;
    }
}

/* Mobile (<= 768 px) - tighten the hero + section spacing on the new LP.
   Legacy template kept #pageHeader min-height:900 + lp-2024 absolute
   bottom:50, leaving ~180 px of empty space between the global header
   and the hero box. Reset to natural-flow with modest padding. The
   site's <header> is position:fixed and ~160 px tall on mobile, so
   pageHeader needs top-padding >= header height or the lp-2024 hero
   sits behind the fixed header. Same for intro / form / gallery
   sections - reduce the 40 px legacy padding down to a tighter ~20 px. */
@media (max-width: 768px) {
    body.page-template-template-lp-canadian-powder-snow #pageHeader {
        height: auto;
        min-height: 0;
        padding: 130px 15px 30px;
    }
    body.page-template-template-lp-canadian-powder-snow #pageHeader .lp-2024,
    body.page-template-template-lp-canadian-powder-snow #pageHeader .lp-2024.big-box {
        position: static;
        bottom: auto;
        left: auto;
        right: auto;
    }
    /* "UNIQUE CANADIAN POWDER SNOW" + 2-column intro: stack and center
       on mobile. The default left-aligned 2-column layout looks
       awkward at narrow widths. */
    body.page-template-template-lp-canadian-powder-snow #lpis-image-text-wrapper {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    body.page-template-template-lp-canadian-powder-snow .lpis-top-content,
    body.page-template-template-lp-canadian-powder-snow #lpisitw-text-wrapper,
    body.page-template-template-lp-canadian-powder-snow #lpisitw-text {
        text-align: center;
    }
    body.page-template-template-lp-canadian-powder-snow .lpis-top-content p,
    body.page-template-template-lp-canadian-powder-snow #lpisitw-text p {
        text-align: center;
    }
    /* Tighten section paddings - 25 px instead of legacy 40. */
    body.page-template-template-lp-canadian-powder-snow #lp-intro-section,
    body.page-template-template-lp-canadian-powder-snow #lp-form-section {
        padding: 25px 0;
    }
    /* Gallery section needs bottom-padding clear of the Skeena banner
       in the global footer (its absolutely-positioned wrf_logo extends
       UP into the gallery area). */
    body.page-template-template-lp-canadian-powder-snow #lp-gallery-section {
        padding: 25px 0 100px;
    }
    body.page-template-template-lp-canadian-powder-snow #lpfs-top-content {
        margin-bottom: 10px;
    }
    body.page-template-template-lp-canadian-powder-snow #lpfs-top-content p {
        margin-bottom: 0;
    }
    /* Filter-row icons sit in the top-left of each filter card. The
       legacy 600 px override pushed them to left:-15 (flush past the
       column edge); the user wants a small breathing space, not flush.
       Set 3 px in. */
    body.page-template-template-lp-canadian-powder-snow form#lp-form .lp-filters-holder .filter-column .filter-title-icon {
        left: 3px;
    }
}

/* Desktop + tablet: bottom clearance for the Skeena partner banner
   that sits at the top of the global footer (.footer_wrf_logo +
   .footer_wrf_triangle absolute-position past their parent's
   bottom edge). Without breathing room the banner overlaps the
   gallery thumbnails. */
@media (min-width: 769px) {
    body.page-template-template-lp-canadian-powder-snow #lp-gallery-section {
        padding-bottom: 130px;
    }
}

/* Photo gallery thumbnail overlay text (`.galDesc`) wraps and gets
   truncated for "Skiing / Snowboarding" on the new LP. The text
   container has a fixed font that's too large for its width. Reduce
   font and apply ellipsis-safe sizing. */
body.page-template-template-lp-canadian-powder-snow #galleryWrapper .galTitle,
body.page-template-template-lp-canadian-powder-snow #galleryWrapper .galDesc {
    font-size: 18px;
    line-height: 1.3;
    word-break: break-word;
}

/* Video play button - keep the legacy circular PNG (more elegant than
   any CSS-drawn shape) but kill its 0.7 opacity / scale 0.9 idle
   state so it reads clearly on any preview photo. Add a soft
   drop-shadow for contrast and a slight overlay darken so the white
   button never blends with bright snow shots. The hover scales the
   PNG up while the background image stays put - so the button
   appears to zoom MORE than the photo, mimicking the original
   subtle "into focus" feel. */
body.page-template-template-lp-canadian-powder-snow #lpvs-cs-video #lpvs-vs-video-overlay {
    background-color: rgba(0, 0, 0, 0.25) !important;
}
body.page-template-template-lp-canadian-powder-snow #lpvs-cs-video #lpvs-vs-video-overlay::after {
    transform: translate(-50%, -50%) scale(1) !important;
    opacity: 1 !important;
    filter: drop-shadow(0 6px 22px rgba(0, 0, 0, 0.55));
    transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out;
}
body.page-template-template-lp-canadian-powder-snow #lpvs-cs-video:hover #lpvs-vs-video-overlay::after {
    transform: translate(-50%, -50%) scale(1.15) !important;
    filter: drop-shadow(0 8px 26px rgba(0, 0, 0, 0.65));
}

/* Body font-size consistency: on the LP, hero box body copy + intro
   right_content paragraphs + form bottom info paragraphs all use
   project-standard 16-18 px on mobile. Keep mobile body at 16 px,
   desktop at 18 px. */
body.page-template-template-lp-canadian-powder-snow .lp-2024.big-box .hero-box p:not(.ts_80):not(.ts_106) {
    font-size: 18px;
    line-height: 1.5;
}
body.page-template-template-lp-canadian-powder-snow #lpisitw-text p:not(.ts_47) {
    font-size: 18px;
    line-height: 1.5;
}
@media (max-width: 768px) {
    body.page-template-template-lp-canadian-powder-snow .lp-2024.big-box .hero-box p:not(.ts_80):not(.ts_106),
    body.page-template-template-lp-canadian-powder-snow #lpisitw-text p:not(.ts_47),
    body.page-template-template-lp-canadian-powder-snow #lpfs-text-content p {
        font-size: 16px;
        line-height: 1.5;
    }
}

/* Night tabs (7 / 5 night) - the legacy style.css 991 px override stacks
   them with a circular radio indicator. The new LP UX wants them
   side-by-side until 768 px. Scope this override to the new LP template
   only via body class so /heliskiing-in-canadian-powder-snow/ keeps the
   legacy behaviour. */
@media (min-width: 769px) and (max-width: 991px) {
    body.page-template-template-lp-canadian-powder-snow .lp-radio-number-of-overnight-wrapper label.button-label {
        flex: 1;
        margin-bottom: 0;
        border-radius: 6px 6px 0 0;
    }
    body.page-template-template-lp-canadian-powder-snow .lp-radio-number-of-overnight-wrapper label.button-label:before {
        display: none;
    }
}

/* Filter columns (Season / Month / Display Currency) - whole-column hitbox.
   The click anywhere in .filter-column is forwarded to the selectric control
   by js/booking-filter-hitbox.js; this block is the visual side:
   - user-select:none so a double-click never blue-highlights the label text;
   - an inset rounded #48b1c5 panel as the hover cue (button-like). Inset so
     it never collides with the rounded #filters-holder / LP filter-card
     corners. On hover the label, sub-label and chevron invert to white and
     the icon scales up slightly + goes white - layered cues that the field
     is clickable;
   - hover + pointer cursor suppressed when the filter is single-season or
     otherwise disabled (selectric adds .selectric-disabled) - nothing opens. */
.filter-column {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}
.filter-column:not(.is-single-season):not(:has(.selectric-disabled)) {
    cursor: pointer;
}
.filter-column .filter-title-icon {
    z-index: 1;
    transition: color .2s ease;
}
.filter-column .filter-title-icon .icon {
    transition: filter .2s ease, transform .2s ease;
}
.filter-column .selectric-wrapper {
    position: relative;
    z-index: 1;
}
.filter-column .selectric-wrapper .selectric .label {
    transition: color .2s ease;
}
.filter-column .selectric-wrapper .selectric .button {
    transition: transform .25s ease-in-out, color .2s ease;
}
.filter-column::before {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: 6px;
    background: #48b1c5;
    opacity: 0;
    transition: opacity .2s ease;
    pointer-events: none;
    z-index: 0;
}
.filter-column:not(.is-single-season):not(:has(.selectric-disabled)):hover::before {
    opacity: 1;
}
.filter-column:not(.is-single-season):not(:has(.selectric-disabled)):hover .selectric-wrapper .selectric .label,
.filter-column:not(.is-single-season):not(:has(.selectric-disabled)):hover .filter-title-icon,
.filter-column:not(.is-single-season):not(:has(.selectric-disabled)):hover .selectric-wrapper .selectric .button {
    color: #fff;
}
.filter-column:not(.is-single-season):not(:has(.selectric-disabled)):hover .filter-title-icon .icon {
    filter: brightness(0) invert(1);
    transform: scale(1.1);
}

/* Open filter dropdown items.
   - Resting selected item: dark-slate #41545f fill (white text + checkmark
     for contrast; the base #0f597e dark-blue would be unreadable on it).
   - Any item on hover (the selected one included): #48b1c5 fill, white
     text + checkmark - matches the field-hover colour. The li:hover rule
     is declared after li.selected at equal specificity, so a hovered
     selected item correctly shows the #48b1c5 hover, not the resting fill.
   - .15s transition for a soft colour change. */
.filter-column .selectric-wrapper .selectric-items li {
    transition: background-color .15s ease, color .15s ease;
}
.filter-column .selectric-wrapper .selectric-items li.selected {
    background: #41545f;
    color: #fff;
}
.filter-column .selectric-wrapper .selectric-items li.selected:after {
    color: #fff;
}
.filter-column .selectric-wrapper .selectric-items li:hover {
    background: #48b1c5;
    color: #fff;
}
.filter-column .selectric-wrapper .selectric-items li:hover:after {
    color: #fff;
}

/* LP season-block AJAX swap: dim the block while the new season loads.
   .is-loading is set by the season-change handler in
   template-lp-canadian-powder-snow.php and gone once the block is replaced. */
.number-of-overnight-stays-container {
    transition: opacity .15s ease;
}
.number-of-overnight-stays-container.is-loading {
    opacity: .5;
    pointer-events: none;
}

/* --- Submit-result panels (booking-request + LP forms) --------------------
   js/form-submit-loader.js fades the form out (.wwh-form-hiding) and reveals
   the matching .form-result panel (markup: includes/form-result-panels.php)
   on the lexocaptcha:response event. The panel is absolutely overlaid on the
   form (.wwh-form-shell), so the form keeps its box in flow and the modal /
   section never changes height - the swap is a pure cross-fade, no layout
   shift, no jitter. Root font-size is 9px, so 1rem = 9px. */
.wwh-form-shell {
    position: relative;
    /* js/form-submit-loader.js locks the shell to the form's height on submit
       and animates it down to the result-panel height (elegant collapse), so
       the panel never ends up above the viewport when the form was tall. */
    transition: height 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Only while collapsing: clip the still-fading (visibility:hidden) form so it
   does not briefly spill below the shrinking shell. */
.wwh-form-shell.wwh-form-collapsing {
    overflow: hidden;
}
form#bookForm,
form#lp-form {
    transition: opacity 0.3s ease;
}
form#bookForm.wwh-form-hiding,
form#lp-form.wwh-form-hiding {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.form-result {
    /* Overlaid on the form's box. The background is solid from the first
       frame (visibility toggle, no opacity fade), so the modal panel never
       lets the package list behind it show through during the transition.
       The gentle entrance is on .form-result-inner instead. */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    visibility: hidden;
}
.form-result.is-visible {
    visibility: visible;
}
.form-result-inner {
    max-width: 480px;
    margin: 0 auto;
    padding: 32px 26px 38px;
    text-align: center;
    /* Soft, slightly slow entrance - fades + rises into place. */
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.form-result.is-visible .form-result-inner {
    opacity: 1;
    transform: none;
}
.form-result-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #eaf6fb;
    color: #78c5db;
    margin-bottom: 18px;
}
.form-result-icon--error {
    background: #fdecea;
    color: #c0392b;
}
.form-result-heading {
    font-family: "Montserrat-Bold", sans-serif;
    font-size: 2.6rem;
    line-height: 1.25;
    color: #0a2540;
    margin: 0 0 12px;
}
.form-result-body {
    font-size: 2rem;
    line-height: 1.6;
    color: #45545f;
    margin: 0 auto;
}
.form-result-hint {
    font-size: 1.5rem;
    line-height: 1.55;
    color: #9aa3aa;
    margin: 16px auto 0;
}
.form-result-body a {
    color: #337ab7;
}
/* Close button - only meaningful inside the booking modal (the LP form is
   inline, nothing to close). Radius/transition/hover come from the unified
   button system in style.css. */
.form-result-close {
    display: none;
    margin: 24px auto 0;
    padding: 13px 40px;
    border: none;
    background: #78c5db;
    color: #fff;
    font-family: "Montserrat-SemiBold", sans-serif;
    font-size: 1.7rem;
}
.modal_from_container .form-result-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* The LP form section paints its snow photo via a fixed-height (639px)
   ::before. When the form collapses to the (shorter) result panel the
   section shrinks below that height, so without clipping the photo spills
   down over the Photo Gallery section beneath it. Clip it to the section.
   Safe in the normal (tall) state: the ::before fits and the form's
   dropdowns open well inside the section, far from its edges. */
.form-book-adventure {
    overflow: hidden;
}

/* LP inline forms (new LP + LP-2024) live inside section.form-book-adventure.
   Float the result over that section's light background instead of a flat
   white box. The booking modal (.modal_from_container) keeps its opaque
   panel - it must cover the package list behind it. */
.form-book-adventure .form-result {
    background: transparent;
}
/* On the light background the very light hint grey is hard to read - darken it. */
.form-book-adventure .form-result-hint {
    color: #5a6873;
}

/* The LEXO Captcha #l-notify toast is redundant once our panel shows. */
body.wwh-form-submitted #l-notify {
    display: none !important;
}

@media (max-width: 768px) {
    .form-result-inner {
        padding: 26px 18px 30px;
    }
    .form-result-heading {
        font-size: 2.2rem;
    }
    .form-result-body {
        font-size: 1.8rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wwh-form-shell,
    form#bookForm,
    form#lp-form,
    form#bookForm.wwh-form-hiding,
    form#lp-form.wwh-form-hiding,
    .form-result,
    .form-result-inner {
        transition: none;
    }
    .form-result-inner {
        transform: none;
    }
}


/* --- LP bed-option toggle (Double / Single room) -------------------------- */
.lp-bedoption {
    margin: 0px 0 20px;
    text-align: center;
}
.lp-bedoption-toggle {
    display: inline-flex;
    border: 1px solid #d4dde2;
    border-radius: 999px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 3px 20px 0 rgba(0, 0, 0, 0.13);
}
/* The native radio stays focusable (keyboard) but is visually hidden.
   The 3-class selector + explicit display beats the generic
   `.lp-radio-number-of-overnight-wrapper input[type="radio"] { display:none }`
   rule (specificity 0,2,1) which would otherwise make the radio unfocusable. */
.lp-bedoption .lp-bedoption-toggle .lp-bedoption-input {
    display: block;
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    overflow: hidden; white-space: nowrap;
}
.lp-bedoption-label {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 195px;
    padding: 13px 26px;
    cursor: pointer;
    line-height: 1.25;
    transition: background-color 0.2s ease, color 0.2s ease;
}
/* each segment is a clean half-pill - the active cyan fill then follows the
   rounded pill end instead of showing square corners */
.lp-bedoption-input[value="double_room"] + .lp-bedoption-label {
    border-radius: 999px 0 0 999px;
}
.lp-bedoption-input[value="single_room"] + .lp-bedoption-label {
    border-radius: 0 999px 999px 0;
}
.lp-bedoption-name {
    font-weight: 700;
    font-size: 16px;
    color: #0a2540;
}
.lp-bedoption-sub {
    font-size: 12.5px;
    color: #7b8893;
}
/* the selected segment fills its half flush in cyan - no drop shadow */
.lp-bedoption-input:checked + .lp-bedoption-label {
    background: #78c5db;
}
.lp-bedoption-input:checked + .lp-bedoption-label .lp-bedoption-name,
.lp-bedoption-input:checked + .lp-bedoption-label .lp-bedoption-sub {
    color: #fff;
}
.lp-bedoption-input:focus-visible + .lp-bedoption-label {
    outline: 2px solid #0a2540;
    outline-offset: -2px;
}
/* On phones the two 195px-min segments (~390px toggle) overflow the form
   column - let the toggle fill the column and the two segments share it. */
@media (max-width: 768px) {
    .lp-bedoption-toggle {
        display: flex;
        max-width: 100%;
    }
    .lp-bedoption-label {
        flex: 1 1 0;
        min-width: 0;
        padding: 13px 10px;
    }
}


/* --- LP filter dropdowns ------------------------------------------------- */
/* Keep the open Selectric list above the currency $ icon and the bed-option
   pill. The global `.sub_booking_converter .selectric-open` rule forces
   z-index:1, which let the $ icon (z-index:1) show through the open list. */
form#lp-form .lp-filters-holder .selectric-open {
    z-index: 100;
}

/* Same fix for the Booking page filter dropdowns (Season / Month / Currency):
   the open Selectric list must sit above the sibling filter columns' icons +
   labels. `.filter-column .selectric-wrapper { z-index:1 }` otherwise wins
   over `.selectric-open`, so the open list renders behind everything. */
#filters-holder .selectric-open {
    z-index: 100;
}

/* Breathing room below the guests dropdown - matches the 10px field rhythm
   of .lp-form-2024-top (the wrapper otherwise has margin:0 -> touches the
   comments box). */
form#lp-form .field-wrapper-select {
    margin-bottom: 10px;
}


/* The $ currency glyph (icon-icon37) renders visually larger + lower than the
   snowflake (icon-icon35) at the shared 42px size - bring it in line. */
form#lp-form .lp-filters-holder .filter-column .filter-title-icon .icon.icon-icon37 {
    font-size: 34px;
}


/* Package-section toggle arrow: flip 180deg while the section is open.
   Covers both arrows in a .bookSection - the desktop arrow at the left of
   the table row (.iconHolderSection.hide-mobile) and the mobile
   "Package Details" arrow (.iconHolderSection.open-section-mobile).
   Open state = .open on .open_section_single (template-booking-season.php
   .openSection/.open-section-mobile click handler). inline-block needed:
   transform does not apply to a plain inline <span>. */
.bookSection .iconHolderSection .icon-icon38 {
    display: inline-block;
    transition: transform 0.25s ease;
}
.bookSection:has(.open_section_single.open) .iconHolderSection .icon-icon38 {
    transform: rotate(180deg);
}


/* LP nights-tabs wrapper + its tab panels are flex items. The flex default
   `min-width: auto` floors them at their content's min-content width
   (~392px), so on phones they break out of the form column instead of
   reflowing. `min-width: 0` lets them shrink to the column - a no-op on
   desktop where the column is already wide enough. */
.lp-radio-number-of-overnight-wrapper,
.lp-radio-number-of-overnight-wrapper .tab-content {
    min-width: 0;
}