/* ============================================
   SERVICES SECTION - COMPLETE STYLES
   ============================================ */

/* Google Material Symbols */
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0');

.wand-shine-services {
	background-color: #0a0a0a;
	color: #ffffff;
	padding: 80px 20px;
	margin-block-start: 0px;
}

.wp-block-wand-shine-services {
	margin-block-start: 0px;
}

.services-container {
	max-width: 1200px;
	margin: 0 auto;
}

/* ============================================
   SECTION HEADER
   ============================================ */

.section-header {
	margin-bottom: 60px;
	text-align: center;
}

.section-label {
	font-family: 'Zalando Sans Expanded', sans-serif;
	color: #D8FF63;
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0px;
	margin-bottom: 16px;
	text-transform: uppercase;
}

.section-title {
	margin-bottom: 24px;
	color: #ffffff;
}

.section-description {
	font-family: 'Figtree', sans-serif;
	font-size: 1.125rem;
	color: #e0e0e0;
	line-height: 1.6;
	margin-bottom: 20px;
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}

.section-note {
	background-color: #1a1a1a;
	border-left: 4px solid #ff4ff3;
	padding: 16px 20px;
	margin: 0 auto 0 auto;
	border-radius: 4px;
	font-size: 0.95rem;
	color: #e0e0e0;
	line-height: 1.6;
	display: inline-block;
	text-align: left;
}

.section-note strong {
	color: #ff4ff3 !important;
	font-weight: 700 !important;
}

/* ============================================
   DESKTOP / MOBILE LAYOUTS
   ============================================ */

.desktop-layout {
	display: grid;
}

.mobile-layout {
	display: none;
}

/* ============================================
   SERVICES GRID (DESKTOP)
   ============================================ */

.services-grid {
	display: block;
	margin-bottom: 1.5rem;
	background-color: #f5f5f5;
}

/* ============================================
   MAIN CARD
   ============================================ */

.main-card {
	display: grid;
	grid-template-columns: 35fr 65fr;
	gap: 40px;
	padding: 40px 60px;
	position: relative;
	background-color: #f5f5f5;
}

.card-image-placeholder {
	width: 100%;
	height: 100%;
	min-height: 400px;
	background-color: #e0e0e0;
	border-radius: 8px;
	overflow: hidden;
}

.card-content {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.card-header {
	margin-bottom: 1.5rem;
}

.card-title-label {
	font-family: 'Zalando Sans Expanded', sans-serif;
	font-size: 0.7rem;
	font-weight: 600;
	color: #666;
	font-style: italic;
	margin-top: 0;
	margin-bottom: 8px;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.card-title {
	font-family: 'Miamo', serif;
	font-size: 2rem;
	font-weight: 700;
	color: #0a0a0a;
	margin: 0.5rem 0 0 0;
	line-height: 1.2;
}

.card-description {
	font-family: 'Figtree', sans-serif;
	color: #2a2a2a;
	line-height: 1.6;
	margin-bottom: 0;
}

/* ============================================
   CARD SUMMARY COLUMNS
   ============================================ */

.card-summary-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	margin-bottom: 30px;
}

.card-summary-section {
	margin: 0;
}

.card-summary-title {
	font-family: 'Miamo', serif;
	font-size: 1.25rem;
	font-weight: 700;
	color: #0a0a0a;
	margin-top: 1rem;
	margin-bottom: 16px;
}

.card-summary-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.card-summary-list li {
	font-family: 'Figtree', sans-serif;
	padding-left: 20px;
	position: relative;
	color: #2a2a2a;
	line-height: 1.5;
	font-size: 0.9rem;
}

/* Right column: Mit tartalmaz? - checkmark */
.card-summary-grid .card-summary-section:nth-child(2) .card-summary-list li::before {
	content: '✓';
	position: absolute;
	left: 0;
	color: #ff4ff3;
	font-weight: 700;
}

/* Left column: Kinek ajánlom? - pink sparkle icon */
.card-summary-grid .card-summary-section:first-child .card-summary-list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 4px;
	width: 14px;
	height: 14px;
	background-image: url('../../assets/icons/pink-sparkle.svg');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

/* ============================================
   CARD ACTIONS (Price, Duration, CTA)
   ============================================ */

.card-actions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.card-actions .duration {
	font-family: 'Miamo', serif;
	font-size: 1.125rem;
	font-weight: 600;
	color: #0a0a0a;
	text-align: left;
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin-bottom: 8px;
}

.card-actions .duration::before {
	content: 'schedule';
	font-family: 'Material Symbols Outlined';
	font-size: 1.125rem;
	font-weight: 400;
	color: #ff4ff3;
	width: 1.5rem;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	top: 2px;
}

.card-actions .price {
	font-family: 'Miamo', serif;
	font-size: 1.5rem;
	font-weight: 700;
	color: #0a0a0a;
	text-align: left;
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin-bottom: 1rem;
}

.card-actions .price::before {
	content: 'sell';
	font-family: 'Material Symbols Outlined';
	font-size: 1.2rem;
	font-weight: 400;
	color: #ff4ff3;
	width: 1.5rem;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	top: 2px;
}

.card-actions .cta-section {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

/* CTA button now uses global .btn-primary class */

/* ============================================
   COMPARISON TABLE (EXPANDABLE)
   ============================================ */

.services-comparison-expandable {
	display: none; /* Hidden - replaced by modal */
	text-align: center;
}

.comparison-expand-button {
	background-color: transparent;
	border: none;
	padding: 0;
	font-family: 'Zalando Sans Expanded', sans-serif;
	font-size: 14px;
	font-weight: 500;
	color: #ffffff;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	transition: all 0.3s ease;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.comparison-expand-button:hover {
	color: #FF4FF3;
}

.comparison-expand-button svg {
	transition: transform 0.3s ease;
}

.comparison-expand-button.active svg {
	transform: rotate(180deg);
}

.comparison-expanded-content {
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transform: translateY(-10px);
	transition: max-height 0.4s ease, opacity 0.4s ease, transform 0.4s ease;
}

.comparison-expanded-content.active {
	max-height: 10000px;
	opacity: 1;
	transform: translateY(0);
	margin-top: 40px;
}

.comparison-table {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	border-collapse: collapse;
	background-color: #1a1a1a;
	border-radius: 2px;
	overflow: hidden;
}

.comparison-table thead {
	background-color: #f5f5f5;
}

.comparison-table thead th {
	padding: 20px;
	text-align: center;
	font-family: 'Zalando Sans Expanded', sans-serif;
	font-size: 14px;
	font-weight: 500;
	color: #0a0a0a;
	border-right: 1px solid #d0d0d0;
}

.comparison-table thead th:last-child {
	border-right: none;
}

.comparison-table thead th:first-child {
	width: 30%;
}

.comparison-table tbody tr:last-child th,
.comparison-table tbody tr:last-child td {
	border-bottom: none;
}

.comparison-table tbody th {
	padding: 16px 20px;
	text-align: left;
	font-family: 'Zalando Sans Expanded', sans-serif;
	font-size: 14px;
	font-weight: 500;
	color: #ffffff;
	background-color: #2a2a2a;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.comparison-table tbody td {
	padding: 16px 20px;
	text-align: center;
	font-family: 'Figtree', sans-serif;
	font-size: 0.9rem;
	color: #e0e0e0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.comparison-table tbody td.has-feature {
	color: #D8FF63;
	font-weight: 600;
}

.comparison-table tbody td.no-feature {
	color: #666;
}

.comparison-section-header {
	display: table-row !important;
	background-color: #2a2a2a !important;
	cursor: pointer;
	transition: background-color 0.3s ease;
	user-select: none;
}

.comparison-section-header:hover {
	background-color: #333 !important;
}

.comparison-section-header:hover th {
	background-color: #333 !important;
}

.comparison-section-row:hover {
	background-color: #333 !important;
}

.comparison-section-row:hover th {
	background-color: #333 !important;
}

.comparison-section-header th {
	position: relative;
	padding-right: 40px !important;
	transition: background-color 0.3s ease;
}

.comparison-section-header .toggle-icon {
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	transition: transform 0.3s ease;
	color: #ff4ff3;
}

.comparison-section-header.active .toggle-icon {
	transform: translateY(-50%) rotate(180deg);
}

.comparison-section-row {
	display: none;
	background-color: #1a1a1a;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

.comparison-section-row.visible {
	display: table-row;
}

.comparison-section-row th {
	padding-left: 40px !important;
	font-family: 'Figtree', sans-serif;
	font-size: 0.85rem;
	font-weight: 400;
	background-color: #1a1a1a !important;
	transition: background-color 0.3s ease;
}

.comparison-table .pink-check {
	color: #ff4ff3;
	font-weight: 700;
}

.comparison-table .pink-minus {
	color: #ff4ff3;
	font-weight: 700;
	font-size: 1.2rem;
}

/* ============================================
   SERVICES TABS
   ============================================ */

.services-tabs {
	display: flex;
	flex-direction: row;
	background-color: #f5f5f5;
	border-bottom: 2px solid #d0d0d0;
}

.tab-button {
	flex: 1;
	border: none;
	background-color: transparent;
	border-right: 1px solid #d0d0d0;
	cursor: pointer;
	transition: all 0.3s ease;
	position: relative;
	padding: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tab-button:last-child {
	border-right: none;
}

.tab-button.active {
	background-color: #ffffff;
	border-bottom: 3px solid #ff4ff3;
	margin-bottom: -2px;
}

.tab-button:hover {
	background-color: #ffffff;
}

.tab-text {
	font-family: 'Zalando Sans Expanded', sans-serif;
	font-size: 12px;
	font-weight: 500;
	color: #0a0a0a;
	letter-spacing: 1px;
	text-transform: uppercase;
}

/* ============================================
   MOBILE CARDS
   ============================================ */

.mobile-service-card {
	background-color: #f5f5f5;
	padding: 40px 30px;
	margin-bottom: 20px;
	border-top: 3px solid #ff4ff3;
}

.mobile-card-header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 20px;
}

.mobile-card-number {
	font-family: 'Miamo', serif;
	font-size: 1.25rem;
	font-weight: 700;
	color: #0a0a0a;
}

.mobile-card-subtitle {
	font-family: 'Figtree', sans-serif;
	font-size: 1rem;
	font-weight: 600;
	color: #0a0a0a;
	margin: 0;
}

.mobile-card-title {
	font-family: 'Miamo', serif;
	font-size: 2rem;
	font-weight: 700;
	color: #0a0a0a;
	margin-bottom: 20px;
	line-height: 1.2;
}

.mobile-card-description {
	font-family: 'Figtree', sans-serif;
	color: #2a2a2a;
	line-height: 1.6;
	margin-bottom: 30px;
}

.mobile-card-image-placeholder {
	width: 100%;
	background-color: #d0d0d0;
	border-bottom: 3px solid #D8FF63;
}

/* ============================================
   SERVICE DETAILS
   ============================================ */

.service-details {
	margin-top: 60px;
}

.details-grid {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 60px;
	margin-bottom: 40px;
}

.detail-section {
	margin-bottom: 40px;
}

.detail-title {
	font-family: 'Miamo', serif;
	font-size: 1.5rem;
	font-weight: 700;
	margin-bottom: 20px;
	color: #ffffff;
}

.detail-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.detail-list li {
	font-family: 'Figtree', sans-serif;
	padding-left: 24px;
	margin-bottom: 12px;
	position: relative;
	color: #e0e0e0;
	line-height: 1.6;
}

.detail-list li::before {
	content: '✓';
	position: absolute;
	left: 0;
	color: #D8FF63;
	font-weight: 700;
}

.bonus-list li::before {
	color: #ff4ff3;
}

.not-included-list li::before {
	content: '×';
	color: #666;
}

/* ============================================
   PRICE & DURATION
   ============================================ */

.price-duration {
	display: flex;
	gap: 20px;
	flex-direction: column;
}

.price-box,
.duration-box {
	padding: 20px;
	background-color: #1a1a1a;
	border-radius: 8px;
	text-align: center;
}

.price {
	font-family: 'Miamo', serif;
	display: block;
	font-size: 1.75rem;
	font-weight: 700;
	color: #D8FF63;
}

.duration {
	font-family: 'Figtree', sans-serif;
	display: block;
	font-size: 1.25rem;
	font-weight: 600;
	color: #ff4ff3;
}

/* ============================================
   EXTRAS GRID
   ============================================ */

.extras-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.extra-tag {
	font-family: 'Figtree', sans-serif;
	padding: 8px 16px;
	background-color: #1a1a1a;
	border-radius: 20px;
	font-size: 0.875rem;
	color: #e0e0e0;
	border: 1px solid #2a2a2a;
}

/* ============================================
   CTA SECTION
   ============================================ */

.cta-section {
	text-align: center;
	margin-top: 60px;
}

/* ============================================
   RESPONSIVE STYLES
   ============================================ */

/* Tablet view: Desktop layout without image */
@media (min-width: 641px) and (max-width: 968px) {
	.card-image-placeholder {
		display: none;
	}

	.main-card {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {
	.services-container .section-header {
		text-align: left !important;
	}

	.services-comparison-expandable {
		text-align: center;
	}

	.card-image-placeholder {
		display: none;
	}

	.main-card {
		grid-template-columns: 1fr;
		padding: 40px 20px;
	}

	.details-grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.price-duration {
		flex-direction: row;
	}

	.services-tabs {
		flex-direction: column;
		border-bottom: none;
	}

	.tab-button {
		border-right: none;
		border-bottom: 1px solid #d0d0d0;
		justify-content: flex-start;
		padding-left: 20px;
	}

	.tab-button.active {
		border-bottom: 1px solid #d0d0d0;
		border-left: 3px solid #ff4ff3;
	}

	.card-summary-grid {
		grid-template-columns: 1fr;
		gap: 30px;
	}

	.comparison-expanded-content {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.comparison-table {
		min-width: 600px;
	}
}

@media (max-width: 640px) {
	.wand-shine-services {
		padding: 60px 16px;
	}

	.price-duration {
		flex-direction: column;
	}

	.mobile-service-card {
		padding: 30px 20px;
	}
}

/* ============================================
   SERVICE MODAL
   ============================================ */

/* Modal Backdrop */
.service-modal-backdrop {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(10, 10, 10, 0.85);
	z-index: 9998;
	opacity: 0;
	transition: opacity 0.3s ease;
}

/* Modal Container */
.service-modal {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0.95);
	width: 90%;
	max-width: 900px;
	max-height: 85vh;
	background-color: #ffffff;
	border-radius: 12px;
	z-index: 9999;
	opacity: 0;
	transition: all 0.3s ease;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.service-modal.active {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}

.service-modal.active ~ .service-modal-backdrop {
	opacity: 1;
}

/* Modal Sticky Header */
.service-modal-header {
	position: sticky;
	top: 0;
	background-color: #ffffff;
	padding: 24px 30px;
	border-bottom: 2px solid #f0f0f0;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 20px;
	z-index: 10;
}

.service-modal-title {
	/* Uses global h3 styles */
	margin: 0;
	margin-top: 1rem !important;
}

.service-modal-nav {
	background: none;
	border: none;
	cursor: pointer;
	padding: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #0a0a0a;
	transition: all 0.2s ease;
	border-radius: 4px;
	margin-top: 0.5rem;
}

.service-modal-nav:hover {
	background-color: #f0f0f0;
	color: #ff4ff3;
}

.service-modal-close {
	position: absolute;
	top: calc(24px + 0.5rem);
	right: 30px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 8px;
	color: #666;
	transition: all 0.3s ease;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.service-modal-close:hover {
	background-color: #f5f5f5;
	color: #ff4ff3;
	transform: rotate(90deg);
}

/* Modal Content Area */
.service-modal-content {
	overflow-y: auto;
	padding: 0 60px 60px 60px;
	flex: 1;
}

/* Scrollbar styling */
.service-modal-content::-webkit-scrollbar {
	width: 8px;
}

.service-modal-content::-webkit-scrollbar-track {
	background: #f5f5f5;
}

.service-modal-content::-webkit-scrollbar-thumb {
	background: #d0d0d0;
	border-radius: 4px;
}

.service-modal-content::-webkit-scrollbar-thumb:hover {
	background: #ff4ff3;
}

/* Modal Grid Layout */
.service-modal-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 30px;
	margin-bottom: 30px;
}

.service-modal-right-column {
	display: flex;
	flex-direction: column;
	gap: 30px;
}

/* Modal Sections */
.service-modal-section {
	scroll-margin-top: 100px;
	animation: fadeInUp 0.5s ease forwards;
	opacity: 0;
}

.service-modal-section:nth-child(1) {
	animation-delay: 0.1s;
}

.service-modal-section:nth-child(2) {
	animation-delay: 0.2s;
}

.service-modal-section-full {
	grid-column: 1 / -1;
}

/* Section highlight animation */
.service-modal-section.highlight {
	animation: sectionHighlight 1.5s ease;
}

@keyframes sectionHighlight {
	0% {
		background-color: transparent;
	}
	20% {
		background-color: rgba(255, 79, 243, 0.1);
	}
	100% {
		background-color: transparent;
	}
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.modal-section-title {
	font-family: 'Miamo', serif;
	font-size: 1.5rem;
	font-weight: 700;
	color: #0a0a0a;
	margin-bottom: 20px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.modal-section-icon {
	font-size: 1.5rem;
	line-height: 1;
}

/* Icon alignment for specific sections */
#modal-includes .modal-section-icon,
#modal-bonuses .modal-section-icon,
#modal-extras .modal-section-icon {
	transform: translateY(-5px) !important;
}

#modal-not-included .modal-section-icon {
	transform: translateY(-1px) !important;
}

/* Modal Lists */
.modal-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.modal-list li {
	font-family: 'Figtree', sans-serif;
	padding-left: 28px;
	margin-bottom: 12px;
	position: relative;
	color: #2a2a2a;
	line-height: 1.6;
	font-size: 0.95rem;
}

/* Colored Icons for Lists */
.modal-list-includes li::before {
	content: '✓';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	color: #C3F70F;
	font-weight: 700;
	font-size: 1.1rem;
}

.modal-list-bonuses li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 14px;
	height: 14px;
	background-image: url('../../assets/icons/pink-sparkle.svg');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.modal-list-not-included li::before {
	content: '×';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	color: #999;
	font-weight: 700;
	font-size: 1.2rem;
}

/* Választható Extrák Grid */
.modal-extras-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.modal-extra-tag {
	font-family: 'Figtree', sans-serif;
	padding: 6px 16px !important;
	background-color: #f5f5f5;
	border-radius: 3px;
	font-size: 0.875rem;
	color: #2a2a2a;
	border: 1px solid #ff4ff3;
}

/* Details Button (on service cards) */
.btn-details {
	font-family: 'Zalando Sans Expanded', sans-serif;
	display: inline-block;
	padding: 10px 24px;
	background-color: transparent;
	color: #131415;
	border: 1px solid #131415;
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	line-height: 1.5;
	cursor: pointer;
	transition: all 0.3s ease;
	border-radius: 2px;
}

.btn-details:hover {
	background-color: #131415;
	color: #ffffff;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Mobile Responsive */
@media (max-width: 768px) {
	.service-modal {
		width: 95%;
		max-height: 90vh;
	}

	.service-modal-header {
		padding: 16px 20px;
		gap: 12px;
	}

	.service-modal-close {
		top: calc(16px + 0.5rem);
		right: 20px;
	}

	.service-modal-nav svg,
	.service-modal-close svg {
		width: 20px;
		height: 20px;
	}

	.service-modal-content {
		padding: 20px 40px 40px 40px;
	}

	.service-modal-grid {
		grid-template-columns: 1fr;
		gap: 30px;
	}

	.service-modal-section-full {
		grid-column: 1;
	}

	.modal-section-title {
		font-size: 1.25rem;
	}

	#modal-includes .modal-section-icon,
	#modal-bonuses .modal-section-icon,
	#modal-extras .modal-section-icon {
		transform: translateY(-4px) !important;
	}
}