/* Responsive CSS for home-flip.php */

/* Desktop and above (1024px+) */
@media (min-width: 1024px) {
	.search-card p {
		font-size: 16px;
		line-height: 20px;
	}
	
	.search-button-container button {
		padding: 1.25rem 2rem;
		font-size: 1.125rem;
		min-height: 56px;
	}
	
	/* Popular Destination Section - Desktop Layout */
	.popular-destination {
		max-width: 1400px;
		margin: 0 auto 4rem auto;
		padding: 0 2rem 2rem 2rem;
	}
	
	.popular-destination h2 {
		font-size: 28px;
		margin-bottom: 3rem;
		text-align: center;
	}
	
	/* Swiper optimization for desktop */
	.popular-destination .swiper {
		max-width: 1200px;
		margin: 0 auto;
	}
	
	/* Hotel Recommendation Section - Desktop Layout */
	.hotel-recommendation {
		max-width: 1400px;
		margin: 0 auto 4rem auto;
		padding: 0 2rem 3rem 2rem;
	}
	
	.hotel-recommendation h2 {
		font-size: 28px;
		margin-bottom: 3rem;
		text-align: center;
	}
	
	.hotel-grid {
		grid-template-columns: repeat(4, 1fr);
		gap: 2rem;
		max-width: 1400px;
		margin-left: auto;
		margin-right: auto;
	}

    section.hotel-search-container {
        margin-bottom: 8rem;
    }
}

/* Ultra-wide Desktop (1600px+) */
@media (min-width: 1600px) {
	/* Even more spacing for ultra-wide screens */
	.popular-destination {
		margin: 0 auto 5rem auto;
		padding: 0 3rem 3rem 3rem;
	}
	
	.hotel-recommendation {
		margin: 0 auto 5rem auto;
		padding: 0 3rem 4rem 3rem;
	}
	
	.popular-destination h2,
	.hotel-recommendation h2 {
		font-size: 32px;
		margin-bottom: 4rem;
	}
	
	.hotel-grid {
		gap: 2.5rem;
	}
    
}

/* Large Desktop (1200px - 1599px) */
@media (min-width: 1200px) and (max-width: 1599px) {
	.popular-destination {
		padding: 0 2rem 2.5rem 2rem;
	}
	
	.hotel-recommendation {
		padding: 0 2rem 3.5rem 2rem;
	}
	
	.hotel-grid {
		grid-template-columns: repeat(4, 1fr);
		gap: 1.75rem;
	}
}

/* Medium Desktop (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
	.hotel-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 1.25rem;
	}
}

/* Tablet Portrait (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
	.search-card p {
		font-size: 15px;
		line-height: 19px;
	}
	
	.search-input-wrapper {
		padding: 14px 16px;
		border-radius: 10px;
	}
	
	.search-input-wrapper input {
		font-size: 1.1rem;
		padding-left: 0.75rem;
	}
	
	.search-button-container button {
		padding: 1.125rem 1.5rem;
		font-size: 1.1rem;
		min-height: 52px;
		border-radius: 36px;
	}
	
	.date-selector {
		padding: 6px 10px;
		border-radius: 10px;
	}
	
	.option-box {
		padding: 10px 12px;
		border-radius: 10px;
		font-size: 1.1rem;
	}
	
	.duration-container::before,
	.duration-container::after {
		width: 18px;
		height: 1.5px;
	}

	.duration-container::before {
		left: -18px;
	}

	.duration-container::after {
		right: -18px;
	}
	
	.duration-badge {
		padding: 4px 12px;
		min-width: 4rem;
		min-height: 1.5rem;
		font-size: 0.9rem;
	}
	
	/* Section layout for tablets */
	.popular-destination {
		max-width: 1200px;
		margin: 0 auto 3rem auto;
		padding: 0 1.5rem 1.5rem 1.5rem;
	}
	
	.popular-destination h2 {
		font-size: 24px;
		margin-bottom: 2.5rem;
		text-align: center;
	}
	
	.hotel-recommendation {
		max-width: 1200px;
		margin: 0 auto 3rem auto;
		padding: 0 1.5rem 2.5rem 1.5rem;
	}
	
	.hotel-recommendation h2 {
		font-size: 24px;
		margin-bottom: 2.5rem;
		text-align: center;
	}
	
	.hotel-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 1rem;
	}
	
	.hotel-card img {
		height: 140px;
	}

    section.hotel-search-container {
        margin-bottom: 7rem;
    }
}

/* Tablet Portrait & Large Mobile (577px - 767px) */
@media (min-width: 577px) and (max-width: 767px) {
	.search-card {
		width: 92%;
		padding: 1.125rem;
		border-radius: 22px;
		bottom: -52px;
	}
	
	.search-card p {
		font-size: 14px;
		line-height: 18px;
	}
	
	.hotel-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 1.25rem;
	}
	
	.hotel-card img {
		height: 150px;
	}
}

/* Responsive adjustments for medium mobile devices */
@media (max-width: 576px) {
	.hotel-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 1rem;
	}
	
	.hotel-card img {
		height: 120px;
	}
}

/* Large Mobile (577px - 767px) - Additional styles */
@media (min-width: 577px) and (max-width: 767px) {
	.search-card {
		width: 92%;
		padding: 1.125rem;
		border-radius: 22px;
		bottom: -52px;
	}
	
	.search-card p {
		font-size: 14px;
		line-height: 18px;
	}
}

/* Small Mobile (400px - 576px) */
@media (max-width: 400px) {
	/* Search card optimizations */
	.search-card {
		padding: 24px;
		width: 94%;
		border-radius: 20px;
		bottom: -100px;
	}

	.search-card p {
		font-size: 13px;
		line-height: 16px;
		margin-bottom: 0.375rem;
	}

	.search-input-wrapper {
		padding: 10px 12px;
	}

	.search-input-wrapper input {
		font-size: 0.9rem;
	}

	.date-selector {
		padding: 3px 6px;
	}

	.option-box {
		padding: 6px 8px;
		font-size: 0.9rem;
	}

	.search-button-container button {
		padding: 0.875rem;
		font-size: 0.95rem;
		min-height: 44px;
	}

	.date-selector {
		padding: 4px 12px;
		gap: 6px;
	}

	.date-selector .date-day-number {
		font-size: 20px;
		min-width: max-content;
		min-height: 1.6rem;
	}

	.date-info {
		font-size: 9px;
		line-height: 12px;
	}

	/* Duration badge adjustment */
	.duration-badge {
		padding: 1px 8px;
		font-size: 11px;
		min-width: 3rem;
		min-height: 1.1rem;
	}

	/* Guest options optimization */
	.guest-option-group {
		column-gap: 8px;
	}

	.option-box {
		padding: 6px 8px;
		font-size: 14px;
		line-height: 16px;
	}

	/* Search input adjustments */
	.search-input-wrapper {
		padding: 10px;
	}

	.search-input-wrapper input {
		font-size: 14px;
	}

	/* Date range header spacing */
	.date-range-header {
		margin-bottom: 3px;
	}

	.date-range-header p {
		font-size: 13px;
		width: 28%;
	}

	/* Guest preferences section */
	.guest-preferences {
		margin-top: 0.75rem;
	}

	.guest-preferences p {
		font-size: 13px;
		margin-bottom: 3px;
	}

	/* Search button adjustments */
	.search-button-container {
		margin-top: 0.75rem;
	}

	.search-button-container button {
		padding: 0.875rem;
		font-size: 15px;
		font-family: 'Samsung Sans';
	}

	/* Section spacing optimization */
	section.location-search {
		margin-bottom: 1rem;
	}

	/* Hotel search container height adjustment for small screens */
	section.hotel-search-container {
		height: 300px;
		margin-bottom: 8rem;
	}

	/* Section spacing adjustments for small screens */
	.popular-destination {
		margin-bottom: 1.5rem;
		padding-bottom: 0.75rem;
	}

	.hotel-recommendation {
		margin-bottom: 2.5rem;
		padding-bottom: 2rem;
	}

	/* Hotel cards optimization for small screens */
	.hotel-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 0.75rem;
		margin-top: 0.25rem;
	}

	.hotel-card-body {
		padding: 10px 6px 6px 6px;
	}

	.hotel-card img {
		height: 110px;
	}

	.hotel-name {
		font-size: 13px;
	}

	.hotel-show-price {
		font-size: 13px;
	}

	.hotel-rating {
		font-size: 11px;
	}

	/* Typography spacing for small screens */
	h2 {
		margin-bottom: 1.5rem;
		font-size: 18px;
	}

	.hotel-recommendation h2 {
		font-size: 18px;
		margin-bottom: 1.5rem;
	}
}

/* Extra small devices (iPhone SE 1st gen: 320px) */
@media (max-width: 350px) {
	.search-card {
		padding: 0.75rem;
		width: 96%;
		bottom: -45px;
		border-radius: 18px;
	}

	.search-card p {
		font-size: 12px;
		line-height: 15px;
		margin-bottom: 0.25rem;
	}

	.search-input-wrapper {
		padding: 8px 10px;
	}

	.search-input-wrapper input {
		font-size: 0.85rem;
	}

	.date-selector {
		padding: 2px 4px;
	}

	.option-box {
		padding: 5px 6px;
		font-size: 0.85rem;
	}

	.search-button-container button {
		padding: 0.75rem;
		font-size: 0.9rem;
		min-height: 40px;
		border-radius: 28px;
	}

	.date-selector {
		padding: 4px;
	}

	.date-selector .date-day-number {
		font-size: 18px;
		min-width: 2rem;
		min-height: 1.4rem;
	}

	.option-box {
		text-align: center;
		font-size: 13px;
	}

	/* Further spacing optimization for extra small screens */
	section.hotel-search-container {
		margin-bottom: 4rem;
	}

	.popular-destination {
		margin-bottom: 3rem;
		padding-bottom: 0.5rem;
	}

	.hotel-recommendation {
		margin-bottom: 2rem;
		padding-bottom: 1.5rem;
	}

	/* Hotel cards for extra small screens */
	.hotel-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 0.625rem;
		margin-top: 0;
	}

	.hotel-card-body {
		padding: 8px 5px 5px 5px;
		gap: 5px;
	}

	.hotel-card img {
		height: 100px;
		margin-bottom: 1px;
	}

	.hotel-name {
		font-size: 12px;
		line-height: 1.25;
	}

	.hotel-show-price {
		font-size: 12px;
	}

	.hotel-rating {
		font-size: 10px;
	}

	.hotel-card-body p {
		font-size: 10px;
	}

	.price-display span {
		font-size: 9px;
	}

	/* Typography for extra small screens */
	h2 {
		margin-bottom: 1.25rem;
		font-size: 17px;
	}

	.hotel-recommendation h2 {
		font-size: 17px;
		margin-bottom: 1.25rem;
	}
}

/* Very small devices (below 320px) */
@media (max-width: 319px) {
	.hotel-grid {
		grid-template-columns: 1fr;
		gap: 1rem;
		max-width: 280px;
		margin-left: auto;
		margin-right: auto;
	}
	
	.hotel-card img {
		height: 180px;
	}
	
	.hotel-card-body {
		padding: 12px 10px 10px 10px;
	}
	
	.hotel-name {
		font-size: 14px;
		line-height: 1.3;
	}
	
	.hotel-show-price {
		font-size: 14px;
	}
}