body, html {
    font-size: 0.90rem;
    color: #77757a;
    width: 100%;
    min-width: 100%;
    height: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
    height: 100%;
    margin: 0;
    overflow-x: hidden; /* Prevent horizontal scrolling */
}
* { font-family: 'Segoe UI', sans-serif; }

.burger-menu-overlay {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: rgba(255, 255, 255, 0.97);
    z-index: 1050;
    display: none;
    overflow-y: auto;
    transition: all 0.3s ease;
}
.burger-menu-overlay.show {
    display: block;
}
.burger-menu-content {
    max-width: 600px;
    margin: 0 auto;
    padding-top: 60px;
}

/* Larger, cleaner menu buttons */
#burgerSlidingPanel .sliding-panel-content a.btn,
#burgerSlidingPanel .sliding-panel-content button.btn {
    font-size: 1.2rem;
    padding: 1rem 1.5rem;
    text-decoration: none !important;
    display: flex;
    align-items: center;
    border: none;
}

/* Remove default underline from links */
#burgerSlidingPanel a {
    text-decoration: none !important;
}

/* Icon spacing */
#burgerSlidingPanel i {
    margin-right: 12px;
    width: 24px;
    text-align: center;
}

/* Keep content at bottom of screen on mobile */
#burgerSlidingPanel .sliding-panel-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    padding-bottom: 0.5rem;
}

/* Optional: better hit areas */
#burgerSlidingPanel .sliding-panel-content ul li {
    margin-bottom: 0.5rem;
}


.text-muted {
    opacity: 0.7;
}
.background-image {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background-image: url('https://redtaag-skin.s3.eu-west-3.amazonaws.com/lvt/lvt_header.jpg'); Updated background image URL */
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Fix the background image */
    filter: blur(10px);
    z-index: -2;
}
.whitening-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.2); /* Adjust the opacity to achieve the desired whitening effect */
    z-index: -1;
}
.container {
    position: relative;
    z-index: 1;
    padding: 20px;
    margin:auto;
    padding-bottom: 60px; /* Make space for the bottom navbar */
}

#no_events {
    position: relative;
    z-index: 1;
    padding: 10px;
    margin:auto;
    max-width: 90%;
    margin-top: 170px; /* Make space for the bottom navbar */  
}

#no_subs {
    position: relative;
    z-index: 1;
    padding: 10px;
    margin:auto;
    max-width: 90%;
    margin-top: 170px; /* Make space for the bottom navbar */  
}

#no_vouchers {
    position: relative;
    z-index: 1;
    padding: 10px;
    margin:auto;
    max-width: 90%;
    margin-top: 170px; /* Make space for the bottom navbar */  
}

.otp-input {
    width: 50px;
    height: 50px;
    text-align: center;
    font-size: 1.5rem;
    margin: 0 5px;
    text-transform: uppercase;
}

.toggle-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 60px;
    height: 30px;
    background: #ccc;
    border-radius: 15px;
    position: relative;
    cursor: pointer;
    padding: 3px;
}
.toggle-circle {
    width: 24px;
    height: 24px;
    background: white;
    border-radius: 50%;
    position: absolute;
    left: 3px;
    transition: all 0.3s;
}
.toggle-btn.active {
    background: #28a745;
}
.toggle-btn.active .toggle-circle {
    left: 33px;
}
.toggle-icon {
    position: absolute;
    right: 5px;
    color: white;
    display: none;
}
.toggle-btn.active .toggle-icon {
    display: block;
}
.warning-message {
    color: #842029;
    background-color: #f8d7da;
    border: 1px solid #f5c2c7;
    padding: 0.75rem;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.otp-message {
    color:rgb(32, 132, 42);
    background-color:rgb(215, 248, 218);
    border: 1px solid rgb(215, 248, 218);
    padding: 0.75rem;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.single-card {
    height: 640px;
}
.calendar-card {
    height:780px;
}

.event-details-card{
    width: 100%;
    height: 100px;
    transform-style: preserve-3d;
    transition: transform 500ms;
}

.events-card {
    margin-bottom: 20px;
    max-width: 400px;
    max-height: 90%;
    min-width:300px;
    background-color: rgba(255, 255, 255, 0); /* Semi-transparent background */
    position: relative;
    padding: auto;
    border: 0px;
    transition: transform 0.3s;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Adjust values as needed */
    border-radius: 0px; /* Optional: adds rounded corners */
    transition: box-shadow 0.3s ease-in-out; /* Optional: smooth shadow on hover */
}

/* Optional: Shadow effect on hover */
.events-card:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}


.event-card {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 500ms;
}

.event-card.flipped {
    transform: rotateY(-180deg);
}

.card-face {
    width: 100%;
    height: 100%;
    min-height: 100%;
    position: absolute;
    /* -webkit-border-radius: 0.5rem;
    border-radius: 0.5rem; */
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
}

.card-face.card-front {
    background-color: white;
    transform: rotateY(0deg);
    z-index: 2;
}

.card-face.card-back {
    background-color: #ebf0f5;
    transform: rotateY(180deg);
}

.event-date-time {
    position: relative; 
    transform: translateY(300px);
}

.event-thumb {
    width: 100%;
    height: 300px;
    position: relative;
    /* -webkit-border-radius: 0.5rem 0.5rem 0 0;
    border-radius: 0.5rem 0.5rem 0 0; */
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100%;
    cursor: pointer;
    -webkit-transition: all 250ms;
    -moz-transition: all 250ms;
    -o-transition: all 250ms;
    transition: all 250ms;
}

.event-thumb:hover {
    background-size: 120%;
}

.event-thumb::after {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 0.1;
    -webkit-transition: all 250ms;
    -moz-transition: all 250ms;
    -o-transition: all 250ms;
    transition: all 250ms;
}
.event-thumb:hover::after {
    opacity: 0;
}

.event-card .truncate-overflow {
    position: relative;
    max-height: 2.5rem;
    overflow: hidden;
    padding-right: 1.5rem;
}

.event-card .truncate-overflow::after {
    content: '[...]';
    display: inline;
    position: absolute;
    bottom: 0;
    right: 0;
}

.event-actions {
    position: absolute;
    top: -2rem;
    right: 1.5rem;
    z-index: 999;
}

.event-actions a {
    text-align: center;
    line-height: 3rem;
    display: block;
    width: 3rem;
    height: 3rem;
    margin-left: 0.5rem;
    float: right;
    background-color: white;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.15);
    -moz-webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.15);
    -ms-webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.15);
    -o-webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.15);
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.15);
    -webkit-transition: all 250ms ease-out;
    transition: all 250ms ease-out;
}

.event-actions i {
    position: relative;
}

.card-face.card-back .event-description{
    height: 80%;
}

.event-description .fade-bottom {
    height: 80%;
    overflow: hidden;
    display: block;
}

.event-description .fade-bottom::after {
    bottom: 20px;
}

.event-description .scroll-y {
    height: 100%;
}

.event-card a {
    text-decoration: none;
}

.event-header a {
    text-decoration: none;
}

.event-card h2 {
    font-size: 1.5rem;
    font-weight: 700;
    max-height: 3.25rem;
    overflow: hidden;
}

.event-card h3 {
    font-size: 1.25rem;
    font-weight: 200;
    margin-bottom: 1.5rem;
    max-height: 3rem;
    overflow: hidden;
}

.event-date-time {
    width: 200px;
    height: 50px;
    position: absolute;
    left: 1rem;
    top: -2.5rem;
    background-color: #fd443e;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    -webkit-border-radius: 0.15rem;
    border-radius: 0.15rem;
}

.event-date-time span {
    text-align: center;
    color: white;
    display: block;
    width: 100%;
    position: absolute;
    left: 0;
    right: 0;
}

.event-date-time span.start-date {
    top: 0.20rem;
}

.event-date-time span.end-date {
    top: 2.10rem;
}

.event-date-time span.icon-date {
    top: 1.20rem;
}

.event-date-time span.date {
    top: 0.25rem;
}

.event-date-time span.time {
    font-size: 1.75rem;
    font-weight: 200;
    top: 1rem;
}

.flip-card {
    text-align: center;
    line-height: 3rem;
    display: block;
    width: 3rem;
    height: 3rem;
    float: right;
    background-color: white;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}
#global-wrapper {
	position: relative;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	transform: scale(1);
}

#global-wrapper label {
	text-transform: uppercase;
	font-size: 10px;
	opacity: 0.75;
	display: inline-block;
	min-width: 60px;
}

#ticket-card-wrapper {
	position: relative;
	width: 300px;
	height: 500px;
	margin-left: auto;
	margin-right: auto;
	perspective: 600px;
}

body.tools-on #global-wrapper {
	transform: scale(0.75);
	transform-origin: center;
}

.tools-overlay {
	position: absolute;
	background-color: rgba(0, 0, 0, 0.75);
	left: 0;
	top: 0;
	bottom: 0;
	padding: 20px;
	opacity: 0;
	display: none;
	transform: scale(1.5);
	transform-origin: center;
	-webkit-backdrop-filter: saturate(180%) blur(10px);
	backdrop-filter: saturate(180%) blur(10px);
}

.tools-overlay.on {
	display: block;
	opacity: 1;
	transform: scale(1);
    z-index: 30;
}

#mticket-toolbar {
	text-align: center;
	width: calc(100% - 2rem);
	position: absolute;
	left: 1rem;
	bottom: 1rem;
}

#mticket-toolbar .split-btn {
	color: white !important;
	width: 50%;
	height: 2.5rem;
	display: block;
	float: left;
	line-height: 2.5rem;
	background-color: black;
    text-decoration: none;
	border: 1px solid rgba(255, 255, 255, 0.5);
}

#show-sharing-tools {
	border-right: none !important;
	-webkit-border-radius: 0.5rem 0 0 0.5rem;
	border-radius: 0.5rem 0 0 0.5rem;
}

#show-save-tools {
	border-left-color: rgba(255, 255, 255, 0.25) !important;
	-webkit-border-radius: 0 0.5rem 0.5rem 0;
	border-radius: 0 0.5rem 0.5rem 0;
}

#mticket-toolbar  {
	margin-right: 0 !important;
}

.tools-set {
	color: white;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding: 1.5rem;
	margin-bottom: 2rem;
    display: flex;
    justify-content: center;
    gap: 1rem;

}

.tools-set a.pill {
	color: white;
	font-size: 2rem;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	position: relative;
	width: 4rem;
	height: 4rem;
	margin-bottom: 0rem;
	background-color: rgba(255, 255, 255, 0.15);
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	-o-border-radius: 50%;
	border-radius: 50%;
}

.tools-set a.pill::before {
	content: '';
	display: block;
	position: absolute;
	width: 0;
	height: 0;
	top: 50%;
	left: 50%;
	background-color: rgba(0, 0, 0, 0.25);
	-webkit-border-radius: 50%;
	border-radius: 50%;
	-webkit-transition: all 250ms ease-out;
	transition: all 250ms ease-out;
}

.tools-set a.pill:hover::before {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

.tools-set a.pill:last-child {
	margin-right: 0;
}

.tools-set a.pill i {
	line-height: 4rem;
}

#share-facebook {
	background-color: #4368ad;
}

#share-messenger {
	background-color: #0f86f6;
}

#share-twitter {
	background-color: #56ade8;
}

#send-sms {
	background-color: #56ade8;
}

#send-whatsapp {
	background-color: #51df63;
}

#send-email {
	background-color:rgb(92, 93, 92);
}


.mticket-card {
  width: 100%;
  max-width: 300px;
  aspect-ratio: 3 / 5;
  position: relative;
  perspective: 1000px;
  margin: 0 auto;
}

.mticket-card .card-face {
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: hidden;
  border-radius: 1rem;
  transition: transform 0.6s ease-in-out;
  overflow: hidden;
  cursor: default;
}

.mticket-card .card-front {
  z-index: 2;
  transform: rotateY(0deg);
}

.mticket-card .card-back {
  transform: rotateY(180deg);
  z-index: 1;
  cursor: pointer;
}

.mticket-card.flipped .card-front {
  transform: rotateY(-180deg);
}

.mticket-card.flipped .card-back {
  z-index: 3;
  transform: rotateY(0deg);
}

a.wallet-btn {
	color: rgba(255, 255, 255, 0.6);
	text-align: center;
	width: 100%;
	height: 5rem;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 2rem;
	line-height: 5rem;
	background-color: black;
	border: 1px solid rgba(255, 255, 255, 0.5);
	-webkit-border-radius: 0.5rem;
	border-radius: 0.5rem;
}

a.wallet-btn strong {
	color:  white;
}

a.wallet-btn img {
	vertical-align: middle;
	width: auto;
	max-height: 3rem;
	margin-right: 1rem;
}

.animated {
	-webkit-transition: all 250ms ease-out;
	-moz-transition: all 250ms ease-out;
	-o-transition: all 250ms ease-out;
	transition: all 250ms ease-out;
}

/* Card general styles */


.dark-scheme #global-wrapper label {
	text-transform: uppercase;
	font-size: 10px;
	opacity: 0.75;
	display: inline-block;
	min-width: 60px;
}

.light-scheme #global-wrapper * {
	color: black;
}

#mticket-card-wrapper {
	position: relative;
	width: 300px;
	height: 500px;
	margin-left: auto;
	margin-right: auto;
	perspective: 600px;
}

.mticket-card {
	width: 100%;
	min-width: 100%;
	height: 100%;
	min-height: 100%;
	margin-left: auto;
	margin-right: auto;
	transform-style: preserve-3d;
	transition: transform 500ms;
}

.mticket-card.flipped {
	transform: rotateY(-180deg);
}

.mticket-front, .mticket-back {
	width: 100%;
	min-width: 100%;
	height: 100%;
	min-height: 100%;
	overflow: hidden;
	padding-top: 15px;
	padding-left: 40px;
	padding-right: 40px;
	position: absolute;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
	-webkit-box-shadow: 0 0 20px 0 rgba(0,0,0,0.25);
	box-shadow: 0 0 20px 0 rgba(0,0,0,0.25);
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
}

.mticket-front {
	transform: rotateY(0deg);
	z-index: 2;
}

.mticket-back {
	transform: rotateY(-180deg);
}

.mticket-brand {
	width: 100%;
	max-width: 180px;
	height: 90px;
	max-height: 100px;
	overflow: hidden;
	margin-left: auto;
	margin-right: auto;
}

.mticket-brand img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 100%;
	margin-left: auto;
	margin-right: auto;
}

.mticket-front .data-top {
	position: absolute;
	top: 105px;
	left:10px;
	width: 280px;
	height: 50px;
	max-height: 50px;
}

.mticket-front .data-price {
	position: absolute;
	top: 330px;
	left:10px;
	width: 280px;
	height: 40px;
	max-height: 40px;
}

.mticket-front .data-bottom {
	position: absolute;
	top:400px;
	left: 40px;

/*	height: 120px;
	max-height: 120px;*/
}

.mticket-back .data {
	padding-top: 20px;
	height: 450px;
	max-height: 450px;
}

.scroll-y {
	overflow-x: hidden;
	overflow-y: scroll;
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.scroll-y::-webkit-scrollbar {
	width: 0;
	background: transparent;
}

#mticket-qr-code {
	width: 140px;
	height: 140px;
	box-sizing: border-box;
	margin-left: auto;
	margin-right: auto;
	background-color: rgba(0, 0, 0, 0);
	position: absolute;
	left: 80px;
	top: 180px;
	display: flex;
	justify-content: center;
	align-items: center;
	-webkit-transition: all 250ms ease-out;
	transition: all 250ms ease-out;
}

#mticket-qr-code img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: 100%;
	max-height: 100%;
	margin-left: auto;
	margin-right: auto;
	background-color: white;
	border: 5px solid white;
}

body.mobile #mticket-qr-code, body.tablet-portrait #mticket-qr-code {
	cursor: pointer;
}

.pill {
	text-align: center;
	text-decoration: none;
	display: inline-block;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	-o-border-radius: 50%;
	border-radius: 50%;
	cursor: pointer;
}

.pill {
	color: white;
	background-color: rgba(0, 0, 0, 1);
	background-position: center top;
}

#info-icon {
	font-size: 1.5rem;
	line-height: 2rem;
	font-family: serif;
	font-weight: bold;
	font-style: italic;
	width: 2rem;
	height: 2rem;
	position: absolute;
	right: 1rem;
	top: 1rem;
}

.dark-scheme #info-icon {
	color: black;
}

.light-scheme #info-icon {
	color: white;
}

#show-tools {
	font-size: 1rem;
	text-align: center;
	line-height: 30px;
	text-decoration: none;
	display: block;
	width: calc(100% - 20px);
	max-width: 280px;
	height: 50px;
	position: absolute;
	bottom: 10px;
	left: 10px;
	padding: 10px;
	cursor: pointer !important;
	background-color: rgba(0, 0, 0, 1);
	border: 1px solid white;
	-webkit-border-radius: 0.4rem;
	-moz-border-radius: 0.4rem;
	-ms-border-radius: 0.4rem;
	-o-border-radius: 0.4rem;
	border-radius: 0.4rem;
}

#show-tools * {
	cursor: pointer;
}

.card-style .front {
	background: url(https://redtaag-skin.s3.eu-west-3.amazonaws.com/spt_mticket_front.jpg) no-repeat center center;
}

.card-style .back {
	background: url(https://redtaag-skin.s3.eu-west-3.amazonaws.com/spt_mticket_back.jpg) no-repeat center center;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	margin-bottom: 0.5rem;
}

h1 {
	font-size: 2rem;
	line-height: 1em;
}

h2 {
	font-size: 20px;
}

h3 {
	font-size: 18px;
}

h4 {
	font-size: 14px;
}

p {
	font-size: 12px;
	line-height: 1em;
	font-family: 'Open Sans', sans-serif;
	margin-bottom: 1.25em;
}

.lead {
    font-size: 130%;
}

.mb-0 {
    margin-bottom: 0 !important;
}

.text-uppercase {
	text-transform: uppercase;
}

strong {
	font-weight: 700;
}

.text-left {
	text-align: left;
}

.text-right {
	text-align: right;
}

.text-center {
	text-align: center;
}

.w-100 {
	width: 100%;
	min-width: 100%;
}

.h-100 {
	height: 100%;
	min-height: 100%;
}

#card-wrapper.full-screen {
	width: 100% !important;
	height: 100% !important;
}

.full-screen .front {
	-webkit-border-radius: 0;
	border-radius: 0;
}

#info-icon.full-screen, #mticket-toolbar.full-screen, .data-bottom.full-screen, .data-price.full-screen{
	display: none;
}

#mticket-qr-code.fx-fade-to-black {
    position: absolute;
	width: 300px;
    height: 300px;
	left: 0;
	top: 0;
	right: 0;
    z-index:30;
	border-bottom: 0;
	background-color: rgba(0, 0, 0, 1);
	-webkit-animation: fade-to-black 250ms linear;
	-moz-animation: fade-to-black 250ms linear;
	-o-animation: fade-to-black 250ms linear;
	animation: fade-to-black 250ms linear;
}

@media (orientation: landscape) {
	.full-screen #qr-code img {
		width: auto;
		height: 65%;
		display: block;
	}
}

@media (orientation: portrait) {
        .full-screen #qr-code img {
                width: 75%;
                height: auto;
		display: block;
        }
}

@-webkit-keyframes fade-to-black {
0% {
	background-color: rgba(0, 0, 0, 0);
}

100% {
	background-color: rgba(0, 0, 0, 1);
}
}

@-moz-keyframes fade-to-black {
0% {
	background-color: rgba(0, 0, 0, 0);
}

100% {
	background-color: rgba(0, 0, 0, 1);
}
}

@-o-keyframes fade-to-black {
0% {
	background-color: rgba(0, 0, 0, 0);
}

100% {
	background-color: rgba(0, 0, 0, 1);
}
}

@keyframes fade-to-black {
0% {
	background-color: rgba(0, 0, 0, 0);
}

100% {
	background-color: rgba(0, 0, 0, 1);
}
}


.buy-ticket, .choose-date {
    position: absolute;
    left: 1.5rem;
    right: 1.5rem;
    bottom: 1.5rem;
}

.buy-pack{
    left: 1.5rem;
    right: 1.5rem;
    bottom: 1.5rem;
}

.choose-pack {
    position: absolute;
    left: 1.5rem;
    right: 1.5rem;
    bottom: 6rem;
}


.focused {
    transform: scale(1.1);
    transition: transform 0.3s;
}
.bottom-navbar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 15; /* Ensure the navbar is above the sliding panel */
    background-color: rgba(255, 255, 255, 0.9); /* Slightly transparent */
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    height: 50px;
}
.bottom-navbar .nav-item .nav-link {
    color: #333;
}
.bottom-navbar .nav-item .nav-link.active {
    color: #007bff; /* Active link color */
}
.top-cart-button-container {
    position: absolute;
    top: 100px; /* Adjust this value to move the button up or down */
    left: 95%;
    transform: translateX(-50%);
}

.cart-button-container {
    position: absolute;
    top: -30px; /* Adjust this value to move the button up or down */
    left: 50%;
    transform: translateX(-50%);
}
.cart-button {
    position: relative;
    width: 60px;
    height: 60px;
    background-color: #007bff;
    color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.cart-count {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: red;
    color: white;
    border-radius: 50%;
    padding: 4px 8px;
    font-size: 12px;
}
.avail-seats {
    position: absolute;
    right: 0.8rem;
    bottom: 4rem;
    background-color: grey;
    color: white;
    border-radius: 50%;
    padding: 4px 8px;
    font-size: 12px;
}

  .pack-badge {
    font-size: 0.85rem;
    padding: 0.4em;
    line-height: 1;    
  }

.avail-seats-list {
    position: absolute;
    right: -0.8rem;
    bottom: 2.4rem;
    background-color: grey;
    color: white;
    border-radius: 50%;
    padding: 4px 8px;
    font-size: 12px;
}

.sliding-panel.show {
    transform: translateY(0);
}

.sliding-panel-content {
    padding: 20px;
}
button.btn-close {
padding: 0;
background-color: transparent;
border: 0;
appearance: none;
}

.scroll-x, .scroll-y {
    position: relative;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    scrollbar-width: none;
    scroll-snap-type: mandatory; /* Firefox */
    -ms-scroll-snap-type: mandatory; /* IE/Edge */
    -webkit-scroll-snap-type: mandatory; /* Safari */
    -webkit-overflow-scrolling: touch; /* important for iOS */
    scroll-behavior: smooth;
}

.scroll-x::-webkit-scrollbar, .scroll-y::-webkit-scrollbar {
    display: none;
}

.scroll-x {
    overflow-x: scroll;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
}
.scroll-y {
    overflow-x: hidden;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
}

.fade-left::before, .fade-right::after {
    content: '';
    display: block;
    width: 4rem;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 899;
}

.fade-left::before {
    left: 0;
    background: -moz-linear-gradient(left, rgba(255, 255, 255, 1) 100%, rgba(255, 255, 255, 0) 0%);
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 1) 100%, rgba(255, 255, 255, 0) 0%);
    background: linear-gradient(to right, rgba(255, 255, 255, 1) 100%, rgba(255, 255, 255, 0) 0%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff', GradientType=1 );
}

.fade-right::after {
left: calc(100% - 4rem);
    background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=1 );
}

.fade-bottom::after {
    content: '';
    display: block;
    width: 100%;
    height: 2rem;
    position: absolute;
    /*top: calc(100% - 2rem);*/
    left: 0;
    right: 0;
    bottom: 0;
    background: -moz-linear-gradient(top, rgba(235, 240, 245, 0) 0%, rgba(235, 240, 245, 1) 100%);
    background: -webkit-linear-gradient(top, rgba(235, 240, 245, 0) 0%, rgba(235, 240, 245, 1) 100%);
    background: linear-gradient(to bottom, rgba(235, 240, 245, 0) 0%, rgba(235, 240, 245, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ebf0f5', endColorstr='#ebf0f5', GradientType=0 );
}

.top-bar .nav-buttons {
    display: none;
}

.top-bar {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    z-index: 10;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

    justify-content: space-between;
    align-items: center;
}

.language-dropdown-container {
    z-index: 12;
}

.top-bar img {
    height: 100px; /* Adjust logo height */
}
.tagline {
    font-size: 18px;
    color: #555;
}

.event-calendar-wrapper {
    padding-top: -20px;
    overflow: hidden;
    position: relative;
}
.bic_calendar a {
    padding: 0;
}

.bic_calendar .event-available {
    font-weight: 700;
}

 
#masonry-grid {
        display: block;
        visibility: visible;
        margin: 0 auto;   
    }   

.event-sessions {
    height: 500px;
    max-height: 500px;
    overflow: hidden;
    display: none;
}
.event-sessions .scroll-y {
    height: 270px;
    max-height: 270px;
}

.show-calendar-wrapper {
    z-index:4;
}

.btn {
    border-radius: 0px;
}

.btn.sold-out, .btn.sold-out:hover {
    color: #77757a;
    background: white;
    background-image: none;
    color: red;
}
  
  

  
  .search-container {
    position: fixed;
    z-index: 12;
  }
  
  .search-button {
    display: flex;
    align-items: center;
    background-color: white;
    justify-content: center;
    border: 1px solid #ccc;
    border-radius: 25px;
    padding: 10px;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    width: 50px;
    height: 50px;
    overflow: hidden;
  }
  
  .search-button.open {
    border-radius: 25px;
    width: 300px;
  }
  
  .search-icon {
    color: #333;
    font-size: 18px;
  }
  
  .search-input {
    flex-grow: 1;
    border: none;
    outline: none;
    padding-left:10px;
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 16px;
    opacity: 0;
    width: 0;
    transition: opacity 0.3s ease, width 0.3s ease;
  }
  
  .search-button.open .search-input {
    opacity: 1;
    width: 100%;
    margin-right: 10px;
  }
  
  .search-button:hover {
    background-color: #f1f1f1;
  }
  
  .search-button:not(.open) .search-icon {
    transform: translateX(-5px); /* Centered icon when closed */
  }
  
  .search-button.open .search-icon {
    transform: translateX(-5px); /* Slight shift for alignment when open */
  }

  .show-calendar {
    text-decoration: none;
}

.show-calendar-wrapper {
    display: none;
  }

.event-details-show-map {
    cursor: pointer;
}

#zearticles .ticket-row {
    padding-top:5px;
    margin:5px;
}

.form-control-feedback {
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 1.2rem;
    z-index: 2;
}

/* Support for validator states */
.has-error .form-control {
    border-color: #dc3545 !important;
}

.has-success .form-control {
    border-color: #198754 !important;
}

/* Optional: icon colors */
.has-error .form-control-feedback{
    color: #dc3545;
}

.help-block{
    color: #dc3545;
}

.has-success .form-control-feedback {
    color: #198754;
}

@media (max-width: 768px) {
    #masonry-grid {
        width:340px;
    }

    .hide-mobile {
        display:none;
    }

    .event-date {
        display: none;
        overflow: hidden;
    }

    .event-date .scroll-y {
        height: 390px;
        max-height: 390px;
    }

    .event-details-flyer {
        width:100px;
        height:100px;
    }

    .item-desc {
        padding-bottom:10px;
    }

    #logo-header {
        margin-left: auto;
        margin-right: auto;
        display: block;
        max-width:70%;
        max-height:95px;
        width: auto;
        height: auto;
    }

    .tagline {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    .cart-button-container .nav-link {
        padding: 0px;
    }
    
    .sliding-panel {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%; /* Adjust as needed */
        background-color: rgba(255, 255, 255, 0.95);
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
        overflow-y: auto;
        transform: translateY(100%);
        transition: transform 0.3s ease-in-out;
        z-index: 14; /* Ensure the sliding panel is behind the navbar */
        padding-bottom: 40px; /* Add bottom padding to avoid content being hidden by the navbar */
    }

     .floating-menu {
        position: fixed;
        bottom: -180px; /* Adjust for spacing above the bottom menu */
        left: -10px;
        /* transform: translateY(100%); */
        display: flex;
        flex-direction: column;
        align-items: left;
        gap: 15px; /* Space between buttons */
        z-index: 4;
        transition: transform 0.3s ease-in-out;
      }

      .floating-menu.show {
        transform: translateX(40px) translateY(-250px);
      }

    /* Floating Button */
    .floating-button {
        display: flex;
        align-items: center;
        background: white;
        border-radius: 25px;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
        padding: 10px 20px;
        cursor: pointer;
        transition: transform 0.2s, box-shadow 0.2s;
    }
    
    .floating-button:hover {
        transform: scale(1.05);
        box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.3);
    }
    
    .menu-icon {
        font-size: 20px;
        margin-right: 10px;
    }
    
    .menu-text {
        font-size: 16px;
        color: #333;
    }

    .search-container {
        top: 120px;
        right: 10px;
        z-index: 12;
      }

    .event-details-read-more {
        display: none;
    }
}

@media (min-width: 768px) {
    .container {
        padding-top: 140px;
    }
    .top-bar {
        position: fixed;
    }

    .event-date {
        overflow: hidden;
      }

      .event-date .scroll-y {
        height: 490px;
        max-height: 490px;
    }

    .event-details-flyer {
        width:120px;
        height:120px;
    }

    #myModalSeatMap .modal-dialog,
    #myModalSeatMap .modal-content {
        max-height: 95vh;
    }

    #myModalSeatMap .modal-body {
        flex: 1 1 auto;
        overflow: auto;
    }

    .zemap {
        height: 85vh;
    }

    #logo-header {
        display: block;
        max-width:90%;
        max-height:95px;
        width: auto;
        height: auto;
    }

    .bottom-navbar {
        display: none;
    }
    .top-bar .nav-buttons {
        display: flex;
        align-items: center;
        font-size: 18px;
    }
    .nav-link {
        padding-left: 20px;
    }
    .tagline { 
        margin-top: 15px; 
    }

    .floating-menu {
        position: fixed;
        bottom: -180px; /* Adjust for spacing above the bottom menu */
        left: -10px;
        /* transform: translateY(100%); */
        display: flex;
        flex-direction: column;
        align-items: left;
        gap: 15px; /* Space between buttons */
        z-index: 4;
        transition: transform 0.3s ease-in-out;
      }

      .floating-menu.show {
        transform: translateX(40px) translateY(-250px);
      }

    /* Floating Button */
    .floating-button {
        display: flex;
        align-items: center;
        background: white;
        border-radius: 25px;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
        padding: 10px 20px;
        cursor: pointer;
        transition: transform 0.2s, box-shadow 0.2s;
    }
    
    .floating-button:hover {
        transform: scale(1.05);
        box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.3);
    }

    .sliding-panel {
        position: fixed;
        top: 0;
        left: 0;
        width: 500px;
        max-height: 80%; /* Adjust as needed */
        background-color: rgba(255, 255, 255, 0.95);
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
        overflow-y: auto;
        transform: translateY(-100%);
        transition: transform 0.3s ease-in-out;
        z-index: 4; /* Ensure the sliding panel is behind the navbar */
        padding-top: 140px; /* Add bottom padding to avoid content being hidden by the navbar */
    }  


    #sliding-panel-links {
        display: none;
    }
    
    .search-container {
        top: 100px;
        right: 10%;
      }

    #contactPanel.sliding-panel {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--topbar-h);                 /* sit right under the top bar */
    max-height: min(70vh, 540px);
    overflow: auto;
    background: #ffffff;
    border-bottom: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 12px 24px rgba(0,0,0,.18);
    transform: translateY(calc(-100% - 12px)); /* start fully hidden above */
    transition: transform .32s ease, opacity .2s ease;
    opacity: 0;
    z-index: 4;                        /* above content, below modals */
    }

    /* When opened */
    #contactPanel.sliding-panel.show {
    transform: translateY(0);
    opacity: 1;
    }

    /* Optional: a subtle brand strip matching the top bar */
    #contactPanel .brand-strip {
    height: 4px;
    background: #ffffff; /* same as #topBar background */
    }

    /* Optional overlay to catch outside clicks on mobile (if you want it) */
    #contactOverlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.25);
    opacity: 0; pointer-events: none;
    transition: opacity .2s ease;
    z-index: 3; /* just below the panel */
    }
    #contactOverlay.show { opacity: 1; pointer-events: auto; }

}