@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root{
	--primary :rgb(247, 43, 138);	
}

@font-face {
    font-family: 'Grotesk';
    src: url('../assets/fonts/SpaceGrotesk.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

.event-admin-wrapper  h1, h2, h3 ,h4 , p , th, td, button, label, ::-webkit-input-placeholder{
 font-family: "Inter", serif !important;
}

/* Admin page styles */

.event-admin-heading{
	font-size:34px !important;
	font-weight:500!important;
}

.event-admin-form  input{
	width:100%;
	padding:6px 12px !important;
	border-radius: 8px ;
	border: 1px solid #d4d4d4; 	
}

.event-admin-form{
	background:white;
	min-width:400px;
	max-width:600px;
	padding:20px 30px 40px;
	border-radius:8px;
	display:flex;
	flex-direction:column;
	gap:6px;
	margin-top:40px;
}

.event-admin-form-row{
	display:flex;
	flex-direction:column;
	align-items:start;
	justify-content:start;
	gap:6px;
}

	
.event-admin-add-btn{
	background: #d22883 !important;
    color: white;
    padding: 12px 20px;
    border-radius: 6px;
	border:none;
	transition: all 0.5s;
	cursor:pointer;
	font-weight:600;
	margin-top:4px;
}
.event-admin-add-btn:hover{
	opacity:0.8;
}

/* Table styles */

.event-admin-table-wrapper{
	background:white;
	min-width:400px;
	max-width:600px;
	padding:20px 30px 40px;
	border-radius:8px;
	margin-top:20px;
}

.event-admin-table{
	width:100%;
	border:1px solid #e5e5e5;
	border-radius:8px;
	overflow:hidden;
	padding:4px;
}
.event-admin-table td, .event-admin-table th {
  	padding:10px 14px;
	text-align:start;
	border-radius:6px;
}

.event-admin-table tr:nth-child(even){background-color: #f2f2f2; }

.event-admin-table th{
	padding:10px 14px;
	text-align: start;
  	color: black;
	border-radius:12px;
}

.event-admin-table-delete-btn{
	background: #f43f5e;
	color:white;
	padding:6px 10px;
	border-radius:6px;
	border:none;
	cursor:pointer;
	transition:all 0.3s;
}
.event-admin-table-delete-btn:hover{
	background: #fb7185;
}

/*End Admin page styles */

.event-wrapper{
	width:100%;
	display:flex;
	flex-direction:column;
	gap:20px;
}

.event{
	width:100%;
	display:flex;
	align-items:center;
	justify-content:space-between;
	border-bottom: 2px solid var(--primary);
	padding:0 20px 10px;
	
}

.event-date{
	display:flex;
	align-items:start;
	gap:10px;
	color:white;
}

.event-day{
	font-size:2.6rem;
	font-weight:700;
}

.event-month{
	font-weight:600;
}

.event-description{
	width:50%;
	display:flex;
	align-items:center ;
	gap:16px;
	color:white;
}

.event-title{
	color:var(--primary);
	font-size:1.5rem;
	font-weight:600;
	text-transform: capitalize;
	text-align:start;
	font-family: "Grotesk", serif !important;
}

.event-book-btn{
    background-color: transparent;
    color: white;
    padding: 10px 20px;
    text-decoration: none !important;
	border:1px solid white;
	animation:all .5s;
}
.event-book-btn:hover{
	color:black;
	background:white;
}


/* Count down timer */

.first-event{
display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:12px;
}

.countdown-timer {
    font-size: 18px;
    font-weight: bold;
    color: #ff6600;
    margin-top: 10px;
}

.countdown-container {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 15px;
	font-family: "Grotesk", serif !important;

}

.countdown-item {
    text-align: center;
    padding: 10px;
    background:rgba(255, 255, 255, 0.4);
	backdrop-filter:blur(5px);
    color: white;
    width: 100px;
/* 	border:2px solid rgba(255, 255, 255, 0.6); */
}

.countdown-item span {
    display: block;
    font-size: 3rem;
    font-weight: 600;
}

.countdown-item small {
    font-size: 1rem;
    text-transform: capitalize;
	font-weight:500;
}

.event-started {
    font-size: 18px;
    font-weight: bold;
    color: red;
    text-align: center;
}

.buy-ticket-btn{
	font-family: "Grotesk", serif !important;
	background:var(--primary);
	font-weight:600;
	font-size:1rem;
	color:white;
	text-decoration:none !important;
	text-align:center;
	padding:12px 22px;
}

.buy-ticket-btn:hover{
	background:var(--primary);
	color:white;
}

@media(max-width:700px){
.event-title{
	
	font-size:1rem;

}

}