/* Treatments dropdown: plain text list */
.treatments-mega .awemenu-megamenu-item {
    padding-top: 6px;
    padding-bottom: 6px;
}

.treatments-mega .container-fluid {
    padding-left: 0;
    padding-right: 0;
}

.treatments-mega .awemenu-megamenu-wrapper {
    padding: 0;
}

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

.treatments-list-item {
    position: relative;
    border-bottom: 1px solid #eee;
}

    .treatments-list-item:last-child {
        border-bottom: 0;
    }

.treatments-list-row {
    display: flex;
    align-items: stretch;
}

.treatments-mega .treatments-list-link,
.treatments-mega .aesthetic-tile-link {
    display: block;
    flex: 1;
    min-width: 0;
    padding: 10px 16px;
    color: #666;
}

    .treatments-mega .treatments-list-link:hover,
    .treatments-mega .treatments-list-link:focus,
    .treatments-mega .aesthetic-tile-link:hover,
    .treatments-mega .aesthetic-tile-link:focus {
        background: #eef3f8;
        color: #00467F;
    }

.treatments-list-label {
    font-size: 13px;
    line-height: 1.3;
}

/* Aesthetic Treatment row toggle */
.aesthetic-toggle {
    flex: 0 0 44px;
    width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

    .aesthetic-toggle:hover,
    .aesthetic-toggle:focus {
        outline: none;
    }

.aesthetic-caret {
    display: inline-block;
    font-size: 13px;
    line-height: 1;
    color: #00467F;
    transition: transform .25s ease;
}

.aesthetic-toggle[aria-expanded="true"] .aesthetic-caret {
    transform: rotate(180deg);
}

/* Sub-list flyout: opens to the side of the row, flush against it so
   there's no gap for the pointer to lose hover through on the way over. */
.aesthetic-dropdown {
    position: absolute;
    top: 0;
    left: 100%;
    z-index: 40;
    width: 220px;
    margin-left: 0;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 6px;
    box-shadow: 0 14px 30px rgba(0,20,40,.14);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, visibility .2s;
}

.aesthetic-dropdown.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.aesthetic-dropdown-inner {
    position: relative;
    padding: 4px;
}

.aesthetic-dropdown-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.treatments-mega .aesthetic-dropdown-list li a {
    display: block;
    text-align: left;
    text-transform: none;
    font-size: 13px;
    letter-spacing: normal;
    line-height: 1.3;
    padding: 8px 12px;
    border-radius: 4px;
    color: #666;
    transition: background .2s ease, color .2s ease;
}

.treatments-mega .aesthetic-dropdown-list li a:hover,
.treatments-mega .aesthetic-dropdown-list li a:focus {
    background: #eef3f8;
    color: #00467F;
}

@media (max-width: 480px) {
    .aesthetic-dropdown {
        position: static;
        width: 100%;
        margin-left: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: #fafbfc;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
        max-height: 0;
        overflow: hidden;
        transition: max-height .3s ease;
    }

    .aesthetic-dropdown.open {
        max-height: 400px;
    }

    .treatments-mega .aesthetic-dropdown-list li a {
        padding: 9px 18px 9px 60px;
        border-radius: 0;
    }
}

/* Call-back popup modal (#modal): the phone number link has no font-size of
   its own, so it inherits the page's base size (18px) instead of matching
   the 17px heading right above it. */
.popup-modal a[href^="tel:"] {
    font-size: 17px;
}

/* The "X" close button inherits .popup-modal's line-height: 0, which
   collapses its own line box to zero height — its clickable area
   disappears even though the glyph is still visible, making the button
   unreliable (or entirely unclickable) to tap. Give it a real line-height
   and some padding for a proper hit target, independent of the modal's
   line-height.
   It's also pinned to the corner rather than floated: as a float it sat
   beside the full-width .full float, which couldn't fit next to it and
   dropped below it — adding a whole row of empty space above the content. */
.popup-modal .close-modal {
    display: inline-block;
    position: absolute;
    top: 4px;
    right: 6px;
    float: none;
    line-height: 1;
    padding: 10px;
    z-index: 1;
}

/* The theme's .half columns are 50% wide, which crams the message and the
   Contact Us button into two narrow side-by-side slivers on phones. Stack
   them into full-width rows instead. */
@media (max-width: 991px) {
    /* .popup-modal is position:fixed with a fixed `bottom` offset, so its
       bottom edge never moves — growing a child's margin-top just grows the
       card upward instead of shifting that child down the screen. To
       actually move the button (the last element, sitting right against
       the card's bottom edge) further down, shrink the card's own bottom
       padding instead. */
    .popup-modal {
        padding: 1em 1em 0.5em;
        /* line-height: 1.4; */
    }

    .popup-modal .full {
        overflow: hidden;
    }

    .popup-modal .half {
        float: none;
        width: 100%;
        margin-bottom: 0;
    }

        /* Don't rely on the theme's .bot-mar spacing here: it only sets
           margin-bottom inside a patchwork of old breakpoints (capped at
           618px), so widths between that and 767px get no gap at all and
           the message text collides with the button below it. */
        .popup-modal .half:first-child {
            margin-bottom: 14px;
            /* Keep the centred message clear of the corner-pinned X. */
            padding: 0 24px;
        }

    /* The theme only gives .modal-btn `display: inline-block` inside two
       narrow legacy breakpoints (>=768px and <=415px). Between those, the
       button falls back to the browser default `display: inline` for an
       <a> tag, which ignores width/vertical-margin and doesn't reserve
       space for vertical padding — so it visually paints over the text
       above it instead of pushing below it. Force the right display here
       so it doesn't depend on that gap. */
    .popup-modal .modal-btn-color {
        display: block;
        width: 100%;
        margin-top: 14px;
        padding: 12px;
    }
}

/* "Call Us / Email Us / Visit Us" strip (index.html): the theme pairs each
   icon with its text using display:inline-block, which lets the icon wrap
   onto its own line above the text whenever there isn't room for both on
   one line — most visible in the "Visit Us" column, whose address is much
   longer than the other two and pushes it over first. Flex keeps the icon
   and text side by side at any width, with only the text wrapping. */
.policy {
    display: flex;
    align-items: flex-start;
    text-align: left;
}

    .policy .policy-icon {
        display: block;
        flex: 0 0 auto;
    }

    .policy .policy-text {
        display: block;
        flex: 1 1 auto;
        min-width: 0;
    }

/* "Real Patient Results" (index.html, under Our Treatments): each case is
   a card with its Before / During / After photos side by side. The source
   photos mix portrait and landscape, so every tile is cropped to the same
   square with object-fit to keep the three steps visually aligned. */
.treatment-results {
    margin-top: 40px;
    padding-top: 40px;
    border-top: 1px solid #e6e6e6;
}

    .treatment-results-header h3 {
        margin: 0 0 8px;
        letter-spacing: 1px;
    }

    .treatment-results-header p {
        margin: 0 0 30px;
        color: #777;
    }

.result-case {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 30px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
}

.result-case-title {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #65b2a8;
    margin-bottom: 12px;
}

.result-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.result-step {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 8px;
    background: #f0f0f0;
}

    .result-step img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.4s ease;
    }

    .result-step:hover img,
    .result-step:focus img {
        transform: scale(1.06);
    }

.result-label {
    position: absolute;
    left: 8px;
    bottom: 8px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #333;
    background: rgba(255, 255, 255, 0.92);
}

.result-label-after {
    color: #fff;
    background: #65b2a8;
}

.result-disclaimer {
    margin: 0;
    font-size: 12px;
    font-style: italic;
    color: #999;
}

@media (max-width: 480px) {
    .result-case {
        padding: 12px;
    }

    .result-steps {
        gap: 6px;
    }

    .result-label {
        left: 4px;
        bottom: 4px;
        padding: 2px 6px;
        font-size: 9px;
    }
}

/* Lightbox for the patient results photos (Magnific Popup). */
.result-step {
    cursor: zoom-in;
}

.mfp-results.mfp-bg {
    background: #111;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mfp-results.mfp-bg.mfp-ready {
    opacity: 0.92;
}

.mfp-results.mfp-bg.mfp-removing {
    opacity: 0;
}

.mfp-results .mfp-figure img.mfp-img {
    border-radius: 10px;
}

.mfp-results .mfp-figure:after {
    border-radius: 10px;
}

.mfp-results .mfp-title {
    padding-top: 4px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #65b2a8;
}

.mfp-results .mfp-counter {
    font-size: 12px;
    color: #aaa;
}

.mfp-results .mfp-arrow,
.mfp-results .mfp-close {
    opacity: 0.8;
}

    .mfp-results .mfp-arrow:hover,
    .mfp-results .mfp-close:hover {
        opacity: 1;
    }

/* Black Friday promo popup (built by js/aesthetic-menu.js). Sits above
   everything else, including the call-us modal and WhatsApp button. */
/* Explicit top/right/bottom/left rather than `inset`, which older iOS
   Safari (pre-14.5) ignores — the overlay then never covers the screen. */
.promo-popup {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 24px 16px;
    background: rgba(0, 0, 0, 0.75);
    opacity: 0;
    transition: opacity 0.3s ease;
}

    .promo-popup.is-open {
        opacity: 1;
    }

.promo-popup-box {
    position: relative;
    max-width: 480px;
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

.promo-popup.is-open .promo-popup-box {
    transform: scale(1);
}

/* Sized off the viewport height too, so the whole poster always fits on
   screen without scrolling (it's a tall portrait image). */
.promo-popup-img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: calc(100vh - 48px);
    /* On phones 100vh includes the area behind the browser toolbars; dvh
       is the actually-visible height (ignored by browsers without it). */
    max-height: calc(100dvh - 48px);
    border-radius: 10px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

.promo-popup-close {
    position: absolute;
    top: -14px;
    right: -14px;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: #222;
    font-size: 26px;
    line-height: 36px;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    transition: background 0.2s ease, color 0.2s ease;
}

    .promo-popup-close:hover,
    .promo-popup-close:focus {
        background: #65b2a8;
        color: #fff;
        outline: none;
    }

/* Stop the page scrolling behind the popup. */
.promo-popup-lock,
.promo-popup-lock body {
    overflow: hidden;
}

/* Hide the sticky call-us bar and WhatsApp button while the promo is up.
   They're already underneath the overlay, but on short phone screens the
   poster ends right at the bar's top edge and reads as clipped by it. */
.promo-popup-lock #modal,
.promo-popup-lock .whatsapp {
    visibility: hidden;
}

@media (max-width: 480px) {
    .promo-popup-close {
        top: -12px;
        right: -8px;
    }
}

/* "View Treatments" hero button (and the /treatments redirect) jump here;
   keep the heading clear of the fixed 80px header. */
#our-treatments {
    scroll-margin-top: 80px;
}