/**
 * ============================================================================
 * WELLNESS LANDING PAGE
 * ============================================================================
 * Layout and styling on top of the Sneat/Bootstrap theme for
 * resources/views/landing/massage/massage-landing.blade.php.
 *
 * EVERY rule is scoped under .massage-page. The landing partials share this
 * document with the navbar and footer, and an unscoped rule on a generic
 * selector (.card, .nav-link, h2 ...) would restyle every other page that
 * includes them.
 *
 * Colours come from the theme: --bs-primary is #FF6900.
 * ============================================================================
 */

.massage-page {
    /* Tokens, so the orange/ink pair is stated once. */
    --wl-orange: #ff6900;
    --wl-orange-soft: #ffe7d4;
    --wl-ink: #131a2b;
    --wl-muted: #5c6672;
    --wl-cream: #f5f3f0;
    --wl-grey: #f4f5f7;
    --wl-line: #e4e6ea;

    /* clip, not hidden: creates no scroll container, so position: sticky and
       the fixed navbar keep working while stray overflow is still trimmed. */
    overflow-x: clip;
}

.massage-page h1,
.massage-page h2,
.massage-page h3,
.massage-page .wl-display {
    letter-spacing: -0.02em;
}

/* ---------------------------------------------------------------- hero ---- */
.massage-page .wl-hero {
    position: relative;
    min-height: 88vh;
    display: flex;
    align-items: center;
    background-color: var(--wl-ink);
    background-size: cover;
    background-position: center;
    padding: 9rem 0 5rem;
}

/* Readability over the photograph: darker on the left, where the copy sits. */
.massage-page .wl-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(10, 14, 24, 0.88) 0%, rgba(10, 14, 24, 0.7) 45%, rgba(10, 14, 24, 0.35) 100%);
}

.massage-page .wl-hero > * {
    position: relative;
}

.massage-page .wl-hero-title {
    font-size: clamp(2.5rem, 5.4vw, 4.25rem);
    line-height: 1.05;
    font-weight: 800;
}

.massage-page .wl-hero-lead {
    font-size: clamp(1rem, 1.35vw, 1.15rem);
    max-width: 38rem;
    color: rgba(255, 255, 255, 0.86);
}

.massage-page .wl-hero-note {
    font-size: clamp(1rem, 1.35vw, 1.15rem);
    color: rgba(255, 255, 255, 0.86);
}

/* The transcript bubble floats over the photo on desktop; below lg it becomes
   an ordinary block in the flow so it can never push the page sideways.

   NOTE: the hero photograph also carries a bubble and pill of its own, baked in
   at its centre-right. These sit lower and to the right of those. */
.massage-page .wl-hero-caption {
    background: rgba(18, 22, 32, 0.62);
    border: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(6px);
    border-radius: 0.9rem;
    color: rgba(255, 255, 255, 0.92);
    padding: 1rem 1.25rem;
    max-width: 24rem;
}

.massage-page .wl-hero-pill {
    background: rgba(18, 22, 32, 0.62);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.92);
    padding: 0.35rem 0.85rem;
    font-size: 0.8rem;
    white-space: nowrap;
}

@media (min-width: 992px) {
    .massage-page .wl-hero-aside {
        position: absolute;
        right: 1.5rem;
        bottom: 3.5rem;
        display: flex;
        align-items: flex-end;
        gap: 0.75rem;
    }
}

/* -------------------------------------------------------------- buttons ---- */
.massage-page .btn {
    border-radius: 0.65rem;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
}

.massage-page .wl-btn-primary {
    background: var(--wl-orange);
    border-color: var(--wl-orange);
    color: #fff;
}

.massage-page .wl-btn-primary:hover,
.massage-page .wl-btn-primary:focus {
    background: #e85f00;
    border-color: #e85f00;
    color: #fff;
}

.massage-page .wl-btn-ink {
    background: var(--wl-ink);
    border-color: var(--wl-ink);
    color: #fff;
}

.massage-page .wl-btn-ink:hover,
.massage-page .wl-btn-ink:focus {
    background: #0b1020;
    border-color: #0b1020;
    color: #fff;
}

.massage-page .wl-btn-outline-light {
    border: 1px solid rgba(255, 255, 255, 0.85);
    color: #fff;
    background: transparent;
}

.massage-page .wl-btn-outline-light:hover,
.massage-page .wl-btn-outline-light:focus {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.massage-page .wl-btn-outline-ink {
    border: 1px solid var(--wl-ink);
    color: var(--wl-ink);
    background: transparent;
}

.massage-page .wl-btn-outline-ink:hover,
.massage-page .wl-btn-outline-ink:focus {
    background: var(--wl-ink);
    color: #fff;
}

/* ------------------------------------------------------------- sections ---- */
.massage-page .wl-section {
    padding: 6rem 0;
}

.massage-page .wl-section-cream { background: var(--wl-cream); }
.massage-page .wl-section-grey  { background: var(--wl-grey); }
.massage-page .wl-section-ink   { background: var(--wl-ink); color: #fff; }

.massage-page .wl-heading {
    font-size: clamp(2rem, 3.4vw, 2.9rem);
    font-weight: 800;
    color: var(--wl-ink);
    line-height: 1.15;
}

.massage-page .wl-section-ink .wl-heading,
.massage-page .wl-section-ink h3 { color: #fff; }

.massage-page .wl-subtext {
    color: var(--wl-muted);
    font-size: 1.02rem;
}

.massage-page .wl-section-ink .wl-subtext { color: rgba(255, 255, 255, 0.72); }

/* ------------------------------------------------------- problem cards ---- */
.massage-page .wl-photo-card {
    background: #fff;
    border: 1px solid var(--wl-line);
    border-radius: 1rem;
    overflow: hidden;
    height: 100%;
}

.massage-page .wl-photo-card.is-highlighted {
    border-color: var(--wl-orange);
}

.massage-page .wl-photo-card img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    display: block;
}

/* Tick list under the cards: a rule above each item, as in the design. */
.massage-page .wl-tick {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    border-top: 1px solid var(--wl-line);
    padding: 0.9rem 0;
    color: var(--wl-muted);
}

.massage-page .wl-tick i {
    color: var(--wl-orange);
    line-height: 1.45;
}

/* ------------------------------------------------------- feature grid ---- */
.massage-page .wl-feature {
    display: flex;
    gap: 1rem;
    border-top: 2px solid var(--wl-ink);
    padding: 1.5rem 0;
}

.massage-page .wl-feature-icon {
    flex: 0 0 auto;
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.15rem;
}

.massage-page .wl-feature-icon.is-orange { background: var(--wl-orange); }
.massage-page .wl-feature-icon.is-ink    { background: var(--wl-ink); }

.massage-page .wl-feature h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--wl-ink);
    margin-bottom: 0.35rem;
}

.massage-page .wl-feature p {
    color: var(--wl-muted);
    margin-bottom: 0;
}

/* ------------------------------------------------------------- steps ---- */
.massage-page .wl-step-badge {
    width: 3.9rem;
    height: 3.9rem;
    border-radius: 50%;
    background: var(--wl-orange);
    color: #fff;
    font-weight: 700;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Dashed connector, drawn from the badge to the end of the column. Hidden on
   the stacked layout, where there is nothing to connect. */
.massage-page .wl-step-line {
    flex: 1 1 auto;
    border-top: 2px dashed rgba(255, 255, 255, 0.28);
    margin-left: 0.75rem;
}

@media (max-width: 991.98px) {
    .massage-page .wl-step-line { display: none; }
}

/* ----------------------------------------------------------- pricing ---- */
.massage-page .wl-plan {
    background: #fff;
    border: 1px solid var(--wl-line);
    border-radius: 1.1rem;
    padding: 2rem;
    height: 100%;
}

.massage-page .wl-plan.is-featured {
    border: 2px solid var(--wl-orange);
    box-shadow: 0 1.5rem 3rem rgba(255, 105, 0, 0.16);
}

.massage-page .wl-plan-price {
    font-size: 3rem;
    font-weight: 800;
    color: var(--wl-ink);
    line-height: 1;
}

.massage-page .wl-plan-badge {
    position: absolute;
    top: -0.9rem;
    left: 1.75rem;
    background: var(--wl-orange);
    color: #fff;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.3rem 0.75rem;
}

.massage-page .wl-plan-feature {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--wl-line);
    color: var(--wl-muted);
}

.massage-page .wl-plan-feature:last-child { border-bottom: 0; }
.massage-page .wl-plan-feature i { color: var(--wl-orange); }

.massage-page .wl-addon {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    border-top: 1px solid var(--wl-line);
    padding: 1.1rem 0;
}

.massage-page .wl-addon-price {
    color: var(--wl-orange);
    font-weight: 700;
    white-space: nowrap;
}

/* ------------------------------------------------------- built-for grid ---- */
.massage-page .wl-pillar {
    border-top: 3px solid var(--wl-orange);
    padding-top: 1rem;
}

.massage-page .wl-pillar h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--wl-ink);
}

/* ------------------------------------------------------- testimonials ---- */
.massage-page .wl-quote {
    background: #fff;
    border: 1px solid var(--wl-line);
    border-radius: 1rem;
    padding: 1.75rem;
    height: 100%;
}

.massage-page .wl-quote p {
    font-style: italic;
    color: var(--wl-ink);
}

.massage-page .wl-avatar {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--wl-orange-soft);
    color: var(--wl-orange);
    font-weight: 700;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

/* --------------------------------------------------------- closing cta ---- */
.massage-page .wl-cta {
    background: var(--wl-orange);
    color: #fff;
    padding: 6rem 0;
}

/* The theme gives headings their own colour, which beats the white inherited
   from .wl-cta - so state it here, or the heading renders dark on orange. */
.massage-page .wl-cta h2,
.massage-page .wl-cta p {
    color: #fff;
}

.massage-page .wl-cta h2 {
    font-size: clamp(1.9rem, 3.6vw, 3rem);
    font-weight: 800;
}

/* ------------------------------------------------------------- mobile ---- */
@media (max-width: 767.98px) {
    .massage-page .wl-section,
    .massage-page .wl-cta { padding: 3.5rem 0; }

    .massage-page .wl-hero { padding: 7rem 0 3rem; min-height: auto; }

    .massage-page .wl-hero-caption { max-width: 100%; }

    /* Full-width buttons read better than two cramped ones side by side. */
    .massage-page .wl-hero .btn,
    .massage-page .wl-cta .btn { width: 100%; }
}

/* ------------------------------------------------- reservation modal ---- */
/* The shared landing navbar sets an inline z-index: 9999
   (landing/partials/navbar.blade.php), which is above Bootstrap's modal (1055)
   and backdrop (1050) - so the navbar drew on top of the open modal.

   Lifting this modal instead of lowering the navbar: that 9999 is shared by
   every landing page, and these two selectors only touch this modal.

   The backdrop is appended to <body>, outside .massage-page, so it is keyed
   off a body class that ai-reservation-form.js adds while the modal is open
   rather than :has(), which older browsers do not support. */
#aiReservationModal {
    z-index: 10055;
}

body.ai-modal-open .modal-backdrop {
    z-index: 10050;
}

/* .modal-dialog-scrollable works by capping .modal-content's height and letting
   .modal-body scroll, which assumes .modal-body is a direct flex child of
   .modal-content. Here a <form> wraps the body and footer, and a plain block
   form has no height constraint - so the body grew past the dialog instead of
   scrolling, and the footer (with the submit button) was pushed off-screen.
   Most visible on a phone, where the form is far taller than the viewport.

   Making the form the flex column that .modal-content expects restores it.
   min-height: 0 is required: a flex item's default min-height is auto, which
   refuses to shrink below its content and would re-create the overflow. */
#aiReservationModal .modal-content > form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

#aiReservationModal .modal-body {
    overflow-y: auto;
    min-height: 0;
}

/* Keep the footer buttons reachable and comfortable on a phone. */
@media (max-width: 575.98px) {
    #aiReservationModal .modal-footer {
        flex-wrap: nowrap;
    }

    #aiReservationModal .modal-footer .btn {
        flex: 1 1 0;
    }
}