/* Global styles for Shoporama */
html, body {
	font-family: 'Inter', sans-serif;
	overflow-x: hidden !important;
	max-width: 100% !important;
}

/* Prevent horizontal scroll on mobile */
@media (max-width: 768px) {
	main, nav, footer {
		overflow-x: hidden !important;
	}
}

/* Ensure all images and elements don't overflow on mobile */
@media (max-width: 768px) {
	img, svg, video, canvas, audio, iframe, embed, object {
		max-width: 100% !important;
	}
}

/* Fix for any element that might be too wide on mobile */
@media (max-width: 768px) {
	* {
		max-width: 100vw !important;
	}
}

/* Specific fix for the mobile menu */
@media (max-width: 1279px) {
	.menu-items {
		max-width: 100vw !important;
		overflow-x: hidden !important;
	}
}

/* Sticky nav styles */
body.navbar-scrolled {
	padding-top: 3rem; /* Reduced padding when navbar is smaller */
}

#navbar.scrolled {
	padding-top: 0.375rem; /* py-1.5 */
	padding-bottom: 0.375rem; /* py-1.5 */
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

#navbar.scrolled .logo-img {
	height: 2rem; /* h-8 - smaller than before */
}

#navbar.scrolled .cta-button {
	padding-top: 0.375rem;
	padding-bottom: 0.375rem;
	font-size: 0.875rem; /* text-sm */
}

/* Modal styles */
.modal-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 50;
	align-items: flex-start;
	justify-content: center;
	padding-top: 2rem;
	overflow-y: auto;
}
.modal-overlay.visible { display: flex; }

@media (min-width: 768px) {
	.modal-overlay {
		align-items: center;
		padding-top: 0;
	}
}

/* Callback Modal styles */
.callback-modal-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 50;
	align-items: center;
	justify-content: center;
}
.callback-modal-overlay.visible { display: flex; }

/* Emergency Modal styles */
.emergency-modal-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 50;
	align-items: center;
	justify-content: center;
}
.emergency-modal-overlay.visible { display: flex; }

/* Menu styles */
.menu-items {
	display: none;
	transform: translateX(-100%);
	transition: transform 0.3s ease-in-out;
}

/* Mobile menu backdrop */
@media (max-width: 1279px) {
	.menu-items.visible::before {
		content: '';
		position: fixed;
		inset: 0;
		background-color: rgba(0, 0, 0, 0.3);
		z-index: -1;
	}
}
@media (min-width: 1280px) {
	.menu-items {
		display: flex !important;
		transform: none !important;
		position: relative !important;
		top: auto !important;
		left: auto !important;
		width: auto !important;
		height: auto !important;
		background: transparent !important;
	}
	.menu-fries { display: none; }
}
.menu-items.visible {
	display: block !important;
	transform: translateX(0);
}

/* Custom container width */
.container {
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
}

/* Input focus styles */
input:focus, textarea:focus, select:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* Ensure dropdown works on desktop */
@media (min-width: 1280px) {
	.group:hover .group-hover\:opacity-100 {
		opacity: 1 !important;
	}
	.group:hover .group-hover\:visible {
		visibility: visible !important;
	}
}

/* Smooth scrolling */
html {
	scroll-behavior: smooth;
}

/* Logo slider animation */
@keyframes slide {
	0% { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}
.animate-slide {
	animation: slide 30s linear infinite;
}

/* Toggle switch styles */
.toggle-switch {
	position: relative;
	display: inline-block;
	width: 44px;
	height: 24px;
}

.toggle-switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

.toggle-slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	-webkit-transition: .15s;
	transition: .15s;
	border-radius: 12px;
}

.toggle-slider:before {
	position: absolute;
	content: "";
	height: 20px;
	width: 20px;
	left: 2px;
	bottom: 2px;
	background-color: white;
	-webkit-transition: .15s;
	transition: .15s;
	border-radius: 50%;
	box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

input:checked + .toggle-slider {
	background-color: #3b82f6;
}

input:focus + .toggle-slider {
	box-shadow: 0 0 1px #3b82f6;
}

input:checked + .toggle-slider:before {
	-webkit-transform: translateX(20px);
	-ms-transform: translateX(20px);
	transform: translateX(20px);
}

/* Disabled state */
input:disabled + .toggle-slider {
	background-color: #4ade80;
	opacity: 0.6;
}