/**
 * Live Webcams Block - Frontend Styles
 * Overrides carousel defaults to match Figma design
 */

/* Webcam carousel specific overrides */
.sierra-webcams-carousel.sierra-carousel {
	min-height: 320px !important;
	padding-bottom: 0 !important;
	position: relative !important;
}
@media (max-width: 768px) {
	.sierra-webcams-carousel.sierra-carousel {
		overflow: hidden !important;
	}
}
/* Adjust carousel container to not clip navigation */
.sierra-webcams-carousel .carousel-container {
	min-height: 280px !important;
}

/* Ensure slides are visible */
.sierra-webcams-carousel .carousel-slides {
	min-height: 280px !important;
	display: flex !important;
	align-items: stretch !important;
}
.sierra-webcams-carousel-nav-wrapper .carousel-dots {
	justify-content: flex-start !important;
}

/* Override carousel slide styling for webcams */
.sierra-webcams-carousel .carousel-slide.sierra-webcam-card {
	background: white !important;
	border: 2px solid white !important;
	border-radius: 16px !important;
	height: 280px !important;
	min-height: 280px !important;
	max-height: 280px !important;
	overflow: hidden !important;
	display: flex !important;
	flex-direction: column !important;
	padding: 0 !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
	transition: all 0.2s ease !important;
	cursor: pointer !important;
}

.sierra-webcams-carousel .carousel-slide.sierra-webcam-card:hover {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
	transform: translateY(-2px) !important;
}

.sierra-webcams-carousel .carousel-slide.sierra-webcam-card.active {
	border-color: var(--wp--preset--color--sugar-pine-green, #0A6A58) !important;
}

/* Webcam card image section */
.sierra-webcams-carousel .sierra-webcam-card > div:first-child {
	flex: 1 !important;
	position: relative !important;
	min-height: 0 !important;
	overflow: hidden !important;
}

.sierra-webcams-carousel .sierra-webcam-card img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
}

/* Webcam card footer with name and icon */
.sierra-webcams-carousel .sierra-webcam-card > div:last-child {
	padding: 16px 24px !important;
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	gap: 8px !important;
	background: white !important;
	flex-shrink: 0 !important;
}

.sierra-webcams-carousel .sierra-webcam-card span {
	font-family: 'GT Standard', sans-serif !important;
	font-weight: 800 !important;
	font-size: 22px !important;
	line-height: 1.45 !important;
	color: var(--wp--preset--color--deep-alpine, #142C2D) !important;
	margin: 0 !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}

/* Carousel slides wrapper */
.sierra-webcams-carousel .carousel-slides {
	margin-bottom: 0 !important;
}

/* Reposition arrows to be inline with dots, not over slides */
.sierra-webcams-carousel .carousel-arrow {
	position: static !important;
	width: 40px !important;
	height: 40px !important;
	border: none !important;
	background: transparent !important;
	color: var(--wp--preset--color--sugar-pine-green, #0A6A58) !important;
	padding: 0 !important;
	cursor: pointer !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: all 0.2s ease !important;
	margin: 0 !important;
	flex-shrink: 0 !important;
}

.sierra-webcams-carousel .carousel-arrow svg {
	width: 40px;
	height: 40px;
	display: block;
}

.sierra-webcams-carousel .carousel-arrow:hover:not(:disabled) {
	color: var(--wp--preset--color--sugar-pine-green, #0A6A58) !important;
	opacity: 1 !important;
}

.sierra-webcams-carousel .carousel-arrow:hover:not(:disabled) svg rect {
	fill: var(--wp--preset--color--sugar-pine-green, #0A6A58);
}

.sierra-webcams-carousel .carousel-arrow:hover:not(:disabled) svg path {
	fill: white;
}

.sierra-webcams-carousel .carousel-arrow:disabled {
	opacity: 0.4 !important;
	cursor: not-allowed !important;
	pointer-events: none !important;
}

/* Arrow container - group arrows together */
.sierra-webcams-carousel .carousel-arrow.prev + .carousel-arrow.next {
	margin-left: 8px !important;
}

/* Carousel dots for webcams */
.sierra-webcams-carousel .carousel-dots {
	position: static !important;
	margin: 24px 0 0 0 !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	flex: 1 !important;
}

/* Navigation wrapper - flex container for dots and arrows */
.sierra-webcams-carousel-nav-wrapper {
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	padding-top: 0 !important;
	width: 100% !important;
	position: relative !important;
	z-index: 10 !important;
	visibility: visible !important;
	opacity: 1 !important;
}

.sierra-webcams-carousel-arrows-wrapper {
	display: flex !important;
	gap: 12px !important;
	align-items: center !important;
	flex-shrink: 0 !important;
	visibility: visible !important;
}

/* Force navigation elements to be visible */
.sierra-webcams-carousel .carousel-dots,
.sierra-webcams-carousel .carousel-arrow {
	display: flex !important;
	visibility: visible !important;
	opacity: 1 !important;
	justify-content: flex-start !important;
}

.sierra-webcams-carousel .carousel-dot {
	width: 16px !important;
	height: 16px !important;
	border-radius: 50% !important;
	background: rgba(20, 44, 45, 0.2) !important;
	border: none !important;
	transition: all 0.2s ease !important;
}

.sierra-webcams-carousel .carousel-dot.active {
	background: var(--wp--preset--color--deep-alpine, #142C2D) !important;
	width: 48px !important;
	border-radius: 40px !important;
}

/* Responsive adjustments */
@media (max-width: 1023px) {
	.sierra-webcams-carousel .carousel-slide.sierra-webcam-card {
		height: 260px !important;
		min-height: 260px !important;
		max-height: 260px !important;
	}

	.sierra-webcams-carousel .carousel-slide.sierra-webcam-card span {
		font-size: 18px !important;
	}
}

@media (max-width: 767px) {
	.sierra-webcams-carousel .carousel-slide.sierra-webcam-card {
		height: 240px !important;
		min-height: 240px !important;
		max-height: 240px !important;
	}

	.sierra-webcams-carousel .carousel-slide.sierra-webcam-card > div:last-child {
		padding: 12px 16px !important;
	}

	.sierra-webcams-carousel .carousel-slide.sierra-webcam-card span {
		font-size: 16px !important;
	}

	.sierra-webcams-carousel .carousel-container {
		padding-bottom: 60px !important;
	}

	.sierra-webcams-carousel-nav-wrapper {
		margin-top: 24px !important;
	}
}