/* 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: flex;
	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;
	right: 20px;
	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;
}

.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;
}

/* 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;
}

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;
}

.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 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-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: 30px 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.8);
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	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;
	box-shadow: var(--shadow-lg);
}

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

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