/* Global & Variables */
:root {
	--primary-color: #e686cd;
	--secondary-color: #333;
	--text-color: #444;
	--light-gray: #f5f5f5;
	--border-color: #eee;
	--white: #ffffff;
	--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
	--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
	--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
	--radius-md: 12px;
	--radius-lg: 20px;
	--font-main: 'Inter', sans-serif;
	/* Assuming Inter or similar is available, otherwise inherits */
}

body {
	color: var(--text-color);
	background-color: #f9f9f9;
	margin: 0;
	font-family: var(--font-main);
}

main {
	width: 100%;
	overflow-x: hidden;
	/* Prevent horizontal scroll */
	max-width: 100vw;
}

/* Utilities */
.fade-in-section {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
	/*will-change: opacity, visibility;*/
}

.fade-in-section.is-visible {
	opacity: 1;
	transform: none;
}

.button {
	padding: 10px 20px;
	border-radius: 30px;
	border: none;
	cursor: pointer;
	font-weight: 600;
	transition: all 0.2s ease;
	font-size: 0.95rem;
}

.button.primary {
	background-color: var(--primary-color);
	color: white;
}

.button.primary:hover {
	background-color: #d675bd;
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}

.button.outline {
	background-color: transparent;
	border: 2px solid var(--primary-color);
	color: var(--primary-color);
}

.button.outline:hover {
	background-color: var(--primary-color);
	color: white;
}

.button.full-width {
	width: 100%;
}

/* Immersive Hero */
.immersive-hero {
	position: relative;
	height: 70vh;
	min-height: 500px;
	max-height: 700px;
	width: 100%;
	background-color: #222;
	overflow: hidden;
}

.hero-media {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	/* Base z-index */
}

/* Zoom Close Button */
.closeZoom {
	position: absolute;
	top: 20px;
	right: 20px;
	z-index: 10001;
	/* Above the image */
	cursor: pointer;
	background: rgba(0, 0, 0, 0.5);
	border-radius: 50%;
	padding: 8px;
	display: none; /* Hidden by default */
	align-items: center;
	justify-content: center;
	transition: background 0.3s;
}

.closeZoom:hover {
	background: rgba(0, 0, 0, 0.8);
}

.closeZoom img {
	width: 24px;
	height: 24px;
	display: block;
}

#slider {
	width: 100%;
	height: 100%;
}

#slides {
	display: flex;
	width: 100%;
	height: 100%;
	transition: margin-left 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.slide {
	min-width: 100%;
	height: 100%;
	position: relative;
}

.slide img.photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.photoAuthor {
	position: absolute;
	top: 70px;
	bottom: auto;
	color: #fff;
	font-size: 0.8rem;
	/* Stronger shadow */
	background: rgba(0, 0, 0, 0.3);
	/* Add background for contrast */
	padding: 4px 12px;
	border-radius: 10px;
	z-index: 2;
	text-align: right;
	inset-inline-end: 20px; /* Logical property for right positioning */
}

.photoAuthor a {
	color: var(--white);
}

/* Slider Controls */
#sliderControls {
	position: absolute;
	top: 20px;
	/* Moved to top */
	right: 20px;
	/* Moved to right */
	display: flex;
	align-items: center;
	gap: 10px;
	z-index: 10;
	background: rgba(0, 0, 0, 0.4);
	backdrop-filter: blur(8px);
	padding: 8px 16px;
	border-radius: 40px;
}

.slider-btn {
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.2s;
}

.slider-btn:hover {
	transform: scale(1.1);
}

.slider-btn img {
	width: 24px;
	height: 24px;
	filter: brightness(0) invert(1);
}

.slider-counter {
	color: white;
	font-weight: 600;
	font-size: 0.9rem;
	margin: 0 10px;
	min-width: 40px;
	text-align: center;
}

.photoscopyright {
	position: absolute;
	bottom: 5px;
	left: 20px;
	font-size: 10px;
	color: rgba(255, 255, 255, 0.5);
	z-index: 10;
}

/* Hero Overlay */
.hero-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.85) 100%);
	z-index: 2;
	display: flex;
	align-items: flex-end;
	padding-bottom: 60px;
	pointer-events: none;
	/* Let clicks pass through to slider controls if needed, but content needs pointer-events: auto */
}

.hero-content {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px 80px 20px;
	/* Increased bottom padding to push content up */
	pointer-events: auto;
	color: white;
	position: relative;
	z-index: 10;
	/* Ensure it stays above if needed, though grid is z-5 */
}

.hero-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 15px;
}

.badge {
	padding: 6px 14px;
	border-radius: 20px;
	font-size: 0.85rem;
	font-weight: 600;
	backdrop-filter: blur(4px);
	text-decoration: none;
}

.badge.category {
	background: rgba(255, 255, 255, 0.9);
	color: var(--secondary-color);
}

.badge.subcategory {
	background: rgba(255, 255, 255, 0.2);
	color: white;
	border: 1px solid rgba(255, 255, 255, 0.3);
}

.hero-title {
	font-size: 2.5rem;
	/* Reduced from 3.5rem */
	font-weight: 800;
	margin: 0 0 10px 0;
	line-height: 1.1;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.closed-tag {
	font-size: 0.5em;
	color: #ff6b6b;
	vertical-align: middle;
}

.hero-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 20px;
}

.rating-container {
	display: flex;
	align-items: center;
	gap: 8px;
	background: rgba(0, 0, 0, 0.5);
	padding: 6px 12px;
	border-radius: 30px;
	backdrop-filter: blur(4px);
}

.rating-container .stars img {
	width: 16px;
	/* Force smaller stars */
	height: 16px;
}

.rating-score {
	font-weight: 700;
	font-size: 1rem;
	color: #ffd700;
}

.rating-count {
	color: rgba(255, 255, 255, 0.8);
	font-size: 0.9rem;
}

.hero-actions {
	display: flex;
	gap: 15px;
}

.action-btn {
	width: 45px;
	height: 45px;
	border-radius: 50%;
	border: none;
	background: rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(10px);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.2s;
}

.action-btn:hover,
.action-btn.active {
	background: white;
	transform: scale(1.05);
}

.action-btn img {
	width: 20px;
	height: 20px;
	filter: brightness(0) invert(1);
}

.action-btn:hover img,
.action-btn.active img {
	filter: none;
}

/* Fix for share icon on hover */
.action-btn:hover img[src*="share.svg"] {
    filter: brightness(0.2); /* Make icon dark on white hover background */
}


/* Specific fix for favorite button when active */
.action-btn.active img[src*="save-full.svg"] {
    filter: invert(65%) sepia(53%) saturate(5508%) hue-rotate(291deg) brightness(92%) contrast(93%);
    /* This filter converts the white SVG to the primary pink color */
}

/* Share Box */
.share-wrapper {
	position: relative;
}

#shareBox {
	position: absolute;
	bottom: 60px;
	right: 0;
	background: white;
	border-radius: 12px;
	padding: 10px;
	box-shadow: var(--shadow-lg);
	display: none;
	min-width: 150px;
	z-index: 100;
	/* Ensure it's on top */
}

#shareBox.show {
	display: block;
	animation: fadeIn 0.2s ease-out;
}

#shareBox ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	justify-content: space-around;
}

#shareBox li {
	cursor: pointer;
	transition: transform 0.2s;
}

#shareBox li img {
	width: 30px;
	/* Fix invisible icons */
	height: 30px;
	display: block;
}

/* Main Layout */
.main-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px 60px;
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
}

.content-block {
	background: white;
	border-radius: var(--radius-md);
	padding: 30px;
	box-shadow: var(--shadow-sm);
	border: 1px solid var(--border-color);
	box-sizing: border-box;
	position: relative;
}

h2 {
	font-size: 1.8rem;
	margin-bottom: 25px;
	color: var(--secondary-color);
	position: relative;
	display: inline-block;
}

h2::after {
	content: '';
	position: absolute;
	bottom: -8px;
	left: 0;
	width: 40px;
	height: 3px;
	background: var(--primary-color);
	border-radius: 2px;
}

/* Info Grid (Formerly Sidebar content) */
.info-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 20px;
	margin-top: -60px;
	/* Restore negative margin */
	position: relative;
	z-index: 20;
	/* Higher than hero content to be clickable, but hero content needs to be visually above? No, user said "se vean por encima del margen negativo" meaning the hero content shouldn't be covered.
    Actually, if grid overlaps, it COVERS. To make hero content visible "above" the overlap, the hero content needs to be pushed UP.
    I added padding-bottom to hero-content.
    */
}

.info-card {
	background: white;
	border-radius: var(--radius-md);
	padding: 25px;
	box-shadow: var(--shadow-md);
	border: 1px solid var(--border-color);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.info-card:hover {
	transform: translateY(-5px);
	box-shadow: var(--shadow-lg);
}

.info-header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 15px;
	border-bottom: 1px solid #f0f0f0;
	padding-bottom: 10px;
}

.info-header h3 {
	margin: 0;
	font-size: 1.1rem;
	color: var(--secondary-color);
}

.info-body {
	font-size: 0.95rem;
	line-height: 1.6;
	color: #666;
}

/* Address Card */
.map-preview {
	margin-top: 15px;
	border-radius: 8px;
	overflow: hidden;
	position: relative;
}

.map-preview img {
	width: 100%;
	height: auto;
	display: block;
}

.map-preview:hover .view-map-btn {
	background: var(--primary-color);
	color: white;
	transform: translateX(-50%) scale(1.1);
}

.view-map-btn {
	position: absolute;
	bottom: 10px;
	left: 50%;
	transform: translateX(-50%);
	background: white;
	padding: 8px 20px;
	border-radius: 20px;
	font-size: 0.85rem;
	font-weight: 600;
	box-shadow: var(--shadow-md);
	color: var(--secondary-color);
	transition: all 0.3s ease;
	white-space: nowrap;
	/* Prevent wrapping */
}

.plus-code {
	margin-top: 10px;
	font-size: 0.85rem;
	display: flex;
	align-items: center;
	gap: 5px;
	color: #888;
	position: relative;
}

#help-plus_code.show {
	display: block !important;
	width: 300px !important;
	/* Widen tooltip */
}

/* Hours Card */
.status-message {
	font-weight: 600;
	padding: 5px 10px;
	border-radius: 4px;
	display: inline-block;
	margin-bottom: 10px;
}

.status-message.closed-forever {
	background: #ffebee;
	color: #c62828;
}

.status-message.closed-temp {
	background: #fff3e0;
	color: #ef6c00;
}

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

.hours-list li {
	display: flex;
	justify-content: space-between;
	padding: 6px 0;
	border-bottom: 1px dashed #eee;
}

.hours-list li:last-child {
	border-bottom: none;
}

.hours-list li.today {
	font-weight: 700;
	color: var(--primary-color);
}

/* Contact Card */
.contact-list {
	list-style: none;
	padding: 0;
	margin: 0 0 20px 0;
}

.contact-list li {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
}

.contact-list li img {
	width: 18px;
	/* Smaller icons */
	height: 18px;
}

.contact-list a {
	color: var(--text-color);
	text-decoration: none;
	transition: color 0.2s;
	font-size: 0.9rem;
}

.contact-list a:hover {
	color: var(--primary-color);
}

.social-links {
	display: flex;
	gap: 10px;
	margin-bottom: 20px;
}

.social-btn {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #f5f5f5;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s;
}

.social-btn:hover {
	background: #e0e0e0;
}

.social-btn img {
	width: 20px;
	height: 20px;
}

/* Services Grid */
.services-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 15px;
}

.service-item {
	border: 1px solid var(--border-color);
	border-radius: 8px;
	padding: 15px;
	text-align: center;
	transition: all 0.2s;
}

.service-item.exists {
	border-bottom: 3px solid #4caf50;
}

.service-item.missing {
	border-bottom: 3px solid #ccc;
	opacity: 0.6;
}

.service-item:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-sm);
}

.service-icon img {
	width: 32px;
	/* Reduced size */
	height: 32px;
	margin-bottom: 8px;
}

.service-name {
	display: block;
	font-weight: 500;
	margin-bottom: 5px;
}

.service-rating .star img {
	width: 12px;
	/* Even smaller stars */
	height: 12px;
}

/* Reviews Section */
.reviews-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-bottom: 30px;
	flex-wrap: wrap;
	gap: 15px;
}

.reviews-controls {
	display: flex;
	align-items: center;
	gap: 20px;
}

.sort-dropdown select {
	padding: 5px 10px;
	border-radius: 4px;
	border: 1px solid #ddd;
	background: white;
}

.reviews-actions {
	margin-bottom: 20px;
}

.reviews-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.review-card {
	background: #fff;
	border: 1px solid var(--border-color);
	border-radius: 12px;
	padding: 20px;
	transition: transform 0.2s;
}

.review-card:hover {
	box-shadow: var(--shadow-sm);
}

.review-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 15px;
}

/* Make review stars smaller */
.review-rating img {
	width: 16px;
	height: 16px;
}

.review-author {
	display: flex;
	align-items: center;
	gap: 12px;
}

.review-author .avatar {
	width: 45px;
	height: 45px;
	border-radius: 50%;
	object-fit: cover;
}

.author-meta {
	display: flex;
	flex-direction: column;
}

.author-meta .name {
	font-weight: 700;
	color: var(--secondary-color);
}

.author-meta .date {
	font-size: 0.8rem;
	color: #999;
}

.review-body {
	color: #555;
	line-height: 1.6;
	margin-bottom: 15px;
}

.review-footer {
	display: flex;
	justify-content: flex-end;
}

.vote-controls {
	display: flex;
	align-items: center;
	gap: 10px;
}

.vote-btn {
	background: none;
	border: none;
	cursor: pointer;
	opacity: 0.5;
	transition: opacity 0.2s;
	padding: 0;
}

.vote-btn:hover {
	opacity: 1;
}

.vote-btn.active {
	opacity: 1;
	transform: scale(1.1);
}

.vote-btn img {
	width: 18px;
	height: 18px;
}

/* Tooltip for reviews */
.tooltip-container {
  position: relative;
  display: inline-block;
}

.tooltip-text {
  visibility: hidden;
  width: 220px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px;
  position: absolute;
  z-index: 1;
  bottom: 125%; /* Position the tooltip above the icon */
  left: 50%;
  margin-left: -110px; /* Use half of the width to center the tooltip */
  opacity: 0;
  transition: opacity 0.3s;
  font-size: 0.8rem;
  font-weight: normal;
}

.tooltip-container:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}

/* Related Sites */
.related-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 20px;
}

.related-card {
	display: block;
	text-decoration: none;
	background: white;
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	transition: transform 0.3s, box-shadow 0.3s;
	border: 1px solid var(--border-color);
}

.related-card:hover {
	transform: translateY(-5px);
	box-shadow: var(--shadow-md);
}

.card-image {
	height: 160px;
	overflow: hidden;
}

.card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s;
}

.related-card:hover .card-image img {
	transform: scale(1.05);
}

.card-content {
	padding: 15px;
}

.card-title {
	margin: 0 0 10px 0;
	font-size: 1.1rem;
	color: var(--secondary-color);
	font-weight: 700;
}

.card-meta {
	font-size: 0.85rem;
	color: #666;
}

.card-categories {
	margin-bottom: 10px;
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}

.cat-tag {
	background: #f0f0f0;
	padding: 2px 8px;
	border-radius: 10px;
	font-size: 0.75rem;
}

.card-rating {
	display: flex;
	align-items: center;
	gap: 5px;
	margin-bottom: 5px;
}

.card-rating img {
	width: 14px;
	height: 14px;
	object-fit: contain;
}

.card-distance {
	display: flex;
	align-items: center;
	gap: 5px;
	color: #888;
	font-size: 0.8rem;
}

.card-distance img {
	width: 14px;
	height: 14px;
	opacity: 0.6;
}

/* Ads */
.block-publi {
	margin: 0;
	text-align: center;
	background: #f4f4f4;
	padding: 10px;
	border-radius: 8px;
	overflow: hidden;
	/* Prevent overflow */
}

.block-publi-wide {
	width: 100%;
	max-width: 100%;
}

@media (max-width: 768px) {
	.immersive-hero {
		height: 50vh;
		min-height: 400px;
	}

	.hero-title {
		font-size: 2.2rem;
	}

	.info-grid {
		margin-top: 0;
		grid-template-columns: 1fr;
	}

	.main-container {
		padding-top: 20px;
	}

	.hero-meta {
		flex-direction: column;
		align-items: flex-start;
	}

	.hero-actions {
		width: 100%;
		justify-content: flex-end;
	}
}

/* Animations */
@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Forms (Reviews, Suggest) - Keeping basic styles but modernizing */
#formReview,
#formSuggest {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.7);
	z-index: 1030; /* Higher than header (1020) */
	display: flex;
	align-items: center;
	justify-content: center;
	visibility: hidden;
	transition: all 0.3s;
}

#formReview.show,
#formSuggest.show {
	opacity: 1;
	visibility: visible;
}

form {
	background: white;
	padding: 30px;
	border-radius: var(--radius-md);
	width: 90%;
	max-width: 600px;
	max-height: 90vh;
	overflow-y: auto;
	position: relative; /* For close button positioning */
	box-shadow: var(--shadow-lg);
}

/* A11y: Improve focus visibility inside forms */
#formReview form :is(input, select, textarea, button):focus-visible, #formSuggest form :is(input, select, textarea, button):focus-visible {
	outline: 2px solid var(--primary-color);
	outline-offset: 2px;
}

/* Specific styles for Review Form content */
#formReview .close {
	position: absolute;
	top: 15px;
	right: 15px;
	cursor: pointer;
	width: 24px;
	height: 24px;
	opacity: 0.6;
	transition: all 0.2s ease;
}

#formReview .close:hover {
	opacity: 1;
	transform: rotate(90deg);
}

#formReview .formTitle {
	font-size: 1.5rem;
	font-weight: 700;
	margin-bottom: 10px;
	color: var(--secondary-color);
}

#formReview .formUser {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 25px;
	font-weight: 600;
}

#formReview .formUser .avatar img {
	width: 40px;
	height: 40px;
	border-radius: 50%;
}

#formReview .formSecTitle {
	font-weight: 600;
	margin: 20px 0 10px;
	color: #555;
}

#formReview #reviewMsg {
	width: 100%;
	min-height: 120px;
	padding: 10px;
	border-radius: 8px;
	border: 1px solid var(--border-color);
	font-family: inherit;
	font-size: 1rem;
	resize: vertical;
}

#formReview .formButtons {
	margin-top: 30px;
	display: flex;
	gap: 15px;
	justify-content: flex-end;
}

/* A11y: Improve focus visibility inside forms */
#formReview form :is(input, select, textarea, button):focus-visible {
	outline: 2px solid var(--primary-color);
	outline-offset: 2px;
}

/* Review Form - Services List */
#formServices {
	list-style: none;
	padding: 15px;
	margin: 10px 0 20px;
	background: var(--light-gray);
	border-radius: var(--radius-md);
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 15px;
}

#formServices li {
	background: white;
	padding: 10px;
	border-radius: 8px;
	border: 1px solid var(--border-color);
}

#formServices .question {
	font-weight: 500;
	font-size: 0.9rem;
	display: block;
	margin-bottom: 8px;
}

#formServices .rate {
	display: flex;
	align-items: center;
	gap: 8px;
}

#formServices .answer {
	cursor: pointer;
	transition: all 0.2s ease;
	opacity: 0.6;
}

#formServices .answer.selected {
	opacity: 1;
	transform: scale(1.1);
}

#formServices .answer img {
	width: 22px; /* Smaller icons */
	height: 22px;
	display: block;
}

#formServices .rating {
	display: flex;
}

#formServices .rating span {
	font-size: 0.8rem;
	padding: 4px 8px;
	border: 1px solid var(--border-color);
	border-radius: 4px;
}

/* Highlight for non-star selected answers */
#formServices .rating .answer.selected span {
	background-color: var(--primary-color);
	color: white;
	border-color: var(--primary-color);
	font-weight: 600;
}

/* Suggest Form States */
#formSuggest .fields {
	display: none;
	flex-direction: column; /* Or as needed */
}

#formSuggest.fields-visible .reason {
	display: none;
}

#formSuggest.fields-visible .fields {
	display: flex;
}

/* Equipment List Styles */
.equipment-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 15px;
}

.equipment-list li {
	background: var(--light-gray);
	padding: 12px 18px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 500;
	border: 1px solid var(--border-color);
	transition: all 0.2s ease;
}

/* Allergies Section */
.allergies-list {
	list-style: none; /* Remove list bullets */
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
	gap: 20px;
}

.allergy-item {
	display: flex;
	flex-direction: column; /* Stack icon and text vertically */
	align-items: center;   /* Center items horizontally */
	text-align: center;
	gap: 8px; /* Space between icon and text */
}

.allergy-item img {
	width: 64px;  /* Set a fixed width for the icon */
	height: 64px; /* Set a fixed height for the icon */
	object-fit: contain; /* Ensure the image scales correctly within the box */
}

.allergy-item span {
	color: #666;
}

body.zoomed .immersive-hero {
	z-index: 1020;
}

body.zoomed .hero-overlay {
	display: none;
}

/* --- Zoom Styles --- */
.slide.zoomed-in {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.9);
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Show close button when zoomed */
.slide.zoomed-in .closeZoom {
	display: flex;
}

/* Style for the image inside the zoomed slide */
.slide.zoomed-in img.photo {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain; /* Ensure the whole image is visible */
}

/* Hide author when zoomed */
.slide.zoomed-in .photoAuthor {
	display: none;
}

/* --- Content Visibility Logic --- */
/* The skeleton is displayed by default via inline critical CSS */
/* When JS removes .loading, the skeleton is hidden and the main content is shown */
body:not(.loading) #skeleton-loader {
	display: none !important;
}
body:not(.loading) .main-container:not(#skeleton-loader) {
	display: grid !important; /* Or 'block', must match the container's display type */
}

/* --- Accessible Review Form Styles --- */
.form-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	cursor: pointer;
}

#formReview form {
	z-index: 1; /* Sit above the overlay */
}

.form-group {
	margin-bottom: 20px;
}

/* Accessible Star Rating */
.rating-stars {
	display: inline-flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	/* Ensure stars stay in a row */
	flex-wrap: nowrap;
	width: auto;
	padding: 0;
	background: none;
}

.rating-stars input[type="radio"] {
	display: none;
}

.rating-stars label {
	font-size: 2rem;
	color: #ccc;
	cursor: pointer;
	transition: color 0.2s;
}

.rating-stars label:hover,
.rating-stars label:hover ~ label,
.rating-stars input[type="radio"]:checked ~ label {
	color: #ffc700;
}

/* Focus style for stars */
.rating-stars input[type="radio"]:focus-visible + label {
	outline: 2px solid var(--primary-color);
	outline-offset: 2px;
	border-radius: 2px;
}

/* --- Review Success Animation --- */
.success-animation {
	display: none; /* Hidden by default */
	text-align: center;
	padding: 40px 0;
}

.success-animation p {
	font-size: 1.2rem;
	font-weight: 600;
	color: var(--secondary-color);
	animation: fadeInText 0.5s 1s ease-out forwards;
	opacity: 0;
}

/* When success, hide form fields and show animation */
#review-form-content.is-success #reviewContent {
	display: none;
}

#review-form-content.is-success .success-animation {
	display: block;
}

/* Checkmark styles */
.checkmark {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	display: block;
	stroke-width: 3;
	stroke: #4caf50;
	stroke-miterlimit: 10;
	margin: 0 auto 20px;
	box-shadow: inset 0px 0px 0px #4caf50;
	animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
}

.checkmark-circle {
	stroke-dasharray: 166;
	stroke-dashoffset: 166;
	stroke-width: 2;
	stroke-miterlimit: 10;
	stroke: #4caf50;
	fill: none;
	animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark-check {
	transform-origin: 50% 50%;
	stroke-dasharray: 48;
	stroke-dashoffset: 48;
	animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes stroke { 100% { stroke-dashoffset: 0; } }
@keyframes scale { 0%, 100% { transform: none; } 50% { transform: scale3d(1.1, 1.1, 1); } }
@keyframes fill { 100% { box-shadow: inset 0px 0px 0px 40px #4caf50; } }
@keyframes fadeInText { to { opacity: 1; } }

/* --- Review Success Animation --- */
.success-animation {
	display: none; /* Hidden by default */
	text-align: center;
	padding: 40px 0;
}

.success-animation p {
	font-size: 1.2rem;
	font-weight: 600;
	color: var(--secondary-color);
	animation: fadeInText 0.5s 1s ease-out forwards;
	opacity: 0;
}

/* When success, hide form fields and show animation */
#review-form-content.is-success .form-group,
#review-form-content.is-success .formTitle,
#review-form-content.is-success .formUser,
#review-form-content.is-success .formButtons,
#review-form-content.is-success .close {
	display: none;
}

#review-form-content.is-success .success-animation {
	display: block;
}

/* Checkmark styles */
.checkmark {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	display: block;
	stroke-width: 3;
	stroke: #4caf50;
	stroke-miterlimit: 10;
	margin: 0 auto 20px;
	box-shadow: inset 0px 0px 0px #4caf50;
	animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
}

.checkmark-circle {
	stroke-dasharray: 166;
	stroke-dashoffset: 166;
	stroke-width: 2;
	stroke-miterlimit: 10;
	stroke: #4caf50;
	fill: none;
	animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark-check {
	transform-origin: 50% 50%;
	stroke-dasharray: 48;
	stroke-dashoffset: 48;
	animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes stroke { 100% { stroke-dashoffset: 0; } }
@keyframes scale { 0%, 100% { transform: none; } 50% { transform: scale3d(1.1, 1.1, 1); } }
@keyframes fill { 100% { box-shadow: inset 0px 0px 0px 40px #4caf50; } }
@keyframes fadeInText { to { opacity: 1; } }

/* --- Detailed Skeleton for Reviews --- */
.skeleton-review {
	margin-top: 25px;
	padding-top: 20px;
	border-top: 1px solid #f0f0f0;
}

.skeleton-review-header {
	display: flex;
	align-items: center;
	margin-bottom: 15px;
}

.skeleton-avatar {
	width: 45px;
	height: 45px;
	border-radius: 50%;
	margin-right: 12px;
	background-color: #f0f0f0;
	background-image: linear-gradient(to right, #f0f0f0 0%, #e0e0e0 20%, #f0f0f0 40%, #f0f0f0 100%);
	animation: shimmer 2s linear infinite;
}

.skeleton-author-meta {
	flex: 1;
}