/* ================================================================================================
 * BASELINE — KMA CSS MODULE 10 — ANNUAL DUES
 * ================================================================================================
 *
 * FILE: 10-annual-dues.css
 * VERSION: 1.0
 * Last Updated: 2026-03-21
 *
 * OWNS
 * ----
 * - Annual Dues hero bleed styling
 * - Header menu highlight for dues active state
 * - Payment method UI (radio → pill transformation)
 * - Zelle instruction panel visibility
 * - Popup #3252 (Zelle Instructions) mobile sizing fixes
 *
 * PURPOSE
 * -------
 * - Provide styling for the Annual Dues page and payment UI.
 * - Replace native radio buttons with styled pill selectors.
 * - Ensure consistent layout and usability across devices.
 *
 * IMPORTANT
 * ---------
 * - NO LOGIC OR STRUCTURAL CHANGES HAVE BEEN MADE.
 * - This snapshot reflects the working production version.
 *
 * ================================================================================================ */


/* =============================================================================
 * MODULE 10A — HERO BLEED (ANNUAL DUES PAGE)
 * ============================================================================= */

.km-annual-dues-page.km-hero-bleed.hero-image {

	/**** Extend hero image beyond normal container width. ****/
	max-width: none;

	/**** Oversize width to create full-bleed visual effect. ****/
	width: 220%;
}


/* =============================================================================
 * MODULE 10B — HEADER MENU HIGHLIGHT (ACTIVE WINDOW)
 * ============================================================================= */

#main-header .km-menu-dues--active > a,
#main-header .km-menu-dues--active > a:visited {

	/**** Strong red highlight for active dues menu item. ****/
	color: #c40000 !important;

	/**** Emphasize active state. ****/
	font-weight: 700;
}

/* Optional: hover state */
#main-header .km-menu-dues--active > a:hover {

	/**** Slightly darker red on hover. ****/
	color: #9e0000 !important;
}


/* =============================================================================
 * MODULE 10C — PAYMENT FORM: HIDE DEFAULT SUBMIT BUTTON
 * ============================================================================= */

.km-payment-methods .elementor-field-type-submit {

	/**** Hide Elementor's default submit button (custom flow used instead). ****/
	display: none !important;
}


/* =============================================================================
 * MODULE 10D — RADIO BUTTONS AS HORIZONTAL “PILLS”
 * ============================================================================= */

/* Lay the radio options out horizontally */
.km-payment-methods .elementor-field-subgroup {

	/**** Horizontal layout for payment method options. ****/
	display: flex !important;
	flex-wrap: nowrap;
	gap: 12px;
	align-items: center;
}

/* Hide the native radio circle */
.km-payment-methods input[type="radio"] {

	/**** Visually hide native radio input while preserving accessibility. ****/
	position: absolute !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

/* Make each label look like a pill */
.km-payment-methods .elementor-field-option label {

	/**** Pill-style option container. ****/
	display: inline-flex !important;
	align-items: center;
	justify-content: center;

	/**** Pill shape + spacing. ****/
	padding: 10px 16px;
	border-radius: 999px;

	/**** Base styling. ****/
	border: 1px solid rgba(0,0,0,.25);
	background: rgba(255,255,255,.7);

	/**** Typography + interaction. ****/
	font-weight: 700;
	cursor: pointer;
	user-select: none;

	/**** Subtle hover animation. ****/
	transition: transform .15s ease, background-color .15s ease, border-color .15s ease;
}

/* Hover style */
.km-payment-methods .elementor-field-option label:hover {

	/**** Slight lift on hover. ****/
	transform: translateY(-1px);
}

/* Selected pill style */
.km-payment-methods .elementor-field-option input[type="radio"]:checked + label {

	/**** Stronger border + subtle fill for selected state. ****/
	border-color: rgba(0,0,0,.55);
	background: rgba(0,0,0,.06);
}


/* =============================================================================
 * MODULE 10E — MOBILE ADJUSTMENTS FOR PAYMENT PILLS
 * ============================================================================= */

@media (max-width: 767px) {

	.km-payment-methods .elementor-field-subgroup {

		/**** Allow wrapping on smaller screens. ****/
		flex-wrap: wrap;
	}
}


/* =============================================================================
 * MODULE 10F — CENTERING PAYMENT METHOD GROUP + FORM
 * ============================================================================= */

/* Center the radio pill group */
.km-payment-methods .elementor-field-subgroup {

	/**** Center pills horizontally. ****/
	display: flex !important;
	justify-content: center !important;
	align-items: center;
}

/* Ensure the entire form aligns with the button width */
.km-payment-methods .elementor-form-fields-wrapper {

	/**** Center entire payment form contents. ****/
	display: flex;
	justify-content: center;
}

/* Ensure the form does not stretch full width */
.km-payment-methods {

	/**** Center-align text within payment form. ****/
	text-align: center;
}


/* =============================================================================
 * MODULE 10G — ZELLE PANEL VISIBILITY
 * ============================================================================= */

.km-zelle-panel { 

	/**** Hidden by default; revealed via JS interaction. ****/
	display: none; 
	margin-top: 12px;
}


/* =============================================================================
 * MODULE 10H — POPUP #3252 (ZELLE INSTRUCTIONS) — MOBILE HEIGHT FIX
 * ============================================================================= */

/* Give the whole dialog a sane size */
#elementor-popup-modal-3252 .dialog-widget-content{

	/**** Allow popup to grow vertically within viewport. ****/
	height: auto !important;
	max-height: 90vh !important;

	/**** Keep scrolling inside the message container. ****/
	overflow: hidden !important;
}

/* Make the message area the scroller */
#elementor-popup-modal-3252 .dialog-message{

	/**** Enable vertical scrolling inside popup content. ****/
	height: auto !important;
	max-height: 90vh !important;
	overflow-y: auto !important;

	/**** Improve scroll feel on iOS devices. ****/
	-webkit-overflow-scrolling: touch;
}


/* =============================================================================
 * MODULE 10I — MOBILE WIDTH ADJUSTMENT FOR POPUP
 * ============================================================================= */

@media (max-width: 767px){

	#elementor-popup-modal-3252 .dialog-widget-content{

		/**** Prevent popup from exceeding viewport width. ****/
		width: calc(100vw - 24px) !important;
		max-width: calc(100vw - 24px) !important;
	}
}


/* ================================================================================================
 * END OF MODULE 10
 * ================================================================================================ */