/* ==================================================================
    TrainerNearBy — Home page 
    ================================================================== */

/* DEMO STYLING */
/* model photo */
.fade{
    background: #000000b0;
}
/* end model photo */

/* ------------------------------------------------------------------ */
/* Popular Professionals - modern trainer cards                       */
/* ------------------------------------------------------------------ */
.trainer-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.trainer-col {
    display: flex;
    margin-bottom: 30px;
}

.trainer-card-link {
    display: block;
    width: 100%;
    text-decoration: none;
    color: inherit;
}

.trainer-card-link:hover,
.trainer-card-link:focus {
    text-decoration: none;
    color: inherit;
}

.trainer-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 16px;
    padding: 32px 20px 26px;
    text-align: center;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.07);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.trainer-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.15);
}

.trainer-avatar-wrap {
    width: 130px;
    height: 130px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 20px;
    border: 4px solid #f4f4f4;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    background: #f8f8f8;
    transition: border-color 0.3s ease;
}

.trainer-card:hover .trainer-avatar-wrap {
    border-color: #038f7e;
}

.trainer-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.trainer-avatar-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(3, 143, 126, 0.12), rgba(112, 60, 168, 0.12));
    color: #038f7e;
    font-size: 46px;
}

.trainer-card-body {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-grow: 1;
}

.trainer-name {
    font-size: 18px;
    line-height: 1.3;
    font-weight: 700;
    color: #222;
    margin: 0 0 6px;
    text-transform: capitalize;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trainer-specialization {
    font-size: 12px;
    color: #038f7e;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    margin: 0 0 10px;
}

.trainer-distance {
    font-size: 13px;
    color: #888;
    margin: 0 0 20px;
}

.trainer-distance i {
    color: #FF5722;
    margin-right: 5px;
}

.trainer-city {
    font-size: 14px;
    line-height: 1.5;
    color: #706a6a;
    margin: 0 0 10px;
}

.trainer-stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 0 0 18px;
}

.trainer-stat-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 700;
    color: #555;
    background: #f5f6f8;
    border: 1px solid #ececec;
    border-radius: 20px;
    padding: 5px 10px;
    white-space: nowrap;
    line-height: 1.2;
}

.trainer-stat-badge i {
    font-size: 12px;
}

.trainer-stat-badge.stat-price {
    background: rgba(255, 87, 34, 0.1);
    color: #e64a19;
    border-color: rgba(255, 87, 34, 0.25);
}

.trainer-stat-badge.stat-price i {
    color: #FF5722;
}

.trainer-stat-badge.stat-like i {
    color: #e91e63;
}

.trainer-stat-badge.stat-recommend i {
    color: #038f7e;
}

.trainer-stat-badge.stat-views i {
    color: #2196f3;
}

@media (max-width: 480px) {
    .trainer-stats {
        gap: 6px;
    }

    .trainer-stat-badge {
        font-size: 10.5px;
        padding: 4px 8px;
    }
}

.trainer-view-btn {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #fff;
    background: #038f7e;
    padding: 9px 22px;
    border-radius: 30px;
    transition: background 0.3s ease, transform 0.3s ease;
}

.trainer-view-btn i {
    transition: transform 0.3s ease;
}

.trainer-card:hover .trainer-view-btn {
    background: #026d5f;
}

.trainer-card:hover .trainer-view-btn i {
    transform: translateX(4px);
}

/* --- Trainer Pro — premium card border & badge --- */
.trainer-card.pro-card {
    position: relative;
}
.trainer-card.pro-card:hover {
    box-shadow: 0 20px 44px rgba(3, 143, 126, 0.28);
}

.trainer-card .pro-badge, .pro-trainer .pro-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: linear-gradient(135deg, #6b40a7 0%, #ff5722 100%);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 3px 10px 3px 8px;
    border-radius: 20px;
    box-shadow: 0 3px 10px rgba(3, 143, 126, 0.3);
    white-space: nowrap;
    pointer-events: none;
}
.pro-badge i {
    font-size: 11px;
}
.pro-card .trainer-view-btn, .pro-trainer .c-profile-link {
    background: linear-gradient(135deg, #6b40a7 0%, #ff5722 100%);
}

@media (max-width: 767px) {
    .trainer-avatar-wrap {
        width: 110px;
        height: 110px;
    }

    .trainer-card {
        padding: 26px 16px 22px;
    }
}

@media (max-width: 480px) {
    .trainer-avatar-wrap {
        width: 96px;
        height: 96px;
    }

    .trainer-avatar-placeholder {
        font-size: 36px;
    }

    .trainer-card {
        padding: 22px 14px 20px;
    }

    .trainer-name {
        font-size: 16px;
    }
}

/* ------------------------------------------------------------------ */
/* Popular Professionals — compact 2-up grid on smartphones (< 576px)  */
/* ------------------------------------------------------------------ */
/* The row is a flex container, so the Bootstrap clearfix pseudo        */
/* elements are disabled (same approach as .sports-grid).              */
.trainer-row:before,
.trainer-row:after {
    display: none;
    content: none;
}

/* Two trainers per line: col-xs-6 already gives 50% width; the tightened
   gutters keep enough room inside each card for the avatar, the stats
   badges and the CTA button. */
@media (max-width: 575px) {
    .trainer-row {
        margin-left: -6px;
        margin-right: -6px;
    }

    .trainer-row > [class*="col-"] {
        padding-left: 6px;
        padding-right: 6px;
        margin-bottom: 12px;
    }

    .trainer-card {
        padding: 18px 10px 16px;
        border-radius: 14px;
    }

    .trainer-avatar-wrap {
        width: 84px;
        height: 84px;
        margin-bottom: 12px;
        border-width: 3px;
    }

    .trainer-avatar-placeholder {
        font-size: 30px;
    }

    .trainer-name {
        font-size: 14px;
        margin-bottom: 4px;
    }

    .trainer-specialization {
        font-size: 10px;
        letter-spacing: 0.4px;
        line-height: 1.35;
        margin-bottom: 6px;
        overflow-wrap: anywhere;
    }

    .trainer-city {
        font-size: 11.5px;
        line-height: 1.35;
        margin-bottom: 6px;
        overflow-wrap: anywhere;
    }

    .trainer-distance {
        font-size: 10.5px;
        margin-bottom: 8px;
    }

    .trainer-stats {
        gap: 4px;
        margin-bottom: 10px;
    }

    .trainer-stat-badge {
        gap: 3px;
        font-size: 9.5px;
        padding: 3px 6px;
    }

    .trainer-stat-badge i {
        font-size: 9.5px;
    }

    .trainer-view-btn {
        width: 100%;
        justify-content: center;
        gap: 5px;
        font-size: 10px;
        letter-spacing: 0.3px;
        padding: 8px 10px;
    }

    .trainer-card .pro-badge {
        top: 8px;
        right: 8px;
        font-size: 8.5px;
        padding: 2px 7px;
    }
}

/* ------------------------------------------------------------------ */
/* Home page — "Our popular categories" (carousel + "see all" CTA)     */
/* ------------------------------------------------------------------ */
.home-category-count {
    color: #FF5722;
    font-size: 12px;
}

.home-sports-all-btn {
    margin-top: 10px;
    padding: 11px 30px;
    letter-spacing: 0.6px;
}

@media (max-width: 767px) {
    .home-sports-all-btn {
        width: 100%;
        max-width: 320px;
    }
}

/* ------------------------------------------------------------------ */
/* Hero section - headline + compact glassmorphism tabbed card        */
/* ------------------------------------------------------------------ */
/* Fixed, generous hero height. sliderLayout:"auto" makes Revolution   */
/* Slider respect the CSS-driven height of its container.             */
#home.slide-section {
    min-height: 780px;
}

#home .rev_slider_wrapper,
#home .rev_slider_wrapper .rev_slider {
    min-height: 780px !important;
}

/* Dark gradient overlay - stronger on the left (behind text/card),   */
/* fading out to the right so the photo's focal point stays visible.  */
.hero-bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    pointer-events: none;
    background: linear-gradient(100deg,
        rgba(0, 0, 0, 0.78) 0%,
        rgba(0, 0, 0, 0.55) 35%,
        rgba(0, 0, 0, 0.28) 60%,
        rgba(0, 0, 0, 0.08) 85%);
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 50px 6% 60px 8%;
}

.hero-content-col {
    width: 100%;
    /*max-width: 600px;*/
    text-align: left;
}

.hero-headline {
    padding-top: 0px;
    margin-bottom: 34px;
}

.hero-title {
    display: block;
    font-size: 40px;
    line-height: 1.25;
    font-weight: 800;
    color: #fff;
    margin: 0 0 16px;
    padding: 0;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}

.hero-subtitle-wrap {
    display: inline-block;
    max-width: 100%;
    background: rgba(0, 0, 0, 0.55);
    border-radius: 30px;
    padding: 10px 26px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.hero-subtitle {
    margin: 0;
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    text-align: left;
}

.hero-card-wrapper {
    display: flex;
    justify-content: flex-start;
    width: 100%;
}

/* Card sized to roughly 35-40% of the hero section width on desktop */
.hero-card {
    width: 100%;
    max-width: 440px;
    text-align: left;
    background: rgba(8, 8, 12, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 18px;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    overflow: hidden;
}

.hero-tabs {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.hero-tabs > li {
    flex: 1;
    margin: 0;
}

.hero-tabs > li > a {
    display: block;
    text-align: center;
    padding: 15px 8px;
    color: rgba(255, 255, 255, 0.65);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.5px;
    background: transparent;
    border: none !important;
    border-radius: 0 !important;
    cursor: pointer;
    transition: color 0.25s ease, background 0.25s ease;
}

.hero-tabs > li > a:hover,
.hero-tabs > li > a:focus {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.hero-tabs > li.active > a,
.hero-tabs > li.active > a:hover,
.hero-tabs > li.active > a:focus {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    border-bottom: 3px solid #FF5722!important;
}

.hero-tab-content {
    padding: 0px 20px 24px;
}

.hero-form-row {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

.hero-form-row:last-child {
    margin-bottom: 0;
}

.hero-form-group {
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
}

.hero-form-group label {
    display: inline-block;
    color: rgba(255, 255, 255, 0.85);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.hero-form-group .form-control {
    height: 44px;
    border-radius: 8px !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: #fff !important;
    box-shadow: none !important;
    padding: 8px 12px;
}

.hero-form-group select.form-control option {
    color: #222;
}

.hero-form-group .form-control::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.hero-btn-block {
    width: 100%;
    display: block;
    background: #FF5722;
    border: none;
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 13px;
    padding: 13px 10px;
    border-radius: 8px;
    transition: background 0.25s ease, transform 0.25s ease;
}

.hero-btn-block:hover,
.hero-btn-block:focus {
    background: #e64a19;
    color: #fff;
    transform: translateY(-1px);
}

.hero-checkbox-row label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: #fff;
    font-size: 12.5px;
    font-weight: 500;
    margin: 0;
    cursor: pointer;
}

.hero-checkbox-row input[type="checkbox"] {
    margin-top: 3px;
    flex-shrink: 0;
}

.hero-error-message {
    color: #ff8a80;
    font-size: 12px;
    margin-top: 6px;
}

/* --- "Join the Network" tab: compact fields + scrollable fallback --- */
/* The registration form is far taller than the "Find a Trainer" form.
   These rules compress the join form fields and cap the tab content
   with a slim scrollbar so Province/City/terms/CTA stay reachable
   without growing the hero slider band. */

.heroJoinForm .hero-form-row {
    gap: 8px;
    margin-bottom: 8px;
}

.heroJoinForm .hero-form-row:last-child {
    margin-bottom: 0;
}

.heroJoinForm .hero-form-group label {
    font-size: 11px;
    margin-bottom: 2px;
}

.heroJoinForm .hero-form-group .form-control {
    height: 30px;
    padding: 2px 12px;
}

/* Coaching location checkboxes: single inline flex row. */
.hero-coaching-locations {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    align-items: center;
    padding-top: 2px;
}

.heroJoinForm .hero-coaching-locations label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
}

.hero-coaching-locations input[type="checkbox"] {
    margin: 0;
    flex-shrink: 0;
}

/* Scrollable tab content fallback: keeps the CTA reachable on short
   viewports without increasing the hero slider height. */
@media (min-width: 740px) {
    
    .hero-card .tab-content {
        max-height: 480px;
        overflow-y: auto;
        padding-right: 5px;
    }

}

.hero-card .tab-content::-webkit-scrollbar {
    width: 5px;
}

.hero-card .tab-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
}

.hero-card .tab-content::-webkit-scrollbar-track {
    background: transparent;
}
@media (max-width: 425px) {
    .heroJoinForm .hero-form-group .form-control {
        height: 38px !important;
    }
    .heroJoinForm .hero-form-row:last-child {
        margin-bottom: 8px !important;
    }
}

@media (max-width: 991px) {
    #home.slide-section {
        min-height: 900px;
    }

    #home .rev_slider_wrapper,
    #home .rev_slider_wrapper .rev_slider {
        min-height: 900px !important;
    }

    .hero-overlay {
        justify-content: center;
        padding: 40px 5% 40px;
    }

    .hero-content-col {
        max-width: 520px;
        text-align: center;
    }

    .hero-headline {
        text-align: center;
    }

    .hero-subtitle {
        text-align: center;
    }

    .hero-card-wrapper {
        justify-content: center;
    }

    .hero-card {
        max-width: 460px;
    }
}

@media (max-width: 767px) {
    #home.slide-section {
        min-height: 0;
    }

    /* --- Compact hero band on phones ---------------------------------
       At this breakpoint Revolution Slider builds a 778 x 960px canvas
       (gridwidth / gridheight from the slider config) and writes those
       heights inline on its own elements (wrapper, .rev_slider, ul, li,
       .slotholder, .tp-bgimg).  That inline height is what used to push
       the search card far below the fold.
       The rules below force a short, clipped band so the top of the
       slideshow *and* the first fields of the search form stay visible
       on load.  `!important` is required here: it has to beat the
       plugin's inline heights, not just come later in the cascade. */
    #home .rev_slider_wrapper,
    #home .rev_slider_wrapper .rev_slider,
    #home .rev_slider_wrapper .rev_slider > ul,
    #home .rev_slider_wrapper .rev_slider .tp-revslider-mainul,
    #home .rev_slider_wrapper .rev_slider li.tp-revslider-slidesli,
    #home .rev_slider_wrapper .rev_slider .slotholder,
    #home .rev_slider_wrapper .rev_slider .tp-bgimg {
        height: 230px !important;
        max-height: 230px !important;
        min-height: 0 !important;
    }

    /* Clips whatever is still laid out on the full-size canvas
       (this also removes the nav arrows that are vertically centred there). */
    #home .rev_slider_wrapper {
        overflow: hidden !important;
    }

    /* Keep the photo's focal point centred inside the cropped band
       instead of showing only the top of the image. */
    #home .rev_slider_wrapper .rev_slider .tp-bgimg {
        background-position: center center !important;
        background-size: cover !important;
    }

    .hero-bg-overlay {
        background: linear-gradient(180deg,
            rgba(0, 0, 0, 0.75) 0%,
            rgba(0, 0, 0, 0.6) 60%,
            rgba(0, 0, 0, 0.45) 100%);
    }

    .hero-overlay {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
        transform: none;
        padding: 22px 14px 26px;
    }

    .hero-content-col {
        max-width: 100%;
    }

    .hero-headline {
        margin-bottom: 18px;
    }

    .hero-title {
        font-size: 24px;
        padding: 4px 4px;
    }

    .hero-subtitle {
        font-size: 13px;
    }

    .hero-card {
        max-width: 100%;
    }

    .hero-tabs > li > a {
        font-size: 11px;
        padding: 13px 4px;
    }

    .hero-form-row {
        flex-direction: column;
        gap: 12px;
    }

    .hero-tab-content {
        padding: 18px 16px 20px;
    }

    .hero-btn-block {
        padding: 14px 10px;
        font-size: 14px;
    }
}

/* Extra-small phones: an even shorter slideshow band plus a tighter
   headline so the search form still starts above the fold.
   (This also overrides the generic 600px rule for .rev_slider_wrapper
   that ships in css/all.css below 420px.) */
@media (max-width: 479px) {
    #home .rev_slider_wrapper,
    #home .rev_slider_wrapper .rev_slider,
    #home .rev_slider_wrapper .rev_slider > ul,
    #home .rev_slider_wrapper .rev_slider .tp-revslider-mainul,
    #home .rev_slider_wrapper .rev_slider li.tp-revslider-slidesli,
    #home .rev_slider_wrapper .rev_slider .slotholder,
    #home .rev_slider_wrapper .rev_slider .tp-bgimg {
        height: 190px !important;
        max-height: 190px !important;
    }

    .hero-overlay {
        padding: 18px 12px 22px;
    }

    .hero-headline {
        margin-bottom: 16px;
    }
}

/* ------------------------------------------------------------------ */
/* How It Works section                                                */
/* ------------------------------------------------------------------ */
.how-it-works-section {
    padding: 80px 0;
    background: #f9fafb;
}

.hiw-columns-row {
    margin-top: 40px;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

.hiw-column {
    margin-bottom: 30px;
}

.hiw-column-inner {
    height: 100%;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(3, 143, 126, 0.12);
    border-radius: 20px;
    padding: 34px 28px 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hiw-column-inner:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.1);
}

.hiw-column-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 26px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(3, 143, 126, 0.15);
}

.hiw-column-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, #038f7e, #026d5f);
    color: #fff;
    font-size: 20px;
    box-shadow: 0 6px 14px rgba(3, 143, 126, 0.3);
}

.hiw-column-title {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #222;
}

.hiw-step-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 18px;
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 14px;
    padding: 20px 20px 20px 22px;
    margin-bottom: 18px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.hiw-step-card:last-child {
    margin-bottom: 0;
}

.hiw-step-card:hover {
    transform: translateX(4px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
    border-color: rgba(3, 143, 126, 0.25);
}

.hiw-step-number {
    position: absolute;
    top: -10px;
    left: -10px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #FF5722;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    box-shadow: 0 4px 10px rgba(255, 87, 34, 0.4);
}

.hiw-step-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(3, 143, 126, 0.1);
    color: #038f7e;
    font-size: 20px;
}

.hiw-step-body {
    flex: 1;
    min-width: 0;
}

.hiw-step-title {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 700;
    color: #222;
}

.hiw-step-text {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: #777;
}

.hiw-cta-wrap {
    margin-top: 26px;
    text-align: center;
}

.hiw-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: none;
    border-radius: 30px;
    padding: 14px 28px;
    cursor: pointer;
    transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
    text-decoration: none;
}

.hiw-cta-btn:hover,
.hiw-cta-btn:focus {
    transform: translateY(-2px);
    text-decoration: none;
}

.hiw-cta-btn-teal {
    background: linear-gradient(135deg, #038f7e, #026d5f);
    color: #fff;
    box-shadow: 0 8px 20px rgba(3, 143, 126, 0.3);
}

.hiw-cta-btn-teal:hover,
.hiw-cta-btn-teal:focus {
    background: linear-gradient(135deg, #026d5f, #015a4e);
    color: #fff;
    box-shadow: 0 12px 26px rgba(3, 143, 126, 0.4);
}

.hiw-cta-btn-orange {
    background: linear-gradient(135deg, #FF5722, #e64a19);
    color: #fff;
    box-shadow: 0 8px 20px rgba(255, 87, 34, 0.3);
}

.hiw-cta-btn-orange:hover,
.hiw-cta-btn-orange:focus {
    background: linear-gradient(135deg, #e64a19, #d43e10);
    color: #fff;
    box-shadow: 0 12px 26px rgba(255, 87, 34, 0.4);
}

@media (max-width: 991px) {
    .hiw-column-inner {
        padding: 28px 22px 24px;
    }
}

@media (max-width: 767px) {
    .how-it-works-section {
        padding: 50px 0;
    }

    .hiw-columns-row {
        margin-top: 26px;
    }

    .hiw-column {
        margin-bottom: 22px;
    }

    .hiw-column-inner {
        padding: 24px 18px 20px;
    }

    /* --- Step cards on mobile: icon | description | number ------------
       The number badge used to stay absolutely positioned at
       top:-10px / left:-10px while the card became a column, which left it
       hanging outside the rounded corner (and clipped on narrow screens).
       Inside the mobile breakpoints the badge is placed back in the flow,
       pushed to the far right of the row and vertically aligned with the
       step title, so 1-2-3 line up cleanly next to every description. */
    .hiw-step-card {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: flex-start;
        gap: 12px;
        padding: 16px 14px;
    }

    .hiw-step-number {
        position: static;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        order: 3;
        flex: 0 0 auto;
        align-self: flex-start;
        margin: 0 0 0 auto;
        width: 26px;
        height: 26px;
        font-size: 12px;
    }

    .hiw-step-icon {
        order: 1;
        flex: 0 0 auto;
        width: 42px;
        height: 42px;
        font-size: 18px;
    }

    .hiw-step-body {
        order: 2;
        flex: 1 1 auto;
        min-width: 0;
    }

    .hiw-step-title {
        font-size: 15px;
    }

    .hiw-step-text {
        font-size: 13px;
        line-height: 1.5;
    }

    .hiw-cta-wrap {
        margin-top: 20px;
    }

    .hiw-cta-btn {
        font-size: 13px;
        padding: 13px 22px;
    }
}

/* Very small phones: the icon and the number become a header row
   (number pinned to the right) and the description keeps the full card
   width, which stays far more readable than three squeezed columns. */
@media (max-width: 479px) {
    .hiw-step-card {
        flex-wrap: wrap;
        row-gap: 10px;
        padding: 14px 12px;
    }

    .hiw-step-number {
        margin-left: auto;
    }

    .hiw-step-body {
        order: 3;
        flex: 1 1 100%;
        margin-top: 2px;
    }

    .hiw-step-icon {
        width: 38px;
        height: 38px;
        font-size: 16px;
    }
}

/* ==================================================================
    Footer — mobile horizontal-overflow guard
    ================================================================== */

/* footer.blade.php wraps its widget content in `.col-12`, which is a
   Bootstrap 4 class: under Bootstrap 3 it gets no 15px gutter, so the
   Bootstrap 3 `.row` nested inside it (margin: 0 -15px) sticks 15px past
   the viewport on phones (390px viewport -> 405px document) and lets the
   whole page be swiped sideways. Removing the negative margins keeps the
   nested row inside its column. Mobile only: the desktop gutters stay
   exactly as they are today. */
@media (max-width: 767px) {

    .col-12 > .row,
    .col-12 .row {
        margin-left: 0;
        margin-right: 0;
    }
}

/* ==================================================================
    TrainerNearBy — Specialists listing page (refactored UI)
    ================================================================== */


/* Pagination (kept in theme accent color) */
.pagination>li>a { color: var(--tnb-teal) !important; }

.pagination>.active>a,
.pagination>.active>a:focus,
.pagination>.active>a:hover,
.pagination>.active>span,
.pagination>.active>span:focus,
.pagination>.active>span:hover {
    background-color: var(--tnb-teal) !important;
    border: 1px solid var(--tnb-teal) !important;
}

.pagination>.disabled>a,
.pagination>.disabled>a:focus,
.pagination>.disabled>a:hover,
.pagination>.disabled>span,
.pagination>.disabled>span:focus,
.pagination>.disabled>span:hover {
    color: var(--tnb-teal) !important;
}

/* --- 1. Results grid: 2 cards per row on smartphones, 3 on desktop ---
    The Blade markup carries the Bootstrap grid classes
    (col-xs-6 / col-sm-6 / col-md-4); the rules below only keep the
    gutters tight, make every card the same height and disable the
    Bootstrap row clearfix (useless - and harmful - inside a flex row).
    `.users` stays a flex container so the Isotope gender filter works. */
.users {
    display: flex;
    flex-wrap: wrap;
    margin-left: -8px;
    margin-right: -8px;
}

/* Bootstrap's row clearfix would be treated as flex items and break the grid */
.users::before,
.users::after { display: none !important; }

.users > .item {
    flex: 0 0 50%; /* 2 cards per row on smartphones */
    max-width: 50%;
    padding-left: 8px;
    padding-right: 8px;
    margin-bottom: 16px;
    display: flex; /* lets the card stretch to the height of the row */
}

/* Equal-height cards: the footer stays pinned to the bottom of every card */
.users > .item > .post { display: flex; flex-direction: column; width: 100%; }
.users > .item > .post > .c-body { display: flex; flex-direction: column; flex: 1 1 auto; }
.users > .item .c-bottom-nav { margin-top: auto; }

@media (min-width: 768px) {
    .users { margin-left: -12px; margin-right: -12px; }
    .users > .item { padding-left: 12px; padding-right: 12px; margin-bottom: 24px; }
}

@media (min-width: 992px) {
    .users > .item { flex: 0 0 33.3333%; max-width: 33.3333%; } /* 3 cards per row */
}

/* --- 1b. Compact card sizing for the 2-column smartphone grid ---
    Every element of the card (image, badges, title, price, actions)
    is scaled down so two cards fit side by side without overflow. */
@media (max-width: 767px) {
    .users .c-media img.c-img,
    .users .c-avatar-ph { height: 150px; }
    .users .c-avatar-ph { font-size: 44px; }
    .users .c-category-badge { top: 8px; left: 8px; padding: 3px 8px; font-size: 9.5px; letter-spacing: 0.3px; }
    .users .c-meta-overlay { gap: 4px; padding: 3px; flex-wrap: wrap; }
    .users .c-meta-overlay .c-count-btn,
    .users .c-meta-overlay .c-exp { gap: 3px; padding: 8px 8px; font-size: 10px; }
    .users .c-body { padding: 10px 10px 12px; }
    .users .c-head-row { flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
    .users .c-name { font-size: 13.5px; line-height: 1.3; }
    .users .c-stat { padding: 3px 8px; font-size: 10px; }
    .users .c-price-line { margin-bottom: 10px; }
    .users .c-price-badge { padding: 4px 10px; font-size: 11px; }
    .users .c-contact-row { gap: 6px; }
    .users .c-reveal-btn,
    .users .c-revealed-num { gap: 4px; padding: 8px 6px; font-size: 11.5px; border-radius: 10px; }
    .users .c-reveal-btn i { font-size: 14px; }
    .users .c-bottom-nav { margin-top: 10px; padding-top: 10px; }
    .users .c-profile-link { gap: 5px; padding: 9px 6px; font-size: 11.5px; border-radius: 10px; letter-spacing: 0.2px; }
    .users .pro-badge { top: 6px; right: 6px; padding: 2px 8px 2px 6px; font-size: 9px; }
}

/* --- 1c. Pagination: responsive, pill-styled, always centred ---
    Scoped to `.trainers-pagination` so the theme/events pagination
    colours (loaded later with !important) cannot override it. */
.trainers-pagination { margin-top: 6px; }
.pagination-summary { margin: 0 0 12px; font-size: 12.5px; color: #5a6a80; }

.trainers-pagination .pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
}
.trainers-pagination .pagination > li { display: inline-block; }

.trainers-pagination .pagination > li > a,
.trainers-pagination .pagination > li > span {
    display: block;
    margin: 0;
    padding: 8px 13px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--tnb-teal) !important;
    background: #fff !important;
    border: 1px solid #e3e8f0 !important;
    border-radius: 10px !important;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.trainers-pagination .pagination > li > a:hover,
.trainers-pagination .pagination > li > a:focus,
.trainers-pagination .pagination > li > span:hover,
.trainers-pagination .pagination > li > span:focus {
    color: #026d5f !important;
    background: #e6f6f2 !important;
    border-color: var(--tnb-teal) !important;
}

.trainers-pagination .pagination > .active > a,
.trainers-pagination .pagination > .active > a:hover,
.trainers-pagination .pagination > .active > a:focus,
.trainers-pagination .pagination > .active > span,
.trainers-pagination .pagination > .active > span:hover,
.trainers-pagination .pagination > .active > span:focus {
    color: #fff !important;
    background-color: var(--tnb-teal) !important;
    border-color: var(--tnb-teal) !important;
    box-shadow: 0 6px 16px rgba(3, 143, 126, 0.28);
}

.trainers-pagination .pagination > .disabled > a,
.trainers-pagination .pagination > .disabled > a:hover,
.trainers-pagination .pagination > .disabled > a:focus,
.trainers-pagination .pagination > .disabled > span,
.trainers-pagination .pagination > .disabled > span:hover,
.trainers-pagination .pagination > .disabled > span:focus {
    color: #b9c4d2 !important;
    background: #fff !important;
    border-color: #eef1f6 !important;
    box-shadow: none;
    cursor: not-allowed;
}

@media (max-width: 767px) {
    .pagination-summary { font-size: 11.5px; }
    .trainers-pagination .pagination { gap: 4px; }
    .trainers-pagination .pagination > li > a,
    .trainers-pagination .pagination > li > span { padding: 7px 10px; font-size: 12px; border-radius: 8px !important; }
}

/* --- Scrollable category list (fixed height + clean scrollbar) --- */
.cat-scroll {
    max-height: 18rem; /* ~h-72 */
    overflow-y: auto;
    padding-right: 6px;
    scrollbar-width: thin;
    scrollbar-color: #c3cdd9 #f1f4f9;
}
.cat-scroll::-webkit-scrollbar { width: 6px; }
.cat-scroll::-webkit-scrollbar-track { background: #f1f4f9; border-radius: 3px; }
.cat-scroll::-webkit-scrollbar-thumb { background: #c3cdd9; border-radius: 3px; }
.cat-scroll::-webkit-scrollbar-thumb:hover { background: var(--tnb-teal); }

/* Pagination animation helper (optional, lightweight) */
.listing-head { display: flex; flex-direction: column; gap: 12px; margin-bottom: 6px; }
@media (min-width: 992px) {
    .listing-head { flex-direction: row; align-items: center; justify-content: space-between; }
}
.results-count { font-size: 13px; color: #5a6a80; margin: 0; }
.results-count strong { color: var(--tnb-teal); }

/* --- 2. Filter sidebar --- */
.tnb-filter-sidebar {
    background: #fff;
    border: 1px solid #edf0f5;
    border-radius: 16px;
    box-shadow: 0 6px 22px rgba(20, 40, 70, 0.06);
    padding: 22px 20px;
}
.filters-sidebar .widget { margin-bottom: 24px; }
.filters-sidebar .widget:last-child { margin-bottom: 0; }

.filters-sidebar .widget-title {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: #26344a;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--tnb-teal);
    line-height: 1.4;
}

/* Category accordion */
.cat-panel {
    border: 1px solid #eef1f6;
    border-radius: 12px;
    margin-bottom: 8px;
    overflow: hidden;
    background: #fbfcfe;
    transition: border-color 0.2s ease;
}
.cat-panel.open { border-color: rgba(3, 143, 126, 0.35); }
.cat-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: #fff;
    border: none;
    padding: 11px 14px;
    font-size: 13.5px;
    font-weight: 600;
    color: #2c3b52;
    cursor: pointer;
    text-align: left;
}
.cat-panel-head .cat-caret { font-size: 12px; color: #8a97ab; transition: transform 0.25s ease; }
.cat-panel.open .cat-panel-head .cat-caret { transform: rotate(90deg); color: var(--tnb-teal); }
.cat-panel-body { display: none; padding: 6px 10px 10px; }
.cat-panel.open .cat-panel-body { display: block; }

.cat-panel-body .cat-chip { position: relative; display: block; margin: 4px 0; }
.cat-panel-body .cat-chip input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.cat-panel-body .cat-chip span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    color: #3d4c63;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}
.cat-panel-body .cat-chip span .cat-check { display: none; font-size: 11px; color: #fff; }
.cat-panel-body .cat-chip:hover span { background: #f0faf7; color: var(--tnb-teal); }
.cat-panel-body .cat-chip input[type="radio"]:checked + span { background: var(--tnb-teal); color: #fff; font-weight: 600; }
.cat-panel-body .cat-chip input[type="radio"]:checked + span .cat-check { display: inline-block; }

/* Gender segmented control */
.sexe-group { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; background: #f1f4f9; border-radius: 12px; padding: 4px; }
.sexe-pill { position: relative; text-align: center; }
.sexe-pill input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.sexe-pill label {
    display: block; padding: 8px 4px; border-radius: 9px;
    font-size: 12px; font-weight: 600; color: #5a6a80; cursor: pointer; margin: 0;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.sexe-pill label i { display: block; font-size: 14px; margin-bottom: 2px; }
.sexe-pill.active label { background: #fff; color: var(--tnb-teal); box-shadow: 0 2px 8px rgba(20,40,70,0.12); }
.sexe-pill.active label i { color: var(--tnb-teal); }

/* Distance slider */
.distance-box { background: #f7f9fc; border: 1px solid #eef1f6; border-radius: 12px; padding: 12px 14px; }
.distance-slider-container { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.distance-region { display: flex; align-items: center; gap: 6px; color: #5a6a80; font-size: 12.5px; white-space: nowrap; }
.distance-region i { color: #FF5722; }
.distance-value-badge { font-size: 13px; font-weight: 700; color: var(--tnb-teal); background: #e6f6f2; border-radius: 20px; padding: 3px 12px; white-space: nowrap; }
input#distance-slider { width: 100%; margin: 12px 0 6px; }
.distance-scale { display: flex; justify-content: space-between; font-size: 11px; color: #9aa8bb; margin-bottom: -12px;}

/* Mobile "Filters" toggle */
.filters-toggle-wrap { width: 100%; margin-bottom: 12px; }
.filters-toggle-btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--tnb-teal); color: #fff; border: none; border-radius: 30px;
    padding: 9px 20px; font-weight: 700; font-size: 13px; cursor: pointer;
    box-shadow: 0 4px 14px rgba(3,143,126,0.3);
    transition: background 0.2s ease, transform 0.2s ease;
}
.filters-toggle-btn:hover { background: #026d5f; transform: translateY(-2px); }
@media (min-width: 992px) { .filters-toggle-wrap { display: none !important; } .filters-sidebar.collapse { display: block !important; } }

/* --- 3. Trainer / specialist cards --- */
.c-item .post {
    background: #fff;
    border: 1px solid #edf0f5;
    box-shadow: 0 6px 20px rgba(20,40,70,0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    border-radius: 14px;
    overflow: hidden;
}
.c-item .post:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(20,40,70,0.14); }

.c-media { position: relative; overflow: hidden; }
.c-media img.c-img { width: 100%; height: 210px; object-fit: cover; display: block; }
.c-avatar-ph {
    width: 100%; height: 210px; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--tnb-teal), #703ca8); color: rgba(255,255,255,0.95); font-size: 64px;
}
.c-category-badge {
    color: #038f7e; font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.6px; max-width: 100%; white-space: nowrap; text-overflow: ellipsis; text-align: center;
}
.c-meta-overlay {
    position: absolute; left: 0; right: 0; bottom: 0;
    display: flex; gap: 6px; padding: 10px 12px;
    background: linear-gradient(0deg, rgba(0,0,0,0.55), transparent); justify-content: flex-end;
}
.c-meta-overlay form { margin: 0; }
.c-meta-overlay .c-count-btn, .c-meta-overlay .c-exp {
    background: rgba(255,255,255,0.92); border: none; border-radius: 16px; padding: 4px 10px;
    font-size: 12px; font-weight: 700; color: #2c3b52; display: inline-flex; align-items: center; gap: 5px; line-height: 1.4;
}
.c-meta-overlay .c-count-btn i { color: var(--tnb-teal); font-size: 11px; }
.c-meta-overlay .c-exp i { color: #FF5722; }

.c-body { padding: 16px 18px 20px; }
.c-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.c-name { font-size: 16px; font-weight: 700; margin: 0; color: #1f2a3b; line-height: 1.35; }
.c-name a { color: inherit; }
.c-name a:hover { color: var(--tnb-teal); text-decoration: none; }
.c-views {
    display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; font-size: 10px; font-weight: 600;
    color: #5a6a80; background: #f1f4f9; border-radius: 16px; padding: 6px; white-space: nowrap;
}
.c-views i { color: var(--tnb-teal); }
.c-price-line { margin-bottom: 14px; text-align: center; }
.c-price-badge {
    display: inline-block; align-items: center; gap: 6px;color: #4b5a70;
    font-size: 13px; font-weight: 700; 
    text-align: center; white-space: nowrap;
}
.c-stats-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; padding-top: 12px; border-top: 1px dashed #e6ebf2; }
.c-stat { display: inline-flex; align-items: center; gap: 5px; background: #f5f7fb; border-radius: 16px; font-size: 11.5px; font-weight: 600; color: #4b5a70; padding: 4px 11px; line-height: 1.5; }
.c-stat i { font-size: 11px; color: #8a97ab; }
.c-stat.c-stat-likes i { color: #e91e63; }
.c-stat.c-stat-reco i { color: var(--tnb-teal); }
.c-stat.c-stat-dist i { color: #FF5722; }

.c-contact-row { display: flex; gap: 8px; }
.c-contact-row form { margin: 0; flex: 1; }
.c-reveal-btn {
    width: 100%; border: 1px solid #e3e8f0; background: #fff; color: #2c3b52; border-radius: 12px;
    padding: 10px; font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 7px; cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.c-reveal-btn i { font-size: 15px; }
.c-reveal-btn.c-btn-phone:hover { border-color: var(--tnb-teal); background: #e6f6f2; color: var(--tnb-teal); }
.c-reveal-btn.c-btn-whatsapp:hover { border-color: #25d366; background: #e9fbf0; color: #128c4a; }
.c-revealed-num {
    flex: 1; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    background: #f5f7fb; border: 1px dashed #cfd8e3; border-radius: 12px; padding: 10px;
    font-size: 12.5px; font-weight: 700; color: #2c3b52; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.c-revealed-num i { color: var(--tnb-teal); }

.c-bottom-nav { margin-top: 16px; padding-top: 14px;  }
.c-profile-link {
    display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--tnb-teal); color: #fff;
    border-radius: 12px; padding: 11px; font-size: 13px; font-weight: 700; letter-spacing: 0.4px;
    transition: background 0.2s ease, transform 0.2s ease;
}
.c-profile-link:hover { background: #026d5f; color: #fff; transform: translateY(-2px); text-decoration: none; }

/* --- 4. Trainer Pro — premium styling & badge --- */
.c-item.pro-trainer .post {
    position: relative;
    
}
.c-item.pro-trainer .post:hover {
    box-shadow: 0 18px 44px rgba(3, 143, 126, 0.25);
}
.pro-trainer{
    position: relative;
}

.pro-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: linear-gradient(135deg, var(--tnb-teal) 0%, #026d5f 100%);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 3px 10px 3px 8px;
    border-radius: 20px;
    box-shadow: 0 3px 10px rgba(3, 143, 126, 0.3);
    white-space: nowrap;
    pointer-events: none;
}
.pro-badge i {
    font-size: 11px;
}


/* ==================================================================
    TrainerNearBy — Event page 
    ================================================================== */

.pagination>li>a {
    color: #FF5722 !important;
}

.pagination>.active>a,
.pagination>.active>a:focus,
.pagination>.active>a:hover,
.pagination>.active>span,
.pagination>.active>span:focus,
.pagination>.active>span:hover {
    background-color: #FF5722 !important;
    border: 1px solid #FF5722 !important;
}

.pagination>.disabled>a,
.pagination>.disabled>a:focus,
.pagination>.disabled>a:hover,
.pagination>.disabled>span,
.pagination>.disabled>span:focus,
.pagination>.disabled>span:hover {
    color: #FF5722 !important;
}

/* ===== Events list: structured grid + modern cards ===== */
.event-col {
    margin-bottom: 30px;
    display: -webkit-flex;
    display: flex;
}

.event-card {
    position: relative;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    width: 100%;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 16px rgba(15, 23, 42, 0.06);
    overflow: hidden;
    -webkit-transition: box-shadow 0.25s ease, -webkit-transform 0.25s ease;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.event-card:hover {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
    box-shadow: 0 6px 12px rgba(15, 23, 42, 0.06), 0 16px 32px rgba(15, 23, 42, 0.12);
}

/* Contained, fixed-ratio thumbnail: no more floating/broken preview artifacts */
.event-thumb {
    position: relative;
    display: block;
    width: 100%;
    padding-top: 52.5%;
    overflow: hidden;
    background: -webkit-linear-gradient(315deg, #fff3ee, #ffe4da 60%, #ffd6c7);
    background: linear-gradient(135deg, #fff3ee, #ffe4da 60%, #ffd6c7);
}

.event-thumb img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    -o-object-fit: cover;
    object-fit: cover;
    border: 0;
}

.event-thumb-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    color: rgba(255, 87, 34, 0.7);
    font-size: 38px;
}

.event-thumb-missing .event-thumb-placeholder {
    display: -webkit-flex;
    display: flex;
}

.event-body {
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    padding: 24px;
}

.event-title {
    margin: 0 0 6px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.35;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #1f2937;
}

.event-title a {
    color: inherit;
    -webkit-transition: color 0.2s ease;
    transition: color 0.2s ease;
}

.event-title a:hover,
.event-title a:focus {
    color: #FF5722;
    text-decoration: none;
}

.event-coach {
    font-size: 13px;
    color: #6c757d;
    margin-bottom: 12px;
}

.event-coach a {
    color: #FF5722;
    font-weight: 600;
}

.event-excerpt {
    font-size: 14px;
    line-height: 1.65;
    color: #4b5563;
    margin-bottom: 18px;
}

.event-meta {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

.event-meta-item {
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-align-items: center;
    align-items: center;
    margin: 4px 6px 4px 0;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.event-meta-item i {
    margin-right: 6px;
    font-size: 12px;
}

.event-meta-date {
    background: #fff3ee;
    color: #c7491b;
}

.event-meta-duration {
    background: #eaf4ff;
    color: #1d6fd8;
}

.event-meta-participants {
    background: #ecf7ec;
    color: #3d8b3d;
}

.event-footer {
    margin-top: auto;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    border-top: 1px solid #f0f0f0;
    padding-top: 16px;
    margin-bottom: 20px;
}

.btn-event-action {
    display: inline-block;
    margin-top: 16px;
    padding: 9px 20px;
    border-radius: 999px;
    border: 1px solid #FF5722;
    background: #FF5722;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    -webkit-transition: background-color 0.2s ease, border-color 0.2s ease;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.btn-event-action:hover,
.btn-event-action:focus {
    background: #e64a19;
    border-color: #e64a19;
    color: #ffffff;
    text-decoration: none;
}

.btn-read-more {
    margin-top: 16px;
    color: #FF5722;
    font-weight: 700;
    font-size: 13px;
    -webkit-transition: color 0.2s ease;
    transition: color 0.2s ease;
}

.btn-read-more:hover,
.btn-read-more:focus {
    color: #e64a19;
    text-decoration: none;
}

.btn-read-more i {
    margin-left: 6px;
    font-size: 11px;
}

.events-empty {
    background: #ffffff;
    border: 1px dashed #dddddd;
    border-radius: 16px;
    padding: 60px 20px;
    text-align: center;
    color: #6c757d;
}

.events-empty i {
    display: block;
    font-size: 42px;
    color: #FF5722;
    opacity: 0.7;
    margin-bottom: 14px;
}

@media (max-width: 767px) {
    .event-body {
        padding: 18px;
    }

    .event-thumb {
        padding-top: 56%;
    }
}


/* ==================================================================
    TrainerNearBy — About page 
    ================================================================== */


.about-section {
    padding: 80px 0;
}
.about-section .section-title {
    margin-bottom: 50px;
}
.about-section .section-title h2 {
    font-size: 36px;
    font-weight: 700;
    color: #1a1a2e;
    letter-spacing: -0.5px;
}
.about-section .section-title .title-separator, .mission-section .section-title .title-separator {
    width: 60px;
    height: 4px;
    background: #038f7e;
    margin: 15px auto 0;
    border-radius: 2px;
}
.about-content p {
    font-size: 16px;
    line-height: 1.8;
    color: #555;
    margin-bottom: 20px;
}
.about-image {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
}
.about-image img {
    width: 100%;
    height: auto;
    transition: transform 0.4s ease;
}
.about-image:hover img {
    transform: scale(1.03);
}
.stats-section {
    padding: 80px 0;
    background: linear-gradient(135deg, #6c40a6 0%, #038f7e 100%);
    position: relative;
    overflow: hidden;
}
.stats-section::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 30% 50%, rgba(249,168,38,0.06) 0%, transparent 60%);
    pointer-events: none;
}
.stat-item {
    text-align: center;
    padding: 30px 20px;
    position: relative;
    z-index: 1;
}
.stat-item .stat-icon {
    width: 70px;
    height: 70px;
    line-height: 70px;
    border-radius: 50%;
    background: rgba(249,168,38,0.12);
    color: #fff;
    font-size: 28px;
    margin: 0 auto 20px;
    display: inline-block;
}
.stat-item h3 {
    font-size: 42px;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 8px;
    letter-spacing: -1px;
}
.stat-item h5 {
    font-size: 16px;
    font-weight: 400;
    color: rgba(255,255,255,0.7);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.stat-item .stat-divider {
    width: 30px;
    height: 2px;
    background: #038f7e;
    margin: 15px auto;
    border-radius: 1px;
}
.mission-section {
    padding: 80px 0;
    background: #f8f9fa;
}
.mission-card {
    background: #ffffff;
    padding: 40px 35px;
    border-radius: 12px;
    height: 100%;
    box-shadow: 0 5px 25px rgba(0,0,0,0.04);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-left: 4px solid #038f7e;
}
.mission-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.08);
}
.mission-card .card-icon {
    font-size: 32px;
    color: #038f7e;
    margin-bottom: 18px;
}
.mission-card h3 {
    font-size: 22px;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 15px;
}
.mission-card p {
    font-size: 15px;
    line-height: 1.7;
    color: #666;
    margin: 0;
}
.nationwide-banner {
    background: linear-gradient(129deg, #038f7e 0%, #6c40a6 100%);
    padding: 55px 0;
    text-align: center;
}
.nationwide-banner h2 {
    font-size: 34px;
    font-weight: 800;
    color: #fff;
    margin: 0 0 10px;
    letter-spacing: -0.5px;
}
.nationwide-banner p {
    font-size: 18px;
    color: #ffffff;
    margin: 0;
    font-weight: 400;
}
.nationwide-banner .banner-icon {
    font-size: 48px;
    color: #fff;
    margin-bottom: 15px;
    opacity: 0.9;
}
.sponsors-section {
    padding: 80px 0;
    background: #ffffff;
}
.sponsors-section .section-title h2 {
    font-size: 30px;
    font-weight: 700;
    color: #1a1a2e;
}
.sponsor-item {
    padding: 20px;
    text-align: center;
}
.sponsor-item img {
    max-height: 80px;
    width: auto;
    opacity: 0.7;
    transition: opacity 0.3s ease, transform 0.3s ease;
    filter: grayscale(30%);
}
.sponsor-item img:hover {
    opacity: 1;
    transform: scale(1.05);
    filter: grayscale(0%);
}
@media (max-width: 768px) {
    .about-section { padding: 50px 0; }
    .stats-section { padding: 50px 0; }
    .mission-section { padding: 50px 0; }
    .sponsors-section { padding: 50px 0; }
    .nationwide-banner { padding: 40px 0; }
    .stat-item h3 { font-size: 34px; }
    .nationwide-banner h2 { font-size: 26px; }
    .about-section .section-title h2 { font-size: 28px; }
    .about-image { margin-bottom: 30px; }
}


/* ==================================================================
    TrainerNearBy — FAQ page 
    ================================================================== */


.faq-section {
    margin-bottom: 2rem;
}
.faq-category-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #038f7e;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 3px solid #038f7e;
    display: inline-block;
}
.faq-card {
    border: 1px solid #e9ecef;
    border-radius: 8px;
    margin-bottom: 0.75rem;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.04);
    transition: box-shadow 0.2s ease;
}
.faq-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.faq-card-header {
    background: #f8f9fa;
    padding: 1rem 1.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 500;
    color: #2c3e50;
    transition: background 0.2s ease;
}
.faq-card-header:hover {
    background: #eef2f7;
}
.faq-card-header .icon {
    font-size: 1.25rem;
    color: #038f7e;
    transition: transform 0.3s ease;
    flex-shrink: 0;
    margin-left: 1rem;
}
.faq-card-header .icon.rotated {
    transform: rotate(180deg);
}
.faq-card-body {
    padding: 1.25rem;
    background: #ffffff;
    color: #555;
    line-height: 1.7;
    display: none;
}
.faq-card-body.open {
    display: block;
}
.faq-card-body p:last-child {
    margin-bottom: 0;
}
.faq-card-body ul {
    padding-left: 1.5rem;
    margin-bottom: 0.5rem;
}
.faq-card-body ul li {
    margin-bottom: 0.35rem;
}
.faq-hero {
    background: linear-gradient(135deg, #038f7e 0%, #703ca8 100%);
    color: #fff;
    padding: 2.5rem 0;
    margin-bottom: 2.5rem;
    border-radius: 0 0 12px 12px;
}
.faq-hero h1 {
    font-weight: 700;
    font-size: 2.2rem;
    margin-bottom: 0.5rem;
}
.faq-hero p {
    font-size: 1.1rem;
    opacity: 0.9;
    margin-bottom: 0;
}
.faq-jump-links {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}
.faq-jump-links a {
    padding: 0.5rem 1.25rem;
    border-radius: 50px;
    border: 2px solid #038f7e;
    color: #038f7e;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
}
.faq-jump-links a:hover {
    background: #038f7e;
    color: #fff;
}

/* ==================================================================
    TrainerNearBy — Log in page 
    ================================================================== */


.login-tabs-wrap { margin-bottom: 0; }
.login-tabs-wrap .nav-tabs { border-bottom: 2px solid #e0e0e0; display: flex; }
.login-tabs-wrap .nav-tabs > li { flex: 1; text-align: center; margin-bottom: 0; }
.login-tabs-wrap .nav-tabs > li > a { display: block; padding: 12px 10px; font-weight: 600; font-size: 14px; color: #888; background: #f5f5f5; border: none; border-radius: 0; margin-right: 0; text-transform: uppercase; letter-spacing: 0.5px; transition: all 0.25s ease; }
.login-tabs-wrap .nav-tabs > li.active > a, .login-tabs-wrap .nav-tabs > li.active > a:hover, .login-tabs-wrap .nav-tabs > li.active > a:focus { color: #fff; background: linear-gradient(135deg, #038f7e, #703ca8); border: none; }
.login-tabs-wrap .nav-tabs > li > a:hover { color: #038f7e; background: #eee; }
.login-tabs-wrap .tab-content { border: 1px solid #e0e0e0; border-top: none; background: #fff; }
.login-tab-pane { padding: 30px; }
.login-tabs-wrap .alert { margin-bottom: 15px; display: none; }
.login-tabs-wrap .alert-danger { background: #ffeaea; color: #b71c1c; border: 1px solid #f5c6cb; }
.login-tabs-wrap .alert-success { background: #eaffea; color: #1b5e20; border: 1px solid #c3e6cb; }

.login-tabs-wrap .fade{background: #fff;}

/* ==================================================================
    TrainerNearBy — Profile page 
    ================================================================== */

/* ===== Modern trainer profile ===== */
.tnb-profile .tnb-card {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 6px 24px rgba(35, 28, 58, .07);
    padding: 26px;
    margin-bottom: 26px;
    border: 1px solid #f0edf5;
}
.tnb-profile .tnb-card-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #f1eef4;
    padding-bottom: 14px;
    margin-bottom: 18px;
}
.tnb-profile .tnb-card-title h5 {
    margin: 0;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    font-size: 15px;
    color: #2d2340;
}
.tnb-profile .tnb-edit-link { color: #ff5722; font-size: 13px; cursor: pointer; font-weight: 600; }
.tnb-profile .tnb-edit-link:hover { color: #703ca8; }
.tnb-avatar-wrap { position: relative; width: 180px; height: 180px; margin: 6px auto 0; }
.tnb-avatar {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    object-fit: cover;
    border: 6px solid #fff;
    box-shadow: 0 10px 30px rgba(35, 28, 58, .18);
    background: #f4f2f8;
}
.tnb-avatar-wrap .c-avatar-ph {
    height: 180px;
    border-radius: 50%;
    border: 6px solid #fff;
    box-shadow: 0 10px 30px rgba(35, 28, 58, .18);
}
.tnb-avatar-edit {
    position: absolute;
    right: 2px;
    bottom: 6px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(337deg, #ff5722, #703ca8);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(255, 87, 34, .4);
    font-size: 16px;
}
.tnb-avatar-edit:hover { transform: scale(1.06); }
.tnb-name { font-size: 26px; font-weight: 800; color: #241c33; margin: 14px 0 2px; }
.tnb-speciality { color: #703ca8; font-weight: 600; letter-spacing: .3px; }
.tnb-badges { margin-top: 12px; }
.tnb-badge {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    margin: 3px;
    color: #fff;
    background: linear-gradient(337deg, #ff5722, #703ca8);
}
.tnb-badge.muted { background: #ece9f2; color: #6f6a7d; }
.tnb-detail {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 2px;
    border-bottom: 1px dashed #efeaf4;
    font-size: 14px;
}
.tnb-detail:last-child { border-bottom: none; }
.tnb-detail .lbl { color: #8a8494; font-weight: 600; white-space: nowrap; }
.tnb-detail .val { color: #2d2340; font-weight: 600; text-align: right; word-break: break-word; }
.tnb-metric { text-align: center; padding: 8px 4px; }
.tnb-metric .num {
    font-size: 28px;
    font-weight: 800;
    background: linear-gradient(337deg, #ff5722, #703ca8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.tnb-metric .lbl { color: #8a8494; font-size: 12px; font-weight: 600; }
/* ===== Gallery grid ===== */
.tnb-gallery-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.tnb-gallery-item {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    background: #f2eff6;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(35, 28, 58, .06);
    transition: box-shadow .25s ease, transform .25s ease;
}
.tnb-gallery-item:hover { box-shadow: 0 10px 24px rgba(35, 28, 58, .18); transform: translateY(-3px); }
.tnb-gallery-item a { display: block; width: 100%; height: 100%; }
.tnb-gallery-item img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .35s ease;
}
.tnb-gallery-item:hover img { transform: scale(1.06); }
/* subtle dark overlay revealed on hover */
.tnb-gallery-item .tnb-item-overlay {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: linear-gradient(to top, rgba(20, 14, 35, .38), rgba(20, 14, 35, 0) 45%);
    opacity: 0;
    transition: opacity .25s ease;
    pointer-events: none;
    z-index: 1;
}
.tnb-gallery-item:hover .tnb-item-overlay,
.tnb-gallery-item:focus-within .tnb-item-overlay { opacity: 1; }
/* delete action tucked into a hover overlay icon */
.tnb-gallery-item .tnb-item-del {
    position: absolute;
    top: 8px; right: 8px;
    z-index: 3;
    margin: 0;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .25s ease, transform .25s ease;
}
.tnb-gallery-item:hover .tnb-item-del,
.tnb-gallery-item:focus-within .tnb-item-del { opacity: 1; transform: translateY(0); }
.tnb-gallery-item .del {
    border: none;
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .95);
    color: #ff5722;
    border-radius: 50%;
    font-size: 13px;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(20, 14, 35, .25);
    transition: background .2s ease, color .2s ease, transform .2s ease;
}
.tnb-gallery-item .del:hover { background: #ff5722; color: #fff; transform: scale(1.08); }
@media (max-width: 991px) { .tnb-gallery-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .tnb-gallery-grid { grid-template-columns: repeat(2, 1fr); } }

/* ===== Video cards ===== */
.tnb-video-card {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid #f0edf5;
    margin-bottom: 18px;
    background: #fff;
    box-shadow: 0 3px 12px rgba(35, 28, 58, .06);
    transition: box-shadow .25s ease, transform .25s ease;
}
.tnb-video-card:hover { box-shadow: 0 10px 26px rgba(35, 28, 58, .14); transform: translateY(-3px); }
.tnb-video-frame {
    position: relative;
    background: #17121f;
    aspect-ratio: 16 / 9;
}
.tnb-video-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
    background: #17121f;
}
.tnb-video-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #a49db5;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    padding: 14px;
}
.tnb-video-del {
    position: absolute;
    top: 10px; right: 10px;
    z-index: 3;
    margin: 0;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .25s ease, transform .25s ease;
}
.tnb-video-card:hover .tnb-video-del,
.tnb-video-card:focus-within .tnb-video-del { opacity: 1; transform: translateY(0); }
.tnb-video-del button {
    border: none;
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .95);
    color: #ff5722;
    border-radius: 50%;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(20, 14, 35, .25);
    transition: background .2s ease, color .2s ease, transform .2s ease;
}
.tnb-video-del button:hover { background: #ff5722; color: #fff; transform: scale(1.08); }
.tnb-video-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid #f1eef4;
    background: #fbfafd;
}
.tnb-video-header .tnb-video-title {
    font-weight: 700;
    font-size: 14px;
    color: #2d2340;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tnb-video-header .tnb-video-title i { color: #ff5722; margin-right: 6px; }

/* ===== Qualifications list ===== */
.tnb-qual-list { display: flex; flex-direction: column; gap: 12px; }
.tnb-qual-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border: 1px solid #f0edf5;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(35, 28, 58, .05);
    transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.tnb-qual-item.is-previewable { cursor: pointer; }
.tnb-qual-item.is-previewable:hover,
.tnb-qual-item.is-previewable:focus {
    box-shadow: 0 8px 20px rgba(35, 28, 58, .14);
    transform: translateY(-2px);
    border-color: #e6dcf2;
    outline: none;
}
.tnb-qual-icon {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}
.tnb-qual-icon.pdf { background: #fdecea; color: #e53935; }
.tnb-qual-icon.doc { background: #e8f0fe; color: #3f6ad8; }
.tnb-qual-icon.thumb { padding: 3px; background: #f4f2f8; overflow: hidden; }
.tnb-qual-icon.thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 9px;
    display: block;
}
.tnb-qual-info { flex: 1 1 auto; min-width: 0; }
.tnb-qual-name {
    display: block;
    font-weight: 700;
    font-size: 14px;
    color: #2d2340;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
a.tnb-qual-name:hover { color: #ff5722; text-decoration: none; }
.tnb-qual-item.is-previewable .tnb-qual-name { color: #703ca8; }
.tnb-qual-item.is-previewable:hover .tnb-qual-name { color: #ff5722; }
.tnb-qual-hint {
    display: block;
    margin-top: 3px;
    font-size: 11.5px;
    font-weight: 600;
    color: #8a8494;
}
.tnb-qual-hint i { margin-right: 4px; color: #ff5722; }
.tnb-qual-del { flex: 0 0 auto; margin: 0; }
.tnb-qual-del .del {
    border: none;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f6f3fa;
    color: #ff5722;
    border-radius: 50%;
    font-size: 13px;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}
.tnb-qual-del .del:hover { background: #ff5722; color: #fff; transform: scale(1.08); }

/* ===== Client Leads ===== */
.tnb-leads-card {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 6px 24px rgba(35, 28, 58, .07);
    padding: 26px;
    margin-bottom: 26px;
    border: 1px solid #f0edf5;
}
.tnb-leads-card .tnb-leads-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #f1eef4;
    padding-bottom: 14px;
    margin-bottom: 18px;
}
.tnb-leads-card .tnb-leads-title h5 {
    margin: 0;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    font-size: 15px;
    color: #2d2340;
}
.tnb-leads-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(337deg, #ff5722, #703ca8);
}
.tnb-leads-table-wrap { overflow-x: auto; }
.tnb-leads-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.tnb-leads-table th {
    text-align: left;
    padding: 10px 12px;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: #8a8494;
    border-bottom: 2px solid #f1eef4;
}
.tnb-leads-table td {
    padding: 12px;
    border-bottom: 1px solid #f4f0f8;
    color: #2d2340;
    vertical-align: middle;
}
.tnb-leads-table tr:last-child td { border-bottom: none; }
.tnb-leads-table tr:hover td { background: #fbfafd; }
.tnb-leads-client-name {
    font-weight: 700;
    color: #2d2340;
}
.tnb-leads-client-contact {
    font-size: 13px;
    color: #6f6a7d;
}
.tnb-leads-time {
    font-size: 13px;
    color: #8a8494;
    white-space: nowrap;
}
.tnb-leads-empty {
    padding: 30px 0;
    text-align: center;
    color: #8a8494;
}
.tnb-leads-empty i {
    font-size: 36px;
    color: #d4cee0;
    margin-bottom: 10px;
}
.tnb-leads-empty p {
    margin: 0;
    font-size: 14px;
}
/* ===== Free teaser ===== */
.tnb-leads-teaser {
    text-align: center;
    padding: 28px 20px;
    background: linear-gradient(135deg, #fdf8f5, #f5f0fa);
    border-radius: 14px;
    border: 1px dashed #d4cee0;
}
.tnb-leads-teaser .teaser-icon {
    font-size: 42px;
    color: #b0a8c4;
    margin-bottom: 12px;
}
.tnb-leads-teaser h4 {
    font-weight: 800;
    font-size: 18px;
    color: #2d2340;
    margin: 0 0 6px;
}
.tnb-leads-teaser p {
    color: #6f6a7d;
    font-size: 14px;
    max-width: 420px;
    margin: 0 auto 16px;
}
.tnb-leads-teaser .btn-upgrade {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    border-radius: 30px;
    font-weight: 700;
    font-size: 14px;
    color: #fff;
    background: linear-gradient(337deg, #ff5722, #703ca8);
    border: none;
    box-shadow: 0 6px 20px rgba(255, 87, 34, .35);
    transition: transform .2s ease, box-shadow .2s ease;
    text-decoration: none;
}
.tnb-leads-teaser .btn-upgrade:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(255, 87, 34, .45);
    color: #fff;
    text-decoration: none;
}
/* ===== End Client Leads ===== */
.tnb-preview-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    visibility: hidden;
    opacity: 0;
    transition: opacity .25s ease, visibility .25s ease;
}
.tnb-preview-overlay.open { visibility: visible; opacity: 1; }
.tnb-preview-overlay .tnb-preview-backdrop {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(20, 14, 35, .78);
}
.tnb-preview-dialog {
    position: relative;
    width: 100%;
    max-width: 920px;
    max-height: calc(100vh - 48px);
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(12px) scale(.98);
    transition: transform .25s ease;
}
.tnb-preview-overlay.open .tnb-preview-dialog { transform: translateY(0) scale(1); }
.tnb-preview-close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 50%;
    background: #f1edf6;
    color: #2d2340;
    font-size: 16px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}
.tnb-preview-close:hover { background: #ff5722; color: #fff; transform: scale(1.06); }
.tnb-preview-title {
    padding: 16px 58px 14px 22px;
    border-bottom: 1px solid #f1eef4;
    font-weight: 700;
    font-size: 15px;
    color: #2d2340;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tnb-preview-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    background: #f4f2f8;
}
.tnb-preview-body img {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 190px);
    margin: 0 auto;
}
.tnb-preview-body iframe {
    display: block;
    width: 100%;
    height: calc(100vh - 190px);
    min-height: 420px;
    border: 0;
    background: #fff;
}
.tnb-preview-footer {
    padding: 12px 22px;
    border-top: 1px solid #f1eef4;
    display: flex;
    justify-content: flex-end;
}
.tnb-preview-open {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #703ca8;
}
.tnb-preview-open:hover { color: #ff5722; text-decoration: none; }
body.tnb-preview-lock { overflow: hidden; }
@media (max-width: 600px) {
    .tnb-qual-hint { display: none; }
}


/* ==================================================================
    TrainerNearBy — Registration page 
    ================================================================== */

.reg-tabs-wrap { margin-bottom: 0; }
.reg-tabs-wrap .nav-tabs { border-bottom: 2px solid #e0e0e0; display: flex; flex-direction: row; flex-wrap: nowrap; width: 100%; }
.reg-tabs-wrap .nav-tabs > li { flex: 1 1 0; min-width: 0; text-align: center; margin-bottom: 0; }
.reg-tabs-wrap .nav-tabs > li > a { display: block; width: 100%; min-width: 0; padding: 12px 10px; font-weight: 600; font-size: 13px; line-height: 1.3; color: #888; background: #f5f5f5; border: none; border-radius: 0; margin-right: 0; text-transform: uppercase; letter-spacing: 0.5px; white-space: normal; word-break: break-word; transition: all 0.25s ease; }
.reg-tabs-wrap .nav-tabs > li > a i,
.reg-tabs-wrap .nav-tabs > li > a .fa { display: inline-block; font-size: 14px; line-height: 1; margin: 0 6px 0 0; vertical-align: middle; }
.reg-tabs-wrap .nav-tabs > li.active > a, .reg-tabs-wrap .nav-tabs > li.active > a:hover, .reg-tabs-wrap .nav-tabs > li.active > a:focus { color: #fff; background: linear-gradient(135deg, #038f7e, #703ca8); border: none; }
.reg-tabs-wrap .nav-tabs > li > a:hover { color: #038f7e; background: #eee; }
.reg-tabs-wrap .tab-content { border: 1px solid #e0e0e0; border-top: none; background: #fff; }
.reg-tab-pane { padding: 30px; }
.reg-card { max-width: 100%; overflow: hidden; }
.reg-page-section, .reg-page-section .container, .reg-page-section .row, .reg-page-section .col-md-6 { max-width: 100%; }

/* Responsive registration tabs: keep labels + icons fitting on small phones */
@media (max-width: 479px) {
    .reg-card { padding: 20px 15px !important; }
    .reg-tabs-wrap .nav-tabs > li > a { padding: 12px 8px; font-size: 12px; letter-spacing: 0; }
    .reg-tabs-wrap .nav-tabs > li > a i,
    .reg-tabs-wrap .nav-tabs > li > a .fa { font-size: 12px; margin-right: 4px; }
    .reg-tab-pane { padding: 20px 15px; }
}

@media (max-width: 360px) {
    .reg-tabs-wrap .nav-tabs > li > a { padding: 10px 6px; font-size: 11px; }
    .reg-tabs-wrap .nav-tabs > li > a i,
    .reg-tabs-wrap .nav-tabs > li > a .fa { font-size: 11px; margin-right: 3px; }
}

.reg-tabs-wrap .alert { margin-bottom: 15px; display: none; }
.reg-tabs-wrap .alert-danger { background: #ffeaea; color: #b71c1c; border: 1px solid #f5c6cb; }
.reg-tabs-wrap .alert-success { background: #eaffea; color: #1b5e20; border: 1px solid #c3e6cb; }
.reg-tabs-wrap .fade{background: #fff;}


/* ==================================================================
    TrainerNearBy — Single Coach page 
    ================================================================== */


@media (max-width:500px) {
    .single-class-details{
        display: grid;
    }
}

.coach-avatar {
    width: 220px;
    height: 220px;
    border-radius: 50%;
    object-fit: cover;
    border: 6px solid #fff;
    box-shadow: 0 10px 30px rgba(35, 28, 58, .25);
    background: #f4f2f8;
    margin-top: 20px;
}

.coach-loc-badge {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    margin: 2px;
    color: #fff;
    background: var(--tnb-teal);
}
.coach-loc-badge.muted {
    background: #ece9f2;
    color: #6f6a7d;
}

/* DEMO STYLING */

/* ===== Video cards (read-only) ===== */
.tnb-video-card {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid #f0edf5;
    margin-bottom: 18px;
    background: #fff;
    box-shadow: 0 3px 12px rgba(35, 28, 58, .06);
    transition: box-shadow .25s ease, transform .25s ease;
}
.tnb-video-card:hover { box-shadow: 0 10px 26px rgba(35, 28, 58, .14); transform: translateY(-3px); }
.tnb-video-frame {
    position: relative;
    background: #17121f;
    aspect-ratio: 16 / 9;
}
.tnb-video-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
    background: #17121f;
}
.tnb-video-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #a49db5;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    padding: 14px;
}
.tnb-video-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid #f1eef4;
    background: #fbfafd;
}
.tnb-video-header .tnb-video-title {
    font-weight: 700;
    font-size: 14px;
    color: #2d2340;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 6px;
}
.tnb-video-header .tnb-video-title i { color: var(--tnb-teal); }
li.active > a {
    color: #fff !important;
}

/* ==================================================================
   TrainerNearBy — Single Coach page: ENGLISH responsive layout
   ------------------------------------------------------------------
   IMPORTANT: every rule below is scoped to `.tnb-coach-page`, a wrapper
   that is only printed when the locale is English (see
   resources/views/site/single_coach.blade.php), so the Arabic / RTL
   rendering is deliberately left untouched.

   Fixes covered:
     1. slimmer banner + compact identity hero with tappable CTAs
     2. clean key/value cards for personal & professional information
     3. responsive gallery grid (2 / 3 / 5 columns)
     4. stacked, touch-friendly reviews and bottom action buttons
   ================================================================== */

/* ---------- 1. Slimmer banner ---------- */
.tnb-coach-header .section-content { padding-top: 0; }

/* ---------- 1a. English image-free banner gradient ----------
   The listing (/specialists) and profile (/single_coach) inner headers are
   rendered as a lightweight brand gradient for the English locale so the
   above-the-fold paint does not wait on the 1.3 MB hero photograph
   (Background_2-min-min.jpg) or the specialists.jpg banner. The <section>
   markup drops `data-bg-img` / `parallax` for English, so custom.js never
   re-applies a background image to these banners either. */
.tnb-banner-gradient {
    background-image: linear-gradient(45deg, #038f7e, #703ca8) !important;
    background-size: cover;
}
@media (max-width: 767px) {
    .tnb-list-header .container { padding-top: 18px !important; padding-bottom: 16px !important; }
    .tnb-list-header .section-content { padding-top: 0 !important; }
    .tnb-list-header .title { margin: 0; font-size: 19px !important; letter-spacing: .5px; }
}

/* ---------- 1b. Identity hero ---------- */
.tnb-coach-page .tnb-coach-hero {
    display: flex;
    align-items: center;
    gap: 26px;
    margin-bottom: 26px;
    padding: 22px 26px;
    background: #fff;
    border: 1px solid #f0edf5;
    border-radius: 16px;
    box-shadow: 0 6px 24px rgba(35, 28, 58, .07);
}
.tnb-coach-page .tnb-coach-hero-media { flex: 0 0 auto; }
.tnb-coach-page .tnb-coach-hero .coach-avatar {
    width: 132px;
    height: 132px;
    margin-top: 0;
    border: 4px solid #fff;
}
.tnb-coach-page .tnb-hero-avatar--empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 42px;
    color: #c3cdd9;
}
.tnb-coach-page .tnb-coach-hero-body { flex: 1 1 auto; min-width: 0; }
.tnb-coach-page .tnb-hero-name {
    margin: 0 0 6px;
    font-size: 26px;
    line-height: 1.2;
    font-weight: 800;
    color: #241c33;
}
.tnb-coach-page .tnb-hero-sub {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 600;
    color: #6f6a7d;
}
.tnb-coach-page .tnb-hero-sub i { margin-right: 5px; color: var(--tnb-teal); }
.tnb-coach-page .tnb-hero-sep { margin: 0 6px; color: #c5bfd0; }
.tnb-coach-page .tnb-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}
.tnb-coach-page .tnb-hero-meta li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 30px;
    background: #f5f6f8;
    color: #4b4459;
    font-size: 12.5px;
    font-weight: 700;
}
.tnb-coach-page .tnb-hero-meta li i { color: #f5a623; }
.tnb-coach-page .tnb-hero-meta li small { font-weight: 600; color: #8a8494; }
.tnb-coach-page .tnb-hero-meta li.tnb-hero-price { background: rgba(255, 87, 34, .1); color: var(--tnb-orange-dark); }
.tnb-coach-page .tnb-hero-meta li.tnb-hero-price i { color: var(--tnb-orange); }

/* ---------- 1c. Action buttons (hero + sticky bar) ---------- */
.tnb-coach-page .tnb-coach-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.tnb-coach-page .tnb-coach-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 20px;
    border: 2px solid transparent;
    border-radius: 30px;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none !important;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.tnb-coach-page .tnb-coach-btn--phone { background: var(--tnb-teal); color: #fff; }
.tnb-coach-page .tnb-coach-btn--phone:hover,
.tnb-coach-page .tnb-coach-btn--phone:focus { background: var(--tnb-teal-dark); color: #fff; transform: translateY(-2px); }
.tnb-coach-page .tnb-coach-btn--whatsapp { background: #25D366; color: #fff; }
.tnb-coach-page .tnb-coach-btn--whatsapp:hover,
.tnb-coach-page .tnb-coach-btn--whatsapp:focus { background: #1eb457; color: #fff; transform: translateY(-2px); }
.tnb-coach-page .tnb-coach-btn--ghost { background: #fff; color: #703ca8; border-color: #ece9f2; }
.tnb-coach-page .tnb-coach-btn--ghost:hover,
.tnb-coach-page .tnb-coach-btn--ghost:focus { background: #f7f5fb; color: #703ca8; border-color: #dcd4ea; transform: translateY(-2px); }
.tnb-coach-page .tnb-coach-btn:disabled { opacity: .65; cursor: wait; transform: none; }

/* ---------- Share Profile dropdown ---------- */
.tnb-coach-page .tnb-coach-btn--share { background: #703ca8; color: #fff; }
.tnb-coach-page .tnb-coach-btn--share:hover,
.tnb-coach-page .tnb-coach-btn--share:focus { background: #5a2f8a; color: #fff; transform: translateY(-2px); }
.tnb-coach-page .tnb-coach-btn .tnb-share-caret { margin-left: 2px; font-size: 11px; opacity: .8; }
.tnb-coach-page .tnb-share-menu {
    min-width: 250px;
    padding: 8px;
    margin-top: 8px;
    background: #fff;
    border: 1px solid #f0edf5;
    border-radius: 14px;
    box-shadow: 0 14px 40px rgba(35, 28, 58, .18);
}
.tnb-coach-page .tnb-share-menu .tnb-share-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: #2d2340;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
    text-decoration: none !important;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.tnb-coach-page .tnb-share-menu .tnb-share-item:hover,
.tnb-coach-page .tnb-share-menu .tnb-share-item:focus { background: #f7f5fb; color: #703ca8; }
.tnb-coach-page .tnb-share-menu .tnb-share-item i { width: 20px; font-size: 16px; text-align: center; }
.tnb-coach-page .tnb-share-menu .tnb-share-item--whatsapp i { color: #25D366; }
.tnb-coach-page .tnb-share-menu .tnb-share-item--facebook i { color: #1877F2; }
.tnb-coach-page .tnb-share-menu .tnb-share-item--x i { color: #111; }
.tnb-coach-page .tnb-share-menu .tnb-share-item--linkedin i { color: #0A66C2; }
.tnb-coach-page .tnb-share-menu .tnb-share-item--email i { color: #EA4335; }
.tnb-coach-page .tnb-share-menu .tnb-share-item--copy i { color: var(--tnb-teal); }

/* The sticky bar only exists below 768px. */
.tnb-coach-page .tnb-coach-mobile-bar { display: none; }

/* ---------- 2a. "About" card ---------- */
.tnb-coach-page .tnb-about-card {
    margin-bottom: 26px;
    padding: 22px 26px;
    background: #fff;
    border: 1px solid #f0edf5;
    border-radius: 16px;
    box-shadow: 0 6px 24px rgba(35, 28, 58, .06);
}
/* The avatar now lives in the hero, so hide the duplicate one here. */
.tnb-coach-page .tnb-about-card > .coach-avatar { display: none; }
.tnb-coach-page .tnb-about-card > p.mt-50 {
    margin: 0 0 8px !important;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: #8a8494;
}
.tnb-coach-page .tnb-about-card > p.mt-20.mb-50 { margin: 0 !important; }
.tnb-coach-page .tnb-about-card > p.mb-50 {
    font-size: 14.5px;
    line-height: 1.75;
    color: #55505f;
    overflow-wrap: anywhere;
}

/* ---------- 2b. Personal / Professional information cards ---------- */
.tnb-coach-page .tnb-coach-side .widget {
    margin-bottom: 24px;
    padding: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid #f0edf5;
    border-radius: 16px;
    box-shadow: 0 6px 24px rgba(35, 28, 58, .06);
}
.tnb-coach-page .tnb-coach-side .widget-title {
    margin: 0 !important;
    padding: 13px 18px !important;
    font-size: 13px !important;
    font-weight: 700;
    letter-spacing: .6px;
    border-radius: 0;
}
.tnb-coach-page .tnb-coach-side .widget-title::before,
.tnb-coach-page .tnb-coach-side .widget-title::after { display: none !important; content: none !important; }
.tnb-coach-page .tnb-coach-side .opening-hours { padding: 6px 18px 16px; }
.tnb-coach-page .tnb-coach-side .opening-hours ul.list-border {
    margin: 0;
    padding: 0;
    list-style: none;
}
/* Key/value rows: labels and values wrap instead of overlapping. */
.tnb-coach-page .tnb-coach-side .opening-hours ul.list-border > li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin: 0 !important;
    padding: 10px 0 !important;
    border-bottom: 1px dashed #efeaf4;
    align-items: flex-start;
}
.tnb-coach-page .tnb-coach-side .opening-hours ul.list-border > li:last-child { border-bottom: none; }
.tnb-coach-page .tnb-coach-side .opening-hours ul.list-border > li > span {
    flex: 0 1 auto;
    max-width: 100%;
    float: none !important;
    color: #8a8494;
    font-size: 13px;
    font-weight: 600;
}
.tnb-coach-page .tnb-coach-side .opening-hours ul.list-border > li > div,
.tnb-coach-page .tnb-coach-side .opening-hours ul.list-border > li > .value,
.tnb-coach-page .tnb-coach-side .opening-hours ul.list-border > li > .pull-right {
    flex: 1 1 55%;
    min-width: 0;
    float: none !important;
    text-align: right;
    color: #2d2340;
    font-size: 13.5px;
    font-weight: 600;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.tnb-coach-page .tnb-coach-side .tnb-revealed { color: #2d2340; font-weight: 700; }
.tnb-coach-page .tnb-coach-side .coach-loc-badge { padding: 4px 10px; font-size: 11.5px; }

/* Social badges row (Instagram / LinkedIn) */
.tnb-coach-page .tnb-coach-side .opening-hours ul.list-border > li > div > .row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin: 0;
}
.tnb-coach-page .tnb-coach-side .opening-hours ul.list-border > li > div > .row > [class*="col-"] {
    width: auto;
    float: none;
    padding: 0;
}
.tnb-coach-page .tnb-coach-side .opening-hours ul.list-border > li > div > .row img { height: 30px; width: auto; }

/* Reveal-contact trigger: turned into a tappable pill */
.tnb-coach-page .tnb-coach-side .tnb-reveal-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    float: none !important;
    min-height: 38px;
    padding: 8px 14px !important;
    border: 1px solid rgba(3, 143, 126, .25) !important;
    border-radius: 30px !important;
    background: rgba(3, 143, 126, .08) !important;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    white-space: normal;
    transition: background .2s ease, color .2s ease;
}
.tnb-coach-page .tnb-coach-side .tnb-reveal-btn:hover,
.tnb-coach-page .tnb-coach-side .tnb-reveal-btn:focus { background: rgba(3, 143, 126, .16) !important; }
.tnb-coach-page .tnb-coach-side .tnb-reveal-btn[data-type="whatsapp"] {
    border-color: rgba(37, 211, 102, .35) !important;
    background: rgba(37, 211, 102, .12) !important;
}
.tnb-coach-page .tnb-coach-side .tnb-reveal-btn[data-type="whatsapp"]:hover,
.tnb-coach-page .tnb-coach-side .tnb-reveal-btn[data-type="whatsapp"]:focus { background: rgba(37, 211, 102, .22) !important; }
.tnb-coach-page .tnb-coach-side .tnb-reveal-btn:disabled { opacity: .6; cursor: wait; }

/* ---------- 3. Gallery + video band ---------- */
.tnb-coach-page .tnb-coach-gallery-section { margin-top: 34px !important; margin-bottom: 34px !important; }
.tnb-coach-page .tnb-coach-gallery-section .title { margin: 0 0 18px; }
.tnb-coach-page .tnb-gallery-empty {
    grid-column: 1 / -1;
    margin: 0;
    padding: 30px 10px;
    color: #8a8494;
    font-weight: 600;
}
/* `overlay-darkblue` does not exist in the theme, which left white titles on
   a white background: give the video band a solid brand background. */
.tnb-coach-page .tnb-coach-video-section {
    background-color: var(--tnb-teal) !important;
    background-image: none !important;
}
.tnb-coach-page .tnb-coach-video-section .tnb-video-header .tnb-video-title { font-size: 13.5px; }

/* ---------- 4. Reviews + stats ---------- */
.tnb-coach-page .tnb-coach-reviews-section { margin-top: 34px !important; margin-bottom: 34px !important; }
.tnb-coach-page .tnb-review-card { padding: 18px !important; }
.tnb-coach-page .tnb-review-comment { overflow-wrap: anywhere; }
.tnb-coach-page .tnb-coach-stats .funfact { padding: 8px 4px !important; }

/* ================= Responsive breakpoints ================= */
@media (max-width: 991px) {
    .tnb-coach-page .tnb-coach-hero { gap: 18px; padding: 18px 20px; }
    .tnb-coach-page .tnb-coach-hero .coach-avatar { width: 112px; height: 112px; }
    .tnb-coach-page .tnb-hero-name { font-size: 22px; }
    /* 80px of `.divider .container` padding is too heavy on a tablet. */
    .tnb-coach-page .tnb-coach-video-section .container { padding-top: 40px; padding-bottom: 40px; }
    .tnb-coach-page .tnb-coach-stats-section .container { padding-top: 40px !important; padding-bottom: 40px !important; }
}

@media (max-width: 767px) {
    /* --- Banner: ~200px of stacked paddings shrunk to a slim header --- */
    .tnb-coach-header .container { padding-top: 16px !important; padding-bottom: 14px !important; }
    .tnb-coach-header .section-content { padding-top: 0 !important; }
    .tnb-coach-header .title { margin: 0; font-size: 17px !important; letter-spacing: .5px; }
    .tnb-coach-page .container.pb-30 { padding-bottom: 6px !important; }

    /* --- Hero: stacked, centered, thumb-sized buttons --- */
    .tnb-coach-page .tnb-coach-hero {
        flex-direction: column;
        gap: 14px;
        margin-bottom: 18px;
        padding: 20px 16px;
        text-align: center;
        border-radius: 14px;
    }
    .tnb-coach-page .tnb-coach-hero .coach-avatar { width: 104px; height: 104px; }
    .tnb-coach-page .tnb-hero-name { font-size: 21px; }
    .tnb-coach-page .tnb-hero-sub { margin-bottom: 10px; font-size: 13.5px; }
    .tnb-coach-page .tnb-hero-meta { justify-content: center; gap: 6px; margin-bottom: 14px; }
    .tnb-coach-page .tnb-hero-meta li { padding: 5px 10px; font-size: 12px; }
    .tnb-coach-page .tnb-coach-hero-actions { flex-direction: column; gap: 8px; width: 100%; }
    .tnb-coach-page .tnb-coach-hero-actions .tnb-coach-btn { width: 100%; min-height: 48px; font-size: 14px; }
    .tnb-coach-page .tnb-share-wrap { width: 100%; }
    .tnb-coach-page .tnb-share-menu { right: auto; left: 0; min-width: 0; width: 100%; }

    /* --- Information cards --- */
    .tnb-coach-page .tnb-about-card { margin-bottom: 18px; padding: 16px; border-radius: 14px; }
    .tnb-coach-page .tnb-coach-side .widget { margin-bottom: 16px; border-radius: 14px; }
    .tnb-coach-page .tnb-coach-side .widget-title { padding: 12px 14px !important; font-size: 12.5px !important; }
    .tnb-coach-page .tnb-coach-side .opening-hours { padding: 4px 14px 12px; }
    .tnb-coach-page .tnb-coach-side .opening-hours ul.list-border > li { padding: 9px 0 !important; }

    /* --- Gallery / video / stats --- */
    .tnb-coach-page .tnb-coach-gallery-section { margin-top: 22px !important; margin-bottom: 22px !important; }
    .tnb-coach-page .tnb-coach-gallery-section .title { font-size: 20px; margin-bottom: 14px; }
    .tnb-coach-page .tnb-coach-gallery-section .tnb-gallery-grid { gap: 10px; }
    .tnb-coach-page .tnb-coach-video-section .container { padding-top: 26px; padding-bottom: 26px; }
    .tnb-coach-page .tnb-coach-video-section .section-title { margin-bottom: 16px; }
    .tnb-coach-page .tnb-coach-stats-section .container { padding-top: 24px !important; padding-bottom: 24px !important; }
    .tnb-coach-page .tnb-coach-stats > [class*="col-"] {
        width: 50% !important;
        margin-bottom: 10px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    .tnb-coach-page .tnb-coach-stats .funfact { padding: 6px 2px !important; }
    .tnb-coach-page .tnb-coach-stats .funfact i { font-size: 30px; }
    .tnb-coach-page .tnb-coach-stats .funfact h2.font-48 { font-size: 26px !important; }
    .tnb-coach-page .tnb-coach-stats .funfact h5 { font-size: 12.5px; line-height: 1.35; }

    /* --- Reviews --- */
    .tnb-coach-page .tnb-coach-reviews-section { margin-top: 22px !important; margin-bottom: 22px !important; }
    .tnb-coach-page .tnb-coach-reviews-section .section-title { margin-bottom: 16px !important; }
    .tnb-coach-page .tnb-review-card { margin-bottom: 14px !important; padding: 14px !important; border-radius: 12px; }
    .tnb-coach-page .tnb-review-card .media-left { padding-right: 12px !important; }
    .tnb-coach-page .tnb-review-card .tnb-review-avatar {
        width: 42px !important;
        height: 42px !important;
        line-height: 42px !important;
        font-size: 15px !important;
    }
    .tnb-coach-page .tnb-review-head { display: block !important; }
    .tnb-coach-page .tnb-review-stars { display: inline-block; margin-top: 4px; }

    /* --- Sticky bottom action bar (thumb reach) --- */
    .tnb-coach-page .tnb-coach-mobile-bar {
        display: flex;
        gap: 6px;
        position: fixed;
        left: 0;
        width: 100%;
        bottom: 0;
        /* Kept below Bootstrap's modal z-index (1050) so the guest reveal
           modal still overlays the bar on non-unlocked profiles. */
        z-index: 1030;
        padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
        background: rgba(255, 255, 255, .98);
        border-top: 1px solid #ece9f2;
        box-shadow: 0 -6px 20px rgba(35, 28, 58, .12);
    }
    .tnb-coach-page .tnb-coach-mobile-bar .tnb-coach-btn {
        flex: 1 1 0;
        min-width: 0;
        min-height: 46px;
        padding: 8px 10px;
        font-size: 13px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 120px;
        margin-left: 5px; 
    }
    /* Third (Share) column wrapper so the three actions stay equal-width. */
    .tnb-coach-page .tnb-coach-mobile-bar .tnb-mobile-btn-col {
        flex: 1 1 0;
        min-width: 0;
        display: flex;
    }
    .tnb-coach-page .tnb-coach-mobile-bar .tnb-mobile-btn-col .tnb-coach-btn {
        width: 100%;
    }
    /* Share dropdown opens upward, anchored to the right edge of the bar. */
    .tnb-coach-page .tnb-coach-mobile-bar .tnb-share-menu {
        left: 0;
        right: auto;
        top: auto;
        bottom: 100%;
        margin-top: 0;
        margin-bottom: 8px;
        min-width: 0;
        width: 150px;
        max-width: calc(100vw - 20px);
    }
}

@media (max-width: 575px) {
    /* Stack label above value so long addresses / specialties stay readable. */
    .tnb-coach-page .tnb-coach-side .opening-hours ul.list-border > li { display: block; }
    .tnb-coach-page .tnb-coach-side .opening-hours ul.list-border > li > div,
    .tnb-coach-page .tnb-coach-side .opening-hours ul.list-border > li > .value,
    .tnb-coach-page .tnb-coach-side .opening-hours ul.list-border > li > .pull-right {
        margin-top: 4px;
        text-align: left;
    }
    .tnb-coach-page .tnb-coach-side .opening-hours ul.list-border > li > div > .row { justify-content: flex-start; }
    .tnb-coach-page .tnb-coach-side .tnb-reveal-btn { width: 100%; }
    .tnb-coach-page .tnb-coach-hero-actions .tnb-coach-btn--ghost { min-height: 44px; }
}


/* ==================================================================
TrainerNearBy — Single Event page 
================================================================== */


@media (max-width:500px) {
    .single-class-details_event{
        display: grid;
    }
}

/* ===== Modern single event page ===== */
.event-hero-photo {
    width: 100%;
    max-height: 420px;
    object-fit: cover;
    border-radius: 14px;
    box-shadow: 0 6px 24px rgba(35, 28, 58, .1);
    margin-bottom: 24px;
}

.single-class-details_event h2 {
    font-weight: 700;
    color: #241c33;
}

/* Registration card */
.tnb-event-card {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 6px 24px rgba(35, 28, 58, .07);
    border: 1px solid #f0edf5;
    padding: 26px;
    margin-bottom: 26px;
}

.tnb-event-card .widget-title {
    margin: 0 0 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid #f1eef4;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    font-size: 15px;
    color: #2d2340;
}

.tnb-event-card .form-group { margin-bottom: 18px; }
.tnb-event-card label {
    font-weight: 600;
    font-size: 13px;
    color: #4b4459;
    margin-bottom: 6px;
    display: inline-block;
}
.tnb-event-card label small { color: #ff5722; margin-left: 3px; }
.tnb-event-card .form-control {
    border: 1px solid #e5e1ec;
    border-radius: 10px;
    padding: 11px 14px;
    height: auto;
    font-size: 14px;
    transition: border-color .2s ease, box-shadow .2s ease;
    box-shadow: none;
}
.tnb-event-card .form-control:focus {
    border-color: #703ca8;
    box-shadow: 0 0 0 3px rgba(112, 60, 168, .12);
}
.tnb-event-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    border-radius: 30px;
    padding: 12px 30px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .3px;
    color: #fff;
    background: linear-gradient(337deg, #ff5722, #703ca8);
    box-shadow: 0 6px 16px rgba(255, 87, 34, .3);
    transition: transform .2s ease, box-shadow .2s ease;
    margin-top: 6px;
}
.tnb-event-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(255, 87, 34, .38);
    color: #fff;
}

/* Sidebar widgets */
.tnb-sidebar .widget {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 6px 24px rgba(35, 28, 58, .07);
    border: 1px solid #f0edf5;
    padding: 22px 24px 8px;
    margin-bottom: 24px;
    overflow: hidden;
}
.tnb-sidebar .widget-title {
    background: none !important;
    color: #2d2340 !important;
    margin: -22px -24px 16px;
    padding: 18px 24px 14px;
    border-bottom: 1px solid #f1eef4;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    font-size: 14px;
}
.tnb-sidebar .opening-hours ul.list-border li {
    border-bottom: 1px dashed #efeaf4;
    padding: 10px 0;
    margin-bottom: 0;
}
.tnb-sidebar .opening-hours ul.list-border li:last-child { border-bottom: none; }
.tnb-sidebar .opening-hours ul.list-border li span {
    color: #8a8494;
    font-weight: 600;
    font-size: 13.5px;
}
.tnb-sidebar .opening-hours ul.list-border li .value,
.tnb-sidebar .opening-hours ul.list-border li .pull-right {
    color: #2d2340;
    font-weight: 600;
    font-size: 13.5px;
}
.tnb-sidebar .seephone,
.tnb-sidebar .seewhatsapp {
    color: #703ca8 !important;
    font-weight: 700;
    font-size: 12.5px;
}


/* ==================================================================
    TrainerNearBy — Single Event page 
    ================================================================== */
/* ==================================================================
    TrainerNearBy — Sports Categories page
    ================================================================== */

.sports-parent-title {
    position: relative;
    margin: 0 0 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid #edf0f5;
    font-size: 20px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #1f2a3b;
}
.sports-parent-title:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 70px;
    height: 2px;
    background: linear-gradient(135deg, #038f7e, #703ca8);
}
.sports-parent-count {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 10px;
    border-radius: 30px;
    background: #ff5722;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    vertical-align: middle;
}
.sports-grid { display: flex; flex-wrap: wrap; }
.sports-grid:before,
.sports-grid:after { display: none; content: none; }
.sports-grid > [class*="col-"] { display: flex; }
.sports-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #fff;
    border: 1px solid #edf0f5;
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.07);
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.sports-card:hover,
.sports-card:focus {
    transform: translateY(-4px);
    border-color: #038f7e;
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.12);
    text-decoration: none;
}
.sports-card-thumb {
    position: relative;
    width: 100%;
    padding-top: 70%;
    overflow: hidden;
    background: #f5f6f8;
}
.sports-card-thumb img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    border: 0;
    padding: 0;
    transition: transform 0.4s ease;
}
.sports-card:hover .sports-card-thumb img { transform: scale(1.06); }
.sports-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 16px 18px 18px;
}
.sports-card-name {
    margin: 0 0 10px;
    color: #1f2a3b;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    text-transform: none;
}
.sports-card-cta {
    margin-top: auto;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #038f7e;
}
.sports-card:hover .sports-card-cta { color: #ff5722; }
.sports-empty {
    padding: 40px 20px;
    border-radius: 16px;
    background: #f5f6f8;
    color: #5a6a80;
    text-align: center;
}

.tnb-zone {
    padding: 22px 26px;
    background: #fff;
    border: 1px solid #f0edf5;
    border-radius: 16px;
    box-shadow: 0 6px 24px rgba(35, 28, 58, .06);
}

@media(max-width: 425px) {
    .slide-section {
        background-image: url('../images/bg-slide-mobile.png');
        background-position: top;
        background-attachment: fixed;
    }
    .rev_slider_wrapper{
        display: none !important;
    }
    .hero-overlay {
        padding: 100px 12px 22px;
    }
    .hero-bg-overlay {
        background:linear-gradient(180deg, rgb(0 0 0 / 25%) 0%, rgb(0 0 0 / 22%) 60%, rgb(0 0 0 / 18%) 100%) !important; 
    }
}

#get-location-btn{
    float: right;
    color: green;
    
}