/* ============================================================ GIVINGTECH DONATION FORM v4 Two modes: - LANDING PAGE (default): Full-width trust bar + two-column layout - IFRAME (class="iframe-mode" on ): No header, fluid sizing SERVER-SIDE: Add class="iframe-mode" to when embedded. ============================================================ */ /* ============================================================ FOUC PREVENTION — hide form until ready, then fade in ============================================================ */ body{visibility:hidden;opacity:0;transition:opacity .2s ease} body.v4-ready{visibility:visible;opacity:1} /* Pre-hide elements that JS toggles to prevent flash */ #divForSalutation, .cntry-code-wdth, .cntry-code-wdth_v3, #once-op, #monthly-op, #yearly-op, #divCoverCC, #divTipAmount, #giftaid, #gdpr, #igulLetova, #divForCCDetails, #stripePaymentForm, #statesList, #divPhone, #landingDescSection.pre-hidden, .amount-once, #amount-once, #monthly-amount, #yearly-amount, #languagebanner, #navbar, footer, #loading, #preparing, .progress-bar-container{ display:none } /* Hide images inside divLeftTextAreaDefault by default to prevent flash */ #divLeftTextAreaDefault img{display:none} :root { --mahogany: #4a0e00; --clay: #a16556; --fiery: #fc5936; --fiery-hover: #e14a2a; --powder: #ffe9d9; --seashell: #fff8f3; --white: #ffffff; --border: #e0d0c4; --border-lt: #e8d5c8; --label: #6b5548; --muted: #8a7568; --body: #4a2e1f; --error: #d63020; --error-bg: #fff0ee; --shadow: 0 2px 16px rgba(74,14,0,.06); --r-card: 20px; --r-btn: 12px; --r-input: 10px; --font: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif; --ease: .3s cubic-bezier(.4,0,.2,1); --ease-f: .15s ease; --base-size: 16px; } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{font-size:var(--base-size);-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{font-family:var(--font);font-weight:400;color:var(--body);background:var(--seashell);line-height:1.5;min-height:100vh;min-height:100dvh;-webkit-font-smoothing:antialiased} /* ============================================================ IFRAME MODE ============================================================ */ html.iframe-mode{background:transparent} html.iframe-mode body{background:transparent;min-height:auto} html.iframe-mode .landing-sidebar{display:none!important} html.iframe-mode .landing-layout{padding:0;max-width:100%} html.iframe-mode .trust-bar{border-radius:var(--r-card) var(--r-card) 0 0} html.iframe-mode .page-wrap{max-width:100%;padding:0;margin:0} html.iframe-mode .form-card{border-radius:0;box-shadow:none} html.iframe-mode .sticky{display:none!important} html.iframe-mode .iframe-info{display:block} /* ============================================================ TRUST BAR ============================================================ */ .trust-bar{width:100%;background:var(--mahogany);color:rgba(255,255,255,.85);font-size:.75rem;font-weight:500;letter-spacing:.02em;padding:7px 16px;text-align:center;display:flex;align-items:center;justify-content:center;gap:6px} .trust-bar svg{opacity:.8;flex-shrink:0} /* ============================================================ LANDING LAYOUT (two-column on desktop) ============================================================ */ .landing-layout{ width:100%;max-width:1080px;margin:0 auto;padding:0 16px 100px;position:relative;z-index:2; } @media(min-width:768px){ .landing-layout{display:flex;gap:32px;padding:32px 24px 60px;align-items:flex-start} } @media(min-width:1024px){ .landing-layout{gap:48px;padding:40px 40px 60px} } @media (max-width: 801px) { .landing-layout { padding: 0; max-width: 100%; } .tab-pane { padding-bottom: 0px; } } /* ============================================================ LANDING SIDEBAR (nonprofit info) ============================================================ */ .landing-sidebar{color:var(--mahogany);background:rgba(255,248,243,.88);border-radius:var(--r-card);padding:24px} @media(min-width:768px){ .landing-sidebar{flex:0 0 38%;max-width:380px;position:sticky;top:24px;padding:24px} } .landing-logo{height:72px;border-radius:16px;object-fit:contain;margin-bottom:16px;background:var(--powder);padding:8px} .landing-name{font-size:.9375rem;font-weight:400;margin-bottom:8px;line-height:1.25;color:var(--mahogany)} #divLeftTextAreaDefault,#divLeftTextAreaDefault *{font-size:.9375rem!important; font-weight: 400!important; color: var(--muted)!important;} #divLeftTextAreaDefault h1,#divLeftTextAreaDefault h1 *{font-size:1.5rem!important;font-weight:700!important} .landing-desc{font-size:.9375rem;font-weight:400;color:var(--muted);line-height:1.6;margin-bottom:16px} .landing-tax{display:inline-flex;align-items:center;gap:5px;font-size:.75rem;font-weight:500;color:var(--clay);background:var(--powder);padding:5px 14px;border-radius:20px} .landing-tax svg{flex-shrink:0} .landing-secure{display:none;margin-top:24px;padding-top:20px;border-top:1px solid var(--border-lt)} @media(min-width:768px){.landing-secure{display:block}} .landing-secure-title{font-size:.8125rem;font-weight:700;color:var(--mahogany);margin-bottom:8px;display:flex;align-items:center;gap:6px} .landing-secure-title svg{flex-shrink:0} .landing-secure-text{font-size:.75rem;color:var(--muted);line-height:1.5} .landing-other{display:none;margin-top:20px;padding-top:16px;border-top:1px solid var(--border-lt)} @media(min-width:768px){.landing-other{display:block}} .landing-other a{color:var(--fiery);text-decoration:underline;text-underline-offset:2px} /* "Other ways to give" — collapsible toggle */ .landing-other-toggle{ display:flex;align-items:center;gap:6px;width:100%; font-family:var(--font);font-size:.8125rem;font-weight:700;color:var(--mahogany); background:none;border:none;cursor:pointer;padding:0;margin-bottom:0; transition:color var(--ease-f) } .landing-other-toggle:hover{color:var(--fiery)} .landing-other-toggle svg{flex-shrink:0;transition:transform var(--ease)} .landing-other-toggle.open svg{transform:rotate(45deg)} .landing-other-content{ max-height:0;overflow:hidden;opacity:0; transition:max-height .35s ease,opacity .25s ease,margin .25s ease; margin-top:0 } .landing-other-content.open{max-height:800px;overflow-y:auto;opacity:1;margin-top:10px} .landing-other-content{font-size:.75rem;color:var(--muted);line-height:1.5} .sidebar-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:16px} .sidebar-top .landing-logo{margin-bottom:0} /* Language Button */ .lang-btn{display:inline-flex;align-items:center;gap:4px;font-family:var(--font);font-size:.75rem;font-weight:500;color:var(--clay);border:1px solid var(--border-lt);border-radius:16px;background:var(--white);padding:5px 10px;cursor:pointer;transition:all var(--ease-f);white-space:nowrap;margin-top:4px} .lang-btn:hover{border-color:var(--clay);color:var(--mahogany)} .lang-btn svg{flex-shrink:0;opacity:.7} .lang-dropdown{display:none;position:absolute;background:var(--white);border:1px solid var(--border-lt);border-radius:12px;box-shadow:var(--shadow);padding:4px;z-index:50;min-width:120px;margin-top:4px} .lang-dropdown.open{display:block} .lang-dropdown a{display:block;padding:6px 12px;font-size:.8125rem;color:var(--body);text-decoration:none;border-radius:8px;cursor:pointer} .lang-dropdown a:hover{background:var(--seashell);color:var(--mahogany)} /* ============================================================ PAGE WRAPPER ============================================================ */ .page-wrap{width:100%;max-width:520px;padding:0} @media(max-width:767px){ .page-wrap{max-width:100%;padding:0} .landing-sidebar{padding:24px} } @media(min-width:768px){ .page-wrap{flex:1;max-width:520px} } /* ============================================================ FORM CARD ============================================================ */ .form-card{background:var(--white);border-radius:var(--r-card);box-shadow:var(--shadow);overflow:hidden;animation:fadeUp .4s ease .2s both} .step-bar{height:3px;background:var(--powder)} .step-bar-fill{height:100%;background:var(--fiery);transition:width .5s ease;border-radius:0 2px 2px 0} /* ============================================================ STEPS ============================================================ */ .step{padding:24px;display:none;animation:fadeUp .25s ease both} .step.active{display:block} @media(min-width:480px){.step{padding:28px 32px}} /* Tab panes used as steps — add padding */ .tab-pane{padding:24px} @media(min-width:480px){.tab-pane{padding:28px 32px; }} /* ============================================================ SECTION TITLE ============================================================ */ .s-title{font-size:.8125rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:16px} /* Hide the old "Please select an amount" / "monthly donation" header row */ #pills-home > .card > .card-header.adf-form-header:first-child{display:none!important} /* The amount-once / monthly-amount / yearly-amount spans are hidden; replaced by .tax-banner above frequency tabs */ #amount-once,#monthly-amount,#yearly-amount{display:none!important} /* ============================================================ FREQUENCY TABS ============================================================ */ .freq-tabs{display:flex;gap:4px;margin-bottom:20px;background:var(--seashell);border-radius:10px;padding:4px} .freq-tab,.custom-tab-btn a{flex:1;height:40px;display:flex;align-items:center;justify-content:center;gap:4px;border:none;border-radius:8px;background:transparent;color:var(--muted);font-family:var(--font);font-size:.875rem;font-weight:600;cursor:pointer;transition:all var(--ease);position:relative;white-space:nowrap;text-decoration:none} .freq-tab:hover,.custom-tab-btn a:hover{color:var(--mahogany)} .freq-tab.active,.custom-tab-btn a.active{background:var(--mahogany);color:var(--white);box-shadow:0 2px 8px rgba(74,14,0,.15)} .freq-tab .badge,.custom-tab-btn .badge{position:absolute;top:-8px;right:-4px;font-size:.5rem;font-weight:700;color:var(--fiery);background:var(--powder);padding:1px 6px;border-radius:8px;white-space:nowrap;text-transform:uppercase;letter-spacing:.04em} .freq-tab.active .badge{color:var(--white);background:var(--fiery)} /* "Best Impact" badge on Monthly frequency tab — text from CSS custom property */ #freqButton2{position:relative} #freqButton2 .nav-link::after{ content:var(--badge-best-impact,"Best impact");position:absolute;top:-8px;right:4px; font-size:.5rem;font-weight:700;color:var(--fiery);background:var(--powder); padding:1px 6px;border-radius:8px;white-space:nowrap;text-transform:uppercase;letter-spacing:.04em } #freqButton2 .nav-link.active::after{color:var(--white);background:var(--fiery)} /* "Most popular" badge on the 3rd amount pill (center) — text from CSS custom property */ .amount-buttons-wrapper .divGiveonceRadioSum:nth-child(3){position:relative} .amount-buttons-wrapper .divGiveonceRadioSum:nth-child(3)::before{ content:var(--badge-most-popular,"Most popular");position:absolute;top:-9px;left:50%;transform:translateX(-50%); font-size:.5rem;font-weight:700;color:var(--white);background:var(--fiery); padding:1px 7px;border-radius:8px;white-space:nowrap;letter-spacing:.02em;z-index:2 } /* Custom pills (existing) mapped to new design */ .custom-pills{display:flex;gap:4px;margin-bottom:20px;background:var(--seashell);border-radius:10px;padding:4px;list-style:none} .custom-pills .nav-item{flex:1;display:flex} .custom-pills .nav-link{flex:1;height:40px;display:flex;align-items:center;justify-content:center;gap:4px;border:none;border-radius:8px;background:transparent;color:var(--muted);font-family:var(--font);font-size:.875rem;font-weight:600;cursor:pointer;transition:all var(--ease);white-space:nowrap;text-decoration:none;padding:0} .custom-pills .nav-link:hover{color:var(--mahogany)} .custom-pills .nav-link.active{background:var(--mahogany);color:var(--white)!important;box-shadow:0 2px 8px rgba(74,14,0,.15)} .custom-pills .nav-link img.check-circle-img{display:none} /* ============================================================ AMOUNT PILLS ============================================================ */ .amount-buttons-wrapper{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap} .amount-buttons-wrapper .divGiveonceRadioSum, .amount-buttons-wrapper .amount-button{ flex:1;min-width:0;height:54px;display:flex;align-items:center;justify-content:center; border:1.5px solid var(--border-lt);border-radius:var(--r-btn); background:var(--seashell);color:var(--mahogany); font-family:var(--font);font-size:1rem;font-weight:700; cursor:pointer;transition:all var(--ease-f); user-select:none;-webkit-tap-highlight-color:transparent; position:relative;padding:0 2px; } @media(max-width:400px){ .amount-buttons-wrapper .divGiveonceRadioSum, .amount-buttons-wrapper .amount-button{font-size:.875rem;height:50px} } .amount-buttons-wrapper .divGiveonceRadioSum:hover, .amount-buttons-wrapper .amount-button:hover{border-color:var(--clay);background:var(--powder)} .amount-buttons-wrapper .divGiveonceRadioSum.selected, .amount-buttons-wrapper .amount-button.selected{ background:var(--mahogany);color:var(--white);border-color:var(--mahogany); transform:scale(1.03);box-shadow:0 2px 12px rgba(74,14,0,.2);z-index:1 } .amount-buttons-wrapper .divGiveonceRadioSum label{ width:100%;height:100%;display:flex;align-items:center;justify-content:center;cursor:pointer;margin:0; padding:0;line-height:1 } .symbolonleft{display:flex;align-items:center;gap:0;direction:ltr;unicode-bidi:isolate} /* Hide the extra zero span (add_zeros) by default — shown by JS for yen etc. */ .add_zeros{display:none} .donation_type{font-size:.625rem;font-weight:500;opacity:.7;margin-left:2px} /* Wrapper for the amount section */ .amount-wrapper{margin-bottom:4px} /* Other Amount + Currency Row — side by side */ .amt-row2{display:flex;gap:6px;margin-bottom:14px} /* Hide the "Other amount" toggle BUTTON — in v4 the input is always visible */ #otherAmountBtn{display:none!important} /* Always show the other amount INPUT field */ #otherAmountBtnText{display:block!important} /* Hide the old label inside the other amount field */ #lblotherdonationamount{display:none!important} /* The #extrasums container holds both other-amount + currency — make it flex row */ #extrasums{display:flex!important;gap:6px;align-items:stretch;flex-wrap:nowrap;margin-top:0!important;margin-bottom:14px!important} #extrasums .input-wrapper.donate-amount, #extrasums .otherBtn-text{flex:0 0 35%;min-width:0} #extrasums .custom-select-box, #extrasums .select-box, #extrasums select{flex:1;min-width:0;margin-top:0!important} .other-amount-button{ flex:0 0 auto;min-width:80px;height:54px;display:flex;align-items:center;justify-content:center; border:1.5px solid var(--border-lt);border-radius:var(--r-btn);background:var(--seashell); color:var(--clay);font-family:var(--font);font-size:.8125rem;font-weight:600; cursor:pointer;transition:all var(--ease-f);padding:0 12px;white-space:nowrap } .other-amount-button:hover{border-color:var(--clay);background:var(--powder)} .other-amount-button.selected{border-color:var(--mahogany);background:var(--mahogany);color:var(--white)} .input-wrapper.donate-amount{position:relative;flex:1;min-width:80px} .input-wrapper.donate-amount .preinput{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:.875rem;font-weight:600;color:var(--clay);pointer-events:none;z-index:1} .input-wrapper.donate-amount .postinput{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:.75rem;color:var(--muted);pointer-events:none} .input-wrapper.donate-amount input[type="text"], #other_amt_field{ width:100%;height:54px;border:1.5px solid var(--border-lt)!important;border-radius:var(--r-btn)!important; padding:14px 40px 14px 28px;font-family:var(--font);font-size:.9375rem;font-weight:600; color:var(--mahogany);background:var(--seashell)!important; transition:border-color var(--ease-f),box-shadow var(--ease-f),background var(--ease-f);outline:none; box-shadow:none!important } .input-wrapper.donate-amount input:focus, #other_amt_field:focus{border-color:var(--fiery)!important;box-shadow:0 0 0 3px rgba(252,90,53,.12)!important;background:var(--white)!important} /* Override any inline styles on other_amt_field */ #other_amt_field[style]{border-color:var(--border-lt)!important;box-shadow:none!important} /* Input field container — position currency symbol inside */ .input-field-container{position:relative;width:100%} .input-field-container .preinput{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:.875rem;font-weight:600;color:var(--clay);pointer-events:none;z-index:1} .input-field-container .postinput{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:.75rem;color:var(--muted);pointer-events:none} /* Other amount text wrapper — make it a proper positioned container */ #otherAmountBtnText.otherBtn-text{position:relative} #otherAmountBtnText .error{display:none} /* Currency Dropdown */ .custom-select-box, select.select-box{ appearance:none;-webkit-appearance:none;width:100%; font-family:var(--font);font-size:.8125rem;font-weight:600;color:var(--mahogany); height:54px;background:var(--seashell) 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 d='M1 1L5 5L9 1' stroke='%234a0e00' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat calc(100% - 12px) center; border:1.5px solid var(--border-lt);border-radius:var(--r-btn);padding:0 30px 0 12px;cursor:pointer;outline:none } .custom-select-box:focus,select.select-box:focus{border-color:var(--fiery);box-shadow:0 0 0 3px rgba(252,90,53,.12)} /* ============================================================ COVER FEES ============================================================ */ /* ============================================================ COVER FEES — in Step 1 ============================================================ */ #divCoverCC{ padding:12px 14px;background:var(--powder);border-radius:var(--r-input); margin:14px 0;cursor:pointer;transition:background var(--ease-f);border:none!important } #divCoverCC:hover{background:#ffdfc8} #divCoverCC .form-check{ display:flex!important;align-items:flex-start;gap:12px;width:100%; padding:0!important;margin:0!important } #divCoverCC .form-check-input, #chbCoverCc{ appearance:none!important;-webkit-appearance:none!important; width:20px!important;height:20px!important;min-width:20px!important; border:2px solid var(--clay)!important;border-radius:5px!important;cursor:pointer; position:relative!important; transition:all var(--ease-f);margin:2px 0 0 0!important;flex-shrink:0; background:var(--white);display:inline-block!important } #chbCoverCc:checked{background:var(--fiery)!important;border-color:var(--fiery)!important} #chbCoverCc:checked::after{ content:'';position:absolute; left:50%;top:40%; width:5px;height:9px; transform:translate(-50%,-50%) rotate(45deg); border:solid var(--white);border-width:0 2px 2px 0 } #coverCcLabel{font-size:.8125rem;line-height:1.4;color:var(--body);cursor:pointer;margin:0!important;padding:0!important} #coverCcLabel strong{font-weight:600;color:var(--mahogany)} /* ============================================================ TIP AMOUNT — redesigned ============================================================ */ .tip-section{ padding:16px;background:var(--powder);border-radius:var(--r-card); margin:12px 0;border:1.5px solid var(--border-lt) } .tip-header{ display:flex;align-items:center;gap:12px;margin-bottom:12px } .tip-icon{flex-shrink:0} .tip-icon img{height:40px;width:auto;border-radius:8px} .tip-icon svg{width:60px;height:60px} .tip-heading{ font-size:.8125rem;font-weight:500;color:var(--body);line-height:1.45 } .tip-body{display:flex;flex-direction:column;gap:10px} .tip-label-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .tip-label{font-size:.8125rem;font-weight:600;color:var(--mahogany);white-space:nowrap} .tip-select{flex:1;min-width:120px} .tip-select select{ width:100%;height:44px; appearance:none;-webkit-appearance:none; font-family:var(--font);font-size:.875rem;font-weight:500;color:var(--mahogany); background:var(--white) 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 d='M1 1L5 5L9 1' stroke='%234a0e00' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat calc(100% - 12px) center; border:1.5px solid var(--border);border-radius:var(--r-input); padding:0 30px 0 14px;cursor:pointer;outline:none } .tip-select select:focus{border-color:var(--fiery);box-shadow:0 0 0 3px rgba(252,90,53,.12)} .tip-other{margin-top:4px} .tip-other label{ display:block;font-size:.8125rem;font-weight:500;color:var(--label);margin-bottom:4px } .tip-other input.form-control{ height:44px!important;border:1.5px solid var(--border)!important;border-radius:var(--r-input)!important; padding:10px 14px!important;font-size:.875rem!important;background:var(--white)!important; box-shadow:none!important;margin-bottom:6px } .tip-other input.form-control:focus{border-color:var(--fiery)!important;box-shadow:0 0 0 3px rgba(252,90,53,.12)!important} .tip-total{font-size:.75rem;color:var(--muted);font-weight:500} /* ============================================================ OPTIONAL FEATURE TOGGLES (dedication, installments) ============================================================ */ .opt-toggles{display:flex;gap:8px;margin:12px 0;flex-wrap:wrap} .exp-toggle,.iho-toggle{ display:inline-flex;align-items:center;gap:6px; font-size:.8125rem;font-weight:500;color:var(--clay); cursor:pointer;padding:8px 14px; border:1.5px solid var(--border-lt);border-radius:20px; background:var(--white);font-family:var(--font); transition:all var(--ease-f);text-decoration:none } .exp-toggle:hover,.iho-toggle:hover{border-color:var(--clay);background:var(--seashell);color:var(--mahogany)} .exp-toggle.open{border-color:var(--mahogany);background:var(--powder);color:var(--mahogany)} .exp-toggle svg{transition:transform var(--ease);flex-shrink:0} .exp-toggle.open svg{transform:rotate(90deg)} .exp-content{max-height:0;overflow:hidden;transition:max-height .35s ease,opacity .25s ease;opacity:0} .exp-content.open{max-height:800px;opacity:1} /* Dedication Fields (inline, not modal) */ .ded-fields{padding:10px 0 4px;display:flex;flex-direction:column;gap:10px} .ded-row{display:flex;gap:8px} @media(max-width:400px){.ded-row{flex-direction:column}} .ded-delivery{margin-top:4px} .ded-radio-group{display:flex;gap:16px;margin-bottom:10px} .ded-radio{display:flex;align-items:center;gap:6px;font-size:.8125rem;color:var(--body);cursor:pointer} .ded-radio input[type="radio"]{accent-color:var(--fiery);width:16px;height:16px;cursor:pointer} .ded-recipient{display:flex;flex-direction:column;gap:10px} /* Installments */ #divInstallments{margin:12px 0} .inst-sel,#ddlInstallments{ appearance:none;-webkit-appearance:none;width:100%;height:44px;font-family:var(--font);font-size:.875rem;font-weight:500; color:var(--mahogany);background:var(--seashell) 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 d='M1 1L5 5L9 1' stroke='%234a0e00' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat calc(100% - 14px) center; border:1.5px solid var(--border);border-radius:var(--r-input);padding:0 36px 0 14px;cursor:pointer;outline:none;margin:0 } /* ============================================================ PAYMENT METHODS ============================================================ */ .paymentmethodsbg{ margin-top:20px;padding:18px 16px 14px;background:var(--seashell); border-radius:var(--r-card);border:1.5px solid var(--border-lt) } .paymentmethods{font-size:.875rem;font-weight:700;color:var(--mahogany);margin-bottom:12px} .flex-container{display:flex;gap:6px;margin-bottom:4px;flex-wrap:wrap} .flex-container .flexitem{ flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center; } .flex-container .flexitem a, .flex-container .flexitem .btn{ width:100%;height:48px;display:flex;align-items:center;justify-content:center; border:1.5px solid var(--border-lt)!important;border-radius:var(--r-btn)!important;background:var(--white)!important; cursor:pointer;transition:all var(--ease-f);padding:0 6px; text-decoration:none } .flex-container .flexitem a:hover,.flex-container .flexitem .btn:hover{border-color:var(--clay)!important} .flex-container .flexitem a.selected-brand,.flex-container .flexitem .btn.selected-brand{ border:2px solid var(--fiery)!important;background:var(--powder)!important; box-shadow:0 0 0 2px var(--fiery)!important; transition:all .15s ease } .flex-container .payment_logo{max-height:22px;object-fit:contain} .flex-container svg.payment_logo{display:block;width:auto;height:22px} /* "Please select a currency" notice */ .pm-currency-notice{ display:flex;align-items:center;gap:8px; padding:12px 16px;margin-bottom:8px; background:var(--seashell);border:1.5px dashed var(--border);border-radius:var(--r-input); color:var(--muted);font-size:.8125rem;font-weight:500 } .pm-currency-notice svg{flex-shrink:0;color:var(--clay);opacity:.7} .pm-currency-notice.hidden{display:none} /* Step 1 validation warning */ .step1-warn{display:none;font-size:.8125rem;color:var(--error);text-align:center;padding:8px 12px;margin-bottom:8px;background:var(--error-bg);border-radius:var(--r-input);border:1px solid rgba(214,48,32,.15)} .step1-warn.vis{display:block} /* ============================================================ CTA BUTTONS ============================================================ */ .donate-btn,#btnDonateButton,#btnDonateButtonByPaypal,.donate-btn-submit{ width:100%;height:56px;border:none;border-radius:var(--r-btn)!important; background:var(--fiery)!important;color:var(--white)!important; font-family:var(--font);font-size:1.0625rem;font-weight:700; cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px; transition:all var(--ease-f);margin-top:12px;letter-spacing:.01em } .donate-btn:hover,#btnDonateButton:hover,#btnDonateButtonByPaypal:hover{background:var(--fiery-hover)!important} .donate-btn:active,#btnDonateButton:active{background:#d1411f!important;transform:scale(.98)} .donate-btn:disabled,#btnDonateButton:disabled{opacity:.5;cursor:not-allowed} /* Old buttons hidden */ .old_buttons{display:none!important} /* ============================================================ STEP 2: PAYMENT DETAILS ============================================================ */ /* --- Payment summary header (once-op, monthly-op, yearly-op) --- Matches HTML design: "Payment of $187.92 [Edit]" Hidden by default; JS shows the correct one when entering Step 2 */ #once-op,#monthly-op,#yearly-op{ display:none;align-items:center;justify-content:space-between; padding:10px 14px!important;background:var(--seashell)!important; border-radius:var(--r-input)!important;margin-bottom:16px!important; font-size:.9375rem!important;font-weight:600!important;color:var(--mahogany)!important; border:none!important;text-align:left!important } /* When JS .show() is called it sets display:block; override to flex */ #once-op[style*="block"],#monthly-op[style*="block"],#yearly-op[style*="block"]{display:flex!important} #once-op .header-step-2, #monthly-op .header-step-2, #yearly-op .header-step-2{ display:flex!important;align-items:center;gap:8px;width:100%;justify-content:space-between } /* Hide the old arrow icon in the edit link */ #once-op .edit-amount-flip i, #monthly-op .edit-amount-flip i, #yearly-op .edit-amount-flip i{display:none!important} /* Style the selAmt/selMonthlyAmt to be inline */ .selAmt,.selMonthlyAmt{font-weight:600;color:var(--mahogany)} /* Hide the old generic card headers in step 2 */ #pills-card > .card > .card-header.adf-form-header{ padding:10px 14px;background:var(--seashell);border-radius:var(--r-input);margin-bottom:16px; font-size:.9375rem;font-weight:600;color:var(--mahogany);border:none } /* Rewards header */ #divForRewards{background:transparent!important;border:none!important;padding:0!important;margin-bottom:8px} #divForRewards .like_h2{font-size:.875rem;font-weight:500;color:var(--muted)} .edit-amount{ font-size:.8125rem;font-weight:500;color:var(--fiery);cursor:pointer;border:none; background:none;font-family:var(--font);text-decoration:underline;text-underline-offset:2px; white-space:nowrap;margin-left:auto } .edit-amount-flip{display:flex;align-items:center} .edit-amount-flip i.iconflip{font-size:1rem!important;color:var(--fiery)} /* --- "Your details" section title in Step 2 --- */ #divForFirstAndLastName{margin-top:8px} /* Title moved to #divtbcontactemail via JS */ /* --- Email field (full-width row above first/last name) --- */ #divtbcontactemail{margin-bottom:8px!important;width:100%} #divtbcontactemail .md-form{margin-bottom:0!important} #divtbcontactemail label{ display:block!important;position:static!important;transform:none!important; font-size:.8125rem!important;font-weight:500;color:var(--label);margin-bottom:4px } #divtbcontactemail .form-control{ width:100%!important;height:48px!important; border:1.5px solid var(--border)!important;border-radius:var(--r-input)!important; padding:12px 14px!important;font-size:.9375rem!important;background:var(--white)!important; box-shadow:none!important } #divtbcontactemail .form-control:focus{ border-color:var(--fiery)!important;box-shadow:0 0 0 3px rgba(252,90,53,.12)!important } /* --- Step 2 field layout: labels ABOVE inputs --- */ /* Make each .md-form a flex column so label (order:-1) appears above input */ /* Use :not() to exclude hidden elements and name row (which needs JS .hide() to work) */ #pills-card .card-body > .md-form, #pills-card .fulladdressold .md-form:not(#statesList), #pills-card #divPhone .md-form.fix_for_phone_for_rtl, #pills-card #divtbcontactemail .md-form, #pills-card #divForCCDetails .md-form, #pills-card .tz-section .md-form{ display:flex!important;flex-direction:column!important } /* Name row: flex WITHOUT !important on display so JS .hide() can override for company mode */ #divForFirstAndLastName .md-form{ display:flex;flex-direction:column!important } /* statesList: hidden by default, JS OnCountryChange controls visibility */ #statesList[style*="none"]{display:none!important} /* Salutation dropdown — hidden by default; clients can override via custom CSS */ #divForSalutation{display:none} /* When client CSS shows salutation (display:block/flex/inline-flex), apply flex-column for label-above-input */ #divForSalutation:not([style*="display: none"]):not([style*="display:none"]){ flex-direction:column;flex:1;min-width:0 } .salutation-label{ display:block!important;font-size:.8125rem!important;font-weight:500!important; color:var(--label)!important;margin-bottom:4px!important; position:static!important;transform:none!important;order:-1!important } /* Name row — when salutation is hidden, first+last fill the row */ #divForFirstAndLastName .rowname{display:flex;gap:10px;flex-wrap:nowrap} #divForFirstAndLastName .rowname > .md-form.col{flex:1;min-width:0} /* When shown, match Country dropdown styling */ #divForSalutation #ddlSalutation, .divdonortitle{ appearance:none!important;-webkit-appearance:none!important; width:100%!important;height:48px!important; border:1.5px solid var(--border)!important;border-radius:var(--r-input)!important; padding:0 30px 0 14px!important;font-family:var(--font)!important; font-size:.9375rem!important;font-weight:400!important;color:var(--mahogany)!important; background:var(--white) 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 d='M1 1L5 5L9 1' stroke='%234a0e00' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat calc(100% - 12px) center!important; cursor:pointer;outline:none;box-shadow:none!important;margin:0!important } #divForSalutation #ddlSalutation:focus, .divdonortitle:focus{ border-color:var(--fiery)!important;box-shadow:0 0 0 3px rgba(252,90,53,.12)!important } .cntry-code-wdth,.cntry-code-wdth_v3{display:none!important} .cntry-code-wdth *,.cntry-code-wdth_v3 *{display:none!important} #pills-card .md-form>label, #pills-card label[for]:not(#giftaid label):not(.gdpr-section label), #divForFirstAndLastName label, #divPhone label, #divtbcontactemail label{ display:block!important;position:static!important;transform:none!important; font-size:.8125rem!important;font-weight:500!important;color:var(--label)!important; margin-bottom:4px!important;opacity:1!important;pointer-events:auto!important; order:-1!important } /* Gift Aid and GDPR labels: no order override */ #giftaid label,#giftaid #Div4 label,.gdpr-section label{order:0!important} #pills-card .form-control, #divForFirstAndLastName .form-control, #divPhone .form-control{ height:48px!important;border:1.5px solid var(--border)!important; border-radius:var(--r-input)!important;padding:12px 14px!important; font-size:.9375rem!important;background:var(--white)!important; box-shadow:none!important } #pills-card .form-control:focus, #divForFirstAndLastName .form-control:focus, #divPhone .form-control:focus{ border-color:var(--fiery)!important;box-shadow:0 0 0 3px rgba(252,90,53,.12)!important } /* Name row: first + last side by side (email is on its own row above) */ #divForFirstAndLastName{margin-bottom:12px!important} #divForFirstAndLastName .rowname{display:flex!important;gap:10px;flex-wrap:nowrap} #divForFirstAndLastName .rowname>.md-form.col{flex:1;min-width:0;margin-bottom:0!important} #divForFirstAndLastName .rowname>.md-form.col.padright{padding-right:0!important} /* Step 2 card body */ #pills-card .card-body.donate-form-body{padding:0} #pills-card .ammount-wrapper{padding:0} /* --- Salutation dropdown — hidden by default; JS shows it for company mode --- */ .max25{max-width:25%;flex:0 0 25%} /* --- Name row --- */ #divForFirstAndLastName .rowname{display:flex;gap:10px;flex-wrap:wrap} #divForFirstAndLastName .rowname .md-form.col{flex:1;min-width:0} #divForFirstAndLastName .rowname .md-form.col.max25{flex:0 0 auto;min-width:120px} /* --- "Company? Click here" link --- */ #divAreYouCompany2 a, #divAreYouCompany a{ font-size:.8125rem;color:var(--fiery);text-decoration:underline;text-underline-offset:2px; display:inline-block;margin-top:4px;margin-bottom:8px } /* --- Phone row --- */ /* Hide phone country code dropdown */ .cntry-code-wdth,.cntry-code-wdth_v3{display:none!important} #divPhone{margin-bottom:8px!important} #divPhone .rowname{display:flex;gap:10px} #divPhone .md-form.col{margin-bottom:0!important} #divPhone .fix_for_phone_for_rtl{flex:1} /* Payment method badge */ .pay-method-badge{ display:inline-flex;align-items:center;gap:4px;font-size:.75rem;font-weight:600; color:var(--clay);background:var(--powder);padding:3px 10px;border-radius:8px;margin-bottom:16px } /* Step 2 payment method badges (Bit, PayPal, etc.) */ .card-header-paypal{ display:inline-flex;align-items:center;gap:6px;padding:6px 14px; background:var(--powder);border-radius:8px;margin-bottom:16px } .card-header-paypal img.paymenticonssmall{height:24px;width:auto} /* --- Card Details section (#divForCCDetails) — card-style wrapper --- */ #divForCCDetails{ margin:16px 0 12px;padding:16px; background:var(--seashell);border-radius:var(--r-input); border:1.5px solid var(--border-lt) } /* CC fields row */ #divForCCDetails .rowname{display:flex;gap:0;flex-wrap:nowrap!important;align-items:flex-start} /* Card number — takes majority of the row, all fields on one line */ #divForCCDetails .rowname{flex-wrap:nowrap!important} #divForCCDetails .rowname>.md-form.col.padright:first-child{ flex:3;min-width:0;position:relative } /* Card number input wrapper needs position:relative */ #divForCCDetails .rowname>.md-form.col.padright:first-child{position:relative} /* CC brand icon — positioned INSIDE the card number input, vertically centered on the input */ #divForCCDetails .ccbrandMaxWidth{ position:absolute!important;right:16px;top:37px; flex:none!important;width:auto!important;padding:0!important;margin:0!important; z-index:2;pointer-events:none } #divForCCDetails .ccbrandMaxWidth img, #divForCCDetails #cctype img{max-width:36px;max-height:22px} /* Add padding-right to card number input to make room for brand icon */ #divForCCDetails #tbccnumber{padding-right:54px!important} /* Expiry date column — wider */ #divForCCDetails .xpry-dt-wdth{flex:0 0 120px!important;min-width:100px} /* CVC column — narrower */ #divForCCDetails .cvc-wdth{flex:0 0 60px!important;min-width:55px} /* CC field labels */ #divForCCDetails label{ display:block!important;position:static!important;transform:none!important; font-size:.8125rem!important;font-weight:500!important;color:var(--label)!important;margin-bottom:4px!important } /* CC inputs */ #divForCCDetails .form-control{ height:48px!important;border:1.5px solid var(--border)!important; border-radius:var(--r-input)!important;padding:12px 14px!important; font-size:1rem!important;background:var(--white)!important; box-shadow:none!important;direction:ltr } #divForCCDetails .form-control:focus{ border-color:var(--fiery)!important;box-shadow:0 0 0 3px rgba(252,90,53,.12)!important } /* Card Detail Headers — inside the card wrapper */ .card-det-title{display:flex;align-items:center;gap:6px;font-size:.8125rem;font-weight:600;color:var(--label);margin-bottom:12px;margin-top:0} /* --- Address section: "Add full address" toggle --- */ #fulladdress{margin-bottom:12px} #btnFullMailAddress{ display:inline-flex;align-items:center;gap:6px; font-size:.8125rem;font-weight:500;color:var(--clay); cursor:pointer;padding:8px 14px; border:1.5px solid var(--border-lt);border-radius:20px; background:var(--white);font-family:var(--font); transition:all var(--ease-f);text-decoration:none;margin-bottom:12px } #btnFullMailAddress:hover{border-color:var(--clay);background:var(--seashell);color:var(--mahogany)} #btnFullMailAddress i{font-size:.875rem} /* Old accordion styles — flatten into simple expand */ .cstm-accordian .card.cstm-card{background:transparent;border:none;box-shadow:none} .cstm-accordian .card-body.cstm-card-body{padding:0} #collapse1{border:none;background:transparent} /* When address is mandatory, JS hides #btnFullMailAddress and auto-expands #collapse1 */ /* Address field rows */ .fulladdressold{padding:0!important} .fulladdressold .rowname{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px} .fulladdressold .rowname .md-form.col{flex:1;min-width:0;margin-bottom:0!important} .address-field{margin-bottom:0!important} .address-field label{font-size:.8125rem;font-weight:500;color:var(--label)} .addressRedStar{color:var(--fiery)} #statesList{margin-bottom:0!important;display:none} /* --- Stripe Payment Element (in Step 2) --- */ #stripePaymentForm{padding-top:10px;margin-bottom:8px} #payment-element{margin-bottom:20px;padding-bottom:10px;border-bottom:1px solid var(--border-lt)} /* --- Cover CC section --- */ #divCoverCC{margin:12px 0!important} /* --- Submit button (with sum) --- */ #btnDonateButton{ width:100%;height:56px;border:none;border-radius:var(--r-btn)!important; background:var(--fiery)!important;color:var(--white)!important; font-family:var(--font);font-size:1.0625rem;font-weight:700; cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px; transition:all var(--ease-f);margin-top:12px;letter-spacing:.01em } #btnDonateButton:hover{background:var(--fiery-hover)!important} /* --- Terms text --- */ .control-group.postHide .terms{ font-size:.75rem;color:var(--muted);text-align:center;padding:8px 0 0;line-height:1.4 } /* --- Error display --- */ #spnErrBankInfo{font-size:.8125rem} #card-errors{font-size:.8125rem;color:var(--error)} /* Step 2 CC payment methods selector */ .step2CC{margin-bottom:16px} .step2CC .paymentmethods{font-size:.8125rem;font-weight:600;color:var(--label);margin-bottom:8px} /* ============================================================ FORM FIELDS ============================================================ */ .fg,.input-group.input-box,.md-form{margin-bottom:8px!important;position:relative} .fg label,label[for],.md-form>label{ display:block;font-size:.8125rem;font-weight:500;color:var(--label);margin-bottom:4px; /* Override MDB floating label: make static above input */ position:static!important;transform:none!important;pointer-events:auto!important; font-size:.8125rem!important;opacity:1!important } .req{color:var(--fiery);margin-inline-start:2px} /* Override MDB active/focus label transforms */ .md-form label.active, .md-form input:focus~label, .md-form input:valid~label, .md-form textarea:focus~label{ position:static!important;transform:none!important;font-size:.8125rem!important;color:var(--label)!important } .fi,.form-control{ width:100%;height:48px;border:1.5px solid var(--border)!important;border-radius:var(--r-input)!important; padding:14px 16px;font-family:var(--font);font-size:1rem;font-weight:400; color:var(--mahogany);background:var(--white); transition:border-color var(--ease-f),box-shadow var(--ease-f);outline:none; box-shadow:none!important } .fi::placeholder,.form-control::placeholder{color:var(--border);font-weight:400} .fi:focus,.form-control:focus{border-color:var(--fiery)!important;box-shadow:0 0 0 3px rgba(252,90,53,.12)!important} .fi.err,.form-control.err{border-color:var(--error)!important;background:var(--error-bg)} textarea.form-control,textarea.fi{height:auto;min-height:80px;resize:vertical} /* Name Row */ .rowname{display:flex;gap:10px} .rowname>*{flex:1} @media(max-width:400px){.rowname{flex-direction:column;gap:10px}} /* Error Messages */ .f-err{font-size:.75rem;color:var(--error);margin-top:3px;display:none} .f-err.vis{display:block} .errMsgValidation{color:var(--error)!important;font-size:.75rem} .text-danger{color:var(--error)!important;font-size:.75rem} /* CC Brand Icon */ .ccbrand{display:flex;align-items:center;justify-content:center} .ccbrand img,.ccbrandMaxWidth img{max-width:40px;max-height:26px} #cctype img{max-width:40px;max-height:26px} /* ============================================================ ADDRESS FIELDS — consistent 12px vertical spacing ============================================================ */ .addr-fields,.fulladdressold{display:flex;flex-direction:column;gap:12px;padding:0} .addr-row{display:flex;gap:10px} .addr-row>*{flex:1} @media(max-width:400px){.addr-row{flex-direction:column;gap:12px}} /* Full address (Google autocomplete) field */ #fulladdress{margin-bottom:12px} #fulladdress .input-group{margin-bottom:0!important} #fulladdress .md-form{margin-bottom:0!important} /* Country, State/Province Dropdowns — same style as input fields */ #ddlStateListUSA,#ddlStateListCanada,#ddlcountry{ appearance:none!important;-webkit-appearance:none!important; width:100%!important;height:48px!important; border:1.5px solid var(--border)!important;border-radius:var(--r-input)!important; padding:0 30px 0 14px!important;font-family:var(--font)!important;font-size:.8375rem!important; font-weight:400;color:var(--mahogany)!important; background:var(--white) 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 d='M1 1L5 5L9 1' stroke='%234a0e00' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat calc(100% - 12px) center!important; cursor:pointer;outline:none; box-shadow:none!important } #ddlStateListUSA:focus,#ddlStateListCanada:focus,#ddlcountry:focus{ border-color:var(--fiery)!important;box-shadow:0 0 0 3px rgba(252,90,53,.12)!important } /* Country wrapper — label ABOVE input (matching other fields) */ .cgcountry{margin-bottom:0!important;display:flex!important;flex-direction:column!important} .cgcountry select{margin:0!important} .country-label{ display:block!important;font-size:.8125rem!important;font-weight:500!important; color:var(--label)!important;margin-bottom:4px!important;margin-top:0!important; position:static!important;transform:none!important;order:-1 } /* Country + State on same row; country full-width until state appears */ #divCountry{width:100%} /* The row containing zip + country + state */ .fulladdressold .rowname:last-child{flex-wrap:nowrap;gap:8px;align-items:flex-start} .fulladdressold .rowname:last-child .md-form.col.nopad{flex:1;min-width:0} /* State wrapper — flex:1 when visible, hidden by default via inline style on #statesList */ /* State wrapper: hidden by default via JS, shown with .state-visible class */ .state-wrapper-hidden{display:none!important} .state-wrapper-hidden.state-visible{display:block!important;flex:1;min-width:0} /* ============================================================ CUSTOM FIELDS (rptControl1, rptControl2) — match design system ============================================================ */ /* Outer wrapper for each custom field */ #rtp1 .input-group, #rtp2 .input-group, [id^="rptControl"] .input-group{ margin:8px 0;padding:0;width:100% } /* Custom field label (above the input) */ #rtp1 .control-label, #rtp2 .control-label, [id^="rptControl"] .control-label{ display:block!important;font-size:.8125rem!important;font-weight:500!important; color:var(--label)!important;margin-bottom:4px!important; position:static!important;transform:none!important } /* Custom dropdowns (.cfddl) */ .cfddl{ appearance:none!important;-webkit-appearance:none!important; width:100%!important;height:48px!important; border:1.5px solid var(--border)!important;border-radius:var(--r-input)!important; padding:0 30px 0 14px!important;font-family:var(--font)!important;font-size:.9375rem!important; color:var(--mahogany)!important; background:var(--white) 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 d='M1 1L5 5L9 1' stroke='%234a0e00' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat calc(100% - 12px) center!important; cursor:pointer;outline:none;box-shadow:none!important } .cfddl:focus{border-color:var(--fiery)!important;box-shadow:0 0 0 3px rgba(252,90,53,.12)!important} /* Custom text inputs (.cftxt) — wrap parent as flex column so label appears above input */ [id^="rptControl"] .input-group:has(.cftxt){ display:flex!important;flex-direction:column!important; margin:8px 0!important;padding:0!important } [id^="rptControl"] .input-group:has(.cftxt) label{ order:-1!important;margin-bottom:4px!important; font-size:.8125rem!important;font-weight:500!important;color:var(--label)!important; position:static!important;transform:none!important; display:block!important } [id^="rptControl"] .input-group:has(.cftxt) label span{ font-size:.8125rem!important;font-weight:500!important;color:var(--label)!important; margin:0!important } [id^="rptControl"] .input-group:has(.cftxt) label .mandatory_asterix{color:var(--fiery)!important;margin-left:2px!important} .mandatory_asterix{color:red!important} .cftxt{ width:100%!important;height:48px!important; /* Lock height so the rows="2" attribute on textarea elements doesn't force them to render as two lines tall. */ min-height:48px!important;max-height:48px!important; resize:none!important;overflow-y:auto!important;overflow-x:hidden!important; border:1.5px solid var(--border)!important;border-radius:var(--r-input)!important; padding:12px 14px!important;font-family:var(--font);font-size:.9375rem!important; color:var(--mahogany)!important;background:var(--white)!important; outline:none;box-shadow:none!important;line-height:1.4!important } .cftxt:focus{border-color:var(--fiery)!important;box-shadow:0 0 0 3px rgba(252,90,53,.12)!important} /* Custom checkbox row (.cfchk) — checkbox with inline label */ [id^="rptControl"] .input-group:has(.cfchk){ background:var(--seashell);border:1.5px solid var(--border-lt); border-radius:var(--r-input);padding:12px 14px!important;margin:8px 0!important } [id^="rptControl"] .input-group:has(.cfchk) > span{ display:flex!important;align-items:center;gap:10px;padding:0!important } .cfchk{ appearance:none!important;-webkit-appearance:none!important; width:18px!important;height:18px!important;min-width:18px!important; border:1.5px solid var(--clay)!important;border-radius:4px!important; cursor:pointer;position:relative!important;flex-shrink:0; background:var(--white)!important;margin:0!important } .cfchk:checked{background:var(--fiery)!important;border-color:var(--fiery)!important} .cfchk:checked::after{ content:'';position:absolute;left:50%;top:42%; width:4px;height:8px; transform:translate(-50%,-50%) rotate(45deg); border:solid var(--white);border-width:0 2px 2px 0 } .form-check-label, [id^="rptControl"] .form-check-label{ font-size:.8125rem!important;font-weight:500!important;color:var(--body)!important; cursor:pointer;line-height:1.4!important; position:static!important;transform:none!important;top:auto!important; margin:0!important;padding:0!important } /* Custom radio buttons (.cfopt) */ .cfopt{ accent-color:var(--fiery);width:18px;height:18px;cursor:pointer;margin-right:6px } /* ============================================================ GIFT AID, GDPR, IGUL LETOVA ============================================================ */ #giftaid,#igulLetova{ padding:14px;background:var(--powder);border-radius:var(--r-input);margin-bottom:14px;border:none } /* GDPR section */ .gdpr-section{padding:14px;background:var(--powder);border-radius:var(--r-input);margin-bottom:14px} .gdpr-title{font-size:.875rem;font-weight:700;color:var(--mahogany);margin-bottom:8px} .gdpr-check-row{display:flex!important;flex-direction:row!important;align-items:flex-start;gap:10px} .gdpr-check-row .largerCheckbox{margin-top:2px;flex-shrink:0} .gdpr-check-row .labelgdpr{font-size:.8125rem;color:var(--body);line-height:1.4;cursor:pointer} /* Gift Aid styling */ #giftaid .text-separator{margin-bottom:8px} #giftaid .text-separator span{font-size:.875rem;font-weight:700;color:var(--mahogany)} #giftaid .giftaidlabel{font-size:.8125rem;color:var(--body);line-height:1.5;margin-bottom:10px;display:block;padding:0} /* Gift Aid Yes/No radio buttons — horizontal layout */ #giftaid #Div4{display:flex!important;flex-direction:row!important;align-items:center;gap:16px} #giftaid #Div4>span{display:flex!important;flex-direction:row!important;align-items:center;gap:6px;font-size:.875rem;color:var(--body);cursor:pointer} #giftaid #Div4 input[type="radio"]{ accent-color:var(--fiery);width:18px;height:18px;cursor:pointer;margin:0 } #giftaid #Div4 label{ font-size:.875rem!important;color:var(--body)!important;cursor:pointer; margin:0!important;position:static!important;transform:none!important; display:inline!important } .labelgdpr{font-size:.8125rem;color:var(--body);line-height:1.4} .largerCheckbox{ appearance:none;-webkit-appearance:none;width:18px;height:18px;min-width:18px; border:1.5px solid var(--border);border-radius:4px;cursor:pointer; position:relative;transition:all var(--ease-f);margin-top:2px;vertical-align:middle } .largerCheckbox{position:relative} .largerCheckbox:checked{background:var(--mahogany);border-color:var(--mahogany)} .largerCheckbox:checked::after{ content:'';position:absolute; left:50%;top:45%; width:4px;height:8px; transform:translate(-50%,-50%) rotate(45deg); border:solid var(--white);border-width:0 2px 2px 0 } .igulLetova-text{font-size:.8125rem;color:var(--body);line-height:1.4} .igulLetova-text br{display:none} .igulLetova-text p{margin:0!important} /* Igul Letova section — proper flex layout */ #igulLetova{ display:flex;flex-direction:column!important;gap:8px; padding:14px!important } #igulLetova > div, #igulLetova .col-12{ display:flex!important;flex-direction:column!important;gap:8px; padding:0!important;margin:0!important } /* Checkbox row inside Igul Letova */ #igulLetova .custom-checkbox{ display:flex!important;align-items:center;gap:8px; padding:0!important;margin:0!important } #igulLetova .custom-checkbox .largerCheckbox{margin:0!important;flex-shrink:0} .igulimage{max-height:40px;vertical-align:middle;margin-right:8px;float:right;margin-left:8px} /* Teudat Zehut — regular form field style */ .tz-section{ padding:0;background:transparent;border:none; margin:12px 0 } .tz-input-row{margin-bottom:8px} .tz-input-row label{ display:block!important;position:static!important;transform:none!important; font-size:.8125rem!important;font-weight:500!important;color:var(--label)!important; margin-bottom:4px!important } .tz-input-row .form-control{ height:48px!important;border:1.5px solid var(--border)!important; border-radius:var(--r-input)!important;padding:12px 14px!important; font-size:1rem!important;background:var(--white)!important; box-shadow:none!important;direction:ltr; } .tz-input-row .form-control:focus{ border-color:var(--fiery)!important;box-shadow:0 0 0 3px rgba(252,90,53,.12)!important } .tz-info{ display:flex;align-items:flex-start;gap:8px; font-size:.75rem;color:var(--muted);line-height:1.45 } .tz-info a{color:var(--fiery);text-decoration:underline;text-underline-offset:2px} /* ============================================================ TERMS TEXT ============================================================ */ .terms,.terms-text{font-size:.75rem;color:var(--muted);text-align:center;padding:12px 0 4px;line-height:1.4} .terms a,.terms-text a{color:var(--fiery);text-decoration:underline;text-underline-offset:2px} /* ============================================================ BACK BUTTON ============================================================ */ .back-btn{ display:flex;align-items:center;gap:4px;font-family:var(--font);font-size:.875rem;font-weight:500; color:var(--muted);cursor:pointer;border:none;background:none;padding:10px 0;transition:color var(--ease-f) } .back-btn:hover{color:var(--mahogany)} /* ============================================================ STICKY CTA (Landing mode only, mobile) ============================================================ */ .sticky{display:none;position:fixed;bottom:0;left:0;right:0;padding:12px 16px;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));background:var(--white);box-shadow:0 -2px 16px rgba(74,14,0,.08);z-index:100} .sticky .donate-btn{margin-top:0} .sticky.vis{display:block} /* ============================================================ IFRAME-ONLY INFO BAR ============================================================ */ .iframe-info{display:none;padding:10px 16px;font-size:.75rem;color:var(--muted);text-align:center;line-height:1.5;border-top:1px solid var(--border-lt);margin-top:8px} .iframe-info a{color:var(--fiery)} /* ============================================================ PROGRESS BAR (replaces donation-progress-bar.css) ============================================================ */ .progress-bar-container{ display:none!important; position:fixed!important;top:0!important;left:0!important;right:0!important;bottom:0!important; width:100vw!important;height:100vh!important; background:rgba(255,248,243,.96)!important;z-index:99999!important; flex-direction:column!important;align-items:center!important;justify-content:center!important; text-align:center;padding:20px } .progress-bar-container.overlay{display:flex!important} .progress-bar-container h2,.processingfont{ font-family:var(--font);font-size:1.5rem;font-weight:700;color:var(--mahogany); margin:0 0 24px;text-align:center } .progress{width:280px;height:6px;background:var(--powder);border-radius:3px;overflow:hidden;margin:0 auto} .progress-bar-line{height:100%;background:var(--fiery);border-radius:3px;width:0;transition:width .3s ease} #preparing{display:none;text-align:center;padding:20px} #preparing img{max-width:40px} /* ============================================================ MODALS (Bootstrap modals — keep structure, restyle) ============================================================ */ .modal-content{border-radius:var(--r-card);border:none;box-shadow:0 8px 40px rgba(74,14,0,.15)} .modal-header{border-bottom:1px solid var(--border-lt);padding:16px 24px} .modal-body{padding:24px} .modal-footer{border-top:1px solid var(--border-lt);padding:16px 24px} /* E-card Modal — full styling */ .iho .modal-dialog{max-width:520px} .iho .modal-content{border-radius:var(--r-card);border:none;box-shadow:0 8px 40px rgba(74,14,0,.15);overflow:hidden;position:relative} /* Close X button — top right (top left in RTL via natural flow) */ .iho-close-btn{ position:absolute;top:12px;right:12px;z-index:10; width:32px;height:32px;border-radius:50%;background:var(--seashell);border:none; display:flex;align-items:center;justify-content:center; cursor:pointer;color:var(--mahogany);transition:background var(--ease-f) } .iho-close-btn:hover{background:var(--powder)} .iho .modal-tab{display:none} .iho .modal-tab.active-tab{display:block} .iho .modal-header{border-bottom:1px solid var(--border-lt);padding:16px 24px} .iho .modal-header .close,.iho .modal-close{ width:32px;height:32px;border-radius:50%;background:var(--seashell);border:none; font-size:1.25rem;color:var(--mahogany);cursor:pointer;display:flex;align-items:center;justify-content:center } .iho .modal-body{padding:24px 28px} /* E-card modal footer — Back on left, Next on right (flipped in RTL) */ .iho-footer{ border-top:1px solid var(--border-lt)!important;padding:14px 24px!important; display:flex!important;justify-content:flex-end!important;align-items:center;gap:10px; background:var(--seashell) } .iho-back-btn{ display:inline-flex;align-items:center;gap:4px; font-size:.875rem;font-weight:500;color:var(--muted); background:none;border:none;cursor:pointer;font-family:var(--font); padding:10px 16px;border-radius:var(--r-btn); transition:color var(--ease-f) } .iho-back-btn:hover{color:var(--mahogany)} .iho-next-btn{ display:inline-flex;align-items:center;gap:6px; font-size:.875rem;font-weight:600;color:var(--white); background:var(--fiery);border:none;border-radius:var(--r-btn); padding:10px 24px;cursor:pointer;font-family:var(--font); transition:background var(--ease-f) } .iho-next-btn:hover{background:var(--fiery-hover)} .iho-next-btn svg{flex-shrink:0} .iho .iho-header{margin-bottom:16px} .iho .iho-header h3{font-size:1.125rem;font-weight:700;color:var(--mahogany);margin-bottom:4px} .iho .iho-header h2{font-size:.875rem;font-weight:400;color:var(--muted);line-height:1.5} .iho .modal-form{margin-bottom:12px} .iho .modal-form label{display:block;font-size:.8125rem;font-weight:500;color:var(--label);margin-bottom:4px} .iho .modal-form .form-control,.iho .form-control{ height:44px;border:1.5px solid var(--border)!important;border-radius:var(--r-input)!important; padding:10px 14px;font-family:var(--font);font-size:.875rem;color:var(--mahogany);background:var(--white) } .iho .modal-form .form-control:focus,.iho .form-control:focus{ border-color:var(--fiery)!important;box-shadow:0 0 0 3px rgba(252,90,53,.12)!important } /* Darker placeholder text in e-card modal */ .iho .form-control::placeholder, .iho .modal-form .form-control::placeholder, .iho .recipient-delivery input::placeholder, .iho .honoreeinput::placeholder{ color:var(--clay)!important;opacity:1!important } .iho .form-control::-webkit-input-placeholder, .iho .modal-form .form-control::-webkit-input-placeholder{color:var(--clay)!important;opacity:1!important} .iho .form-control:-ms-input-placeholder, .iho .modal-form .form-control:-ms-input-placeholder{color:var(--clay)!important;opacity:1!important} .iho .honoreeinput{height:auto!important;min-height:100px;resize:vertical} /* Radio buttons in delivery tab — override Bootstrap custom-control */ .iho .custom-control{margin-bottom:12px;padding-left:0!important;display:flex!important;align-items:center;gap:8px} .iho .custom-control .custom-control-input{ position:static!important;margin:0!important; accent-color:var(--fiery);width:18px;height:18px;min-width:18px;cursor:pointer; opacity:1!important;z-index:auto!important } .iho .custom-control .custom-control-label{ position:static!important;padding-left:0!important; font-size:.875rem;color:var(--body);cursor:pointer;margin:0!important; line-height:1.4 } .iho .custom-control .custom-control-label::before, .iho .custom-control .custom-control-label::after{display:none!important} /* Recipient input wrapper — hide the envelope icon */ .iho .recipient-delivery .input-wrapper .preinput, .iho .recipient-delivery .input-field-container .preinput{display:none!important} .iho .recipient-select{margin:16px 0!important} /* Recipient fields */ .iho .recipient-delivery{margin-top:16px;display:flex;flex-direction:column;gap:12px} .iho .recipient-delivery input, .iho .recipient-delivery .recipientFullName input{ width:100%;height:44px;border:1.5px solid var(--border)!important;border-radius:var(--r-input)!important; padding:10px 14px!important;font-family:var(--font);font-size:.875rem;color:var(--mahogany); background:var(--white) } .iho .recipient-delivery input:focus{border-color:var(--fiery)!important;box-shadow:0 0 0 3px rgba(252,90,53,.12)!important} /* Hide FontAwesome envelope icon next to email field */ .iho .input-field-container .fa-envelope{display:none!important} .iho .input-field-container{position:relative} .iho .input-field-container .preinput{display:none!important} /* E-card preview */ #ecardpreview{margin-top:16px;text-align:center} .iho .select-country{ height:44px;border:1.5px solid var(--border);border-radius:var(--r-input); padding:0 12px;font-size:.875rem;background:var(--seashell);cursor:pointer } /* Modal backdrop */ .modal-backdrop{background:rgba(74,14,0,.3)} /* Meshulam CC Modal */ #meshulm_cc .modal-body{padding:0} .meshulam_iframe{width:100%;min-height:400px;border:none} .ccframe-holder{width:100%;height:50px;overflow:hidden;position:relative} .ccframe{width:100%;height:100%;border:0;position:relative} .ccframe-cover-bar{position:absolute;top:0;left:0;width:100%;height:100%;cursor:pointer;z-index:1000} /* ============================================================ STRIPE PAYMENT ELEMENT ============================================================ */ #stripePaymentForm{padding-top:10px} #payment-element{margin-bottom:20px;padding-bottom:10px;border-bottom:1px solid var(--border-lt)} /* ============================================================ TAX STATUS — old div hidden; new .tax-banner in form card ============================================================ */ .taxstatus{display:none!important} #taxstatusfull_old{display:none!important} /* Sidebar .landing-tax — hidden (tax info now in form card) */ .landing-tax{display:none!important} /* Tax-deductible banner */ .tax-banner{margin-bottom:16px;line-height:1.4!important} .tax-banner svg{display:none} .tax-banner-text{ display:block!important; font-size:.7125rem!important;font-weight:600!important;color:var(--muted)!important; text-transform:uppercase;letter-spacing:.06em;line-height:1.4!important } /* ============================================================ CARD LAYOUT (step structure) ============================================================ */ .card{background:transparent;border:none;box-shadow:none;display:block!important;flex-direction:initial!important} .card-header{background:transparent;border:none;padding:0;display:block;width:100%} .card-body.donate-form-body{padding:0} /* Tabs content */ .tab-content>.tab-pane{display:none} .tab-content>.tab-pane.show.active{display:block} .tab-content>.tab-pane.active{display:block} /* Override for pills-card which is shown/hidden by JS */ #pills-card{display:none} #pills-card.active-step{display:block} /* ============================================================ SALUTATION — hidden by default (FOUC rule above); JS can show via .show() ============================================================ */ /* ============================================================ REWARDS / JRAISE / 2-STAGE CURRENCY ============================================================ */ .pfprewards{font-size:1rem;font-weight:700;color:var(--mahogany);margin-bottom:4px;text-align:center} .pfprewards_desc{font-size:.8125rem;color:var(--muted);margin-bottom:12px;text-align:center} #divRewards{text-align:center;width:100%} /* Reward / 2-stage currency section — clean card design */ #divForRewards{ display:block; background:var(--seashell)!important;border:none!important; border-radius:var(--r-input)!important;padding:14px 16px!important;margin-bottom:12px!important; width:100%;text-align:center } #divForRewards:empty, #divForRewards.is-empty{display:none!important} /* Hide if it has no rendered children (no #reward-currency or #divRewards visible content) */ #divForRewards:not(:has(#reward-currency)):not(:has(.pfprewards:not(:empty))){display:none!important} /* Rewards block (when JRaise/JoinMe) */ #divRewards{margin-bottom:10px;text-align:center} .pfprewards{font-size:1rem;font-weight:700;color:var(--mahogany);margin-bottom:4px} .pfprewards_desc{font-size:.8125rem;color:var(--muted);margin-bottom:8px} /* Currency block — single horizontal row, centered */ #reward-currency{ display:flex!important;flex-direction:row!important;align-items:center;justify-content:center; gap:14px;width:100%;flex-wrap:wrap } .reward-amount-line{ display:inline-flex!important;align-items:baseline;justify-content:center;gap:6px; font-size:.9375rem;font-weight:600;color:var(--mahogany); white-space:nowrap } .reward-label{font-weight:500;color:var(--muted)} .reward-amount{font-weight:700;color:var(--mahogany);font-size:1.25rem} .reward-month{font-size:.75rem;color:var(--muted);font-weight:500} .reward-currency-line{ display:inline-flex!important;justify-content:center;align-items:center } /* Currency dropdown — match design system (same as .tip-select) */ #reward-currency #currency, #once-op #currency, #monthly-op #currency, #yearly-op #currency{ appearance:none!important;-webkit-appearance:none!important; height:44px!important;min-width:180px!important;width:auto; border:1.5px solid var(--border)!important;border-radius:var(--r-input)!important; padding:0 30px 0 14px!important;font-family:var(--font)!important; font-size:.875rem!important;font-weight:500!important; color:var(--mahogany)!important; background:var(--white) 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 d='M1 1L5 5L9 1' stroke='%234a0e00' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat calc(100% - 12px) center!important; cursor:pointer;outline:none;margin:0!important } #reward-currency #currency:focus, #once-op #currency:focus, #monthly-op #currency:focus, #yearly-op #currency:focus{border-color:var(--fiery)!important;box-shadow:0 0 0 3px rgba(252,90,53,.12)!important} /* ============================================================ HERO AREA — repurposed for new two-column layout The .donate-hero wraps sidebar + form. ============================================================ */ .donate-hero{padding:0} .donate-hero .row{margin:0} /* ============================================================ MISCELLANEOUS UTILITY ============================================================ */ .clearfix::after{content:'';display:table;clear:both} .clear{clear:both} .fullwidth{width:100%} .postHide,.postHide1{/* JS controls these */} .text-center{text-align:center} .text-left{text-align:left} .mb-3{margin-bottom:1rem} .mt-1{margin-top:.25rem} .mt-2{margin-top:.5rem} .mt-4{margin-top:1.5rem} .mb-2{margin-bottom:.5rem} .mb15{margin-bottom:15px} .mr-2{margin-right:.5rem} .px-4{padding-left:1.5rem;padding-right:1.5rem} .px-5{padding-left:3rem;padding-right:3rem} .my-4{margin-top:1.5rem;margin-bottom:1.5rem} .w-100{width:100%} .d-lg-none{display:none} .inline{display:inline} .nopaddingleft{padding-left:0} /* Hide elements not needed in new design */ #languagebanner{display:none!important} #navbar{display:none!important} footer{display:none!important} #loading{display:none} /* PCI section in sidebar */ .pci{font-size:.75rem;color:var(--muted)} .pciexplain{font-size:.75rem;color:var(--muted);line-height:1.5} .pci h3{font-size:.8125rem;font-weight:700;color:var(--mahogany);margin-bottom:4px} .pci img.imgcenter{max-width:80px;margin-top:8px} /* Dropdown styling */ .dropdown-menu{ background:var(--white);border:1px solid var(--border-lt);border-radius:12px; box-shadow:var(--shadow);padding:4px;min-width:120px } .dropdown-item{ display:block;padding:6px 12px;font-size:.8125rem;color:var(--body); text-decoration:none;border-radius:8px;cursor:pointer } .dropdown-item:hover{background:var(--seashell);color:var(--mahogany)} /* ============================================================ RESPONSIVE ============================================================ */ @media(max-width:767px){ .col-md-3{display:none} .col-md-6{width:100%;max-width:100%;padding:0} .side-by-side{padding:0!important} } @media(min-width:768px){ .col-md-3{flex:0 0 25%;max-width:25%} .col-md-6{flex:0 0 50%;max-width:50%} } /* Row/Col (Bootstrap grid compat) */ .row{display:flex;flex-wrap:wrap;margin-left:-15px;margin-right:-15px} .col,.col-md-3,.col-md-6,.col-sm-12,.col-xs-12{position:relative;width:100%;padding-right:15px;padding-left:15px} .col-12{flex:0 0 100%;max-width:100%} /* Col padding helpers */ .padright{padding-right:8px} .nopad{padding:0} .mobpadsidesmall{padding-left:8px;padding-right:8px} .mobpadtopsmall{padding-top:8px} .columnpadding{padding:0 15px} /* ============================================================ ANIMATIONS ============================================================ */ @keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}} @keyframes fadeDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}} /* ============================================================ INTL TEL INPUT OVERRIDES ============================================================ */ .iti{width:100%} .iti .iti__flag-container{z-index:2} /* ============================================================ DOUBLE THE DONATION OVERRIDES — leave alone ============================================================ */ /* ============================================================ FEATHERLIGHT (3DS popup) OVERRIDES ============================================================ */ .featherlight .featherlight-content{border-radius:var(--r-card);overflow:hidden} /* ============================================================ RECAPTCHA BADGE — hidden (runs silently in background) ============================================================ */ .grecaptcha-badge{visibility:hidden!important;opacity:0!important;position:fixed!important;bottom:-100px!important} /* ============================================================ IN-PAGE ALERT SYSTEM Replaces native window.alert() popups. Two surfaces: - .alert-banner : form-top stack of error messages - .field-error : inline message under a specific input ============================================================ */ .alert-banner{ margin:0 16px 12px; padding:0; border-radius:10px; background:#fff5f3; border:1px solid #f0c2bc; color:#a83025; font-family:var(--font); animation:alertSlide .25s ease; } .alert-banner[hidden]{display:none} /* When the banner is rendered inside a modal/popup, it sits flush in the modal-body padding — drop the side margins inherited from the page-level banner placement. */ .alert-banner.alert-banner-in-modal{margin:0 0 14px} .alert-banner-content{ display:flex; align-items:flex-start; gap:10px; padding:12px 14px; } .alert-banner-icon{flex-shrink:0;margin-top:2px;color:#c63d2f} .alert-banner-messages{flex:1;font-size:.875rem;line-height:1.45} .alert-banner-messages > div + div{ margin-top:6px;padding-top:6px; border-top:1px dashed #e8b8b1; } .alert-banner-close{ flex-shrink:0;background:none;border:0;padding:4px;margin:-4px; color:inherit;opacity:.55;cursor:pointer;border-radius:4px;line-height:0; transition:opacity .15s ease, background-color .15s ease; } .alert-banner-close:hover{opacity:1;background:rgba(0,0,0,.05)} .alert-banner-close:focus-visible{ outline:2px solid #c63d2f;outline-offset:1px;opacity:1; } /* Inline field-level errors */ .field-error{ font-size:.75rem; color:#d63020; margin-top:4px; font-family:var(--font); line-height:1.3; animation:alertSlide .2s ease; } .field-error-on{border-color:#d63020 !important} .field-error-on:focus, .field-error-on:focus-visible{ border-color:#d63020 !important; box-shadow:0 0 0 3px rgba(214,48,32,.12) !important; } @keyframes alertSlide{ from{opacity:0;transform:translateY(-4px)} to{opacity:1;transform:translateY(0)} } /* ============================================================ PRINT ============================================================ */ @media print{ .trust-bar,.sticky,.landing-sidebar{display:none} .form-card{box-shadow:none;border:1px solid #ddd} } /* "Other amount" field — hide the /m, /y suffix. Redundant with the frequency tabs above, and in Hebrew RTL it overlaps the right-aligned "סכום" placeholder. */ #otherAmountBtnText #showPerMonth, #otherAmountBtnText #showPerYear { display: none !important; }