/**
 * Studios Listing - CSS Overrides
 *
 * Studio-specific overrides on top of collaborate.css.
 * All base styles (filter panel, tabs, grid/list, cards, pagination)
 * come from collaborate.css via the shared .collabable-collaborate wrapper.
 *
 * @package Collabable_Core
 * @since 1.6.0
 */

/* ── Grid card: square avatar instead of round ── */
.collabable-studios-listing .collab-grid-card__avatar-img {
	border-radius: 8px;
}

/* ── Verified badge (green) ── */
.collabable-studios-listing .collab-grid-card__badge--verified {
	background: #27ae60;
	color: #fff;
}

/* ── Boosted badge (blue) ── */
.collabable-studios-listing .collab-grid-card__badge--boosted,
.collabable-studios-listing .collabable-profile-card__badge--boosted {
	background: #CF0000;
	color: #fff;
}

/* ── Spotlight badge (gradient gold) ── */
.collabable-studios-listing .collab-grid-card__badge--spotlight,
.collabable-studios-listing .collabable-profile-card__badge--spotlight {
	background: linear-gradient(135deg, #e67e22, #CF0000);
	color: #fff;
}

/* ── Deal badges (promo) ── */
.collabable-studios-listing .collab-grid-card__badge--deal,
.collabable-studios-listing .collabable-profile-card__badge--deal {
	color: #fff;
	font-weight: 700;
	letter-spacing: 0.02em;
}
.collab-grid-card__badge--deal-early_bird { background: #27ae60; }
.collab-grid-card__badge--deal-last_minute { background: #CF0000; }
.collab-grid-card__badge--deal-custom { background: #CF0000; }

/* ── Condition hint below badge (e.g. "For sessions within 24h") ── */
.collab-grid-card__badge-condition {
	display: block;
	font-size: 10px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.7);
	margin-top: 4px;
	letter-spacing: 0.01em;
}

/* ── Scope hint below badge (e.g. "On select services") ── */
.collab-grid-card__badge-scope {
	display: block;
	font-size: 9px;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.65);
	margin-top: 2px;
	letter-spacing: 0;
	font-style: italic;
}

/* ── Condition hint next to strikethrough price ── */
.collab-grid-card__price-condition {
	display: block;
	font-size: 11px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.5);
	font-style: italic;
	margin-top: 2px;
}

/* ── Strikethrough pricing ── */
.collab-grid-card__price-original {
	text-decoration: line-through;
	opacity: 0.6;
	font-size: 0.85em;
	margin-right: 6px;
}
.collab-grid-card__price-deal {
	color: #27ae60;
	font-weight: 700;
}
.collab-grid-card__meta--price-deal {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 2px;
}

/* List card deal strikethrough */
.studio-list-card__detail--deal .collab-grid-card__price-original {
	font-size: 0.9em;
}
.studio-list-card__detail--deal .collab-grid-card__price-deal {
	font-size: 0.95em;
}

/* ══════════════════════════════════════════════════
   LIST VIEW — 30/70 split: photo left, content right
   ══════════════════════════════════════════════════ */

/* Card: no padding, photo flush against edges */
.collabable-studios-listing .studio-list-card {
	padding: 0;
	border-radius: 13px;
	overflow: hidden;
}

/* Columns: relative container so image can be absolute */
.collabable-studios-listing .studio-list-card .collabable-profile-card__columns {
	position: relative;
	display: flex;
	flex-direction: row;
	gap: 0;
}

/* Image column: absolute, fills full card height without affecting it */
.collabable-studios-listing .studio-list-card__image-col {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 30%;
	overflow: hidden;
}

/* Image: fill column completely, crop to fit */
.collabable-studios-listing .studio-list-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Placeholder when no image */
.collabable-studios-listing .studio-list-card__image-placeholder {
	width: 100%;
	height: 100%;
	background: #e0e0e0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.3);
}

/* ── Content area (70%) ── */
.collabable-studios-listing .studio-list-card__content {
	flex: 1 1 0%;
	min-width: 0;
	margin-left: 30%;
	padding: 20px 24px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* ── ROW 1: Header (name+location | featured price) ── */
.collabable-studios-listing .studio-list-card__header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 16px;
}

.collabable-studios-listing .studio-list-card__header-left {
	flex: 1 1 0%;
	min-width: 0;
}

.collabable-studios-listing .studio-list-card__name {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	color: #fff;
	line-height: 1.3;
}

.collabable-studios-listing .studio-list-card__location {
	display: block;
	margin-top: 4px;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.6);
}

.collabable-studios-listing .studio-list-card__header-right {
	flex-shrink: 0;
}

.collabable-studios-listing .studio-list-card__featured-price {
	font-size: 15px;
	font-weight: 700;
	color: #fff;
	white-space: nowrap;
}

/* ── ROW 2: Bio ── */
.collabable-studios-listing .studio-list-card__bio {
	font-size: 13px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.7);
}

.collabable-studios-listing .studio-list-card__bio-text {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ── ROW 3: Footer (size+price | reserve) ── */
.collabable-studios-listing .studio-list-card__footer {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 16px;
	margin-top: auto;
}

.collabable-studios-listing .studio-list-card__footer-left {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.collabable-studios-listing .studio-list-card__detail {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.6);
}

.collabable-studios-listing .studio-list-card__footer-right {
	flex-shrink: 0;
}

.collabable-studios-listing .studio-list-card__reserve-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 28px;
	background: #CF0000;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	border-radius: 8px;
	text-decoration: none;
	white-space: nowrap;
}

/* ══════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════ */
@media (max-width: 900px) {
	.collabable-studios-listing .studio-list-card__image-col {
		width: 35%;
	}

	.collabable-studios-listing .studio-list-card__content {
		margin-left: 35%;
	}
}

@media (max-width: 768px) {
	/* Grid columns: stretch children to fill full height */
	.collabable-studios-listing.collabable-collaborate .results-grid--list .studio-list-card .collabable-profile-card__columns {
		align-items: stretch !important;
	}

	/* List card image: reset ALL desktop styles, fill entire grid cell */
	.collabable-studios-listing.collabable-collaborate .results-grid--list .studio-list-card__image-col {
		position: static !important;
		width: 100% !important;
		height: 100% !important;
		top: auto !important;
		left: auto !important;
		bottom: auto !important;
		overflow: hidden !important;
		border-radius: 13px 0 0 13px !important;
	}

	.collabable-studios-listing.collabable-collaborate .results-grid--list .studio-list-card__image {
		width: 100% !important;
		height: 100% !important;
		min-height: 100% !important;
		object-fit: cover !important;
		object-position: center center !important;
		display: block !important;
	}

	.collabable-studios-listing.collabable-collaborate .results-grid--list .studio-list-card__content {
		margin-left: 0 !important;
		padding: 14px 16px !important;
	}

	.collabable-studios-listing.collabable-collaborate .results-grid--list .studio-list-card__footer {
		flex-direction: column !important;
		align-items: flex-end !important;
		gap: 12px !important;
	}

	.collabable-studios-listing.collabable-collaborate .results-grid--list .studio-list-card__reserve-btn {
		text-align: right !important;
	}

	/* Grid card cover: taller for better studio photo framing */
	.collabable-studios-listing.collabable-collaborate .collab-grid-card__cover-section {
		height: 180px !important;
		min-height: 180px !important;
	}

	/* Cover image: fill entire cover section edge-to-edge */
	.collabable-studios-listing.collabable-collaborate .collab-grid-card__cover-img {
		width: 100% !important;
		height: 100% !important;
		object-fit: cover !important;
		display: block !important;
		border-radius: 0 !important;
	}

	/* Cover placeholder: fill entire cover section */
	.collabable-studios-listing.collabable-collaborate .collab-grid-card__cover-placeholder {
		width: 100% !important;
		height: 100% !important;
	}
}

/* ==========================================================================
   INSTANT BOOK FILTER TOGGLE
   ========================================================================== */

.csl-filter-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
}

.csl-filter-toggle__switch {
    position: relative;
    width: 36px;
    height: 20px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s;
    border: none;
    padding: 0;
    flex-shrink: 0;
}

.csl-filter-toggle__switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
}

.csl-filter-toggle__switch.is-active {
    background: #27ae60;
}

.csl-filter-toggle__switch.is-active::after {
    transform: translateX(16px);
}

.csl-filter-toggle__label {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}

.csl-filter-toggle__label svg {
    color: #27ae60;
}