/* ==========================================================================
   N&N Delivery ThaiMassage — brand theme
   Loaded AFTER bootstrap.min.css and style.css so it wins.

   Palette: pastel pink (primary), baby purple (secondary), gold (ornament).
   Rule of thumb used throughout:
     - pastel pink / baby purple  -> fills, tints, backgrounds
     - deep rose / ink            -> anything that has to be READ
     - gold                       -> hairlines, frames, small ornaments only
   ========================================================================== */

:root {
    /* Pastel pink */
    --nn-pink: #E58BA7;
    --nn-pink-soft: #F7D7E1;
    --nn-pink-tint: #FDF4F7;
    --nn-rose-deep: #B2537A;
    /* readable pink for text */

    /* Baby purple */
    --nn-purple: #9E86DE;
    --nn-purple-soft: #E2D9F6;
    --nn-purple-tint: #F6F3FD;
    --nn-violet-deep: #6A4FB0;
    /* readable purple for text */

    /* Gold (matches the logo) */
    --nn-gold: #C9A227;
    --nn-gold-soft: #E9D9A3;
    --nn-gold-tint: #FBF6E9;

    --nn-ink: #3B2F36;
    /* warm near-black */
    --nn-ink-soft: #6E6169;
    --nn-line: #EFE4EA;

    /* Re-point the Bootstrap vars that style.css reads through var() */
    --bs-primary: var(--nn-pink);
    --bs-secondary: var(--nn-purple);
    --bs-light: var(--nn-pink-tint);
    --bs-dark: var(--nn-ink);
    --bs-body-color: var(--nn-ink);
}


/* ==========================================================================
   Typography
   ========================================================================== */

body {
    font-family: "Work Sans", sans-serif;
    color: var(--nn-ink);
    background: #fff;
}

h1,
h2,
h3,
h4,
h5,
h6,
.navbar .navbar-nav .nav-link {
    font-family: "Playfair Display", serif;
    color: var(--nn-ink);
}

.font-dancing-script {
    font-family: "Dancing Script", cursive;
}

p {
    color: var(--nn-ink-soft);
}

.lead-text {
    font-size: 1.075rem;
    line-height: 1.85;
}


/* ==========================================================================
   Bootstrap utility overrides
   bootstrap.min.css ships the old gold (#bf9456) compiled into these rules,
   so they have to be restated rather than driven by the CSS variables.
   ========================================================================== */

.text-primary {
    color: var(--nn-rose-deep) !important;
}

.text-purple {
    color: var(--nn-violet-deep) !important;
}

.text-gold {
    color: var(--nn-gold) !important;
}

.text-dark {
    color: var(--nn-ink) !important;
}

.text-muted {
    color: var(--nn-ink-soft) !important;
}

.bg-primary {
    background-color: var(--nn-pink) !important;
}

.bg-purple {
    background-color: var(--nn-purple) !important;
}

.bg-light {
    background-color: var(--nn-pink-tint) !important;
}

.bg-purple-tint {
    background-color: var(--nn-purple-tint) !important;
}

.bg-gold-tint {
    background-color: var(--nn-gold-tint) !important;
}

.bg-dark {
    background-color: var(--nn-ink) !important;
}

.border-primary {
    border-color: var(--nn-pink) !important;
}

.border-gold {
    border-color: var(--nn-gold-soft) !important;
}

a {
    color: var(--nn-rose-deep);
}

a:hover {
    color: var(--nn-violet-deep);
}


/* ==========================================================================
   Buttons
   Filled buttons are white-on-pink, flipping to ink-fill + white on hover.
   Note: white on the pastel --nn-pink measures ~2.4:1, below the WCAG AA 4.5:1
   minimum. If the label ever needs to be properly legible, change the
   background on .btn-primary to var(--nn-rose-deep) — white on that is 4.8:1
   and the button still reads as pink.
   ========================================================================== */

.btn {
    font-family: "Work Sans", sans-serif;
    letter-spacing: .5px;
}

.btn-primary {
    color: #ffffff;
    background-color: var(--nn-pink);
    border-color: var(--nn-pink);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-check:checked+.btn-primary {
    color: #fff;
    background-color: var(--nn-ink);
    border-color: var(--nn-ink);
}

.btn-primary:focus,
.btn-primary:focus-visible {
    box-shadow: 0 0 0 .25rem rgba(229, 139, 167, .45);
}

/* style.css draws a double frame around every .btn-primary and reserves 10px
   of margin for it. That fights every flex row it sits in, so it becomes
   opt-in via .btn-framed (used on the big hero / CTA buttons only). */
.btn-primary {
    margin: 0;
}

.btn-primary::before,
.btn-primary::after {
    display: none;
}

.btn-framed {
    margin: 10px;
}

.btn-framed::before,
.btn-framed::after {
    display: block;
}

.btn-framed::before {
    border-left-color: var(--nn-gold-soft);
    border-right-color: var(--nn-gold-soft);
}

.btn-framed::after {
    border-top-color: var(--nn-gold-soft);
    border-bottom-color: var(--nn-gold-soft);
}

/* style.css turns the navbar CTA into a ghost button — keep it solid */
.navbar .btn-primary {
    background: var(--nn-pink);
    border-width: 1px;
}

.navbar .btn-primary:hover {
    background: var(--nn-ink);
    border-color: var(--nn-ink);
    color: #fff;
}

.btn-outline-primary {
    color: var(--nn-rose-deep);
    border-color: var(--nn-pink);
}

.btn-outline-primary:hover {
    color: #fff;
    background-color: var(--nn-rose-deep);
    border-color: var(--nn-rose-deep);
}

.btn-purple {
    color: var(--nn-ink);
    background-color: var(--nn-purple-soft);
    border-color: var(--nn-purple-soft);
}

.btn-purple:hover {
    color: #fff;
    background-color: var(--nn-violet-deep);
    border-color: var(--nn-violet-deep);
}

.btn-dark:hover {
    color: var(--nn-ink);
    background-color: var(--nn-pink);
    border-color: var(--nn-pink);
}


/* ==========================================================================
   Navbar
   ========================================================================== */

.navbar-brand img {
    height: 62px;
    width: auto;
}

.nn-navbar {
    background: #fff !important;
    border-bottom: 1px solid var(--nn-line);
}

.navbar .navbar-nav .nav-link {
    font-size: 16px;
    letter-spacing: .8px;
    padding: .35rem 0;
    position: relative;
}

.navbar .navbar-nav .nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: 0;
    height: 2px;
    background: var(--nn-gold);
    transition: right .35s;
}

.navbar .navbar-nav .nav-link:hover::after,
.navbar .navbar-nav .nav-link.active::after {
    right: 0;
}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active {
    color: var(--nn-rose-deep);
}

.navbar-toggler {
    border-color: var(--nn-pink-soft);
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 .2rem rgba(229, 139, 167, .35);
}

/* "Open 24 hours" ribbon above the nav.
   The brief asks for the 24-hour claim to be visible near the top of the page,
   so this beats the .d-none in the markup and stays on at every width — only
   the social links drop away on the narrowest phones. */
.nn-topbar {
    display: block !important;
    background: linear-gradient(90deg, var(--nn-purple) 0%, var(--nn-pink) 100%);
    color: var(--nn-ink);
    font-size: .875rem;
    letter-spacing: .4px;
}

@media (max-width: 575.98px) {
    .nn-topbar {
        font-size: .8rem;
        text-align: center;
    }

    .nn-topbar .container>span:last-child {
        display: none;
    }
}

.nn-topbar a {
    color: #fff;
    text-decoration: none;
}

.nn-topbar a:hover {
    color: var(--nn-ink);
}


/* ==========================================================================
   Section headings
   ========================================================================== */

.section-head {
    max-width: 760px;
}

.section-script {
    font-family: "Dancing Script", cursive;
    font-size: 2rem;
    line-height: 1;
    color: var(--nn-rose-deep);
    margin-bottom: .25rem;
}

.section-title {
    font-size: clamp(1.9rem, 1.2rem + 2vw, 2.9rem);
    margin-bottom: 1rem;
}

/* small gold lotus rule */
.rule-gold {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    color: var(--nn-gold);
    margin-bottom: 1.25rem;
}

.rule-gold::before,
.rule-gold::after {
    content: "";
    height: 1px;
    width: 54px;
    background: var(--nn-gold-soft);
}

/* Left-aligned variant, used wherever the heading above it is left-aligned.
   Both selectors are needed: the markup puts .text-start on the rule itself
   (.rule-gold.text-start), while a descendant form also has to keep working
   for any block that sets .text-start on a wrapper. The original rule only
   had the descendant form, so the ornament stayed centred under a
   left-aligned heading. */
.rule-gold.text-start,
.text-start .rule-gold {
    justify-content: flex-start;
}

.rule-gold.text-start::before,
.text-start .rule-gold::before {
    display: none;
}


/* ==========================================================================
   Hero
   ========================================================================== */

.nn-hero {
    background:
        radial-gradient(900px 420px at 12% 18%, var(--nn-purple-tint) 0%, rgba(255, 255, 255, 0) 70%),
        linear-gradient(135deg, var(--nn-pink-tint) 0%, #fff 45%, var(--nn-purple-tint) 100%);
    overflow: hidden;
}

.nn-hero h1 {
    font-size: clamp(2.2rem, 1.2rem + 3.4vw, 3.9rem);
    line-height: 1.12;
}

.badge-24h {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .45rem 1.1rem;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--nn-gold-soft);
    color: var(--nn-ink);
    font-weight: 600;
    letter-spacing: .6px;
    box-shadow: 0 6px 22px rgba(158, 134, 222, .18);
}

.badge-24h .dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #2FA36B;
    box-shadow: 0 0 0 4px rgba(47, 163, 107, .18);
}

.hero-visual img {
    width: 100%;
    height: 520px;
    object-fit: cover;
}

@media (max-width: 991.98px) {
    .hero-visual img {
        height: 320px;
    }
}

.hero-points {
    list-style: none;
    padding: 0;
    margin: 0;
}

.hero-points li {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    margin-bottom: .5rem;
    color: var(--nn-ink);
}

.hero-points i {
    color: var(--nn-gold);
    margin-top: .25rem;
}

/* Inner page header */
.nn-page-header {
    background:
        radial-gradient(700px 300px at 85% 10%, var(--nn-purple-tint) 0%, rgba(255, 255, 255, 0) 70%),
        linear-gradient(120deg, var(--nn-pink-tint) 0%, #fff 60%, var(--nn-purple-tint) 100%);
    border-bottom: 1px solid var(--nn-line);
}

.nn-page-header h1 {
    font-size: clamp(2rem, 1.3rem + 2.4vw, 3.1rem);
}

.breadcrumb-item+.breadcrumb-item::before {
    color: var(--nn-gold);
}

.breadcrumb-item.active {
    color: var(--nn-rose-deep);
}


/* ==========================================================================
   Trust strip
   ========================================================================== */

.trust-item {
    display: flex;
    align-items: center;
    gap: .9rem;
    height: 100%;
    padding: 1.25rem;
    background: #fff;
    border: 1px solid var(--nn-line);
    border-radius: 4px;
}

.trust-item .ico {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--nn-pink-tint);
    color: var(--nn-rose-deep);
    font-size: 1.2rem;
}

.trust-item:nth-child(even) .ico {
    background: var(--nn-purple-tint);
    color: var(--nn-violet-deep);
}

.trust-item h6 {
    margin: 0 0 10px;
    font-size: 17px;
}

.trust-item p {
    margin: 0;
    font-size: 15px;
}


/* ==========================================================================
   Price matrix (home page "prices at a glance")
   ========================================================================== */

.price-matrix-wrap {
    border: 1px solid var(--nn-gold-soft);
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 18px 50px rgba(178, 83, 122, .08);
}

.price-matrix {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    min-width: 640px;
}

.price-matrix th,
.price-matrix td {
    padding: 1rem 1.15rem;
    text-align: center;
    border-bottom: 1px solid var(--nn-line);
    white-space: nowrap;
}

.price-matrix thead th {
    background: linear-gradient(90deg, var(--nn-purple-soft) 0%, var(--nn-pink-soft) 100%);
    color: var(--nn-ink);
    font-family: "Playfair Display", serif;
    font-size: 1rem;
    letter-spacing: .5px;
    border-bottom: 1px solid var(--nn-gold-soft);
}

.price-matrix tbody th {
    text-align: left;
    font-family: "Playfair Display", serif;
    font-weight: 500;
    font-size: 1.05rem;
    background: var(--nn-pink-tint);
}

.price-matrix tbody tr:last-child th,
.price-matrix tbody tr:last-child td {
    border-bottom: 0;
}

.price-matrix td {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--nn-ink);
}

.price-matrix tbody tr:hover td,
.price-matrix tbody tr:hover th {
    background: var(--nn-gold-tint);
}

.price-note {
    font-size: .9rem;
    color: var(--nn-ink-soft);
}


/* ==========================================================================
   Service / price detail cards
   ========================================================================== */

.svc-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--nn-line);
    border-radius: 6px;
    overflow: hidden;
    transition: .4s;
}

.svc-card:hover {
    border-color: var(--nn-gold-soft);
    box-shadow: 0 20px 50px rgba(106, 79, 176, .12);
    transform: translateY(-4px);
}

.svc-card .svc-media {
    position: relative;
    overflow: hidden;
}

.svc-card .svc-media img {
    width: 100%;
    height: 230px;
    object-fit: cover;
    transition: .6s;
}

.svc-card:hover .svc-media img {
    transform: scale(1.06);
}

.svc-card .svc-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 1.5rem;
}

/* Blurbs vary a lot in length, so pin the Details button to the card floor
   and keep the four cards in a row lined up. */
.svc-card .svc-body .btn {
    align-self: flex-start;
    margin-top: auto;
}

.svc-card h3 {
    font-size: 24px;
    margin-bottom: .35rem;
}

.svc-card .svc-body p {
    font-size: 15px;
    line-height: 1.75;
}

.price-list {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
    border-top: 1px solid var(--nn-line);
}

.price-list li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: .6rem 0;
    border-bottom: 1px solid var(--nn-line);
}

.price-list .dur {
    color: var(--nn-ink-soft);
    font-size: .95rem;
}

.price-list .amt {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--nn-ink);
}

.price-list .amt .cur {
    color: var(--nn-gold);
    font-weight: 600;
    margin-right: .1rem;
}


/* ==========================================================================
   Therapists
   ========================================================================== */

.therapist-card {
    height: 100%;
    background: #fff;
    border: 1px solid var(--nn-line);
    border-radius: 6px;
    overflow: hidden;
    transition: .4s;
}

.therapist-card:hover {
    border-color: var(--nn-gold-soft);
    box-shadow: 0 20px 50px rgba(178, 83, 122, .12);
}

.therapist-media {
    position: relative;
    overflow: hidden;
    background: var(--nn-purple-tint);
}

.therapist-media img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: top center;
    transition: .6s;
}

.therapist-card:hover .therapist-media img {
    transform: scale(1.05);
}

.therapist-no {
    position: absolute;
    top: 1rem;
    left: 1rem;
    min-width: 46px;
    padding: .3rem .6rem;
    text-align: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    border: 1px solid var(--nn-gold-soft);
    font-weight: 700;
    font-size: .85rem;
    letter-spacing: .5px;
    color: var(--nn-ink);
}

.therapist-body {
    padding: 1.35rem 1.5rem 1.5rem;
}

.therapist-body h3 {
    font-size: 1.45rem;
    margin-bottom: .1rem;
}

.therapist-body .tagline {
    font-size: .9rem;
    line-height: 1.7;
    margin-bottom: 1rem;
}

.spec-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .4rem .75rem;
    margin: 0 0 1.1rem;
    padding: .9rem 0 0;
    border-top: 1px solid var(--nn-line);
    font-size: .875rem;
}

.spec-grid div {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
}

.spec-grid .col-span-2 {
    grid-column: 1 / -1;
}

.spec-grid dt,
.spec-grid .k {
    color: var(--nn-ink-soft);
    font-weight: 400;
}

.spec-grid dd,
.spec-grid .v {
    margin: 0;
    font-weight: 600;
    color: var(--nn-ink);
}

.skill-pills {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-bottom: 1.1rem;
}

.pill {
    font-size: .75rem;
    letter-spacing: .3px;
    padding: .22rem .6rem;
    border-radius: 999px;
    background: var(--nn-purple-tint);
    color: var(--nn-violet-deep);
    border: 1px solid var(--nn-purple-soft);
}


/* ==========================================================================
   Q&A accordion
   ========================================================================== */

.nn-accordion .accordion-item {
    border: 1px solid var(--nn-line);
    border-radius: 6px !important;
    margin-bottom: .85rem;
    overflow: hidden;
    background: #fff;
}

.nn-accordion .accordion-button {
    font-family: "Playfair Display", serif;
    font-size: 1.08rem;
    color: var(--nn-ink);
    background: #fff;
    padding: 1.15rem 1.35rem;
}

.nn-accordion .accordion-button:not(.collapsed) {
    background: var(--nn-pink-tint);
    color: var(--nn-rose-deep);
    box-shadow: none;
}

.nn-accordion .accordion-button:focus {
    box-shadow: 0 0 0 .2rem rgba(229, 139, 167, .3);
    border-color: var(--nn-pink);
}

.nn-accordion .accordion-button::after {
    background-image: none;
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: var(--nn-gold);
    width: auto;
    height: auto;
    transition: transform .3s;
}

.nn-accordion .accordion-body {
    padding: 0 1.35rem 1.35rem;
    color: var(--nn-ink-soft);
    line-height: 1.8;
}


/* ==========================================================================
   Review — placeholder until the client sends real reviews
   ========================================================================== */

.coming-soon {
    border: 1px dashed var(--nn-gold-soft);
    border-radius: 8px;
    background: var(--nn-gold-tint);
    padding: 3rem 1.5rem;
}

.coming-soon i {
    font-size: 2.5rem;
    color: var(--nn-gold);
}

.review-card {
    height: 100%;
    background: #fff;
    border: 1px solid var(--nn-line);
    border-radius: 6px;
    padding: 1.75rem;
}

.review-card .stars {
    color: var(--nn-gold);
    letter-spacing: 2px;
    margin-bottom: .6rem;
}

.review-card blockquote {
    margin: 0 0 1rem;
    font-size: .98rem;
    line-height: 1.8;
    color: var(--nn-ink-soft);
}

.review-card cite {
    font-style: normal;
    font-weight: 600;
    color: var(--nn-ink);
}


/* ==========================================================================
   Steps ("How it works")
   ========================================================================== */

.step {
    position: relative;
    height: 100%;
    padding: 2rem 1.5rem 1.5rem;
    background: #fff;
    border: 1px solid var(--nn-line);
    border-radius: 6px;
}

.step .num {
    position: absolute;
    top: -18px;
    left: 1.5rem;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--nn-purple) 0%, var(--nn-pink) 100%);
    color: #fff;
    font-weight: 700;
}

.step h5 {
    font-size: 20px;
    margin-top: 20px;
    margin-bottom: 10px;
}

.step p {
    margin: 0;
    font-size: 16px;
    line-height: 1.75;
}


/* ==========================================================================
   Booking / contact channels
   ========================================================================== */

.channel-card {
    display: block;
    height: 100%;
    padding: 1.5rem;
    text-align: center;
    text-decoration: none;
    background: #fff;
    border: 1px solid var(--nn-line);
    border-radius: 6px;
    transition: .35s;
}

.channel-card:hover {
    border-color: var(--nn-gold-soft);
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(106, 79, 176, .14);
}

.channel-card .ico {
    width: 56px;
    height: 56px;
    margin: 0 auto .85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.5rem;
    color: #fff;
}

.ico-line {
    background: #06C755;
}

.ico-whatsapp {
    background: #25D366;
}

.ico-telegram {
    background: #29A9EB;
}

.ico-facebook {
    background: #1877F2;
}

.ico-threads {
    background: #101010;
}

.channel-card h5 {
    font-size: 1.05rem;
    margin-bottom: .2rem;
}

.channel-card span {
    font-size: .85rem;
    color: var(--nn-ink-soft);
}

/* QR inside a channel card — for visitors on a desktop, who scan rather than tap */
.channel-card .qr {
    display: block;
    width: 100%;
    max-width: 150px;
    height: auto;
    margin: 1rem auto .85rem;
    padding: 4px;
    background: #fff;
    border: 1px solid var(--nn-line);
    border-radius: 4px;
}

.qr-card {
    height: 100%;
    text-align: center;
    padding: 1.25rem;
    background: #fff;
    border: 1px solid var(--nn-line);
    border-radius: 6px;
}

.qr-card img {
    width: 100%;
    max-width: 190px;
    height: auto;
    border-radius: 4px;
    border: 1px solid var(--nn-line);
}

.cta-band {
    background: linear-gradient(120deg, var(--nn-purple-soft) 0%, var(--nn-pink-soft) 100%);
    border-top: 1px solid var(--nn-gold-soft);
    border-bottom: 1px solid var(--nn-gold-soft);
}

.map-frame {
    border: 1px solid var(--nn-gold-soft);
    border-radius: 6px;
    overflow: hidden;
    line-height: 0;
    background: var(--nn-pink-tint);
}

.map-frame iframe {
    width: 100%;
    height: 420px;
    border: 0;
    display: block;
}


/* Floating quick-book dock */
.book-dock {
    position: fixed;
    right: 18px;
    bottom: 92px;
    z-index: 98;
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.book-dock a {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    font-size: 1.2rem;
    text-decoration: none;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .18);
    transition: .3s;
}

.book-dock a:hover {
    transform: scale(1.08);
    color: #fff;
}

@media (max-width: 575.98px) {
    .book-dock {
        bottom: 80px;
        right: 12px;
    }

    .book-dock a {
        width: 42px;
        height: 42px;
    }
}


/* ==========================================================================
   Intro video
   ========================================================================== */

.video-frame {
    border: 1px solid var(--nn-gold-soft);
    border-radius: 8px;
    overflow: hidden;
    background: var(--nn-ink);
    line-height: 0;
}

.video-frame video {
    width: 100%;
    height: auto;
    display: block;
}


/* ==========================================================================
   Footer
   ========================================================================== */

/* Light grey, built on the same gradient shape as .nn-hero so the top and the
   bottom of the page bookend each other. Going light means everything inside
   flips from white-on-dark to ink-on-light. */
.footer {
    background:
        radial-gradient(900px 420px at 88% 15%, #FFFFFF 0%, rgba(255, 255, 255, 0) 70%),
        linear-gradient(135deg, #F2F0F3 0%, #E8E6EB 50%, #F1EEF3 100%) !important;
    border-top: 1px solid var(--nn-line);
    color: var(--nn-ink) !important;
}

.footer::after {
    background: rgba(59, 47, 54, .12) !important;
}

.footer h5 {
    color: var(--nn-rose-deep) !important;
    font-size: 1.05rem;
    letter-spacing: .5px;
}

.footer p,
.footer .btn.btn-link,
.footer .btn.btn-link::before {
    color: var(--nn-ink-soft);
}

.footer .btn.btn-link:hover {
    color: var(--nn-rose-deep);
}

.footer img.footer-logo {
    height: 84px;
    width: auto;
}

.footer .social a {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--nn-pink);
    background: var(--nn-pink);
    color: #fff;
    margin-right: .5rem;
    transition: .3s;
    text-decoration: none;
}

.footer .social a:hover {
    background: var(--nn-ink);
    border-color: var(--nn-ink);
    color: #fff;
}

.copyright {
    background: #E2DFE5 !important;
    color: var(--nn-ink-soft);
    font-size: .875rem;
}

.copyright a {
    color: var(--nn-ink);
}

.copyright a:hover {
    color: var(--nn-rose-deep);
}


/* ==========================================================================
   Misc
   ========================================================================== */

.back-to-top {
    right: 18px;
    bottom: 28px;
}

#spinner .spinner-grow {
    color: var(--nn-pink) !important;
}

.editor-note {
    /* visible only in the source — reminders for whoever updates the site */
    display: none;
}

::selection {
    background: var(--nn-pink-soft);
    color: var(--nn-ink);
}

/* ==========================================================================
   Contact block + footer ported from design-01
   Same markup, same look; the colours come from this template's own tokens
   so the two sites stay in step if the palette ever moves.
   ========================================================================== */

/* --- Gold CTA button (design-01's primary call to action) --------------- */
.btn-gold {
    color: #fff;
    background: var(--nn-gold);
    border-color: var(--nn-gold);
}

.btn-gold:hover,
.btn-gold:focus {
    color: #fff;
    background: #AE8B1F;
    border-color: #AE8B1F;
}

/* --- Borderless buttons on the pink "Follow Us" bar --------------------- */
/* The pill is white, so the icon takes the readable deep rose rather than
   the pastel pink fill. */
.btn-light-outline-0 {
    border: 0;
    color: var(--nn-rose-deep) !important;
}

.btn-light-outline-0:hover,
.btn-light-outline-0:focus {
    background: var(--nn-gold) !important;
    color: #fff !important;
}

/* --- Footer: pale pink slab under a gold rule, ink text ----------------- */
/* Overrides the light-grey gradient footer this template shipped with. */
.footer {
    background: var(--nn-pink-tint) !important;
    border-top: 2px solid var(--nn-gold);
    color: var(--nn-ink) !important;
}

.footer::after {
    display: none;
}

.footer .footer-item a,
.footer .footer-item p {
    color: var(--nn-ink);
    line-height: 40px;
    font-size: 17px;
    transition: .5s;
    text-decoration: none;
}

/* The markup carries .text-white on the headings and the intro copy (it was
   written for a dark footer); on this background they have to read as ink. */
.footer .footer-item h4,
.footer .footer-item .text-white {
    color: var(--nn-ink) !important;
}

.footer .footer-item .text-muted {
    color: var(--nn-ink-soft) !important;
}

.footer .footer-item a:hover {
    letter-spacing: 2px;
    color: var(--nn-rose-deep) !important;
}

/* Small leading icons: brand pink (#E58BA7 = --nn-pink) */
.footer .footer-item .text-secondary {
    color: var(--nn-pink) !important;
}

.footer img.footer-logo,
.footer .footer-logo {
    height: 96px;
    width: auto;
}

/* ==========================================================================
   Home page price table, ported from design-01.
   Full width, one row per massage, one column per session length, sitting on
   a dimmed photo band. Colours come from this template's own tokens.
   NOTE: the older .price-matrix table is still used by price.html - leave it.
   ========================================================================== */

.bg-pricing {
    background: linear-gradient(rgba(59, 47, 54, 0.7), rgba(59, 47, 54, 0.7)),
                url(../img/thaimassage.jpg) no-repeat center center;
    background-size: cover;
}

.price-table-wrap {
    overflow: hidden;
    border: 1px solid var(--nn-gold-soft);
}

.price-table {
    width: 100%;
    margin: 0;
    color: var(--nn-ink);
    background: transparent;
}

.price-table thead th {
    background: var(--nn-pink);
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    border: 0;
    border-bottom: 3px solid var(--nn-gold);
    padding: 20px 24px;
    white-space: nowrap;
}

.price-table tbody th,
.price-table tbody td {
    border: 0;
    border-bottom: 1px solid var(--nn-line);
    padding: 18px 24px;
    background: transparent;
    vertical-align: middle;
}

.price-table tbody tr:last-child th,
.price-table tbody tr:last-child td {
    border-bottom: 0;
}

.price-table tbody tr:nth-child(even) th,
.price-table tbody tr:nth-child(even) td {
    background: rgba(229, 139, 167, .12);
}

.price-table tbody tr:hover th,
.price-table tbody tr:hover td {
    background: rgba(158, 134, 222, .14);
}

/* Massage name */
.price-table tbody th a {
    font-size: 19px;
    font-weight: 700;
    color: var(--nn-ink);
    transition: .3s;
    text-decoration: none;
}

.price-table tbody th a:hover {
    color: var(--nn-rose-deep);
}

/* Price figures - deep rose, not the pastel fill, so they stay readable */
.price-table tbody td {
    font-size: 21px;
    font-weight: 700;
    color: var(--nn-rose-deep);
    white-space: nowrap;
}

.price-thumb {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border: 2px solid var(--nn-gold-soft);
    flex: 0 0 56px;
}

.btn-primary-outline-0 {
    border: 0;
    color: #fff !important;
}

.btn-primary-outline-0:hover,
.btn-primary-outline-0:focus {
    background: var(--nn-gold) !important;
    color: #fff !important;
}

/* Below md the table scrolls sideways inside .table-responsive; shrink the
   padding so fewer columns fall off the edge. */
@media (max-width: 767.98px) {

    .price-table thead th,
    .price-table tbody th,
    .price-table tbody td {
        padding: 14px 14px;
    }

    .price-table tbody td {
        font-size: 18px;
    }

    .price-thumb {
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
    }
}

/* ==========================================================================
   Booking request form, ported from design-01.
   Sits on a dimmed photo band. Bootstrap 5 has no .form-row / .form-group /
   .custom-select / .btn-block, so the markup uses row+g-3, .form-select and
   .w-100; the rules below make the controls legible on the dark panel.
   ========================================================================== */

.bg-appointment {
    background: linear-gradient(rgba(59, 47, 54, 0.7), rgba(59, 47, 54, 0.7)),
                url(../img/organicmassage.jpg) no-repeat center center;
    background-size: cover;
}

.booking-panel {
    background: rgba(59, 47, 54, 0.7);
}

/* Transparent controls on a dark panel: Bootstrap's defaults are dark text on
   white, which would be unreadable here. */
.booking-panel .form-control,
.booking-panel .form-select {
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 0;
}

.booking-panel .form-control::placeholder {
    color: rgba(255, 255, 255, .75);
    opacity: 1;
}

.booking-panel .form-control:focus,
.booking-panel .form-select:focus {
    color: #fff;
    background-color: rgba(255, 255, 255, .08) !important;
    border-color: var(--nn-gold);
    box-shadow: 0 0 0 .2rem rgba(201, 162, 39, .35);
}

/* The dropdown list itself renders on the OS layer, so its options need ink
   on white or they inherit the white text above and vanish. */
.booking-panel .form-select option {
    color: var(--nn-ink);
    background: #fff;
}

/* Native date/time pickers: make the browser's calendar/clock icon visible
   against the dark panel. */
.booking-panel input[type="date"]::-webkit-calendar-picker-indicator,
.booking-panel input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    cursor: pointer;
}

/* ==========================================================================
   Therapist gallery.
   Each PNG is a finished profile card - number, name, age, weight, height
   and experience are printed into the artwork - so the image must be shown
   WHOLE. Never give these a fixed height or object-fit: cover; it would cut
   the details off, unlike the cropped .therapist-media photos above.
   ========================================================================== */

.therapist-gallery-item {
    display: block;
    overflow: hidden;
    border-radius: 6px;
    box-shadow: 0 2px 14px rgba(59, 47, 54, .12);
    transition: .5s;
}

.therapist-gallery-item img {
    width: 100%;
    height: auto;
    transition: .5s;
}

.therapist-gallery-item:hover {
    box-shadow: 0 6px 22px rgba(59, 47, 54, .24);
}

.therapist-gallery-item:hover img {
    transform: scale(1.04);
}

.therapist-gallery-item:focus-visible {
    outline: 3px solid var(--nn-gold);
    outline-offset: 3px;
}

#therapistModal .modal-body img {
    display: block;
}


/* ==========================================================================
/* ==========================================================================
   Service area map (Leaflet + OpenStreetMap)
   Markup lives in contact.html, behaviour in js/service-area-map.js.
   Everything is namespaced "sa-" so it cannot collide with Elementor,
   a theme stylesheet or the rest of this template.
   ========================================================================== */
/* ---- Service area map: scoped styles ------------------------------- */
.sa-wrap { width: 100%; }

/* position:relative anchors the hint; z-index:0 opens a stacking context
so Leaflet's internal panes can never paint over a sticky navbar. */
.sa-map-shell {
    position: relative;
    z-index: 0;
    border-radius: 12px;
    overflow: hidden;
}

.sa-map {
    width: 100%;
    height: 600px;
    background: #e8e4df;
}

@media (max-width: 767.98px) {
    .sa-map { height: 450px; }
}

/* Keep the rounded corners on the tile layer itself, not just the box */
.sa-map .leaflet-container { border-radius: 12px; }

/* "Use two fingers..." overlay. Hidden until the user tries a one-finger
drag, then fades out again. pointer-events:none so it never blocks the map. */
.sa-hint {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 500;
    pointer-events: none;
    max-width: 80%;
    padding: 12px 20px;
    border-radius: 999px;
    background: rgba(43, 36, 48, 0.82);
    color: #fff;
    font-size: 15px;
    line-height: 1.3;
    text-align: center;
    opacity: 0;
    transition: opacity .25s ease;
}

.sa-hint.is-visible { opacity: 1; }

/* Pseudo-fullscreen fallback for browsers without the Fullscreen API
(notably Safari on iPhone). */
.sa-map-shell.is-pseudo-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 9999;
    border-radius: 0;
}

.sa-map-shell.is-pseudo-fullscreen .sa-map,
.sa-map-shell.is-pseudo-fullscreen .leaflet-container {
    height: 100%;
    border-radius: 0;
}

/* Fullscreen control button, styled to match Leaflet's own controls */
.sa-fs-btn {
    display: block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 16px;
    color: #333;
    background: #fff;
    cursor: pointer;
    border: 0;
    padding: 0;
}

.sa-fs-btn:hover { background: #f4f4f4; }

/* ---- Edit mode panel ---------------------------------------------- */
.sa-editor { margin-top: 16px; }

.sa-editor__label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 600;
}

.sa-editor__box {
    width: 100%;
    font-family: Menlo, Consolas, "Courier New", monospace;
    font-size: 13px;
    line-height: 1.5;
    padding: 12px;
    border: 1px solid #d9d2dd;
    border-radius: 8px;
    background: #fbfafc;
    resize: vertical;
}

.sa-editor__btn {
    margin-top: 10px;
    padding: 9px 18px;
    border: 0;
    border-radius: 999px;
    background: var(--nn-gold);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

.sa-editor__btn:hover { background: #AE8B1F; }

.sa-editor__note {
    margin-left: 10px;
    font-size: 14px;
    color: #2B2430;
}

/* Vertex handles shown only in edit mode */
.sa-vertex {
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--nn-gold);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .45);
    cursor: move;
}

/* The home page stacks the map directly on top of the pink "Follow Us" bar,
   so square off its bottom corners and keep the original 450px height the
   Google embed had there. The contact page keeps the full rounded card. */
.sa-stacked .sa-map-shell,
.sa-stacked .sa-map,
.sa-stacked .leaflet-container {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.sa-stacked .sa-map {
    height: 450px;
}

@media (max-width: 767.98px) {
    .sa-stacked .sa-map {
        height: 380px;
    }
}

/* ==========================================================================
   Demo / placeholder markers
   Used on the review page while it holds sample content. DELETE these rules
   together with the placeholder cards once real client reviews replace them -
   nothing else depends on them.
   ========================================================================== */

.demo-note {
    max-width: 720px;
    color: var(--nn-ink-soft);
    background: var(--nn-gold-tint);
    border: 1px dashed var(--nn-gold-soft);
    border-radius: 999px;
    padding: 10px 22px;
    font-size: .95rem;
}

.demo-note i {
    color: var(--nn-gold);
}

.review-card {
    position: relative;
}

.demo-badge {
    position: absolute;
    top: 14px;
    right: 16px;
    z-index: 2;
    background: var(--nn-gold);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    line-height: 1;
    padding: 5px 10px;
    border-radius: 999px;
}

/* ==========================================================================
   Modal width
   Bootstrap widens .modal-lg / .modal-xl to 800px from 992px up (and .modal-xl
   again to 1140px from 1200px). The therapist cards are tall 800x1200 portraits,
   so at 800px wide the modal runs well past the fold. Cap it at 500px - the
   same width Bootstrap already uses for a default dialog - and the whole card
   fits on screen. Both breakpoints are restated or .modal-xl would jump back
   to 1140px on large monitors.
   ========================================================================== */

@media (min-width: 992px) {

    .modal-lg,
    .modal-xl {
        max-width: 500px;
    }
}

@media (min-width: 1200px) {

    .modal-xl {
        max-width: 500px;
    }
}

/* ==========================================================================
   Price page: massage section photos
   The four write-up sections pair a photo with a column of text. The source
   images have different aspect ratios, so left them to their natural height
   the photo and the text column ended at different points on every section.
   Pin them to 400px and crop to fill.
   Scoped to the four section ids so the .video-frame on index.php (the intro
   video) and about.php are untouched.
   ========================================================================== */

#thai .video-frame img,
#oil .video-frame img,
#organic .video-frame img,
#aroma .video-frame img {
    height: 400px;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* ==========================================================================
   Therapist viewer: fit the card to the screen
   The profile PNGs are 800x1200 portraits (2:3). At the dialog's 500px width
   the picture alone renders ~750px tall; add the header and footer and the
   dialog is taller than most viewports, so the bottom of the card and the
   Book buttons fall off the screen with no way to scroll to them.
   Cap the picture at the height actually left over and let it letterbox.
     100vh
     - 3.5rem  dialog top+bottom margin
     - 3.6rem  header
     - 4.6rem  footer
     - 1rem    breathing room
   ========================================================================== */

#therapistModal .modal-body {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--nn-ink);
    overflow: hidden;
}

/* The markup carries .w-100, which would force the image to the full dialog
   width and reintroduce the overflow - height has to win here. */
#therapistModal .modal-body img {
    width: auto !important;
    max-width: 100%;
    max-height: calc(100vh - 12.7rem);
    height: auto;
    object-fit: contain;
}

/* Keep the two booking buttons on one line rather than stacking and eating
   another 50px of height. */
#therapistModal .modal-footer {
    flex-wrap: nowrap;
    gap: .5rem;
}

@media (max-width: 400px) {
    #therapistModal .modal-footer {
        flex-wrap: wrap;
    }
}

/* ==========================================================================
   Booking form result banners
   Hidden in the markup; js/nn.js reveals one after mail/booking.php redirects
   back. They sit on the dark .booking-panel, so both need light text.
   ========================================================================== */

.booking-alert {
    display: flex;
    align-items: center;
    padding: .9rem 1.2rem;
    margin-bottom: 1.25rem;
    border-radius: 6px;
    font-size: .95rem;
    line-height: 1.5;
}

.booking-alert--ok {
    color: #fff;
    background: rgba(45, 138, 92, .92);
    border: 1px solid rgba(255, 255, 255, .35);
}

.booking-alert--error {
    color: #fff;
    background: rgba(168, 56, 56, .92);
    border: 1px solid rgba(255, 255, 255, .35);
}

.booking-alert i {
    flex: 0 0 auto;
}

/* ==========================================================================
   Therapist lightbox: card + extra photos, arrows, counter, preview strip.
   Markup is built by js/nn.js; the modal itself is unchanged.
   ========================================================================== */

.therapist-gallery-item { position: relative; }

.therapist-photo-count {
    position: absolute;
    right: .6rem;
    bottom: .6rem;
    padding: .2rem .6rem;
    border-radius: 999px;
    background: rgba(59, 47, 54, .78);
    color: #fff;
    font-size: .8rem;
    line-height: 1.4;
    pointer-events: none;
}

#therapistModal .modal-body {
    flex-direction: column;
}

#therapistModal .tm-stage {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Room for the preview strip under the picture. */
#therapistModal .modal-body.has-gallery .tm-stage img {
    max-height: calc(100vh - 12.7rem - 5.4rem);
}

#therapistModal .tm-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2.6rem;
    height: 2.6rem;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .85);
    color: var(--nn-ink);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
    cursor: pointer;
    transition: .2s;
}

#therapistModal .tm-nav:hover { background: #fff; }
#therapistModal .tm-prev { left: .6rem; }
#therapistModal .tm-next { right: .6rem; }

#therapistModal .tm-count {
    position: absolute;
    left: .6rem;
    bottom: .6rem;
    padding: .15rem .65rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    font-size: .8rem;
}

#therapistModal .tm-nav[hidden],
#therapistModal .tm-count[hidden],
#therapistModal .tm-thumbs[hidden] { display: none; }

#therapistModal .tm-thumbs {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: .5rem;
    padding: .65rem .75rem;
    overflow-x: auto;
    background: rgba(0, 0, 0, .35);
}

#therapistModal .tm-thumb {
    flex: 0 0 auto;
    width: 48px;
    height: 64px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    background: #000;
    opacity: .6;
    cursor: pointer;
    transition: .2s;
}

#therapistModal .tm-thumb:hover,
#therapistModal .tm-thumb.active { opacity: 1; }
#therapistModal .tm-thumb.active { border-color: var(--nn-gold); }

/* The viewer rule above forces width:auto on every image in the body;
   the thumbnails need to fill their little frames instead. */
#therapistModal .tm-thumb img {
    width: 100% !important;
    height: 100%;
    max-height: none;
    object-fit: cover;
}

/* ==========================================================================
   Therapist lightbox: bigger picture.
   The photo is always shown whole (object-fit: contain), so the only way to
   make it larger is to give it more of the screen: slimmer header/footer,
   smaller dialog margins, a wider dialog, and - from 576px up - the preview
   thumbnails in a column beside the picture instead of a strip under it.
   Height budget: 100vh - 1rem margins - 2.9rem header - 3.4rem footer.
   ========================================================================== */

#therapistModal .modal-dialog {
    margin: .5rem auto;
    max-width: min(640px, calc(100vw - 1rem));
}

#therapistModal .modal-header {
    padding: .45rem .9rem;
}

#therapistModal .modal-title {
    font-size: 1rem;
}

#therapistModal .modal-footer {
    padding: .4rem .6rem;
    flex-wrap: nowrap;
}

#therapistModal .modal-footer .btn {
    padding: .35rem .9rem !important;
    font-size: .8rem;
    white-space: nowrap;
}

#therapistModal .modal-body img,
#therapistModal .modal-body.has-gallery .tm-stage img {
    max-height: calc(100vh - 7.3rem);
}

/* Phones: thumbnails stay in a slim strip under the picture. */
#therapistModal .modal-body.has-gallery .tm-stage img {
    max-height: calc(100vh - 7.3rem - 4.2rem);
}

#therapistModal .tm-thumbs {
    padding: .5rem;
}

#therapistModal .tm-thumb {
    width: 40px;
    height: 54px;
}

@media (min-width: 576px) {
    #therapistModal .modal-body.has-gallery {
        flex-direction: row;
        align-items: stretch;
    }

    #therapistModal .modal-body.has-gallery .tm-stage {
        flex: 1 1 auto;
        min-width: 0;
        width: auto;
    }

    #therapistModal .modal-body.has-gallery .tm-stage img {
        max-height: calc(100vh - 7.3rem);
    }

    #therapistModal .tm-thumbs {
        flex: 0 0 auto;
        width: 62px;
        flex-direction: column;
        justify-content: center;
        overflow-x: hidden;
        overflow-y: auto;
        padding: .5rem;
    }

    #therapistModal .tm-thumb {
        width: 46px;
        height: 62px;
    }
}

/* ==========================================================================
   Therapist lightbox: no black bars.
   The dialog is sized to the card's 2:3 shape (picture height x 2/3, plus the
   62px thumbnail column when there is one) so the card fills it edge to
   edge. A photo with another shape is still shown whole, over a blurred copy
   of itself (--tm-bg, set by js/nn.js) instead of black.
   ========================================================================== */

#therapistModal .modal-body {
    background: #fff1f6;
}

#therapistModal .tm-stage {
    overflow: hidden;
    background: #fff1f6;
}

#therapistModal .tm-stage::before {
    content: "";
    position: absolute;
    inset: -24px;
    background: var(--tm-bg) center / cover no-repeat;
    filter: blur(18px) brightness(.92);
}

#therapistModal .tm-stage img,
#therapistModal .modal-body img,
#therapistModal .modal-body.has-gallery .tm-stage img {
    position: relative;
    z-index: 1;
    width: 100% !important;
    height: 100%;
    max-height: none;
    object-fit: contain;
}

/* Thumbnails: light, to match the header and footer. */
#therapistModal .tm-thumbs {
    background: #fff1f6;
}

#therapistModal .tm-thumb {
    border-color: #e6cdd9;
    background: #fff;
}

#therapistModal .tm-thumb.active {
    border-color: var(--nn-gold);
}

/* Phones: full width of the screen, picture height capped by the screen. */
#therapistModal .tm-stage {
    height: min(calc(100vh - 7.3rem), calc((100vw - 1rem) * 1.5));
}

#therapistModal.tm-multi .tm-stage {
    height: min(calc(100vh - 7.3rem - 4.2rem), calc((100vw - 1rem) * 1.5));
}

@media (min-width: 576px) {
    #therapistModal .modal-dialog {
        max-width: none;
        width: min(calc((100vh - 7.3rem) * .6667), calc(100vw - 1rem));
    }

    #therapistModal.tm-multi .modal-dialog {
        width: min(calc((100vh - 7.3rem) * .6667 + 62px), calc(100vw - 1rem));
    }

    #therapistModal .tm-stage,
    #therapistModal.tm-multi .tm-stage {
        height: calc(100vh - 7.3rem);
    }
}

/* Arrows and counter must sit above the picture (which is z-index 1). */
#therapistModal .tm-nav,
#therapistModal .tm-count {
    z-index: 2;
}

/* ==========================================================================
   Therapist lightbox: ONE layout for every screen size.
   Card on the left, thumbnail column on the right, header above, buttons
   below - on phones exactly as on desktop. Everything hangs off two
   variables so the dialog, the picture and the thumbnails always agree:
     --tm-thumb  width of the thumbnail column (0 when there is only a card)
     --tm-h      picture height: what the screen height allows, but never
                 taller than a 2:3 card could be at the width left over.
   ========================================================================== */

#therapistModal {
    --tm-thumb: 0px;
    --tm-h: min(calc(100vh - 7.3rem), calc((100vw - 1rem - var(--tm-thumb)) * 1.5));
}

#therapistModal.tm-multi {
    --tm-thumb: 56px;
}

@media (min-width: 576px) {
    #therapistModal.tm-multi {
        --tm-thumb: 62px;
    }
}

#therapistModal .modal-dialog,
#therapistModal.tm-multi .modal-dialog {
    max-width: none !important;
    width: calc(var(--tm-h) * .6667 + var(--tm-thumb)) !important;
}

#therapistModal .modal-body.has-gallery {
    flex-direction: row !important;
    align-items: stretch;
}

#therapistModal .tm-stage,
#therapistModal.tm-multi .tm-stage {
    flex: none !important;
    width: calc(var(--tm-h) * .6667) !important;
    height: var(--tm-h) !important;
}

#therapistModal .tm-thumbs {
    flex: 0 0 var(--tm-thumb) !important;
    width: var(--tm-thumb) !important;
    flex-direction: column !important;
    justify-content: center;
    overflow-x: hidden;
    overflow-y: auto;
    padding: .5rem !important;
}

#therapistModal .tm-thumb {
    width: 40px;
    height: 54px;
}

@media (min-width: 576px) {
    #therapistModal .tm-thumb {
        width: 46px;
        height: 62px;
    }
}

/* ==========================================================================
   Therapist lightbox: footer buttons must always fit the box.
   On short screens a card-only dialog (no extra photos) is narrower than two
   full-size buttons, so they spilled out of the box. The buttons now share
   the width equally, shrink their text and wrap if they have to, and the
   dialog never gets narrower than 300px.
   ========================================================================== */

#therapistModal .modal-dialog,
#therapistModal.tm-multi .modal-dialog {
    min-width: min(300px, calc(100vw - 1rem));
}

#therapistModal .modal-footer {
    gap: .4rem;
    padding: .4rem;
}

#therapistModal .modal-footer .btn {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    padding: .35rem .4rem !important;
    font-size: .74rem;
    letter-spacing: 0;
    line-height: 1.25;
    white-space: normal;
}

#therapistModal .modal-footer .btn i {
    margin-right: .3rem !important;
}