/*
Theme Name: Hello Elementor Child 
Theme URL: https://www.EllenWhiteAudio.org 
Description: Hello Elementor Child Theme 
Author: EllenWhiteAudio 
Author URL: https://www.EllenWhiteAudio.org 
Template: hello-elementor 
Version: 1.0.0 
Text Domain: hello-elementor-child 
*/


/* ===========================================
   ELLENWHITEAUDIO DONATION FORM STYLING
   Version: 1.0.7
   =========================================== */

/* ===========================================
   OVERRIDE GRAVITY FORMS DEFAULT STYLES
   =========================================== */

@media only screen and (min-width: 641px) {
    .gform_wrapper ul.gform_fields:not(.top_label) #field_2_29 ul.gfield_radio,
    .gform_wrapper ul.gform_fields:not(.top_label) #field_2_38 ul.gfield_radio,
    #field_2_29 ul.gfield_radio,
    #field_2_38 ul.gfield_radio {
        width: auto !important;
        max-width: none !important;
    }
}

/* ===========================================
   FREQUENCY TOGGLE - iOS Style Switch
   =========================================== */

#field_2_29 .gfield_radio {
    display: inline-flex !important;
    gap: 0 !important;
    border-radius: 25px !important;
    overflow: hidden !important;
    background: #e5e7eb !important;
    padding: 4px !important;
    border: none !important;
    width: auto !important;
    flex-wrap: nowrap !important;
}

#field_2_29 .gfield_radio li.gchoice {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    flex: none !important;
}

#field_2_29 .gfield_radio input[type="radio"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
}

#field_2_29 .gfield_radio label {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 24px !important;
    min-width: 100px !important;
    width: auto !important;
    background: transparent !important;
    color: #6b7280 !important;
    cursor: pointer !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    transition: all 0.3s ease !important;
    border: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
    border-radius: 20px !important;
}

#field_2_29 .gfield_radio label:hover {
    color: #374151 !important;
}

#field_2_29 .gfield_radio input[type="radio"]:checked + label {
    background: white !important;
    color: #1e3a5f !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

/* ===========================================
   PAYMENT METHODS - Card Selection
   =========================================== */

#field_2_38 .gfield_radio {
    display: flex !important;
    gap: 12px !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
}

#field_2_38 .gfield_radio li.gchoice {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    flex: 0 1 auto !important;
}

#field_2_38 .gfield_radio input[type="radio"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
}

#field_2_38 .gfield_radio label {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 14px 24px !important;
    min-width: 150px !important;
    background: #f8fafc !important;
    color: #374151 !important;
    cursor: pointer !important;
    font-weight: 500 !important;
    font-size: 15px !important;
    transition: all 0.2s ease !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 10px !important;
    margin: 0 !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
}

#field_2_38 .gfield_radio label:hover {
    border-color: #94a3b8 !important;
    background: #f1f5f9 !important;
}

#field_2_38 .gfield_radio input[type="radio"]:checked + label {
    border-color: #1e3a5f !important;
    background: #f0f4f8 !important;
    color: #1e3a5f !important;
    box-shadow: 0 0 0 1px #1e3a5f !important;
}

/* Credit Card Icon */
#field_2_38 .gchoice_2_38_0 label::before {
    content: "" !important;
    display: inline-block !important;
    width: 24px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23374151' stroke-width='1.5'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M2 10h20'/%3E%3Crect x='5' y='14' width='4' height='2' fill='%23374151' stroke='none'/%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

#field_2_38 .gfield_radio input[type="radio"]:checked + label::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%231e3a5f' stroke-width='1.5'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M2 10h20'/%3E%3Crect x='5' y='14' width='4' height='2' fill='%231e3a5f' stroke='none'/%3E%3C/svg%3E") !important;
}

/* PayPal Icon */
#field_2_38 .gchoice_2_38_1 label::before {
    content: "" !important;
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23003087' d='M7.076 21.337H2.47a.641.641 0 0 1-.633-.74L4.944 3.72a.771.771 0 0 1 .757-.629h6.96c2.077 0 3.614.405 4.568 1.205.953.8 1.297 1.96 1.023 3.447-.019.1-.04.2-.063.3-.024.1-.05.2-.078.3-.337 1.2-.988 2.146-1.937 2.812-.949.666-2.19 1-3.693 1H9.83l-.837 5.146a.64.64 0 0 1-.633.537H7.076z'/%3E%3Cpath fill='%230070E0' d='M18.429 7.542c-.019.1-.04.2-.063.3-.024.1-.05.2-.078.3-.337 1.2-.988 2.146-1.937 2.812-.949.666-2.19 1-3.693 1H11.1l-.837 5.146a.64.64 0 0 1-.633.537H7.076l-.285 1.86a.509.509 0 0 0 .503.59h3.07c.283 0 .527-.188.595-.446l.024-.124.752-4.625.048-.246a.635.635 0 0 1 .595-.446h.374c2.426 0 4.326-.959 4.88-3.732.232-1.157.112-2.123-.5-2.801a2.38 2.38 0 0 0-.703-.525z'/%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* ===========================================
   DONATION TOTAL - Left aligned, inline with form
   =========================================== */

#field_2_5 .ginput_total {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #1e3a5f !important;
}

/* ===========================================
   DONATE BUTTON - Navy blue, left aligned
   =========================================== */

#gform_2 .gform_footer {
    text-align: left !important;
    padding-top: 16px !important;
}

#gform_2 input[type="submit"],
#gform_2 .gform_button {
    background: #1e3a5f !important;
    color: white !important;
    padding: 14px 48px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    border: none !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 8px rgba(30, 58, 95, 0.3) !important;
    line-height: 1.2 !important;
}

#gform_2 input[type="submit"]:hover,
#gform_2 .gform_button:hover {
    background: #152a45 !important;
    box-shadow: 0 4px 12px rgba(30, 58, 95, 0.4) !important;
    transform: translateY(-1px) !important;
}

/* ===========================================
   FORM SECTION HEADER
   =========================================== */

#field_2_17 .gsection_title {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #1e3a5f !important;
    border-bottom: 2px solid #e2e8f0 !important;
    padding-bottom: 8px !important;
    margin-bottom: 16px !important;
}

/* ===========================================
   MONTHLY CANCELLATION MESSAGE
   =========================================== */

#field_2_33 {
    background: #f0f4f8 !important;
    border-left: 4px solid #1e3a5f !important;
    padding: 12px 16px !important;
    border-radius: 0 8px 8px 0 !important;
    font-size: 14px !important;
    color: #374151 !important;
}

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

@media (max-width: 480px) {
    #field_2_29 .gfield_radio {
        width: 100% !important;
    }
    
    #field_2_29 .gfield_radio li.gchoice {
        flex: 1 !important;
    }
    
    #field_2_29 .gfield_radio label {
        width: 100% !important;
        min-width: auto !important;
        padding: 12px 16px !important;
    }
    
    #field_2_38 .gfield_radio {
        flex-direction: column !important;
    }
    
    #field_2_38 .gfield_radio li.gchoice {
        width: 100% !important;
    }
    
    #field_2_38 .gfield_radio label {
        width: 100% !important;
    }
    
    #gform_2 input[type="submit"],
    #gform_2 .gform_button {
        width: 100% !important;
    }
}