/* ==========================================================
   UTILITIES
   ========================================================== */

.d-hide {
	display: none !important;
}

.hide-temp {
	opacity: 0;
	display: none;
}


/* ==========================================================
   FORM FIELDS
   ========================================================== */

/* Shared label styling */
.signup-form-field label,
.vote-form-input label {
	font-size: 14px;
	font-weight: 600 !important;
	text-transform: capitalize;
	letter-spacing: 0.2px;
	color: #2d4770;
}

/* Signup inputs */
.signup-form-field input[type=text],
.signup-form-field input[type=date],
.signup-form-field input[type=email],
.signup-form-field input[type=number] {
	border: none !important;
	border-radius: 12px;
	border: 1px solid #e2e8f0 !important;
	height: 48px;
}

/* Voting inputs */
.vote-form-input input[type=text],
.vote-form-input input[type=date],
.vote-form-input input[type=email],
.vote-form-input input[type=number] {
	border: none !important;
	border-radius: 12px;
	border: 1px solid #e2e8f0 !important;
	height: 48px;
}

/* Custom focus ring for voting form */
.vote-form-input input[type=text]:focus,
.vote-form-input input[type=date]:focus,
.vote-form-input input[type=email]:focus,
.vote-form-input input[type=number]:focus {
	border-color: rgba(110, 143, 190, 0.5) !important;

	/* Soft glow effect */
	box-shadow:
		rgba(0, 0, 0, 0) 0px 0px 0px 0px,
		rgba(0, 0, 0, 0) 0px 0px 0px 0px,
		rgba(0, 0, 0, 0) 0px 0px 0px 0px,
		rgba(133, 112, 170, 0.15) 0px 0px 0px 4px,
		rgba(0, 0, 0, 0) 0px 0px 0px 0px;
}

/* Custom focus ring for signup form */
.signup-form-field input[type=text]:focus,
.signup-form-field input[type=date]:focus,
.signup-form-field input[type=email]:focus,
.signup-form-field input[type=number]:focus {
	border-color: rgba(110, 143, 190, 0.5) !important;

	box-shadow:
		rgba(0, 0, 0, 0) 0px 0px 0px 0px,
		rgba(0, 0, 0, 0) 0px 0px 0px 0px,
		rgba(0, 0, 0, 0) 0px 0px 0px 0px,
		rgba(133, 112, 170, 0.15) 0px 0px 0px 4px,
		rgba(0, 0, 0, 0) 0px 0px 0px 0px;
}

/* Submit buttons */
.signup-form-button button,
.vote-form-submit {
	border-radius: 24px !important;
	font-weight: 600 !important;
	margin-top: 12px;
	height: 44px;
	margin-left: 20px;
	margin-right: 20px;
}

.signup-form-button button {
	background: #32569F !important;
	color: #fff !important;	
	width: 100%;
	margin: 0 !important;
}

.vote-form-submit {
	color: #FFF !important;
}

.enter-to-vote {
	margin-bottom: 0 !important;
	margin-top: 12px;
}

.fluentform .ff-el-group {
	margin-bottom: 12px;
}


/* ==========================================================
   TERMS & LEGAL TEXT
   ========================================================== */

.terms-text {
	margin-bottom: 4px !important;
	padding-left: 20px;
}

.terms-text label {
	line-height: 1 !important;
}

.terms-text p {
	font-weight: 400;
	font-size: 12px !important;
	text-transform: capitalize !important;
}

.fluentform .ff-el-is-error .text-danger {
	font-size: 16px;
}

/* ==========================================================
   FORM CONTAINER & BACKGROUND EFFECTS
   ========================================================== */

.ff-background-grey {
	position: relative;
	padding: 20px;
}

/* Keep content above pseudo-background */
.ff-t-cell {
	z-index: 2;
}

.ff-background-grey input,
.ff-background-grey button {
	z-index: 2;
	position: relative !important;
}

/*
	Creates the large soft background panel behind
	the form without affecting layout flow.
*/
.ff-background-grey::before {
	content: '';
	width: 100%;
	height: calc(100% + 220px);
	background: rgba(237, 243, 248, 0.5);
	position: absolute;
	border-radius: 20px;
	left: 0px;
	top: -62px;
}


/* ==========================================================
   VOTING SECTION
   ========================================================== */

.vote-heading {
	font-size: 24px;
	font-weight: 700 !important;
	letter-spacing: 0.2px;
	color: #2b2b2b;
	padding-bottom: 0 !important;
	padding-left: 20px;
	padding-right: 20px;
}

.vote-desc {
	font-size: 14px;
	color: #2d4770;
	display: none;
}

.vote-success {
	color: #2b2b2b;
	font-size: 24px;
	font-weight: 600;
	text-align: center;
}


/* ==========================================================
   FLAVOR FORM HEADER
   ========================================================== */

.flavor-form .ff-t-cell.ff-t-column-2 {
	background: #EEF4FF;
	border-radius: 24px;
	padding: 4px 20px;
}

.flavor-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.flavor-1-main {
	color: #2b2b2b;
	font-size: 24px;
	font-weight: 900;
	letter-spacing: 0.1px;
	line-height: 1;
	padding-bottom: 0 !important;
}

.flavor-1-sub {
	font-size: 16px;
	font-weight: 400;
	color: rgb(226, 232, 240);
	line-height: 1;
	padding-bottom: 0 !important;
}

.flavor-2-main {
	background: rgba(255, 255, 255, 0.2);
	color: white;
	padding: 4px 16px;
	border-radius: 24px;
	font-weight: 600;
}


/* ==========================================================
   FLAVOR CARD GRID
   ========================================================== */

/* Desktop */
.flavor-options .ff-el-input--content {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 20px;
}

/* Tablet */
@media (max-width: 1200px) {
	.flavor-options .ff-el-input--content {
		grid-template-columns: repeat(3, 1fr) !important;
	}
}

/* Small tablet */
@media (max-width: 900px) {
	.flavor-options .ff-el-input--content {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

/* Mobile */
@media (max-width: 400px) {
	.flavor-options .ff-el-input--content {
		grid-template-columns: 1fr !important;
	}
}

/* Desktop */
.flavor-options.favorite-option .ff-el-input--content {
	display: grid !important;
	grid-template-columns: repeat(6, 1fr) !important;
	gap: 8px;
}

/* Large tablet */
@media (max-width: 1400px) {
	.flavor-options.favorite-option .ff-el-input--content {
		grid-template-columns: repeat(4, 1fr) !important;
	}
}

/* Tablet */
@media (max-width: 1000px) {
	.flavor-options.favorite-option .ff-el-input--content {
		grid-template-columns: repeat(3, 1fr) !important;
	}
}

/* Small tablet */
@media (max-width: 768px) {
	.flavor-options.favorite-option .ff-el-input--content {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

/* Mobile */
@media (max-width: 480px) {
	.flavor-options.favorite-option .ff-el-input--content {
		grid-template-columns: 1fr !important;
	}
}

/* Card container */
.flavor-options .ff-el-form-check-label {
	display: block;
	position: relative;
	cursor: pointer;
	border-radius: 18px;
	overflow: hidden;
	background: #ffffff;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
	transition: all 0.25s ease;
	height: 100%;
}

/* Remove FluentForms default spacing */
.flavor-options .ff-el-form-check-label span {
	display: block;
	margin: 0 !important;
	line-height: normal !important;
}

/* Hide native radio button */
.flavor-options .ff-el-form-check-input {
	position: absolute;
	opacity: 0;
}

/* Card text area */
.flavor-options .ff-el-form-check-label span {
	padding: 150px 4px 12px 40px;
	font-size: 15px;
	font-weight: 700;
	color: #111827;
	z-index: 2;
	text-transform: capitalize !important;
}

/*
	Default image injected using a pseudo-element.
	Individual flavors override this image below.
*/
.flavor-options .ff-el-form-check-label span::before {
	content: "" !important;
	display: block !important;
	position: absolute !important;
	top: 0;
	left: 0;
	width: 100%;
	height: 160px;
	background-image: url("https://i0.wp.com/saltbreadko.com/wp-content/uploads/2026/02/ChatGPT-Image-Feb-23-2026-06_13_19-PM.png?fit=285%2C285&ssl=1") !important;
	background-size: cover !important;
	background-position: center !important;
	border-top-left-radius: 18px;
	border-top-right-radius: 18px;
	z-index: 1;
}

/* Flavor-specific image overrides */
.flavor-options .ff-el-form-check-label input[value="Corn Cream"] + span::before {
	background-image: url("https://saltbreadko.com/wp-content/uploads/2026/06/corn_salt_bread.png") !important;
}

.flavor-options .ff-el-form-check-label input[value="Black Sesame"] + span::before {
	background-image: url("https://saltbreadko.com/wp-content/uploads/2026/06/black_sesame.png") !important;
}

.flavor-options .ff-el-form-check-label input[value="Ube Bae"] + span::before {
	background-image: url("https://saltbreadko.com/wp-content/uploads/2026/06/ube_sweet.png") !important;
}

.flavor-options .ff-el-form-check-label input[value="Strawberry White Ganache"] + span::before {
	background-image: url("https://saltbreadko.com/wp-content/uploads/2026/06/strawberry_white_ganache.jpg") !important;
}

.flavor-options .ff-el-form-check-label input[value="Brie Cheese"] + span::before {
	background-image: url("https://saltbreadko.com/wp-content/uploads/2026/06/brie_cheese_sandwich.png") !important;
}

.flavor-options .ff-el-form-check-label input[value="Super Milk"] + span::before {
	background-image: url("https://saltbreadko.com/wp-content/uploads/2026/06/supermilk.jpg") !important;
}


.flavor-options .ff-el-form-check-label input[value="Pandan Coconut"] + span::before {
	background-image: url("https://saltbreadko.com/wp-content/uploads/2026/06/pandan_coconut.jpg") !important;
}


.flavor-options .ff-el-form-check-label input[value="Uji Matcha"] + span::before {
	background-image: url("https://saltbreadko.com/wp-content/uploads/2026/06/Matcha.jpg") !important;
}

.flavor-options .ff-el-form-check-label input[value="Nutella"] + span::before {
	background-image: url("https://saltbreadko.com/wp-content/uploads/2026/06/Nutella.jpg") !important;
}

.flavor-options .ff-el-form-check-label input[value="Earl Grey Chocolate"] + span::before {
	background-image: url("https://saltbreadko.com/wp-content/uploads/2026/06/earl_gray_chocolate.jpg") !important;
}


/* Flavor descriptions */
.flavor-options .ff-el-form-check-label span::after {
	display: block !important;
	font-size: 13px;
	font-weight: 400;
	color: #6b7280;
	margin-top: 6px;
	line-height: 1.4;
	text-transform: initial;
}

/* Hover state */
.flavor-options .ff-el-form-check-label:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 28px rgba(0, 0, 0, 0.12);
}

/*
	Custom radio indicator.
	The actual radio is hidden above.
*/
.flavor-options .ff-el-form-check-label::after {
	content: "";
	position: absolute;
	bottom: 27px;
	left: 12px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 2px solid #d1d5db;
	background: white;
	transition: all 0.2s ease;
}

/*
	:has() allows the parent card to react
	when its child radio button is selected.
*/
.flavor-options .ff-el-form-check-label:has(input:checked) {
	outline: 2px solid rgba(47, 79, 127, 1);
	box-shadow: 0 12px 28px rgba(37, 99, 235, 0.25);
}

.flavor-options .ff-el-form-check-label:has(input:checked)::after {
	background: rgba(47, 79, 127, 1);
	border-color: rgba(47, 79, 127, 1);
	box-shadow: inset 0 0 0 4px white;
}


/* ==========================================================
   COUNTDOWN TIMER
   ========================================================== */

#countdown {
	width: 100%;
}

.timer-section {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.timer-value {
	background-size: cover;
	border: none !important;
	background: url(https://i0.wp.com/saltbreadnyc.com/wp-content/uploads/2026/02/cropped-saltbread_mini_logo-1.png) !important;
	background-size: contain !important;
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	width: 280px;
	height: 280px;
	font-size: 62px;
}

.timer-label {
	font-weight: 500;
	font-size: 28px;
	width: 280px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.timer-hidden {
	display: none;
}


/* ==========================================================
   IMAGES & MEDIA
   ========================================================== */

#signup-image-right {
	height: 100%;
}

#signup-image-right img {
	height: 100% !important;
}

#page_content_wrapper #info-image {
	height: 100%;
}

#page_content_wrapper #info-image img {
	height: 100% !important;
}


/* ==========================================================
   NAVIGATION & BUTTON HELPERS
   ========================================================== */

#view-menu-bday a {
	width: 100%;
}

.header-menu-icon a.elementor-icon,
.footer-icons a.elementor-icon {
	font-size: 18px !important;
}


/* ==========================================================
   ELEMENTOR CAROUSEL
   ========================================================== */

.elementor-image-carousel-wrapper .swiper-slide {
	height: 285px;
	height: 285px !important;
	display: flex;
}

/* Force images to fill each slide */
.elementor-image-carousel-wrapper .swiper-slide img {
	width: 100%;
	height: 100% !important;
	object-fit: cover !important;
	border: 3px solid white;
	border-right-width: 2px;
}

.swiper-slide-inner {
	width: 100%;
	height: 100%;
}


/* ==========================================================
   BIRTHDAY COMPONENTS
   ========================================================== */

.b-day-highlight {
	color: #32569F;
	font-weight: 600;
}

.b-day-id {
	display: flex;
	align-items: top;
	padding: 8px 12px 4px 12px;
	border: 1px solid #BECEEC;
	border-radius: 16px;
	background: #DDE6F6;
}

.b-day-id p {
	line-height: 1.4;
	margin-top: 5px;
	margin-bottom: 0;
}

.b-day-icon {
	margin-right: 12px;
}

.id-card {
	width: 80px;
	max-width: 80px !important;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 720px) {

	.timer-value {
		width: 99px;
		height: 100px;
		font-size: 23px;
	}

	.timer-label {
		font-weight: 500;
		font-size: 14px;
		width: 100px;
		height: 30px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}