/* =========================================================
   Baptists on Mission — GiveWP Visual Donation Forms
   Optimized for GiveWP 4.19.1.1 multi-step forms
   Loaded inside the GiveWP iframe via functions.php.
   ========================================================= */

/* Design tokens */
.givewp-donation-form {
    --bom-navy: #003366;
    --bom-blue: #0877c9;
    --bom-blue-hover: #065f9f;
    --bom-focus: #0077c8;
    --bom-gray: #f2f2f2;
    --bom-gray-hover: #e5e5e5;
    --bom-radius: 4px;
    padding: 0 !important;
}
.givewp-donation-form .givewp-layouts-header__templates--background .givewp-layouts-headerImage img {
	border-radius: 0!important;
}
.givewp-donation-form {
    font-family: "proxima-nova", sans-serif;
}

.givewp-donation-form button,
.givewp-donation-form input,
.givewp-donation-form select,
.givewp-donation-form textarea {
    font-family: inherit;
}
.givewp-layouts-headerTitle h2 {
	font-family: "proxima-nova", sans-serif!important;
	text-transform: uppercase;
	font-weight: 700!important;
	margin: 0!important;
}
/* Remove default outer spacing; leave later checkout steps intact */
.givewp-donation-form__steps {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
}
.givewp-section-nodes:first-of-type {
    margin: 20px 0 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
}
.givewp-donation-form__steps-body,
.givewp-donation-form__step--start,
.givewp-layouts-multiStepForm,
.givewp-layouts-multiStepForm__form,
.givewp-layouts-section,
.givewp-layouts-section__fieldset,
.givewp-section-nodes {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

/* Suppress the empty step header and progress on the first step only */
.givewp-donation-form:has(.givewp-donation-form__step--start.givewp-donation-form__step--visible)
:is(.givewp-donation-form__steps-header, .react-aria-ProgressBar) {
    display: none !important;
}

/* First step: compact form field layout */
.givewp-donation-form__step--start .givewp-groups-donationAmount {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.givewp-donation-form__step--start .givewp-fields {
    margin: 0 !important;
    padding: 0 !important;
}

/* Frequency choices: four columns, same visual style as amounts */
.givewp-fields-radio-subscriptionPeriod fieldset {
    margin: 0 !important;
    padding: 0 !important;
}

.givewp-fields-radio-subscriptionPeriod legend {
    margin: 20px 0 14px 0 !important;
    padding: 0 !important;
	font-family: proxima-nova, sans-serif !important;
	text-transform: uppercase;
	color:#000000;
	font-size: 14px;
	font-weight: 700;
}

.givewp-fields-radio-subscriptionPeriod .givewp-fields-radio__options {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: var(--bom-radius) !important;
    background: transparent !important;
}

.givewp-fields-radio-subscriptionPeriod .givewp-fields-radio__option-container {
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
}

.givewp-fields-radio-subscriptionPeriod .givewp-fields-radio__option-container label {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100%;
    min-height: 36px !important;
    padding: 15px 5px !important;
    border: 0 !important;
    border-radius: var(--bom-radius) !important;
    background: var(--bom-gray) !important;
    color: #000000 !important;
    font-size: 12px !important;
	letter-spacing: .5px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
    white-space: nowrap;
    box-shadow: none !important;
    outline: none !important;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.givewp-fields-radio-subscriptionPeriod .givewp-fields-radio__option-container input:checked + label {
    background: var(--bom-navy) !important;
    color: #fff !important;
}

.givewp-fields-radio-subscriptionPeriod .givewp-fields-radio__option-container input:not(:checked) + label:hover {
    background: var(--bom-gray-hover) !important;
}

/* Suppress mouse-focus effects, but retain keyboard focus visibility */
.givewp-fields-radio-subscriptionPeriod .givewp-fields-radio__option-container input:focus + label {
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
}

.givewp-fields-radio-subscriptionPeriod .givewp-fields-radio__option-container input:focus-visible + label {
    outline: 2px solid var(--bom-focus) !important;
    outline-offset: 2px !important;
}

/* Donation amounts: single row of three preset buttons */
.givewp-fields-amount-amount {
    margin: 0 !important;
}

.givewp-fields-amount__input-label-container {
    margin: 0 0 6px !important;
    padding: 0 !important;
}

.givewp-fields-radio span.givewp-fields__label-text,
.givewp-fields-amount__input-label-container span.givewp-fields__label-text {
    text-transform: uppercase !important;
    color: #000 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
}

.givewp-fields-amount__levels-container {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: auto !important;
    gap: 6px !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.givewp-fields-amount__level-container {
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Override generic section buttons on the actual amount controls. */
.givewp-donation-form .givewp-layouts-section button.givewp-fields-amount__level {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 52px !important;
    padding: 15px 10px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: var(--bom-radius) !important;
    background: var(--bom-gray) !important;
    color: #000 !important;
    font-family: "proxima-nova", sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: .5px !important;
    text-transform: none !important;
    outline: none !important;
    box-shadow: none !important;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.givewp-donation-form .givewp-layouts-section button.givewp-fields-amount__level:not(.givewp-fields-amount__level--selected):hover {
    background: var(--bom-gray-hover) !important;
    color: #000 !important;
}

.givewp-donation-form .givewp-layouts-section button.givewp-fields-amount__level--selected,
.givewp-donation-form .givewp-layouts-section button.givewp-fields-amount__level--selected:hover,
.givewp-donation-form .givewp-layouts-section button.givewp-fields-amount__level--selected:focus,
.givewp-donation-form .givewp-layouts-section button.givewp-fields-amount__level--selected:active {
    background: var(--bom-navy) !important;
    color: #fff !important;
}

/* Remove mouse click outline but keep visible keyboard focus. */
.givewp-donation-form .givewp-layouts-section button.givewp-fields-amount__level:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}

.givewp-donation-form .givewp-layouts-section button.givewp-fields-amount__level:focus-visible {
    outline: 2px solid var(--bom-focus) !important;
    outline-offset: 2px !important;
}

/* Custom amount input */
.givewp-fields-amount__input-container {
    margin: 6px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
}

.givewp-fields-amount__input-custom {
    box-sizing: border-box !important;
    min-height: 38px !important;
    padding: 8px 10px !important;
    border: 1px solid #000 !important;
    border-radius: var(--bom-radius) !important;
    outline: none !important;
    background: #fff !important;
    box-shadow: none !important;
    font-size: 14px !important;
}

.givewp-fields-amount__input-custom:hover {
    border-color: #999 !important;
}

.givewp-fields-amount__input-custom:focus,
.givewp-fields-amount__input-custom:focus-visible,
.givewp-fields-amount__input-custom:active {
    border-color: var(--bom-focus) !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(0, 119, 200, .18) !important;
}

/* Fee recovery */
.givewp-donation-form__step--start .givewp-fields-feeRecovery {
    margin: 0 !important;
    padding: 0 !important;
}

.givewp-fields-feeRecovery .feeRecovery-container,
.givewp-fields-feeRecoveryConfirmation .feeRecovery-container {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
}

.givewp-fields-feeRecovery .feeRecovery-container label {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    cursor: pointer;
}

.givewp-fields-feeRecovery input[type="checkbox"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    box-sizing: border-box !important;
    display: inline-grid !important;
    place-content: center;
    flex-shrink: 0;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #999 !important;
    border-radius: var(--bom-radius) !important;
    background: #fff !important;
    box-shadow: none !important;
    cursor: pointer;
}

.givewp-fields-feeRecovery input[type="checkbox"]:checked {
    border-color: var(--bom-focus) !important;
    background: var(--bom-focus) !important;
}

.givewp-fields-feeRecovery input[type="checkbox"]:checked::after {
    content: "";
    width: 5px;
    height: 9px;
    margin-top: -2px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.givewp-fields-feeRecovery input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--bom-focus) !important;
    outline-offset: 3px;
}

/* Next-step buttons on every step */
.givewp-donation-form__steps-button-next {
    width: 100% !important;
    min-height: 44px !important;
    margin-top: 12px !important;
    padding: 10px 15px !important;
    border: 0 !important;
    border-radius: var(--bom-radius) !important;
    background: var(--bom-blue) !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}

.givewp-donation-form__steps-button-next:hover {
    background: var(--bom-blue-hover) !important;
}

.givewp-donation-form__steps-button-next :is(svg, i),
.givewp-donation-form__steps-button-next::before,
.givewp-donation-form__steps-button-next::after {
    display: none !important;
    content: none !important;
}

/* Compact later steps without resetting gateway/payment layouts */
.givewp-donation-form__step:not(.givewp-donation-form__step--start) .givewp-fields {
    margin-bottom: 12px !important;
}

.givewp-donation-form__step:not(.givewp-donation-form__step--start)
input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]) {
    min-height: 40px !important;
}

.givewp-donation-form__step:not(.givewp-donation-form__step--start) textarea {
    min-height: 80px !important;
    height: 80px !important;
    resize: vertical;
}

.givewp-donation-form :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), textarea, select) {
    border-radius: var(--bom-radius) !important;
}

/* Preserve current choice to hide the secure-donation footer */
.givewp-donation-form__steps-footer {
    display: none;
}

/* Responsive frequency and amount choices */
@media (max-width: 480px) {
    .givewp-fields-radio-subscriptionPeriod .givewp-fields-radio__options {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .givewp-fields-amount__levels-container {
        gap: 4px !important;
    }

    .givewp-donation-form .givewp-layouts-section button.givewp-fields-amount__level {
        font-size: 12px !important;
        padding: 12px 5px !important;
    }
}
/* Remove excess spacing between fee checkbox and Donate Now */
.givewp-donation-form__step--start
.givewp-layouts-multiStepForm__form {
    justify-content: flex-start !important;
    gap: 0 !important;
}

/* Remove extra spacing from fee recovery */
.givewp-donation-form__step--start
.givewp-fields-feeRecovery,
.givewp-donation-form__step--start
.feeRecovery-container {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Position Donate Now directly beneath the form fields */
.givewp-donation-form__step--start
.givewp-donation-form__steps-button-next {
    margin-top: 20px !important;
    margin-bottom: 0 !important;
}
/* Consistent Donate Now button styling */
.givewp-donation-form .givewp-donation-form__steps-button-next,
.givewp-donation-form .givewp-donation-form__steps-button-next:hover,
.givewp-donation-form .givewp-donation-form__steps-button-next:focus,
.givewp-donation-form .givewp-donation-form__steps-button-next:active {
    border: 0 !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    background-clip: padding-box !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

/* ==========================================
   BOM - COMPACT DONOR INFORMATION STEP
   Step 2 only
   ========================================== */

/* Reduce spacing between fields */
#givewp-donation-form-step-1 .givewp-section-nodes {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

/* First and last name group */
#givewp-donation-form-step-1 .givewp-groups-name {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Remove individual field spacing */
#givewp-donation-form-step-1 .givewp-fields {
    margin: 0 !important;
    padding: 0 !important;
}

/* Labels and their associated inputs */
#givewp-donation-form-step-1 .givewp-fields > label,
#givewp-donation-form-step-1 .givewp-groups-name .givewp-fields > label {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    margin: 0 !important;
}

/* Compact input heights */
#givewp-donation-form-step-1
input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]) {
    min-height: 38px !important;
    height: 38px !important;
    padding: 8px 10px !important;
    border-radius: 4px !important;
}

/* Shorter comment field */
#givewp-donation-form-step-1 textarea {
    min-height: 70px !important;
    height: 70px !important;
    padding: 8px 10px !important;
    border-radius: 4px !important;
    resize: vertical;
}

/* Reduce spacing around introductory text */
#givewp-donation-form-step-1
.givewp-layouts-section__fieldset__legend {
    margin: 0 0 12px !important;
    padding: 0 !important;
}

/* Bring Continue button closer to fields */
#givewp-donation-form-step-1
.givewp-layouts-multiStepForm__form {
    justify-content: flex-start !important;
    gap: 0 !important;
    min-height: 0 !important;
}

#givewp-donation-form-step-1
.givewp-donation-form__steps-button-next {
    margin: 16px 0 0 !important;
    min-height: 44px !important;
    border-radius: 4px !important;
}

/* Tighten header spacing */
.givewp-donation-form:has(
    #givewp-donation-form-step-1.givewp-donation-form__step--visible
) .givewp-donation-form__steps-header {
    margin-bottom: 6px !important;
    padding-bottom: 6px !important;
}

/* Keep the step progress indicator compact */
.givewp-donation-form:has(
    #givewp-donation-form-step-1.givewp-donation-form__step--visible
) .react-aria-ProgressBar {
    margin-bottom: 10px !important;
}
.givewp-embed-frame {
    padding: 50px 20px 50px 20px !important;
}
.givewp-layouts-form {
    background-color: #fff;
    border: none !important;
    border-radius: 20px;
    box-shadow: none !important;
}
.givewp-layouts-header__templates {
	margin: 0;
	padding: 100px 40px;
}
.givewp-donation-form h3 {
	margin-top: 20px;
}

.givewp-groups-billingAddress legend {
	font-family: proxima-nova, sans-serif !important;
	text-transform: uppercase;
	color:#000000;
	font-size: 14px;
	font-weight: 700;
}
.givewp-layouts-section button:not(.givewp-fields-amount__level) {
	    font-family: proxima-nova, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 16px;
    line-height: 16px;
    letter-spacing: 1px;
    display: inline-block;
    text-align: center;
    background-color: #003063;
    color: #ffffff;
    text-transform: uppercase;
    min-width: 150px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    padding: 15px 25px;
    margin: 40px 0 0 0;
    -webkit-transition: background 500ms ease;
    transition: background 500ms ease;
    text-decoration: none;
    border: none;
}
/* Mouse clicks do not show a ring; keyboard focus remains visible. */
.givewp-fields-radio-subscriptionPeriod .givewp-fields-radio__option-container input:focus:not(:focus-visible) + label {
    outline: none !important;
    box-shadow: none !important;
}
/* Match custom amount input to email field */
.givewp-fields-amount__input-custom {
    box-sizing: border-box !important;
    min-height: 44px !important;
    padding: 12px 16px !important;
    text-align: left !important;
    font-family: "proxima-nova", sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
}

.givewp-fields-amount__input-custom::placeholder {
    color: #aaa !important;
    opacity: 1 !important;
    text-align: left !important;
    font-family: inherit !important;
    font-size: 16px !important;
    font-weight: 400 !important;
}
/* Credit card field - match other form inputs */
.givewp-donation-form .StripeElement,
.givewp-donation-form .StripeElement--empty,
.givewp-donation-form .StripeElement--complete,
.givewp-donation-form .StripeElement--focus,
.givewp-donation-form .__PrivateStripeElement,
.givewp-donation-form .PaymentElement {
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 44px !important;
    padding: 12px 16px !important;
    border: 1px solid #999 !important;
    border-radius: 4px !important;
    background: #fff !important;
    box-shadow: none !important;
}

/* Focus state */
.givewp-donation-form .StripeElement--focus,
.givewp-donation-form .StripeElement:focus-within {
    border-color: #0077c8 !important;
    box-shadow: 0 0 0 2px rgba(0,119,200,.18) !important;
}