.elementor-13885 .elementor-element.elementor-element-9a7cab8:not(.elementor-motion-effects-element-type-background), .elementor-13885 .elementor-element.elementor-element-9a7cab8 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://commandotrust.com/wp-content/uploads/2025/01/Untitled-3.webp-FIN.webp");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-13885 .elementor-element.elementor-element-9a7cab8 > .elementor-background-overlay{background-color:#000000;opacity:0.15;transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-13885 .elementor-element.elementor-element-9a7cab8 > .elementor-container{min-height:500px;}.elementor-13885 .elementor-element.elementor-element-9a7cab8{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-13885 .elementor-element.elementor-element-4dd8f43 > .elementor-element-populated{margin:0px 0px 60px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-13885 .elementor-element.elementor-element-1cbc119{text-align:center;}.elementor-13885 .elementor-element.elementor-element-1cbc119 .elementor-heading-title{font-family:"Rubik", Sans-serif;font-size:50px;font-weight:600;line-height:58px;color:#FFFFFF;}.elementor-widget-breadcrumbs{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-13885 .elementor-element.elementor-element-7ebdb45{font-family:"Rubik", Sans-serif;font-size:20px;font-weight:400;color:#F9EDD6;}.elementor-13885 .elementor-element.elementor-element-7ebdb45 a{color:#F9EDD6;}.elementor-13885 .elementor-element.elementor-element-e13a359 > .elementor-container > .elementor-column > .elementor-widget-wrap{align-content:center;align-items:center;}.elementor-13885 .elementor-element.elementor-element-e13a359{padding:80px 20px 80px 20px;}.elementor-bc-flex-widget .elementor-13885 .elementor-element.elementor-element-7f3c4d2.elementor-column .elementor-widget-wrap{align-items:flex-start;}.elementor-13885 .elementor-element.elementor-element-7f3c4d2.elementor-column.elementor-element[data-element_type="column"] > .elementor-widget-wrap.elementor-element-populated{align-content:flex-start;align-items:flex-start;}.elementor-13885 .elementor-element.elementor-element-7f3c4d2 > .elementor-element-populated{margin:0px 70px 0px 0px;--e-column-margin-right:70px;--e-column-margin-left:0px;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-13885 .elementor-element.elementor-element-070e11e{text-align:start;}.elementor-bc-flex-widget .elementor-13885 .elementor-element.elementor-element-4beaeec.elementor-column .elementor-widget-wrap{align-items:flex-start;}.elementor-13885 .elementor-element.elementor-element-4beaeec.elementor-column.elementor-element[data-element_type="column"] > .elementor-widget-wrap.elementor-element-populated{align-content:flex-start;align-items:flex-start;}.elementor-13885 .elementor-element.elementor-element-4beaeec > .elementor-element-populated{margin:20px 0px 0px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;padding:20px 20px 20px 20px;}:root{--page-title-display:none;}@media(max-width:1024px){.elementor-13885 .elementor-element.elementor-element-1cbc119 > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-13885 .elementor-element.elementor-element-1cbc119 .elementor-heading-title{font-size:42px;line-height:55px;}.elementor-13885 .elementor-element.elementor-element-e13a359{margin-top:0px;margin-bottom:0px;padding:60px 15px 20px 15px;}.elementor-13885 .elementor-element.elementor-element-7f3c4d2.elementor-column > .elementor-widget-wrap{justify-content:space-between;}.elementor-13885 .elementor-element.elementor-element-7f3c4d2 > .elementor-element-populated{margin:0px 0px 0px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;}}@media(max-width:767px){.elementor-13885 .elementor-element.elementor-element-1cbc119 > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-13885 .elementor-element.elementor-element-1cbc119 .elementor-heading-title{font-size:34px;line-height:44px;}.elementor-13885 .elementor-element.elementor-element-e13a359{margin-top:0px;margin-bottom:0px;padding:50px 10px 10px 10px;}}@media(min-width:768px){.elementor-13885 .elementor-element.elementor-element-7f3c4d2{width:65%;}.elementor-13885 .elementor-element.elementor-element-4beaeec{width:35%;}}@media(max-width:1024px) and (min-width:768px){.elementor-13885 .elementor-element.elementor-element-7f3c4d2{width:100%;}.elementor-13885 .elementor-element.elementor-element-4beaeec{width:100%;}}/* Start custom CSS for heading, class: .elementor-element-1cbc119 */.elementor-13885 .elementor-element.elementor-element-1cbc119{
    margin-bottom: 10px;
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-7d39890 *//* =========================================================================
   Commando Welfare Trust — Father's Day Competition 2026
   GiveWP donation form — clean custom CSS

   • Scoped to the Give form only  →  form[id*="give-form"]
   • No HTML changes required. Styling only — Stripe & recurring untouched.
   • Paste into: WP admin → Appearance → Customize → Additional CSS → Publish
     (then hard-refresh the page: Ctrl/Cmd + Shift + R)
   ========================================================================= */


/* ---- 0. FORM CARD + BACKGROUND --------------------------------------------
   Give the form a soft tinted frame, with the form itself sitting in a clean
   white card: subtle shadow, rounded corners, and a thin brand accent on top.
   (If you don't want the tinted frame, delete the .give-form-wrap block.)     */
.give-form-wrap {
    background: #f6f4ef !important;         /* soft warm background */
    padding: 30px 22px !important;
    border-radius: 12px !important;
}
form[id*="give-form"] {
    max-width: 480px !important;
    margin: 0 auto !important;
    padding: 28px 26px !important;
    background: #ffffff !important;
    border: 1px solid #ececec !important;
    border-top: 3px solid #e7ad43 !important;   /* brand accent line */
    border-radius: 10px !important;
    box-shadow: 0 6px 22px rgba(0, 0, 0, .07) !important;
}
/* Soften the intro line above the fields (bold → light, easier to read) */
form[id*="give-form"] .give-form-content,
form[id*="give-form"] .give-form-content p {
    font-weight: 400 !important;
    color: #555 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}


/* ---- 1. FIELDS & INPUTS ---------------------------------------------------
   Normalise heights, consistent 12px padding, 6px radius, light #dcdcdc
   borders. Removes the heavy default box-shadow look.                        */
form[id*="give-form"] input[type="text"],
form[id*="give-form"] input[type="email"],
form[id*="give-form"] input[type="tel"],
form[id*="give-form"] input[type="number"],
form[id*="give-form"] .give-input,
form[id*="give-form"] select {
    box-sizing: border-box !important;
    width: 100% !important;
    height: auto !important;
    padding: 12px !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
    color: #222 !important;
    background: #fff !important;
    border: 1px solid #dcdcdc !important;
    border-radius: 6px !important;
    box-shadow: none !important;
}
form[id*="give-form"] input:focus,
form[id*="give-form"] select:focus {
    border-color: #e7ad43 !important;   /* site accent */
    outline: none !important;
    box-shadow: none !important;
}
form[id*="give-form"] label {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #666 !important;
}


/* ---- 2. AMOUNT FIELD ------------------------------------------------------
   Merge the "$" prefix and the amount box into ONE control so there's no
   double-border glitch between them.                                         */
form[id*="give-form"] .give-donation-amount {
    display: flex !important;
    align-items: stretch !important;
    max-width: 220px !important;
    border: 1px solid #dcdcdc !important;   /* single border on the wrapper */
    border-radius: 6px !important;
    overflow: hidden !important;            /* clips inner corners cleanly   */
}
form[id*="give-form"] .give-currency-symbol {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 14px !important;
    background: #f5f5f5 !important;
    color: #555 !important;
    font-weight: 600 !important;
    border: none !important;                /* remove its own border         */
}
form[id*="give-form"] #give-amount {
    flex: 1 !important;
    border: none !important;                /* border now lives on parent    */
    border-radius: 0 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
}
/* "Monthly" period text — quiet, aligned, not italic */
form[id*="give-form"] .give-recurring-donation-details,
form[id*="give-form"] .give-recurring-times {
    font-style: normal !important;
    font-size: 14px !important;
    color: #666 !important;
}
form[id*="give-form"] .give-custom-amount-text {
    display: block !important;
    margin-top: 6px !important;
    font-size: 13px !important;
    color: #888 !important;
}


/* ---- 3. PERSONAL INFO -----------------------------------------------------
   First + Last name share one row on wider screens.                          */
@media (min-width: 480px) {
    form[id*="give-form"] #give-first-name-wrap,
    form[id*="give-form"] #give-last-name-wrap {
        display: inline-block !important;
        width: calc(50% - 5px) !important;
        vertical-align: top !important;
    }
    form[id*="give-form"] #give-first-name-wrap { margin-right: 8px !important; }
}


/* ---- 4. CREDIT CARD BOX ---------------------------------------------------
   Turn the SSL + card area into a neat, subtle padded card.                  */
form[id*="give-form"] #give_cc_fields {
    padding: 16px !important;
    margin-top: 8px !important;
    background: #fafafa !important;
    border: 1px solid #dcdcdc !important;
    border-radius: 6px !important;
}
form[id*="give-form"] #give_cc_fields legend {
    padding: 0 0 10px !important;
    border: none !important;
}
form[id*="give-form"] #give_cc_fields .give-input,
form[id*="give-form"] #give_cc_fields .give-stripe-single-field {
    background: #fff !important;         /* fields stay white inside the box  */
}
form[id*="give-form"] .give-secure-donation-message {
    margin-bottom: 10px !important;
    font-size: 12px !important;
    color: #777 !important;
}


/* ---- 5. DONATION SUMMARY BAR ----------------------------------------------
   Replace the chunky split boxes with one clean horizontal summary line.     */
form[id*="give-form"] .give-donation-total-wrap,
form[id*="give-form"] #give-final-total-wrap {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin: 16px 0 !important;
    padding: 14px 0 !important;
    background: none !important;
    border: none !important;
    border-top: 1px solid #eee !important;
}
form[id*="give-form"] .give-donation-total-label {
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #666 !important;
}
form[id*="give-form"] .give-final-total-amount {
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #222 !important;
}


/* ---- 6. TERMS -------------------------------------------------------------
   Simple inline checkbox + link.                                             */
form[id*="give-form"] .give_terms_agreement label {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 13px !important;
    color: #666 !important;
}
form[id*="give-form"] .give_terms_agreement a { color: #d49a2f !important; }


/* ---- 7. SUBMIT BUTTON -----------------------------------------------------
   Full-width, bold, modern padding, clean hover.                             */
form[id*="give-form"] #give-purchase-button,
form[id*="give-form"] .give-submit {
    display: block !important;
    width: 100% !important;
    padding: 15px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #fff !important;
    background-color: #e7ad43 !important;
    border: 1px solid #e7ad43 !important;
    border-radius: 6px !important;
    height: auto !important;
    line-height: 1.3 !important;
    cursor: pointer !important;
    transition: background-color .15s ease !important;
}
form[id*="give-form"] #give-purchase-button:hover {
    background-color: #d49a2f !important;   /* slightly darker on hover */
    border-color: #d49a2f !important;
}/* End custom CSS */