/*----------------------------------
    Eventdetails.css
    Styles specifically for the Event Details page component
    Extracted from custom.css for component-level styling
----------------------------------*/

/* Theme Font Use */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');

/* ===================================
    Common Styles
=================================== */
::selection {
	background-color: #1c89f0;
	color: #fff;
}

::-moz-selection {
	background-color: #1c89f0;
	color: #fff;
}

img {
	max-width: 100%;
	height: auto;
}

p {
	line-height: 24px;
	font-size: 14px;
	color: #c5c5c5;
	font-family: 'Montserrat', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0px;
	color: #1c89f0;
	padding: 0px;
	line-height: 1.2;
	letter-spacing: 1px;
	font-family: 'Montserrat', sans-serif;
	text-align: center;
}

h2 {
	font-size: 36px;
	font-weight: 700;
}

h3 {
	font-size: 26px;
	font-weight: 700;
}

h4 {
	font-size: 24px;
	font-weight: 700;
}

h5 {
	font-size: 18px;
	font-weight: 700;
}

ul, ol, li {
	margin: 0px;
	padding: 0px;
	list-style: none;
}

a {
	text-decoration: none;
	cursor: pointer;
}

	a:hover {
		text-decoration: none;
	}

/* ===================================
    Buttons
=================================== */
.btn-style-1 {
	color: #fff;
	border: 0;
	border-bottom: 3px solid #1c89f0;
	border-radius: 6px;
	position: relative;
	padding: 16px 30px;
	font-size: 14px;
	text-align: center;
	z-index: 0;
	text-transform: uppercase;
	font-weight: 600;
	line-height: 22px;
	overflow: hidden;
	text-decoration: none;
	display: inline-block;
	background-color: #1c89f0;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

	.btn-style-1:hover {
		color: #fff;
		text-decoration: none;
		background-color: #11101e;
	}

	.btn-style-1.btn-sm {
		font-size: 11px;
		padding: 8px 20px;
	}

/* ===================================
    Image Fluid
=================================== */
.img-fluid {
	max-width: 100%;
	height: auto;
}

/* ===================================
    Spacing Utilities
=================================== */
.pt-70 {
	padding-top: 70px;
}

.pb-40 {
	padding-bottom: 40px;
}

.mb-8 {
	margin-bottom: 8px;
}

.mb-20 {
	margin-bottom: 20px;
}

.mb-30 {
	margin-bottom: 30px;
}

.mb-40 {
	margin-bottom: 40px;
}

/* ===================================
    Event Details Page Styles
=================================== */
.details-page {
	background-color: #000;
}

.details-page-bammer {
	position: relative;
}

.details-page-bammer-carousel .owl-item .item {
	position: relative;
}

	.details-page-bammer-carousel .owl-item .item:after {
		position: absolute;
		content: "";
		width: 100%;
		height: 100%;
		left: 0px;
		top: 0px;
		background-color: rgba(0,0,0,0.7);
		z-index: 0;
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}

.details-page-bammer-carousel .owl-item.center .item:after {
	background-color: rgba(0,0,0,0.4);
}

/* Details page banner caption */
.details-page-bammer-caption {
	position: absolute;
	top: 50%;
	width: 100%;
	left: 0px;
	transform: translateY(-50%);
	z-index: 1;
}

.details-page-bammer-caption-c {
	text-align: center;
	background-color: rgba(0,0,0,0.6);
	padding: 20px;
	border-radius: 6px;
	border: 1px solid rgba(255,255,255,0.3);
}

	.details-page-bammer-caption-c h1 {
		color: #fff;
		font-size: 32px;
		font-family: 'Roboto Condensed', sans-serif;
		font-weight: 500;
		margin-bottom: 10px;
	}

	.details-page-bammer-caption-c .location {
		color: #fff;
		font-size: 12px;
		font-weight: 500;
		margin-bottom: 10px;
	}

	.details-page-bammer-caption-c .event-capacity,
	.details-page-bammer-caption-c .event-capacity a {
		color: #fff;
		font-size: 12px;
		font-weight: 500;
	}

		.details-page-bammer-caption-c .event-capacity a {
			color: #1c89f0;
		}

/* Details page button list */
.details-page-btn li {
	display: inline-block;
}

	.details-page-btn li a {
		display: inline-block;
		background-color: #e6e3f4;
		padding: 8px 16px;
		font-size: 12px;
		color: #000;
		font-weight: 500;
		border-radius: 4px;
		margin-bottom: 6px;
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}

		.details-page-btn li a:hover {
			background-color: #1c89f0;
			color: #fff;
		}

/* Details page content box */
.details-page-content-box h2 {
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 500;
	color: #1c89f0;
	font-size: 28px;
	margin-bottom: 15px;
}

.details-page-content-box ul.list li {
	margin-bottom: 12px;
	color: #ccc;
	font-size: 14px;
	text-transform: capitalize;
}

	.details-page-content-box ul.list li:last-child {
		margin-bottom: 0px;
	}

	.details-page-content-box ul.list li i {
		font-size: 14px;
		color: #1c89f0;
		padding-right: 4px;
	}

/* ===================================
    Summary Box / Sidebar Styles
=================================== */
.summary-box {
	padding: 20px;
	border-radius: 36px;
	overflow: hidden;
	background-image: url(../images/bg/summary-box-bg1.jpg);
	background-position: center top;
	background-repeat: no-repeat;
	position: relative;
	z-index: 0;
	background-size: cover;
}

	.summary-box:after {
		position: absolute;
		content: "";
		width: 100%;
		height: 100%;
		left: 0px;
		top: 0px;
		background-color: rgba(0,0,0,0.7);
		z-index: -1;
	}

	.summary-box h4 {
		font-family: 'Roboto Condensed', sans-serif;
		color: #fff;
		font-size: 18px;
		line-height: 24px;
		font-weight: 500;
	}

	.summary-box ul li h5 {
		font-size: 12px;
		color: #1c89f0;
	}

	.summary-box ul li p {
		margin-bottom: 0px;
		color: #fff;
	}

	.summary-box ul li {
		margin-bottom: 10px;
		padding-bottom: 10px;
		border-bottom: 1px dashed rgba(255,255,255,0.2);
	}

/* Destination place */
.destination-place {
	padding-bottom: 10px;
	margin-bottom: 10px;
}

/* Best price section */
.best-price {
	border-top: 1px solid rgba(0,0,0,0.1);
	padding-top: 10px;
	margin-top: 10px;
}

.side-price {
	color: #1c89f0;
	font-size: 24px;
	font-weight: 600;
}

.total-price {
	border-top: 1px solid rgba(0,0,0,0.1);
	padding-top: 10px;
	display: flex;
	align-items: center;
	margin-bottom: 0px !important;
}

	.total-price h5 {
		color: #000 !important;
		font-size: 20px !important;
	}

	.total-price p {
		color: #98ce44 !important;
		font-weight: 600;
		font-size: 20px !important;
	}

/* ===================================
    Sidebar Filter Box (for ticket selection)
=================================== */
.sidebar-filter-box-ticket {
	border-bottom: 1px dashed rgba(255,255,255,0.2);
}

.ticket-title {
	color: #c5c5c5;
	font-size: 14px;
	font-weight: 500;
}

/* Sidebar location dropdown */
.sidebar-location {
	background-color: rgba(255,255,255,0.1);
	border: 1px solid rgba(255,255,255,0.2);
	border-radius: 6px;
	color: #fff;
}

/* ===================================
    Blog Post Content (Hero Image Section)
=================================== */
.blog-post-content {
	position: relative;
}

.blog-post-img {
	position: relative;
	border-radius: 6px;
	overflow: hidden;
}

	.blog-post-img img {
		border-radius: 6px;
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}

/* ===================================
    Event Info Box
=================================== */
.event-info-box {
	background: #000;
	color: #fff;
	border-radius: 8px;
}

/* ===================================
    Gallery Styles (if gallery section is enabled)
=================================== */
.gallery-box {
	position: relative;
}

	.gallery-box .gallery-box-img {
		position: relative;
		border-radius: 6px;
		overflow: hidden;
	}

		.gallery-box .gallery-box-img img {
			-webkit-transition: all 0.3s ease-in-out;
			-moz-transition: all 0.3s ease-in-out;
			-o-transition: all 0.3s ease-in-out;
			transition: all 0.3s ease-in-out;
		}

	.gallery-box:hover .gallery-box-img img {
		transform: scale(1.1);
	}

	.gallery-box .gallery-box-img:after {
		position: absolute;
		content: "";
		width: 100%;
		height: 100%;
		top: 0px;
		left: 0px;
		z-index: 0;
		background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 74%, rgba(0,0,0,0.8) 90%);
		background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 74%, rgba(0,0,0,0.8) 90%);
		background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 74%, rgba(0,0,0,0.8) 90%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#cc000000', GradientType=0 );
	}

	.gallery-box h3 {
		position: absolute;
		left: 15px;
		bottom: 15px;
		z-index: 3;
		font-family: 'Roboto Condensed', sans-serif;
		line-height: 22px;
	}

		.gallery-box h3 a {
			color: #fff;
			font-weight: 500;
			position: relative;
			font-size: 20px;
			padding-left: 20px;
			-webkit-transition: all 0.3s ease-in-out;
			-moz-transition: all 0.3s ease-in-out;
			-o-transition: all 0.3s ease-in-out;
			transition: all 0.3s ease-in-out;
		}

		.gallery-box h3:after {
			position: absolute;
			font-family: bootstrap-icons;
			content: "\F52A";
			font-size: 12px;
			color: #fff;
			left: 0px;
			top: 50%;
			transform: translateY(-50%);
		}

	.gallery-box:hover h3 a {
		color: #1c89f0;
	}

	.gallery-box .gallery-numbers {
		position: absolute;
		right: 15px;
		top: 15px;
		background-color: #1c89f0;
		width: 35px;
		height: 35px;
		color: #fff;
		line-height: 35px;
		text-align: center;
		border-radius: 6px;
		font-size: 12px;
		z-index: 5;
	}

/* ===================================
    Video Box Styles (if video section is enabled)
=================================== */
.video-box {
	border-radius: 6px;
	overflow: hidden;
	position: relative;
	display: inline-block;
}

.video-box-img img {
	border-radius: 15px;
	overflow: hidden;
}

.video-box .icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	color: #fff;
	font-size: 40px;
	z-index: 2;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.video-box:after {
	position: absolute;
	content: "";
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	background-color: rgba(0,0,0,0.4);
	z-index: 0;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

/* ===================================
    Event Details Mobile Responsive Styles
=================================== */

/* Mobile-specific styles only - preserve desktop exactly as is */
@media (max-width: 768px) {
	/* Make the hero section stack vertically on mobile */
	.event-details-hero.d-flex {
		flex-direction: column !important;
		align-items: stretch !important;
	}

	/* Remove the bottom margin from image on mobile */
	.event-details-hero .blog-post-img {
		margin-bottom: 15px !important;
	}

		/* Make images responsive for mobile */
		.event-details-hero .blog-post-img img {
			width: 100%;
			height: auto;
			max-height: 450px;
			object-fit: cover;
			border-radius: 8px;
		}

	/* Event info box mobile adjustments */
	.event-details-hero .event-info-box {
		width: 100% !important;
		min-width: unset !important;
		max-width: unset !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		margin-top: 0 !important;
	}

		/* Adjust text sizes for mobile readability */
		.event-details-hero .event-info-box > div:first-child {
			font-size: 1.5rem !important;
			line-height: 1.3 !important;
		}

		.event-details-hero .event-info-box > div:not(:first-child) {
			font-size: 1rem !important;
		}

		.event-details-hero .event-info-box span {
			font-size: 0.95rem !important;
		}
}

/* Small mobile devices */
@media (max-width: 480px) {
	.event-details-hero .blog-post-img img {
		max-height: 450px;
	}

	.event-details-hero .event-info-box > div:first-child {
		font-size: 1.3rem !important;
	}

	.event-details-hero .event-info-box {
		padding: 15px !important;
	}
}

/* Countdown Timer Styles */
.ticket-status {
	transition: all 0.3s ease;
}

	.ticket-status.coming-soon {
		animation: pulse 2s infinite;
	}

@keyframes pulse {
	0%, 100% {
		opacity: 1;
	}

	50% {
		opacity: 0.85;
	}
}

.countdown-timer {
	letter-spacing: 2px;
}

.ticket-row {
	transition: all 0.3s ease;
}

	.ticket-row:hover {
		transform: translateY(-2px);
		box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
	}

/* Mobile Responsiveness */
@media (max-width: 576px) {
	.ticket-row {
		padding: 12px !important;
	}

		.ticket-row h5 {
			font-size: 1rem;
		}

	.countdown-timer {
		font-size: 1rem !important;
	}

	.ticket-status {
		padding: 8px !important;
		font-size: 0.9rem;
	}

	.qty-selector {
		width: 70px !important;
	}
}

.qty-spinner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	border: 3px solid #1C89E8;
	border-radius: 20px;
	padding: 10px 16px;
	width: fit-content;
	background: rgba(0,0,0,0.7);
}

.qty-btn {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
	font-size: 24px;
	font-weight: bold;
	flex-shrink: 0;
}

.qty-minus {
	background: #1C89E8;
	color: #333;
}

	.qty-minus:hover {
		background: #D0D0D0;
	}

.qty-plus {
	background: #1C89E8;
	color: #fff;
}

	.qty-plus:hover {
		background: #D0D0D0;
	}

.qty-display {
	min-width: 45px;
	text-align: center;
	font-weight: 700;
	font-size: 25px;
	color: #fff;
	flex-shrink: 0;
}

/* ===================================
    Mobile Layout Adjustments
    Desktop uses original 2-column layout
    Mobile uses stacked single column
=================================== */

/* Mobile-specific adjustments only */
@media (max-width: 1199.98px) {
	/* Ensure mobile sections stack properly */
	.mobile-hero-section,
	.mobile-sidebar-section {
		width: 100%;
	}

		/* Ensure images don't overflow */
		.mobile-hero-section .blog-post-img img {
			width: 100%;
			height: auto;
			max-height: 450px;
			object-fit: cover;
		}

		/* Sidebar box full width on mobile */
		.mobile-sidebar-section .summary-box {
			width: 100%;
		}
}

/* Desktop - hide mobile-only sections */
@media (min-width: 1200px) {
	.mobile-hero-section,
	.mobile-sidebar-section {
		display: none !important;
	}
}

/* ===================================
    Mobile Reordering: Hero → Sidebar → Overview → Spotlight → Location
=================================== */

/* Mobile wrapper structure */
.mobile-reorder-wrapper {
	width: 100%;
}

/* Hero section - always first */
.hero-section-mobile
/* ===================================
    MOBILE SCROLLING FIX
=================================== */
/* Ensure mobile layout allows scrolling */
@media (max-width: 1199.98px) {
	.details-page

{
	/* Ensure page can scroll */
	overflow-y: auto !important;
	-webkit-overflow-scrolling: touch !important;
	height: auto !important;
	min-height: 100vh;
}

/* Mobile wrapper should not restrict height */
.d-xl-none {
	height: auto !important;
	overflow-y: visible !important;
}

/* Ensure content sections don't block scroll */
.mobile-hero-section,
.mobile-sidebar-section,
.details-page-content-box {
	overflow-y: visible !important;
	height: auto !important;
}

}

/* Ensure summary box doesn't have fixed height */
.summary-box {
	height: auto !important;
	overflow-y: visible !important;
}

/* Fix for ticket rows */
.ticket-row {
	overflow-y: visible !important;
}