/**
 * Profile Styles
 *
 * Styles for profile cards (search results) and single profile pages.
 *
 * @package Collabable_Core
 * @since 1.0.0
 */

/* ==========================================================================
   CSS VARIABLES
   ========================================================================== */

:root {
    --collabable-primary: #CF0000;
    --collabable-primary-hover: #A60000;
    --collabable-text: #111111;
    --collabable-text-muted: #666666;
    --collabable-text-light: #999999;
    --collabable-border: #e5e5e5;
    --collabable-border-light: #f5f5f5;
    --collabable-bg: #ffffff;
    --collabable-bg-muted: #f9fafb;
    --collabable-success: #27ae60;
    --collabable-warning: #e67e22;
    --collabable-error: #CF0000;
    --collabable-radius-sm: 8px;
    --collabable-radius-md: 12px;
    --collabable-radius-lg: 16px;
    --collabable-radius-full: 999px;
}

/* ==========================================================================
   PROFILE CARD (Search Results)
   ========================================================================== */

.collabable-profile-card {
    background: var(--collabable-bg);
    border: 1px solid var(--collabable-border);
    border-radius: var(--collabable-radius-lg);
    padding: 24px;
    position: relative;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.collabable-profile-card:hover {
    border-color: #ccc;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

/* Card Actions (Share/Bookmark) */
.collabable-profile-card__actions {
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    gap: 8px;
}

.collabable-profile-card__action-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    transition: color 0.2s ease;
    padding: 0;
}

.collabable-profile-card__action-btn:hover {
    color: #000;
}

.collabable-profile-card__action-btn svg {
    width: 20px;
    height: 20px;
}

/* Card Header */
.collabable-profile-card__header {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
}

/* Avatar */
.collabable-profile-card__avatar {
    flex-shrink: 0;
}

.collabable-profile-card__avatar img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
}

.collabable-profile-card__avatar--placeholder {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--collabable-bg-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--collabable-text-light);
}

/* Name & Role */
.collabable-profile-card__name-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.collabable-profile-card__name {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    color: #000;
    line-height: 1.3;
}

.collabable-profile-card__role {
    font-size: 13px;
    color: #000;
}

.collabable-profile-card__badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 8px;
    border-radius: var(--collabable-radius-full);
    background: var(--collabable-text);
    color: var(--collabable-bg);
    margin-left: 8px;
    vertical-align: middle;
}

.collabable-profile-card__badge--special {
    background: #CF0000;
}

.collabable-profile-card__badge--trending {
    background: #e67e22;
}

.collabable-profile-card__badge--featured {
    background: #27ae60;
}

.collabable-profile-card__recommended {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 6px 12px;
    background: #27ae60;
    color: #fff;
    text-align: center;
    border-radius: var(--collabable-radius) var(--collabable-radius) 0 0;
}

/* Bio */
.collabable-profile-card__bio {
    font-size: 14px;
    line-height: 1.6;
    color: #000;
    margin-bottom: 16px;
}

.collabable-profile-card__bio-label {
    font-weight: 600;
    margin-right: 4px;
}

.collabable-profile-card__read-more {
    color: #000;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

.collabable-profile-card__read-more:hover {
    text-decoration: none;
}

/* Meta Grid (Category, Level, Experience) */
.collabable-profile-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 24px;
    margin-bottom: 16px;
    font-size: 13px;
}

.collabable-profile-card__meta-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.collabable-profile-card__meta-label {
    color: #000;
    font-weight: 500;
}

.collabable-profile-card__meta-value {
    color: #000;
    font-weight: 400;
}

/* Info Columns (Links, Services, Vetted) */
.collabable-profile-card__info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--collabable-border-light);
}

@media (max-width: 768px) {
    .collabable-profile-card__info-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
}

@media (max-width: 480px) {
    .collabable-profile-card__info-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

.collabable-profile-card__info-section h4 {
    font-size: 13px;
    font-weight: 600;
    color: #000;
    margin: 0 0 8px 0;
}

.collabable-profile-card__info-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.collabable-profile-card__info-list li {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 12px;
    color: #000;
    margin-bottom: 4px;
    line-height: 1.4;
}

.collabable-profile-card__info-list li svg {
    flex-shrink: 0;
    color: #000;
    margin-top: 1px;
}

.collabable-profile-card__info-list a {
    color: #000;
    text-decoration: none;
}

.collabable-profile-card__info-list a:hover {
    text-decoration: underline;
}

/* Activity Row */
.collabable-profile-card__activity {
    display: flex;
    gap: 16px;
    font-size: 12px;
    color: #000;
    margin-bottom: 16px;
}

.collabable-profile-card__activity a {
    color: #000;
    text-decoration: underline;
}

/* Footer Buttons */
.collabable-profile-card__footer {
    display: flex;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--collabable-border-light);
}

.collabable-profile-card__btn {
    flex: 1;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 500;
    border-radius: var(--collabable-radius-full);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid var(--collabable-border);
    background: var(--collabable-bg);
    color: #000;
}

.collabable-profile-card__btn:hover {
    background: var(--collabable-bg-muted);
    border-color: #ccc;
}

.collabable-profile-card__btn--primary {
    background: var(--collabable-primary);
    border-color: var(--collabable-primary);
    color: var(--collabable-bg);
}

.collabable-profile-card__btn--primary:hover {
    background: var(--collabable-primary-hover);
    border-color: var(--collabable-primary-hover);
}

/* ==========================================================================
   SINGLE PROFILE PAGE
   ========================================================================== */

.collabable-single-profile {
    max-width: 1100px;
    margin: 0 auto 45px;
    padding: 24px 20px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.10);
    overflow: hidden;
}

/* Back Bar */
.collabable-single-profile__back-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.collabable-single-profile__back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #000;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
}

.collabable-single-profile__back-btn:hover {
    color: #000;
}

/* Cover Section */
.collabable-single-profile__cover-section {
    position: relative;
    width: 100%;
    margin-bottom: 24px;
}

/* Avatar overlapping cover bottom */
.collabable-single-profile__avatar-overlay {
    position: absolute;
    bottom: -125px;
    left: 32px;
    z-index: 2;
}

.collabable-single-profile__avatar-overlay .collabable-single-profile__avatar {
    width: 250px;
    height: 250px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    display: block;
}

.collabable-single-profile__avatar-overlay .collabable-single-profile__avatar--placeholder {
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: var(--collabable-bg-muted);
    border: 4px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--collabable-text-light);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

/* Two Column Layout */
.collabable-single-profile__content-columns {
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: 32px;
    margin-bottom: 24px;
}

/* Photos tab grid */
.collabable-single-profile__tab-grid--photos {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}

@media (max-width: 900px) {
    .collabable-single-profile__tab-grid--photos {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 600px) {
    .collabable-single-profile__tab-grid--photos {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Gallery preview (first 3 photos) */
.collabable-single-profile__photos-preview {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 20px;
}

.collabable-single-profile__photos-preview-item {
    aspect-ratio: 1;
    border-radius: var(--collabable-radius-sm);
    overflow: hidden;
}

.collabable-single-profile__photos-preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.2s ease;
}

.collabable-single-profile__photos-preview-item:hover img {
    transform: scale(1.05);
}

/* Vetted / Services side by side */
.collabable-single-profile__details-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

.collabable-single-profile__details-col {
    min-width: 0;
}

/* Links section (full width of left column) */
.collabable-single-profile__links-section {
    margin-bottom: 4px;
}

/* Role text (plain bold, no background) */
.collabable-single-profile__role-text {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #000;
    margin-top: 4px;
}

/* Collaborate CTA Button (red) */
.collabable-btn--collaborate {
    background: #CF0000 !important;
    color: #fff !important;
    border-color: #CF0000 !important;
}

.collabable-btn--collaborate:hover {
    background: #e00000 !important;
    border-color: #e00000 !important;
}

/* Legacy red button (kept for backward compat) */
.collabable-btn--red {
    background: #CF0000 !important;
    color: #fff !important;
    border-color: #CF0000 !important;
}

.collabable-btn--red:hover {
    background: #e00000 !important;
    border-color: #e00000 !important;
}

/* Left Column */
.collabable-single-profile__left-col {
    display: flex;
    flex-direction: column;
    padding-top: 110px;
}

/* Right Column */
.collabable-single-profile__right-col {
    display: flex;
    flex-direction: column;
}

/* Right Column Header (Name + CTA) */
.collabable-single-profile__right-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 16px;
    /* Clear the avatar overlay (250px avatar + 32px left offset) */
    padding-left: 290px;
}

/* Meta Info — Last seen + Joined */
.collabable-single-profile__meta-info {
    margin-bottom: 0;
    padding-bottom: 16px;
}

.collabable-single-profile__meta-line {
    font-size: 13px;
    color: #000;
    margin: 0 0 4px 0;
    line-height: 1.5;
}

.collabable-single-profile__meta-line strong {
    color: #000;
    font-weight: 700;
    margin-right: 4px;
}

/* "Last seen" fully underlined */
.collabable-single-profile__meta-line--underline {
    text-decoration: underline;
}

/* Meta Details — Category / Level / Experience */
.collabable-single-profile__meta-details {
    padding-top: 16px;
    padding-bottom: 16px;
    margin-bottom: 0;
}

/* Bio Title */
.collabable-single-profile__bio-title {
    font-size: 16px;
    font-weight: 600;
    color: #000;
    margin: 16px 0 16px 0;
}

/* Cover image container — contained within card */
.collabable-single-profile__cover {
    width: 100%;
    margin-left: 0;
    aspect-ratio: 3 / 1;
    max-height: 370px;
    border-radius: 0;
    overflow: hidden;
}

.collabable-single-profile__cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.collabable-single-profile__cover-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #e5e7eb, #d1d5db);
}

/* Share button + dropdown in back-bar */
.collabable-single-profile__share-wrap {
    position: relative;
}

.collabable-single-profile__share-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #000;
    background: none;
    border: 1px solid var(--collabable-border);
    border-radius: var(--collabable-radius-full);
    padding: 6px 14px;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.collabable-single-profile__share-btn:hover,
.collabable-single-profile__share-btn.is-active {
    color: #000;
    border-color: #ccc;
    background: var(--collabable-bg-muted);
}

.collabable-single-profile__share-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: var(--collabable-bg);
    border: 1px solid var(--collabable-border);
    border-radius: var(--collabable-radius-md);
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    min-width: 200px;
    z-index: 50;
    padding: 4px;
}

.collabable-single-profile__share-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 500;
    color: #000;
    background: none;
    border: none;
    border-radius: var(--collabable-radius-sm);
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    transition: background 0.15s;
}

.collabable-single-profile__share-item:hover {
    background: var(--collabable-bg-muted);
}

.collabable-single-profile__share-item.is-copied {
    color: var(--collabable-success);
}

.collabable-single-profile__share-item svg {
    flex-shrink: 0;
}

/* Level badge (vertical, left edge of cover) */
.collabable-single-profile__level-badge {
    position: absolute;
    top: 12px;
    left: 0;
    background: #c0392b;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    writing-mode: vertical-lr;
    text-orientation: mixed;
    padding: 8px 5px;
    border-radius: 0 var(--collabable-radius-sm) var(--collabable-radius-sm) 0;
}

/* Cover now has full border-radius, remove top-only when card was below */

.collabable-single-profile__left-title {
    font-size: 13px;
    font-weight: 700;
    color: #000;
    margin: 0 0 6px 0;
}

.collabable-single-profile__check-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.collabable-single-profile__check-list li {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: #000;
    margin-bottom: 4px;
}

.collabable-single-profile__check-list li.is-verified {
    color: #000;
}

.collabable-single-profile__check-list li.is-unverified {
    opacity: 0.5;
}

.collabable-single-profile__check-list--multi {
    column-count: 2;
    column-gap: 16px;
}

/* Links list (platform name + URL) */
.collabable-single-profile__links-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.collabable-single-profile__links-list li {
    margin-bottom: 10px;
}

.collabable-single-profile__links-list li:last-child {
    margin-bottom: 0;
}

.collabable-single-profile__link-block {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.collabable-single-profile__link-platform {
    font-size: 13px;
    font-weight: 700;
    color: #000;
}

.collabable-single-profile__link-url,
.collabable-single-profile__link-url:visited,
.collabable-single-profile__link-url:active {
    font-size: 12px;
    color: #000;
    text-decoration: none;
    word-break: break-all;
}

.collabable-single-profile__link-url:hover {
    text-decoration: underline;
    color: #000;
}

.collabable-single-profile__link-followers {
    font-size: 11px;
    font-weight: 600;
    color: var(--collabable-primary, #6366f1);
    margin-left: 6px;
}

/* Full Gallery Section */
.collabable-single-profile__gallery-section {
    background: var(--collabable-bg);
    border: 1px solid var(--collabable-border);
    border-radius: var(--collabable-radius-lg);
    padding: 24px;
    margin-bottom: 24px;
}

.collabable-single-profile__gallery-section h2 {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    color: #000;
}

.collabable-single-profile__gallery-count {
    font-size: 13px;
    color: #000;
}

.collabable-single-profile__gallery-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}

.collabable-single-profile__gallery-item {
    aspect-ratio: 4/3;
    border-radius: var(--collabable-radius-md);
    overflow: hidden;
}

.collabable-single-profile__gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.2s ease;
}

.collabable-single-profile__gallery-item:hover img {
    transform: scale(1.05);
}

/* Responsive: At 900px columns collapse */
@media (max-width: 900px) {
    .collabable-single-profile__content-columns {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .collabable-single-profile__gallery-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .collabable-single-profile__avatar-overlay .collabable-single-profile__avatar,
    .collabable-single-profile__avatar-overlay .collabable-single-profile__avatar--placeholder {
        width: 160px;
        height: 160px;
    }

    .collabable-single-profile__avatar-overlay {
        bottom: -80px;
    }

    .collabable-single-profile__right-header {
        padding-left: 200px;
    }

    .collabable-single-profile__left-col {
        padding-top: 60px;
    }

    .collabable-single-profile__name {
        font-size: 20px;
    }

    .collabable-single-profile__photos-preview {
        grid-template-columns: repeat(3, 1fr);
    }

    .collabable-single-profile__cover {
        aspect-ratio: 2.5 / 1;
    }
}

/* At 600px: tighter spacing, smaller avatar, stacked layout */
@media (max-width: 600px) {
    .collabable-single-profile__cover {
        aspect-ratio: 2.5 / 1;
    }

    .collabable-single-profile__cover-section {
        margin-bottom: 50px;
    }

    .collabable-single-profile__left-col {
        padding-top: 0;
    }

    .collabable-single-profile__avatar-overlay {
        left: 16px;
        bottom: -40px;
    }

    .collabable-single-profile__avatar-overlay .collabable-single-profile__avatar,
    .collabable-single-profile__avatar-overlay .collabable-single-profile__avatar--placeholder {
        width: 80px;
        height: 80px;
    }

    .collabable-single-profile__right-header {
        flex-direction: column;
        gap: 12px;
        /* Mobile avatar: 80px + 16px left */
        padding-left: 104px;
    }

    .collabable-single-profile__content-columns {
        grid-template-columns: 1fr;
    }

    .collabable-single-profile__details-row {
        grid-template-columns: 1fr;
    }

    .collabable-single-profile__gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .collabable-single-profile__photos-preview {
        grid-template-columns: repeat(2, 1fr);
    }

    .collabable-single-profile__name {
        font-size: 18px;
    }
}

/* Name Block */
.collabable-single-profile__name-block {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.collabable-single-profile__name {
    font-size: 24px;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
    color: #000;
    display: flex;
    align-items: center;
    gap: 8px;
}

.collabable-verified-badge {
    display: inline-flex;
    color: #27ae60;
}

.collabable-single-profile__header-cta {
    padding: 10px 24px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    border-radius: 20px;
}

/* Dark button variant (legacy, kept for compatibility) */
.collabable-btn--dark {
    background: var(--collabable-text) !important;
    color: #fff !important;
    border-color: #000 !important;
}

.collabable-btn--dark:hover {
    background: #333 !important;
    border-color: #333 !important;
}

.collabable-check-icon {
    color: #000;
    flex-shrink: 0;
}

/* ==========================================================================
   CONTENT SECTIONS
   ========================================================================== */

/* Bio Section */
.collabable-single-profile__bio-section {
    background: var(--collabable-bg);
    border: 1px solid var(--collabable-border);
    border-radius: var(--collabable-radius-lg);
    padding: 24px;
    margin-bottom: 24px;
}

.collabable-single-profile__bio-section h2 {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 16px 0;
    color: #000;
}

.collabable-single-profile__bio-content {
    font-size: 14px;
    line-height: 1.65;
    color: #000;
}

.collabable-single-profile__bio-content p {
    margin: 0 0 16px 0;
}

.collabable-single-profile__bio-content p:last-child {
    margin-bottom: 0;
}

/* (Audience section removed - data now in details grid) */

/* Clips Section */
.collabable-single-profile__clips-section {
    background: var(--collabable-bg);
    border: 1px solid var(--collabable-border);
    border-radius: var(--collabable-radius-lg);
    padding: 24px;
    margin-bottom: 24px;
}

.collabable-single-profile__section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.collabable-single-profile__section-header h2 {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    color: #000;
}

.collabable-single-profile__see-all {
    font-size: 13px;
    color: #000;
    text-decoration: none;
}

.collabable-single-profile__see-all:hover {
    text-decoration: underline;
}

.collabable-single-profile__clips-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
}

@media (max-width: 900px) {
    .collabable-single-profile__clips-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 600px) {
    .collabable-single-profile__clips-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.collabable-single-profile__clip-placeholder {
    aspect-ratio: 1;
    background: var(--collabable-bg-muted);
    border-radius: var(--collabable-radius-md);
}

/* Collaboration Section */
.collabable-single-profile__collab-section {
    background: var(--collabable-bg);
    border: 1px solid var(--collabable-border);
    border-radius: var(--collabable-radius-lg);
    padding: 24px;
    margin-bottom: 24px;
}

.collabable-single-profile__collab-section h2 {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 20px 0;
    color: #000;
}

.collabable-single-profile__collab-section h3 {
    font-size: 15px;
    font-weight: 600;
    margin: 24px 0 16px 0;
    color: #000;
    padding-top: 24px;
    border-top: 1px solid var(--collabable-border-light);
}

/* Collaboration CTA */
.collabable-single-profile__collab-cta {
    text-align: center;
    padding: 16px 0;
}

.collabable-single-profile__collab-cta p {
    margin: 0 0 16px 0;
    color: #000;
    font-size: 15px;
}

/* Quick Message Form */
.collabable-single-profile__quick-message {
    margin-top: 8px;
}

/* Login Required Notice */
.collabable-single-profile__collab-login {
    text-align: center;
    padding: 24px;
    background: var(--collabable-bg-muted);
    border-radius: var(--collabable-radius-md);
}

.collabable-single-profile__collab-login p {
    margin: 0 0 16px 0;
    color: #000;
    font-size: 15px;
}

.collabable-single-profile__collab-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
}

/* Upgrade Notice */
.collabable-single-profile__collab-upgrade {
    text-align: center;
    padding: 24px;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border-radius: var(--collabable-radius-md);
    border: 1px solid #f59e0b;
}

.collabable-single-profile__collab-upgrade p {
    margin: 0 0 16px 0;
    color: #000;
    font-size: 15px;
}

/* Own Profile Notice */
.collabable-single-profile__collab-notice {
    text-align: center;
    padding: 24px;
    background: var(--collabable-bg-muted);
    border-radius: var(--collabable-radius-md);
}

.collabable-single-profile__collab-notice p {
    margin: 0 0 16px 0;
    color: #000;
    font-size: 15px;
}

/* ==========================================================================
   STUDIO SINGLE PAGE
   ========================================================================== */

/* Page-level white text — constrain to grid cell (sidebar layout) */
.collabable-single-studio {
    color: #fff;
    padding: 0;
    min-width: 0;
    max-width: 100%;
    overflow: clip;
}

.collabable-single-studio,
.collabable-single-studio h1,
.collabable-single-studio h2,
.collabable-single-studio h3,
.collabable-single-studio p,
.collabable-single-studio span,
.collabable-single-studio a,
.collabable-single-studio li,
.collabable-single-studio label,
.collabable-single-studio input,
.collabable-single-studio textarea,
.collabable-single-studio select,
.collabable-single-studio button,
.collabable-single-studio div {
    color: #fff;
}

/* Back Bar / Breadcrumb */
.collabable-single-studio__back-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.collabable-single-studio__breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.collabable-single-studio__breadcrumb-link {
    color: #fff;
    text-decoration: none;
    transition: color 0.2s;
}

.collabable-single-studio__breadcrumb-link:hover {
    color: #fff;
}

.collabable-single-studio__bookmark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--collabable-radius-sm);
    border: 1px solid rgba(255,255,255,0.2);
    background: transparent;
    color: #fff;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
    padding: 0;
}

.collabable-single-studio__bookmark:hover {
    color: #CF0000;
    border-color: #CF0000;
}

/* ── Gallery Top (full width, Airbnb/Peerspace pattern) ── */
.collabable-single-studio__gallery-top {
    margin-bottom: 24px;
    position: relative;
    border-radius: 16px;
    overflow: hidden;
}

.collabable-single-studio__gallery-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 8px;
    height: 476px;
}

.collabable-single-studio__gallery-main {
    grid-row: 1 / 3;
    overflow: hidden;
    cursor: pointer;
    height: 100%;
}

.collabable-single-studio__gallery-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.collabable-single-studio__gallery-thumbs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 8px;
    grid-row: 1 / 3;
}

.collabable-single-studio__gallery-thumb {
    overflow: hidden;
    cursor: pointer;
    position: relative;
    transition: opacity 0.2s;
}

.collabable-single-studio__gallery-thumb:hover {
    opacity: 0.85;
}

.collabable-single-studio__gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.collabable-single-studio__gallery-show-all {
    display: block;
    margin-top: 12px;
    margin-left: auto;
    width: fit-content;
    background: #111;
    color: #fff;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.collabable-single-studio__gallery-show-all:hover {
    background: #222;
}

.collabable-single-studio__main-img--placeholder {
    background: linear-gradient(135deg, #2a2a2a, #3a3a3a);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    min-height: 400px;
}

/* Owner upload overlay inside gallery-top */
.collabable-studio-gallery__upload--overlay {
    position: absolute;
    bottom: 16px;
    left: 16px;
    z-index: 2;
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

/* ── 2-Column Body ── */
.collabable-single-studio__body {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.collabable-single-studio__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ── Booking Card (sticky sidebar) ── */
.collabable-single-studio__booking-card {
    width: 340px;
    flex-shrink: 0;
}

.collabable-single-studio__booking-card-inner {
    position: sticky;
    top: 80px;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 12px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.collabable-single-studio__booking-price {
    text-align: center;
}

.collabable-single-studio__booking-price .price-amount {
    font-size: 28px;
    font-weight: 700;
    color: #fff;
}

.collabable-single-studio__booking-price .price-unit {
    font-size: 16px;
    color: rgba(255,255,255,0.6);
}

.collabable-single-studio__booking-price .price-original {
    font-size: 16px;
    color: rgba(255,255,255,0.4);
    text-decoration: line-through;
    margin-right: 8px;
}

.collabable-single-studio__reserve-btn {
    width: 100%;
    padding: 14px;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
}

.collabable-single-studio__booking-contact {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 12px;
    border-top: 1px solid #333;
}

.collabable-single-studio__booking-contact a {
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.collabable-single-studio__booking-contact a:hover {
    color: #fff;
}

/* ── Header (title + share) ── */
.collabable-single-studio__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

/* ── Quick Meta (single row of items) ── */
.collabable-single-studio__quick-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
}

.collabable-single-studio__quick-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: rgba(255,255,255,0.8);
}

.collabable-single-studio__quick-meta-item svg {
    flex-shrink: 0;
}

.collabable-single-studio__quick-meta-count {
    color: rgba(255,255,255,0.5);
}

/* ── Trust Metrics ── */
.collabable-single-studio__trust-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.collabable-single-studio__trust-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #27ae60;
    background: rgba(39,174,96,0.1);
    padding: 5px 12px;
    border-radius: var(--collabable-radius-full);
}

.collabable-single-studio__trust-item svg {
    color: #27ae60;
    flex-shrink: 0;
}

/* ── Section headings inside info column ── */
.collabable-single-studio__section h2 {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 12px;
}

/* Share button (now in header) */
.collabable-single-studio__share-wrap {
    position: relative;
    z-index: 2;
    flex-shrink: 0;
}

.collabable-single-studio__share-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(0,0,0,0.5);
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    padding: 0;
}

.collabable-single-studio__share-btn:hover {
    background: rgba(0,0,0,0.7);
}

.collabable-single-studio__share-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: #2a2a2a;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 6px 0;
    min-width: 160px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

.collabable-single-studio__share-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    font-size: 13px;
    color: #fff;
    text-decoration: none;
    background: none;
    border: none;
    width: 100%;
    cursor: pointer;
    transition: background 0.15s;
}

.collabable-single-studio__share-option:hover {
    background: rgba(255,255,255,0.08);
    color: #fff;
}

/* Gallery strip item (used as data-attribute selector for lightbox) */
.collabable-single-studio__gallery-strip-item {
    cursor: pointer;
    transition: opacity 0.2s;
}

.collabable-single-studio__gallery-strip-item:hover {
    opacity: 0.85;
}

/* (Legacy info-col removed - replaced by __info + __booking-card layout) */

.collabable-single-studio__name-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.collabable-single-studio__name {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.collabable-single-studio__badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: var(--collabable-radius-full);
    letter-spacing: 0.5px;
}

.collabable-single-studio__badge--featured {
    background: #CF0000;
    color: #fff;
}

.collabable-single-studio__address {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #fff;
    margin: 0;
}

.collabable-single-studio__address svg {
    color: #fff;
}

.collabable-single-studio__desc {
    font-size: 14px;
    line-height: 1.6;
    color: #fff;
}

.collabable-single-studio__desc p {
    margin: 0 0 8px;
}

/* (Legacy meta-row removed - replaced by __quick-meta + __trust-metrics) */

.collabable-single-studio__topics {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.collabable-single-studio__topic-tag {
    font-size: 12px;
    color: #fff;
    background: rgba(255,255,255,0.1);
    padding: 4px 10px;
    border-radius: var(--collabable-radius-full);
}

/* Studio Type + Instant Book */
.collabable-single-studio__type-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.collabable-single-studio__type-tag {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: rgba(255,255,255,0.15);
    padding: 3px 10px;
    border-radius: var(--collabable-radius-full);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.collabable-single-studio__instant-book {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: #e67e22;
    background: rgba(230, 126, 34, 0.15);
    padding: 3px 10px;
    border-radius: var(--collabable-radius-full);
}

/* Highlights strip (key selling points, Airbnb-style) */
.collabable-single-studio__highlights {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 0;
    margin: 8px 0 4px;
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
}

.collabable-single-studio__highlight-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.collabable-single-studio__highlight-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 1px;
}

.collabable-single-studio__highlight-text {
    font-size: 14px;
    color: #333;
    line-height: 1.4;
}

@media (max-width: 600px) {
    .collabable-single-studio__highlights {
        gap: 10px;
        padding: 12px 0;
    }
    .collabable-single-studio__highlight-text {
        font-size: 13px;
    }
}

.collabable-single-studio__grace-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: #27ae60;
    background: rgba(39, 174, 96, 0.12);
    padding: 3px 10px;
    border-radius: var(--collabable-radius-full);
}

/* (Legacy trust metrics + languages removed - now in __trust-metrics + __quick-meta) */

/* Studio Rules */
.collabable-single-studio__rules {
    margin-bottom: 24px;
}

.collabable-single-studio__rules h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 12px;
}

.collabable-single-studio__rules h2 svg {
    flex-shrink: 0;
    color: #fff;
}

.collabable-single-studio__rules-content {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255,255,255,0.8);
    background: rgba(255,255,255,0.05);
    border-radius: var(--collabable-radius-sm);
    padding: 16px 20px;
}

.collabable-single-studio__rules-content p {
    margin: 0 0 8px;
    color: inherit;
}

.collabable-single-studio__rules-content p:last-child {
    margin-bottom: 0;
}

/* Similar card rating */
.collabable-single-studio__similar-card-rating {
    display: flex;
    align-items: center;
}

.collabable-single-studio__similar-card-rating .rvw-badge {
    font-size: 13px;
}

/* (Legacy contact-links removed - now in __booking-contact) */

/* (Legacy CTA row removed - Reserve button now in booking card) */

.collabable-btn--red {
    background: #CF0000;
    color: #fff;
    border-color: #CF0000;
}

.collabable-btn--red:hover {
    background: #A60000;
    border-color: #A60000;
    color: #fff;
}

/* Map + Facilities side-by-side */
.collabable-single-studio__map-facilities {
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: 24px;
    margin-bottom: 24px;
    align-items: start;
}

.collabable-single-studio__map-facilities--single {
    grid-template-columns: 1fr;
}

/* Google Maps */
.collabable-single-studio__map {
    border-radius: var(--collabable-radius-lg);
    overflow: hidden;
    height: 320px;
}

.collabable-single-studio__map iframe {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: var(--collabable-radius-lg);
}

/* Facilities */
.collabable-single-studio__facilities {
    padding: 0;
}

.collabable-single-studio__facilities-heading {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 16px;
}

.collabable-single-studio__facilities-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 24px;
}

.collabable-single-studio__facilities-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #fff;
}

.collabable-single-studio__facilities-item svg {
    flex-shrink: 0;
    color: #fff;
}

/* "Show all X amenities" button */
.collabable-single-studio__amenities-show-all {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 20px;
    background: none;
    border: 1px solid #fff;
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.collabable-single-studio__amenities-show-all:hover {
    background: #fff;
    color: #111;
}

/* Amenities Modal — overlay */
.collabable-single-studio__amenities-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Amenities Modal — container */
.collabable-single-studio__amenities-modal {
    position: relative;
    width: 90%;
    max-width: 700px;
    max-height: 80vh;
    overflow-y: auto;
    background: #1a1a1a;
    border-radius: 16px;
    padding: 32px;
    color: #fff;
}

.collabable-single-studio__amenities-modal h2 {
    font-size: 22px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 24px;
}

/* Close button */
.collabable-single-studio__amenities-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 4px;
    line-height: 0;
    transition: opacity 0.2s;
}

.collabable-single-studio__amenities-close:hover {
    opacity: 0.7;
}

/* Modal category blocks */
.collabable-single-studio__amenities-category {
    margin-bottom: 24px;
}

.collabable-single-studio__amenities-category:last-child {
    margin-bottom: 0;
}

.collabable-single-studio__amenities-category h3 {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.collabable-single-studio__amenities-category-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 24px;
}

/* Legacy compat: keep old class names functional (used nowhere now but safe) */
.collabable-single-studio__facilities-col h3 {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 12px;
}

.collabable-single-studio__facilities-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.collabable-single-studio__facilities-col li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #fff;
}

.collabable-single-studio__facilities-col li svg {
    flex-shrink: 0;
    color: #fff;
}

/* More spaces like this */
.collabable-single-studio__similar {
    margin-bottom: 24px;
}

.collabable-single-studio__similar h2 {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 16px;
}

.collabable-single-studio__similar-row {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 8px;
    scrollbar-width: thin;
}

/* Similar studio cards: round photo + name + location + price */
.collabable-single-studio__similar-card {
    flex: 0 0 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    text-align: center;
    transition: opacity 0.2s;
}

.collabable-single-studio__similar-card:hover {
    opacity: 0.8;
}

.collabable-single-studio__similar-card-img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(255,255,255,0.05);
}

.collabable-single-studio__similar-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.collabable-single-studio__similar-card-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.collabable-single-studio__similar-card-name {
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    line-height: 1.3;
}

.collabable-single-studio__similar-card-city {
    font-size: 20px;
    color: #fff;
}

.collabable-single-studio__similar-card-price {
    font-size: 20px;
    font-weight: 500;
    color: #fff;
}

/* Studio managed by */
.collabable-single-studio__managed-by {
    margin-bottom: 24px;
}

.collabable-single-studio__managed-by h2 {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 16px;
}

.collabable-single-studio__manager {
    display: flex;
    align-items: center;
    gap: 12px;
}

.collabable-single-studio__manager-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
}

.collabable-single-studio__manager-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.collabable-single-studio__manager-name {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
}

.collabable-single-studio__manager-role {
    font-size: 13px;
    color: #fff;
}

.collabable-single-studio__manager-link {
    font-size: 13px;
    color: #CF0000;
    text-decoration: none;
    font-weight: 500;
    margin-top: 2px;
    transition: opacity 0.2s;
}

.collabable-single-studio__manager-link:hover {
    opacity: 0.8;
}

/* Facilities sub-heading (e.g. Miscellaneous below Suitable for) */
.collabable-single-studio__facilities-sub {
    margin-top: 20px;
}

/* ── Studio Videos Section ── */
.studio-videos__section {
    margin-bottom: 32px;
}

.studio-videos__heading {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 16px;
}

.studio-videos__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.studio-videos__card {
    background: #111;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.studio-videos__card:hover {
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.studio-videos__card.is-expanded {
    grid-column: 1 / -1;
    cursor: default;
}

.studio-videos__thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #1a1a1a;
    overflow: hidden;
}

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

.studio-videos__thumb-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: rgba(255, 255, 255, 0.3);
}

.studio-videos__thumb-placeholder svg {
    width: 48px;
    height: 48px;
}

.studio-videos__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.6);
    border: none;
    border-radius: 50%;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
    padding: 0;
}

.studio-videos__play:hover {
    background: rgba(207, 0, 0, 0.8);
    transform: translate(-50%, -50%) scale(1.1);
}

.studio-videos__platform-label {
    position: absolute;
    bottom: 8px;
    left: 8px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: capitalize;
}

.studio-videos__title {
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    padding: 10px 12px;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Video close button (reuses existing pattern) */
.studio-videos__card .collabable-video-close {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: background 0.2s ease;
}

.studio-videos__card .collabable-video-close:hover {
    background: rgba(207, 0, 0, 0.9);
}

.studio-videos__card.is-expanded iframe,
.studio-videos__card.is-expanded .wp-video {
    width: 100%;
    max-height: 480px;
}

/* Platform-specific placeholder backgrounds */
.studio-videos__thumb--youtube { background: linear-gradient(135deg, #1a1a1a 0%, #2d0000 100%); }
.studio-videos__thumb--vimeo { background: linear-gradient(135deg, #1a1a1a 0%, #001a2d 100%); }
.studio-videos__thumb--spotify { background: linear-gradient(135deg, #1a1a1a 0%, #001a00 100%); }
.studio-videos__thumb--tiktok { background: linear-gradient(135deg, #1a1a1a 0%, #1a002d 100%); }
.studio-videos__thumb--instagram { background: linear-gradient(135deg, #1a1a1a 0%, #2d001a 100%); }
.studio-videos__thumb--facebook { background: linear-gradient(135deg, #1a1a1a 0%, #001a2d 100%); }

@media (max-width: 768px) {
    .studio-videos__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

@media (max-width: 480px) {
    .studio-videos__grid {
        grid-template-columns: 1fr;
    }

    .studio-videos__play {
        width: 48px;
        height: 48px;
    }

    .studio-videos__play svg {
        width: 24px;
        height: 24px;
    }
}

/* Reviews section */
.collabable-single-studio__reviews {
    margin-bottom: 24px;
}

.collabable-single-studio__reviews h2 {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 16px;
}

/* Review styles on studio pages are now handled entirely by reviews.css (v5.39.0).
   Legacy dark-mode overrides removed — reviews.css uses white-on-dark natively. */

.collabable-single-studio .rvw-flag-dialog__submit {
    color: #fff !important;
}

.collabable-single-studio .rvw-flag-dialog__cancel {
    color: #666 !important;
}

/* Gallery strip: empty state + upload controls */
.collabable-single-studio__gallery-empty {
    text-align: center;
    padding: 32px 16px;
    font-size: 14px;
    color: #fff;
}

/* Booking section */
.collabable-single-studio__booking {
    margin-bottom: 24px;
}

.collabable-single-studio__booking h2 {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 16px;
}

/* ── Responsive: Tablet ── */
@media (max-width: 900px) {
    .collabable-single-studio {
        padding: 0 16px;
    }

    .collabable-single-studio__body {
        flex-direction: column;
    }

    .collabable-single-studio__booking-card {
        width: 100%;
    }

    .collabable-single-studio__booking-card-inner {
        position: static;
    }

    .collabable-single-studio__map-facilities {
        grid-template-columns: 1fr;
    }

    .collabable-single-studio__facilities-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ── Responsive: Mobile ── */
@media (max-width: 600px) {
    .collabable-single-studio {
        padding: 0 12px;
    }

    .collabable-single-studio__gallery-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        height: auto;
    }

    .collabable-single-studio__gallery-main {
        grid-row: auto;
    }

    .collabable-single-studio__gallery-thumbs {
        display: none;
    }

    .collabable-single-studio__gallery-show-all {
        display: block;
    }

    .collabable-single-studio__name {
        font-size: 18px;
    }

    .collabable-single-studio__header {
        flex-direction: column;
        gap: 8px;
    }

    .collabable-single-studio__quick-meta {
        flex-direction: column;
        gap: 8px;
    }

    .collabable-single-studio__facilities-grid,
    .collabable-single-studio__amenities-category-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .collabable-single-studio__amenities-modal {
        padding: 20px;
        border-radius: 12px;
    }

    .collabable-single-studio__similar-card {
        flex: 0 0 140px;
    }

    .collabable-single-studio__similar-card-name,
    .collabable-single-studio__similar-card-city,
    .collabable-single-studio__similar-card-price {
        font-size: 16px;
    }

    .collabable-single-studio__similar-card-img {
        width: 90px;
        height: 90px;
    }

}

/* Studio Gallery: owner upload & remove controls */
.collabable-studio-gallery__remove {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #CF0000;
    color: #fff;
    border: none;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.collabable-studio-gallery__upload {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e0e0e0;
}

.collabable-studio-gallery__upload-btn {
    white-space: nowrap;
}

.collabable-studio-gallery__upload-btn svg {
    flex-shrink: 0;
}

.collabable-studio-gallery__hint {
    font-size: 13px;
    color: #666;
}

@media (max-width: 600px) {
    .collabable-studio-gallery__upload {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .collabable-studio-gallery__remove {
        opacity: 1;
    }
}

/* Studio Gallery: progress bar (for upload feedback on profile page) */
#studio-gallery-progress {
    margin-top: 12px;
}

#studio-gallery-progress .cb-progress {
    height: 6px;
    background: var(--collabable-bg-muted, #f0f0f0);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 6px;
}

#studio-gallery-progress .cb-progress__bar {
    height: 100%;
    background: #CF0000;
    border-radius: 3px;
    transition: width 0.3s ease;
    width: 0%;
}

#studio-gallery-progress .cb-progress__bar--success {
    background: #27ae60;
}

#studio-gallery-progress .cb-progress__bar--error {
    background: #CF0000;
}

#studio-gallery-progress .cb-progress__text {
    font-size: 13px;
    color: #333;
    margin: 0;
}

#studio-gallery-progress .cb-progress__text--success {
    color: #27ae60;
}

#studio-gallery-progress .cb-progress__text--error {
    color: #CF0000;
}

/* ==========================================================================
   BUTTON STYLES
   .collabable-btn: page-specific override — see also core, subscribe, onboarding
   ========================================================================== */

.collabable-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    border-radius: var(--collabable-radius-full);
    border: 1px solid #ddd;
    background: #fff;
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.collabable-btn--primary {
    background: #CF0000;
    border-color: #CF0000;
    color: #fff;
}

.collabable-btn--lg {
    padding: 14px 28px;
    font-size: 15px;
}

.collabable-btn--sm {
    padding: 6px 14px;
    font-size: 13px;
}

.collabable-btn--block {
    width: 100%;
}

.collabable-btn:disabled,
.collabable-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ==========================================================================
   PROFILE TABS
   ========================================================================== */

.collabable-single-profile__tabs-section {
    margin-top: 32px;
    padding: 0 24px;
}

.collabable-single-profile__tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--collabable-border);
    margin-bottom: 20px;
    padding: 8px 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.collabable-single-profile__tabs::-webkit-scrollbar {
    display: none;
}

.collabable-single-profile__tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 20px;
    font-size: 14px;
    font-weight: 500;
    color: #000;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    white-space: nowrap;
}

.collabable-single-profile__tab--active {
    color: var(--collabable-primary);
    border-bottom-color: var(--collabable-primary);
    font-weight: 600;
}

.collabable-single-profile__tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    font-size: 12px;
    font-weight: 600;
    background: var(--collabable-bg-muted);
    color: #000;
    border-radius: var(--collabable-radius-full);
}

.collabable-single-profile__tab--active .collabable-single-profile__tab-count {
    background: var(--collabable-primary);
    color: white;
}

/* Tab panels */
.collabable-single-profile__tab-panel {
    display: none;
    padding: 24px 0;
    min-height: 200px;
}

.collabable-single-profile__tab-panel--active {
    display: block;
}

/* Tab grids */
.collabable-single-profile__tab-grid {
    display: grid;
    gap: 16px;
}

.collabable-single-profile__tab-grid--videos {
    grid-template-columns: repeat(4, 1fr);
}

.collabable-single-profile__tab-grid--cards {
    grid-template-columns: 1fr;
    gap: 12px;
}

/* Video cards */
.collabable-single-profile__video-card {
    cursor: pointer;
    border-radius: var(--collabable-radius-md);
    overflow: hidden;
    background: #f5f5f5;
}

.collabable-single-profile__video-card.is-expanded {
    cursor: default;
    grid-column: 1 / -1;
    background: #f0f0f0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    padding: 8px;
    position: relative;
}

/* Close button for expanded video/clip embeds */
.collabable-video-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 10;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid #ddd;
    border-radius: 50%;
    background: #fff;
    color: #000;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.collabable-video-close:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.collabable-single-profile__video-card.is-expanded:hover {
    transform: none;
    box-shadow: none;
}

/* Constrain the embed inside an expanded card */
.collabable-single-profile__video-card.is-expanded .collabable-video-embed {
    width: 100%;
    margin: 0 auto;
}

/* Vertical videos (Instagram, TikTok) should not be too wide when expanded */
.collabable-single-profile__video-card.is-expanded .collabable-video-embed--instagram,
.collabable-single-profile__video-card.is-expanded .collabable-video-embed--tiktok {
    max-width: 360px;
}

.collabable-single-profile__video-thumb {
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: #f0f0f0;
    border-radius: var(--collabable-radius-md) var(--collabable-radius-md) 0 0;
}

/* Platform-branded gradient backgrounds for thumbnails */
.collabable-single-profile__video-thumb--youtube {
    background: linear-gradient(135deg, #A60000, #CF0000);
}

.collabable-single-profile__video-thumb--instagram {
    background: linear-gradient(135deg, #833ab4, #fd1d1d, #fcb045);
}

.collabable-single-profile__video-thumb--facebook {
    background: linear-gradient(135deg, #1877F2, #42a5f5);
}

.collabable-single-profile__video-thumb--tiktok {
    background: linear-gradient(135deg, #010101, #25f4ee, #fe2c55);
}

.collabable-single-profile__video-thumb--spotify {
    background: linear-gradient(135deg, #1DB954, #191414);
}

.collabable-single-profile__video-thumb--vimeo {
    background: linear-gradient(135deg, #1ab7ea, #162221);
}

.collabable-single-profile__video-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.collabable-single-profile__video-thumb-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #999;
}

.collabable-single-profile__video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #CF0000;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: #fff;
}

.collabable-single-profile__video-platform {
    position: absolute;
    bottom: 8px;
    right: 8px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    background: #333;
    border-radius: var(--collabable-radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.collabable-single-profile__video-title {
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 500;
    color: #000;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Video embed containers */
.collabable-video-embed {
    position: relative;
    width: 100%;
    max-width: 100%;
    border-radius: var(--collabable-radius-md);
    overflow: hidden;
}

/* Aspect ratio containers - the iframe fills these */
.collabable-video-embed__ratio {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: var(--collabable-radius-md);
}

.collabable-video-embed__ratio iframe,
.collabable-video-embed__ratio video,
.collabable-video-embed__ratio embed,
.collabable-video-embed__ratio object {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* 16:9 - YouTube, Vimeo, Facebook */
.collabable-video-embed__ratio--16x9 {
    padding-bottom: 56.25%; /* 9/16 */
}

/* 9:16 - Instagram Reels, TikTok (vertical) */
.collabable-video-embed__ratio--9x16 {
    padding-bottom: 177.78%; /* 16/9 */
    max-height: 580px;
}

/* 4:5 - Instagram posts (nearly square vertical) */
.collabable-video-embed__ratio--4x5 {
    padding-bottom: 125%; /* 5/4 */
    max-height: 580px;
}

/* 1:1 - Square */
.collabable-video-embed__ratio--1x1 {
    padding-bottom: 100%;
}

/* Platform-specific max-widths to prevent oversized players */
.collabable-video-embed--youtube,
.collabable-video-embed--vimeo,
.collabable-video-embed--facebook {
    max-width: 640px;
}

.collabable-video-embed--instagram {
    max-width: 400px;
}

/* External link card (Instagram, etc. that block embeds) */
.collabable-video-embed--external {
    max-width: 100%;
}

.collabable-video-embed__external-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    background: #CF0000;
    color: #fff;
    border-radius: var(--collabable-radius-md);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
}

.collabable-video-embed__external-link svg:last-child {
    margin-left: auto;
    opacity: 0.8;
}

.collabable-video-embed--tiktok {
    max-width: 325px;
}

.collabable-video-embed--spotify {
    max-width: 400px;
}

/* Spotify has its own sizing via oEmbed, don't force ratio */
.collabable-video-embed--spotify iframe {
    width: 100%;
    min-height: 152px;
    max-height: 352px;
    border: none;
    border-radius: var(--collabable-radius-md);
}

/* TikTok oEmbed uses blockquote, not iframe */
.collabable-video-embed--tiktok blockquote {
    margin: 0;
    max-width: 325px;
}

/* Facebook Reels = vertical, same max-width as Instagram */
.collabable-video-embed--facebook-reel {
    max-width: 400px;
}

/* Fallback: any direct iframe without ratio wrapper */
.collabable-video-embed > iframe,
.collabable-video-embed > video {
    width: 100%;
    max-height: 580px;
    border: none;
    border-radius: var(--collabable-radius-md);
}

/* oEmbed wrappers that WordPress generates (wp-block-embed, etc.) */
.collabable-video-embed .wp-block-embed__wrapper,
.collabable-video-embed .wp-embed-responsive .wp-block-embed__wrapper {
    position: relative;
    padding-bottom: 56.25%;
}

.collabable-video-embed .wp-block-embed__wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Empty tab state */
.collabable-single-profile__tab-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
    color: #000;
}

.collabable-single-profile__tab-empty svg {
    margin-bottom: 16px;
    opacity: 0.3;
}

.collabable-single-profile__tab-empty p {
    font-size: 15px;
    margin: 0;
}

/* Loading state */
.collabable-single-profile__tab-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    color: #000;
}

.collabable-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--collabable-border);
    border-top-color: var(--collabable-primary);
    border-radius: 50%;
    animation: collabable-spin 0.8s linear infinite;
    margin-bottom: 12px;
}

@keyframes collabable-spin {
    to { transform: rotate(360deg); }
}

.collabable-single-profile__tab-loading p {
    font-size: 14px;
    margin: 0;
}

/* ==========================================================================
   FEATURED CLIPS (Public Profile)
   ========================================================================== */

.collabable-featured-clips {
    background: var(--collabable-bg);
    border: 1px solid var(--collabable-border);
    border-radius: var(--collabable-radius-lg);
    padding: 24px;
    margin-bottom: 24px;
}

.collabable-featured-clips__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.collabable-featured-clips__title {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    color: #000;
    display: flex;
    align-items: center;
    gap: 8px;
}

.collabable-featured-clips__premium-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: #CF0000;
    color: #fff;
    border-radius: var(--collabable-radius-full);
}

.collabable-featured-clips__count {
    font-size: 13px;
    color: #000;
}

/* Featured Clips Grid */
.collabable-featured-clips__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

/* Individual Clip Card */
.collabable-featured-clip-card {
    border-radius: var(--collabable-radius-md);
    overflow: hidden;
    background: #f5f5f5;
}

.collabable-featured-clip-card__media {
    position: relative;
    width: 100%;
}

.collabable-featured-clip-card__player {
    width: 100%;
    display: block;
    border-radius: 0;
}

/* Audio wrap styling */
.collabable-featured-clip-card__audio-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px 16px 16px;
    background: #f0f0f0;
}

.collabable-featured-clip-card__audio-icon {
    color: #999;
    margin-bottom: 16px;
}

.collabable-featured-clip-card__audio-wrap audio {
    width: 100%;
}

/* Embed preview (for URL clips) */
.collabable-featured-clip-card__embed-preview {
    cursor: pointer;
}

.collabable-featured-clip-card__embed-preview.is-expanded {
    cursor: default;
    position: relative;
}

.collabable-featured-clip-card__thumb {
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: var(--collabable-bg-muted);
}

.collabable-featured-clip-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.collabable-featured-clip-card__thumb-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 140px;
}

/* Platform-specific gradient backgrounds for thumbnails */
.collabable-featured-clip-card__thumb--youtube {
    background: linear-gradient(135deg, #CF0000 0%, #A60000 100%);
}

.collabable-featured-clip-card__thumb--vimeo {
    background: linear-gradient(135deg, #1ab7ea 0%, #0096d5 100%);
}

.collabable-featured-clip-card__thumb--spotify {
    background: linear-gradient(135deg, #1db954 0%, #1ed760 100%);
}

.collabable-featured-clip-card__thumb--tiktok {
    background: linear-gradient(135deg, #000000 0%, #25f4ee 50%, #fe2c55 100%);
}

.collabable-featured-clip-card__thumb--instagram {
    background: linear-gradient(135deg, #833ab4 0%, #fd1d1d 50%, #fcb045 100%);
}

.collabable-featured-clip-card__thumb--facebook {
    background: linear-gradient(135deg, #1877f2 0%, #42b72a 100%);
}

/* Play button overlay */
.collabable-featured-clip-card__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #CF0000;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    color: #fff;
}

/* Platform badge */
.collabable-featured-clip-card__platform {
    position: absolute;
    bottom: 8px;
    right: 8px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    background: #333;
    border-radius: var(--collabable-radius-sm);
}

/* Clip title */
.collabable-featured-clip-card__title {
    padding: 10px 12px;
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    color: #000;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Empty state */
.collabable-featured-clips__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
    color: #000;
}

.collabable-featured-clips__empty svg {
    margin-bottom: 12px;
    opacity: 0.4;
}

.collabable-featured-clips__empty p {
    margin: 0 0 16px;
    font-size: 14px;
}

.collabable-featured-clips__empty--locked svg {
    opacity: 0.3;
}

/* Settings page: Featured Clips management */
.cb-featured-clips-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cb-featured-clips-list__empty {
    color: #000;
    font-size: 14px;
    font-style: italic;
    margin: 8px 0;
}

.cb-featured-clip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

.cb-featured-clip__info {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

.cb-featured-clip__type-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    background: #e5e7eb;
    color: #000;
    border-radius: 999px;
    white-space: nowrap;
    flex-shrink: 0;
}

.cb-featured-clip__label {
    font-size: 13px;
    color: #000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* Add Clip Form */
.cb-add-clip-form__type-toggle {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.cb-clip-type-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}

.cb-clip-type-btn.active {
    background: #CF0000;
    color: #fff;
    border-color: #CF0000;
}

.cb-add-clip-form__fields {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cb-add-clip-form__field-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Premium badge in settings */
.cb-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 999px;
    vertical-align: middle;
    margin-left: 8px;
}

.cb-badge--premium {
    background: #CF0000;
    color: #fff;
}

/* Upgrade notice in settings */
.cb-notice--upgrade {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fef5f5;
    border: 1px solid #e0e0e0;
    color: #333;
}

.cb-notice--upgrade svg {
    flex-shrink: 0;
}

.cb-notice--upgrade a {
    color: #CF0000;
    font-weight: 600;
    text-decoration: underline;
}

/* My Account: Published clips carousel enhancements */
.clip-thumbnail {
    position: relative;
    aspect-ratio: 16/9;
    border-radius: 8px;
    overflow: hidden;
    background: #f3f4f6;
}

.clip-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.clip-thumbnail__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #9ca3af;
}

.clip-thumbnail__overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    opacity: 0;
}

.clip-title {
    display: block;
    font-size: 12px;
    color: #000;
    margin-top: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.clips-upgrade-notice,
.clips-empty-notice {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    width: 100%;
}

.clips-upgrade-notice p,
.clips-empty-notice p {
    margin: 0;
    font-size: 13px;
    color: #000;
    flex: 1;
}

.btn-upgrade-sm,
.btn-add-clips {
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    border: 1px solid;
}

.btn-upgrade-sm {
    background: #CF0000;
    color: #fff;
    border-color: #CF0000;
}

.btn-add-clips {
    background: #fff;
    color: #000;
    border-color: #d1d5db;
}


/* ==========================================================================
   RESPONSIVE UTILITIES
   ========================================================================== */

@media (max-width: 900px) {
    .collabable-featured-clips__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .collabable-single-profile__tab-grid--videos {
        grid-template-columns: repeat(2, 1fr);
    }

    .collabable-video-embed--youtube,
    .collabable-video-embed--vimeo,
    .collabable-video-embed--facebook {
        max-width: 100%;
    }

    .collabable-video-embed--instagram {
        max-width: 340px;
    }

    .collabable-video-embed--tiktok {
        max-width: 280px;
    }

    /* Cap vertical embeds height on tablet */
    .collabable-video-embed__ratio--9x16 {
        max-height: 480px;
    }

    .collabable-video-embed__ratio--4x5 {
        max-height: 480px;
    }
}

@media (max-width: 600px) {
    .collabable-single-profile {
        padding: 16px 0;
    }

    .collabable-single-profile__name {
        font-size: 22px;
    }

    .collabable-single-profile__bio-section,
    .collabable-single-profile__collab-section,
    .collabable-single-profile__gallery-section,
    .collabable-featured-clips {
        padding: 16px;
    }

    .collabable-featured-clips__grid {
        grid-template-columns: 1fr;
    }

    .collabable-featured-clips__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .collabable-single-profile__tabs-section {
        padding: 0 16px;
    }

    .collabable-single-profile__tab {
        padding: 12px 14px;
        font-size: 13px;
    }

    .collabable-single-profile__tab-grid--videos {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   PROFILE HEADER ACTIONS (share button)
   ========================================================================== */

.collabable-single-profile__header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cb-share-wrap {
    position: relative;
}

.cb-share-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #ddd;
    background: #fff;
    cursor: pointer;
    color: #000;
}

.cb-share-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    min-width: 180px;
    z-index: 100;
    padding: 6px;
}

.cb-share-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    background: none;
    border: none;
    font-size: 14px;
    color: #000;
    cursor: pointer;
    border-radius: 6px;
    text-align: left;
}

/* Gallery item hover — zoom effect handled on inner img (line ~790) */
.collabable-single-profile__gallery-item {
    cursor: pointer;
}

/* ══════════════════════════════════════════════════
   STUDIO PROMO BANNER (single page hero)
   ══════════════════════════════════════════════════ */
.collabable-single-studio__promo-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 8px 0 4px;
}

.promo-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #fff !important;
}
.promo-badge--early_bird { background: #27ae60; }
.promo-badge--last_minute { background: #CF0000; }
.promo-badge--custom { background: #999; }

.promo-condition {
    font-size: 0.8rem;
    font-weight: 500;
    color: #333;
    font-style: italic;
}

.promo-expires {
    font-size: 0.8rem;
    color: #666;
}

/* Booking panel promo row */
.cbk-price-summary__row--promo {
    border-top: 1px dashed #e0e0e0;
    padding-top: 6px;
    margin-top: 4px;
}
.cbk-price-summary__label--promo {
    color: #27ae60;
    font-weight: 600;
}
.cbk-price-summary__value--promo {
    color: #27ae60;
    font-weight: 600;
}

/* === Profile Single – Enriched Blocks (v5.7.0) === */

/* ── Identity Grid ─────────────────────────────────────────────────────── */

.collabable-single-profile__identity-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
    background: #f7f7f8;
    border-radius: 12px;
    padding: 1.5rem;
    margin-top: 1.5rem;
}

.collabable-single-profile__identity-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.collabable-single-profile__identity-icon {
    color: #000;
    flex-shrink: 0;
}

.collabable-single-profile__identity-label {
    font-size: 11px;
    color: #000;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.collabable-single-profile__identity-value {
    font-size: 13px;
    color: #000;
    font-weight: 500;
}

/* ── Role Blocks Container ─────────────────────────────────────────────── */

.collabable-single-profile__role-blocks {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* ── Role Switcher (Both profiles) ─────────────────────────────────────── */

.collabable-single-profile__role-switcher {
    margin-top: 2rem;
}

.collabable-single-profile__role-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid #ddd;
    margin-bottom: 1.5rem;
}

.collabable-single-profile__role-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    color: #000;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.collabable-single-profile__role-tab--active {
    color: #000;
    border-bottom-color: #CF0000;
}

.collabable-single-profile__role-tab svg {
    flex-shrink: 0;
}

.collabable-single-profile__role-panel {
    display: none;
}

.collabable-single-profile__role-panel--active {
    display: block;
}

/* ── Podcast / Show Block ──────────────────────────────────────────────── */

.collabable-single-profile__podcast {
    background: #f7f7f8;
    border-radius: 12px;
    padding: 1.5rem;
    margin-top: 1.5rem;
}

.collabable-single-profile__podcast-inner {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

.collabable-single-profile__podcast-cover {
    flex-shrink: 0;
    width: 200px;
    height: 200px;
    border-radius: 12px;
    overflow: hidden;
}

.collabable-single-profile__podcast-cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.collabable-single-profile__podcast-cover-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e8e8eb;
    color: #000;
}

.collabable-single-profile__podcast-details {
    flex: 1;
    min-width: 0;
}

.collabable-single-profile__podcast-name {
    font-size: 16px;
    font-weight: 700;
    color: #000;
    margin: 0 0 4px;
}

.collabable-single-profile__podcast-slogan {
    font-size: 13px;
    color: #000;
    font-style: italic;
    margin: 0 0 12px;
}

.collabable-single-profile__podcast-desc {
    font-size: 13px;
    color: #000;
    line-height: 1.5;
    margin: 0 0 12px;
}

.collabable-single-profile__podcast-desc-long {
    font-size: 13px;
    color: #000;
    line-height: 1.5;
    margin: 0 0 12px;
}

.collabable-single-profile__podcast-readmore {
    background: none;
    border: none;
    color: #CF0000;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    padding: 0;
    margin-top: 4px;
}

.collabable-single-profile__podcast-readmore:hover {
    text-decoration: underline;
}

/* Podcast badges row */
.collabable-single-profile__podcast-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.collabable-single-profile__podcast-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f0f0f2;
    color: #000;
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 12px;
}

.collabable-single-profile__podcast-audience-country {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #000;
    margin: 0 0 12px;
}

.collabable-single-profile__podcast-audience-country svg {
    flex-shrink: 0;
}

/* Taxonomy badges */
.collabable-single-profile__podcast-taxonomies {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.collabable-single-profile__podcast-tax-badge {
    background: #f0f0f2;
    color: #000;
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 12px;
}

.collabable-single-profile__podcast-tax-badge--platform {
    background: #fef5f5;
    color: #CF0000;
}

.collabable-single-profile__podcast-tax-badge--format {
    background: #f0f0f0;
    color: #333;
}

/* Accepted formats */
.collabable-single-profile__podcast-formats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.collabable-single-profile__podcast-formats-label {
    font-size: 11px;
    color: #000;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.collabable-single-profile__podcast-format-tag {
    background: #f0f0f2;
    color: #000;
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 12px;
}

/* ── Interview & Recording Block ───────────────────────────────────────── */

.collabable-single-profile__interview {
    background: #f7f7f8;
    border-radius: 12px;
    padding: 1.5rem;
    margin-top: 1.5rem;
}

.collabable-single-profile__interview-title {
    font-size: 15px;
    font-weight: 700;
    color: #000;
    margin: 0 0 1rem;
}

.collabable-single-profile__interview-styles {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 1rem;
}

.collabable-single-profile__interview-style-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f0f0f2;
    color: #000;
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 12px;
}

.collabable-single-profile__interview-recording {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #000;
    margin-bottom: 1rem;
}

.collabable-single-profile__interview-recording svg {
    flex-shrink: 0;
    color: #000;
}

.collabable-single-profile__interview-badges {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.collabable-single-profile__interview-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #000;
}

.collabable-single-profile__interview-badge--positive svg {
    color: #4CAF50;
}

.collabable-single-profile__interview-badge--info svg {
    color: #000;
}

/* ── Seeking Block (Host: "Looking for Guests Who...") ─────────────────── */

.collabable-single-profile__seeking {
    background: #fef5f5;
    border-radius: 12px;
    padding: 1.5rem;
    margin-top: 1.5rem;
    border-left: 3px solid #CF0000;
}

.collabable-single-profile__seeking-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    color: #000;
    margin: 0 0 1rem;
}

.collabable-single-profile__seeking-title svg {
    flex-shrink: 0;
    color: #CF0000;
}

.collabable-single-profile__seeking-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.collabable-single-profile__seeking-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.collabable-single-profile__seeking-label {
    font-size: 11px;
    color: #000;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}

.collabable-single-profile__seeking-text {
    font-size: 13px;
    color: #000;
    line-height: 1.5;
    margin: 0;
}

.collabable-single-profile__seeking-badge {
    display: inline-block;
    background: #f0f0f2;
    color: #000;
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 12px;
}

.collabable-single-profile__seeking-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.collabable-single-profile__seeking-tag {
    background: #f0f0f2;
    color: #000;
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 12px;
}

/* ── Production & Workflow Block ───────────────────────────────────────── */

.collabable-single-profile__workflow {
    background: #f7f7f8;
    border-radius: 12px;
    padding: 1.5rem;
    margin-top: 1.5rem;
}

.collabable-single-profile__workflow-title {
    font-size: 15px;
    font-weight: 700;
    color: #000;
    margin: 0 0 1rem;
}

.collabable-single-profile__workflow-section {
    margin-bottom: 1rem;
}

.collabable-single-profile__workflow-label {
    display: block;
    font-size: 11px;
    color: #000;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    margin-bottom: 8px;
}

.collabable-single-profile__workflow-checklist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.collabable-single-profile__workflow-checklist li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #000;
}

.collabable-single-profile__workflow-checklist li svg {
    flex-shrink: 0;
    color: #4CAF50;
}

.collabable-single-profile__workflow-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #000;
}

.collabable-single-profile__workflow-item svg {
    flex-shrink: 0;
    color: #000;
}

.collabable-single-profile__workflow-indicators {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 1rem;
}

.collabable-single-profile__workflow-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #000;
}

.collabable-single-profile__workflow-indicator svg {
    flex-shrink: 0;
    color: #000;
}

/* Forbidden topics */
.collabable-single-profile__workflow-forbidden {
    background: #fff8f0;
    border-left: 3px solid #FF9800;
    border-radius: 8px;
    padding: 1rem;
    margin-top: 1rem;
}

.collabable-single-profile__workflow-forbidden-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: #FF9800;
    margin-bottom: 6px;
}

.collabable-single-profile__workflow-forbidden-label svg {
    flex-shrink: 0;
}

.collabable-single-profile__workflow-forbidden-text {
    font-size: 13px;
    color: #000;
    line-height: 1.5;
    margin: 0;
}

/* ── Missing element styles (tagline, company, press, workflow text) ──── */

.collabable-single-profile__tagline {
    color: #000;
    font-size: 13px;
    margin: 4px 0 0;
}

.collabable-single-profile__company-badge {
    color: #000;
}

.collabable-single-profile__press-references {
    margin-top: 1rem;
}

.collabable-single-profile__press-references-title {
    color: #000;
    font-weight: 700;
    font-size: 12px;
    margin-bottom: 4px;
}

.collabable-single-profile__press-references-content {
    color: #000;
    font-size: 13px;
    line-height: 1.5;
}

.collabable-single-profile__audio-sample {
    margin-top: 0.5rem;
}

.collabable-single-profile__audio-sample-link {
    color: #000;
}

.collabable-single-profile__workflow-text {
    font-size: 13px;
    color: #000;
    line-height: 1.5;
    margin: 0;
}

/* ── Guest: Expertise & Positioning Block ──────────────────────────────── */

.collabable-single-profile__expertise {
    background: #f7f7f8;
    border-radius: 12px;
    padding: 1.5rem;
    margin-top: 1.5rem;
}

.collabable-single-profile__expertise-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    color: #000;
    margin: 0 0 1rem;
}

.collabable-single-profile__expertise-title svg {
    flex-shrink: 0;
    color: #000;
}

.collabable-single-profile__expertise-header {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.collabable-single-profile__expertise-job {
    font-size: 13px;
    font-weight: 600;
    color: #000;
}

.collabable-single-profile__expertise-status-badge {
    background: #fef5f5;
    color: #CF0000;
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 600;
}

.collabable-single-profile__expertise-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.collabable-single-profile__expertise-line {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #000;
    margin: 0;
}

.collabable-single-profile__expertise-line svg {
    flex-shrink: 0;
    color: #000;
}

.collabable-single-profile__expertise-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.collabable-single-profile__expertise-label {
    font-size: 11px;
    color: #000;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.collabable-single-profile__expertise-text {
    font-size: 13px;
    color: #000;
    line-height: 1.5;
}

.collabable-single-profile__expertise-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.collabable-single-profile__expertise-tag {
    background: #f0f0f2;
    color: #000;
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 12px;
}

/* ── Guest: Track Record Block ─────────────────────────────────────────── */

.collabable-single-profile__portfolio {
    background: #f7f7f8;
    border-radius: 12px;
    padding: 1.5rem;
    margin-top: 1.5rem;
}

.collabable-single-profile__portfolio-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    color: #000;
    margin: 0 0 1rem;
}

.collabable-single-profile__portfolio-title svg {
    flex-shrink: 0;
    color: #4CAF50;
}

.collabable-single-profile__portfolio-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.collabable-single-profile__portfolio-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.collabable-single-profile__portfolio-item-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #000;
}

.collabable-single-profile__portfolio-item-header svg {
    flex-shrink: 0;
    color: #000;
}

.collabable-single-profile__portfolio-item-text {
    font-size: 13px;
    color: #000;
    line-height: 1.5;
    padding-left: 24px;
}

/* Best interview link */
.collabable-single-profile__portfolio-interview-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #CF0000;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    padding-left: 24px;
}

.collabable-single-profile__portfolio-interview-link:hover {
    color: #A60000;
    text-decoration: underline;
}

.collabable-single-profile__portfolio-platform-icon {
    display: inline-flex;
}

.collabable-single-profile__portfolio-platform-icon svg {
    width: 18px;
    height: 18px;
}

/* Testimonials */
.collabable-single-profile__portfolio-testimonials {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid #e5e5e5;
}

.collabable-single-profile__portfolio-quote {
    font-size: 13px;
    color: #000;
    line-height: 1.6;
    font-style: italic;
    padding-left: 24px;
    margin: 0;
    border-left: 3px solid #CF0000;
    background: #f9f9fa;
}

/* ── Guest: Availability & Logistics Block ─────────────────────────────── */

.collabable-single-profile__logistics {
    background: #f7f7f8;
    border-radius: 12px;
    padding: 1.5rem;
    margin-top: 1.5rem;
}

.collabable-single-profile__logistics-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    color: #000;
    margin: 0 0 1rem;
}

.collabable-single-profile__logistics-title svg {
    flex-shrink: 0;
    color: #000;
}

.collabable-single-profile__logistics-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.collabable-single-profile__logistics-line {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #000;
    margin: 0;
}

.collabable-single-profile__logistics-line svg {
    flex-shrink: 0;
    color: #000;
}

.collabable-single-profile__logistics-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.collabable-single-profile__logistics-label {
    font-size: 11px;
    color: #000;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.collabable-single-profile__logistics-text {
    font-size: 13px;
    color: #000;
    line-height: 1.5;
}

.collabable-single-profile__logistics-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.collabable-single-profile__logistics-tag {
    background: #f0f0f2;
    color: #000;
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 12px;
}

/* Readiness checks */
.collabable-single-profile__logistics-readiness {
    margin-top: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid #e5e5e5;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.collabable-single-profile__logistics-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #000;
    margin: 0;
}

.collabable-single-profile__logistics-check svg {
    flex-shrink: 0;
}

/* ── Guest: "What I'm Looking For" Block ───────────────────────────────── */

.collabable-single-profile__guest-seeking {
    background: #fef5f5;
    border-radius: 12px;
    padding: 1.5rem;
    margin-top: 1.5rem;
    border-left: 3px solid #CF0000;
}

.collabable-single-profile__guest-seeking-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    color: #000;
    margin: 0 0 1rem;
}

.collabable-single-profile__guest-seeking-title svg {
    flex-shrink: 0;
    color: #CF0000;
}

.collabable-single-profile__guest-seeking-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.collabable-single-profile__guest-seeking-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.collabable-single-profile__guest-seeking-label {
    font-size: 11px;
    color: #000;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}

.collabable-single-profile__guest-seeking-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.collabable-single-profile__guest-seeking-tag {
    background: #f0f0f2;
    color: #000;
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 12px;
}

.collabable-single-profile__guest-seeking-text {
    font-size: 13px;
    color: #000;
    line-height: 1.5;
}

/* Forbidden topics warning */
.collabable-single-profile__guest-seeking-warning {
    background: #fff8f0;
    border-left: 3px solid #FF9800;
    border-radius: 8px;
    padding: 1rem;
}

.collabable-single-profile__guest-seeking-warning-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: #FF9800;
    margin-bottom: 6px;
}

.collabable-single-profile__guest-seeking-warning-header svg {
    flex-shrink: 0;
}

.collabable-single-profile__guest-seeking-warning-text {
    font-size: 13px;
    color: #000;
    line-height: 1.5;
}

.collabable-single-profile__guest-seeking-line {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #000;
    margin: 0;
}

.collabable-single-profile__guest-seeking-line svg {
    flex-shrink: 0;
    color: #000;
}

.collabable-single-profile__guest-seeking-collab-badge {
    background: #f0f0f2;
    color: #000;
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
}

/* ── Enriched Blocks – Mobile Responsive ───────────────────────────────── */

@media (max-width: 768px) {
    .collabable-single-profile__identity-grid {
        grid-template-columns: repeat(2, 1fr);
        padding: 1rem;
    }

    .collabable-single-profile__podcast-inner {
        flex-direction: column;
    }

    .collabable-single-profile__podcast-cover {
        width: 100%;
        height: 200px;
    }

    .collabable-single-profile__role-tab {
        padding: 10px 16px;
        font-size: 12px;
    }

    .collabable-single-profile__podcast,
    .collabable-single-profile__interview,
    .collabable-single-profile__seeking,
    .collabable-single-profile__workflow,
    .collabable-single-profile__expertise,
    .collabable-single-profile__portfolio,
    .collabable-single-profile__logistics,
    .collabable-single-profile__guest-seeking {
        padding: 1rem;
    }
}

/* ── Conditional Profile Badges (v5.9.0) ──────────────────────────────── */

.collabable-single-profile__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.collabable-single-profile__badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--badge-color, #333);
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
    white-space: nowrap;
}

.collabable-single-profile__badge svg {
    flex-shrink: 0;
    color: var(--badge-color, #333);
}

/* ── Role Blocks 2-Column Grid (v5.9.0) ──────────────────────────────── */

.collabable-single-profile__role-blocks--grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

/* Each block should fill its grid cell */
.collabable-single-profile__role-blocks--grid > * {
    min-width: 0;
}

@media (max-width: 900px) {
    .collabable-single-profile__role-blocks--grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .collabable-single-profile__badges {
        gap: 4px;
    }

    .collabable-single-profile__badge {
        font-size: 0.7rem;
        padding: 2px 8px;
    }
}

/* ==========================================================================
   Public Trust Metrics (Phase 1 — v5.15.0)
   ========================================================================== */

.cb-public-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.cb-public-metric {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 500;
    color: #27ae60;
    background: #e8f5e9;
    padding: 3px 10px;
    border-radius: 20px;
    white-space: nowrap;
}

.cb-public-metric svg {
    flex-shrink: 0;
    stroke: #27ae60;
}

.cb-public-metrics--profile {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #e0e0e0;
}

.cb-public-metrics--profile .cb-public-metric {
    font-size: 13px;
    padding: 4px 12px;
}

/* ==========================================================================
   INSTANT BOOK BADGE
   ========================================================================== */

.collabable-instant-book-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: #27ae60;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin-left: 6px;
    vertical-align: middle;
}

.collabable-instant-book-badge svg {
    flex-shrink: 0;
}

/* ==========================================================================
   CANCELLATION TIERS VISUAL (v5.21.0)
   ========================================================================== */

.collabable-cancel-tiers {
    padding: 16px;
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    margin-top: 12px;
    color: #333 !important;
}

/* Dark variant (inside booking card) */
.collabable-cancel-tiers--dark {
    background: #2a2a2a;
    border-color: #444;
    color: #fff !important;
    margin-top: 0;
}

.collabable-cancel-tiers--dark .collabable-cancel-tiers__title {
    color: #fff !important;
}

.collabable-cancel-tiers--dark .collabable-cancel-tiers__title svg {
    color: #fff !important;
    stroke: #fff !important;
}

.collabable-cancel-tiers--dark .collabable-cancel-tiers__grace {
    background: rgba(39,174,96,0.15);
    color: #27ae60 !important;
}

.collabable-cancel-tiers--dark .collabable-cancel-tier__bar {
    background: #444;
}

.collabable-cancel-tiers--dark .collabable-cancel-tier__refund {
    color: #fff !important;
}

.collabable-cancel-tiers--dark .collabable-cancel-tier__time {
    color: rgba(255,255,255,0.5) !important;
}

.collabable-cancel-tiers--dark .collabable-cancel-tiers__desc {
    color: rgba(255,255,255,0.6) !important;
}

.collabable-cancel-tiers__title {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #111 !important;
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0 0 10px;
}

.collabable-cancel-tiers__title svg {
    color: #111 !important;
    stroke: #111 !important;
}

.collabable-cancel-tiers__grace {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #27ae60 !important;
    font-size: 0.8rem;
    margin-bottom: 12px;
    padding: 6px 10px;
    background: #e8f5e9;
    border-radius: 6px;
}

.collabable-cancel-tiers__timeline {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.collabable-cancel-tier {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.collabable-cancel-tier__bar {
    height: 6px;
    background: #e0e0e0;
    border-radius: 3px;
    overflow: hidden;
}

.collabable-cancel-tier__fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.tier--green .collabable-cancel-tier__fill { background: #27ae60; }
.tier--orange .collabable-cancel-tier__fill { background: #e67e22; }
.tier--red .collabable-cancel-tier__fill { background: #CF0000; }

.collabable-cancel-tier__info {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
}

.collabable-cancel-tier__refund {
    color: #222 !important;
    font-weight: 500;
}

.collabable-cancel-tier__time {
    color: #666 !important;
}

.collabable-cancel-tiers__desc {
    color: #666 !important;
    font-size: 0.85rem;
    margin: 0;
}

/* ==========================================================================
   PUBLIC AVAILABILITY CALENDAR
   ========================================================================== */

.collabable-public-calendar {
    margin-top: 16px;
    padding: 16px;
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    color: #333 !important;
}

/* Dark variant (inside booking card) */
.collabable-public-calendar--dark {
    background: #2a2a2a;
    border-color: #444;
    color: #fff !important;
    margin-top: 0;
}

.collabable-public-calendar--dark .collabable-public-calendar__title {
    color: #fff !important;
}

.collabable-public-calendar--dark .collabable-public-calendar__title svg {
    color: #fff !important;
    stroke: #fff !important;
}

.collabable-public-calendar--dark .collabable-public-calendar__prev,
.collabable-public-calendar--dark .collabable-public-calendar__next {
    background: #333;
    border-color: #555;
    color: #fff !important;
}

.collabable-public-calendar--dark .collabable-public-calendar__month {
    color: #fff !important;
}

.collabable-public-calendar--dark .collabable-public-calendar__weekdays span {
    color: rgba(255,255,255,0.5) !important;
}

.collabable-public-calendar--dark .collabable-public-calendar__day {
    color: rgba(255,255,255,0.5) !important;
}

.collabable-public-calendar--dark .collabable-public-calendar__day--available {
    color: #27ae60 !important;
    background: rgba(39,174,96,0.15);
}

.collabable-public-calendar--dark .collabable-public-calendar__day--unavailable {
    color: rgba(255,255,255,0.25) !important;
    background: rgba(255,255,255,0.05);
}

.collabable-public-calendar--dark .collabable-public-calendar__loading {
    color: rgba(255,255,255,0.3);
}

.collabable-public-calendar--dark .collabable-public-calendar__loading::after {
    border-color: #444;
    border-top-color: #CF0000;
}

.collabable-public-calendar--dark .collabable-public-calendar__legend-item {
    color: rgba(255,255,255,0.5) !important;
}

.collabable-public-calendar--dark .collabable-public-calendar__legend-item--unavailable::before {
    background: rgba(255,255,255,0.2);
}

/* Selected date on public calendar */
.collabable-public-calendar__day--selected {
    background: #CF0000 !important;
    color: #fff !important;
    border-radius: 50%;
    font-weight: 700;
}

.collabable-public-calendar--dark .collabable-public-calendar__day--selected {
    background: #CF0000 !important;
    color: #fff !important;
}

/* Selected date reminder (below calendar) */
.collabable-public-calendar__selected {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    margin-top: 12px;
    background: rgba(207, 0, 0, 0.1);
    border: 1px solid rgba(207, 0, 0, 0.25);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #fff;
}

.collabable-public-calendar__selected svg {
    flex-shrink: 0;
    stroke: #CF0000;
}

.collabable-public-calendar__title {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #111 !important;
    font-size: 0.95rem;
    margin: 0 0 12px;
    font-weight: 600;
}

.collabable-public-calendar__title svg {
    color: #111 !important;
    stroke: #111 !important;
}

.collabable-public-calendar__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.collabable-public-calendar__prev,
.collabable-public-calendar__next {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    color: #111 !important;
    width: 32px;
    height: 32px;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.collabable-public-calendar__prev:disabled,
.collabable-public-calendar__next:disabled {
    opacity: 0.3;
    cursor: default;
}

.collabable-public-calendar__month {
    color: #111 !important;
    font-weight: 600;
    font-size: 0.95rem;
}

.collabable-public-calendar__weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: 4px;
}

.collabable-public-calendar__weekdays span {
    text-align: center;
    color: #666 !important;
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    padding: 4px 0;
}

.collabable-public-calendar__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    min-height: 180px;
}

.collabable-public-calendar__day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    border-radius: 6px;
    color: #666 !important;
    position: relative;
}

.collabable-public-calendar__day--empty {
    background: none;
}

.collabable-public-calendar__day--available {
    color: #27ae60 !important;
    font-weight: 600;
    background: #e8f5e9;
    cursor: default;
}

.collabable-public-calendar__day--unavailable {
    color: #bbb !important;
    background: #eee;
}

.collabable-public-calendar__day--today {
    border: 1px solid var(--account-primary, #CF0000);
}

.collabable-public-calendar__loading {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    color: #999;
}

.collabable-public-calendar__loading::after {
    content: '';
    width: 24px;
    height: 24px;
    border: 2px solid #e0e0e0;
    border-top-color: #CF0000;
    border-radius: 50%;
    animation: pub-cal-spin 0.8s linear infinite;
}

@keyframes pub-cal-spin {
    to { transform: rotate(360deg); }
}

.collabable-public-calendar__legend {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-top: 10px;
}

.collabable-public-calendar__legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.7rem;
    color: #555 !important;
}

.collabable-public-calendar__legend-item::before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 3px;
    display: block;
}

.collabable-public-calendar__legend-item--available::before {
    background: #27ae60;
}

.collabable-public-calendar__legend-item--unavailable::before {
    background: #e0e0e0;
}

/* Responsive */
@media (max-width: 480px) {
    .collabable-public-calendar {
        padding: 12px;
    }

    .collabable-public-calendar__day {
        font-size: 0.7rem;
    }
}

/* =========================================================================
   BLUR — Non-logged visitors see blurred name, photo, bio, links
   ========================================================================= */

/* --- Featured / List card: photo --- */
.collabable-profile-card.is-blurred .collabable-profile-card__avatar img,
.collabable-profile-card.is-blurred .collabable-profile-card__avatar--placeholder,
.collabable-profile-card.is-blurred .collabable-profile-card__image {
    filter: blur(10px);
    -webkit-filter: blur(10px);
}

/* --- Featured / List card: name --- */
.collabable-profile-card.is-blurred .collabable-profile-card__name {
    filter: blur(8px);
    -webkit-filter: blur(8px);
    user-select: none;
    -webkit-user-select: none;
}

/* --- Featured / List card: bio + links --- */
.collabable-profile-card.is-blurred .collabable-profile-card__bio-text,
.collabable-profile-card.is-blurred .collabable-profile-card__bio {
    filter: blur(5px);
    -webkit-filter: blur(5px);
    user-select: none;
    -webkit-user-select: none;
}

.collabable-profile-card.is-blurred .collabable-profile-card__links,
.collabable-profile-card.is-blurred .collabable-profile-card__info-grid {
    filter: blur(5px);
    -webkit-filter: blur(5px);
    user-select: none;
    -webkit-user-select: none;
    pointer-events: none;
}

/* --- Grid card: photo --- */
.collab-grid-card.is-blurred .collab-grid-card__avatar-img {
    filter: blur(10px);
    -webkit-filter: blur(10px);
}

/* --- Grid card: name --- */
.collab-grid-card.is-blurred .collab-grid-card__name {
    filter: blur(8px);
    -webkit-filter: blur(8px);
    user-select: none;
    -webkit-user-select: none;
}

/* --- Grid card: bio --- */
.collab-grid-card.is-blurred .collab-grid-card__bio {
    filter: blur(5px);
    -webkit-filter: blur(5px);
    user-select: none;
    -webkit-user-select: none;
}