/* * checkout.css: the single stylesheet for 1/order/en/us/checkout-now-v7.php. * Built from the former bootstrap.min.css (subset), style.css, app2.css, bottom-popup.css and custom2.css, * in that cascade order, with rules that cannot match this page removed. */ /* ================================================================= from bootstrap.min.css ================================================================= */ /*! * Bootstrap v5.1.3 (https://getbootstrap.com/) * Copyright 2011-2021 The Bootstrap Authors * Copyright 2011-2021 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) */ :root{--bs-blue:#0d6efd;--bs-indigo:#6610f2;--bs-purple:#6f42c1;--bs-pink:#d63384;--bs-red:#dc3545;--bs-orange:#fd7e14;--bs-yellow:#ffc107;--bs-green:#198754;--bs-teal:#20c997;--bs-cyan:#0dcaf0;--bs-white:#fff;--bs-gray:#6c757d;--bs-gray-dark:#343a40;--bs-gray-100:#f8f9fa;--bs-gray-200:#e9ecef;--bs-gray-300:#dee2e6;--bs-gray-400:#ced4da;--bs-gray-500:#adb5bd;--bs-gray-600:#6c757d;--bs-gray-700:#495057;--bs-gray-800:#343a40;--bs-gray-900:#212529;--bs-primary:#0d6efd;--bs-secondary:#6c757d;--bs-success:#198754;--bs-info:#0dcaf0;--bs-warning:#ffc107;--bs-danger:#dc3545;--bs-light:#f8f9fa;--bs-dark:#212529;--bs-primary-rgb:13,110,253;--bs-secondary-rgb:108,117,125;--bs-success-rgb:25,135,84;--bs-info-rgb:13,202,240;--bs-warning-rgb:255,193,7;--bs-danger-rgb:220,53,69;--bs-light-rgb:248,249,250;--bs-dark-rgb:33,37,41;--bs-white-rgb:255,255,255;--bs-black-rgb:0,0,0;--bs-body-color-rgb:33,37,41;--bs-body-bg-rgb:255,255,255;--bs-font-sans-serif:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--bs-font-monospace:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--bs-gradient:linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));--bs-body-font-family:var(--bs-font-sans-serif);--bs-body-font-size:1rem;--bs-body-font-weight:400;--bs-body-line-height:1.5;--bs-body-color:#212529;--bs-body-bg:#fff} *,::after,::before{box-sizing:border-box} @media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}} body{margin:0;font-family:var(--bs-body-font-family);font-size:var(--bs-body-font-size);font-weight:var(--bs-body-font-weight);line-height:var(--bs-body-line-height);color:var(--bs-body-color);text-align:var(--bs-body-text-align);background-color:var(--bs-body-bg);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent} .h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem;font-weight:500;line-height:1.2} .h1,h1{font-size:calc(1.375rem + 1.5vw)} @media (min-width:1200px){.h1,h1{font-size:2.5rem}} .h2,h2{font-size:calc(1.325rem + .9vw)} @media (min-width:1200px){.h2,h2{font-size:2rem}} .h3,h3{font-size:calc(1.3rem + .6vw)} @media (min-width:1200px){.h3,h3{font-size:1.75rem}} .h4,h4{font-size:calc(1.275rem + .3vw)} @media (min-width:1200px){.h4,h4{font-size:1.5rem}} .h5,h5{font-size:1.25rem} .h6,h6{font-size:1rem} p{margin-top:0;margin-bottom:1rem} ol,ul{padding-left:2rem} dl,ol,ul{margin-top:0;margin-bottom:1rem} ol ol,ol ul,ul ol,ul ul{margin-bottom:0} b,strong{font-weight:bolder} a{color:#0d6efd;text-decoration:underline} a:hover{color:#0a58ca} a:not([href]):not([class]),a:not([href]):not([class]):hover{color:inherit;text-decoration:none} img,svg{vertical-align:middle} label{display:inline-block} button{border-radius:0} button:focus:not(:focus-visible){outline:0} button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit} button,select{text-transform:none} [role=button]{cursor:pointer} select{word-wrap:normal} select:disabled{opacity:1} [list]::-webkit-calendar-picker-indicator{display:none} [type=button],[type=reset],[type=submit],button{-webkit-appearance:button} [type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer} ::-moz-focus-inner{padding:0;border-style:none} ::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-fields-wrapper,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-text,::-webkit-datetime-edit-year-field{padding:0} ::-webkit-inner-spin-button{height:auto} [type=search]{outline-offset:-2px;-webkit-appearance:textfield} ::-webkit-search-decoration{-webkit-appearance:none} ::-webkit-color-swatch-wrapper{padding:0} ::-webkit-file-upload-button{font:inherit} ::file-selector-button{font:inherit} ::-webkit-file-upload-button{font:inherit;-webkit-appearance:button} [hidden]{display:none!important} .img-fluid{max-width:100%;height:auto} .container,.container-fluid,.container-lg,.container-md,.container-sm,.container-xl,.container-xxl{width:100%;padding-right:var(--bs-gutter-x,.75rem);padding-left:var(--bs-gutter-x,.75rem);margin-right:auto;margin-left:auto} @media (min-width:576px){.container,.container-sm{max-width:540px}} @media (min-width:768px){.container,.container-md,.container-sm{max-width:720px}} @media (min-width:992px){.container,.container-lg,.container-md,.container-sm{max-width:960px}} @media (min-width:1200px){.container,.container-lg,.container-md,.container-sm,.container-xl{max-width:1140px}} @media (min-width:1400px){.container,.container-lg,.container-md,.container-sm,.container-xl,.container-xxl{max-width:1320px}} .form-label{margin-bottom:.5rem} .form-control{display:block;width:100%;padding:.375rem .75rem;font-size:1rem;font-weight:400;line-height:1.5;color:#212529;background-color:#fff;background-clip:padding-box;border:1px solid #ced4da;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:.25rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out} @media (prefers-reduced-motion:reduce){.form-control{transition:none}} .form-control[type=file]{overflow:hidden} .form-control[type=file]:not(:disabled):not([readonly]){cursor:pointer} .form-control:focus{color:#212529;background-color:#fff;border-color:#86b7fe;outline:0;box-shadow:0 0 0 .25rem rgba(13,110,253,.25)} .form-control::-webkit-date-and-time-value{height:1.5em} .form-control::-moz-placeholder{color:#6c757d;opacity:1} .form-control::placeholder{color:#6c757d;opacity:1} .form-control:disabled,.form-control[readonly]{background-color:#e9ecef;opacity:1} .form-control::-webkit-file-upload-button{padding:.375rem .75rem;margin:-.375rem -.75rem;-webkit-margin-end:.75rem;margin-inline-end:.75rem;color:#212529;background-color:#e9ecef;pointer-events:none;border-color:inherit;border-style:solid;border-width:0;border-inline-end-width:1px;border-radius:0;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out} .form-control::file-selector-button{padding:.375rem .75rem;margin:-.375rem -.75rem;-webkit-margin-end:.75rem;margin-inline-end:.75rem;color:#212529;background-color:#e9ecef;pointer-events:none;border-color:inherit;border-style:solid;border-width:0;border-inline-end-width:1px;border-radius:0;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out} @media (prefers-reduced-motion:reduce){.form-control::-webkit-file-upload-button{-webkit-transition:none;transition:none}.form-control::file-selector-button{transition:none}} .form-control:hover:not(:disabled):not([readonly])::-webkit-file-upload-button{background-color:#dde0e3} .form-control:hover:not(:disabled):not([readonly])::file-selector-button{background-color:#dde0e3} .form-control::-webkit-file-upload-button{padding:.375rem .75rem;margin:-.375rem -.75rem;-webkit-margin-end:.75rem;margin-inline-end:.75rem;color:#212529;background-color:#e9ecef;pointer-events:none;border-color:inherit;border-style:solid;border-width:0;border-inline-end-width:1px;border-radius:0;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out} @media (prefers-reduced-motion:reduce){.form-control::-webkit-file-upload-button{-webkit-transition:none;transition:none}} .form-control:hover:not(:disabled):not([readonly])::-webkit-file-upload-button{background-color:#dde0e3} .form-select{display:block;width:100%;padding:.375rem 2.25rem .375rem .75rem;-moz-padding-start:calc(0.75rem - 3px);font-size:1rem;font-weight:400;line-height:1.5;color:#212529;background-color:#fff;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right .75rem center;background-size:16px 12px;border:1px solid #ced4da;border-radius:.25rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;-webkit-appearance:none;-moz-appearance:none;appearance:none} @media (prefers-reduced-motion:reduce){.form-select{transition:none}} .form-select:focus{border-color:#86b7fe;outline:0;box-shadow:0 0 0 .25rem rgba(13,110,253,.25)} .form-select[multiple],.form-select[size]:not([size="1"]){padding-right:.75rem;background-image:none} .form-select:disabled{background-color:#e9ecef} .form-select:-moz-focusring{color:transparent;text-shadow:0 0 0 #212529} .form-floating{position:relative} .form-floating>.form-control,.form-floating>.form-select{height:calc(3.5rem + 2px);line-height:1.25} .form-floating>label{position:absolute;top:0;left:0;height:100%;padding:1rem .75rem;pointer-events:none;border:1px solid transparent;transform-origin:0 0;transition:opacity .1s ease-in-out,transform .1s ease-in-out} @media (prefers-reduced-motion:reduce){.form-floating>label{transition:none}} .form-floating>.form-control{padding:1rem .75rem} .form-floating>.form-control::-moz-placeholder{color:transparent} .form-floating>.form-control::placeholder{color:transparent} .form-floating>.form-control:not(:-moz-placeholder-shown){padding-top:1.625rem;padding-bottom:.625rem} .form-floating>.form-control:focus,.form-floating>.form-control:not(:placeholder-shown){padding-top:1.625rem;padding-bottom:.625rem} .form-floating>.form-control:-webkit-autofill{padding-top:1.625rem;padding-bottom:.625rem} .form-floating>.form-select{padding-top:1.625rem;padding-bottom:.625rem} .form-floating>.form-control:not(:-moz-placeholder-shown)~label{opacity:.65;transform:scale(.85) translateY(-.5rem) translateX(.15rem)} .form-floating>.form-control:focus~label,.form-floating>.form-control:not(:placeholder-shown)~label,.form-floating>.form-select~label{opacity:.65;transform:scale(.85) translateY(-.5rem) translateX(.15rem)} .form-floating>.form-control:-webkit-autofill~label{opacity:.65;transform:scale(.85) translateY(-.5rem) translateX(.15rem)} .dropdown,.dropend,.dropstart,.dropup{position:relative} .card{position:relative;display:flex;flex-direction:column;min-width:0;word-wrap:break-word;background-color:#fff;background-clip:border-box;border:1px solid rgba(0,0,0,.125);border-radius:.25rem} .badge{display:inline-block;padding:.35em .65em;font-size:.75em;font-weight:700;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25rem} .badge:empty{display:none} .alert{position:relative;padding:1rem 1rem;margin-bottom:1rem;border:1px solid transparent;border-radius:.25rem} .alert-danger{color:#842029;background-color:#f8d7da;border-color:#f5c2c7} @-webkit-keyframes progress-bar-stripes{0%{background-position-x:1rem}} @keyframes progress-bar-stripes{0%{background-position-x:1rem}} .modal{position:fixed;top:0;left:0;z-index:1055;display:none;width:100%;height:100%;overflow-x:hidden;overflow-y:auto;outline:0} @-webkit-keyframes spinner-border{to{transform:rotate(360deg)}} @keyframes spinner-border{to{transform:rotate(360deg)}} @-webkit-keyframes spinner-grow{0%{transform:scale(0)}50%{opacity:1;transform:none}} @keyframes spinner-grow{0%{transform:scale(0)}50%{opacity:1;transform:none}} .placeholder{display:inline-block;min-height:1em;vertical-align:middle;cursor:wait;background-color:currentColor;opacity:.5} @-webkit-keyframes placeholder-glow{50%{opacity:.2}} @keyframes placeholder-glow{50%{opacity:.2}} @-webkit-keyframes placeholder-wave{100%{-webkit-mask-position:-200% 0%;mask-position:-200% 0%}} @keyframes placeholder-wave{100%{-webkit-mask-position:-200% 0%;mask-position:-200% 0%}} .d-block{display:block!important} .d-table{display:table!important} .d-flex{display:flex!important} .d-none{display:none!important} .position-relative{position:relative!important} .border{border:1px solid #dee2e6!important} .w-100{width:100%!important} .mx-auto{margin-right:auto!important;margin-left:auto!important} .my-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important} .mt-2{margin-top:.5rem!important} .me-2{margin-right:.5rem!important} .mb-0{margin-bottom:0!important} .mb-2{margin-bottom:.5rem!important} .mb-3{margin-bottom:1rem!important} .pt-0{padding-top:0!important} .text-center{text-align:center!important} .text-danger{--bs-text-opacity:1;color:rgba(var(--bs-danger-rgb),var(--bs-text-opacity))!important} .visible{visibility:visible!important} @media (min-width:768px){.d-md-block{display:block!important}.d-md-none{display:none!important}} /* ================================================================= from style.css ================================================================= */ :root { --primary-black-bg: #313131; --black: #02122e; --font-common: "Inter", sans-serif; } *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; } ul, li { list-style: none; } select, input, select:focus, input:focus, select:active, input:active { outline: none; } input[type=text]:focus, input[type=search]:focus, input[type=password]:focus, input[type=tel]:focus, input[type=email]:focus, select:focus, textarea:focus { background: #fff; box-shadow: none !important; } body { font-family: var(--font-common); font-size: 16px; line-height: normal; scroll-behavior: smooth; color: var(--primary-black); letter-spacing: -0.28px; } /* Form Inputs Reset */ input, textarea, select, button { font-family: inherit; font-size: inherit; color: inherit; background: transparent; border: none; outline: none; } input[type="radio"]:focus, input[type="radio"]:focus-visible { outline: none !important; box-shadow: none !important; } input:focus, input:focus-visible { outline: none !important; box-shadow: none !important; } .cb-package-container { -webkit-tap-highlight-color: transparent; } button:hover { border: none; } /* Responsive Images */ img, video { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } .custom_container { max-width: 1240px; width: 100%; margin: 0 auto; padding: 0 1.5rem; } .section_row { display: flex; column-gap: 3rem; flex-wrap: wrap; align-items: flex-start; } .section_col_left, .section_col_right { width: calc((100% / 2) - 1.5rem); } /* .section_col_left { position: sticky; top: -81%; align-self: flex-start; } */ h1, h2, h3 { font-weight: bold; color: var(--black); } a.order-link:hover, .common-btn.cb-checkout-button:hover { background: #519E4C !important; color: #fff !important; } .logo { width: 256px; margin-top: 0; } /* header end*/ button#paypal_method { padding: 0; } img.i-icon { width: 20px; } .section-checkout { background: #fff4e8; padding: 50px 0; padding-top: 30px !important; } .white-box { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.08); box-shadow: 0px 0px 16px -2px rgba(0, 0, 0, 0.1); border-radius: 4px; padding: 16px; margin-bottom: 16px; } .white-box-one { padding: 20px 15px; } .sm-heading { font-weight: 700; font-size: 14px; line-height: 20px; color: #4E596D; } .top-imgbox { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 10px; justify-content: space-between; } .top-icon { width: 47px; margin-bottom: 9px; } .top-img { display: flex; flex-direction: column; align-items: center; text-align: center; margin: 0 20px; } .discount-wrapper { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; border-top: 1px solid #DFDFDF; margin-top: 30px; padding-top: 20px; } .discount-contentbox { width: calc(100% - 80px); padding-left: 5px; } .discount-text2 { display: flex; flex-direction: row; flex-wrap: wrap; margin-bottom: 5px; } .discount-text2 p{ color: #EC0B43; font-weight: 700; font-size: 15px; line-height: 23px; margin-bottom: 0; width: calc(100% - 20px); padding-left: 5px; } .discount-text2 p span { padding: 0 3px; } .discount-subtext { color: #4E596D; font-weight: 700; font-size: 14px; line-height: 18px; margin-bottom: 0; } .discount-subtext .red { color: #EC0B43; } .discount-subtext .green:not(.promo-sale-price) { padding-right: 3px; } .discount-subtext .green { color: #4ECE7E; } .discount-iconbox { width: 80px; } .discount-iconbox { position: relative; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; z-index: 2; } .discount-percentage { color: #fff; margin-bottom: 0; } .total-discount { color: #fff; position: absolute; top: 25px; /* left: 20px; */ left: 18px; font-weight: 700; font-size: 36px; line-height: 100%; font-family: "Bebas Neue", sans-serif; } .percentage { position: absolute; top: 26px; left: 50px; color: #fff; font-weight: 400; font-size: 20px; line-height: 100%; /* font-family: "Oswald", sans-serif; */ font-family: "Bebas Neue", sans-serif; } .off { position: absolute; top: 44px; left: 50px; color: #fff; font-weight: 400; font-size: 12px; line-height: 100%; /* font-family: "Oswald", sans-serif; */ font-family: "Bebas Neue", sans-serif; } #review { margin-top: 40px; } .feet-relief-img { /* width: 120px; */ width: 100px; height: auto; margin-right: 12px; margin-left: 10px; } span.cb-cart-title { color: #02122E; } .form-control:disabled, .form-control[readonly] { background-color: #fff !important; opacity: 1; } .checkou-hero-pdp { flex-flow: column; width: 100%; max-width: 528px; display: flex; position: relative; } .heading-4 { font-weight: 700; } .heading-4, .pr-name, .pr-price, .total-price { font-size: 16px; line-height: 20px; color: #1b2a43; } #features { border: 1px solid rgba(0, 0, 0, 0.13); padding-top: 0 !important; } .checkout-stack { gap: 0.2rem; flex-flow: column; display: flex; } .checkout-stack h2 { font-size: 16px; color: #1b2a43; font-weight: 700; display: flex; align-items: center; line-height: 20px; margin: 16px 0 10px; } .step-man { width: 22px; height: 22px; margin-right: 5px; } /* checkbox */ .option { border-radius: 0px; background: #fff; margin-bottom: 15px; padding: 0 0 0; display: flex; align-items: center; cursor: pointer; transition: 0.3s; position: relative; border: 2px solid transparent; box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.16); padding-top: 10px; padding-bottom: 10px; } .option input[type="radio"] { display: none; } .option input[type="radio"]:checked+.custom-radio, .option:checked { border: 2px solid #0D403B; } /* .option:has(input[type="radio"]:checked) { border: 2px solid #0D403B; padding: 0 0 0 0; } */ .option.cb-package-container.selected { border: 2px solid #831C13; padding: 10px 0 10px 0; } /* #product4{ padding: 26px 0 0 0; } */ .pkg-top { position: absolute; top: 0; left: 0; right: 0; width: 100%; } .pkg-txt1 { color: #fff; background-color: #831C13; font-weight: 700; font-size: 12px; line-height: 16px; text-align: center; padding: 5px 5px; margin-bottom: 0; } .stock-box { display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; align-items: center; padding: 8px 5px; border: 1px dashed rgba(205, 205, 186, 1); margin-top: 10px; } .stock-low-icon { max-width: 77px; margin-left: 20px; margin-right: 20px; } .stock-box p { color: #0C230E; font-weight: 700; font-size: 18px; line-height: 26px; margin-bottom: 0; } .stock-box p span { color: #EC0B43; } .white-box.white-box-mob { padding: 0; border: none !important; border-bottom: 1px solid rgba(0, 0, 0, 0.13) !important; box-shadow: none; } .feature-listbox { display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; align-items: center; margin-bottom: 20px; } .feature-iconbox { max-width: 80px; height: auto; } .feature-contentbox { width: calc(100% - 80px); padding-left: 15px; } .feature-heading { color: #02122E; font-weight: 700; font-size: 18px; line-height: 26px; margin-bottom: 5px; } .feature-subtext { color: #02122E; font-weight: 400; font-size: 16px; line-height: 20px; margin-bottom: 0; } /* */ .details { flex-grow: 1; display: flex; justify-content: space-between; align-items: center; padding-right: 15px; } .info { display: flex; flex-direction: column; } .info .title { font-size: 15px; color: #1b2a43; line-height: 140%; font-weight: 700; } .info .shipping { font-size: 16px; color: #313131; } .info .shipping strong { font-weight: bold; } .price span { font-weight: 400; } .price-area { text-align: right; } .original-price2 { color: #EC0B43; font-weight: 400; font-size: 12px; line-height: 16px; margin-bottom: 2px; } .discount-percentage { color: #00C249; font-weight: 700; font-size: 16px; line-height: 16px; margin-bottom: 5px; } .price-area .price { font-size: 18px; font-weight: bold; line-height: 24px; color: #1B2A43; margin-bottom: 5px; } .price-area { display: flex; flex-direction: column; } span.shipping { text-transform: uppercase; font-weight: 500; font-size: 12px; line-height: 16px; color: #1B2A43; } .alternet-paymentbox{ position: relative; text-align: center; } .alternet-paymentbox::before { content: ""; position: absolute; top: 30%; left: 0; width: 100%; height: 1px; background-color: #E6E7EA; } .alternet-payment { font-size: 16px; line-height: 20px; color: #02122e; text-align: center; padding: 16px 0; position: relative; z-index: 1; display: inline-block; background-color: #fff; padding: 0 10px; } .payment-heading { color: #02122E; font-weight: 700; font-size: 16px; line-height: 20px; text-align: center; } .express-checkout-inner { grid-column-gap: 1rem; grid-row-gap: 1rem; width: 100%; display: flex; justify-content: space-between; position: relative; } .form-control:focus { border-color: #ccc !important; outline: 0 !important; box-shadow: none !important; } .cc-paypal, .cc-paypal:hover { background-color: transparent !important; } .cc-paypal { background-color: transparent !important; width: auto !important; min-width: 0; padding: 0; cursor: unset !important; } .cc-paypal img { width: 194px; max-width: 100%; height: auto; } .express-checkout-inner .heading-5 { white-space: nowrap; } .heading-5 { font-size: 20px; line-height: 30px; color: #02122e; font-weight: 700; } .broder-bottom { border-bottom: 1px solid #e6e7ea; margin: 10px 0 18px; } /* form */ .white-box.white-box-right { padding: 15px; } .custom-label { font-size: 16px; line-height: 20px; color: #02122e; font-weight: 700; } input::placeholder { color: #9aa0ab; } #payment-form{ padding: 0 0; } .form-group { margin-bottom: 18px; } select { width: 100% !important; padding: 10px 14px !important; font-size: 16px !important; color: #333 !important; background-color: #fff; border: 1px solid #ccc !important; border-radius: 6px !important; appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; background-image: url(../images/checkout/option-arrow.svg) !important; background-repeat: no-repeat !important; background-position: right 7px center !important; background-size: 22px !important; cursor: pointer !important; transition: border-color 0.2s ease, box-shadow 0.2s ease !important; } .form-group-flex { display: flex; column-gap: 10px; justify-content: space-between; } .form-group-flex .form-group { flex: 1; } input#togData { position: relative; margin-right: 5px; -webkit-appearance: none; appearance: none; width: 15px; height: 15px; border: 1px solid #c1c1c1; background: #fff; } input#togData:checked:before { width: 5px; height: 10px; margin: 0px 4px; border-bottom: 2px solid #115c80; border-right: 2px solid #115c80; transform: rotate(45deg); position: absolute; z-index: 5; top: 1px; left: 0; content: ""; background: #fff; border-radius: 0; } input[type=text], input[type=search], input[type=number], input[type=password], input[type=tel], input[type=email], select, input, textare { width: 100% !important; padding: 12px !important; border: 1px solid #ccc !important; border-radius: 4px !important; font-size: 16px !important; font-family: "Inter", sans-serif !important; height: unset !important; color: #02122E !important; } select.no-error { background: url(../images/tick-input.png) 96.5% center no-repeat #fff !important; border: 1px solid green !important; box-shadow: none !important; -webkit-box-shadow: none !important; color: #02122E !important; } /*pulse*/ .pulse { animation-duration: 1.5s; animation-iteration-count: infinite; animation-name: pulse; } @keyframes pulse { 0% { transform: scale(0.9); } 50% { transform: scale(1); } 100% { transform: scale(0.9); } } /* checkbox */ .checkbox-list { display: flex; flex-direction: column; gap: 12px; /* space between rows */ } /* .rvw-left { width: 40px; height: 40px; background-color: #c9c9c9; border-radius: 100%; padding: 21px; } */ .custom-checkbox input { display: none; /* hide default checkbox */ } .terms-a { text-decoration: underline; text-underline-offset: 2px; } .express-checkout { box-sizing: border-box; background: #f8f8f8; border: 1px solid #e6e7ea; border-radius: 4px; padding: 10px 12px; } .heading-4 { width: 97%; } .btn1 { font-size: 20px; line-height: normal; color: #fff; padding: 15px 20px; border-radius: 4px; text-decoration: none; text-align: center; font-weight: 700; text-transform: capitalize; font-family: "Inter", sans-serif; background: #509D4C !important; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); width: 100%; margin: 10px 0 18px; } .btn1:hover, .btn1:focus{ color: #fff; background: #519E4C !important; } .fieldToggle { display: flex; align-items: center; margin-bottom: 25px; } /* Hide the default checkbox */ .fieldToggle input[type="checkbox"] { display: none; } /* Custom box styling */ .fieldToggle .togship { display: inline-block; width: 20px; height: 20px; border: 2px solid #C1C1C1; border-radius: 0; margin-right: 5px; vertical-align: middle; position: relative; cursor: pointer; transition: border-color 0.2s, background-color 0.2s; } /* When checkbox is checked — show checkmark */ .fieldToggle input[type="checkbox"]:checked+.togship { background-color: white; border-color: #C1C1C1; } /* Create the checkmark */ .fieldToggle input[type="checkbox"]:checked+.togship::after { content: ""; position: absolute; left: 6px; top: 0px; width: 6px; height: 14px; border: solid #115C80; border-width: 0 3px 3px 0; transform: rotate(45deg); } .ssl-offer { font-style: normal; font-weight: 700; font-size: 16px; line-height: 20px; display: flex; align-items: center; justify-content: center; text-transform: uppercase; color: #4a4a4a; margin: 26px 0 13px; } .per-detail { color: #4a4a4a; font-size: 14px; line-height: 20px; text-align: center; border-bottom: 1px solid #dfdfdf; padding-bottom: 24px; } .ssl-offer span { color: #25741b; font-weight: 400; margin: 0 4px; } label.custom-checkbox { display: flex; align-items: flex-start; } .agreement-p { font-size: 14px; line-height: 20px; color: #818997; font-weight: 400; width: 100%; } .list-blue li { display: flex; font-size: 16px; line-height: 20px; align-items: flex-start; color: #02122e; gap: 9px; margin-bottom: 14px; } .list-blue li:last-child { margin: 0; } .list-blue { margin: 0; padding: 0; } footer.footer { background: #fff; padding: 40px 0; } .ftr-logo { width: 300px; } .ftr-link { margin-top: 20px; } .ftr-link a { color: #333; padding: 2px 8px; font-size: 16px; font-weight: 700; } .c-text { color: #333; font-size: 16px; font-weight: 700; margin-top: 15px; } .c-text, .dic-text p, .ftr-link, .s3TxtBx .num-cir p { text-align: center; } .dic-text p { color: #717171; font-size: 14px; line-height: 22px; margin-bottom: 0; } /* */ @media (min-width: 992px) {.custom_container { max-width: 960px; }} @media (min-width: 1200px) {.custom_container { max-width: 1140px; }} @media only screen and (min-width: 992px) and (max-width: 1199.99px){.discount-iconbox { width: 66px; }.discount-contentbox { width: calc(100% - 66px); padding-left: 5px; }.total-discount { top: 21px; left: 16px; font-size: 32px; }.percentage { top: 23px; left: 44px; font-size: 18px; }.off { top: 39px; left: 45px; font-size: 10px; }.discount-text2 p { font-size: 13px; line-height: 21px; width: calc(100% - 17px); padding-left: 3px; }.discount-text2 p span { padding: 0 2px; }.discount-subtext { font-size: 13px; line-height: 17px; }.white-box { padding: 16px 10px; }.white-box-one { padding: 20px 10px; }.feet-relief-img { width: 100px; height: auto; margin-right: 10px; }} @media (max-width: 1200px) {.top-img { margin: 0 6px; }.info .title { font-size: 13px; /* line-height: 18px; */ }.info .title p{ margin-bottom: 0; }.discount-percentage { font-size: 13px; line-height: 13px; margin-bottom: 5px; }.price-area .price { font-size: 15px; line-height: 20px; }span.shipping { font-size: 10px; line-height: 12px; }.stock-box p { font-size: 14px; line-height: 20px; }.feature-iconbox { max-width: 70px; height: auto; }.feature-contentbox { width: calc(100% - 70px); padding-left: 10px; }.feature-heading { font-size: 15px; line-height: 20px; }.feature-subtext { color: #02122E; font-weight: 400; font-size: 13px; line-height: 18px; margin-bottom: 0; }.per-detail { font-size: 13px; line-height: 20px; }} @media only screen and (max-width: 991px) and (min-width: 767.99px) {.feet-relief-img { width: 85px; height: auto; margin-right: 5px; }.white-box.white-box-mob { border: none; border-bottom: 1px solid rgba(0, 0, 0, 0.13); box-shadow: none; padding: 0 0 0px; }.details { padding-right: 10px; }.discount-percentage { font-size: 10px; line-height: 11px; }.info .title p { font-size: 10px; }.sm-heading { font-size: 12px; line-height: 18px; }.top-img { margin: 0 3px; }.info .title, .price-area .price { font-size: 12px; /* line-height: 22px; */ }.review-contentsss, .review-titless, .custom-label { font-size: 14px; line-height: 22px; }.heading-4, .pr-name, .pr-price, .total-price { font-size: 12px; }.heading-5 { font-size: 16px; margin-bottom: 0px; }.dic-text p { font-size: 11px; }.logo { width: 187px; }.white-box { padding: 9px; }.top-icon { width: 40px; }span.shipping { font-size: 10px; }} @media (max-width: 767px) {.section_col_left, .section_col_right { width: 100%; }.section_col_left { position: inherit; }.price-area .price { font-size: 14px; }.top-imgbox { flex-wrap: wrap; }.info .title { font-size: 14px; /* line-height: 20px; */ margin-bottom: 3px; }.logo { width: 200px; }.custom_container { padding: 0 12px; }.top-icon { width: 45px; margin-right: 10px; }.white-box-one { flex-wrap: wrap; }.section-checkout { padding: 53px 0 0; }.top-img { margin: 0; flex-direction: row; width: 47%; text-align: left; }.white-box { padding: 10px 12px; }.feet-relief-img { /* width: 120px; */ width: 100px; height: auto; margin-right: 10px; }.details { flex-grow: 1; display: flex; flex-direction: column; justify-content: space-between; align-items: start; padding-right: 15px; }.price-area { display: flex; flex-direction: column; text-align: left; }.price-area .price { font-size: 16px; }.checkou-hero-pdp { grid-row-gap: 1rem; max-width: 100%; }.heading-4, .pr-name, .pr-price, .total-price { font-size: 16px; }.heading-5 { font-size: 18px; }.discount-subtext { padding-left: 25px; }.ftr-link a, .c-text { font-size: 12px; }form { padding: 10px 0 !important; }} @media (max-width: 480px) {.sm-heading { font-size: 11px; line-height: 17px; }.agreement-p { font-size: 11px; line-height: 15px; }.per-detail { font-size: 10px; }.price-area .price { font-size: 13px; }.info .title { font-size: 11px; /* line-height: 20px; */ }span.shipping { font-size: 10px; }.heading-4, .pr-name, .pr-price, .total-price, .custom-label { font-size: 14px; }.white-box.white-box-right, .white-box.order-summery { padding: 16px 12px; }.ftr-logo { width: 250px; }} @media (max-width: 400px) {.discount-text2 p { font-size: 13px; line-height: 20px; }.discount-subtext { font-size: 12px; line-height: 16px; }.stock-box p { font-size: 12px; line-height: 18px; }} /* ================================================================= from app2.css ================================================================= */ :root { color-scheme: light only; } a img, img { height: auto; max-width: 100% } body { margin: 0; padding: 0; font-family: Arial, sans-serif; font-size: 15px } li, ul { list-style-type: none } .left { float: left } .right { float: right } a img, img { border: 0 } .text-center { text-align: center } input[type=text], input[type=search], input[type=number], input[type=password], input[type=tel], input[type=email], select, textarea { background: #FFF; border: 1px solid #a7abad; color: #222; height: 32px; line-height: 22px; width: 100%; font-size: 14px; padding: 3px 8px; outline: 0; font-family: Arial, sans-serif; font-weight: 400; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box } select { line-height: 24px; padding: 4px; height: 32px } input[type=text]:focus, input[type=search]:focus, input[type=password]:focus, input[type=tel]:focus, input[type=email]:focus, select:focus, textarea:focus { background: #fff; box-shadow: 0 0 5px #51cbee; border: 1px solid #51cbee } input.has-error, select.has-error { background: url(../images/error-input.png) 99.5% 50% no-repeat #fff; border: 1px solid orange !important;box-shadow: none !important;-webkit-box-shadow:none !important; } input.no-error { background: url(../images/tick-input.png) 93.5% 50% no-repeat #fff !important; border: 1px solid green !important;box-shadow: none !important;-webkit-box-shadow:none !important; } select.no-error { background: url(../images/tick-input.png) 93.5% 50% no-repeat #fff !important; border: 1px solid green !important; box-shadow: none !important; -webkit-box-shadow: none !important; } #app_common_modal, #error_handler_overlay { position: fixed; top: 0; left: 0; padding: 0; margin: 0; width: 100%; height: 100%; z-index: 2147483647; background: #333; background: rgba(255, 255, 255, .8); display: none; overflow-x: hidden; -webkit-overflow-scrolling: touch } #app_common_modal .app_modal_body, #error_handler_overlay .error_handler_body { max-width: 600px; -webkit-background-clip: padding-box; font-family: Verdana, Geneva, sans-serif; box-sizing: border-box; outline: 0 } #error_handler_overlay .error_handler_body { margin: 100px auto; width: 95%; padding: 20px; background-color: #fff; background-clip: padding-box; border: 1px solid #999; border: 1px solid rgba(0, 0, 0, .2); border-radius: 0; -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5); box-shadow: 0 3px 9px rgba(0, 0, 0, .5); font-size: 14px; line-height: 1.42857143; color: #333; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box } #app_common_modal_close, #error_handler_overlay_close { position: absolute; right: -10px; top: -10px; color: #FFF; background-color: #333; border: 2px solid #FFF; border-radius: 50%; width: 30px; height: 30px; text-align: center; cursor: pointer; text-decoration: none; font-weight: 700; line-height: 27px; padding: 0; margin: 0 } #app_common_modal .app_modal_body { margin: 100px auto; min-width: inherit; width: 95%; min-height: 400px; padding: 2.5%; background-color: #fff; background-clip: padding-box; border: 1px solid #999; border: 1px solid rgba(0, 0, 0, .2); border-radius: 0; -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5); box-shadow: 0 3px 9px rgba(0, 0, 0, .5); font-size: 14px; line-height: 1.42857143; color: #333; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box } .button, button, input[type=button], input[type=submit] { border: 0; width: 100%; display: block; cursor: pointer; position: relative; outline: 0; padding: 20px 15px; background: #2288D0; color: #fff; font-size: 20px } #loading-indicator::after, #loading-indicator::before { box-sizing: border-box; left: 50%; position: absolute; top: 50% } .button:hover, button:hover, input[type=button]:hover, input[type=submit]:hover { background: #2791E4 } #loading-indicator { background-color: rgba(0, 0, 0, .5); bottom: 0; box-sizing: border-box; font-size: 1px; height: 100%; left: 0; margin: 0!important; padding: 0!important; position: fixed; right: 0; top: 0; width: 100%; z-index: 2147483646 } #loading-indicator::before { background: url(../images/loading.gif) center center no-repeat rgba(0, 0, 0, 0); content: ""; height: 70px; margin-left: -35px; margin-top: -70px; width: 70px; z-index: 2 } #loading-indicator::after { background: #fff; border-radius: 5px; color: #000; content: "Processing, one moment please... "; font-family: arial; font-size: 17px; height: 110px; line-height: 98px; margin-left: -150px; margin-top: -75px; padding-top: 35px; text-align: center; width: 300px; z-index: 1 } @media (min-width:1200px){.h2,h2{font-size:2rem}} @media (min-width:1200px){.h3,h3{font-size:1.75rem}} span.cb-inline-error { margin-top: 10px; font-weight: 100; color: #c00; display: block } form { padding: 10px } .d-flex{ display: flex; } @media (max-width:768px){input[type=text], input[type=search], input[type=number], input[type=password], input[type=tel], input[type=email], select, textarea{font-size: 12px;}} /* ================================================================= from bottom-popup.css ================================================================= */ /*****bottom pop css *****/ .w_fomo_wrapper { position: fixed; bottom: 20px; left: 10px; min-width: max-content; background-color: #fff; -webkit-transition: transform .8s ease; -webkit-transition: -webkit-transform .8s ease; transition: -webkit-transform .8s ease; transition: transform .8s ease; transition: transform .8s ease, -webkit-transform .8s ease; z-index: 1001; color: #fff; font-weight: 400; -webkit-transform: translateY(120%); transform: translateY(120%); -webkit-box-shadow: 0 0 5px #6f6f6f; box-shadow: 0 0 5px #6f6f6f; border-radius: 20px; max-width: min-content; width: 100% } .w_item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-flex; -webkit-align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-justify-content: space-between; } .w_thumb{ border-radius: 50%; /* width: 60px; */ } .w_desc p{ margin-bottom: 0; text-align: left; font-size: 13px; color: #000; } .w_fomo_wrapper.notify { -webkit-transform: translateY(0); transform: translateY(0) } .w_fomo_wrapper .w_item { display: table; width: 100% } .w_fomo_wrapper .w_item > div { display: table-cell; vertical-align: middle } .w_fomo_wrapper .w_thumb { height: 100px; background-color: #fff; text-align: center; padding: 0 13px; } .w_fomo_wrapper .w_thumb img { height: 60px; width: 60px; object-fit: cover; margin: 0 auto } .w_fomo_wrapper .w_desc { padding: 10px 10px; font-size: 1.3rem; padding-left: 0; } .w_fomo_wrapper .w_desc strong { color: #000 } @media (max-width:767px){.w_fomo_wrapper { bottom: auto; top: 10px; transform: translateY(-120%); -webkit-transform: translateY(-120%); }} @media (min-width:992px) {.w_fomo_wrapper { top: auto; bottom: 10px }} @media all and (-ms-high-contrast:none), (-ms-high-contrast:active) {.w_fomo_wrapper { width: 300px }} @media(max-width:320px) {.w_fomo_wrapper{ min-width: 300px; max-width: 300px; }} .switch { position: relative; display: inline-block; width: 60px; height: 22px; margin-top: 15px; float: right; } .switch input { opacity: 0; width: 0; height: 0; } @media only screen and (max-width: 480px) {.switch { width: 58px; margin-top: 0; }} /* Country Code Css */ .country-code-container { width: fit-content; height: 100%; font-size: 15px; font-family: Arial, sans-serif; } .countrycode-content-container .country-code-container + input { padding-left: 5px !important; padding-top: 12px !important; padding-bottom: 10px !important; border: none; height: 52px !important; box-shadow: none; border-top-right-radius: 10px !important; border-bottom-right-radius: 10px !important; border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; border: none !important; } .countrycode-content-container .country-code-container + input::placeholder{ color:#222; } .countrycode-content-container { display: flex; background: #FFF; border: 1px solid #ccc; border-radius: 4px; height: 54px; align-items: center; } .frm-flds.form-floating input:focus ~ label, .frm-flds.form-floating select.form-select ~ label, .frm-flds.form-floating input.no-error ~ label, .frm-flds.form-floating select.form-select.no-error ~ label, form-group.form-floating input.has-error + label, .frm-flds.form-floating select.form-select.has-error + label, .frm-flds.form-floating>.form-control:not(:placeholder-shown)~label, .countrycode-content-container input.form-control ~ label { font-size: 13px; padding: 0.60rem; left: 5px; top: -3px; background-color: #fff; opacity: 1; height: auto; line-height: 0; transform: scale(.85) translateY(-.5rem) translateX(.15rem); } /* Form autofill css start*/ input.no-error{ background: none !important; } input.has-error, select.has-error { background: url(../images/error-input.png) 96.5% 50% no-repeat #fff; border: 1px solid red !important; } .no-error-parent{ position: relative; } .no-error-parent::after{ position: absolute; content: ""; top: 55%; right: 10px; background: url(../images/tick-input.png) no-repeat center; height: 20px; width: 25px; background-size: contain; } .countrycode-content-container.has-error-parent{ border: 1px solid red !important; } .countrycode-content-container.no-error-parent{ border: 1px solid green !important; } .countrycode-content-container.no-error-parent::after{ top: 30% !important; } /* ================================================================= from custom2.css ================================================================= */ *, *::before, *::after{ box-sizing:border-box; } .top-icon { width: 63px; margin-bottom: 5px; } .section_col_left, .section_col_right { flex: 1; width: 50%; } .section_col_left, .section_col_right { flex: 1; width: 50%; } .section_row { display: flex; column-gap: 16px; flex-wrap: wrap; align-items: flex-start; } .white-box.white-box-one { padding: 20px 15px; overflow: visible; } .checkout-stack { overflow: visible; } .white-box { padding: 20px; } .discount-wrapper { margin-top: 12px; padding-top: 16px; } .pkg-opt { display: flex; column-gap: 10px; flex-direction: row; /* visual order matches HTML: 2 → 3 → 1 */ align-items: stretch; /* equal card height */ justify-content: space-between; margin-top: 13px; } .option.cb-package-container { display: flex; flex-direction: column; flex: 1 1 0; min-width: 0; /* equal width — no shrink of last card */ width: 100%; max-width: none; border-radius: 5px; padding: 18px 0 0; overflow: visible; /* badges sit on top frame, half outside */ box-sizing: border-box; position: relative; margin-top: 14px; /* space so badge half above border is not clipped */ } .option { flex-direction: column; flex: 1 1 0; border-radius: 5px; padding-top: 20px; padding-bottom: 0; min-width: 0; } .pkg-card-main { display: flex; flex-direction: column; align-items: center; flex: 1 1 auto; width: 100%; padding: 0 6px 8px; } .pkg-card-main .feet-relief-img { margin: 0 0 8px 0; width: 100%; max-width: 140px; height: auto; object-fit: contain; } .pkg-card-main .details { width: 100%; display: flex; flex-direction: column; align-items: center; padding: 0; } .info .title { font-weight: 400; text-align: center; display: block; letter-spacing: .01rem; } .price-area { text-align: center; margin-bottom: 4px; align-items: center; width: 100%; } /* Title: only 2x/3x/1x bold; rest regular #333 Montserrat 16px */ .checkout-stack .info .title p { text-align: center; margin: 8px 0 4px; font-family: "Montserrat", sans-serif; font-size: 16px; line-height: 20px; color: #333333; font-weight: 400 !important; } .checkout-stack .info .title p .pkg-qty { font-weight: 700 !important; color: #333333; font-size: 16px; padding-right: 4px; } .checkout-stack .info .title p b { font-weight: 700 !important; font-size: 16px; line-height: 20px; color: #333333; } /* Show red % OFF badge on packages (was hide-all in custom2); the green affiliate "+25% OFF" pill stacks under it */ .checkout-stack .discount-percentage{ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; margin-bottom: 4px; } .checkout-stack .discount-badge-label, .checkout-stack .discount-bonus-label { display: inline-block; background-color: #EC0B43; color: #fff !important; font-weight: 700; font-size: 12px; line-height: 16px; padding: 2px 8px; border-radius: 4px; text-transform: uppercase; } .checkout-stack .discount-bonus-label { background-color: #28a745; } .checkout-stack .price-area .price.cb-buy-each { color: #28a745; font-size: 22px; font-weight: 700; line-height: 1.2; margin: 0; } .checkout-stack .per-pack-label { color: #818997; font-size: 12px; font-weight: 500; line-height: 1.2; margin: 0 0 4px; min-height: 15px; } .checkout-stack .per-pack-label.per-pack-spacer { visibility: hidden; color: transparent; } /* Total bar — reference: #F5F5F5, ~28px, padding 6px 4px */ .checkout-stack .package-total-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px; width: 100%; margin-top: auto; background-color: #F5F5F5; padding: 6px 4px; min-height: 28px; box-sizing: border-box; } .checkout-stack .package-total-bar .total-price-text, .checkout-stack .package-total-bar .package-total-price, .checkout-stack .package-total-bar .cb-buy { font-family: "Montserrat", sans-serif; font-size: 12px; line-height: 16px; font-weight: 400; color: #8E8E8E; } .checkout-stack .package-total-bar .total-price-text { padding-right: 4px; } .checkout-stack .package-total-bar .cb-reg-price, .checkout-stack .package-total-bar .package-reg-price { color: #EC0B43 !important; text-decoration: line-through; font-family: "Montserrat", sans-serif; font-weight: 400; font-size: 12px; line-height: 16px; margin-left: 4px; padding: 0; } .discount-text2, .discount-subtext .red { color: #EC0B43; } .info .title p b { font-size: 16px; line-height: 20px; color: #333333; } .feet-relief-img { width: 120px; height: auto; margin: 0 16px 11px 0; } .discount-text2 { color: #EC0B43; font-size: 16px; font-weight: 700; line-height: 24px; margin: 0 0 5px 0; border: none; text-decoration: none; width: auto; max-width: 100%; font-family: Montserrat, sans-serif; } .discount-contentbox { padding-left: 15px; } .feature-heading, .feature-subtext { color: #121212; } .price-area .price { font-size: 24px; font-weight: bold; line-height: 30px; color: #4ECE7E; margin: 0; } .discount-subtext .green { color: #4ECE7E; } .discount-subtext .promo-retail-price, span.promo-retail-price { color: #4A4A4A; text-decoration: line-through; text-decoration-thickness: 1.3px; } .discount-subtext .promo-sale-price, .discount-subtext .cb-product-price-bundle, .discount-subtext .green { text-decoration: none !important; color: #4ECE7E; } .stock-low-icon { max-width: 26px; margin-left: 0; margin-right: 9px; width: 26px; height: 26px; } /* payment btn */ .expressCheckout { display: flex; gap: 15px; } .paymentBtn { flex: 1; height: 52px; border: none; border-radius: 4px; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: opacity .3s; } .paymentBtn img { max-height: 26px; width: auto; } .paypalBtn { background: #FFC43A; gap: 8px; animation: none !important; } .paypalBtn .paypal-pay-with { color: #253B80; font-family: "Montserrat", sans-serif; font-size: 16px; font-weight: 700; line-height: 1; white-space: nowrap; } .paypalBtn.pulse, #paypal_method.pulse, button.paypalBtn { animation: none !important; } button.paypalBtn:hover { background: #ffb60a; } /* If PayPal is the only button, it fills the row */ .paypalBtn:only-child { flex: 0 0 100%; } /* payment btn end */ .details { flex-grow: 1; justify-content: end; align-items: center; padding-right: 0; flex-direction: column; } .stock-inner { align-items: center; margin-bottom: 15px; } .stock-box .stock-inner p, .stock-box .stock-title { font-weight: 700 !important; font-size: 18px; line-height: 26px; color: #28B2D8; } .stock-box .stock-title strong, .stock-box .stock-inner p strong { font-weight: 700 !important; color: #28B2D8; } .discount-text2 { align-items: center; margin-bottom: 6px; } /* Body: regular; only .stock-emphasis is bold (must override .stock-box p { 700 } in style.css) */ .stock-box p.stock-copy { font-weight: 400 !important; font-size: 16px; line-height: 20px; color: #121212; } .stock-box p.stock-copy .stock-emphasis, .stock-box p.stock-copy strong.stock-emphasis { font-weight: 700 !important; color: #121212; } .discount-percentage { color: #bf4800; font-weight: 600; font-size: 16px; line-height: 1.2; margin-bottom: 5px; } .discount-subtext { line-height: 22px; font-size: 16px; color: #4A4A4A; font-weight: 700; font-family: Montserrat, sans-serif; margin: 0; } .pkg-txt1 { color: #fff; background-color: #007FFD; font-weight: 700; font-size: 12px; line-height: 16px; text-align: center; padding: 4px 10px; border-radius: 5px; max-width: 123px; margin: 0 auto; font-family: "Montserrat", sans-serif; text-transform: uppercase; } .pkg-txt1.pkg-badge-popular { background-color: #1B7F5A; } .pkg-txt1.pkg-badge-value { background-color: #007FFD; } .pkg-txt1.pkg-badge-spacer { background-color: transparent !important; color: transparent !important; visibility: hidden; } /* Badge centered on top border (half above / half below frame) */ .checkout-stack .pkg-top { position: absolute; top: 0; left: 0; right: 0; width: 100%; z-index: 3; transform: translateY(-50%); min-height: 0; margin: 0; pointer-events: none; } .checkout-stack .pkg-top .pkg-txt1 { pointer-events: auto; } .checkout-stack .pkg-opt { overflow: visible; padding-top: 4px; } .original-price2 { color: #EC0B43; font-size: 12px; line-height: 16px; text-decoration: line-through; padding: 0; } .stock-box { justify-content: start; border: 1px dashed #28b2d8; margin-top: 2px; padding: 20px; } .option.cb-package-container.selected { border: 2px solid #28a745; padding-top: 18px; padding-bottom: 0; } label#product2, label#product3, label#product1 { padding-top: 18px; padding-bottom: 0; } .payment-heading { color: #121212; } .heading-4, .pr-name, .pr-price, .total-price { font-size: 16px; line-height: 20px; color: #121212; } .list-blue li { color: #121212; margin-bottom: 0; } @media (min-width: 1200px) {.custom_container { max-width: 1200px; }.ftr-logo { width: 188px; }} @media (max-width: 1199px){.discount-text2 p { font-size: 12px; line-height: 23px; margin-bottom: 0; width: calc(100% - 32px); margin-left: 5px; }.discount-text2 span { width: 16px; }.discount-subtext { line-height: 22px; font-size: 12px; }} @media (max-width: 991px){.section_row { gap: 1px; flex-direction: column; }.checkou-hero-pdp { max-width: 100%; }.white-box.white-box-right { padding: 15px; }.option { margin-bottom: 11px; }.alternet-payment { margin-bottom: 0; }.discount-subtext { line-height: 22px; font-size: 16px; color: #4A4A4A; font-weight: 700; padding-left: 0; margin: 0; font-family: Montserrat, sans-serif; }form { padding: 3px 0 !important; }.sm-heading { font-size: 14px; line-height: 20px; }.section_col_left, .section_col_right { width: 100%; }.discount-subtext .red, span.red { display: inline; font-size: inherit; color: #EC0B43; font-weight: 700; }.pkg-txt1 { padding: 4px 8px; max-width: 122px; }.feet-relief-img { width: 192px; }.white-box { padding: 16px 16px; }.pkg-opt { gap: 4px; flex-direction: column; /* 2 → 3 → 1 top to bottom on mobile */ }.checkout-stack .option.cb-package-container { flex-direction: column !important; width: 100%; max-width: 100%; }.checkout-stack .pkg-card-main { flex-direction: row; align-items: center; /* image + details vertically centered as a pair */ justify-content: flex-start; gap: 10px; padding: 14px 12px 12px; width: 100%; box-sizing: border-box; }.checkout-stack .pkg-card-main .feet-relief-img { max-width: 118px; width: 38%; margin: 0; flex-shrink: 0; align-self: center; }.checkout-stack .pkg-card-main .details { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; align-items: center; /* NO left edge — center the whole content stack */ align-self: center; text-align: center; min-height: 0; height: auto; padding: 0; gap: 2px; }.checkout-stack .info { width: 100%; display: flex; justify-content: center; }.checkout-stack .info .title { text-align: center; width: 100%; }.checkout-stack .info .title p { margin: 0 0 4px; font-size: 15px !important; line-height: 1.3 !important; font-weight: 400 !important; color: #333 !important; text-align: center !important; }.checkout-stack .info .title p .pkg-qty { font-weight: 700 !important; font-size: inherit; padding-right: 3px; }.checkout-stack .info .title p .pkg-name-line { font-weight: 400; display: inline-block; white-space: nowrap; /* keep "Coffee Boost (60 sachets)" on one line */ }.checkout-stack .price-area { display: flex; flex-direction: column; align-items: center; /* center % OFF, price, / per pack */ justify-content: center; text-align: center; margin: 0; gap: 0; width: 100%; }.checkout-stack .discount-percentage { justify-content: center !important; margin: 0 0 3px !important; width: 100%; }.checkout-stack .discount-badge-label, .checkout-stack .discount-bonus-label { font-size: 12px !important; line-height: 16px !important; padding: 3px 8px !important; }.checkout-stack .price-area .price.cb-buy-each { font-size: 26px !important; line-height: 1.1 !important; font-weight: 700 !important; color: #28a745 !important; margin: 0 !important; text-align: center !important; width: 100%; }.checkout-stack .per-pack-label { margin: 0 !important; font-size: 12px !important; line-height: 1.2 !important; color: #818997 !important; text-align: center !important; width: 100%; }.checkout-stack .package-total-bar { margin-top: 0; }.stock-box p { font-size: 14px; }.stock-box { padding: 10px 12px; }.stock-low-icon { margin-left: 0; }.price-area .price { margin: 0; }.discount-text2 { text-decoration: none; max-width: 100%; width: auto; border: none; line-height: 1.35; font-size: 16px; font-weight: 700; color: #EC0B43; margin: 0 0 6px 0; }.discount-text2 { margin-bottom: 6px; align-items: flex-start; }.discount-iconbox { width: 88px; min-width: 88px; height: 88px; position: relative; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }.discount-iconbox .add-percentage-icon { width: 100%; height: auto; display: block; }.discount-iconbox .discount-percentage { position: absolute; inset: 0; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; color: #fff; line-height: 1; text-align: center; pointer-events: none; z-index: 1; }.discount-iconbox .discount-pct-row { display: flex; align-items: flex-start; justify-content: center; line-height: 1; }.discount-iconbox .total-discount, .discount-iconbox .percentage, .discount-iconbox .off { position: static !important; top: auto !important; left: auto !important; color: #fff; font-family: Inter, "Bebas Neue", sans-serif; font-weight: 700; line-height: 1; }.discount-iconbox .total-discount { font-size: 28px; font-weight: 800; }.discount-iconbox .percentage { font-size: 14px; margin-top: 3px; margin-left: 1px; }.discount-iconbox .off { font-size: 11px; letter-spacing: 0.04em; margin-top: 1px; }.discount-contentbox { width: calc(100% - 88px); padding-left: 12px; flex: 1; }.total-discount { top: 33px; left: 24px; }.percentage { top: 35px; left: 60px; }.off { top: 54px; left: 59px; }.discount-percentage { font-size: 15px; }.top-icon { width: 56px; }.top-imgbox .top-img:nth-child(1) { order: 3; }.top-imgbox .top-img:nth-child(2) { order: 4; }.top-imgbox .top-img:nth-child(3) { order: 1; }.top-imgbox .top-img:nth-child(4) { order: 2; }.feet-relief-img { margin: 0 3px 3px 0; }.original-price2 { line-height: 20px; padding: 0; }.stock-inner { margin-bottom: 8px; }.white-box { margin-bottom: 12px; }} @media(max-width: 767px){.feet-relief-img { width: 162px; }.ftr-link a { padding: 2px 3px; }.pkg-top { top: 0; transform: translateY(-50%); }.white-box.white-box-one { padding: 15px; }.section-checkout { padding-top: 15px !important; }.original-price2 { font-size: 16px; line-height: 24px; }} @media(max-width: 424px){.info .title p, .price-area { font-size: 15px; }.stock-box p { font-size: 14px; line-height: 20px; }.stock-box .stock-inner p { font-size: 14px; line-height: 20px; }} @media (max-width: 398px){.discount-text2 p { font-size: 14px; line-height: 22px; }.sm-heading { font-size: 12px; }} @media (max-width: 374px){.info .title p, .price-area, .discount-percentage { font-size: 13px; }.discount-subtext { font-size: 11px; }} .off { font-family: var(--font-common); font-size: 10px; } .percentage { font-family: var(--font-common); font-size: 16px; } .total-discount { font-weight: 500; } @media(min-width:768px) {.off { font-family: var(--font-common); font-size: 8px; }} @media(max-width:767px) {.total-discount { font-weight: 500; }} /* Scarcity top banner — match reference (Wellaray) */ .banner-coffee-booster { background-color: #D6293A; padding: 11px 0; width: 100%; text-align: center; box-sizing: border-box; } .coffee-banner-text { color: #FFFFFF; font-family: Inter, sans-serif; font-size: 18px; font-weight: 400; line-height: 1.45; margin: 0; padding: 0 12px; } .coffee-banner-text strong { font-weight: 700; } @media (max-width: 575.98px) {.coffee-banner-text { font-size: 14px; line-height: 1.35; }} /* Promo block: circular badge, no underline, no checkbox (match competitor) */ .discount-wrapper { align-items: center; } .discount-iconbox { width: 90px; min-width: 90px; height: 90px; position: relative; display: flex; align-items: center; justify-content: center; flex-shrink: 0; z-index: 2; } .discount-iconbox .add-percentage-icon { width: 100%; height: auto; display: block; } .discount-iconbox .discount-percentage { position: absolute !important; inset: 0; margin: 0 !important; padding: 0; display: flex !important; flex-direction: column; align-items: center; justify-content: center; color: #fff !important; line-height: 1; text-align: center; pointer-events: none; z-index: 1; } .discount-iconbox .discount-pct-row { display: inline-flex; align-items: flex-start; justify-content: center; } .discount-iconbox .total-discount, .discount-iconbox .percentage, .discount-iconbox .off { position: static !important; top: auto !important; left: auto !important; color: #fff !important; font-family: "Montserrat", sans-serif !important; font-weight: 900 !important; line-height: 1 !important; } /* Match ref: #discountBadge 24px Montserrat; .discount-text-bottom 20px Montserrat */ .discount-iconbox .total-discount { font-size: 24px !important; font-weight: 900 !important; } .discount-iconbox .percentage { font-size: 24px !important; font-weight: 900 !important; margin-top: 0; margin-left: 0; } .discount-iconbox .off { font-size: 20px !important; font-weight: 900 !important; letter-spacing: 0; margin-top: 0; display: block; } /* Gated affiliate discount (checkout-now-v7.php $bonusDiscount): "+25%" between the percent and OFF, with the two shrunk so the three rows fit the 90px circle */ .discount-iconbox .discount-bonus-row { display: block; color: #fff !important; font-family: "Montserrat", sans-serif !important; font-weight: 900 !important; font-size: 13px !important; line-height: 1 !important; margin: 2px 0 1px; } .discount-iconbox.has-bonus .total-discount, .discount-iconbox.has-bonus .percentage { font-size: 22px !important; } .discount-iconbox.has-bonus .off { font-size: 14px !important; } .discount-contentbox { width: calc(100% - 90px); max-width: none; padding-left: 14px; flex: 1; } .discount-text2 { color: #EC0B43 !important; font-size: 16px !important; font-weight: 700 !important; line-height: 24px !important; margin: 0 0 5px 0 !important; padding: 0 !important; width: auto !important; max-width: 100% !important; border: none !important; border-bottom: none !important; text-decoration: none !important; font-family: Montserrat, sans-serif !important; } .discount-text2 span { width: auto !important; padding: 0; font-size: inherit !important; font-weight: inherit !important; line-height: inherit !important; color: inherit !important; } .discount-subtext { color: #4A4A4A !important; font-weight: 700 !important; font-size: 16px !important; line-height: 22px !important; margin: 0 !important; font-family: Montserrat, sans-serif !important; } .discount-subtext .red { color: #EC0B43 !important; font-weight: 700 !important; display: inline !important; font-size: inherit !important; line-height: inherit !important; } .discount-subtext .promo-retail-price { margin-right: 0.15em; color: #4A4A4A !important; } /* Desktop: normal wrap for sentence; only "(70% Discount)" drops alone */ @media (min-width: 992px) {.discount-subtext { white-space: normal !important; overflow: visible !important; word-break: normal !important; overflow-wrap: normal !important; }.discount-subtext .promo-discount-suffix { display: block; white-space: nowrap; }} @media (max-width: 991px) {.discount-subtext .promo-discount-suffix { display: inline; }} .discount-contentbox { min-width: 0; overflow: visible; } /* PayPal: no pulse */ #paypal_method.pulse, .paypalBtn.pulse, button.paypalBtn { animation: none !important; } @media (max-width: 991px) {.discount-iconbox { width: 80px; min-width: 80px; height: 80px; }.discount-contentbox { width: calc(100% - 80px); padding-left: 10px; }.discount-iconbox .total-discount, .discount-iconbox .percentage { font-size: 22px !important; }.discount-iconbox .off { font-size: 16px !important; }.discount-text2 { font-size: 16px !important; line-height: 24px !important; }.discount-subtext { font-size: 16px !important; line-height: 22px !important; }.checkout-stack .option.cb-package-container { padding-bottom: 0 !important; }.checkout-stack .pkg-card-main { align-items: center !important; }.checkout-stack .pkg-card-main .details { justify-content: center !important; align-items: center !important; align-self: center !important; text-align: center !important; height: auto !important; min-height: 0 !important; flex-grow: 0 !important; }.checkout-stack .info .title p, .checkout-stack .price-area, .checkout-stack .price-area .price.cb-buy-each, .checkout-stack .per-pack-label { text-align: center !important; }.checkout-stack .price-area { align-items: center !important; }.checkout-stack .discount-percentage { justify-content: center !important; }} /* iPhone 12 / 390: force package title = exactly 2 lines (like iPhone 14) */ @media (max-width: 430px) {.checkout-stack .pkg-card-main { gap: 8px !important; padding: 12px 8px 10px !important; }.checkout-stack .pkg-card-main .feet-relief-img { max-width: 96px !important; width: 32% !important; }.checkout-stack .info .title p { font-size: 13px !important; line-height: 1.25 !important; }.checkout-stack .info .title p .pkg-name-line { display: block !important; white-space: nowrap !important; font-size: 13px !important; line-height: 1.25 !important; }.checkout-stack .price-area .price.cb-buy-each { font-size: 24px !important; }} @media (max-width: 389px) {.checkout-stack .pkg-card-main .feet-relief-img { max-width: 88px !important; width: 30% !important; }.checkout-stack .info .title p, .checkout-stack .info .title p .pkg-name-line { font-size: 12px !important; }} @media (max-width: 575.98px) {.discount-iconbox { width: 74px; min-width: 74px; height: 74px; }.discount-contentbox { width: calc(100% - 74px); padding-left: 8px; }.discount-iconbox .total-discount, .discount-iconbox .percentage { font-size: 20px !important; }.discount-iconbox .off { font-size: 14px !important; }.discount-text2 { font-size: 16px !important; line-height: 22px !important; }.discount-subtext { font-size: 16px !important; line-height: 22px !important; }} /* iPhone 12 / narrow phones (~390): keep promo like iPhone 14 (one-line header, tidy wraps) */ @media (max-width: 430px) {.discount-wrapper { align-items: center !important; gap: 0; }.discount-iconbox { width: 64px !important; min-width: 64px !important; height: 64px !important; flex-shrink: 0; }.discount-contentbox { width: calc(100% - 64px) !important; max-width: none !important; padding-left: 10px !important; flex: 1 1 auto !important; min-width: 0; /* allow text to use remaining width without overflow glitches */ }.discount-iconbox .total-discount, .discount-iconbox .percentage { font-size: 17px !important; }.discount-iconbox .off { font-size: 12px !important; }.discount-text2 { font-size: 13px !important; line-height: 18px !important; white-space: nowrap !important; overflow: visible !important; margin: 0 0 4px 0 !important; letter-spacing: -0.01em; }.discount-subtext { font-size: 13px !important; line-height: 18px !important; font-weight: 700 !important; color: #4A4A4A !important; text-align: left !important; word-break: normal; overflow-wrap: break-word; }.discount-subtext .red.nowrap-label, .discount-subtext .red { white-space: nowrap; }.discount-subtext .promo-retail-price, .discount-subtext .promo-sale-price { white-space: nowrap; }} @media (max-width: 389px) {.discount-text2 { font-size: 12px !important; letter-spacing: -0.02em; }.discount-subtext { font-size: 12px !important; line-height: 17px !important; }.discount-iconbox { width: 58px !important; min-width: 58px !important; height: 58px !important; }.discount-contentbox { width: calc(100% - 58px) !important; padding-left: 8px !important; }} /* * Validation ticks: * Text fields use .no-error-parent::after. style.css/app2.css also paint a tick * as select.no-error background, so Country showed two checks (and the extra * one sat on the dropdown, not aligned with Address/City). * Zip sits in .form-group-flex — keep overflow visible so the same ::after * tick is not clipped. */ #payment-form .form-group.no-error-parent, #payment-form .form-group:has(> select.no-error:not([name="creditCardType"]):not([name="expmonth"]):not([name="expyear"])), #payment-form .form-group-flex, #payment-form .form-group-flex .form-group { position: relative; overflow: visible; } #payment-form .form-group.no-error-parent > input.no-error, #payment-form .form-group.no-error-parent > .form-control.no-error, #payment-form .form-group.no-error-parent > .input-flds.no-error, #payment-form .form-group.no-error-parent > select.no-error, #payment-form .form-group.no-error-parent > .form-select.no-error, #payment-form select.no-error { background-image: none !important; background-color: #fff !important; } #payment-form .form-group.no-error-parent::after, #payment-form .form-group:has(> select.no-error:not([name="creditCardType"]):not([name="expmonth"]):not([name="expyear"]))::after { content: "" !important; display: block !important; position: absolute !important; top: 55% !important; right: 10px !important; width: 25px !important; height: 20px !important; background: url(../images/tick-input.png) no-repeat center !important; background-size: contain !important; pointer-events: none !important; z-index: 3; } #payment-form .form-group-flex .form-group.no-error-parent::after { right: 10px !important; z-index: 3; } #payment-form .countrycode-content-container.no-error-parent::after { top: 30% !important; } /* ---- Carried over from the retired custom.css (the rest of that file styled the removed exit popup) ---- */ select { position: relative; } #error_handler_overlay .error_handler_body ul { padding: 1em; } #app_common_modal_close, #error_handler_overlay_close { display: flex; justify-content: center; align-items: center; } /* ---- Phase 2: moved out of the page's inline