/* ==========================================================================
   FliserRent – Services Page Styles
   ========================================================================== */

/* ---------- Services Hero ---------- */

.services-hero {
	background: linear-gradient(135deg, var(--fr-green-dark) 0%, #1a6b3a 50%, #2d8f56 100%);
	position: relative;
	overflow: hidden;
}

.services-hero .title {
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* ---------- Category Navigation ---------- */

.services-category-nav {
	position: sticky;
	top: 0;
	z-index: 30;
	background: var(--fr-bg);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}

.services-category-nav .tabs a {
	border-bottom-color: transparent;
	color: var(--fr-text-light);
	font-weight: 500;
	transition: color 0.2s, border-color 0.2s;
}

.services-category-nav .tabs a:hover {
	color: var(--fr-green-dark);
	border-bottom-color: var(--fr-green);
}

.services-category-nav .tabs li.is-active a {
	color: var(--fr-green-dark);
	border-bottom-color: var(--fr-green);
	font-weight: 600;
}

/* ---------- Category Group ---------- */

.services-category-title {
	position: relative;
	display: inline-block;
}

.services-category-title::after {
	content: '';
	position: absolute;
	bottom: -6px;
	left: 50%;
	transform: translateX(-50%);
	width: 60px;
	height: 3px;
	background: var(--fr-green);
	border-radius: 2px;
}

/* ---------- Service Detail Block ---------- */

.service-detail-block {
	padding: 2rem 0;
}

.service-image-wrapper {
	position: relative;
	border-radius: 12px;
	overflow: hidden;
}

.service-hero-image {
	width: 100%;
	height: 360px;
	object-fit: cover;
	border-radius: 12px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

.service-image-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 300px;
	background: linear-gradient(135deg, rgba(72, 199, 116, 0.08), rgba(72, 199, 116, 0.02));
	border: 2px dashed var(--fr-border);
	border-radius: 12px;
}

/* ---------- Pricing Badge ---------- */

.service-pricing-badge {
	position: absolute;
	top: 16px;
	right: 16px;
	background: var(--fr-green);
	color: #fff;
	border-radius: 8px;
	padding: 8px 16px;
	text-align: center;
	box-shadow: 0 4px 12px rgba(72, 199, 116, 0.4);
	line-height: 1.2;
}

.service-pricing-label {
	display: block;
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	opacity: 0.9;
}

.service-pricing-amount {
	display: block;
	font-size: 1.6rem;
	font-weight: 700;
}

.service-pricing-unit {
	display: block;
	font-size: 0.75rem;
	opacity: 0.9;
}

/* ---------- Service Info ---------- */

.service-detail-icon {
	color: var(--fr-green);
}

.service-description {
	font-size: 1.05rem;
	line-height: 1.7;
}

/* ---------- Process Steps ---------- */

.service-process {
	background: var(--fr-bg-alt);
	border-radius: 12px;
	padding: 2rem;
}

.process-step {
	padding: 1rem;
}

.process-step-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--fr-green);
	color: #fff;
	font-size: 1.25rem;
	font-weight: 700;
	box-shadow: 0 3px 10px rgba(72, 199, 116, 0.3);
}

/* ---------- Before/After Slider (Service) ---------- */

.service-ba-slider {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: 12px;
	box-shadow: var(--fr-shadow);
	cursor: col-resize;
	user-select: none;
	background: var(--fr-bg-alt);
}

.service-ba-slider .ba-image {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.service-ba-slider .ba-image--before {
	width: 50%;
	z-index: 2;
	border-right: 2px solid #fff;
}

.service-ba-slider .ba-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---------- FAQ Accordion ---------- */

.faq-item {
	border: 1px solid var(--fr-border);
	border-radius: 8px;
	margin-bottom: 8px;
	overflow: hidden;
	transition: box-shadow 0.2s;
}

.faq-item:hover {
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.faq-question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 1rem 1.25rem;
	background: none;
	border: none;
	cursor: pointer;
	font-size: 1rem;
	font-weight: 600;
	color: var(--fr-text);
	text-align: left;
	line-height: 1.4;
	transition: background 0.15s;
}

.faq-question:hover {
	background: rgba(72, 199, 116, 0.04);
}

.faq-question[aria-expanded="true"] {
	background: rgba(72, 199, 116, 0.06);
}

.faq-chevron {
	transition: transform 0.25s ease;
	flex-shrink: 0;
	margin-left: 0.5rem;
	color: var(--fr-green);
}

.faq-question[aria-expanded="true"] .faq-chevron {
	transform: rotate(180deg);
}

.faq-answer {
	overflow: hidden;
	transition: max-height 0.3s ease, padding 0.3s ease;
}

.faq-answer[hidden] {
	display: block !important;
	max-height: 0;
	padding: 0;
}

.faq-answer:not([hidden]) {
	max-height: 500px;
}

.faq-answer-content {
	padding: 0 1.25rem 1.25rem;
	color: var(--fr-text-light);
	line-height: 1.7;
}

/* ---------- Service Divider ---------- */

.service-divider {
	border: none;
	height: 1px;
	background: var(--fr-border);
	margin: 3rem 0;
}

/* ---------- CTA Section ---------- */

.services-cta-section {
	padding: 4rem 1.5rem;
}

/* ---------- Responsive ---------- */

@media screen and (max-width: 768px) {
	.service-hero-image {
		height: 240px;
	}

	.service-detail-block .columns.is-flex-direction-row-reverse {
		flex-direction: column !important;
	}

	.service-pricing-badge {
		top: 8px;
		right: 8px;
		padding: 6px 12px;
	}

	.service-pricing-amount {
		font-size: 1.3rem;
	}

	.service-process {
		padding: 1.5rem 1rem;
	}

	.process-step-number {
		width: 40px;
		height: 40px;
		font-size: 1rem;
	}

	.faq-question {
		padding: 0.85rem 1rem;
		font-size: 0.95rem;
	}

	.services-category-nav .tabs {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.services-category-nav .tabs ul {
		flex-wrap: nowrap;
	}

	.services-category-nav .tabs a {
		white-space: nowrap;
		font-size: 0.9rem;
	}
}

/* ---------- Dark Mode ---------- */

@media (prefers-color-scheme: dark) {
	.services-category-nav {
		background: var(--fr-bg);
	}

	.service-process {
		background: var(--fr-bg-alt);
	}

	.faq-item {
		border-color: var(--fr-border);
	}

	.faq-question {
		color: var(--fr-text);
	}

	.faq-question:hover {
		background: rgba(72, 199, 116, 0.08);
	}

	.service-image-placeholder {
		border-color: var(--fr-border);
	}
}

html.dark-mode .services-category-nav {
	background: var(--fr-bg);
}

html.dark-mode .service-process {
	background: var(--fr-bg-alt);
}

html.dark-mode .faq-item {
	border-color: var(--fr-border);
}

html.dark-mode .faq-question {
	color: var(--fr-text);
}

html.dark-mode .faq-question:hover {
	background: rgba(72, 199, 116, 0.08);
}

html.dark-mode .service-image-placeholder {
	border-color: var(--fr-border);
}