/**
 * Donation Form Tabs Element Styles
 * 
 * Custom styles for the Bricks Builder Donation Form Tabs element
 * Designed to work with Gravity Forms
 * 
 * @package BricksChild
 * @version 1.1.0
 */

/* ==========================================================================
   CSS Variables (Fallback defaults - Bricks controls will override)
   ========================================================================== */
:root {
    --dft-primary-color: #DCBF2D;
    --dft-primary-light: #fff;
    --dft-accent-color: #FAD779;
    --dft-accent-hover: #F3CC66;
    --dft-selected-outline: #CCA641;
    --dft-secondary-color: #0C4B4E;
    --dft-secondary-light: rgba(12, 75, 78, 0.2);
    --dft-text-color: #000;
    --dft-text-muted: #666;
    --dft-white: #fff;
    --dft-black: #000;
    --dft-border-color: #efefef;
    --dft-bg-light: #ebeaea;
    --dft-font-size-large: 18px;
    --dft-font-size-medium: 17px;
    --dft-font-size-small: 16px;
    --dft-font-family: "Inter", "Montserrat", sans-serif;
    --dft-radius-button: 4px;
    --dft-radius-input: 4px;
    --dft-radius-pill: 50px;
    --dft-shadow-button: 2px -2px 3px 0px rgba(255, 255, 255, 0.75), 1px 1px 4px 0px rgba(157, 157, 157, 0.25);
    --dft-shadow-inset: inset 1px 1px 1px rgba(0, 0, 0, 0.25);
    --dft-transition-fast: 0.2s ease-in-out;
    --dft-transition-medium: 0.3s ease-in-out;
}

/* ==========================================================================
   Main Wrapper
   ========================================================================== */
.donation-form-tabs-wrapper {
    font-family: var(--dft-font-family);
    width: 100%;
    max-width: 100%;
}

/* ==========================================================================
   Tab Menu
   ========================================================================== */
.donation-form-tabs-wrapper .tab-menu {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    list-style: none;
    margin: 0;
    padding: 3px;
    background: var(--dft-bg-light);
    border: 1px solid var(--dft-border-color);
    border-radius: var(--dft-radius-pill);
    box-shadow: var(--dft-shadow-inset);
    position: relative;
    overflow: hidden;
}

.donation-form-tabs-wrapper .tab-title {
    flex: 1 1 auto;
    min-width: 0;
    position: relative;
    z-index: 2;
    margin: 0;
    padding: 0;
    cursor: pointer;
    text-align: center;
    user-select: none;
}

.donation-form-tabs-wrapper .tab-title span {
    display: block;
    padding: 10px 0;
    color: var(--dft-text-muted);
    text-decoration: none;
    position: relative;
    z-index: 1;
    border: none;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: var(--dft-font-size-small);
    font-weight: 500;
    line-height: 1em;
    letter-spacing: 1px;
    transition: color var(--dft-transition-fast);
}

.donation-form-tabs-wrapper .tab-title.active span {
    color: var(--dft-black);
}

.donation-form-tabs-wrapper .tab-title.active .monthly-tab-label i {
    color: #e74c3c;
}

.donation-form-tabs-wrapper .tab-title .monthly-tab-label i {
    opacity: 0;
    transition: opacity var(--dft-transition-fast);
}

.donation-form-tabs-wrapper .tab-title.active .monthly-tab-label i {
    opacity: 1;
}

/* Tab Indicator */
.donation-form-tabs-wrapper .tab-indicator {
    position: absolute;
    top: 1px;
    left: 0;
    height: calc(100% - 2px);
    background: var(--dft-white);
    border-radius: var(--dft-radius-pill);
    transition: left 0.3s ease, width 0.3s ease;
    z-index: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   Tab Content
   ========================================================================== */
.donation-form-tabs-wrapper .tab-content {
    list-style: none;
    margin: 0;
    padding: 0;
}

.donation-form-tabs-wrapper .tab-pane {
    display: none;
    padding: 20px 0;
    animation: fadeIn 0.3s ease-in-out;
}

.donation-form-tabs-wrapper .tab-pane.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================================
   Gravity Forms Base
   ========================================================================== */
.donation-form-tabs-wrapper .give-once-form_wrapper {
    margin-bottom: 0;
}

.donation-form-tabs-wrapper .gfield_required {
    display: none !important;
}

.donation-form-tabs-wrapper .gform-theme--foundation .gform_fields {
    row-gap: 10px;
}

/* ==========================================================================
   Radio Buttons (Amount Selection)
   ========================================================================== */

/* Radio button grid container */
.donation-form-tabs-wrapper .gfield_radio {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Each radio choice container */
.donation-form-tabs-wrapper .gfield_radio .gchoice {
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    height: 48px !important;
    width: 100% !important;
    display: block !important;
}

/* Hide actual radio input but keep it clickable */
.donation-form-tabs-wrapper .gfield_radio .gchoice input[type="radio"] {
    opacity: 0 !important;
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 10 !important;
    cursor: pointer !important;
    margin: 0 !important;
}

/* Style labels as buttons */
.donation-form-tabs-wrapper .gfield_radio .gchoice label {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    padding: 5px !important;
    margin: 0 !important;
    border: 1px solid var(--dft-border-color) !important;
    /*background-color: var(--black-green) !important;*/
    cursor: pointer !important;
    z-index: 5 !important;
    font-weight: 400 !important;
    text-align: center !important;
    border-radius: var(--dft-radius-button) !important;
    font-size: var(--dft-font-size-large) !important;
    line-height: 1.2 !important;
    color: var(--dft-text-color) !important;
    transition: all var(--dft-transition-fast) !important;
    outline: solid 1px transparent !important;
    box-shadow: var(--dft-shadow-button) !important;
    font-family: var(--dft-font-family) !important;
    white-space: nowrap !important;
    max-width: none !important;
}

/* Label hover state */
.donation-form-tabs-wrapper .gfield_radio .gchoice label:hover {
    /*background-color: rgba(250, 215, 121, 0.4) !important;*/
    border-color: #F3CC66 !important;
}

/* Selected state */
.donation-form-tabs-wrapper .gfield_radio .gchoice input[type="radio"]:checked + label {
    background-color: var(--dft-accent-color) !important; /* Use your variable or specific color */
    outline: solid 1px var(--dft-selected-outline) !important;
    border-color: var(--dft-selected-outline) !important;
}

/* ==========================================================================
   Payment Option Buttons (Bank Transfer / Card)
   Add CSS class "payment-options" to the field in Gravity Forms
   ========================================================================== */

/* Two-column grid for payment options */
.donation-form-tabs-wrapper .payment-options .gfield_radio,
.donation-form-tabs-wrapper .card-transfer .gfield_radio {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 15px !important;
}

.donation-form-tabs-wrapper .payment-options .gfield_radio .gchoice,
.donation-form-tabs-wrapper .card-transfer .gfield_radio .gchoice {
    height: 56px !important;
}

.donation-form-tabs-wrapper .payment-options .gfield_radio .gchoice label,
.donation-form-tabs-wrapper .card-transfer .gfield_radio .gchoice label {
    font-size: var(--dft-font-size-medium) !important;
    font-weight: 500 !important;
}

/* ==========================================================================
   Form Inputs
   ========================================================================== */
.donation-form-tabs-wrapper .give-once-form input[type="text"],
.donation-form-tabs-wrapper .give-once-form input[type="email"],
.donation-form-tabs-wrapper .give-once-form input[type="tel"],
.donation-form-tabs-wrapper .give-once-form input[type="number"],
.donation-form-tabs-wrapper .give-once-form select,
.donation-form-tabs-wrapper .give-once-form textarea {
    background: var(--dft-primary-light);
    border: 1px solid var(--dft-border-color);
    color: var(--dft-text-color);
    padding: 12px 23px;
    border-radius: var(--dft-radius-input);
    font-size: var(--dft-font-size-large);
    font-weight: 400;
    width: 100%;
    box-sizing: border-box;
    transition: all var(--dft-transition-fast);
}

.donation-form-tabs-wrapper .give-once-form input:focus,
.donation-form-tabs-wrapper .give-once-form select:focus,
.donation-form-tabs-wrapper .give-once-form textarea:focus {
    outline: solid 1px var(--dft-selected-outline);
    border-color: var(--dft-accent-color);
}

.donation-form-tabs-wrapper .give-once-form input::placeholder {
    color: #999;
}

/* Custom Amount Input */
.donation-form-tabs-wrapper .ginput_container_product_price {
    border: 1px solid var(--dft-border-color);
    border-radius: var(--dft-radius-button);
}

.donation-form-tabs-wrapper .ginput_container_product_price input {
    background-color: transparent;
    color: #555;
    font-weight: 400 !important;
    height: 48px;
    cursor: text;
    text-align: left;
    font-size: var(--dft-font-size-large);
    box-shadow: var(--dft-shadow-button);
    padding: 0 20px !important;
    box-sizing: border-box;
    border: none !important;
}

/* Select Dropdowns */
.donation-form-tabs-wrapper .ginput_container_select, .address_country.ginput_address_country {
    position: relative;
    /*border: 1px solid var(--dft-border-color);*/
    border-radius: var(--dft-radius-input);
    background-color: var(--dft-white);
}

.donation-form-tabs-wrapper .give-once-form select,
.donation-form-tabs-wrapper .ginput_container_select select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /*border: none !important;*/
    padding: 0;
    padding-left: 15px !important;
    font-size: 16px;
    background-color: transparent !important;
    background-image: none !important;
    color: var(--dft-text-color);
    cursor: pointer;
    border-radius: var(--dft-radius-input);
    width: 100%;
    /*outline: none;*/
    display: flex;
    align-items: center;
}


.donation-form-tabs-wrapper .ginput_container_select::after, .address_country.ginput_address_country::after {
    content: "";
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 6px;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.292893 0.292893C0.683417 -0.097631 1.31658 -0.097631 1.70711 0.292893L5 3.58579L8.29289 0.292893C8.68342 -0.0976311 9.31658 -0.0976311 9.70711 0.292893C10.0976 0.683417 10.0976 1.31658 9.70711 1.70711L5.70711 5.70711C5.31658 6.09763 4.68342 6.09763 4.29289 5.70711L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683418 0.292893 0.292893Z' fill='%23333'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
}

.donation-form-tabs-wrapper .give-once-form select:focus,
.donation-form-tabs-wrapper .ginput_container_select select:focus {
    outline: none !important;
    box-shadow: none !important;
}

/*.donation-form-tabs-wrapper .ginput_container_select:focus-within {*/
/*    border-color: var(--dft-accent-color);*/
/*    outline: solid 1px var(--dft-selected-outline);*/
/*}*/

/* Remove any GF theme background images on selects */
.donation-form-tabs-wrapper .gform-theme--framework select,
.donation-form-tabs-wrapper .gform_wrapper select {
    background-image: none !important;
}

/* ==========================================================================
   Labels
   ========================================================================== */
.donation-form-tabs-wrapper .gfield_label {
    font-size: var(--dft-font-size-large);
    color: var(--dft-text-color);
    font-weight: 500;
    padding-bottom: 10px;
    display: block;
}

.donation-form-tabs-wrapper .hidden_label .gfield_label {
    position: absolute;
    clip: rect(1px, 1px, 1px, 1px);
    overflow: hidden;
    height: 1px;
    width: 1px;
}

.donation-form-tabs-wrapper .gfield_label_before_complex {
    padding-top: 10px;
    border-top: 1px solid var(--dft-black);
    margin-top: 10px;
    width: 100%;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.donation-form-tabs-wrapper .gform_next_button,
.donation-form-tabs-wrapper .gform_button {
    background: var(--dft-accent-color);
    color: var(--dft-black);
    width: 68%;
    padding: 14px;
    font-size: var(--dft-font-size-medium);
    border: none;
    border-radius: var(--dft-radius-button);
    cursor: pointer;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: initial;
    transition: all var(--dft-transition-medium);
}

.donation-form-tabs-wrapper .gform_next_button:hover,
.donation-form-tabs-wrapper .gform_button:hover {
    background: var(--dft-accent-hover);
}

.donation-form-tabs-wrapper .gform_previous_button {
    background: var(--dft-secondary-light);
    color: var(--dft-secondary-color);
    width: 28%;
    height: 57px;
    padding: 14px;
    font-size: var(--dft-font-size-small);
    border: 1px solid var(--dft-border-color);
    border-radius: var(--dft-radius-button);
    cursor: pointer;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: initial;
    transition: all var(--dft-transition-medium);
}

.donation-form-tabs-wrapper .gform_previous_button:hover {
    background: var(--dft-border-color);
}

.donation-form-tabs-wrapper .gform_page_footer {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

/* ==========================================================================
   Secure Donation Text
   ========================================================================== */
.donation-form-tabs-wrapper .secure-donation {
    text-align: center;
    margin-top: 15px;
    font-size: 14px;
    color: var(--dft-text-color);
}

.fa-lock::before {
    content: "";
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    background-color: currentColor;
    vertical-align: middle;
    transform: translateY(-2px);
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M8%2C10.6v-1.8c0-2.2%2C1.8-4%2C4-4s4%2C1.8%2C4%2C4v1.8'%20fill='none'%20stroke='%23000'%20stroke-linecap='round'%20stroke-linejoin='round'%20stroke-width='3'/%3E%3Crect%20x='5'%20y='10.6'%20width='14'%20height='10'%20rx='2.5'%20ry='2.5'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M8%2C10.6v-1.8c0-2.2%2C1.8-4%2C4-4s4%2C1.8%2C4%2C4v1.8'%20fill='none'%20stroke='%23000'%20stroke-linecap='round'%20stroke-linejoin='round'%20stroke-width='3'/%3E%3Crect%20x='5'%20y='10.6'%20width='14'%20height='10'%20rx='2.5'%20ry='2.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ==========================================================================
   Address Fields
   ========================================================================== */
.donation-form-tabs-wrapper .ginput_complex.ginput_container_address {
    display: grid;
    /*gap: 10px;*/
    grid-template-columns: 1fr 1fr;
}

.donation-form-tabs-wrapper .ginput_complex span {
    flex: 0 1 50%;
}

.donation-form-tabs-wrapper .ginput_complex span.ginput_full {
    flex: 0 0 100% !important;
}

.donation-form-tabs-wrapper .ginput_complex span[id*="_6_container"] {
    flex: 0 0 100% !important;
}

/* ==========================================================================
   Credit Card Fields
   ========================================================================== */
.donation-form-tabs-wrapper .gform_card_icon_container {
    display: none;
}

.donation-form-tabs-wrapper .ginput_container_creditcard {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.donation-form-tabs-wrapper .ginput_cardextras {
    display: flex;
    gap: 10px;
}

.donation-form-tabs-wrapper .gfield_creditcard_warning_message {
    display: none;
}

.donation-form-tabs-wrapper .gform_wrapper.gravity-theme .gfield_creditcard_warning {
    padding: initial;
    border-top: initial;
    border-bottom: initial;
    background-color: initial;
}

/* Target the Label inside the 2nd Choice (Card) inside .card-transfer */
body .card-transfer .gfield_radio .gchoice:nth-of-type(2) label::after {
    content: "";
    display: inline-block;
    
    /* Size of the icon relative to the text size */
    width: 1.4em; 
    height: 1.4em;
    margin-left: 0.5em;
    vertical-align: middle;
    
    /* This sets the icon color to match the text color automatically */
    background-color: currentColor;
    
    /* The SVG Icon Mask */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 14H4v-6h16v6zm0-10H4V6h16v2z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 14H4v-6h16v6zm0-10H4V6h16v2z'/%3E%3C/svg%3E");
    
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* ==========================================================================
   Consent Checkbox
   ========================================================================== */
.donation-form-tabs-wrapper .ginput_container_consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.donation-form-tabs-wrapper .ginput_container_consent input[type="checkbox"] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 3px;
}

.donation-form-tabs-wrapper .ginput_container_consent label {
    font-size: var(--dft-font-size-small);
    font-weight: 400;
    line-height: 1.5;
}

/* Links */
.donation-form-tabs-wrapper .give-once-form a {
    color: var(--dft-selected-outline);
    text-decoration: underline;
}

/* ==========================================================================
   Confirmation Message
   ========================================================================== */
.donation-form-tabs-wrapper .gform_confirmation_message {
    line-height: 1.2em !important;
    text-align: center !important;
    padding: 30px;
    background: #f0f9f0;
    border-radius: var(--dft-radius-input);
    color: #2e7d32;
}

/* ==========================================================================
   Form Placeholder
   ========================================================================== */
.donation-form-tabs-wrapper .form-placeholder {
    text-align: center;
    padding: 40px;
    background: #f5f5f5;
    border-radius: var(--dft-radius-input);
    color: var(--dft-text-muted);
}

/* ==========================================================================
   MODIFIER CLASSES (Controlled by Bricks checkboxes)
   ========================================================================== */

/* Remove All Shadows */
.donation-form-tabs-wrapper.dft-no-shadows .tab-menu,
.donation-form-tabs-wrapper.dft-no-shadows .tab-indicator,
.donation-form-tabs-wrapper.dft-no-shadows .gfield_radio label,
.donation-form-tabs-wrapper.dft-no-shadows .ginput_container_product_price input,
.donation-form-tabs-wrapper.dft-no-shadows .give-once-form input,
.donation-form-tabs-wrapper.dft-no-shadows .give-once-form select {
    box-shadow: none !important;
}

/* Total Field - Inline Display */
.donation-form-tabs-wrapper.dft-total-inline .gfield_total {
    display: flex !important;
    align-items: center;
    gap: 10px;
}

.donation-form-tabs-wrapper.dft-total-inline .gfield_total .gfield_label {
    margin: 0;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0;
    flex-shrink: 0;
}

.donation-form-tabs-wrapper.dft-total-inline .gfield_total .ginput_container_total {
    flex: 1;
}

/* Total Field - Hide Border */
.donation-form-tabs-wrapper.dft-total-no-border .gfield_total input,
.donation-form-tabs-wrapper.dft-total-no-border .gfield_total .ginput_total {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Force Buttons in Row */
.donation-form-tabs-wrapper.dft-buttons-row .gform_page_footer {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
}

.donation-form-tabs-wrapper.dft-buttons-row .gform_previous_button,
.donation-form-tabs-wrapper.dft-buttons-row .gform_button,
.donation-form-tabs-wrapper.dft-buttons-row .gform_next_button {
    width: auto !important;
    flex: 1 1 auto !important;
}

/* Buttons Full Width */
.donation-form-tabs-wrapper.dft-buttons-full .gform_page_footer {
    width: 100%;
}

.donation-form-tabs-wrapper.dft-buttons-full .gform_previous_button,
.donation-form-tabs-wrapper.dft-buttons-full .gform_button,
.donation-form-tabs-wrapper.dft-buttons-full .gform_next_button {
    flex: 1 1 0 !important;
}

/* ==========================================================================
   Gravity Forms Theme Overrides
   ========================================================================== */

/* Reset GF radio/checkbox styles */
.donation-form-tabs-wrapper .gform_wrapper .gfield_radio .gchoice,
.donation-form-tabs-wrapper .gform-theme--framework .gfield_radio .gchoice {
    margin: 0 !important;
    padding: 0 !important;
}

.donation-form-tabs-wrapper .gform_wrapper.gravity-theme .gfield-choice-input + label {
    max-width: none !important;
}

.donation-form-tabs-wrapper .gform_wrapper.gravity-theme input[type="text"],
.donation-form-tabs-wrapper .gform_wrapper.gravity-theme input[type="email"],
.donation-form-tabs-wrapper .gform_wrapper.gravity-theme select,
.donation-form-tabs-wrapper .gform_wrapper.gravity-theme textarea {
    padding: 12px 23px;
    border-radius: var(--dft-radius-input);
}

/* Remove GF default radio styling */
.donation-form-tabs-wrapper .gform-theme--framework .gfield_radio input[type="radio"],
.donation-form-tabs-wrapper .gform_wrapper .gfield_radio input[type="radio"] {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background: transparent !important;
    border: none !important;
}

/* Selected State for Amount Buttons */
.donation-form-tabs-wrapper .gform_wrapper .gfield_radio .gchoice input[type="radio"]:checked + label {
    background-color: var(--dft-accent-color) !important;
    border-color: var(--dft-selected-outline) !important;
    outline: solid 1px var(--dft-selected-outline) !important;
    color: var(--dft-black) !important;
}

/* Reset select background */
.donation-form-tabs-wrapper .gform-theme--framework select,
.donation-form-tabs-wrapper .gform_wrapper select,
.donation-form-tabs-wrapper .gform-theme--orbital select {
    background-image: none !important;
}

/* Validation */
.donation-form-tabs-wrapper .gform_wrapper.gravity-theme .gfield_error .gfield_label {
    color: #c02b0a;
}

.donation-form-tabs-wrapper .gform_wrapper.gravity-theme .gfield_error input,
.donation-form-tabs-wrapper .gform_wrapper.gravity-theme .gfield_error select,
.donation-form-tabs-wrapper .gform_wrapper.gravity-theme .gfield_error textarea {
    border-color: #c02b0a;
}

/* ==========================================================================
   Focus States (Accessibility)
   ========================================================================== */
.donation-form-tabs-wrapper .tab-title:focus {
    outline: 2px solid var(--dft-accent-color);
    outline-offset: 2px;
}

.donation-form-tabs-wrapper .tab-title:focus:not(:focus-visible) {
    outline: none;
}

.donation-form-tabs-wrapper .tab-title:focus-visible {
    outline: 2px solid var(--dft-accent-color);
    outline-offset: 2px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Tablet */
@media screen and (max-width: 1024px) {
    .donation-form-tabs-wrapper .tab-title span {
        font-size: 16px;
        letter-spacing: normal;
    }
    
    .donation-form-tabs-wrapper .gform_previous_button,
    .donation-form-tabs-wrapper .gform_button {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .donation-form-tabs-wrapper:not(.dft-buttons-row) .gform_previous_button {
        flex: 1 1 33%;
    }
    
    .donation-form-tabs-wrapper:not(.dft-buttons-row) .gform_button {
        flex: 2 1 66%;
    }
}

/* Mobile */
@media screen and (max-width: 640px) {
    .donation-form-tabs-wrapper:not(.dft-buttons-row) .gform_page_footer {
        flex-direction: column;
    }
    
    .donation-form-tabs-wrapper:not(.dft-buttons-row) .gform_previous_button {
        display: none;
    }
    
    .donation-form-tabs-wrapper:not(.dft-buttons-row) .gform_button,
    .donation-form-tabs-wrapper:not(.dft-buttons-row) .gform_next_button {
        width: 100%;
        height: 70px;
    }
    
    .donation-form-tabs-wrapper .tab-title span {
        padding: 8px 0;
    }
    
    /* Force row still works on mobile if enabled */
    .donation-form-tabs-wrapper.dft-buttons-row .gform_previous_button {
        display: flex !important;
    }
    
    /* Payment options stay 2 columns on mobile */
    .donation-form-tabs-wrapper .payment-options .gfield_radio,
    .donation-form-tabs-wrapper .card-transfer .gfield_radio {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Small Mobile */
@media screen and (max-width: 480px) {
    .donation-form-tabs-wrapper .tab-title span {
        font-size: 14px;
    }
    
    .donation-form-tabs-wrapper .gfield_radio label {
        font-size: 15px !important;
    }
    
    /* Amount buttons: 2 columns on small mobile */
    .donation-form-tabs-wrapper .gfield_radio:not(.card-transfer .gfield_radio):not(.payment-options .gfield_radio) {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}


.gform-theme--foundation .gfield .ginput_password.large, .gform-theme--foundation .gfield input.large, .gform-theme--foundation .gfield select.large, .donation-form-tabs-wrapper.dft-no-shadows .give-once-form select {
    line-height: 1em !important;
}


.gform-theme--foundation .ginput_address_city, .gform-theme--foundation .ginput_address_country, .gform-theme--foundation .ginput_address_state, .gform-theme--foundation .ginput_address_zip {
            inline-size: 100% !important;
}


/* ======================================================================
   GRAVITY FORMS CREDIT CARD: Single-line row + Name row (NO FIELD IDs)
   Row 1: [Icons][Card #]   [MM] / [YY] [CVC]
   Row 2: [Cardholder Name]
   ====================================================================== */

body .gform_wrapper .gfield--type-creditcard .ginput_container_creditcard,
body .gform_wrapper .gfield--input-type-creditcard .ginput_container_creditcard{
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-rows: auto auto !important;
  column-gap: 0 !important;
  row-gap: 0px !important;
  align-items: stretch !important;
  width: 100% !important;

  --cc-border: var(--dft-border-color, rgba(104,110,119,.35));
  --cc-radius: var(--dft-radius-input, 4px);
  --cc-bg: var(--dft-primary-light, #fff);
  --cc-pad-y: 14px;
  --cc-pad-x: 16px;
}

/* Neutralize your global ".ginput_complex span { flex: 0 1 50% }" ONLY here */
body .gform_wrapper .gfield--type-creditcard .ginput_container_creditcard > span,
body .gform_wrapper .gfield--input-type-creditcard .ginput_container_creditcard > span{
  flex: initial !important;
  min-width: 0 !important;
  max-width: none !important;
  width: auto !important;
}

/* ---- Number block (contains icons + number input) ---- */
body .gform_wrapper .gfield--type-creditcard .ginput_container_creditcard > span.ginput_full:first-of-type,
body .gform_wrapper .gfield--input-type-creditcard .ginput_container_creditcard > span.ginput_full:first-of-type{
  grid-column: 1 !important;
  grid-row: 1 !important;

  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;

  background: var(--cc-bg) !important;
  border: 1px solid var(--cc-border) !important;
  border-right: 0 !important;
  border-radius: var(--cc-radius) 0 0 var(--cc-radius) !important;
    padding: 4px 0px 4px 14px !important;
    margin-left: 6px !important;
}

/* FORCE icons visible (overrides your master CSS hiding them) */
body .gform_wrapper .gfield--type-creditcard .gform_card_icon_container,
body .gform_wrapper .gfield--input-type-creditcard .gform_card_icon_container,
body .donation-form-tabs-wrapper .gform_wrapper .gfield--type-creditcard .gform_card_icon_container{
  display: none !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 auto !important;
}

/* Card number input MUST be allowed to fill remaining space */
body .gform_wrapper .gfield--type-creditcard input[type="text"][name*=".1"],
body .gform_wrapper .gfield--input-type-creditcard input[type="text"][name*=".1"]{
  flex: 1 1 auto !important;
  min-width: 0 !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;

  padding: 0 var(--cc-pad-x) 0 0 !important;
  margin: 0 !important;
  width: 100% !important; /* ok here because it's inside flex */
}

/* ---- Extras block (expiration + cvc) ---- */
body .gform_wrapper .gfield--type-creditcard .ginput_container_creditcard > .ginput_cardextras,
body .gform_wrapper .gfield--input-type-creditcard .ginput_container_creditcard > .ginput_cardextras{
  grid-column: 2 !important;
  grid-row: 1 !important;

  display: flex !important;
  align-items: center !important;
  gap: 0px !important;
  white-space: nowrap !important;

  background: var(--cc-bg) !important;
  border: 1px solid var(--cc-border) !important;
  border-left: 0 !important;
  border-radius: 0 var(--cc-radius) var(--cc-radius) 0 !important;

  /*padding: var(--cc-pad-y) var(--cc-pad-x) !important;*/
}

/* Crush GF “grid” internals so Month/Year sit inline */
body .gform_wrapper .gfield--type-creditcard .ginput_container_creditcard .gform-grid-row,
body .gform_wrapper .gfield--input-type-creditcard .ginput_container_creditcard .gform-grid-row{
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
}
body .gform_wrapper .gfield--type-creditcard .ginput_container_creditcard .gform-grid-col,
body .gform_wrapper .gfield--input-type-creditcard .ginput_container_creditcard .gform-grid-col{
  flex: 0 0 auto !important;
  width: auto !important;
  inline-size: auto !important;
  min-inline-size: 0 !important;
}
/* Month/Year select sizing */
body .gform_wrapper .gfield--type-creditcard select.ginput_card_expiration {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 4.5ch !important;
}


body .gform_wrapper .gfield--type-creditcard select.ginput_card_expiration_month {
    width: 3ch !important;
}

/* Add slash between MM and YY */
body .gform_wrapper .gfield--type-creditcard .ginput_card_expiration_year_container,
body .gform_wrapper .gfield--input-type-creditcard .ginput_card_expiration_year_container{
  position: relative !important;
  padding-left: 12px !important;
}
body .gform_wrapper .gfield--type-creditcard .ginput_card_expiration_year_container::before,
body .gform_wrapper .gfield--input-type-creditcard .ginput_card_expiration_year_container::before{
  content: "/" !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  opacity: .65 !important;
}

/* CVC MUST NOT stretch: override your width:100% global input rule */
body .gform_wrapper .gfield--type-creditcard .ginput_card_security_code,
body .gform_wrapper .gfield--input-type-creditcard .ginput_card_security_code{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 3.25ch !important;
}

/* Kill the security code “picture” */
body .gform_wrapper .gfield--type-creditcard .ginput_card_security_code_icon,
body .gform_wrapper .gfield--input-type-creditcard .ginput_card_security_code_icon{
  display: none !important;
}

/* ---- Name field (row 2 full width) ---- */
body .gform_wrapper .gfield--type-creditcard .ginput_container_creditcard > span.ginput_full:last-of-type,
body .gform_wrapper .gfield--input-type-creditcard .ginput_container_creditcard > span.ginput_full:last-of-type{
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  margin-left: 6px;
  margin-right: -7px;
  padding: 10px 0px !important;
}

/* Hide ALL visible labels inside the credit card field (fixes “Cardholder Name” showing under input)
   Keep screen-reader labels intact. */
body .gform_wrapper .gfield--type-creditcard .ginput_container_creditcard label:not(.screen-reader-text),
body .gform_wrapper .gfield--input-type-creditcard .ginput_container_creditcard label:not(.screen-reader-text),
body .gform_wrapper .gfield--type-creditcard .ginput_container_creditcard legend,
body .gform_wrapper .gfield--input-type-creditcard .ginput_container_creditcard legend{
  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;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Credit Card: force Cardholder Name input height */
body .gform_wrapper .gfield--type-creditcard .ginput_container_creditcard input[name*=".5"],
body .gform_wrapper .gfield--input-type-creditcard .ginput_container_creditcard input[name*=".5"] {
  height: 48px !important;
  min-height: 48px !important;
  line-height: 48px !important; /* keeps text vertically centered */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  box-sizing: border-box !important;
}
/* Make Cardholder Name placeholder start where Card number text starts */
body .gform_wrapper .gfield--type-creditcard .ginput_container_creditcard > span.ginput_full:last-of-type input[name*=".5"],
body .gform_wrapper .gfield--input-type-creditcard .ginput_container_creditcard > span.ginput_full:last-of-type input[name*=".5"]{
  padding-left: calc(var(--cc-pad-x, 16px)) !important; 
  
}