/* 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. */
.popup-modal .close-modal {
    display: inline-block;
    line-height: 1;
    padding: 10px;
    margin: -10px -10px 0 0;
}

/* 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;
        }

    /* 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;
    }