/* Responsive Utilities for Holiday Options */

/* Prevent horizontal overflow */
* {
	box-sizing: border-box;
}

.container,
.container-fluid {
	max-width: 100%;
	overflow-x: hidden;
}

/* Responsive images */
img {
	max-width: 100%;
	height: auto;
}

/* Responsive tables */
.table-responsive {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* Mobile-specific adjustments */
@media screen and (max-width: 576px) {
	/* Reduce padding on small screens */
	.container,
	.container-fluid {
		padding-left: 0.75rem;
		padding-right: 0.75rem;
	}
	
	/* Smaller buttons on mobile */
	.btn-lg {
		font-size: 1rem;
		padding: 0.5rem 1rem;
	}
	
	/* Adjust modal padding */
	.modal-body {
		padding: 1rem;
	}
	
	/* Smaller headings on mobile */
	h1 {
		font-size: 1.75rem;
	}
	
	h2 {
		font-size: 1.5rem;
	}
	
	h3 {
		font-size: 1.25rem;
	}
	
	h4 {
		font-size: 1.1rem;
	}
	
	h5 {
		font-size: 1rem;
	}
	
	/* Adjust form headings */
	.form-heading {
		font-size: 1.75rem !important;
		line-height: 2rem !important;
	}
	
	/* Adjust page headings */
	.page-heading {
		font-size: 1.5rem !important;
		line-height: 2rem !important;
	}
	
	/* Better spacing for alerts */
	.alert {
		font-size: 0.875rem;
		padding: 0.5rem 1rem;
	}
	
	/* Adjust card spacing */
	.card {
		margin-bottom: 1rem;
	}
	
	/* Better touch targets */
	button,
	.btn,
	a {
		min-height: 44px;
		min-width: 44px;
	}
	
	/* Adjust navbar height for mobile */
	:root {
		--navbar-height: 70px;
	}
}

/* Tablet adjustments */
@media screen and (min-width: 577px) and (max-width: 991px) {
	.container,
	.container-fluid {
		padding-left: 1rem;
		padding-right: 1rem;
	}
	
	/* Adjust form headings */
	.form-heading {
		font-size: 2rem !important;
		line-height: 2.5rem !important;
	}
	
	/* Adjust page headings */
	.page-heading {
		font-size: 2rem !important;
		line-height: 2.5rem !important;
	}
}

/* Landscape mobile adjustments */
@media screen and (max-width: 991px) and (orientation: landscape) {
	/* Reduce vertical spacing in landscape */
	.mt-5,
	.my-5 {
		margin-top: 2rem !important;
	}
	
	.mb-5,
	.my-5 {
		margin-bottom: 2rem !important;
	}
	
	.pt-5,
	.py-5 {
		padding-top: 2rem !important;
	}
	
	.pb-5,
	.py-5 {
		padding-bottom: 2rem !important;
	}
}

/* Fix for iOS Safari viewport height issues */
@supports (-webkit-touch-callout: none) {
	.background {
		min-height: -webkit-fill-available;
	}
}

/* Prevent text from being too small */
@media screen and (max-width: 576px) {
	body {
		font-size: 14px;
	}
	
	small,
	.small {
		font-size: 0.75rem;
	}
}

/* Ensure buttons don't break on small screens */
.btn {
	white-space: normal;
	word-wrap: break-word;
}

.btn.text-nowrap {
	white-space: nowrap;
}

/* Better spacing for form groups on mobile */
@media screen and (max-width: 576px) {
	.mb-3,
	.mb-4 {
		margin-bottom: 1rem !important;
	}
	
	.mt-3,
	.mt-4 {
		margin-top: 1rem !important;
	}
	
	.row.g-2 {
		--bs-gutter-x: 0.5rem;
		--bs-gutter-y: 0.5rem;
	}
}

/* Fix for rounded pill buttons on small screens */
@media screen and (max-width: 576px) {
	.rounded-pill {
		border-radius: 50rem !important;
		padding-left: 1rem !important;
		padding-right: 1rem !important;
	}
}

/* Ensure modals are properly sized on mobile */
@media screen and (max-width: 576px) {
	.modal-fullscreen {
		width: 100vw;
		max-width: 100vw;
		height: 100vh;
		max-height: 100vh;
		margin: 0;
		border-radius: 0;
	}
	
	.modal-dialog {
		margin: 0;
	}
}

/* Fix for flexbox issues on mobile */
.d-flex {
	flex-wrap: wrap;
}

.flex-nowrap {
	flex-wrap: nowrap !important;
}

/* Better gap spacing on mobile */
@media screen and (max-width: 576px) {
	.gap-3 {
		gap: 0.5rem !important;
	}
	
	.gap-4 {
		gap: 0.75rem !important;
	}
	
	.gap-5 {
		gap: 1rem !important;
	}
}

/* Ensure text doesn't overflow */
.text-truncate {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Better line breaks on mobile */
@media screen and (max-width: 576px) {
	p {
		word-break: break-word;
		overflow-wrap: break-word;
	}
}