/* ── Locations / Studio Archive Page ─────────────────────────────────────── */

.bb-locations-page {
    font-family: inherit;
}

.section-locations {
    position: relative;
}

.section-locations .lead {
    margin-bottom: 0;
}

/* ── Studio popup (Google Maps InfoWindow) ───────────────────────────── */
.studio-preview--popup {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-family: "Montserrat", sans-serif;
    width: 100%;
    font-weight: normal;
    color: var(--charcoal-color);
    padding: 40px;
}

.gm-style-iw-chr {
    height: 0;
    padding-top: 0 !important;
}

.gm-style .gm-style-iw-d {
    overflow: visible !important;
    padding: 0 !important;
    max-height: none !important;
}

.gm-style .gm-style-iw-c {
    padding: 0 !important;
    overflow: hidden !important;
    box-shadow: none !important;
    border-radius: 50px !important;  
}

.gm-ui-hover-effect {
    width: 40px !important;
    height: 40px !important;
    top: 40px;
    right: 40px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    opacity: 1 !important;
    background: var(--grey-surface-color) !important;
    border-radius: 50%;
}

.gm-ui-hover-effect span {
    margin: 0 !important;
    background-color: var(--charcoal-color) !important;
}

.gm-style .gm-style-iw-tc {
    display: none !important;
}

/* ── Filters bar ──────────────────────────────────────────────────────────── */

.bb-locations-filters {
    position: sticky;
    top: 0;
    z-index: 100;
    padding: 40px 0;
}

.bb-locations-page.is-map-view .section-locations .container {
    position: relative;
}

.bb-locations-page.is-map-view .bb-locations-filters  {
    position: absolute;
    top: 24px;
    left: 24px;
    right: 24px;
    padding: 0;
    z-index: 100;
}

.bb-locations-search-icon {
    color: var(--charcoal-color);
    flex-shrink: 0;
}

.bb-locations-state-wrap {
    position: relative;
}

/* ── List view ────────────────────────────────────────────────────────────── */

.bb-locations-list-view {
    padding-bottom: 80px;
}

.bb-locations-list-inner {
    width: 100%;
}

/* State groups */

.bb-loc-state-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: inherit;
    text-align: left;
    background: none;
    border: none;
    padding: 0;
    font-size: 32px;
    line-height: 1.2;
    font-weight: 600;
    color: #6C7277;
    cursor: pointer;
    gap: 10px;
    margin-bottom: 24px;
}

.bb-loc-state-heading .bb-state-arrow {
    width: 20px;
    height: 20px;
    stroke: #6C7277;
    transition: transform .2s;
    flex-shrink: 0;
    margin-top: 6px;
}

.bb-loc-state-heading.collapsed .bb-state-arrow {
    transform: rotate(90deg);
}

.bb-loc-state-studios {
    display: none;
}

.bb-loc-state-studios--open {
    display: block;
}

.bb-loc-state-studios .card-list {
    overflow: hidden;
}

/* Search results */
.bb-loc-results-label {
    font-size: 0.95rem;
    color: #555;
    margin-bottom: 20px;
}

.bb-loc-no-results {
    text-align: center;
    color: #6C7277;
    padding: 40px 0;
}

/* ── Map view ─────────────────────────────────────────────────────────────── */

.bb-locations-map-view {
    width: 100%;
}

.bb-studios-map {
    width: 100%;
    height: 70vh;
    min-height: 700px;
}

/* ── Quick View modal ─────────────────────────────────────────────────────── */

.studio-preview__title-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    margin-bottom: 24px;
}

.studio-preview__title {
    padding-right: 40px;
}

.studio-preview__title {
    color: #000;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
}

.studio-preview__status {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 16px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 500;
}

.studio-preview__status--open { background: #CEDD44; color: var(--charcoal-color); }
.studio-preview__status--soon { background: #CBEFEE; color: var(--charcoal-color); }

.studio-preview__actions {
    display: grid;
    gap: 16px;
    width: 100%;
    padding-top: 40px;
}

a.studio-preview__contact-text {
    text-decoration: underline;
}

 a.studio-preview__contact-text:hover {
    color: var(--brand-color);
}

.studio-preview__social {
    display: flex;
    align-items: center;
    padding-top: 40px;
    margin: 0;
    gap: 16px;
}

.studio-preview__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    fill: currentColor;
}

.studio-preview__social-link:hover {
    fill: var(--brand-color);
}

.studio-preview__actions .btn{
    padding-left: 20px;
    padding-right: 20px;
    width: 100%;
}

.studio-preview__contacts {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    font-size: 16px;
    gap: 8px;
    margin: 0;
}
.studio-preview__status--closed {
    background: #EBC9C4;
    color: var(--charcoal-color);
}

.studio-preview__contact-text {
    overflow-wrap: anywhere;
    word-break: break-word;
}
.studio-preview__contact--email .studio-preview__contact-text {
    display: inline-block;
    max-width: 100%;
}

/* ──────────────────────────────────────────────────────────────────────────
   Instructor Training — popup list + load more
   Append to studio-archive.css (or the theme's instructor-training styles).
   The module markup already provides these hooks:
     .bb-training-list        — <ul> wrapper in the popup body
     .bb-training-item        — each training row
     .bb-training-item__title — "Signature Intensive"
     .bb-training-item__range — "July 9–12, 2026"
     .bb-training-loadmore-wrap / .bb-training-loadmore
   ────────────────────────────────────────────────────────────────────────── */

/* Popup: training dates list */
.bb-training-modal__subtitle {
    margin: 0 0 1.25rem;
    font-weight: 600;
}

.bb-training-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem; /* space between each training entry */
}

.bb-training-item {
    display: flex;
    flex-direction: column; /* title on its own line, date below */
    gap: 0.25rem;           /* space between name and date */
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.bb-training-item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.bb-training-item__title {
    font-weight: 700;
    line-height: 1.3;
}

.bb-training-item__range {
    color: #5a5a5a;
    font-size: 0.95em;
    line-height: 1.3;
}

/* Load More: center it with breathing room above */
.bb-training-loadmore-wrap {
    display: flex;
    justify-content: center;
    margin-top: 2.5rem;
}
.bb-training-note {
    margin: 1.25rem 0 0;
    padding-left: 1rem;
    border-left: 3px solid #53C9C6;
    line-height: 1.4;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media (min-width: 1024px) {
    .gm-style .gm-style-iw-c {
        max-width: 608px !important;
        min-width: 608px !important;
    }
}

@media (min-width: 1201px) {
    .studio-preview__actions {
        grid-template-columns: repeat(2, 1fr);
        align-items: center;
    }

    .bb-locations-page.is-map-view .bb-locations-filters  {
        top: 40px;
    }
}

@media (min-width: 768px) {
    .studio-preview__actions {
        grid-template-columns: repeat(2, 1fr);
        align-items: center;
    }
}

@media (max-width: 1200px) {
    .bb-locations-filters {
        padding: 24px 0;
        position: relative;
    }
}

@media (max-width: 1023px) {
    .studio-preview--popup {
        padding-left: 24px;
        padding-right: 24px;
    }

    .gm-style .gm-style-iw-c {
        min-width: 300px !important;
        width: 320px !important;
        border-radius: 16px !important;
    }

    .gm-ui-hover-effect {
        top: 34px;
        right: 24px;
    }

    .bb-locations-list-view {
        padding-bottom: 40px;
    }

    .bb-locations-search-wrap .btn {
        display: none;
    }

    .bb-locations-search-wrap {
        height: 40px;
        background: #fff;
        max-width: none;
    }

    .bb-loc-card {
        border-radius: 16px;
    }

    .bb-loc-state-heading {
        font-size: 24px;
        margin-bottom: 16px;
    }

    .bb-loc-state-heading .bb-state-arrow {
        margin-top: 2px;
    }

    .bb-locations-state-wrap[hidden],
    .bb-locations-state-wrap {
        display: none;
    }
    
    .bb-locations-state-wrap.is-open {
        display: block;
    }
}

a.bb-loc-state-heading {
    justify-content: flex-start;
}