/*
	Component Styles
	Purpose: Reusable UI elements (chevrons, mouse-scroll, notifications, error messages, video containers, Google Places Autocomplete, etc.)
*/
@import 'base.css';

/* Bottom Chevron Arrow Styles */
.chevron-stack {
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	width: 100%;
	height: 4rem;
	margin-bottom: 0.5rem;
}
.chevron {
	position: relative;
	width: 2.1rem;
	height: 0.48rem;
	opacity: 0;
	transform: scale(0.3);
	animation: move-chevron 3s ease-out infinite;
}
.chevron:first-child { animation-delay: 1s; }
.chevron:nth-child(2) { animation-delay: 2s; }
.chevron:before,
.chevron:after {
	content: '';
	position: absolute;
	top: 0;
	height: 100%;
	width: 50%;
	background: #2c3e50;
}
.chevron:before { left: 0; transform: skewY(30deg); }
.chevron:after { right: 0; width: 50%; transform: skewY(-30deg); }
@keyframes move-chevron {
	25% { opacity: 1; }
	33.3% { opacity: 1; transform: translateY(2.28rem); }
	66.6% { opacity: 1; transform: translateY(3.12rem); }
	100% { opacity: 0; transform: translateY(4.8rem) scale(0.5); }
}

/* Scroll Down Arrow Styles */
#mouse-scroll {
	position: fixed;
	left: 50%;
	bottom: 32px;
	transform: translateX(-50%);
	z-index: 9999;
	display: block;
}
#mouse-scroll span {
	display: block;
	width: 5px;
	height: 5px;
	transform: rotate(45deg);
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	margin: 0 0 3px 5px;
}
#mouse-scroll .mouse {
	height: 21px;
	width: 14px;
	border-radius: 10px;
	border: 2px solid #ffffff;
	margin: 0 auto;
}
#mouse-scroll .down-arrow-1 {
	margin-top: 6px;
}
#mouse-scroll .down-arrow-1, #mouse-scroll .down-arrow-2, #mouse-scroll .down-arrow-3 {
	animation: mouse-scroll 1s infinite;
}
#mouse-scroll .down-arrow-1 { animation-delay: .1s; animation-direction: alternate; }
#mouse-scroll .down-arrow-2 { animation-delay: .2s; animation-direction: alternate; }
#mouse-scroll .down-arrow-3 { animation-delay: .3s; animation-direction: alternate; }
#mouse-scroll .mouse-in {
	height: 5px;
	width: 2px;
	display: block;
	margin: 5px auto;
	background: #ffffff;
	position: relative;
	animation: animated-mouse 1.2s ease infinite;
}
@keyframes animated-mouse {
	0% { opacity: 1; transform: translateY(0); }
	100% { opacity: 0; transform: translateY(6px); }
}
@keyframes mouse-scroll {
	0% { opacity: 0; }
	50% { opacity: 0.5; }
	100% { opacity: 1; }
}

/* Error message styling */
#checkout-error {
	max-width: 500px;
	margin: 0 auto;
	padding: 12px 15px;
	border-left: 4px solid #dc3545;
	background-color: #f8d7da;
	color: #721c24;
	border-radius: 4px;
	animation: fadeIn 0.3s ease-in;
}
#checkout-error ul { padding-left: 20px; }

/* Holiday Notice Styling */
.notification.is-info.is-light {
	border-left: 4px solid #3298dc;
	animation: fadeIn 0.5s ease-in;
}
.notification.is-warning.is-light {
	border-left: 4px solid #ffdd57;
}
.notification p { margin-bottom: 0; }

/* YouTube Video Styling */
.video-container {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 aspect ratio */
	height: 0;
	overflow: hidden;
	max-width: 100%;
	background: #000;
}
.video-container iframe,
.video-container object,
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.footer-logo {
	width: 60px;
	height: auto;
	margin-bottom: 1rem;
	/* Convert white to dark gray using CSS filters */
	filter: brightness(0) saturate(100%) invert(20%) sepia(10%) saturate(2076%) hue-rotate(182deg) brightness(95%) contrast(95%);
}

/* Google Places Autocomplete Styles */
gmp-place-autocomplete {
	display: block;
	width: 100%;
	box-sizing: border-box;
}
gmp-place-autocomplete input {
	width: 100% !important;
	box-sizing: border-box;
	border: 1px solid #dbdbdb;
	border-radius: 4px;
	padding: 0.5em 0.75em;
	font-size: 1rem;
	line-height: 1.5;
	color: #363636;
	background-color: #fff;
	box-shadow: inset 0 0.0625em 0.125em rgba(10, 10, 10, 0.05);
}
gmp-place-autocomplete input:focus {
	border-color: #3273dc;
	box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25);
	outline: none;
}