.elementor-3181 .elementor-element.elementor-element-1961418{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-3181 .elementor-element.elementor-element-1961418:not(.elementor-motion-effects-element-type-background), .elementor-3181 .elementor-element.elementor-element-1961418 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#EEFAFF96;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-3181 .elementor-element.elementor-element-70576cc{background-color:#FFFFFF;border-style:solid;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-3181 .elementor-element.elementor-element-0a55f9e .elementor-button{background-color:transparent;font-family:"Hind Siliguri", Sans-serif;font-size:16px;font-weight:400;text-transform:capitalize;font-style:normal;text-decoration:none;line-height:1em;letter-spacing:0px;background-image:radial-gradient(at center center, #196D93 0%, #177098 100%);box-shadow:0px 0px 10px 0px rgba(0,0,0,0.5);border-radius:11px 11px 11px 11px;}.elementor-3181 .elementor-element.elementor-element-e7adafa{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3181 .elementor-element.elementor-element-5ae947a{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3181 .elementor-element.elementor-element-ac845a7{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--overlay-opacity:0.5;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:80px;--padding-bottom:70px;--padding-left:0px;--padding-right:0px;}.elementor-3181 .elementor-element.elementor-element-ac845a7:not(.elementor-motion-effects-element-type-background), .elementor-3181 .elementor-element.elementor-element-ac845a7 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#EEFAFF;}.elementor-3181 .elementor-element.elementor-element-ac845a7::before, .elementor-3181 .elementor-element.elementor-element-ac845a7 > .elementor-background-video-container::before, .elementor-3181 .elementor-element.elementor-element-ac845a7 > .e-con-inner > .elementor-background-video-container::before, .elementor-3181 .elementor-element.elementor-element-ac845a7 > .elementor-background-slideshow::before, .elementor-3181 .elementor-element.elementor-element-ac845a7 > .e-con-inner > .elementor-background-slideshow::before, .elementor-3181 .elementor-element.elementor-element-ac845a7 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';}.elementor-3181 .elementor-element.elementor-element-8baba03{--display:flex;--gap:25px 0px;--row-gap:25px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3181 .elementor-element.elementor-element-138075a{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;box-shadow:0px 0px 10px 0px rgba(0,0,0,0.5);--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3181 .elementor-element.elementor-element-7b3a2a2{--display:flex;--gap:10px 0px;--row-gap:10px;--column-gap:0px;border-style:solid;--border-style:solid;border-color:#114157;--border-color:#114157;--border-radius:20px 20px 20px 20px;--margin-top:-50px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:30px;--padding-bottom:50px;--padding-left:30px;--padding-right:30px;}.elementor-3181 .elementor-element.elementor-element-7b3a2a2:not(.elementor-motion-effects-element-type-background), .elementor-3181 .elementor-element.elementor-element-7b3a2a2 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#EEFAFF96;}.elementor-3181 .elementor-element.elementor-element-60aeb41 .elementor-button{background-color:#177098;font-family:"Lato", Sans-serif;font-size:28px;font-weight:600;border-radius:50px 50px 50px 50px;padding:12px 40px 12px 40px;}.elementor-3181 .elementor-element.elementor-element-60aeb41{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;z-index:9;}.elementor-3181 .elementor-element.elementor-element-8a3f0d1 .wcf-embed-checkout-form .woocommerce .woocommerce-checkout #payment button, .elementor-3181 .elementor-element.elementor-element-8a3f0d1 .wcf-embed-checkout-form .woocommerce .wcf-customer-login-section__login-button, .elementor-3181 .elementor-element.elementor-element-8a3f0d1 .wcf-embed-checkout-form .woocommerce #order_review button, .elementor-3181 .elementor-element.elementor-element-8a3f0d1 .wcf-embed-checkout-form .woocommerce #order_review button.wcf-btn-small, .elementor-3181 .elementor-element.elementor-element-8a3f0d1 .wcf-embed-checkout-form .wcf-custom-coupon-field button.wcf-submit-coupon, .elementor-3181 .elementor-element.elementor-element-8a3f0d1 .wcf-embed-checkout-form .woocommerce-checkout form.woocommerce-form-login .button, .elementor-3181 .elementor-element.elementor-element-8a3f0d1 .wcf-embed-checkout-form .woocommerce-checkout form.checkout_coupon .button, .elementor-3181 .elementor-element.elementor-element-8a3f0d1 .wcf-embed-checkout-form-two-step .woocommerce .wcf-embed-checkout-form-nav-btns .wcf-next-button, .elementor-3181 .elementor-element.elementor-element-8a3f0d1 .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout.wcf-modern-skin-multistep .woocommerce form .wcf-multistep-nav-btn-group .wcf-multistep-nav-next-btn, body .wcf-pre-checkout-offer-wrapper #wcf-pre-checkout-offer-content button.wcf-pre-checkout-offer-btn{background-color:#F85606;border-style:none;}.elementor-3181 .elementor-element.elementor-element-8a3f0d1 .wcf-embed-checkout-form, .elementor-3181 .elementor-element.elementor-element-8a3f0d1 .wcf-embed-checkout-form-modern-checkout, .cartflows_step-template .select2-container--default .select2-results__option--highlighted[aria-selected], .cartflows_step-template .select2-container--default .select2-results__option--highlighted[data-selected]{--wcf-primary-color:#04345C;}.elementor-3181 .elementor-element.elementor-element-8a3f0d1 .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout .woocommerce form .form-row input.input-text:focus, .elementor-3181 .elementor-element.elementor-element-8a3f0d1 .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout .woocommerce form .form-row textarea:focus, .elementor-3181 .elementor-element.elementor-element-8a3f0d1 .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout .woocommerce #order_review .wcf-custom-coupon-field input.input-text:focus{box-shadow:0 0 0 1px #04345C;}.elementor-3181 .elementor-element.elementor-element-8a3f0d1 .wcf-embed-checkout-form-two-step .wcf-embed-checkout-form-steps .step-one.wcf-current:before, .elementor-3181 .elementor-element.elementor-element-8a3f0d1 .wcf-embed-checkout-form-two-step .wcf-embed-checkout-form-steps .step-two.wcf-current:before{background-color:#04345C;}.elementor-3181 .elementor-element.elementor-element-8a3f0d1 .wcf-embed-checkout-form-two-step .wcf-embed-checkout-form-note:before{border-top-color:#04345C;}.elementor-3181 .elementor-element.elementor-element-8a3f0d1 .wcf-embed-checkout-form-two-step .woocommerce .wcf-embed-checkout-form-nav-btns .wcf-next-button, .elementor-3181 .elementor-element.elementor-element-8a3f0d1 .wcf-embed-checkout-form-two-step .wcf-embed-checkout-form-note, .elementor-3181 .elementor-element.elementor-element-8a3f0d1 .wcf-embed-checkout-form .wcf-custom-coupon-field button.wcf-submit-coupon, .elementor-3181 .elementor-element.elementor-element-8a3f0d1 .wcf-embed-checkout-form .woocommerce #order_review button, body .wcf-pre-checkout-offer-wrapper #wcf-pre-checkout-offer-content button.wcf-pre-checkout-offer-btn{background-color:#04345C;border-color:#04345C;}.elementor-3181 .elementor-element.elementor-element-8a3f0d1 .cartflows-elementor__checkout-form .wcf-embed-checkout-form{font-weight:400;}.elementor-3181 .elementor-element.elementor-element-8a3f0d1 .wcf-embed-checkout-form, .elementor-3181 .elementor-element.elementor-element-8a3f0d1 .wcf-embed-checkout-form-modern-checkout{--wcf-heading-color:#000000;--wcf-field-text-color:#000000;--wcf-field-border-color:#1E12124D;}.elementor-3181 .elementor-element.elementor-element-8a3f0d1 .wcf-embed-checkout-form .woocommerce form .form-row input.input-text::placeholder, .elementor-3181 .elementor-element.elementor-element-8a3f0d1 .wcf-embed-checkout-form .woocommerce form .form-row input.input-text, .elementor-3181 .elementor-element.elementor-element-8a3f0d1 .wcf-embed-checkout-form .woocommerce form .form-row textarea, .elementor-3181 .elementor-element.elementor-element-8a3f0d1 .wcf-embed-checkout-form .select2-container--default .select2-selection--single, .elementor-3181 .elementor-element.elementor-element-8a3f0d1 .wcf-embed-checkout-form .woocommerce form .form-row select.select, .elementor-3181 .elementor-element.elementor-element-8a3f0d1 .wcf-embed-checkout-form .woocommerce .col2-set .col-1, .elementor-3181 .elementor-element.elementor-element-8a3f0d1 .wcf-embed-checkout-form .woocommerce .col2-set .col-2, .elementor-3181 .elementor-element.elementor-element-8a3f0d1 .wcf-embed-checkout-form .woocommerce form p.form-row label, .elementor-3181 .elementor-element.elementor-element-8a3f0d1 .wcf-embed-checkout-form .woocommerce #payment [type="radio"]:checked + label, .elementor-3181 .elementor-element.elementor-element-8a3f0d1 .wcf-embed-checkout-form .woocommerce #payment [type="radio"]:not(:checked) + label, .elementor-3181 .elementor-element.elementor-element-8a3f0d1 .wcf-embed-checkout-form .woocommerce form .form-row select{font-family:"Hind Siliguri", Sans-serif;}.elementor-3181 .elementor-element.elementor-element-8a3f0d1 .wcf-embed-checkout-form .woocommerce-checkout, .elementor-3181 .elementor-element.elementor-element-8a3f0d1 .wcf-embed-checkout-form-modern-checkout{--wcf-field-label-color:#000000;}.elementor-3181 .elementor-element.elementor-element-8a3f0d1 .wcf-embed-checkout-form #order_review .wcf-custom-coupon-field input[type="text"], .elementor-3181 .elementor-element.elementor-element-8a3f0d1 .wcf-embed-checkout-form .woocommerce form .form-row input.input-text, .elementor-3181 .elementor-element.elementor-element-8a3f0d1 .wcf-embed-checkout-form .woocommerce form .form-row textarea, .elementor-3181 .elementor-element.elementor-element-8a3f0d1 .wcf-embed-checkout-form .select2-container--default .select2-selection--single, .elementor-3181 .elementor-element.elementor-element-8a3f0d1 .wcf-embed-checkout-form .woocommerce form .form-row select.select, .elementor-3181 .elementor-element.elementor-element-8a3f0d1 .wcf-embed-checkout-form .woocommerce form .form-row select{border-width:2px 2px 2px 2px;border-radius:5px 5px 5px 5px;}.elementor-3181 .elementor-element.elementor-element-8a3f0d1 .wcf-embed-checkout-form .woocommerce .woocommerce-checkout #payment button, .elementor-3181 .elementor-element.elementor-element-8a3f0d1 .wcf-embed-checkout-form .woocommerce .wcf-customer-login-section__login-button, .elementor-3181 .elementor-element.elementor-element-8a3f0d1 .wcf-embed-checkout-form .woocommerce #order_review button, .elementor-3181 .elementor-element.elementor-element-8a3f0d1 .wcf-embed-checkout-form .woocommerce #payment #place_order:before, .elementor-3181 .elementor-element.elementor-element-8a3f0d1 .wcf-embed-checkout-form .wcf-custom-coupon-field button.wcf-submit-coupon, .elementor-3181 .elementor-element.elementor-element-8a3f0d1 .wcf-embed-checkout-form .woocommerce #order_review button.wcf-btn-small, .elementor-3181 .elementor-element.elementor-element-8a3f0d1 .wcf-embed-checkout-form .woocommerce-checkout form.woocommerce-form-login .button, .elementor-3181 .elementor-element.elementor-element-8a3f0d1 .wcf-embed-checkout-form .woocommerce-checkout form.checkout_coupon .button, .elementor-3181 .elementor-element.elementor-element-8a3f0d1 .wcf-embed-checkout-form-two-step .woocommerce .wcf-embed-checkout-form-nav-btns .wcf-next-button, .elementor-3181 .elementor-element.elementor-element-8a3f0d1 .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout.wcf-modern-skin-multistep .woocommerce form .wcf-multistep-nav-btn-group .wcf-multistep-nav-next-btn, body .wcf-pre-checkout-offer-wrapper #wcf-pre-checkout-offer-content button.wcf-pre-checkout-offer-btn{font-weight:500;}.elementor-3181 .elementor-element.elementor-element-8a3f0d1 .wcf-embed-checkout-form, .elementor-3181 .elementor-element.elementor-element-8a3f0d1 .wcf-embed-checkout-form-modern-checkout{--wcf-btn-text-color:#000000;--wcf-btn-hover-text-color:#000000;}body .wcf-pre-checkout-offer-wrapper #wcf-pre-checkout-offer-content button.wcf-pre-checkout-offer-btn{color:#000000;}.elementor-3181 .elementor-element.elementor-element-8a3f0d1 .wcf-embed-checkout-form .woocommerce .woocommerce-checkout #payment button, .elementor-3181 .elementor-element.elementor-element-8a3f0d1 .wcf-embed-checkout-form .woocommerce #order_review button, .elementor-3181 .elementor-element.elementor-element-8a3f0d1 .wcf-embed-checkout-form .woocommerce #order_review button.wcf-btn-small, .elementor-3181 .elementor-element.elementor-element-8a3f0d1 .wcf-embed-checkout-form .wcf-custom-coupon-field button.wcf-submit-coupon, .elementor-3181 .elementor-element.elementor-element-8a3f0d1 .wcf-embed-checkout-form .woocommerce .wcf-customer-login-section__login-button, .elementor-3181 .elementor-element.elementor-element-8a3f0d1 .wcf-embed-checkout-form .woocommerce-checkout form.woocommerce-form-login .button, .elementor-3181 .elementor-element.elementor-element-8a3f0d1 .wcf-embed-checkout-form .woocommerce-checkout form.checkout_coupon .button, .elementor-3181 .elementor-element.elementor-element-8a3f0d1 .wcf-embed-checkout-form-two-step .woocommerce .wcf-embed-checkout-form-nav-btns .wcf-next-button, .elementor-3181 .elementor-element.elementor-element-8a3f0d1 .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout.wcf-modern-skin-multistep .woocommerce form .wcf-multistep-nav-btn-group .wcf-multistep-nav-next-btn, body .wcf-pre-checkout-offer-wrapper #wcf-pre-checkout-offer-content button.wcf-pre-checkout-offer-btn{box-shadow:0px 0px 10px 0px rgba(0,0,0,0.5);}body .wcf-pre-checkout-offer-wrapper #wcf-pre-checkout-offer-content button.wcf-pre-checkout-offer-btn:hover{color:#000000;}.elementor-3181 .elementor-element.elementor-element-8a3f0d1 .wcf-embed-checkout-form, .elementor-3181 .elementor-element.elementor-element-8a3f0d1 .wcf-embed-checkout-form-modern-checkout{--wcf-payment-section-bg-color:#EEFAFF;--wcf-payment-section-desc-bg-color:#EEFAFF;}.elementor-3181 .elementor-element.elementor-element-8a3f0d1 .wcf-el-checkout-form .wcf-product-option-wrap.wcf-yp-skin-classic .wcf-qty-options{background-color:#EEFAFF;}.elementor-3181 .elementor-element.elementor-element-8a3f0d1 .wcf-el-checkout-form .wcf-product-option-wrap.wcf-yp-skin-cards .wcf-qty-options .wcf-qty-row{background-color:#EEFAFF;}.elementor-3181 .elementor-element.elementor-element-8a3f0d1 .wcf-el-checkout-form .wcf-product-option-wrap.wcf-yp-skin-cards-inline .wcf-qty-options .wcf-qty-row{background-color:#EEFAFF;}:root{--page-title-display:none;}@media(max-width:1024px){.elementor-3181 .elementor-element.elementor-element-0a55f9e .elementor-button{font-size:14px;}}@media(max-width:767px){.elementor-3181 .elementor-element.elementor-element-70576cc{margin:11px 11px calc(var(--kit-widget-spacing, 0px) + 11px) 11px;padding:10px 10px 10px 10px;border-radius:20px 20px 20px 20px;text-align:center;}.elementor-3181 .elementor-element.elementor-element-70576cc img{border-radius:15px 15px 15px 15px;}.elementor-3181 .elementor-element.elementor-element-0a55f9e{padding:10px 10px 10px 10px;}.elementor-3181 .elementor-element.elementor-element-0a55f9e .elementor-button{font-size:29px;background-color:transparent;background-image:radial-gradient(at top right, #196D93 43%, #177098 100%);}.elementor-3181 .elementor-element.elementor-element-ac845a7{--padding-top:50px;--padding-bottom:40px;--padding-left:10px;--padding-right:10px;}.elementor-3181 .elementor-element.elementor-element-8baba03{--gap:25px 0px;--row-gap:25px;--column-gap:0px;}.elementor-3181 .elementor-element.elementor-element-7b3a2a2{--gap:15px 0px;--row-gap:15px;--column-gap:0px;border-width:2px 2px 2px 2px;--border-top-width:2px;--border-right-width:2px;--border-bottom-width:2px;--border-left-width:2px;--padding-top:30px;--padding-bottom:50px;--padding-left:0px;--padding-right:0px;}.elementor-3181 .elementor-element.elementor-element-8a3f0d1 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:10px 10px 10px 10px;}}/* Start custom CSS for checkout-form, class: .elementor-element-8a3f0d1 *//* ========================================================= SKY BLUE PREMIUM WOOCOMMERCE CHECKOUT Mobile Friendly + Animated Shipping + Premium Button ========================================================= */ /* --------------------------------------------------------- 1. MAIN CHECKOUT --------------------------------------------------------- */ .woocommerce-checkout { font-family: "Hind Siliguri", "Noto Sans Bengali", Arial, sans-serif !important; color: #263746 !important; background: #eefaff !important; } /* Main checkout container */ .woocommerce-checkout form.checkout { background: #ffffff !important; border-radius: 22px !important; padding: 22px !important; box-shadow: 0 10px 35px rgba(24, 135, 170, 0.10), 0 2px 8px rgba(24, 135, 170, 0.06) !important; } /* --------------------------------------------------------- 2. SECTION HEADINGS --------------------------------------------------------- */ .woocommerce-checkout h3, .woocommerce-checkout #order_review_heading { color: #123f55 !important; font-size: 23px !important; font-weight: 800 !important; line-height: 1.4 !important; margin-top: 20px !important; margin-bottom: 22px !important; } /* Billing heading */ .woocommerce-checkout .woocommerce-billing-fields h3 { color: #123f55 !important; font-size: 23px !important; font-weight: 800 !important; } /* --------------------------------------------------------- 3. FORM LABELS --------------------------------------------------------- */ .woocommerce-checkout form .form-row label { display: block !important; color: #294454 !important; font-size: 16px !important; font-weight: 600 !important; margin-bottom: 9px !important; line-height: 1.5 !important; } /* Required star */ .woocommerce-checkout form .form-row label .required { color: #e53935 !important; font-weight: 800 !important; } /* --------------------------------------------------------- 4. INPUT FIELDS --------------------------------------------------------- */ .woocommerce-checkout form .form-row input.input-text, .woocommerce-checkout form .form-row textarea, .woocommerce-checkout form .form-row select { width: 100% !important; min-height: 58px !important; padding: 13px 17px !important; border: 2px solid #b9dfea !important; border-radius: 16px !important; background: #ffffff !important; color: #263746 !important; font-size: 16px !important; font-family: inherit !important; outline: none !important; box-shadow: 0 3px 10px rgba(37, 143, 177, 0.06) !important; transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease, background .25s ease !important; box-sizing: border-box !important; } /* Address textarea */ .woocommerce-checkout form .form-row textarea { min-height: 100px !important; resize: vertical !important; padding-top: 15px !important; } /* Input focus */ .woocommerce-checkout form .form-row input.input-text:focus, .woocommerce-checkout form .form-row textarea:focus, .woocommerce-checkout form .form-row select:focus { border-color: #39a9d1 !important; background: #fafdff !important; box-shadow: 0 0 0 4px rgba(57, 169, 209, 0.12), 0 6px 18px rgba(57, 169, 209, 0.10) !important; transform: translateY(-1px) !important; } /* Placeholder */ .woocommerce-checkout input::placeholder, .woocommerce-checkout textarea::placeholder { color: #9aaab2 !important; opacity: 1 !important; } /* Space between fields */ .woocommerce-checkout .form-row { margin-bottom: 21px !important; } /* --------------------------------------------------------- 5. YOUR PRODUCTS / PRODUCT CARD --------------------------------------------------------- */ .woocommerce-checkout .woocommerce-checkout-review-order-table { width: 100% !important; border: 0 !important; border-collapse: separate !important; border-spacing: 0 !important; background: transparent !important; } /* Product row */ .woocommerce-checkout .woocommerce-checkout-review-order-table tbody tr { background: linear-gradient( 135deg, #e9f9ff, #f5fcff ) !important; border-radius: 16px !important; box-shadow: 0 5px 18px rgba(32, 142, 177, 0.09) !important; } /* Product image */ .woocommerce-checkout .woocommerce-checkout-review-order-table img { width: 65px !important; height: 65px !important; object-fit: contain !important; border-radius: 11px !important; background: #ffffff !important; padding: 3px !important; } /* Product name */ .woocommerce-checkout .woocommerce-checkout-review-order-table .product-name { color: #244452 !important; font-size: 15px !important; font-weight: 700 !important; } /* Product price */ .woocommerce-checkout .woocommerce-checkout-review-order-table .product-total { color: #183e50 !important; font-size: 15px !important; font-weight: 800 !important; } /* Remove table borders */ .woocommerce-checkout .woocommerce-checkout-review-order-table td, .woocommerce-checkout .woocommerce-checkout-review-order-table th { border: 0 !important; } /* --------------------------------------------------------- 6. SHIPPING SECTION --------------------------------------------------------- */ /* Shipping list */ .woocommerce-checkout .woocommerce-shipping-methods { list-style: none !important; padding: 0 !important; margin: 8px 0 22px !important; } /* Shipping option */ .woocommerce-checkout .woocommerce-shipping-methods li { position: relative !important; margin: 12px 0 !important; padding: 0 !important; } /* Shipping clickable card */ .woocommerce-checkout .woocommerce-shipping-methods li label { display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; min-height: 68px !important; box-sizing: border-box !important; padding: 14px 17px !important; border: 2px solid #cfe6ee !important; border-radius: 17px !important; background: #ffffff !important; color: #304956 !important; font-size: 16px !important; font-weight: 600 !important; cursor: pointer !important; box-shadow: 0 4px 12px rgba(38, 137, 166, 0.07) !important; transition: all .3s ease !important; } /* Shipping hover */ .woocommerce-checkout .woocommerce-shipping-methods li label:hover { border-color: #70c5df !important; background: #f2fbff !important; transform: translateY(-2px) !important; box-shadow: 0 8px 20px rgba(37, 151, 185, 0.12) !important; } /* --------------------------------------------------------- 7. CUSTOM RADIO BUTTON --------------------------------------------------------- */ .woocommerce-checkout .woocommerce-shipping-methods li input[type="radio"] { appearance: none !important; -webkit-appearance: none !important; width: 22px !important; height: 22px !important; min-width: 22px !important; margin: 0 13px 0 0 !important; border: 2px solid #a8c6d1 !important; border-radius: 50% !important; background: #ffffff !important; position: relative !important; cursor: pointer !important; transition: all .25s ease !important; } /* Radio hover */ .woocommerce-checkout .woocommerce-shipping-methods li input[type="radio"]:hover { border-color: #249bc5 !important; } /* Selected radio */ .woocommerce-checkout .woocommerce-shipping-methods li input[type="radio"]:checked { border-color: #188ab5 !important; background: #188ab5 !important; box-shadow: 0 0 0 4px rgba(24, 138, 181, 0.12) !important; } /* Selected radio dot */ .woocommerce-checkout .woocommerce-shipping-methods li input[type="radio"]:checked::after { content: "" !important; position: absolute !important; width: 8px !important; height: 8px !important; border-radius: 50% !important; background: #ffffff !important; left: 5px !important; top: 5px !important; animation: radioPop .25s ease !important; } /* Radio animation */ @keyframes radioPop { 0% { transform: scale(0); } 70% { transform: scale(1.2); } 100% { transform: scale(1); } } /* --------------------------------------------------------- 8. SELECTED SHIPPING CARD --------------------------------------------------------- */ .woocommerce-checkout .woocommerce-shipping-methods li:has(input[type="radio"]:checked) label { background: linear-gradient( 135deg, #d9f5ff, #edfaff ) !important; border-color: #1595c2 !important; color: #123f55 !important; box-shadow: 0 8px 22px rgba(21, 149, 194, 0.17), inset 0 0 0 1px rgba(21, 149, 194, 0.06) !important; transform: translateY(-2px) !important; animation: shippingSelected .3s ease !important; } /* Selected card animation */ @keyframes shippingSelected { 0% { transform: scale(.97); opacity: .7; } 70% { transform: scale(1.015); } 100% { transform: scale(1); } } /* --------------------------------------------------------- 9. SHIPPING PRICE --------------------------------------------------------- */ .woocommerce-checkout .woocommerce-shipping-methods li label .amount { color: #123f55 !important; font-size: 16px !important; font-weight: 800 !important; white-space: nowrap !important; } /* --------------------------------------------------------- 10. ORDER REVIEW --------------------------------------------------------- */ .woocommerce-checkout #order_review { width: 100% !important; background: #ffffff !important; border-radius: 18px !important; overflow: hidden !important; } /* Table headings */ .woocommerce-checkout #order_review .shop_table thead th { color: #45606d !important; font-size: 14px !important; font-weight: 800 !important; padding: 12px 5px !important; border-bottom: 1px dashed #cbdde3 !important; } /* Table rows */ .woocommerce-checkout #order_review .shop_table td, .woocommerce-checkout #order_review .shop_table th { border: 0 !important; } /* Subtotal */ .woocommerce-checkout #order_review .cart-subtotal th, .woocommerce-checkout #order_review .cart-subtotal td { padding: 14px 5px !important; border-bottom: 1px dashed #d6e2e6 !important; color: #536770 !important; font-size: 15px !important; } /* Shipping total */ .woocommerce-checkout #order_review .woocommerce-shipping-totals th, .woocommerce-checkout #order_review .woocommerce-shipping-totals td { padding: 14px 5px !important; border-bottom: 1px dashed #d6e2e6 !important; color: #536770 !important; font-size: 15px !important; } /* Total */ .woocommerce-checkout #order_review .order-total th, .woocommerce-checkout #order_review .order-total td { padding: 17px 5px !important; color: #123f55 !important; font-size: 19px !important; font-weight: 900 !important; border: 0 !important; } /* --------------------------------------------------------- 11. PAYMENT / CASH ON DELIVERY --------------------------------------------------------- */ .woocommerce-checkout #payment { background: linear-gradient( 135deg, #edfaff, #f7fcff ) !important; border: 1px solid #d5edf5 !important; border-radius: 17px !important; padding: 17px !important; margin-top: 18px !important; box-shadow: 0 5px 15px rgba(37, 143, 177, 0.06) !important; } /* Payment methods */ .woocommerce-checkout #payment ul.payment_methods { border: 0 !important; padding: 0 !important; margin: 0 !important; } /* Payment title */ .woocommerce-checkout #payment ul.payment_methods li label { color: #183e50 !important; font-size: 16px !important; font-weight: 700 !important; } /* Payment description */ .woocommerce-checkout #payment .payment_box { background: #dff5ff !important; border-radius: 11px !important; padding: 14px !important; margin: 12px 0 0 !important; color: #45606d !important; font-size: 14px !important; line-height: 1.6 !important; } /* Payment arrow */ .woocommerce-checkout #payment .payment_box::before { border-bottom-color: #dff5ff !important; } /* --------------------------------------------------------- 12. PRIVACY TEXT --------------------------------------------------------- */ .woocommerce-checkout .woocommerce-privacy-policy-text { color: #74838a !important; font-size: 12px !important; line-height: 1.7 !important; margin: 17px 0 !important; } .woocommerce-checkout .woocommerce-privacy-policy-text a { color: #168bb5 !important; font-weight: 700 !important; } /* --------------------------------------------------------- 13. PLACE ORDER BUTTON --------------------------------------------------------- */ /* Main button */ .woocommerce-checkout #place_order { width: 100% !important; min-height: 62px !important; border: 0 !important; border-radius: 15px !important; background: linear-gradient( 135deg, #123f55, #07506e ) !important; color: #ffffff !important; font-family: inherit !important; font-size: 18px !important; font-weight: 800 !important; letter-spacing: .2px !important; padding: 15px 20px !important; margin-top: 8px !important; cursor: pointer !important; box-shadow: 0 9px 22px rgba(10, 65, 88, 0.25) !important; transition: transform .25s ease, box-shadow .25s ease, background .25s ease !important; } /* Button hover */ .woocommerce-checkout #place_order:hover { background: linear-gradient( 135deg, #0b3448, #06445d ) !important; transform: translateY(-2px) !important; box-shadow: 0 13px 28px rgba(10, 65, 88, 0.32) !important; } /* Button click */ .woocommerce-checkout #place_order:active { transform: scale(.98) !important; box-shadow: 0 5px 12px rgba(10, 65, 88, 0.22) !important; } /* --------------------------------------------------------- 14. CHECKBOXES --------------------------------------------------------- */ .woocommerce-checkout input[type="checkbox"] { accent-color: #168bb5 !important; } /* --------------------------------------------------------- 15. WOOCOMMERCE MESSAGES --------------------------------------------------------- */ .woocommerce-checkout .woocommerce-error, .woocommerce-checkout .woocommerce-message, .woocommerce-checkout .woocommerce-info { border-radius: 13px !important; font-size: 14px !important; line-height: 1.6 !important; box-shadow: 0 4px 12px rgba(0,0,0,.06) !important; } /* --------------------------------------------------------- 16. REMOVE UNNECESSARY DEFAULT SPACING --------------------------------------------------------- */ .woocommerce-checkout .woocommerce-additional-fields { margin-top: 12px !important; } .woocommerce-checkout .woocommerce-terms-and-conditions-wrapper { font-size: 13px !important; line-height: 1.6 !important; } /* --------------------------------------------------------- 17. MOBILE DESIGN --------------------------------------------------------- */ @media (max-width: 767px) { /* Main background */ .woocommerce-checkout { background: #eefaff !important; padding: 0 !important; } /* Main box */ .woocommerce-checkout form.checkout { padding: 17px !important; border-radius: 18px !important; box-shadow: 0 7px 25px rgba(24, 135, 170, 0.10) !important; } /* Headings */ .woocommerce-checkout h3, .woocommerce-checkout #order_review_heading { font-size: 21px !important; margin-top: 18px !important; margin-bottom: 20px !important; } /* Labels */ .woocommerce-checkout form .form-row label { font-size: 15px !important; margin-bottom: 8px !important; } /* Inputs */ .woocommerce-checkout form .form-row input.input-text, .woocommerce-checkout form .form-row select { min-height: 56px !important; height: 56px !important; padding: 12px 15px !important; border-radius: 15px !important; font-size: 15px !important; } /* Address */ .woocommerce-checkout form .form-row textarea { min-height: 90px !important; border-radius: 15px !important; font-size: 15px !important; } /* Product image */ .woocommerce-checkout .woocommerce-checkout-review-order-table img { width: 58px !important; height: 58px !important; } /* Product name */ .woocommerce-checkout .woocommerce-checkout-review-order-table .product-name { font-size: 14px !important; } /* Shipping card */ .woocommerce-checkout .woocommerce-shipping-methods li label { min-height: 64px !important; padding: 13px 14px !important; border-radius: 15px !important; font-size: 15px !important; } /* Shipping radio */ .woocommerce-checkout .woocommerce-shipping-methods li input[type="radio"] { width: 21px !important; height: 21px !important; min-width: 21px !important; margin-right: 11px !important; } /* Payment box */ .woocommerce-checkout #payment { padding: 14px !important; border-radius: 15px !important; } /* Privacy */ .woocommerce-checkout .woocommerce-privacy-policy-text { font-size: 11px !important; line-height: 1.65 !important; } /* Place order */ .woocommerce-checkout #place_order { min-height: 59px !important; border-radius: 14px !important; font-size: 17px !important; padding: 14px 16px !important; } } /* --------------------------------------------------------- 18. EXTRA SMALL MOBILE --------------------------------------------------------- */ @media (max-width: 380px) { .woocommerce-checkout form.checkout { padding: 13px !important; } .woocommerce-checkout h3, .woocommerce-checkout #order_review_heading { font-size: 19px !important; } .woocommerce-checkout .woocommerce-shipping-methods li label { font-size: 14px !important; padding: 12px !important; } .woocommerce-checkout #place_order { font-size: 16px !important; } } /* ========================================================= END ========================================================= */ /* ========================================= SHIPPING - CLEAN CARD DESIGN ========================================= */ /* বাইরের default border সম্পূর্ণ বন্ধ */ .woocommerce-checkout .woocommerce-shipping-methods, .woocommerce-checkout .woocommerce-shipping-methods ul { list-style: none !important; border: none !important; outline: none !important; background: transparent !important; padding: 0 !important; margin: 10px 0 20px !important; box-shadow: none !important; } /* প্রতিটি shipping option */ .woocommerce-checkout .woocommerce-shipping-methods li { position: relative !important; display: block !important; list-style: none !important; border: none !important; outline: none !important; padding: 0 !important; margin: 12px 0 !important; background: transparent !important; box-shadow: none !important; } /* Shipping card */ .woocommerce-checkout .woocommerce-shipping-methods li label { display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; min-height: 68px !important; box-sizing: border-box !important; /* বাম পাশে circle-এর জন্য জায়গা */ padding: 14px 18px 14px 58px !important; border: 2px solid #c7e5ef !important; border-radius: 17px !important; background: #ffffff !important; color: #244653 !important; font-size: 16px !important; font-weight: 600 !important; cursor: pointer !important; position: relative !important; box-shadow: 0 5px 16px rgba(30,140,175,0.08) !important; transition: all 0.25s ease !important; } /* ========================================= RADIO CIRCLE ========================================= */ /* Radio যদি label-এর বাইরে থাকে */ .woocommerce-checkout .woocommerce-shipping-methods li > input[type="radio"] { position: absolute !important; left: 19px !important; top: 50% !important; transform: translateY(-50%) !important; display: block !important; visibility: visible !important; opacity: 1 !important; width: 22px !important; height: 22px !important; min-width: 22px !important; margin: 0 !important; padding: 0 !important; appearance: none !important; -webkit-appearance: none !important; border: 2px solid #9acddd !important; border-radius: 50% !important; background: #ffffff !important; z-index: 10 !important; cursor: pointer !important; } /* Radio যদি label-এর ভিতরে থাকে */ .woocommerce-checkout .woocommerce-shipping-methods li label input[type="radio"] { display: block !important; visibility: visible !important; opacity: 1 !important; width: 22px !important; height: 22px !important; min-width: 22px !important; margin: 0 !important; position: absolute !important; left: 19px !important; top: 50% !important; transform: translateY(-50%) !important; appearance: none !important; -webkit-appearance: none !important; border: 2px solid #9acddd !important; border-radius: 50% !important; background: #ffffff !important; z-index: 20 !important; } /* ========================================= SELECTED RADIO ========================================= */ .woocommerce-checkout .woocommerce-shipping-methods li input[type="radio"]:checked { border-color: #087fa8 !important; background: #087fa8 !important; box-shadow: 0 0 0 4px rgba(8,127,168,0.12) !important; } /* Selected circle-এর ভিতরের সাদা dot */ .woocommerce-checkout .woocommerce-shipping-methods li input[type="radio"]:checked::after { content: "" !important; position: absolute !important; width: 8px !important; height: 8px !important; left: 5px !important; top: 5px !important; background: #ffffff !important; border-radius: 50% !important; } /* ========================================= SELECTED SHIPPING CARD ========================================= */ .woocommerce-checkout .woocommerce-shipping-methods li:has(input[type="radio"]:checked) label { background: linear-gradient( 135deg, #e1f7ff, #f4fcff ) !important; border-color: #0785ad !important; color: #123f52 !important; box-shadow: 0 7px 20px rgba(8,133,173,0.16), inset 0 0 0 1px rgba(8,133,173,0.05) !important; transform: translateY(-1px) !important; } /* ========================================= HOVER ========================================= */ .woocommerce-checkout .woocommerce-shipping-methods li label:hover { border-color: #72c4dc !important; background: #f4fcff !important; box-shadow: 0 7px 20px rgba(8,133,173,0.12) !important; transform: translateY(-1px) !important; } /* ========================================= PRICE ========================================= */ .woocommerce-checkout .woocommerce-shipping-methods li label .amount { color: #123f52 !important; font-size: 16px !important; font-weight: 800 !important; white-space: nowrap !important; } /* ========================================= MOBILE ========================================= */ @media (max-width: 767px) { .woocommerce-checkout .woocommerce-shipping-methods li label { min-height: 62px !important; padding: 12px 14px 12px 54px !important; border-radius: 15px !important; font-size: 15px !important; } .woocommerce-checkout .woocommerce-shipping-methods li > input[type="radio"], .woocommerce-checkout .woocommerce-shipping-methods li label input[type="radio"] { left: 17px !important; width: 21px !important; height: 21px !important; min-width: 21px !important; } } /* ========================================================= FINAL MOBILE FIXES - Keeps existing design/colors - Prevents order button text from wrapping - Gives checkout more usable mobile width - Keeps emojis visually closer to text size - Adds a clean helper line around "Your Products" - Makes selectable product cards more active when selected ========================================================= */ /* --------------------------------------------------------- 18. MOBILE WIDTH / OVERFLOW SAFETY --------------------------------------------------------- */ html, body { max-width: 100% !important; overflow-x: hidden !important; } .woocommerce-checkout, .woocommerce-checkout form.checkout, .woocommerce-checkout #order_review, .woocommerce-checkout #payment { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } .woocommerce-checkout form.checkout { margin-left: auto !important; margin-right: auto !important; } /* --------------------------------------------------------- 19. PLACE ORDER BUTTON — ONE LINE ON MOBILE --------------------------------------------------------- */ .woocommerce-checkout #place_order { width: 100% !important; max-width: 100% !important; min-width: 0 !important; white-space: nowrap !important; word-break: keep-all !important; overflow: hidden !important; font-size: 18px !important; line-height: 1.2 !important; padding-left: 10px !important; padding-right: 10px !important; display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; } @media (max-width: 767px) { .woocommerce-checkout form.checkout { padding-left: 10px !important; padding-right: 10px !important; } .woocommerce-checkout #place_order { min-height: 58px !important; font-size: 17px !important; padding: 12px 8px !important; white-space: nowrap !important; } } @media (max-width: 380px) { .woocommerce-checkout form.checkout { padding-left: 8px !important; padding-right: 8px !important; } .woocommerce-checkout #place_order { font-size: 15px !important; letter-spacing: 0 !important; padding-left: 5px !important; padding-right: 5px !important; } } /* --------------------------------------------------------- 20. EMOJI SIZE FIX --------------------------------------------------------- */ /* WordPress sometimes converts emojis into elements. Keep those images from becoming oversized inside product titles / labels. */ .woocommerce-checkout img.emoji, .woocommerce-checkout .emoji { width: 1em !important; height: 1em !important; max-width: 1em !important; max-height: 1em !important; min-width: 0 !important; min-height: 0 !important; padding: 0 !important; margin: 0 .12em 0 0 !important; object-fit: contain !important; vertical-align: -0.12em !important; display: inline-block !important; } /* Product title emoji should follow title size */ .woocommerce-checkout .product-name img.emoji, .woocommerce-checkout .product-name .emoji, .woocommerce-checkout .product-title img.emoji, .woocommerce-checkout .product-title .emoji { width: 1em !important; height: 1em !important; max-width: 1em !important; max-height: 1em !important; vertical-align: -0.12em !important; } /* --------------------------------------------------------- 21. "YOUR PRODUCTS" — CLEAN MOBILE PRESENTATION --------------------------------------------------------- */ /* These rules are intentionally limited to product-selection areas and do not alter shipping/payment controls. */ .woocommerce-checkout .products, .woocommerce-checkout .checkout-products, .woocommerce-checkout .product-options, .woocommerce-checkout .product-selection, .woocommerce-checkout .product-select { box-sizing: border-box !important; max-width: 100% !important; } /* Product option/card containers */ .woocommerce-checkout .product-option, .woocommerce-checkout .product-card, .woocommerce-checkout .product-selection-card, .woocommerce-checkout .checkout-product, .woocommerce-checkout .wc-product-option { box-sizing: border-box !important; max-width: 100% !important; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease !important; } /* Selectable product card — hover */ .woocommerce-checkout .product-option:hover, .woocommerce-checkout .product-card:hover, .woocommerce-checkout .product-selection-card:hover, .woocommerce-checkout .checkout-product:hover, .woocommerce-checkout .wc-product-option:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 22px rgba(8,133,173,.13) !important; } /* Selected product option */ .woocommerce-checkout .product-option:has(input[type="radio"]:checked), .woocommerce-checkout .product-card:has(input[type="radio"]:checked), .woocommerce-checkout .product-selection-card:has(input[type="radio"]:checked), .woocommerce-checkout .checkout-product:has(input[type="radio"]:checked), .woocommerce-checkout .wc-product-option:has(input[type="radio"]:checked) { transform: scale(1.015) !important; border-color: #0785ad !important; background: linear-gradient( 135deg, #e1f7ff, #f5fcff ) !important; box-shadow: 0 10px 25px rgba(8,133,173,.16), inset 0 0 0 1px rgba(8,133,173,.07) !important; position: relative !important; z-index: 2 !important; animation: ehProductActive .28s ease !important; } @keyframes ehProductActive { 0% { transform: scale(.985); } 65% { transform: scale(1.025); } 100% { transform: scale(1.015); } } /* Product-selection radio itself */ .woocommerce-checkout .product-option input[type="radio"], .woocommerce-checkout .product-card input[type="radio"], .woocommerce-checkout .product-selection-card input[type="radio"], .woocommerce-checkout .checkout-product input[type="radio"], .woocommerce-checkout .wc-product-option input[type="radio"] { accent-color: #087fa8 !important; } /* Product option image safety */ .woocommerce-checkout .product-option img, .woocommerce-checkout .product-card img, .woocommerce-checkout .product-selection-card img, .woocommerce-checkout .checkout-product img, .woocommerce-checkout .wc-product-option img { max-width: 100% !important; box-sizing: border-box !important; } /* Product-option emojis */ .woocommerce-checkout .product-option img.emoji, .woocommerce-checkout .product-card img.emoji, .woocommerce-checkout .product-selection-card img.emoji, .woocommerce-checkout .checkout-product img.emoji, .woocommerce-checkout .wc-product-option img.emoji { width: 1em !important; height: 1em !important; max-width: 1em !important; max-height: 1em !important; padding: 0 !important; margin: 0 .12em 0 0 !important; vertical-align: -0.12em !important; } /* --------------------------------------------------------- 22. EASY "SELECT YOUR PACKAGE" HELPER --------------------------------------------------------- */ /* If your checkout builder has a heading immediately before the product options, this gives it a simple readable look. It does not hide or replace the original heading. */ .woocommerce-checkout .product-options-heading, .woocommerce-checkout .products-heading, .woocommerce-checkout .product-selection-heading, .woocommerce-checkout .checkout-products-heading { color: #123f55 !important; font-size: 18px !important; font-weight: 800 !important; line-height: 1.45 !important; margin: 8px 0 14px !important; } /* --------------------------------------------------------- 23. MOBILE PRODUCT OPTION SPACING --------------------------------------------------------- */ @media (max-width: 767px) { .woocommerce-checkout .product-option, .woocommerce-checkout .product-card, .woocommerce-checkout .product-selection-card, .woocommerce-checkout .checkout-product, .woocommerce-checkout .wc-product-option { max-width: 100% !important; box-sizing: border-box !important; } .woocommerce-checkout .product-option:has(input[type="radio"]:checked), .woocommerce-checkout .product-card:has(input[type="radio"]:checked), .woocommerce-checkout .product-selection-card:has(input[type="radio"]:checked), .woocommerce-checkout .checkout-product:has(input[type="radio"]:checked), .woocommerce-checkout .wc-product-option:has(input[type="radio"]:checked) { transform: scale(1.012) !important; } } /* --------------------------------------------------------- 24. ORDER REVIEW MOBILE WIDTH --------------------------------------------------------- */ @media (max-width: 767px) { .woocommerce-checkout #order_review { overflow: visible !important; } .woocommerce-checkout #order_review .shop_table { width: 100% !important; max-width: 100% !important; table-layout: auto !important; } .woocommerce-checkout #order_review .shop_table th, .woocommerce-checkout #order_review .shop_table td { box-sizing: border-box !important; } .woocommerce-checkout .woocommerce-checkout-review-order-table .product-name { word-break: normal !important; overflow-wrap: normal !important; } .woocommerce-checkout .woocommerce-checkout-review-order-table .product-total { white-space: nowrap !important; } } /* --------------------------------------------------------- 25. FINAL SMALL-SCREEN SAFETY --------------------------------------------------------- */ @media (max-width: 340px) { .woocommerce-checkout #place_order { font-size: 14px !important; min-height: 56px !important; } .woocommerce-checkout .woocommerce-checkout-review-order-table img { width: 52px !important; height: 52px !important; } }/* End custom CSS */