/**
 * Gravity Forms styling for the Chamber Membri Router form.
 *
 * Matches the Calgary Chamber design system (calgary-chamber + chamber-element-addon
 * plugins): navy/blue palette, Poppins, pill controls, navy field borders, blue
 * focus ring. We consume the global `--chamber-*` tokens when the calgary-chamber
 * plugin is active, and fall back to the same hex values when it is not.
 *
 * Everything is scoped under `.pcmr-gf` (a class the plugin adds to the configured
 * target form only) so other Gravity Forms on the site are left untouched.
 */

.pcmr-gf,
.pcmr-tier-grid,
.pcmr-confirmation {
	--pcmr-primary:    var(--chamber-primary,   #041E42);
	--pcmr-secondary:  var(--chamber-secondary, #3392D2);
	--pcmr-tertiary:   var(--chamber-tertiary,  #AAD2ED);
	--pcmr-button:     var(--chamber-button,    #2A3037);
	--pcmr-text:       var(--chamber-text,      #0D1319);
	--pcmr-white:      var(--chamber-white,     #FFFFFF);
	--pcmr-gray-light: var(--chamber-gray-light,#F5F5F5);
	--pcmr-gray:       var(--chamber-gray,      #E8E8E8);
	--pcmr-gray-dark:  var(--chamber-gray-dark, #666666);
	--pcmr-error:      #D14836;
	--pcmr-radius-pill: 3rem;
	--pcmr-radius-soft: 1.25rem;
	--pcmr-ring: 0 0 0 3px rgba(51, 146, 210, 0.15);
	--pcmr-font: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ----------------------------------------------------------------------------
 * Base
 * ------------------------------------------------------------------------- */
.pcmr-gf,
.pcmr-gf input,
.pcmr-gf select,
.pcmr-gf textarea,
.pcmr-gf button {
	font-family: var(--pcmr-font);
}

.pcmr-gf .gfield {
	margin-bottom: 1.25rem;
}

/* Section / heading text */
.pcmr-gf .gsection_title,
.pcmr-gf .gfield--type-section .gsection_title {
	color: var(--pcmr-primary);
	font-weight: 600;
	font-size: 1.25rem;
	line-height: 1.3;
	border-bottom: 2px solid var(--pcmr-gray);
	padding-bottom: 0.5rem;
	margin-bottom: 1rem;
}

/* ----------------------------------------------------------------------------
 * Labels
 * ------------------------------------------------------------------------- */
.pcmr-gf .gfield_label,
.pcmr-gf legend.gfield_label {
	color: var(--pcmr-text);
	font-weight: 600;
	font-size: 0.95rem;
	margin-bottom: 0.4rem;
	display: block;
}

.pcmr-gf .gfield_required {
	color: var(--pcmr-secondary);
	margin-left: 0.15rem;
}

.pcmr-gf .gfield_description,
.pcmr-gf .ginput_complex label {
	color: var(--pcmr-gray-dark);
	font-size: 0.85rem;
}

/* ----------------------------------------------------------------------------
 * Text inputs, email, tel, textarea, select
 * ------------------------------------------------------------------------- */
.pcmr-gf input[type="text"],
.pcmr-gf input[type="email"],
.pcmr-gf input[type="tel"],
.pcmr-gf input[type="url"],
.pcmr-gf input[type="number"],
.pcmr-gf input[type="password"],
.pcmr-gf textarea,
.pcmr-gf select {
	box-sizing: border-box;
	width: 100%;
	height: auto;
	min-height: 3.25rem;
	padding: 0.75rem 1.15rem;
	background: var(--pcmr-white);
	color: var(--pcmr-text);
	border: 2px solid var(--pcmr-primary);
	border-radius: var(--pcmr-radius-pill);
	font-size: 1rem;
	line-height: 1.5;
	box-shadow: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
}

/* Textareas read better with a softer radius than a full pill. */
.pcmr-gf textarea {
	border-radius: var(--pcmr-radius-soft);
	min-height: 7rem;
	resize: vertical;
}

.pcmr-gf input::placeholder,
.pcmr-gf textarea::placeholder {
	color: #9aa3ad;
}

.pcmr-gf input[type="text"]:hover,
.pcmr-gf input[type="email"]:hover,
.pcmr-gf input[type="tel"]:hover,
.pcmr-gf textarea:hover,
.pcmr-gf select:hover {
	background: var(--pcmr-gray-light);
}

.pcmr-gf input[type="text"]:focus,
.pcmr-gf input[type="email"]:focus,
.pcmr-gf input[type="tel"]:focus,
.pcmr-gf input[type="url"]:focus,
.pcmr-gf input[type="number"]:focus,
.pcmr-gf textarea:focus,
.pcmr-gf select:focus {
	outline: none;
	border-color: var(--pcmr-secondary);
	box-shadow: var(--pcmr-ring);
	background: var(--pcmr-white);
}

/* Custom select caret (navy), matching the member-directory dropdowns. */
.pcmr-gf select {
	background-image: url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"%3e%3cpath fill="%23041E42" d="M7 10l5 5 5-5z"/%3e%3c/svg%3e');
	background-repeat: no-repeat;
	background-position: right 1.1rem center;
	background-size: 14px;
	padding-right: 2.75rem;
	cursor: pointer;
}

/* ----------------------------------------------------------------------------
 * Radios & checkboxes
 * ------------------------------------------------------------------------- */
.pcmr-gf .gfield_radio,
.pcmr-gf .gfield_checkbox {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.pcmr-gf .gfield_radio .gchoice,
.pcmr-gf .gfield_checkbox .gchoice {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.pcmr-gf .gfield_radio input[type="radio"],
.pcmr-gf .gfield_checkbox input[type="checkbox"] {
	width: 1.15rem;
	height: 1.15rem;
	accent-color: var(--pcmr-secondary);
	margin: 0;
	cursor: pointer;
}

.pcmr-gf .gfield_radio label,
.pcmr-gf .gfield_checkbox label {
	color: var(--pcmr-text);
	font-weight: 400;
	font-size: 0.98rem;
	cursor: pointer;
}

/* ----------------------------------------------------------------------------
 * Choice cards: radio fields with the `pcmr-choice-cards` CSS class (the
 * "How would you like to proceed?" intent radio). PCMR_Form_Styles rewrites each
 * label into icon + title + second line. One highlight block (::before) slides
 * under the checked card: sideways on desktop, vertically on mobile.
 * ponytail: the slide maths assumes two choices; a third needs its own offsets.
 * ------------------------------------------------------------------------- */
.pcmr-gf .pcmr-choice-cards .gfield_radio {
	--pcmr-cc-pad: 6px;
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-auto-rows: 1fr;
	gap: 0;
	padding: var(--pcmr-cc-pad);
	border: 2px solid var(--pcmr-primary);
	border-radius: var(--pcmr-radius-soft);
	background: var(--pcmr-white);
}

.pcmr-gf .pcmr-choice-cards .gfield_radio::before {
	content: "";
	position: absolute;
	top: var(--pcmr-cc-pad);
	left: var(--pcmr-cc-pad);
	width: calc(50% - var(--pcmr-cc-pad));
	height: calc(100% - 2 * var(--pcmr-cc-pad));
	border-radius: calc(var(--pcmr-radius-soft) - var(--pcmr-cc-pad));
	background: var(--pcmr-primary);
	box-shadow: 0 6px 18px rgba(4, 30, 66, 0.22);
	opacity: 0;
	transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.2s ease;
}

.pcmr-gf .pcmr-choice-cards .gfield_radio:has(input:checked)::before {
	opacity: 1;
}

.pcmr-gf .pcmr-choice-cards .gfield_radio:has(.gchoice:nth-child(2) input:checked)::before {
	transform: translateX(100%);
}

.pcmr-gf .pcmr-choice-cards .gfield_radio .gchoice {
	position: relative;
	z-index: 1;
	display: flex;
}

/* The real radio stays in the DOM (conditional logic, validation, keyboard) but invisible. */
.pcmr-gf .pcmr-choice-cards .gfield_radio input[type="radio"] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

.pcmr-gf .pcmr-choice-cards .gfield_radio label {
	display: flex;
	flex: 1;
	align-items: center;
	gap: 0.85rem;
	margin: 0;
	padding: 1rem 1.25rem;
	border-radius: calc(var(--pcmr-radius-soft) - var(--pcmr-cc-pad));
	color: var(--pcmr-primary);
	font-size: 1rem;
	line-height: 1.25;
	cursor: pointer;
	transition: color 0.25s ease, background-color 0.2s ease;
}

.pcmr-gf .pcmr-choice-cards .gchoice:not(:has(input:checked)) label:hover {
	background-color: var(--pcmr-gray-light);
}

.pcmr-gf .pcmr-choice-cards .gchoice:has(input:checked) label {
	color: var(--pcmr-white);
}

.pcmr-gf .pcmr-choice-cards .gchoice:has(input:focus-visible) label {
	outline: 3px solid var(--pcmr-secondary);
	outline-offset: 2px;
}

.pcmr-gf .pcmr-choice-cards .pcmr-choice__icon {
	flex: none;
	width: 28px;
	height: 28px;
	padding: 8px;
	box-sizing: content-box;
	border-radius: 50%;
	background: rgba(51, 146, 210, 0.12);
	color: var(--pcmr-secondary);
	transition: background-color 0.25s ease, color 0.25s ease;
}

.pcmr-gf .pcmr-choice-cards .gchoice:has(input:checked) .pcmr-choice__icon {
	background: rgba(255, 255, 255, 0.16);
	color: var(--pcmr-white);
}

.pcmr-gf .pcmr-choice-cards .pcmr-choice__text {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

.pcmr-gf .pcmr-choice-cards .pcmr-choice__title {
	font-weight: 600;
	font-size: 1.05rem;
}

.pcmr-gf .pcmr-choice-cards .pcmr-choice__sub {
	font-size: 0.875rem;
	opacity: 0.8;
}

@media (max-width: 640px) {
	.pcmr-gf .pcmr-choice-cards .gfield_radio {
		grid-template-columns: 1fr;
	}
	.pcmr-gf .pcmr-choice-cards .gfield_radio::before {
		width: calc(100% - 2 * var(--pcmr-cc-pad));
		height: calc(50% - var(--pcmr-cc-pad));
	}
	.pcmr-gf .pcmr-choice-cards .gfield_radio:has(.gchoice:nth-child(2) input:checked)::before {
		transform: translateY(100%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.pcmr-gf .pcmr-choice-cards .gfield_radio::before,
	.pcmr-gf .pcmr-choice-cards .gfield_radio label,
	.pcmr-gf .pcmr-choice-cards .pcmr-choice__icon {
		transition: none;
	}
}

/* ----------------------------------------------------------------------------
 * Buttons (submit / next / previous)
 * ------------------------------------------------------------------------- */
/* !important is used here deliberately: Gravity Forms' "gravity-theme" ships
 * its own button styling that otherwise wins. The sibling Chamber plugins take
 * the same approach. */
.pcmr-gf .gform_footer input[type="submit"],
.pcmr-gf .gform_page_footer input[type="submit"],
.pcmr-gf .gform_button,
.pcmr-gf .gform_next_button,
.pcmr-gf .gform_previous_button,
.pcmr-gf input[type="submit"],
.pcmr-gf button[type="submit"],
.pcmr-gf button.gform-button {
	display: inline-block !important;
	width: auto !important;
	padding: 0.8125rem 1.75rem !important;
	background: var(--pcmr-button) !important;
	color: var(--pcmr-white) !important;
	border: 2px solid var(--pcmr-button) !important;
	border-radius: var(--pcmr-radius-pill) !important;
	font-family: var(--pcmr-font) !important;
	font-size: 1rem !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
}

.pcmr-gf .gform_button:hover,
.pcmr-gf .gform_next_button:hover,
.pcmr-gf input[type="submit"]:hover,
.pcmr-gf button[type="submit"]:hover {
	background: var(--pcmr-secondary) !important;
	border-color: var(--pcmr-secondary) !important;
	color: var(--pcmr-white) !important;
}

.pcmr-gf .gform_button:focus-visible,
.pcmr-gf .gform_next_button:focus-visible,
.pcmr-gf .gform_previous_button:focus-visible,
.pcmr-gf input[type="submit"]:focus-visible {
	outline: none !important;
	box-shadow: var(--pcmr-ring) !important;
}

/* Previous = quieter outline style */
.pcmr-gf .gform_previous_button,
.pcmr-gf input.gform_previous_button {
	background: var(--pcmr-white) !important;
	color: var(--pcmr-button) !important;
	border-color: var(--pcmr-gray) !important;
}

.pcmr-gf .gform_previous_button:hover {
	background: var(--pcmr-gray-light) !important;
	border-color: var(--pcmr-gray-dark) !important;
	color: var(--pcmr-text) !important;
}

.pcmr-gf .gform_footer,
.pcmr-gf .gform_page_footer {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
	margin-top: 1.5rem;
}

/* ----------------------------------------------------------------------------
 * Multi-page progress bar
 * ------------------------------------------------------------------------- */
.pcmr-gf .gf_progressbar_wrapper {
	margin-bottom: 1.75rem;
}

.pcmr-gf .gf_progressbar_title {
	color: var(--pcmr-primary);
	font-weight: 600;
	font-size: 0.9rem;
}

/* Track (GF names it per chosen color; override them all to our gray). */
.pcmr-gf .gf_progressbar,
.pcmr-gf .gf_progressbar_blue,
.pcmr-gf .gf_progressbar_gray,
.pcmr-gf .gf_progressbar_green,
.pcmr-gf .gf_progressbar_orange,
.pcmr-gf .gf_progressbar_red {
	background: var(--pcmr-gray) !important;
	overflow: hidden;
}

/* Fill: !important + every percentbar_* variant, since GF colors it with a
 * higher-specificity class rule (e.g. .percentbar_blue { background:#1e7ac4 }). */
.pcmr-gf .gf_progressbar_percentage,
.pcmr-gf .gf_progressbar_percentage.percentbar_blue,
.pcmr-gf .gf_progressbar_percentage.percentbar_gray,
.pcmr-gf .gf_progressbar_percentage.percentbar_green,
.pcmr-gf .gf_progressbar_percentage.percentbar_orange,
.pcmr-gf .gf_progressbar_percentage.percentbar_red {
	background-color: var(--pcmr-secondary) !important;
	color: var(--pcmr-white) !important;
	font-weight: 600;
}

/* ----------------------------------------------------------------------------
 * AJAX loading spinner (shows during the slow Membri create on submit).
 * GF's .gform-loader is a black/white border ring; recolor the visible halves
 * to chamber blue so it reads as a branded spinner.
 * ------------------------------------------------------------------------- */
.pcmr-gf .gform-loader {
	border-block-end-color: var(--pcmr-secondary) !important;
	border-inline-start-color: var(--pcmr-secondary) !important;
	border-block-start-color: rgba(51, 146, 210, 0.2) !important;
	border-inline-end-color: rgba(51, 146, 210, 0.2) !important;
}

/* ----------------------------------------------------------------------------
 * Validation / error states
 * ------------------------------------------------------------------------- */
.pcmr-gf .gfield_error input[type="text"],
.pcmr-gf .gfield_error input[type="email"],
.pcmr-gf .gfield_error input[type="tel"],
.pcmr-gf .gfield_error textarea,
.pcmr-gf .gfield_error select {
	border-color: var(--pcmr-error);
}

.pcmr-gf .gfield_error input:focus,
.pcmr-gf .gfield_error textarea:focus,
.pcmr-gf .gfield_error select:focus {
	box-shadow: 0 0 0 3px rgba(209, 72, 54, 0.15);
}

/* ----------------------------------------------------------------------------
 * International phone (GF 3.x): country picker + number read as one pill.
 * The wrapper carries the border, focus ring and error colour. Selectors are
 * long on purpose: Orbital styles the picker at five classes + element.
 * ------------------------------------------------------------------------- */
.pcmr-gf .gfield--type-phone .ginput_container_phone .gform-phone__input-wrapper {
	display: flex;
	align-items: stretch;
	min-height: 3.25rem;
	border: 2px solid var(--pcmr-primary);
	border-radius: var(--pcmr-radius-pill);
	background: var(--pcmr-white);
	overflow: hidden;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.pcmr-gf .gfield--type-phone .ginput_container_phone .gform-phone__input-wrapper:focus-within {
	border-color: var(--pcmr-secondary);
	box-shadow: var(--pcmr-ring);
}

.pcmr-gf .gfield_error.gfield--type-phone .ginput_container_phone .gform-phone__input-wrapper {
	border-color: var(--pcmr-error);
}

.pcmr-gf .gfield--type-phone .ginput_container_phone .ginput_country-selector_container,
.pcmr-gf .gfield--type-phone .ginput_container_phone .ginput_phone_container {
	display: flex;
	margin: 0;
}

.pcmr-gf .gfield--type-phone .ginput_container_phone .ginput_phone_container {
	flex: 1;
	min-width: 0;
}

.pcmr-gf .gfield--type-phone .ginput_container_phone button.gform-phone__country-selector.gform-theme-button.gform-theme-button--tertiary {
	display: flex;
	flex: 1;
	align-items: center;
	gap: 0.5rem;
	min-height: 0;
	margin: 0;
	padding: 0 0.9rem 0 1.15rem;
	border: 0;
	border-inline-end: 1px solid var(--pcmr-gray);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--pcmr-text);
	font-family: var(--pcmr-font);
	font-size: 1rem;
	font-weight: 500;
	cursor: pointer;
}

.pcmr-gf .gfield--type-phone .ginput_container_phone button.gform-phone__country-selector.gform-theme-button.gform-theme-button--tertiary:hover,
.pcmr-gf .gfield--type-phone .ginput_container_phone button.gform-phone__country-selector.gform-theme-button.gform-theme-button--tertiary:focus-visible {
	background: var(--pcmr-gray-light);
	outline: none;
}

.pcmr-gf .gfield--type-phone .ginput_container_phone .gform-phone__input {
	flex: 1;
	min-width: 0;
	min-height: 0;
	height: auto;
	padding: 0.75rem 1.15rem 0.75rem 0.9rem;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

.pcmr-gf .gfield--type-phone .ginput_container_phone .gform-phone__input:focus {
	border: 0;
	box-shadow: none;
}

/* "Country" / "Phone Number" sub-labels: the field legend already says Phone. Kept for screen readers. */
.pcmr-gf .gfield--type-phone .ginput_container_phone .gform-field-label--type-sub {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.pcmr-gf .gfield--type-phone .gform-phone__dropdown {
	margin-top: 0.5rem;
	border: 2px solid var(--pcmr-primary);
	border-radius: var(--pcmr-radius-soft);
	box-shadow: 0 12px 32px rgba(4, 30, 66, 0.18);
	overflow: hidden;
}

.pcmr-gf .validation_message,
.pcmr-gf .gfield_validation_message {
	color: var(--pcmr-error);
	font-size: 0.85rem;
	font-weight: 500;
	margin-top: 0.35rem;
}

.pcmr-gf .gform_validation_errors {
	border: 1px solid var(--pcmr-error);
	border-radius: var(--pcmr-radius-soft);
	background: rgba(209, 72, 54, 0.06);
	padding: 1rem 1.25rem;
}

.pcmr-gf .gform_validation_errors .gform_submission_error {
	color: var(--pcmr-error);
	font-weight: 600;
}

/* ----------------------------------------------------------------------------
 * Confirmation messages (our custom Buy Now / fallback markup)
 * ------------------------------------------------------------------------- */
.pcmr-confirmation {
	font-family: var(--pcmr-font);
	color: var(--pcmr-text);
	background: var(--pcmr-gray-light);
	border: 1px solid var(--pcmr-gray);
	border-left: 4px solid var(--pcmr-secondary);
	border-radius: var(--pcmr-radius-soft);
	padding: 1.25rem 1.5rem;
	font-size: 1.05rem;
	line-height: 1.55;
}

.pcmr-confirmation a {
	color: var(--pcmr-secondary);
	font-weight: 600;
}

/* ----------------------------------------------------------------------------
 * Selected tier radio: visually hidden, the tier cards are the real control.
 * Kept in the DOM (not display:none) so the card->radio sync, required
 * validation, and submission all keep working, and screen readers can reach it.
 * ------------------------------------------------------------------------- */
.pcmr-gf .pcmr-tier-radio {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
}