/* L26 listing detail 2026 - booking sheet. Owner: booking agent. Scope every rule under .l26; tokens only (see l26-base.css).

   Covers the aside (booking card, LandKey trust row, message-landowner card, short-term pricing
   widget mount) and the mobile sticky book bar. The legacy classes these elements still carry
   (.pricing, .pricing-upgrade-button, .full-length-button, .message-sent-stub, ...) keep their
   Content/Views/Listings/Index.css rules, so the overrides below neutralise them under .l26. */

/* ---------- aside column ---------- */

@media (min-width: 1080px) {
    /* .l26-main aligns items to start, which would leave the aside exactly as tall as its content
       and give the sticky wrapper nowhere to travel. Stretch it to the grid rows it spans. */
    .l26 .l26-main__aside {
        align-self: stretch;
    }
}

.l26 .l26-aside__sticky {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 32px;
}

/* Full header height, not --l26-sticky-top: scrolling UP to these reveals the hide-on-scroll header. */
.l26 #l26Aside,
.l26 #l26Msg {
    scroll-margin-top: calc(var(--l26-header-h) + 16px);
}

/* ---------- booking card ---------- */

.l26 .l26-book.pricing {
    display: flex;
    flex-direction: column;
    background: var(--l26-surface);
    border: 1px solid var(--l26-border);
    border-radius: var(--l26-radius);
    box-shadow: var(--l26-shadow-card);
    padding: 24px;
    margin: 0;
}

.l26 .l26-book__selected.listing-selected-offering {
    border: 0;
    padding: 0;
    margin: 0 0 8px;
}

.l26 .l26-book__selected .listing-selected-offering-name {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 2px 10px;
    border-radius: var(--l26-radius-pill);
    background: var(--l26-tint);
    color: var(--l26-green-dark);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.l26 .l26-book__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-bottom: 4px;
}

.l26 .l26-book__price-wrap {
    min-width: 0;
}

.l26 .l26-book .price-amount.l26-book__price {
    font-size: 31px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--l26-text);
}

/* A price with no amount ("Contact For Price") steps down so the badge keeps its row. */
.l26 .l26-book .price-amount.l26-book__price--text {
    font-size: 25px;
    letter-spacing: -0.01em;
}

.l26 .l26-book__cadence {
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--l26-text-2);
    text-transform: lowercase;
}

.l26 .l26-book__badge {
    flex-shrink: 0;
    padding: 4px 10px;
    border-radius: var(--l26-radius-pill);
    background: var(--l26-tint);
    color: var(--l26-green-dark);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.5;
    text-transform: uppercase;
    white-space: nowrap;
}

.l26 .l26-book__meta {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin-bottom: 16px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--l26-text-2);
}

.l26 .l26-book__meta .fa-user {
    font-size: 12px;
    color: var(--l26-text-2);
}

.l26 .l26-book .spots {
    font-size: 14px;
    font-weight: 400;
    color: var(--l26-text-2);
}

.l26 .l26-book__season::before {
    content: "\00B7";
    margin-right: 8px;
    color: var(--l26-text-3);
}

/* rewards toggle (exclusive leases with a balance) */
.l26 .l26-book__rewards.rewards-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    margin-bottom: 16px;
    border-radius: var(--l26-radius-sm);
    background: var(--l26-tint);
}

.l26 .l26-book__rewards-text {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.l26 .l26-book .rewards-toggle-star { color: var(--l26-green-text); }

.l26 .l26-book .rewards-toggle-label {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--l26-green-dark);
}

.l26 .l26-book .rewards-toggle-switch input:checked + .rewards-toggle-slider {
    background-color: var(--l26-green);
}

.l26 .l26-book .rewards-toggle-switch input:focus-visible + .rewards-toggle-slider {
    box-shadow: 0 0 0 3px var(--l26-green-ring);
}

/* ---------- CTA group ---------- */

.l26 .l26-book__ctas.listing-cta-button-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
}

.l26 .l26-book__ctas .listing-cta-button-col {
    flex: none;
    min-width: 0;
}

/* The legacy .pricing-upgrade-button carries a fixed 44px height, 4px radius, 700 weight and a
   white-text-on-hover !important; the l26 button primitives take over here. */
.l26 .l26-book .pricing-upgrade-button,
.l26 .l26-msg .pricing-upgrade-button {
    height: auto;
    border-radius: var(--l26-radius-sm);
    font-weight: 600;
    line-height: 1.2;
    white-space: normal;
}

.l26 .l26-book .l26-btn.listing-cta-button {
    padding: 8px 20px;
}

.l26 .l26-book .pricing-upgrade-button.l26-btn--primary:disabled,
.l26 .l26-book .pricing-upgrade-button.l26-btn--primary.disabled,
.l26 .l26-msg .pricing-upgrade-button.l26-btn--primary:disabled,
.l26 .l26-msg .pricing-upgrade-button.l26-btn--primary.disabled {
    background: var(--l26-green);
    border-color: var(--l26-green);
    color: var(--l26-surface);
    opacity: 0.5;
}

/* Reserve Lease: legacy paints it dark green by id; the design keeps it the standard primary. */
.l26 .l26-book #reserveLeaseButton:not(:disabled):not(.disabled),
.l26 .l26-book .l26-btn--primary.reserve-lease-button:not(:disabled):not(.disabled) {
    background: var(--l26-green);
    border-color: var(--l26-green);
}

.l26 .l26-book #reserveLeaseButton:not(:disabled):not(.disabled):hover,
.l26 .l26-book #reserveLeaseButton:not(:disabled):not(.disabled):focus-visible,
.l26 .l26-book .l26-btn--primary.reserve-lease-button:not(:disabled):not(.disabled):hover,
.l26 .l26-book .l26-btn--primary.reserve-lease-button:not(:disabled):not(.disabled):focus-visible {
    background: var(--l26-green-hover);
    border-color: var(--l26-green-hover);
}

.l26 .l26-book .pricing-upgrade-button.l26-btn--outline:hover,
.l26 .l26-book .pricing-upgrade-button.l26-btn--outline:focus-visible,
.l26 .l26-msg .pricing-upgrade-button.l26-btn--outline:hover,
.l26 .l26-msg .pricing-upgrade-button.l26-btn--outline:focus-visible {
    color: var(--l26-green-dark) !important;
}

/* Arrive / Depart triggers (short-term) */
.l26 .l26-book__range {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    border: 1px solid var(--l26-border);
    border-radius: var(--l26-radius-sm);
    margin-bottom: 2px;
    overflow: hidden;
}

.l26 .l26-book__date {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-height: 60px;
    padding: 10px 12px;
    border: 0;
    background: var(--l26-surface);
    font-family: var(--l26-font);
    text-align: left;
    cursor: pointer;
    transition: background-color var(--l26-ease);
}

.l26 .l26-book__date + .l26-book__date {
    border-left: 1px solid var(--l26-border);
}

.l26 .l26-book__date:hover {
    background: var(--l26-zebra);
}

.l26 .l26-book__date:focus-visible {
    outline: 2px solid var(--l26-green);
    outline-offset: -2px;
}

.l26 .l26-book__date-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--l26-text-2);
}

.l26 .l26-book__date-val {
    font-size: 16px;
    color: var(--l26-text-2); /* #999 failed AA (2.85:1) - H8 */
}

/* season chooser, restyled as selectable option cards */
.l26 .l26-book__choices.listing-offering-choices {
    margin: 0 0 6px;
}

.l26 .l26-book .listing-offering-choices-label {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--l26-text-2);
}

.l26 .l26-book .listing-offering-choices-list {
    gap: 8px;
}

.l26 .l26-book .listing-offering-choice {
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--l26-border);
    border-radius: var(--l26-radius-sm);
    background: var(--l26-surface);
    font-family: var(--l26-font);
    transition: border-color var(--l26-ease), background-color var(--l26-ease), box-shadow var(--l26-ease);
}

.l26 .l26-book .listing-offering-choice:hover,
.l26 .l26-book .listing-offering-choice:focus-visible {
    border-color: var(--l26-green-dark);
}

.l26 .l26-book .listing-offering-choice.is-selected {
    border-color: var(--l26-green);
    border-width: 1px;
    padding: 12px 14px;
    background: var(--l26-tint);
    box-shadow: inset 0 0 0 1px var(--l26-green);
}

.l26 .l26-book .listing-offering-choice.is-selected .listing-offering-choice-name {
    color: var(--l26-green-dark);
}

.l26 .l26-book .listing-offering-choice.is-leased {
    background: var(--l26-zebra);
    border-color: var(--l26-border);
    box-shadow: none;
}

.l26 .l26-book .listing-offering-choice-name {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
}

.l26 .l26-book .listing-offering-choice-dates,
.l26 .l26-book .listing-offering-choice-species,
.l26 .l26-book .listing-offering-choice-spots {
    font-size: 14px;
    line-height: 1.4;
    color: var(--l26-text-2);
}

.l26 .l26-book .listing-offering-choice-price {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
}

.l26 .l26-book .listing-offering-choice-badge {
    background: var(--l26-green);
    border-radius: 6px;
}

.l26 .l26-book .listing-offering-choices-hint {
    margin: 8px 0 0;
    font-size: 14px;
    color: var(--l26-text-2);
}

/* the chooser rows stack price under the name inside the 384px aside */
@media (min-width: 1080px) {
    .l26 .l26-book .listing-offering-choice {
        flex-direction: column;
        gap: 4px;
    }

    .l26 .l26-book .listing-offering-choice-aside {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 4px 8px;
        text-align: left;
    }
}

/* ---------- owner card (#13567) ---------- */
.l26 .l26-book__owner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.l26 .l26-book__owner-label {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--l26-text-2);
}

/* Reuses .l26-book__badge for shape/padding/type; these only swap the tone colors, each pair
   already used (and contrast-checked) elsewhere on this page - no new hex. */
.l26 .l26-book__owner-status--live,
.l26 .l26-book__owner-status--leased {
    background: var(--l26-success-tint);
    color: var(--l26-success-text);
}

.l26 .l26-book__owner-status--review,
.l26 .l26-book__owner-status--paused {
    background: var(--l26-band-moderate-tint);
    color: var(--l26-band-moderate-text);
}

.l26 .l26-book__owner-status--archived {
    background: var(--l26-tint);
    color: var(--l26-text-2);
}

.l26 .l26-book__owner .l26-book__ctas.listing-cta-button-row {
    width: 100%;
}

/* disclaimer + Affirm line */
/* #13682: hunter requirements (background check / insurance). Same card chrome as the LandKey
   trust row below (12px 16px padding, 1px border, card radius), tokens only. */
.l26 .l26-book__requirements {
    margin: 16px 0 0;
    padding: 12px 16px;
    border: 1px solid var(--l26-border);
    border-radius: var(--l26-radius);
    background: var(--l26-surface);
}

.l26 .l26-book__requirements-lead {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--l26-text);
}

.l26 .l26-book__requirements-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.l26 .l26-book__requirements-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--l26-text-2);
}

.l26 .l26-book__requirements-item + .l26-book__requirements-item {
    margin-top: 4px;
}

.l26 .l26-book__requirements-item i {
    flex-shrink: 0;
    margin-top: 3px;
    color: var(--l26-green-text);
}

.l26 .l26-book__note.listing-booking-note {
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
    color: var(--l26-text-2);
}

.l26 .l26-book__affirm.payment-method-messaging-element {
    margin-top: 16px;
    padding: 12px 0 0;
    border-top: 1px solid var(--l26-divider);
    border-radius: 0;
    background: transparent;
    min-height: 0;
}

/* Collapsed until Stripe's iframe actually renders (> 20px); an ineligible amount leaves a ~9px
   blank iframe, which would otherwise show as an empty divider band (M4). l26-booking.js toggles it. */
.l26 .l26-book__affirm.l26-book__affirm--empty {
    /* No height clamp: Stripe only grows its iframe once it can lay out, so clamping kept the
       Affirm line hidden forever (re-verification N1). Just drop the divider chrome. */
    margin: 0;
    padding: 0;
    border-top: 0;
}

/* ---------- LandKey trust row ---------- */

.l26 .l26-book__trust.leasing-block {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    padding: 12px 16px;
    border: 1px solid var(--l26-border);
    border-radius: var(--l26-radius);
    background: var(--l26-surface);
}

.l26 .l26-book__trust-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--l26-tint);
}

.l26 .l26-book__trust-icon img {
    width: 22px;
    height: 22px;
}

.l26 .l26-book__trust .leasing-header {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--l26-text);
}

.l26 .l26-book__trust .leasing-description {
    margin: 2px 0 0;
    padding: 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--l26-text-2);
}

.l26 .l26-book__trust .leasing-learn-more {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    color: var(--l26-green-dark);
    font-size: 12px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
}

.l26 .l26-book__trust .leasing-learn-more:hover { color: var(--l26-green-dark); }

/* ---------- message-landowner card ---------- */

.l26 .l26-msg {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--l26-surface);
    border: 1px solid var(--l26-border);
    border-radius: var(--l26-radius);
    padding: 20px 24px 24px;
}

.l26 .l26-msg__owner.listing-details-landlord {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    margin-bottom: 4px;
}

.l26 .l26-msg__avatar.listing-details-landlord-image {
    position: relative;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--l26-green-dark);
    color: var(--l26-surface);
}

.l26 .l26-msg__initial {
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
}

.l26 .l26-msg__avatar .l26-msg__photo.listing-owner-avatar {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.l26 .l26-msg__who {
    min-width: 0;
}

.l26 .l26-msg__name.listing-details-landlord-details-name {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--l26-text);
    overflow: hidden;
    text-overflow: ellipsis;
}

.l26 .l26-msg__since.listing-details-landlord-details-membership {
    padding: 0;
    font-size: 14px;
    color: var(--l26-text-2);
}

.l26 .l26-msg__cta.contact-owner-button {
    display: block;
    width: 100%;
}

.l26 .l26-msg .l26-btn--block.full-length-button,
.l26 .l26-msg .l26-msg__ask {
    min-height: 44px;
    height: auto;
    font-size: 16px;
}

.l26 .l26-msg .l26-btn--ghost {
    background: transparent;
}

.l26 .l26-msg .l26-btn--ghost:hover,
.l26 .l26-msg .l26-btn--ghost:focus-visible {
    background: var(--l26-zebra);
}

.l26 .l26-msg__label {
    display: block;
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--l26-text);
}

.l26 .l26-msg__textarea.contact-landowner-textbox {
    display: block;
    width: 100%;
    min-height: 96px;
    max-height: 400px;
    padding: 12px 14px;
    border: 1px solid var(--l26-border);
    border-radius: var(--l26-radius-sm);
    background: var(--l26-surface);
    color: var(--l26-text);
    font-size: 16px;
    line-height: 1.5;
    resize: vertical;
    transition: border-color var(--l26-ease), box-shadow var(--l26-ease);
}

.l26 .l26-msg__textarea.contact-landowner-textbox:focus,
.l26 .l26-msg__textarea.contact-landowner-textbox:focus-visible {
    border-color: var(--l26-green);
    box-shadow: 0 0 0 3px var(--l26-green-ring);
    outline: none;
}

.l26 .l26-msg__send {
    margin-top: 12px;
}

.l26 .l26-msg__send .l26-btn {
    min-height: 44px;
    color: var(--l26-green-text);
}

/* Design: Send stays an outlined button at 50% until there is text. Index.css greys both of these
   out by id when disabled. */
.l26 .l26-msg #messageOwnerButton:disabled {
    background-color: var(--l26-surface);
    border-color: var(--l26-green);
    color: var(--l26-green-text);
    opacity: 0.5;
}

.l26 .l26-msg #addToWaitlistButton:disabled {
    background-color: var(--l26-green);
    border-color: var(--l26-green);
    color: var(--l26-surface);
    opacity: 0.5;
}

/* loading / sending placeholders (legacy stubs) */
.l26 .l26-msg .l26-msg__stub.message-sent-stub {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 96px;
    padding: 12px;
    border-radius: var(--l26-radius-sm);
    background: var(--l26-zebra);
}

.l26 .l26-msg .l26-msg__stub--sm.message-sent-stub {
    min-height: 44px;
}

.l26 .l26-msg .l26-msg__spinner.message-sent-stub-icon {
    width: 24px;
    height: 24px;
    border-width: 0.2em;
    border-radius: 50%;
    background: none;
    color: var(--l26-green-dark);
}

.l26 .l26-msg .message-sent-stub-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--l26-green-dark);
}

/* sent state */
.l26 .l26-msg .l26-msg__sent.message-sent-stub {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-height: 0;
    padding: 12px 14px;
    border-radius: var(--l26-radius-sm);
    background: var(--l26-tint);
    color: var(--l26-green-dark);
    font-size: 14px;
    line-height: 1.5;
}

.l26 .l26-msg__sent .fa-check {
    flex-shrink: 0;
    margin-top: 3px;
    color: var(--l26-green-text);
}

.l26 .l26-msg.is-sent .l26-msg__label,
.l26 .l26-msg.is-sent #sendMessageButtonBlock {
    display: none !important;
}

/* early-access / paused notes */
.l26 .l26-msg .l26-msg__note.early-access-block-message-block {
    padding: 12px 14px;
    border: 0;
    border-radius: var(--l26-radius-sm);
    background: var(--l26-tint);
    color: var(--l26-green-dark);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
}

.l26 .l26-msg .l26-msg__note .text-muted {
    color: var(--l26-text-2) !important;
}

/* ---------- short-term pricing widget mount ---------- */

.l26 .l26-book__stp:empty { display: none; }

/* ---------- tablet / mobile ---------- */

@media (max-width: 759px) {
    .l26 .l26-book.pricing {
        padding: 20px 16px;
    }

    .l26 .l26-msg {
        padding: 20px 16px;
    }
}

/* ---------- mobile sticky book bar (< 1080px) ---------- */

.l26 .l26-bar,
.l26 .l26-bar-spacer {
    display: none;
}

@media (max-width: 1079px) {
    .l26 .l26-bar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1040; /* above page chrome, below the drawer backdrop (1050) and modals */
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 12px var(--l26-gutter);
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        background: var(--l26-surface);
        box-shadow: var(--l26-shadow-bar);
        font-family: var(--l26-font);
        transform: translateY(0);
        visibility: visible;
        transition: transform var(--l26-ease), visibility 0s linear 0s;
    }

    .l26 .l26-bar.is-hidden {
        transform: translateY(110%);
        visibility: hidden;
        transition: transform var(--l26-ease), visibility 0s linear 0.2s;
    }

    .l26 .l26-bar[hidden] {
        display: none !important;
    }

    .l26 .l26-bar__info {
        min-width: 0;
    }

    .l26 .l26-bar__price {
        font-size: 20px;
        font-weight: 700;
        line-height: 1.2;
        color: var(--l26-text);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .l26 .l26-bar__cadence {
        font-size: 14px;
        font-weight: 400;
        color: var(--l26-text-2);
        text-transform: lowercase;
    }

    .l26 .l26-bar__meta {
        margin-top: 2px;
        font-size: 12px;
        line-height: 1.4;
        color: var(--l26-text-2);
        /* wraps (max two lines) rather than truncating beside a long CTA label - L6 */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* keeps the fixed bar off the page content; height synced to the bar by l26-booking.js */
    .l26 .l26-bar-spacer {
        display: block;
        height: 72px;
    }

    .l26 .l26-bar__meta:empty {
        display: none;
    }

    .l26 .l26-bar__cta {
        flex-shrink: 0;
        max-width: 60%;
        padding: 0 20px;
        text-align: center;
    }
}