/* ───────────────────────────────────────────────
   Single Voting Event template
   Author: Mobius 🙂
   ------------------------------------------------
   
   ───────────────────────────────────────────────*/

/* 1 ── Logo + banner
   ------------------------------------------------*/
   h1.event-title {
    font-size: 23px;
    color: #444;
    margin: 0 auto;
    width: 100%;
    max-width:605px;
    text-align: center;
    word-wrap: break-word;
    white-space: normal;
}


.event-logo-wrap {
    height: auto;
    margin: 40px auto;
    width: 100%;
    max-width: 400px;
    text-align: center;
}

.event-logo-wrap .event-logo {
    width: 100%;
    height: auto;
    max-width: 400px;
    object-fit: contain;
}

.message-box {
	align-items: center;
	border-radius: 15px;
	display: flex;
	flex-direction: column;
	font-size: 23.375px;
	font-weight: 500;
	justify-content: center;
	line-height: 31.875px;
	margin: 0 0 42.5px;
	background-color: #444;
	color: #fff;
	padding: 35px;
	text-align: center;
}

.ast-separate-container .ast-article-post,
.ast-separate-container .ast-article-single {
    padding: 50px 95px;
}

/*  ── Gravity Forms
   ------------------------------------------------*/
/* form heading */
.gform_title {
	display: none;
}

/* Hide poll results after form submission */
.gform_wrapper .gpoll_container,
.gform_wrapper .gpoll_results {
    display: none !important;
}

.gfield_label.gform-field-label {
	width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    font-size: 23px !important;
    font-weight: 700 !important;
    line-height: 35px !important;
    color: #444 !important;
}

/* grid of choices */
#input_41_4,
.gfield_radio{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	align-items: stretch;
	scroll-behavior: smooth;
}

/* hide stock radio bullet */
.gchoice input[type=radio]{
	opacity:0;
	position:absolute;
	left:-9999px;
}

/* choice "cards" */
.gchoice label{
	display: flex;
	flex-direction: column;
	background: #fff;
	border-color: #222;
	border-radius: 20px;
	border-style: solid;
	border-width: 2.4px;
	font-family: Poppins;
	font-size: 21.25px;
	line-height: 29.75px;
	padding: 10px;
	cursor: pointer;
	transition: all .15s ease;
	width: 315px;
	margin: 0 auto;
	height: 100%;
	position: relative;
	z-index: 1;
}

/* Style for the main choice title */
.choice-title {
	color: #222;
	font-family: Poppins;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.52px;
	line-height: 23px;
	display: inline-block
}

/* Style for the second line of text */
.choice-line-2 {
	color: #222;
	font-family: Poppins;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: -0.52px;
	line-height: 18px;
	display: inline-block
}

/* Style for the third line of text */
.choice-line-3 {
	color: #222;
	font-family: Poppins;
	font-size: 16px;
	font-style: italic;
	letter-spacing: -0.52px;
	line-height: 18px;
	margin: 0px 0px 8px;
	display: inline-block
}

.gchoice input[type=radio]:checked + label{
	border: 3px solid #78CB76;
	position: relative;
}

/* Add check icon when radio is checked */
.gchoice input[type=radio]:checked + label::before {
	opacity: 1;
	position: absolute;
	left: -10px;
	top: -10px;
	content: "";
	display: block;
	height: 30px;
	width: 30px;
	background-size: 30px 30px;
	background-image: url(../images/check.svg);
	background-repeat: no-repeat;
}

/* email field */
.ginput_container_email input[type=email]{
	width: 100%;
	height: 60px;
	padding: 15px 15px 15px 15px !important;
	border-color: #0e6240;
	border-radius: 15px;
	border-style: solid;
	border-width: 1.6px;
	font-family: Poppins;
	font-size: 19.125px !important;
	line-height: 25.5px;
	background-color: #fff;
	display: inline-block;
	transition: all .15s ease;
}

.ginput_container_email input[type=email]::placeholder {
	color: #666;
	font-family: Poppins;
	font-size: 19.125px;
	opacity: 0.8;
}

.ginput_container_email input[type=email]:focus{
	border-style: dotted;
	border-color: #0e6240 !important;
}

/* submit button */
#gform_submit_button_41{
	background:#000;
	color:#fff;
	border:none;
	border-radius:4px;
	padding:10px 26px;
	font-size:13px;
	font-weight:600;
	text-transform:uppercase;
	letter-spacing:.02em;
	cursor:pointer;
	margin-top:20px;
	transition:background .15s ease;
}
#gform_submit_button_41:hover,
#gform_submit_button_41:focus{
	background:#1e293b;
}

/* 4 ── Sponsor block
   ------------------------------------------------*/
.sponsor-section{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:10px;
	margin-bottom:30px;
}
.sponsor-section .sponsor-image {
    width: 100%;
    max-width: 200px;
    margin: 0 auto;
}

.sponsor-section .sponsor-logo {
    width: 100%;
    height: auto;
    max-width: 200px;
    object-fit: contain;
}

.sponsor-section .sponsor-text {
    width: 100%;
    max-width: 550px;
    margin: 0 auto;
    padding: 0;
    font-size: 23px;
    font-weight: 700;
    line-height: 35px;
    text-align: center;
    color: #444;
}

/* 5 ── Thank‑you + disclaimers
   ------------------------------------------------*/
.thank-you-msg{ 
	text-align: center; 
	margin-top: 40px; 
}
.thank-you-msg h2{ 
	font-size: 20px; 
	margin-bottom: 12px; 
}

.event-disclaimers{
	font-size: 12px;
	color: #4b5563;
	margin-top: 40px;
	border-top: 1px solid #d5dbe1;
	padding-top: 20px;
}

/* Section Dividers */
.section-divider {
    background-color: #ccc;
    color: #313753;
    font-size: 17px;
    line-height: 31.5714px;
    margin: 25.5px 0px;
    border: none;
    height: 1px;
}

.thank-you-message h2 {
    text-align: center;
	margin-bottom: 25px;
}

/* 6 ── Responsive tweaks
   ------------------------------------------------*/
@media (max-width: 480px){
	body.single-voting-event #primary{ 
		padding: 20px 15px 40px; 
	}
	
	/* Event title */
	h1.event-title {
		font-size: 20px;
		text-align: center;
	}
	
	/* Event logo */
	.event-logo-wrap {
		width: 100%;
		max-width: 300px;
		margin: 20px auto;
	}
	
	.event-logo-wrap .event-logo {
		max-width: 300px;
	}
	
	/* Message box */
	.message-box {
		font-size: 18px !important;
		line-height: 26px !important;
		padding: 20px !important;
		margin-bottom: 30px !important;
	}
	
	/* Form label */
	.gfield_label.gform-field-label {
		font-size: 18px !important;
		line-height: 26px !important;
	}

	.gform_wrapper.gravity-theme .gfield-choice-input+label {
		max-width: 100% !important;
	}
	
	/* Grid of choices - single column on mobile */
	#input_41_4, .gfield_radio{ 
		grid-template-columns: 1fr !important; 
		gap: 15px;
		max-width: 100% !important;
	}
	
	/* Choice cards */
	.gchoice label {
		width: 100%;
		max-width: 100%;
		font-size: 16px;
		line-height: 22px;
		padding: 12px;
	}
	
	/* Adjust choice text for mobile */
	.choice-title {
		font-size: 16px;
		line-height: 20px;
	}
	
	.choice-line-2, .choice-line-3 {
		font-size: 14px;
		line-height: 18px;
	}
	
	/* Email field */
	.ginput_container_email input[type=email] {
		height: 50px;
		font-size: 16px !important;
		padding: 10px !important;
	}
	
	.ginput_container_email input[type=email]::placeholder {
		font-size: 16px;
	}
	
	/* Sponsor section */
	.sponsor-section .sponsor-text {
		font-size: 18px;
		line-height: 26px;
	}
	
	.sponsor-section .sponsor-image {
		max-width: 150px;
	}
	
	.sponsor-section .sponsor-logo {
		max-width: 150px;
	}
	
	/* Thank you message */
	.thank-you-msg h2 {
		font-size: 18px;
	}
	
	/* Disclaimers */
	.event-disclaimers {
		font-size: 11px;
		margin-top: 30px;
		padding-top: 15px;
	}
}

body .gform_wrapper .gform_body .gform_fields .gfield .gchoice {
    position: relative;
}

@media (max-width: 768px) {
	/* Tablet adjustments */
	body.single-voting-event #primary {
		padding: 30px 20px 50px;
	}
	
	.event-logo-wrap {
		width: 100%;
		max-width: 350px;
	}
	
	.event-logo-wrap .event-logo {
		max-width: 350px;
	}
	
	.message-box {
		font-size: 20px;
		line-height: 28px;
		padding: 25px;
	}
	
	.gchoice label {
		width: 100%;
		max-width: 100%;
	}
	
	/* Adjust grid for tablets */
	#input_41_4, .gfield_radio {
		grid-template-columns: repeat(2, 1fr);
	}
	
	/* Ensure images stay within their containers */
	.gchoice label img {
		max-width: 100%;
		height: auto;
		object-fit: contain;
	}

	.ast-separate-container .ast-article-post,
	.ast-separate-container .ast-article-single {
		padding: 40px;
	}
}

/* Add this to the form to prevent page jump */
.gform_wrapper {
	scroll-behavior: smooth;
	scroll-padding-top: 100px; /* Adjust based on your header height */
}

/* Ensure all images stay within their containers */
.gchoice label img,
.event-logo-wrap img,
.sponsor-section .sponsor-logo {
	max-width: 100%;
	height: auto;
	object-fit: contain;
}

/* 7 ── Redirect page styles
   ------------------------------------------------*/
.redirect-message {
    max-width: 650px;
    margin: 40px auto;
    background-color: #f8f9fa;
    border-radius: 15px;
    padding: 35px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.redirect-message h2 {
    color: #051145;
    font-family: Poppins;
    font-size: 30px;
    font-weight: 700;
    line-height: 39px;
    margin: 0 0 20px;
    text-align: center;
    border-bottom: 2px solid #051145;
    padding-bottom: 15px;
}

.redirect-message p {
    color: #051145;
    font-family: Poppins;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: 20px;
    text-align: center;
}

.redirect-message ol {
    text-align: left;
    margin: 0 0 0 20px;
    padding: 0;
    list-style-position: outside;
}

.redirect-message li {
    color: #051145;
    font-family: Poppins;
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 15px;
    padding-left: 10px;
    position: relative;
}

.redirect-message li:last-child {
    margin-bottom: 0;
}

.redirect-message li::marker {
    color: #051145;
    font-weight: 600;
}

@media (max-width: 480px) {
    .redirect-message {
        margin: 20px auto;
        padding: 25px;
    }
    
    .redirect-message h2 {
        font-size: 24px;
        line-height: 32px;
        margin-bottom: 15px;
        padding-bottom: 10px;
    }
    
    .redirect-message p {
        font-size: 16px;
        margin-bottom: 15px;
    }
    
    .redirect-message li {
        font-size: 14px;
        margin-bottom: 12px;
    }
}