.elementor-19260 .elementor-element.elementor-element-e21d93e{--display:flex;}.elementor-19260 .elementor-element.elementor-element-8ae740d{--display:flex;}.elementor-19260 .elementor-element.elementor-element-ee7af20 .gk-gravity-form{text-align:left;}.elementor-19260 .elementor-element.elementor-element-0483c31{--spacer-size:87px;}.elementor-19260 .elementor-element.elementor-element-ffb9a43{--display:flex;}.elementor-19260 .elementor-element.elementor-element-203f1b2 .gk-gravity-form{text-align:left;}.elementor-19260 .elementor-element.elementor-element-5d6d339{--spacer-size:86px;}.elementor-19260 .elementor-element.elementor-element-841d961{--display:flex;}.elementor-19260 .elementor-element.elementor-element-78b0a5e .gk-gravity-form{text-align:left;}.elementor-19260 .elementor-element.elementor-element-0555f93{--spacer-size:114px;}.elementor-19260 .elementor-element.elementor-element-9df08d9{--display:flex;}.elementor-19260 .elementor-element.elementor-element-8dcf993 .gk-gravity-form{text-align:left;}.elementor-19260 .elementor-element.elementor-element-a996c42{--spacer-size:104px;}.elementor-19260 .elementor-element.elementor-element-3b2da37{--display:flex;}.elementor-19260 .elementor-element.elementor-element-f006e31 .gk-gravity-form{text-align:left;}/* Start custom CSS for container, class: .elementor-element-e21d93e *//* ========================================================= LUTHERAN MEDIA – BULK ORDER FORMS Forms 16–20 16 – Replenish 17 – Booklet Bonanza 18 – Sample Pack 19 – Lutheran Media Essentials 20 – Hope for Kids ========================================================= */ /* ========================================================= GLOBAL FORM VARIABLES ========================================================= */ .gform-theme--framework:is( #gform_wrapper_16, #gform_wrapper_17, #gform_wrapper_18, #gform_wrapper_19, #gform_wrapper_20 ) { --lm-green: #b5be00; --lm-green-dark: #9da500; --lm-green-soft: #f5f7df; --lm-text: #202326; --lm-muted: #6b7075; --lm-border: #dcded7; --lm-border-dark: #c7cabf; --lm-bg: #ffffff; --lm-bg-soft: #f7f8f5; --lm-radius: 8px; --lm-radius-large: 12px; --lm-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 5px 18px rgba(0, 0, 0, 0.04); color: var(--lm-text); } /* ========================================================= FORM / FIELD BASICS ========================================================= */ .gform-theme--framework:is( #gform_wrapper_16, #gform_wrapper_17, #gform_wrapper_18, #gform_wrapper_19, #gform_wrapper_20 ) .gform_body { font-size: 16px; line-height: 1.5; } .gform-theme--framework:is( #gform_wrapper_16, #gform_wrapper_17, #gform_wrapper_18, #gform_wrapper_19, #gform_wrapper_20 ) .gform_fields { row-gap: 24px; } .gform-theme--framework:is( #gform_wrapper_16, #gform_wrapper_17, #gform_wrapper_18, #gform_wrapper_19, #gform_wrapper_20 ) .gfield_label { color: var(--lm-text); font-size: 16px; font-weight: 700; line-height: 1.3; } .gform-theme--framework:is( #gform_wrapper_16, #gform_wrapper_17, #gform_wrapper_18, #gform_wrapper_19, #gform_wrapper_20 ) .gfield_required { color: var(--lm-green-dark); } .gform-theme--framework:is( #gform_wrapper_16, #gform_wrapper_17, #gform_wrapper_18, #gform_wrapper_19, #gform_wrapper_20 ) .gfield_description { color: var(--lm-muted); font-size: 14px; line-height: 1.5; margin-top: 6px; } .gform-theme--framework:is( #gform_wrapper_16, #gform_wrapper_17, #gform_wrapper_18, #gform_wrapper_19, #gform_wrapper_20 ) .gfield_choice_limit_message { color: var(--lm-muted); font-size: 14px; font-weight: 600; margin-bottom: 12px; } /* ========================================================= STANDARD INPUTS ========================================================= */ .gform-theme--framework:is( #gform_wrapper_16, #gform_wrapper_17, #gform_wrapper_18, #gform_wrapper_19, #gform_wrapper_20 ) :is( input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select, textarea ) { background: #ffffff; border: 1px solid var(--lm-border-dark); border-radius: var(--lm-radius); color: var(--lm-text); min-height: 46px; transition: border-color 0.18s ease, box-shadow 0.18s ease; } .gform-theme--framework:is( #gform_wrapper_16, #gform_wrapper_17, #gform_wrapper_18, #gform_wrapper_19, #gform_wrapper_20 ) :is( input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select, textarea ):focus { border-color: var(--lm-green) !important; box-shadow: 0 0 0 3px rgba(181, 190, 0, 0.18) !important; outline: none !important; } /* ========================================================= IMAGE CHOICE – BOOKLET CARDS Forms 16, 18, 19, 20 ========================================================= */ .gform-theme--framework:is( #gform_wrapper_16, #gform_wrapper_18, #gform_wrapper_19, #gform_wrapper_20 ) .lm-booklets.gfield--type-image_choice { --gf-field-img-choice-gap: 10px; --gf-field-img-choice-size: 160px; --gf-field-img-choice-aspect-ratio: 1 / 1; --gf-field-img-choice-card-space: 10px; --gf-field-img-choice-radius-square: 8px; --gf-field-img-choice-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); --gf-field-img-choice-shadow-hover: 0 5px 14px rgba(0, 0, 0, 0.12); --gf-field-img-choice-card-check-ind-bg-color: var(--lm-green); --gf-field-img-choice-card-check-ind-icon-color: #202326; --gf-field-img-choice-check-ind-size: 26px; --gf-field-img-choice-check-ind-icon-size: 13px; --gf-ctrl-choice-size: 18px; --gf-ctrl-checkbox-check-size: 12px; --gf-ctrl-label-font-size-secondary: 13px; --gf-ctrl-color: var(--lm-text); } .gform-theme--framework:is( #gform_wrapper_16, #gform_wrapper_18, #gform_wrapper_19, #gform_wrapper_20 ) .lm-booklets .gfield_checkbox { align-items: stretch !important; display: flex !important; flex-wrap: wrap !important; gap: 10px !important; } .gform-theme--framework:is( #gform_wrapper_16, #gform_wrapper_18, #gform_wrapper_19, #gform_wrapper_20 ) .lm-booklets .gchoice { box-sizing: border-box; display: flex !important; transition: transform 0.18s ease, box-shadow 0.18s ease; width: 160px !important; } .gform-theme--framework:is( #gform_wrapper_16, #gform_wrapper_18, #gform_wrapper_19, #gform_wrapper_20 ) .lm-booklets .gchoice:hover { transform: translateY(-2px); } .gform-theme--framework:is( #gform_wrapper_16, #gform_wrapper_18, #gform_wrapper_19, #gform_wrapper_20 ) .lm-booklets .gchoice:has(input:checked) .gfield-image-choice-wrapper-outer { outline: 2px solid var(--lm-green); outline-offset: 2px; } /* Equal-height card */ .gform-theme--framework:is( #gform_wrapper_16, #gform_wrapper_18, #gform_wrapper_19, #gform_wrapper_20 ) .lm-booklets .gfield-image-choice-wrapper-outer { box-sizing: border-box; display: flex !important; flex-direction: column; height: 230px !important; width: 100% !important; } /* Square image */ .gform-theme--framework:is( #gform_wrapper_16, #gform_wrapper_18, #gform_wrapper_19, #gform_wrapper_20 ) .lm-booklets .gfield-choice-image-wrapper { aspect-ratio: 1 / 1 !important; box-sizing: border-box; flex: 0 0 138px !important; height: 138px !important; overflow: hidden; width: 138px !important; } .gform-theme--framework:is( #gform_wrapper_16, #gform_wrapper_18, #gform_wrapper_19, #gform_wrapper_20 ) .lm-booklets .gfield-choice-image-wrapper img { display: block; height: 100% !important; object-fit: cover !important; object-position: center; width: 100% !important; } /* Checkbox + title area */ .gform-theme--framework:is( #gform_wrapper_16, #gform_wrapper_18, #gform_wrapper_19, #gform_wrapper_20 ) .lm-booklets .gfield-image-choice-wrapper-inner { align-items: flex-start !important; box-sizing: border-box; color: var(--lm-text); display: flex !important; flex: 1 1 auto; font-weight: 600; gap: 9px !important; line-height: 1.3; min-height: 68px !important; padding-top: 10px; width: 100%; } .gform-theme--framework:is( #gform_wrapper_16, #gform_wrapper_18, #gform_wrapper_19, #gform_wrapper_20 ) .lm-booklets .gfield-image-choice-wrapper-inner label { box-sizing: border-box; flex: 1 1 auto; font-size: 13px !important; line-height: 1.3 !important; margin: 0 !important; padding: 0 !important; width: auto !important; } /* Square booklet checkboxes */ .gform-theme--framework:is( #gform_wrapper_16, #gform_wrapper_18, #gform_wrapper_19, #gform_wrapper_20 ) .lm-booklets input.gfield-choice-input[type="checkbox"] { aspect-ratio: 1 / 1 !important; border-radius: 2px !important; box-sizing: border-box !important; flex: 0 0 18px !important; height: 18px !important; margin: 1px 0 0 0 !important; max-height: 18px !important; max-width: 18px !important; min-height: 18px !important; min-width: 18px !important; padding: 0 !important; width: 18px !important; } .gform-theme--framework:is( #gform_wrapper_16, #gform_wrapper_18, #gform_wrapper_19, #gform_wrapper_20 ) .lm-booklets input.gfield-choice-input[type="checkbox"]:checked { accent-color: var(--lm-green); } /* ========================================================= BOOKLET IMAGE CHOICE – SELECT ALL / CLEAR ALL ========================================================= */ :is( #gform_wrapper_16, #gform_wrapper_18, #gform_wrapper_19, #gform_wrapper_20 ) .lm-booklet-choice-controls { display: flex; justify-content: flex-start; margin: 0 0 12px; } :is( #gform_wrapper_16, #gform_wrapper_18, #gform_wrapper_19, #gform_wrapper_20 ) .lm-booklet-select-all { appearance: none; background: #b5be00 !important; border: 1px solid #b5be00 !important; border-radius: 7px; box-shadow: none !important; color: #202326 !important; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 700; line-height: 1.2; padding: 9px 14px; transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease; } :is( #gform_wrapper_16, #gform_wrapper_18, #gform_wrapper_19, #gform_wrapper_20 ) .lm-booklet-select-all:hover { background: #9da500 !important; border-color: #9da500 !important; transform: translateY(-1px); } :is( #gform_wrapper_16, #gform_wrapper_18, #gform_wrapper_19, #gform_wrapper_20 ) .lm-booklet-select-all.is-clear { background: #ffffff !important; border-color: #b5be00 !important; color: #4f5458 !important; } :is( #gform_wrapper_16, #gform_wrapper_18, #gform_wrapper_19, #gform_wrapper_20 ) .lm-booklet-select-all.is-clear:hover { background: #f5f7df !important; } /* ========================================================= RADIO / CHECKBOX OPTIONS Shipping / Click & Collect / Yes-No etc. ========================================================= */ .gform-theme--framework:is( #gform_wrapper_16, #gform_wrapper_17, #gform_wrapper_18, #gform_wrapper_19, #gform_wrapper_20 ) :is(.gfield_radio, .gfield_checkbox) { gap: 10px; } .gform-theme--framework:is( #gform_wrapper_16, #gform_wrapper_17, #gform_wrapper_18, #gform_wrapper_19, #gform_wrapper_20 ) :is(.lm-delivery, .lm-greeting-cards) .gchoice { background: var(--lm-bg); border: 1px solid var(--lm-border); border-radius: var(--lm-radius); padding: 12px 14px; transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; } .gform-theme--framework:is( #gform_wrapper_16, #gform_wrapper_17, #gform_wrapper_18, #gform_wrapper_19, #gform_wrapper_20 ) :is(.lm-delivery, .lm-greeting-cards) .gchoice:hover { background: var(--lm-green-soft); border-color: var(--lm-green); } .gform-theme--framework:is( #gform_wrapper_16, #gform_wrapper_17, #gform_wrapper_18, #gform_wrapper_19, #gform_wrapper_20 ) :is(.lm-delivery, .lm-greeting-cards) .gchoice:has(input:checked) { background: var(--lm-green-soft); border-color: var(--lm-green); box-shadow: 0 0 0 1px var(--lm-green); } /* ========================================================= FIXED-PRICE PRODUCT FIELDS Paid extras look like fixed information rather than customer-editable price fields. Suggested Donation is excluded. ========================================================= */ .gform-theme--framework:is( #gform_wrapper_16, #gform_wrapper_18, #gform_wrapper_19, #gform_wrapper_20 ) .gfield--type-product.gfield--input-type-singleproduct:not(.lm-suggested-donation):not(.gf_invisible) .ginput_container_singleproduct { align-items: center; display: flex; flex-wrap: wrap; gap: 7px; } .gform-theme--framework:is( #gform_wrapper_16, #gform_wrapper_18, #gform_wrapper_19, #gform_wrapper_20 ) .gfield--type-product.gfield--input-type-singleproduct:not(.lm-suggested-donation):not(.gf_invisible) .ginput_product_price_label { color: var(--lm-muted); font-size: 14px; font-weight: 600; } .gform-theme--framework:is( #gform_wrapper_16, #gform_wrapper_18, #gform_wrapper_19, #gform_wrapper_20 ) .gfield--type-product.gfield--input-type-singleproduct:not(.lm-suggested-donation):not(.gf_invisible) .ginput_product_price { background: var(--lm-green-soft) !important; border: 1px solid rgba(181, 190, 0, 0.55) !important; border-radius: 999px !important; box-shadow: none !important; color: var(--lm-text) !important; cursor: default !important; font-size: 14px !important; font-weight: 800 !important; height: auto !important; max-width: 110px !important; min-height: 0 !important; padding: 6px 11px !important; pointer-events: none; width: auto !important; } .gform-theme--framework:is( #gform_wrapper_16, #gform_wrapper_18, #gform_wrapper_19, #gform_wrapper_20 ) .gfield--type-product.gfield--input-type-singleproduct:not(.lm-suggested-donation):not(.gf_invisible) .ginput_product_price:focus { border-color: rgba(181, 190, 0, 0.55) !important; box-shadow: none !important; outline: none !important; } /* Form 20 – explain what one $35 quantity represents */ #gform_wrapper_20 .gfield--type-product.gfield--input-type-singleproduct:not(.lm-suggested-donation) .ginput_container_singleproduct::after { color: var(--lm-muted); content: "per pack of 10 show bags"; font-size: 13px; font-weight: 600; } /* Form 17 – hide the informational $0 Product price */ #gform_wrapper_17 .gfield--type-product.gfield--input-type-singleproduct .ginput_product_price_label, #gform_wrapper_17 .gfield--type-product.gfield--input-type-singleproduct .ginput_product_price { display: none !important; } #gform_wrapper_17 .gfield--type-product.gfield--input-type-singleproduct .ginput_container_singleproduct::after { color: #4f5458; content: "90 booklets · suggested donation $135.00"; display: block; font-size: 15px; font-weight: 700; line-height: 1.4; margin-top: 6px; } /* ========================================================= HOPE FOR KIDS QUANTITY ========================================================= */ .gform-theme--framework#gform_wrapper_20 .lm-showbag-qty { background: var(--lm-bg-soft); border: 1px solid var(--lm-border); border-radius: var(--lm-radius-large); padding: 18px; } .gform-theme--framework#gform_wrapper_20 .lm-showbag-qty input { font-size: 18px; font-weight: 700; max-width: 130px; text-align: center; } /* ========================================================= SUGGESTED DONATION – BOOKLETS ONLY ========================================================= */ :is( #gform_wrapper_16, #gform_wrapper_17, #gform_wrapper_18, #gform_wrapper_19, #gform_wrapper_20 ) .lm-suggested-donation .ginput_amount { background: #ffffff !important; border: 1px solid #c7cabf !important; border-radius: 8px !important; box-shadow: none !important; color: #202326 !important; font-size: 18px !important; font-weight: 700 !important; max-width: 220px; } :is( #gform_wrapper_16, #gform_wrapper_17, #gform_wrapper_18, #gform_wrapper_19, #gform_wrapper_20 ) .lm-suggested-donation .ginput_amount:focus { border-color: #b5be00 !important; box-shadow: 0 0 0 3px rgba(181, 190, 0, 0.16) !important; outline: none !important; } :is( #gform_wrapper_16, #gform_wrapper_17, #gform_wrapper_18, #gform_wrapper_19, #gform_wrapper_20 ) .lm-donation-breakdown { color: #6b7075; font-size: 14px; line-height: 1.5; margin-top: 8px; } :is( #gform_wrapper_16, #gform_wrapper_17, #gform_wrapper_18, #gform_wrapper_19, #gform_wrapper_20 ) :is( .lm-donation-calculation, .lm-donation-note ) { color: #6b7075; font-size: 14px; line-height: 1.5; margin-top: 3px; } :is( #gform_wrapper_16, #gform_wrapper_17, #gform_wrapper_18, #gform_wrapper_19, #gform_wrapper_20 ) .lm-use-suggested-donation { appearance: none; background: #b5be00 !important; border: 1px solid #b5be00 !important; border-radius: 7px; box-shadow: none !important; color: #202326 !important; cursor: pointer; display: inline-block; font-family: inherit; font-size: 13px; font-weight: 700; line-height: 1.2; margin-top: 10px; padding: 9px 14px; text-decoration: none !important; transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease; } :is( #gform_wrapper_16, #gform_wrapper_17, #gform_wrapper_18, #gform_wrapper_19, #gform_wrapper_20 ) .lm-use-suggested-donation:hover { background: #9da500 !important; border-color: #9da500 !important; color: #202326 !important; transform: translateY(-1px); } :is( #gform_wrapper_16, #gform_wrapper_17, #gform_wrapper_18, #gform_wrapper_19, #gform_wrapper_20 ) .lm-use-suggested-donation:focus { outline: 3px solid rgba(181, 190, 0, 0.22); outline-offset: 2px; } /* ========================================================= SECTION BREAKS ========================================================= */ .gform-theme--framework:is( #gform_wrapper_16, #gform_wrapper_17, #gform_wrapper_18, #gform_wrapper_19, #gform_wrapper_20 ) .gsection { border-bottom: 2px solid var(--lm-green); margin-top: 10px; padding-bottom: 10px; } .gform-theme--framework:is( #gform_wrapper_16, #gform_wrapper_17, #gform_wrapper_18, #gform_wrapper_19, #gform_wrapper_20 ) .gsection_title { color: var(--lm-text); font-size: 23px; font-weight: 800; margin: 0; } /* ========================================================= MULTI-PAGE PROGRESS BAR ========================================================= */ .gform-theme--framework:is( #gform_wrapper_16, #gform_wrapper_17, #gform_wrapper_18, #gform_wrapper_19, #gform_wrapper_20 ) .gf_progressbar_wrapper { --gf-field-pg-prog-margin-y-end: 34px; } .gform-theme--framework:is( #gform_wrapper_16, #gform_wrapper_17, #gform_wrapper_18, #gform_wrapper_19, #gform_wrapper_20 ) .gf_progressbar_title { --gf-field-pg-prog-color: var(--lm-text); --gf-field-pg-prog-font-size: 14px; --gf-field-pg-prog-font-weight: 700; } .gform-theme--framework:is( #gform_wrapper_16, #gform_wrapper_17, #gform_wrapper_18, #gform_wrapper_19, #gform_wrapper_20 ) .gf_progressbar { --gf-field-pg-prog-bar-bg-color: #e6e8e2; --gf-field-pg-prog-bar-height: 9px; --gf-field-pg-prog-bar-radius: 999px; } .gform-theme--framework:is( #gform_wrapper_16, #gform_wrapper_17, #gform_wrapper_18, #gform_wrapper_19, #gform_wrapper_20 ) .gf_progressbar_percentage { background: var(--lm-green) !important; } /* ========================================================= NEXT / BACK / SUBMIT BUTTONS ========================================================= */ .gform-theme--framework:is( #gform_wrapper_16, #gform_wrapper_17, #gform_wrapper_18, #gform_wrapper_19, #gform_wrapper_20 ) :is( .gform_next_button, .gform_button ) { background: var(--lm-green) !important; border: 1px solid var(--lm-green) !important; border-radius: var(--lm-radius) !important; box-shadow: none !important; color: #202326 !important; cursor: pointer; font-size: 15px !important; font-weight: 800 !important; min-height: 46px; padding: 11px 22px !important; transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease !important; } .gform-theme--framework:is( #gform_wrapper_16, #gform_wrapper_17, #gform_wrapper_18, #gform_wrapper_19, #gform_wrapper_20 ) :is( .gform_next_button, .gform_button ):hover { background: var(--lm-green-dark) !important; border-color: var(--lm-green-dark) !important; transform: translateY(-1px); } .gform-theme--framework:is( #gform_wrapper_16, #gform_wrapper_17, #gform_wrapper_18, #gform_wrapper_19, #gform_wrapper_20 ) .gform_previous_button { background: #ffffff !important; border: 1px solid var(--lm-border-dark) !important; border-radius: var(--lm-radius) !important; box-shadow: none !important; color: var(--lm-text) !important; font-size: 15px !important; font-weight: 700 !important; min-height: 46px; padding: 11px 22px !important; } .gform-theme--framework:is( #gform_wrapper_16, #gform_wrapper_17, #gform_wrapper_18, #gform_wrapper_19, #gform_wrapper_20 ) .gform_previous_button:hover { background: var(--lm-bg-soft) !important; border-color: var(--lm-text) !important; } /* ========================================================= PAGE FOOTER ========================================================= */ .gform-theme--framework:is( #gform_wrapper_16, #gform_wrapper_17, #gform_wrapper_18, #gform_wrapper_19, #gform_wrapper_20 ) :is( .gform_page_footer, .gform_footer ) { border-top: 1px solid var(--lm-border); margin-top: 34px; padding-top: 24px; } /* ========================================================= "HERE'S YOUR ORDER" SUMMARY ========================================================= */ .gform-theme--framework:is( #gform_wrapper_16, #gform_wrapper_17, #gform_wrapper_18, #gform_wrapper_19, #gform_wrapper_20 ) #lm-order-summary { background: var(--lm-bg-soft); border: 1px solid var(--lm-border); border-left: 5px solid var(--lm-green); border-radius: var(--lm-radius-large); box-shadow: var(--lm-shadow); margin: 6px 0 28px; padding: 24px; } /* Main "Here's your order" heading */ .gform-theme--framework:is( #gform_wrapper_16, #gform_wrapper_17, #gform_wrapper_18, #gform_wrapper_19, #gform_wrapper_20 ) #lm-order-summary h3 { color: var(--lm-text); font-size: 24px; font-weight: 800; line-height: 1.2; margin: 0 0 20px; } /* ========================================================= SUMMARY – BOOKLETS / EXTRA ITEMS SECTIONS ========================================================= */ .gform-theme--framework:is( #gform_wrapper_16, #gform_wrapper_17, #gform_wrapper_18, #gform_wrapper_19, #gform_wrapper_20 ) .lm-summary-section { margin-top: 22px; } .gform-theme--framework:is( #gform_wrapper_16, #gform_wrapper_17, #gform_wrapper_18, #gform_wrapper_19, #gform_wrapper_20 ) .lm-summary-section:first-child { margin-top: 0; } /* BOOKLETS / EXTRA ITEMS little headings */ .gform-theme--framework:is( #gform_wrapper_16, #gform_wrapper_17, #gform_wrapper_18, #gform_wrapper_19, #gform_wrapper_20 ) .lm-summary-section-title { color: var(--lm-text); font-size: 13px; font-weight: 800; letter-spacing: 0.055em; line-height: 1.2; margin: 0 0 12px; text-transform: uppercase; } /* Divider before extras */ .gform-theme--framework:is( #gform_wrapper_16, #gform_wrapper_17, #gform_wrapper_18, #gform_wrapper_19, #gform_wrapper_20 ) .lm-summary-extras { border-top: 1px solid var(--lm-border); padding-top: 18px; } /* ========================================================= SUMMARY – BOOKLET COUNT ========================================================= */ .gform-theme--framework:is( #gform_wrapper_16, #gform_wrapper_17, #gform_wrapper_18, #gform_wrapper_19, #gform_wrapper_20 ) .lm-summary-count { border-bottom: 1px solid var(--lm-border); color: var(--lm-text); font-size: 15px; margin-bottom: 14px; padding-bottom: 12px; } /* ========================================================= SUMMARY – BOOKLET LIST ========================================================= */ .gform-theme--framework:is( #gform_wrapper_16, #gform_wrapper_17, #gform_wrapper_18, #gform_wrapper_19, #gform_wrapper_20 ) .lm-summary-items { display: flex; flex-direction: column; gap: 5px; } .gform-theme--framework:is( #gform_wrapper_16, #gform_wrapper_17, #gform_wrapper_18, #gform_wrapper_19, #gform_wrapper_20 ) :is( .lm-summary-item, .lm-summary-extra ) { align-items: baseline; display: flex; font-size: 15px; gap: 6px; line-height: 1.4; } .gform-theme--framework:is( #gform_wrapper_16, #gform_wrapper_17, #gform_wrapper_18, #gform_wrapper_19, #gform_wrapper_20 ) .lm-summary-qty { color: var(--lm-text); flex: 0 0 auto; font-weight: 800; } .gform-theme--framework:is( #gform_wrapper_16, #gform_wrapper_17, #gform_wrapper_18, #gform_wrapper_19, #gform_wrapper_20 ) .lm-summary-name { min-width: 0; } .gform-theme--framework:is( #gform_wrapper_16, #gform_wrapper_17, #gform_wrapper_18, #gform_wrapper_19, #gform_wrapper_20 ) .lm-summary-extra small { color: var(--lm-muted); font-size: 12px; } /* ========================================================= SUMMARY – BOOKLET DONATION ========================================================= */ .gform-theme--framework:is( #gform_wrapper_16, #gform_wrapper_17, #gform_wrapper_18, #gform_wrapper_19, #gform_wrapper_20 ) .lm-summary-donation { align-items: center; background: var(--lm-green-soft); border: 1px solid rgba(181, 190, 0, 0.38); border-radius: 8px; display: inline-flex; width: auto; gap: 12px; justify-content: flex-start; margin-top: 16px; padding: 11px 13px; } .gform-theme--framework:is( #gform_wrapper_16, #gform_wrapper_17, #gform_wrapper_18, #gform_wrapper_19, #gform_wrapper_20 ) .lm-summary-donation-label { font-weight: 700; } /* ========================================================= SUMMARY – PRICED EXTRA ITEMS ========================================================= */ .gform-theme--framework:is( #gform_wrapper_16, #gform_wrapper_17, #gform_wrapper_18, #gform_wrapper_19, #gform_wrapper_20 ) .lm-summary-priced-extra { align-items: baseline; display: flex; gap: 12px; justify-content: flex-start; padding: 7px 0; } .gform-theme--framework:is( #gform_wrapper_16, #gform_wrapper_17, #gform_wrapper_18, #gform_wrapper_19, #gform_wrapper_20 ) .lm-summary-extra-description { display: flex; gap: 6px; min-width: 0; } .gform-theme--framework:is( #gform_wrapper_16, #gform_wrapper_17, #gform_wrapper_18, #gform_wrapper_19, #gform_wrapper_20 ) .lm-summary-price { color: var(--lm-text); flex: 0 0 auto; font-weight: 800; white-space: nowrap; } .gform-theme--framework:is( #gform_wrapper_16, #gform_wrapper_17, #gform_wrapper_18, #gform_wrapper_19, #gform_wrapper_20 ) .lm-summary-included { color: var(--lm-muted); flex: 0 0 auto; font-size: 13px; font-weight: 700; white-space: nowrap; } /* ========================================================= SUMMARY – SHIPPING ========================================================= */ .gform-theme--framework:is( #gform_wrapper_16, #gform_wrapper_17, #gform_wrapper_18, #gform_wrapper_19, #gform_wrapper_20 ) .lm-summary-shipping { border-top: 1px solid var(--lm-border); color: var(--lm-text); font-size: 14px; font-weight: 700; margin-top: 18px; padding-top: 14px; } /* ========================================================= TOTAL ========================================================= */ .gform-theme--framework:is( #gform_wrapper_16, #gform_wrapper_17, #gform_wrapper_18, #gform_wrapper_19, #gform_wrapper_20 ) .gfield--type-total { --gf-ctrl-label-color-primary: var(--lm-text); --gf-ctrl-label-font-size-primary: 16px; --gf-ctrl-readonly-color: var(--lm-text); --gf-ctrl-readonly-font-size: 28px; --gf-ctrl-readonly-font-weight: 800; background: var(--lm-green-soft); border: 1px solid rgba(181, 190, 0, 0.55); border-radius: var(--lm-radius-large); margin-top: 8px; padding: 18px 20px; } .gform-theme--framework:is( #gform_wrapper_16, #gform_wrapper_17, #gform_wrapper_18, #gform_wrapper_19, #gform_wrapper_20 ) .gfield--type-total .ginput_total { background: transparent !important; border: 0 !important; box-shadow: none !important; height: auto !important; min-height: 0 !important; padding: 0 !important; } /* ========================================================= VALIDATION ========================================================= */ .gform-theme--framework:is( #gform_wrapper_16, #gform_wrapper_17, #gform_wrapper_18, #gform_wrapper_19, #gform_wrapper_20 ) .gfield_error { background: #fff7f5; border-left: 3px solid #c63d27; border-radius: 5px; padding: 12px; } .gform-theme--framework:is( #gform_wrapper_16, #gform_wrapper_17, #gform_wrapper_18, #gform_wrapper_19, #gform_wrapper_20 ) .gform_validation_errors { background: #fff7f5; border: 1px solid #e3aaa1; border-radius: var(--lm-radius); box-shadow: none; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { /* Two Image Choice cards per row */ .gform-theme--framework:is( #gform_wrapper_16, #gform_wrapper_18, #gform_wrapper_19, #gform_wrapper_20 ) .lm-booklets .gchoice { width: calc(50% - 5px) !important; } /* Allow images to scale down gracefully */ .gform-theme--framework:is( #gform_wrapper_16, #gform_wrapper_18, #gform_wrapper_19, #gform_wrapper_20 ) .lm-booklets .gfield-choice-image-wrapper { align-self: center; flex: 0 0 auto !important; height: auto !important; max-width: 138px; width: calc(100% - 20px) !important; } /* Summary */ .gform-theme--framework:is( #gform_wrapper_16, #gform_wrapper_17, #gform_wrapper_18, #gform_wrapper_19, #gform_wrapper_20 ) #lm-order-summary { padding: 18px; } .gform-theme--framework:is( #gform_wrapper_16, #gform_wrapper_17, #gform_wrapper_18, #gform_wrapper_19, #gform_wrapper_20 ) #lm-order-summary h3 { font-size: 21px; } /* Footer buttons */ .gform-theme--framework:is( #gform_wrapper_16, #gform_wrapper_17, #gform_wrapper_18, #gform_wrapper_19, #gform_wrapper_20 ) .gform_page_footer { display: flex; flex-wrap: wrap; gap: 10px; } .gform-theme--framework:is( #gform_wrapper_16, #gform_wrapper_17, #gform_wrapper_18, #gform_wrapper_19, #gform_wrapper_20 ) :is( .gform_next_button, .gform_previous_button, .gform_button ) { flex: 1 1 140px; } /* Total */ .gform-theme--framework:is( #gform_wrapper_16, #gform_wrapper_17, #gform_wrapper_18, #gform_wrapper_19, #gform_wrapper_20 ) .gfield--type-total { --gf-ctrl-readonly-font-size: 24px; padding: 16px; } /* Summary priced rows */ .gform-theme--framework:is( #gform_wrapper_16, #gform_wrapper_17, #gform_wrapper_18, #gform_wrapper_19, #gform_wrapper_20 ) .lm-summary-priced-extra { gap: 12px; } } /* Very small screens */ @media (max-width: 420px) { /* One booklet card per row */ .gform-theme--framework:is( #gform_wrapper_16, #gform_wrapper_18, #gform_wrapper_19, #gform_wrapper_20 ) .lm-booklets .gchoice { width: 100% !important; } .gform-theme--framework:is( #gform_wrapper_16, #gform_wrapper_18, #gform_wrapper_19, #gform_wrapper_20 ) .lm-booklets .gfield-image-choice-wrapper-outer { max-width: 180px; } /* Stack labels/prices if space gets cramped */ .gform-theme--framework:is( #gform_wrapper_16, #gform_wrapper_17, #gform_wrapper_18, #gform_wrapper_19, #gform_wrapper_20 ) :is( .lm-summary-donation, .lm-summary-priced-extra ) { align-items: flex-start; flex-direction: column; gap: 5px; } } /* ========================================================= FIXED PRODUCT PRICES – FORCE LEFT ALIGNMENT ========================================================= */ body .gform-theme--framework:is( #gform_wrapper_16, #gform_wrapper_18, #gform_wrapper_19, #gform_wrapper_20 ) .gfield--type-product.gfield--input-type-singleproduct:not(.lm-suggested-donation):not(.gf_invisible) .ginput_container_singleproduct { /* Gravity Forms can offset the whole price container */ margin-left: 0 !important; margin-inline-start: 0 !important; /* Don't let GF place it in a right-side grid column */ grid-column: 1 / -1 !important; justify-self: start !important; /* Keep Price + amount together on the left */ align-items: center !important; display: flex !important; flex-wrap: wrap !important; gap: 7px !important; justify-content: flex-start !important; width: fit-content !important; max-width: 100% !important; padding-left: 0 !important; padding-inline-start: 0 !important; text-align: left !important; } /* Price: */ body .gform-theme--framework:is( #gform_wrapper_16, #gform_wrapper_18, #gform_wrapper_19, #gform_wrapper_20 ) .gfield--type-product.gfield--input-type-singleproduct:not(.lm-suggested-donation):not(.gf_invisible) .ginput_product_price_label { flex: 0 0 auto !important; margin: 0 !important; padding: 0 !important; text-align: left !important; } /* $10.00 / $20.00 etc */ body .gform-theme--framework:is( #gform_wrapper_16, #gform_wrapper_18, #gform_wrapper_19, #gform_wrapper_20 ) .gfield--type-product.gfield--input-type-singleproduct:not(.lm-suggested-donation):not(.gf_invisible) .ginput_product_price { flex: 0 0 auto !important; margin: 0 !important; margin-left: 0 !important; margin-inline-start: 0 !important; }/* End custom CSS */