/*
   TREATMENTS.CSS - Toga Massage
   Location: toga-massage-child/assets/css/treatments.css
*/

/* ==========================================================================
   1. PAGE HERO
   ========================================================================== */
#treatments-hero {
	min-height: 50vh;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 120px 0 80px;
}

.toga-breadcrumbs {
	color: var(--color-gold);
	margin-bottom: var(--space-compact);
}

.toga-breadcrumbs a {
	color: var(--color-champagne);
	opacity: 0.7;
	text-decoration: none;
	transition: opacity 0.3s ease, color 0.3s ease;
}

.toga-breadcrumbs a:hover {
	color: var(--color-gold);
	opacity: 1;
}

.toga-breadcrumbs .separator {
	margin: 0 8px;
	opacity: 0.5;
}

/* ==========================================================================
   2. TREATMENTS GRID
   ========================================================================== */
.treatments-full-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-section);
	align-items: stretch;
}

@media (min-width: 768px) {
	.treatments-full-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.treatments-full-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ==========================================================================
   3. DURATION PILLS
   ========================================================================== */
.treatment-durations {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: var(--space-default);
	margin-top: auto;
}

.duration-pill {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 16px;
	border: 1px solid rgba(232, 213, 163, 0.2); /* Champagne */
	border-radius: 4px;
	cursor: pointer;
	transition: all 0.3s ease;
	background-color: rgba(26, 15, 8, 0.2); /* Noir */
}

.duration-pill input[type="radio"] {
	display: none;
}

.duration-pill:hover {
	border-color: var(--color-gold);
	background-color: rgba(201, 168, 76, 0.05); /* Gold */
}

.duration-pill.selected {
	border-color: var(--color-gold);
	background-color: rgba(201, 168, 76, 0.1);
	box-shadow: 0 0 0 1px var(--color-gold);
}

.duration-label {
	font-family: var(--font-body);
	font-weight: 500;
	color: var(--color-champagne);
	font-size: 0.95rem;
}

.duration-pill.selected .duration-label {
	color: var(--color-gold);
}

.duration-price {
	font-family: var(--font-body);
	font-weight: 400;
	color: var(--color-champagne);
	font-size: 0.95rem;
}

.duration-pill.selected .duration-price {
	font-weight: 500;
	color: var(--color-gold);
}

.treatment-card .treatment-excerpt {
	flex-grow: 1; /* Push the durations and button to bottom */
}

/* ==========================================================================
   4. EMPTY STATE
   ========================================================================== */
.toga-empty-state {
	padding: 80px 20px;
	background-color: #FFFFFF;
	border-radius: 8px;
	border: 2px dashed rgba(201, 168, 76, 0.3); /* Gold */
	max-width: 600px;
	margin: 0 auto;
}

.toga-empty-state .empty-icon {
	font-size: 4rem;
	margin-bottom: var(--space-default);
	opacity: 0.7;
}

.toga-empty-state h3 {
	color: var(--color-espresso);
	font-family: var(--font-display);
}

.toga-empty-state p {
	color: var(--color-noir);
	opacity: 0.7;
}