/* Custom styles for Barcelona interactive features */
			.barcelona-container {
				max-width: 1200px;
				margin: 0 auto;
				padding: 0 20px;
			}
			
			.barcelona-section {
				display: none;
				padding: 3rem 0;
			}
			
			.barcelona-section.active {
				display: block;
				animation: fadeIn 0.8s ease;
			}
			
			@keyframes fadeIn {
				from { opacity: 0; transform: translateY(20px); }
				to { opacity: 1; transform: translateY(0); }
			}
			
			.barcelona-header {
				text-align: center;
				margin-bottom: 2.5rem;
			}
			
			.barcelona-header h2 {
				color: #ff5d00;
				font-size: 2.4rem;
				position: relative;
				margin-bottom: 1.5rem;
			}
			
			.barcelona-header h2::after {
				content: '';
				position: absolute;
				bottom: -12px;
				left: 50%;
				transform: translateX(-50%);
				width: 100px;
				height: 4px;
				background-color: #080707;
				border-radius: 2px;
			}
			
			/* Section Actions Container */
			.section-actions {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 2rem;
				flex-wrap: wrap;
				gap: 1rem;
			}
			
			.see-all-btn {
				display: inline-flex;
				align-items: center;
				gap: 8px;
				background-color: #2a5298;
				color: white;
				padding: 0.8rem 1.5rem;
				border-radius: 30px;
				font-weight: 600;
				text-decoration: none;
				transition: all 0.3s ease;
				border: none;
				cursor: pointer;
				font-size: 1rem;
				box-shadow: 0 4px 12px rgba(42, 82, 152, 0.2);
			}
			
			.see-all-btn:hover {
				background-color: #1e3c72;
				transform: translateY(-3px);
				box-shadow: 0 6px 15px rgba(42, 82, 152, 0.3);
			}
			
			.see-all-btn i {
				font-size: 0.9em;
			}
			
			/* Top Sights Categories */
			.sight-categories, .hotel-categories {
				display: flex;
				justify-content: center;
				flex-wrap: wrap;
				gap: 15px;
				margin-bottom: 1.5rem;
			}
			
			.category-btn, .hotel-category-btn {
				padding: 0.8rem 1.5rem;
				background-color: #f0f4f8;
				border: 2px solid #d1d9e6;
				border-radius: 30px;
				font-weight: 600;
				color: #4a5568;
				cursor: pointer;
				transition: all 0.3s ease;
			}
			
			.category-btn:hover, .category-btn.active,
			.hotel-category-btn:hover, .hotel-category-btn.active {
				background-color: #faf7f5;
				color: #ff5d00;
				border-color: #ff5d00;
			}
			
			/* Card Container for Top Sights */
			.card-container {
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				gap: 30px;
				margin-top: 2rem;
			}
			
			.flip-card {
				width: 320px;
				height: 380px;
				perspective: 1000px;
			}
			
			.flip-card-inner {
				position: relative;
				width: 100%;
				height: 100%;
				text-align: center;
				transition: transform 0.8s;
				transform-style: preserve-3d;
				border-radius: 12px;
				box-shadow: 0 12px 25px rgba(0, 0, 0, 0.1);
			}
			
			.flip-card:hover .flip-card-inner {
				transform: rotateY(180deg);
			}
			
			.flip-card-front, .flip-card-back {
				position: absolute;
				width: 100%;
				height: 100%;
				-webkit-backface-visibility: hidden;
				backface-visibility: hidden;
				border-radius: 12px;
				overflow: hidden;
			}
			
			.flip-card-front {
				background-color: white;
				color: #333;
			}
			
			.flip-card-front img {
				width: 100%;
				height: 65%;
				object-fit: cover;
			}
			
			.flip-card-front h3 {
				padding: 1.2rem;
				color: black;
				font-size: 1.4rem;
			}
			
			.flip-card-back {
				background: linear-gradient(to bottom right, #faf7f5, #ff6600);
				color: black;
				transform: rotateY(180deg);
				padding: 1.8rem;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				text-align: left;
			}
			
			.flip-card-back h3 {
				margin-bottom: 1rem;
				color: black;
				font-size: 1.5rem;
			}
			
			.flip-card-back p {
				margin-bottom: 0.8rem;
				font-size: 0.95rem;
			}
			
			.card-buttons {
				display: flex;
				flex-direction: column;
				gap: 10px;
				margin-top: 1rem;
			}
			
			.card-btn {
				padding: 0.7rem 1rem;
				background-color: #ff6600;
				color: white;
				border: none;
				border-radius: 5px;
				font-weight: 600;
				cursor: pointer;
				transition: background-color 0.3s ease;
				text-align: center;
				text-decoration: none;
				font-size: 0.9rem;
			}
			
			.card-btn:hover {
				background-color: #e55a00;
			}
			
			.card-btn.secondary {
				background-color: rgba(255, 255, 255, 0.2);
			}
			
			.card-btn.secondary:hover {
				background-color: rgba(255, 255, 255, 0.3);
			}
			
			/* About Barcelona Section */
			.about-content {
				display: flex;
				flex-wrap: wrap;
				gap: 2.5rem;
				align-items: flex-start;
			}
			
			.about-image {
				flex: 1;
				min-width: 300px;
				border-radius: 12px;
				overflow: hidden;
				box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
			}
			
			.about-image img {
				width: 100%;
				height: auto;
				display: block;
				transition: transform 0.5s ease;
			}
			
			.about-image:hover img {
				transform: scale(1.03);
			}
			
			.about-text {
				flex: 2;
				min-width: 300px;
				background-color: white;
				padding: 2rem;
				border-radius: 12px;
				box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
			}
			
			.about-text p {
				margin-bottom: 1.2rem;
				font-size: 1.08rem;
			}
			
			.highlight {
				color: #ff5d00;
				font-weight: 700;
			}
			
			/* Excursions Section Filters */
			.excursion-filters {
				background-color: white;
				border-radius: 12px;
				padding: 2rem;
				margin-bottom: 2.5rem;
				box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
			}
			
			.filter-title {
				color: #ff5d00;
				font-size: 1.5rem;
				margin-bottom: 1.5rem;
				text-align: center;
			}
			
			.filters-container {
				display: grid;
				grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
				gap: 1.5rem;
				margin-bottom: 1.5rem;
			}
			
			.filter-group {
				margin-bottom: 0.5rem;
			}
			
			.filter-group-title {
				font-weight: 600;
				color: black;
				margin-bottom: 0.8rem;
				font-size: 1.1rem;
				display: flex;
				align-items: center;
			}
			
			.filter-group-title i {
				margin-right: 8px;
				color: #ff6600;
			}
			
			.filter-options {
				display: flex;
				flex-wrap: wrap;
				gap: 10px;
			}
			
			.filter-option {
				padding: 0.5rem 1rem;
				background-color: #f0f4f8;
				border: 2px solid #d1d9e6;
				border-radius: 20px;
				font-size: 0.9rem;
				cursor: pointer;
				transition: all 0.3s ease;
			}
			
			.filter-option:hover {
				background-color: #e2e8f0;
			}
			
			.filter-option.active {
				background-color: #faf7f5;
				color: #ff5d00;
				border-color: #ff5d00;
			}
			
			.price-filter {
				background-color: #f8fafc;
				padding: 1.5rem;
				border-radius: 8px;
				margin-top: 1rem;
			}
			
			.price-slider-container {
				display: flex;
				align-items: center;
				gap: 1rem;
				margin-top: 0.5rem;
			}
			
			.price-slider {
				flex: 1;
				height: 6px;
				-webkit-appearance: none;
				appearance: none;
				background: linear-gradient(to right, #f7f9fc, #ff6600);
				border-radius: 3px;
				outline: none;
			}
			
			.price-slider::-webkit-slider-thumb {
				-webkit-appearance: none;
				appearance: none;
				width: 20px;
				height: 20px;
				border-radius: 50%;
				background: #ff6600;
				cursor: pointer;
				border: 2px solid white;
				box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
			}
			
			.price-value {
				font-weight: 600;
				color: #2a5298;
				min-width: 70px;
				text-align: right;
			}
			
			.reset-filters {
				display: block;
				margin: 1.5rem auto 0;
				padding: 0.7rem 1.5rem;
				background-color: #f0f4f8;
				color: #2a5298;
				border: 1px solid #d1d9e6;
				border-radius: 5px;
				font-weight: 600;
				cursor: pointer;
				transition: all 0.3s ease;
			}
			
			.reset-filters:hover {
				background-color: #2a5298;
				color: white;
			}
			
			.excursion-container, .hotel-container, .advice-container, .other-container {
				display: grid;
				grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
				gap: 2rem;
			}
			
			.excursion-card, .hotel-card, .advice-card, .other-card {
				background-color: white;
				border-radius: 12px;
				overflow: hidden;
				box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
				transition: transform 0.3s ease, box-shadow 0.3s ease;
			}
			
			.excursion-card:hover, .hotel-card:hover, .other-card:hover {
				transform: translateY(-10px);
				box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12);
			}
			
			.excursion-card.hidden {
				display: none;
			}
			
			.excursion-image, .hotel-image {
				height: 200px;
				overflow: hidden;
				position: relative;
			}
			
			.excursion-image img, .hotel-image img {
				width: 100%;
				height: 100%;
				object-fit: cover;
				transition: transform 0.5s ease;
			}
			
			.excursion-card:hover .excursion-image img,
			.hotel-card:hover .hotel-image img {
				transform: scale(1.05);
			}
			
			.excursion-badges {
				position: absolute;
				top: 15px;
				left: 15px;
				display: flex;
				flex-direction: column;
				gap: 8px;
			}
			
			.excursion-badge {
				padding: 0.3rem 0.8rem;
				border-radius: 20px;
				font-size: 0.75rem;
				font-weight: 600;
				color: white;
				display: inline-block;
			}
			
			.badge-type { background-color: #2a5298; }
			.badge-theme { background-color: #ff6600; }
			.badge-transport { background-color: #10b981; }
			.badge-duration { background-color: #8b5cf6; }
			
			.excursion-content, .hotel-content, .advice-card, .other-card {
				padding: 1.5rem;
			}
			
			.excursion-header {
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
				margin-bottom: 1rem;
			}
			
			.excursion-title, .hotel-name, .other-title {
				color: black;
				font-size: 1.4rem;
				flex: 1;
			}
			
			.excursion-price, .hotel-price {
				font-weight: 700;
				color: #ff6600;
				font-size: 1.5rem;
				margin-left: 1rem;
			}
			
			.excursion-description, .hotel-description, .other-description {
				margin-bottom: 1.5rem;
				color: #555;
				line-height: 1.6;
			}
			
			.excursion-details {
				display: flex;
				flex-wrap: wrap;
				gap: 1rem;
				margin-bottom: 1.5rem;
				font-size: 0.9rem;
			}
			
			.excursion-detail {
				display: flex;
				align-items: center;
				color: #666;
			}
			
			.excursion-detail i {
				margin-right: 5px;
				color: #2a5298;
			}
			
			.details-btn {
				display: inline-block;
				background-color: #ff6600;
				color: white;
				padding: 0.8rem 1.5rem;
				border-radius: 5px;
				text-decoration: none;
				font-weight: 600;
				transition: background-color 0.3s ease;
				border: none;
				cursor: pointer;
				font-size: 1rem;
				width: 100%;
				text-align: center;
			}
			
			.details-btn:hover {
				background-color: #e55a00;
			}
			
			.no-results {
				grid-column: 1 / -1;
				text-align: center;
				padding: 3rem;
				background-color: white;
				border-radius: 12px;
				box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
				color: #666;
				display: none;
			}
			
			/* Itineraries Section */
			.itinerary-container {
				display: grid;
				grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
				gap: 2rem;
			}
			
			.itinerary-day {
				background-color: white;
				border-radius: 12px;
				padding: 1.8rem;
				box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
				border-left: 5px solid #ff6600;
				cursor: pointer;
				transition: transform 0.3s ease;
			}
			
			.itinerary-day:hover {
				transform: translateY(-5px);
			}
			
			.day-title {
				color: black;
				margin-bottom: 1.2rem;
				font-size: 1.5rem;
				display: flex;
				align-items: center;
			}
			
			.day-title i {
				margin-right: 10px;
				color: #ff6600;
			}
			
			.day-content {
				margin-bottom: 1.5rem;
			}
			
			.itinerary-point {
				margin-bottom: 0.8rem;
				padding-left: 1.2rem;
				position: relative;
			}
			
			.itinerary-point::before {
				content: '•';
				position: absolute;
				left: 0;
				color: #ff6600;
				font-weight: bold;
			}
			
			.hotel-rating {
				color: #ffcc00;
				margin-bottom: 0.8rem;
			}
			
			.hotel-location {
				color: #666;
				margin-bottom: 1rem;
				font-size: 0.95rem;
			}
			
			.advice-icon, .other-icon {
				font-size: 2.5rem;
				color: #2a5298;
				margin-bottom: 1rem;
			}
			
			.advice-title {
				color: #2a5298;
				font-size: 1.3rem;
				margin-bottom: 1rem;
			}
			
			.advice-text {
				color: #555;
			}
			
			/* Gallery Section */
			.gallery {
				display: grid;
				grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
				gap: 20px;
				margin-top: 2rem;
			}
			
			.gallery-item {
				position: relative;
				overflow: hidden;
				border-radius: 10px;
				box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
				cursor: pointer;
				height: 220px;
			}
			
			.gallery-item img {
				width: 100%;
				height: 100%;
				object-fit: cover;
				transition: transform 0.5s ease;
			}
			
			.gallery-item:hover img {
				transform: scale(1.08);
			}
			
			.gallery-item-overlay {
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
				color: white;
				padding: 15px;
				transform: translateY(100%);
				transition: transform 0.3s ease;
			}
			
			.gallery-item:hover .gallery-item-overlay {
				transform: translateY(0);
			}
			
			/* Modal for image gallery */
			.barcelona-modal {
				display: none;
				position: fixed;
				z-index: 10000;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				background-color: rgba(0, 0, 0, 0.95);
				justify-content: center;
				align-items: center;
				animation: fadeIn 0.3s ease;
			}
			
			.barcelona-modal-content {
				max-width: 90%;
				max-height: 90%;
				border-radius: 8px;
				box-shadow: 0 0 30px rgba(255, 255, 255, 0.1);
			}
			
			.close-barcelona-modal {
				position: absolute;
				top: 25px;
				right: 35px;
				color: white;
				font-size: 45px;
				font-weight: bold;
				cursor: pointer;
				transition: color 0.3s ease;
			}
			
			.close-barcelona-modal:hover {
				color: #ffcc00;
			}
			
			/* New Modal for Itineraries and Hotels */
			.info-modal {
				display: none;
				position: fixed;
				z-index: 10000;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				background-color: rgba(0, 0, 0, 0.8);
				justify-content: center;
				align-items: center;
				animation: fadeIn 0.3s ease;
			}
			
			.info-modal-content {
				background-color: white;
				border-radius: 12px;
				width: 90%;
				max-width: 700px;
				max-height: 85%;
				overflow-y: auto;
				padding: 2rem;
				position: relative;
				box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
			}
			
			.info-modal-header {
				margin-bottom: 1.5rem;
			}
			
			.info-modal-title {
				color: #2a5298;
				font-size: 1.8rem;
				margin-bottom: 0.5rem;
			}
			
			.info-modal-subtitle {
				color: #666;
				font-size: 1.1rem;
			}
			
			.info-modal-body {
				margin-bottom: 2rem;
				line-height: 1.6;
			}
			
			.info-modal-buttons {
				display: flex;
				justify-content: flex-end;
				gap: 15px;
			}
			
			.modal-btn {
				padding: 0.8rem 1.5rem;
				border-radius: 5px;
				font-weight: 600;
				cursor: pointer;
				transition: all 0.3s ease;
				border: none;
				font-size: 1rem;
			}
			
			.modal-btn.more-info {
				background-color: #2a5298;
				color: white;
			}
			
			.modal-btn.more-info:hover {
				background-color: #1e3c72;
			}
			
			.modal-btn.close-modal-btn {
				background-color: #f0f4f8;
				color: #4a5568;
			}
			
			.modal-btn.close-modal-btn:hover {
				background-color: #e2e8f0;
			}
			
			/* Navigation Tabs for Barcelona */
			.barcelona-nav {
				display: flex;
				justify-content: center;
				flex-wrap: wrap;
				margin-bottom: 2rem;
				background-color: white;
				padding: 1rem;
				border-radius: 12px;
				box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
			}
			
			.barcelona-nav-btn {
				padding: 0.8rem 1.5rem;
				background: none;
				border: none;
				font-size: 1rem;
				font-weight: 600;
				color: #050505;
				cursor: pointer;
				transition: all 0.3s ease;
				position: relative;
				border-radius: 5px;
				margin: 0.2rem;
			}
			
			.barcelona-nav-btn:hover, .barcelona-nav-btn.active {
				color: #ff6600;
				background-color: #f0f4f8;
			}
			
			.barcelona-nav-btn.active::after {
				content: '';
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 3px;
				background-color: #080807;
			}
			
			/* Dropdown menu for "Other" section */
			.barcelona-dropdown {
				position: relative;
				display: inline-block;
			}
			
			.barcelona-dropdown-content {
				display: none;
				position: absolute;
				background-color: white;
				min-width: 200px;
				box-shadow: 0 8px 16px rgba(0,0,0,0.1);
				z-index: 10001;
				border-radius: 0 0 8px 8px;
				overflow: hidden;
				top: 100%;
				left: 0;
			}
			
			.barcelona-dropdown-content a {
				color: #2a5298;
				padding: 12px 16px;
				text-decoration: none;
				display: block;
				font-weight: 500;
				transition: background-color 0.3s ease;
				border-bottom: 1px solid #f0f4f8;
			}
			
			.barcelona-dropdown-content a:hover {
				background-color: #f0f4f8;
				color: #ff6600;
			}
			
			.barcelona-dropdown:hover .barcelona-dropdown-content {
				display: block;
			}
			
			.barcelona-dropdown:hover .barcelona-nav-btn {
				color: #ff6600;
				background-color: #f0f4f8;
			}
			
			.barcelona-dropdown .barcelona-nav-btn::after {
				content: ' ▾';
				font-size: 0.9em;
			}
			
			/* Responsive adjustments */
			@media (max-width: 768px) {
				.itinerary-container, .excursion-container, .filters-container, .card-container {
					grid-template-columns: 1fr;
				}
				
				.flip-card {
					width: 100%;
					max-width: 350px;
				}
				
				.barcelona-nav {
					flex-direction: column;
				}
				
				.barcelona-nav-btn {
					width: 100%;
					text-align: left;
				}
				
				.barcelona-dropdown-content {
					position: static;
					width: 100%;
					box-shadow: none;
				}
				
				.barcelona-header h2 {
					font-size: 1.8rem;
				}
				
				.about-content {
					flex-direction: column;
				}
				
				.info-modal-buttons {
					flex-direction: column;
				}
				
				.info-modal-content {
					width: 95%;
					padding: 1.5rem;
				}
				
				.section-actions {
					flex-direction: column;
					align-items: stretch;
				}
				
				.see-all-btn {
					align-self: center;
				}
			}
			
			/* CSS для disabled кнопок */
button:disabled,
.category-btn:disabled,
.hotel-category-btn:disabled,
.filter-option:disabled,
.details-btn:disabled,
.card-btn:disabled,
.modal-btn:disabled,
.barcelona-nav-btn:disabled,
.see-all-btn:disabled,
.reset-filters:disabled {
	opacity: 0.6;
	cursor: not-allowed !important;
	pointer-events: none;
	position: relative;
}

/* Orange scroll-to-top arrow styles */
  .scroll-to-top {
	position: fixed;
	bottom: 30px;
	right: 30px;
	width: 50px;
	height: 50px;
	background-color: #ff6600;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(20px);
	transition: all 0.3s ease;
	z-index: 9999;
	box-shadow: 0 4px 12px rgba(255, 102, 0, 0.3);
  }
  
  .scroll-to-top.visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
  }
  
  .scroll-to-top:hover {
	background-color: #e55a00;
	box-shadow: 0 6px 16px rgba(255, 102, 0, 0.4);
	transform: translateY(-3px);
  }
  
  .scroll-to-top:active {
	transform: translateY(-1px);
  }
  
  .scroll-to-top i {
	color: white;
	font-size: 24px;
	transition: transform 0.3s ease;
  }
  
  .scroll-to-top:hover i {
	transform: translateY(-2px);
  }
  
  /* Animation for auto-scrolling when hovering */
  .scroll-to-top.scrolling i {
	animation: bounce 0.8s infinite alternate;
  }
  
  @keyframes bounce {
	from {
	  transform: translateY(0);
	}
	to {
	  transform: translateY(-5px);
	}
  }

/* Дополнительные стили для disabled кнопок в разных состояниях */
button:disabled:hover,
.category-btn:disabled:hover,
.hotel-category-btn:disabled:hover,
.filter-option:disabled:hover,
.details-btn:disabled:hover,
.card-btn:disabled:hover,
.modal-btn:disabled:hover,
.barcelona-nav-btn:disabled:hover,
.see-all-btn:disabled:hover,
.reset-filters:disabled:hover {
	transform: none !important;
	box-shadow: none !important;
	background-color: inherit !important;
}

/* Специфичные стили для разных типов кнопок */
.see-all-btn:disabled {
	background-color: #a0aec0 !important;
	box-shadow: none !important;
}

.category-btn:disabled,
.hotel-category-btn:disabled {
	background-color: #e2e8f0 !important;
	color: #718096 !important;
	border-color: #cbd5e0 !important;
}

.filter-option:disabled {
	background-color: #f7fafc !important;
	color: #a0aec0 !important;
	border-color: #e2e8f0 !important;
}

.details-btn:disabled,
.card-btn:disabled {
	background-color: #fed7d7 !important;
	color: #742a2a !important;
}

.modal-btn:disabled {
	opacity: 0.5;
}

.barcelona-nav-btn:disabled {
	color: #a0aec0 !important;
	background-color: #f7fafc !important;
}

/* Индикатор disabled состояния */
button:disabled::after {
	content: " (недоступно)";
	font-size: 0.8em;
	font-weight: normal;
}

/* Для кнопок с иконками */
button:disabled i {
	opacity: 0.5;
}

/* Адаптация для мобильных устройств */
@media (max-width: 768px) {
	button:disabled::after {
		content: "";
		display: none;
	}
}

/* Исправление скачивания */
@media (max-width: 768px) {
    .other-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0 15px;
        width: 100%;
        overflow-x: hidden;
    }
    
    .other-card {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding: 1.5rem;
        box-sizing: border-box;
    }
}

/* Исправление для карточек отелей на мобильных */
@media (max-width: 768px) {
    .hotel-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        padding: 0 10px;
        box-sizing: border-box;
    }
    
    .hotel-card {
        width: 100%;
        max-width: 400px;
        margin: 0 auto 20px;
        display: flex;
        flex-direction: column;
    }
    
    /* Убедимся, что изображение не выходит за пределы */
    .hotel-image {
        width: 100%;
        height: 200px;
    }
    
    .hotel-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    /* Центрируем контент карточки */
    .hotel-content {
        padding: 15px;
        text-align: center;
    }
}

/* Дополнительный фикс для очень маленьких экранов */
@media (max-width: 480px) {
    .hotel-container {
        padding: 0 5px;
    }
    
    .hotel-card {
        margin: 0 auto 15px;
    }
}