/* Tour list bar (Views/Shared/_TourBar.cshtml), shared by the Las Vegas campaign pages.
   Brand fonts and color tokens (--lv-*) come from las-vegas.css, which _Layout loads for these pages. */

.tour-bar {
    --tour-radius: 14px;
    --tour-field-border: #bcd6ce;
    --tour-placeholder: #7d8f8a;
    font-family: var(--lv-sans);
}


/* Tour list bar - docked to the bottom of the viewport for the whole page.

   It's the last element in <body> (the layout's AfterFooter section), so as a sticky
   element its containing block is the whole page: it stays stuck while scrolling past
   the footer, and at the very end it rests in its own spot below the footer, so the
   footer is never hidden behind it. The top margin leaves room for the mobile close
   tab when the panel is open. */

.tour-bar {
    position: sticky;
    bottom: 0;
    z-index: 1010; /* above page content, below Bootstrap's fixed navbar (1030) */
    margin-top: 1rem;
    filter: drop-shadow(0 -1px 4px rgba(0, 0, 0, 0.12));
}

/* The mint bar spans the full viewport width, flush with the bottom of the screen:
   rounded top corners, square bottom ones. The iPhone home-indicator inset goes inside
   the bar so the button stays clear of it. */
.tour-bar__inner {
    position: relative;
    padding: 0.625rem 0 calc(0.625rem + env(safe-area-inset-bottom, 0px));
    background: var(--lv-mint);
    border-radius: var(--tour-radius) var(--tour-radius) 0 0;
}

/* Form contents stay in the site container (Bootstrap .container, max 1320px like the nav) */

/* Form header: centered above the button on mobile, left-aligned over the fields on desktop */
.tour-bar .tour-bar__title {
    flex: 0 0 100%;
    margin: 0.375rem 0.25rem 0.75rem;
    font-family: var(--lv-mono);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.06em;
    text-align: center;
    color: var(--lv-green);
}

@media (min-width: 768px) {
    .tour-bar .tour-bar__title {
        margin: 0 0.25rem 0.5rem; /* sits level with the side curves */
        font-size: 1.375rem;
        text-align: left;
    }
}

.tour-bar.is-open .tour-bar__inner {
    border-top-right-radius: 0;
}

.tour-bar__panel {
    display: none;
}

.tour-bar.is-open .tour-bar__panel {
    display: block;
}

.tour-bar__toggle,
#tourBarPanel .hs-button {
    display: block;
    width: 100%;
    height: 3rem;
    padding: 0 1.5rem;
    background: var(--lv-green);
    color: #fff;
    font-family: var(--lv-sans);
    font-size: 1rem;
    font-weight: 500;
    border: 1px solid var(--lv-green); /* always present, so the hover state doesn't shift the size */
    border-radius: var(--tour-radius);
    transition: background-color 0.15s, color 0.15s;
}

/* Hover: reversed - white fill, emerald text and border */
.tour-bar__toggle:hover,
#tourBarPanel .hs-button:hover {
    background: #fff;
    color: var(--lv-green);
    border: 1px solid var(--lv-green);
}

.tour-bar__toggle:focus-visible,
#tourBarPanel .hs-button:focus-visible {
    outline: 2px solid var(--lv-green);
    outline-offset: 2px;
    box-shadow: none;
}

/* Once HubSpot's own submit is on screen, the proxy steps aside */
.tour-bar.is-open.is-ready .tour-bar__toggle,
.tour-bar.is-submitted .tour-bar__toggle {
    display: none;
}

/* Close tab notched into the top-right of the open panel */
.tour-bar__close {
    display: none;
    position: absolute;
    top: 0;
    right: 0; /* over the bar's top-right corner */
    transform: translateY(calc(-100% + 1px)); /* overlap the bar by 1px to hide the seam line */
    width: 3.5rem;
    height: 2.75rem;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: var(--lv-mint);
    color: var(--lv-green);
    border: 0;
    border-radius: var(--tour-radius) var(--tour-radius) 0 0;
}

.tour-bar__close::before {
    content: "";
    position: absolute;
    right: 100%;
    bottom: 0;
    width: var(--tour-radius);
    height: var(--tour-radius);
    background: radial-gradient(circle at 0 0, transparent calc(var(--tour-radius) - 0.5px), var(--lv-mint) var(--tour-radius));
}

.tour-bar.is-open .tour-bar__close {
    display: flex;
}

.tour-bar__close:focus-visible {
    outline: 2px solid var(--lv-green);
    outline-offset: -4px;
}

@media (min-width: 768px) {
    .tour-bar__content {
        display: flex;
        flex-wrap: wrap; /* header on its own row above the form */
        align-items: flex-start;
        gap: 0 0.625rem;
    }

    .tour-bar.is-open .tour-bar__inner {
        border-top-right-radius: var(--tour-radius);
    }

    .tour-bar__panel,
    .tour-bar.is-open .tour-bar__panel {
        display: block;
        flex: 1 1 auto;
        min-width: 0;
    }

    .tour-bar.is-open .tour-bar__close {
        display: none;
    }

    .tour-bar__toggle {
        flex: 0 0 13rem;
    }

    .tour-bar.is-ready .tour-bar__toggle {
        display: none;
    }
}


/* HubSpot form overrides
   The embed is rendered as raw HTML (no HubSpot theme CSS), so everything below restyles
   its markup to match the design. #tourBarPanel keeps these ahead of the global
   floating-label styles in shus.css. */

/* Grid layout: fieldsets are flattened so every field is a grid item.
   Order: fields (0) > submit (1) > error rollup / consent / reCAPTCHA note (2) */
#tourBarPanel .hs-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.625rem;
    align-items: start;
}

#tourBarPanel .hs-form fieldset {
    display: contents;
}

/* HubSpot's built-in responsive CSS floats .form-columns-2 fields at 50% width */
#tourBarPanel .hs-form-field {
    grid-column: 1 / -1;
    width: auto;
    float: none;
    margin: 0;
}

#tourBarPanel .hs_firstname,
#tourBarPanel .hs_lastname {
    grid-column: auto;
}

#tourBarPanel .hs-submit {
    grid-column: 1 / -1;
    order: 1;
}

#tourBarPanel .hs_error_rollup,
#tourBarPanel .legal-consent-container,
#tourBarPanel .tour-bar__required-note,
#tourBarPanel .tour-bar__recaptcha-note {
    grid-column: 1 / -1;
    order: 2;
}

/* Disclaimers (consent text, "*All fields are required.", reCAPTCHA note) stay hidden
   until the user focuses something in the form; tour-bar.js then adds .show-disclaimers.
   They grow in from zero height, and since the bar is docked to the bottom of the screen
   that reads as the form sliding up. */
.tour-bar:not(.show-disclaimers) #tourBarPanel :is(.legal-consent-container, .tour-bar__required-note, .tour-bar__recaptcha-note) {
    display: none;
}

.tour-bar.show-disclaimers #tourBarPanel :is(.legal-consent-container, .tour-bar__required-note, .tour-bar__recaptcha-note) {
    overflow: hidden;
    animation: tour-disclaimer-in 0.35s ease-out backwards;
}

@keyframes tour-disclaimer-in {
    from {
        max-height: 0;
        opacity: 0;
    }

    to {
        max-height: 20rem; /* taller than any disclaimer, even at 320px wide */
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tour-bar.show-disclaimers #tourBarPanel :is(.legal-consent-container, .tour-bar__required-note, .tour-bar__recaptcha-note) {
        animation: none;
    }
}

/* --tour-fields is the number of visible fields, set by tour-bar.js, so the layout
   follows whatever fields the HubSpot form currently has */
@media (min-width: 768px) {
    /* Up to 3 fields: one row, like the mock (fields | button).
       More than that: rows of 3, button in the last open cell. */
    #tourBarPanel .hs-form {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .tour-bar.fits-one-row #tourBarPanel .hs-form {
        grid-template-columns: repeat(var(--tour-fields, 3), minmax(0, 1fr)) 12rem;
    }

    #tourBarPanel .hs-form-field,
    #tourBarPanel .hs-submit {
        grid-column: auto;
    }
}

@media (min-width: 1200px) {
    #tourBarPanel .hs-form {
        grid-template-columns: repeat(var(--tour-fields, 5), minmax(0, 1fr)) 12rem;
    }
}

/* Hidden fields (market region, brand, landing page, etc.) never take up space,
   whether or not HubSpot wraps them in a display:none container */
#tourBarPanel input[type=hidden],
#tourBarPanel .hs-form-field[style*="display: none"],
#tourBarPanel .hs-form-field[style*="display:none"],
#tourBarPanel .hs-form-field:has(> .input > input[type=hidden]) {
    display: none !important;
}

/* Labels are replaced by placeholders (see tour-bar.js) but kept for screen readers */
#tourBarPanel .hs-form-field > label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Text inputs + select */
#tourBarPanel .hs-form-field .input {
    margin: 0;
}

#tourBarPanel .hs-input:not([type=checkbox]):not([type=radio]):not([type=hidden]) {
    display: block;
    width: 100% !important;
    max-width: none;
    height: 3rem;
    padding: 0 0.75rem;
    border: 1px solid var(--tour-field-border) !important;
    border-radius: var(--tour-radius);
    font-family: var(--lv-sans);
    font-size: 1rem;
    font-weight: 400 !important;
    color: var(--lv-green) !important;
    background-color: #fff;
}

#tourBarPanel .hs-input:not([type=checkbox]):not([type=radio]):not([type=hidden]):focus {
    border-color: var(--lv-green) !important;
    box-shadow: 0 0 0 1px var(--lv-green);
}

#tourBarPanel .hs-input:not([type=checkbox]):not([type=radio]):not([type=hidden]):is(.invalid, .error) {
    border-color: #cb2238 !important;
}

#tourBarPanel .hs-input::placeholder {
    color: var(--tour-placeholder);
    opacity: 1;
}

#tourBarPanel select.hs-input {
    appearance: none;
    padding-right: 2.25rem;
    text-overflow: ellipsis;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%231c4038' d='M1.41.59 6 5.17 10.59.59 12 2l-6 6-6-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.875rem center;
    background-size: 12px 8px;
}

/* HubSpot flags the select while "Please Select" is showing */
#tourBarPanel select.hs-input.is-placeholder {
    color: var(--tour-placeholder) !important;
}

#tourBarPanel select.hs-input option {
    color: var(--lv-green);
}

/* Validation messages */
#tourBarPanel .hs-error-msgs {
    margin: 0.25rem 0 0;
    padding: 0 0.25rem;
    list-style: none;
}

#tourBarPanel .hs-error-msg,
#tourBarPanel .hs-main-font-element {
    font-size: 0.8rem;
    font-weight: 400;
}

#tourBarPanel .hs_error_rollup .hs-error-msgs {
    padding: 0;
}

/* Closing the mobile panel blurs the focused field, which makes HubSpot flag it as
   required. .hide-errors (tour-bar.js) hides those leftovers until the user types or
   tries to submit, so reopening an untouched form looks clean. */
.tour-bar.hide-errors #tourBarPanel .hs-error-msgs {
    display: none;
}

.tour-bar.hide-errors #tourBarPanel .hs-input:not([type=checkbox]):not([type=radio]):not([type=hidden]):is(.invalid, .error) {
    border-color: var(--tour-field-border) !important;
}

/* Consent: shown as small print only. The checkbox is hidden and checked by tour-bar.js
   (consent is by submitting), and the text no longer toggles it, so clicking the disclaimer
   can't uncheck it invisibly. Links inside the text still work. */
#tourBarPanel .legal-consent-container .hs-input[type=checkbox] {
    display: none;
}

#tourBarPanel .legal-consent-container label {
    pointer-events: none;
}

#tourBarPanel .legal-consent-container label a {
    pointer-events: auto;
}

/* Consent text: small print under the bar */
#tourBarPanel .legal-consent-container {
    padding: 0 0.25rem;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--lv-green);
}

#tourBarPanel .legal-consent-container .hs-dependent-field {
    gap: 0;
}

#tourBarPanel .legal-consent-container .inputs-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

#tourBarPanel .legal-consent-container p {
    margin: 0;
}

#tourBarPanel .hs-input[type=checkbox] {
    width: 1rem;
    height: 1rem;
    margin-top: 0.05rem;
    accent-color: var(--lv-green);
}

#tourBarPanel .legal-consent-container a,
#tourBarPanel .tour-bar__recaptcha-note a {
    color: inherit;
    font-size: inherit;
    text-decoration: underline;
}

/* reCAPTCHA stays functional but its floating badge is hidden; Google's required
   attribution is added as text instead (.tour-bar__recaptcha-note, injected by tour-bar.js) */
#tourBarPanel .hs-recaptcha {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    visibility: hidden;
}

#tourBarPanel .tour-bar__recaptcha-note {
    margin: 0;
    padding: 0 0.25rem;
    font-size: 0.7rem;
    color: var(--tour-placeholder);
}

#tourBarPanel .tour-bar__required-note {
    margin: 0;
    padding: 0 0.25rem;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--lv-green);
}

/* Submit */
#tourBarPanel .hs-submit .actions {
    margin: 0;
    padding: 0;
}

#tourBarPanel .hs-button {
    cursor: pointer;
}

/* Thank-you message after submit */
#tourBarPanel .submitted-message {
    padding: 0.75rem 1rem;
    text-align: center;
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--lv-green);
}

#tourBarPanel .submitted-message p:last-child {
    margin-bottom: 0;
}