/* Shared responsive layer. Keep TherapMe's navy, lavender and warm neutral palette. */
:root {
    --tm-ink: #24395d;
    --tm-accent: #8f9cbd;
    --tm-surface: #f5f6fa;
    --tm-radius: 20px
}

html {
    scroll-padding-top: 84px
}

body {
    overflow-wrap: break-word
}

img {
    max-width: 100%
}

button, a, input, select, textarea {
    -webkit-tap-highlight-color: transparent
}

input, select, textarea {
    max-width: 100%
}

button:focus-visible, a:focus-visible {
    outline: 3px solid #5476a6;
    outline-offset: 3px
}

.tm-phone-control {
    display: grid;
    grid-template-columns: minmax(100px,36%) minmax(0,1fr);
    gap: 8px
}

    .tm-phone-control select {
        min-width: 0;
        width: 100%;
        border: 1px solid #cbd2df;
        border-radius: 10px;
        padding: 12px 8px;
        background: #fff;
        font: inherit;
        color: #24395d
    }

.tm-phone-help {
    font: 12px/1.5 Arial,sans-serif;
    color: #66778a;
    margin: 5px 0
}

.tm-table-scroll {
    max-width: 100%;
    overflow: auto;
    overscroll-behavior-x: contain
}

.tm-mobile-nav {
    display: none
}

.tm-menu-toggle {
    display: none
}

.tm-auth-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 24px
}

    .tm-auth-actions input[type=submit] {
        margin: 0;
        flex: 1;
        width: auto
    }

    .tm-auth-actions a {
        flex: 1;
        text-align: center;
        padding: 12px;
        border: 1px solid #8f9cbd;
        border-radius: 8px;
        text-decoration: none
    }

.modal.active {
    display: flex !important;
    align-items: center;
    justify-content: center;
    overflow-y: auto !important;
    padding: 20px !important;
    overscroll-behavior: contain
}

.modal .modal-content {
    max-height: calc(100dvh - 40px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    margin: auto !important;
    position: relative;
    padding-bottom: 28px !important
}

.modal .close-btn {
    position: sticky !important;
    top: 0;
    float: right;
    z-index: 2;
    background: #fff !important
}

.modal input, .modal select {
    font-size: 16px !important
}

.booking-box .time-card {
    cursor: pointer
}

    .booking-box .time-card:focus-visible {
        outline: 3px solid #5476a6
    }

@media(min-width:992px) {
    .tm-therapist-slider {
        overflow: visible;
        scroll-snap-type: none
    }

        .tm-therapist-slider > .row {
            display: grid !important;
            grid-template-columns: repeat(4,minmax(0,1fr));
            gap: 24px
        }

            .tm-therapist-slider > .row > div {
                width: 100%;
                max-width: 100%;
                min-width: 0
            }

    .tm-slider-controls {
        display: none !important
    }
}

@media(max-width:991px) {
    body {
        background: #f6f7fb
    }

        body.tm-has-bottom-nav {
            padding-bottom: calc(82px + env(safe-area-inset-bottom))
        }

    .tm-mobile-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1005;
        gap: 4px;
        justify-content: space-around;
        background: rgba(255,255,255,.98);
        border-top: 1px solid #e3e6ef;
        box-shadow: 0 -5px 24px #24395d0c;
        padding: 10px 8px calc(10px + env(safe-area-inset-bottom))
    }

        .tm-mobile-nav a {
            display: flex;
            flex: 1;
            flex-direction: column;
            gap: 5px;
            align-items: center;
            color: #24395d;
            font: 12px/1.2 Arial;
            text-decoration: none;
            border-radius: 12px;
            padding: 5px
        }

            .tm-mobile-nav a[aria-current=page] {
                background: #eef0fa;
                color: #425983
            }

        .tm-mobile-nav svg {
            width: 22px;
            height: 22px;
            stroke: currentColor;
            fill: none;
            stroke-width: 1.7
        }

    .container, .container2 {
        max-width: 100% !important
    }

    .container2 {
        padding: 12px !important
    }

        .container2 .layout {
            grid-template-columns: minmax(0,1fr) !important;
            gap: 16px !important
        }

    .sidebar {
        position: static !important;
        min-height: 0 !important;
        width: 100% !important;
        padding: 14px !important;
        border-radius: 18px !important
    }

        .sidebar .nav, .sidebar nav {
            display: none !important
        }

        .sidebar.tm-menu-open .nav, .sidebar.tm-menu-open nav {
            display: flex !important;
            flex-wrap: wrap;
            gap: 8px
        }

        .sidebar .nav a, .sidebar nav a {
            flex: 1 1 145px;
            margin: 0 !important;
            padding: 12px !important;
            font-size: 14px !important;
            min-height: 44px
        }

    .tm-menu-toggle {
        display: block;
        float: right;
        background: #ffffff1f;
        color: white;
        border: 1px solid #ffffff55;
        padding: 9px 14px;
        border-radius: 12px
    }

    .main .topbar {
        padding: 20px !important;
        border-radius: 18px !important;
        gap: 12px;
        flex-wrap: wrap
    }

        .main .topbar h2 {
            font-size: 26px !important;
            line-height: 1.2
        }

    .main .stats-grid {
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
        gap: 10px !important
    }

    .main .stat-card {
        padding: 16px !important;
        min-height: 112px !important;
        border-radius: 18px !important
    }

    .main .stat-label {
        font-size: 13px !important
    }

    .main .stat-value {
        font-size: 29px !important
    }

    .main .panel {
        padding: 18px !important
    }

    .main .session-row {
        min-width: 0 !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
        padding: 15px !important;
        border: 1px solid #e4e8f0;
        border-radius: 14px;
        margin-bottom: 10px
    }

    .wrap {
        margin: 16px auto !important;
        padding: 0 14px !important;
        width: auto !important;
        min-width: 0 !important
    }

        .wrap > .head {
            gap: 12px;
            flex-wrap: wrap
        }

        .wrap h1 {
            font-size: 27px;
            line-height: 1.2
        }

        .wrap .card {
            padding: 19px !important;
            border-radius: 20px
        }

        .wrap .grid, .wrap .grid.two, .wrap .grid.three {
            grid-template-columns: repeat(2,minmax(0,1fr)) !important
        }

            .wrap .grid > * {
                min-width: 0
            }

        .wrap .head, .wrap .row {
            flex-wrap: wrap
        }

    .booking-box {
        padding: 22px 16px !important;
        margin: 20px 0 !important;
        border-radius: 22px !important
    }

        .booking-box h2 {
            font-size: 23px !important;
            line-height: 1.4
        }

    .therapists {
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
        gap: 10px !important
    }

    .therapist-card {
        padding: 16px 12px !important;
        min-width: 0
    }

    .calendar-grid.tm-month-calendar {
        gap: 5px !important
    }

    .tm-month-calendar .date-card {
        height: 44px !important;
        min-height: 44px !important;
        padding: 6px !important;
        font-size: 15px !important
    }

    .tm-calendar-toolbar button {
        padding: 9px !important;
        font-size: 13px !important
    }

    .tm-calendar-toolbar strong {
        font-size: 15px
    }

    .time-grid {
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
        gap: 8px !important
    }

    .time-card {
        padding: 13px 8px !important;
        font-size: 15px !important
    }

    .confirm-btn {
        width: 100% !important;
        margin-top: 20px !important
    }

    .modal {
        z-index: 2000 !important
    }

        .modal.active {
            padding: 12px !important
        }

        .modal .modal-content {
            width: 100% !important;
            max-width: 520px !important;
            max-height: calc(100dvh - 24px) !important;
            border-radius: 22px !important;
            padding: 20px !important
        }

        .modal h2 {
            font-size: 23px !important
        }

        .modal .form-group {
            margin-bottom: 16px !important
        }

        .modal input {
            padding: 13px !important
        }

        .modal .submit-btn, .modal .book-now-btn {
            width: 100%;
            min-height: 48px
        }

    .tm-therapist-slider {
        padding: 0 4px 16px;
        scrollbar-width: none
    }

        .tm-therapist-slider > .row {
            gap: 14px !important
        }

            .tm-therapist-slider > .row > div {
                flex-basis: calc((100% - 14px)/2) !important
            }

    .team-member {
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 8px 28px #24395d0d
    }

    .team-details__image img {
        height: 360px !important
    }

    .wsmobileheader {
        box-shadow: 0 3px 18px #24395d12
    }

    .hero-section {
        overflow: hidden
    }

        .hero-section h2 {
            font-size: 34px !important;
            line-height: 1.2 !important
        }

    section .section-title h2 {
        font-size: 28px !important
    }

    footer {
        padding-bottom: 15px
    }

    input, select, textarea {
        font-size: 16px !important;
        min-height: 44px
    }

    button, .btn {
        min-height: 44px
    }

    main {
        min-width: 0
    }

    .msg {
        max-width: 92% !important
    }

    .messages {
        height: 40dvh !important
    }
}

@media(max-width:575px) {
    .tm-therapist-slider > .row > div {
        flex-basis: 88% !important
    }

    .wrap .grid, .wrap .grid.two, .wrap .grid.three {
        grid-template-columns: minmax(0,1fr) !important
    }

    .therapists {
        grid-template-columns: minmax(0,1fr) !important
    }

    .main .topbar h2 {
        font-size: 24px !important
    }

    .tm-therapist-slider .team-member-photo img {
        height: 290px !important
    }

    .tm-therapist-slider .tm-meta > p {
        height: 84px;
        line-height: 28px;
        -webkit-line-clamp: 3
    }

    .tm-therapist-slider h6 {
        /*min-height: 50px*/
    }

    .tm-therapist-slider .tm-meta > span {
       /* min-height: 56px*/
    }

    main:not(.main) {
        box-sizing: border-box;
        max-width: calc(100% - 24px) !important
    }

    .summary {
        grid-template-columns: minmax(0,1fr) !important
    }

    .team-details__image img {
        height: 300px !important
    }
}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto
    }

    *, *:before, *:after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important
    }
}

.desktoplogo img.logo {
    width: auto !important;
    height: 84px !important;
    object-fit: contain
}

.desktoplogo {
    height: 84px;
    display: flex;
    align-items: center
}

@media(max-width:991px) {
    .wsmobileheader {
        height: 110px !important;
        background: #fff !important
    }

        .wsmobileheader .smllogo {
            height: 64px !important;
            margin-top: 20px !important;
            padding-left: 16px !important;
            display: flex !important;
            align-items: center
        }

            .wsmobileheader .smllogo img.logo {
                height: 60px !important;
                width: 116px !important;
                object-fit: contain !important;
                object-position: left center
            }

    .wsanimated-arrow {
        margin-top: 25px !important
    }

    .modal {
        z-index: 20010 !important
    }

    .wsmenu {
        z-index: 10010 !important
    }
}

@media(max-width:991px) {
    .sidebar .sidebar-box {
        display: none !important
    }

    .sidebar .brand {
        margin: 0 80px 0 0 !important;
        gap: 10px !important;
        min-height: 54px
    }

    .sidebar .brand-icon {
        width: 42px !important;
        height: 42px !important;
        border-radius: 14px;
        font-size: 18px
    }

    .sidebar .brand h1 {
        font-size: 16px !important;
        margin: 0 0 4px !important
    }

    .sidebar .brand p {
        font-size: 11px !important;
        margin: 0 !important
    }

    .sidebar .tm-menu-toggle {
        width: auto !important;
        min-width: 64px;
        margin: 5px 0 0 !important;
        padding: 8px 10px !important
    }

    .sidebar.tm-menu-open .nav {
        margin-top: 16px !important
    }
}

@media (max-width: 991px) {
    .hero-section h2 {
        font-size: 24px !important;
        line-height: 1.2 !important;
    }
    #hero-3 .caption-txt p span {
        color: #c5d7ff;
        font-weight: 500;
        font-size: 12px !important;
    }
}

@media (min-width: 321px) and (max-width: 413.95px) {
    #hero-3 .caption-txt p {
        font-size: 16px !important;
        padding: 0;
        margin-bottom: 25px;
    }
}
@media (min-width: 321px) and (max-width: 413.95px) {
    .sbox-10-txt {
        padding: 10px !important;
    }
}
@media (max-width: 767px) {
    .wide-60 {
        padding-top: 20px;
        padding-bottom: 40px;
    }
}
@media (min-width: 321px) and (max-width: 413.95px) {
    h3.h3-xl {
        font-size: 24px;
    }
}
@media (max-width: 768px) {
    .feature-box {
        padding:10px;
        width: 90% !important;
        display: block;
        margin: 0 auto;
    }
    .Patronage .textInfo .title2 {
        color: #fff !important;
        font-size: 22px;
        padding-top: 30px;
    }
}
@media (max-width: 768px) {
    .feature-box2 {
        padding:0 !important;
        width: 95%;
        display: block;
        margin:0 auto !important;
    }
    .brand-one .container .item {
        width: 100%;
        height: auto;
        float: left;
        margin-right:0%;
    }
    .bottom-footer-list p:after{
        display:none;

    }
    .bottom-footer-list li{
        width:100%;
        padding-bottom:10px;
    }
    .blog-one{
        display:none;
    }
    .team-details__inner {
        border: 0px solid var(--pelocis-border-color, #DDDDDD) !important;
        padding: 20px;
        border-radius: 0px !important;
        margin-bottom: 0px !important;
    }
    .team-details__content {
        padding: 0px 0 0px;
        height:auto !important;
    }
}