/*! Guachinche App - Optimized CSS v1.1.0 */
* {
	font-display: swap;
}
.lazy {
	opacity: 0;
	transition: opacity 0.4s ease-in-out;
	background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
	background-size: 200% 100%;
	animation: shimmer 2s infinite;
}
.lazy.loaded {
	opacity: 1;
	background: none;
	animation: none;
}
@keyframes shimmer {
	0% {
		background-position: -200% 0;
	}
	100% {
		background-position: 200% 0;
	}
}
.transition-all {
	transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
		box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s ease;
	will-change: transform, box-shadow;
}
.hover-shadow:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
.hero-section {
	position: relative;
}
.card {
	border: none;
	border-radius: 15px;
	box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
	transition: all 0.3s ease;
	overflow: hidden;
	background: #fff;
}
.card:hover {
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
	transform: translateY(-2px);
}
.card-header {
	border-bottom: none;
	border-radius: 15px 15px 0 0 !important;
	padding: 1.25rem 1.5rem;
	margin: 0 !important;
	width: 100% !important;
}
.card-header > .card-title > .btn > i {
	color: #495057;
}
.card-header.bg-info {
	background: #17a2b8 !important;
}
.card-header.bg-dark {
	background: #343a40 !important;
}
.card-header h5 {
	color: #fff !important;
	margin: 0;
}
.badge {
	border-radius: 8px;
	font-weight: 500;
	letter-spacing: 0.5px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.badge.bg-light {
	background: #f8f9fa !important;
	border: 1px solid #dee2e6;
	color: #495057 !important;
}
.badge.bg-primary {
	background: #007bff !important;
	color: #fff !important;
}
.badge.bg-success {
	background: #28a745 !important;
	color: #fff !important;
}
.badge.bg-info {
	background: #17a2b8 !important;
	color: #fff !important;
}
.badge.bg-danger {
	background: #dc3545 !important;
	color: #fff !important;
}
.feature-item,
.specialty-item {
	border: 1px solid #e9ecef;
	border-radius: 12px;
	background: #fff;
	transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
	position: relative;
	overflow: hidden;
}
.feature-item::before,
.specialty-item::before {
	content: "";
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: rgba(0, 123, 255, 0.05);
	transition: left 0.6s ease;
}
.feature-item:hover::before,
.specialty-item:hover::before {
	left: 100%;
}
.feature-item:hover,
.specialty-item:hover {
	background: #f8f9fa;
	border-color: #007bff;
	color: #007bff !important;
}
.feature-icon i,
.specialty-icon i {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: rgba(0, 123, 255, 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
}
.feature-item:hover .feature-icon i,
.specialty-item:hover .specialty-icon i {
	background: #007bff;
	color: #fff !important;
	transform: scale(1.1);
}
.rating-badge {
	background: #fff !important;
	border: 2px solid #e9ecef !important;
	transition: all 0.3s ease;
}
.rating-badge:hover {
	border-color: #007bff !important;
	box-shadow: 0 4px 15px rgba(0, 123, 255, 0.2);
}
.rating-stars {
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.2));
}
.social-btn {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
	position: relative;
	overflow: hidden;
}
.social-btn::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.3);
	transition: all 0.6s ease;
	transform: translate(-50%, -50%);
}
.social-btn:hover::before {
	width: 100%;
	height: 100%;
}
.social-btn:hover {
	transform: translateY(-3px) scale(1.05);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}
.alert {
	border: none;
	border-radius: 12px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
	position: relative;
	overflow: hidden;
}
.alert::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 4px;
	height: 100%;
	background: currentColor;
}
.alert-success::before {
	background: #28a745;
}
.alert-danger::before {
	background: #dc3545;
}
.alert-warning::before {
	background: #ffc107;
}
.alert-info::before {
	background: #17a2b8;
}
.contact-info li {
	padding: 0.75rem 1rem;
	border-radius: 8px;
	transition: all 0.3s ease;
}
.contact-info li:hover {
	background: rgba(0, 123, 255, 0.05);
	transform: translateX(5px);
}
.contact-info i {
	width: 20px;
	text-align: center;
}
.opening-hours .border-bottom {
	border-color: rgba(0, 0, 0, 0.05) !important;
	padding: 0.75rem 0;
	transition: all 0.3s ease;
}
.opening-hours .border-bottom:hover {
	background: rgba(0, 123, 255, 0.02);
	border-radius: 8px;
	padding-left: 1rem;
	padding-right: 1rem;
}
.gallery-section {
	position: relative;
}
.hero-image {
	border-radius: 15px;
	transition: all 0.5s ease;
}
.image-overlay {
	border-radius: 15px;
	backdrop-filter: blur(2px);
}
.breadcrumb {
	border-radius: 10px;
	padding: 0.75rem 1.25rem;
	margin-bottom: 1.5rem;
}
.breadcrumb-item + .breadcrumb-item::before {
	content: "›";
	font-weight: 700;
}

.breadcrumb a {
	text-decoration: none;
	transition: all 0.3s ease;
}
.breadcrumb a:hover {
	text-decoration: underline;
}
@media (max-width: 768px) {
	.hero-section::before {
		display: none;
	}
	.card {
		border-radius: 10px;
	}
	.feature-item,
	.specialty-item {
		border-radius: 8px;
	}
	.social-btn {
		width: 45px;
		height: 45px;
	}
	.hero-image {
		border-radius: 10px;
	}
}
@media print {
	.social-btn,
	.image-overlay,
	.action-buttons {
		display: none !important;
	}
	.card {
		box-shadow: none !important;
		border: 1px solid #ddd !important;
	}
	.hero-image {
		max-height: 300px;
	}
}
.btn:focus,
.social-btn:focus,
.feature-item:focus,
.specialty-item:focus {
	outline: 2px solid #007bff;
	outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
	.hero-section::before {
		animation: none;
	}
}
@media (prefers-contrast: high) {
	.card {
		border: 2px solid #000;
	}
	.badge {
		border: 1px solid #000;
	}
}
@media (prefers-color-scheme: dark) {
	.lazy {
		background: #e9ecef;
	}
	body {
		color: #495057;
	}
	.card {
		background: #fff;
		color: #495057;
	}
	.badge.bg-light {
		background: #e9ecef !important;
		color: #495057 !important;
	}
}
.additional-content-section .card {
	border-left: 4px solid #007bff;
}
.faq-section .accordion-button {
	font-size: 0.95rem;
	font-weight: 500;
	border: none;
}
.faq-section .accordion-button:not(.collapsed) {
	background-color: #e7f3ff;
	color: #0056b3;
}
.faq-section .accordion-body {
	font-size: 0.9rem;
	line-height: 1.6;
	background: #fff;
}
.faq-section .accordion-item {
	border: 1px solid #e9ecef;
	border-radius: 8px;
	margin-bottom: 0.5rem;
}
.content-text p {
	line-height: 1.7;
	text-align: justify;
}

.sinborde {
	border: none !important;
	background: transparent !important;
}

.card-header > .card-title > .sinborde {
	color: var(--bs-primary-rgb);
}

/* Mobile Modal Fixes */
@media (max-width: 768px) {
	.modal {
		z-index: 1060 !important;
		opacity: 1 !important;
	}

	.modal-backdrop {
		z-index: 1055 !important;
		opacity: 0.5 !important;
	}

	.navbar {
		z-index: 1030 !important;
	}

	/* Ensure modal is properly sized on mobile */
	.modal-dialog {
		margin: 1rem;
		max-width: calc(100% - 2rem);
	}

	/* Modal content adjustments for mobile */
	.modal-content {
		border-radius: 15px;
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
		opacity: 1 !important;
		background-color: white !important;
	}

	/* Ensure modal appears above collapsed navbar */
	.navbar-collapse.show {
		z-index: 1025 !important;
	}
}

/* Fix for modal appearing behind navbar on mobile */
body.modal-open .navbar {
	z-index: 1020 !important;
}

/* General modal fixes for opacity issues */
.modal.show {
	opacity: 1 !important;
}

.modal.show .modal-dialog {
	opacity: 1 !important;
	transform: none !important;
}

.modal.show .modal-content {
	opacity: 1 !important;
	background-color: white !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
}

/* Ensure modal backdrop doesn't interfere with modal content */
.modal-backdrop.show {
	opacity: 0.5 !important;
}

/* Remove backdrop filter from modal and its children */
.modal,
.modal *,
.modal .card,
.modal .modal-content,
.modal .modal-dialog {
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	filter: none !important;
}

/* Force modal content to be fully opaque and white */
.modal .modal-content {
	background-color: #ffffff !important;
	opacity: 1 !important;
	filter: none !important;
}

/* Force modal interactivity and proper layering */
.modal.show {
	opacity: 1 !important;
	pointer-events: auto !important;
	z-index: 1060 !important;
}

.modal.show .modal-dialog {
	opacity: 1 !important;
	pointer-events: auto !important;
}

.modal.show .modal-content {
	opacity: 1 !important;
	background-color: white !important;
	pointer-events: auto !important;
}

/* Ensure close button works */
.modal .btn-close {
	pointer-events: auto !important;
	z-index: 1070 !important;
	opacity: 1 !important;
}

/* Ensure modal backdrop allows clicks to close */
.modal-backdrop {
	pointer-events: auto !important;
}