/* Custom styles for Zuideinde Booking Hotel */

/* Background Images */
.bg-header-image {
	background-image: url("./assets/images/header-image.png");
}

/* Hero Video Styles */
#hero-video {
	z-index: 0;
	object-position: center center;
	pointer-events: none;
	display: block;
}

/* Background image fallback */
.bg-header-image {
	z-index: -1;
}

/* Black overlay positioning */
header .bg-black {
	z-index: 1 !important;
	position: absolute;
}

/* Ensure content is above everything */
header .relative {
	z-index: 20 !important;
	position: relative;
}

.bg-banner-image {
	background-image: url("./assets/images/banner-image.png");
}

.bg-booking-image {
	background-image: url("./assets/images/booking-image.png");
}

/* Custom Colors - extending Tailwind */
.bg-nero {
	background-color: #252525;
}

.bg-nero-dark {
	background-color: #1a1a1a;
}

.bg-eerie-black {
	background-color: #212121;
}

.bg-light-gray {
	background-color: #f8f8f8;
}

.bg-lion {
	background-color: #c9ab81;
}

.bg-lion-dark {
	background-color: #b8956a;
}

.text-lion {
	color: #c9ab81;
}

.text-platinum {
	color: #e5e4e2;
}

.text-coyote {
	color: #806c47;
}

/* Grid layout for footer */
.grid-cols-footer {
	grid-template-columns: 2fr 1fr 1fr 1fr;
}

/* Font families */
.font-gilda {
	font-family: "Gilda Display", serif;
}

.font-barlow {
	font-family: "Barlow", sans-serif;
}

.font-barlow-cond {
	font-family: "Barlow Condensed", sans-serif;
}

.font-mont {
	font-family: "Montserrat", sans-serif;
}

/* Ensure all form elements are white */
#hotelBookingForm input,
#hotelBookingForm select,
#hotelBookingForm input::placeholder,
#hotelBookingForm select option {
	color: white !important;
}

#hotelBookingForm input[type="date"]::-webkit-calendar-picker-indicator,
#hotelBookingForm input[type="time"]::-webkit-calendar-picker-indicator {
	filter: invert(1);
}

/* Smooth Scroll and Prevent Horizontal Overflow */
html {
	scroll-behavior: smooth;
	overflow-x: hidden;
}

body {
	overflow-x: hidden;
}

/* View-in/Reveal Animations */
.reveal-element {
	opacity: 0;
	transform: translateY(50px);
	transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal-element.revealed {
	opacity: 1;
	transform: translateY(0);
}

/* Different reveal effects for different elements */
.reveal-fade {
	opacity: 0;
	transition: opacity 1s ease-in-out;
}

.reveal-fade.revealed {
	opacity: 1;
}

.reveal-slide-up {
	opacity: 0;
	transform: translateY(50px);
	transition: all 0.8s ease-out;
}

.reveal-slide-up.revealed {
	opacity: 1;
	transform: translateY(0);
}

.reveal-slide-down {
	opacity: 0;
	transform: translateY(-50px);
	transition: all 0.8s ease-out;
}

.reveal-slide-down.revealed {
	opacity: 1;
	transform: translateY(0);
}

.reveal-slide-left {
	opacity: 0;
	transform: translateX(-50px);
	transition: all 0.8s ease-out;
}

.reveal-slide-left.revealed {
	opacity: 1;
	transform: translateX(0);
}

.reveal-slide-right {
	opacity: 0;
	transform: translateX(50px);
	transition: all 0.8s ease-out;
}

.reveal-slide-right.revealed {
	opacity: 1;
	transform: translateX(0);
}

.reveal-scale {
	opacity: 0;
	transform: scale(0.8);
	transition: all 0.8s ease-out;
}

.reveal-scale.revealed {
	opacity: 1;
	transform: scale(1);
}

.reveal-rotate {
	opacity: 0;
	transform: rotateY(90deg);
	transition: all 0.8s ease-out;
}

.reveal-rotate.revealed {
	opacity: 1;
	transform: rotateY(0);
}

/* No stagger delays - immediate animations */
.reveal-element:nth-child(n) {
	transition-delay: 0s;
}

/* Cookie Popup Fix */
#cookiePopup {
	transition: transform 0.5s ease-in-out;
}

#cookiePopup.translate-y-full {
	transform: translateY(calc(100% + 50px)) !important;
}

#cookiePopup.translate-y-0 {
	transform: translateY(0) !important;
}

/* Ensure popup is completely hidden when not shown */
#cookiePopup:not(.translate-y-0) {
	transform: translateY(calc(100% + 50px));
}