File: /var/www/html/CW-techs/wp-content/themes/cw-techs/scss/chekout.scss
@import 'partials';
.checkout-details{
@media($sm-991){
width: 100%;
}
.back-btn{
padding: 60px 0px;
@media($sm-1679){
padding: 40px 0px;
}
@media($sm-1441){
padding: 30px 0px;
}
@media($sm-1199){
padding: 20px 0px;
}
.back-to-home{
font-family: $primary-font;
font-weight: 500;
font-size: 16px;
line-height: 100%;
letter-spacing: 0%;
color: #fff;
text-decoration: none;
@media($sm-1679){
font-size: 14px;
}
@media($sm-1441){
font-size: 12px;
}
}
}
.card-section {
background-color: #18181A;
padding: 40px 60px;
border-radius: 38px;
margin-bottom: 22px;
@media($sm-1679){
padding: 30px 50px;
}
@media($sm-1441){
padding: 20px 40px;
}
@media($sm-1199){
padding: 20px;
}
.title-sec{
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 30px;
@media($sm-1679){
padding-bottom: 25px;
}
@media($sm-1441){
padding-bottom: 20px;
}
@media(max-width:379px){
flex-wrap: wrap;
}
.checkout-title{
font-family: $primary-font;
font-weight: 600;
font-size: 24px;
line-height: 52px;
letter-spacing: 0%;
vertical-align: middle;
text-transform: capitalize;
color: #fff;
@media($sm-1679){
font-size: 22px;
}
@media($sm-1441){
font-size: 20px;
}
@media($sm-1199){
font-size: 18px;
}
@media($sm-991){
font-size: 16px;
}
@media($sm-767){
font-size: 14px;
margin-bottom: 0px;
line-height: 30px;
}
}
.add-address{
background-color: #2F2F32;
height: 38px;
width: 190px;
color: #fff;
border-radius: 19px;
display: flex;
align-items: center;
justify-content: center;
font-family: $primary-font;
font-weight: 500;
font-size: 16px;
line-height: 100%;
letter-spacing: 0%;
text-transform: capitalize;
@media($sm-1679){
height: 36px;
font-size: 14px;
}
@media($sm-1441){
height: 34px;
font-size: 12px;
}
@media($sm-1199){
height: 32px;
}
@media(max-width:379px){
width: 100%;
}
}
}
.address-box{
display: flex;
align-items: center;
justify-content: space-between;
background: #1F1F22;
padding: 23px 26px;
border-radius: 12px;
border: 1px solid #1F1F22;
margin-bottom: 22px;
@media($sm-1679){
padding: 20px 24px;
}
@media($sm-1441){
padding: 18px 20px;
}
@media($sm-1199){
padding: 15px;
}
@media($sm-579){
flex-wrap: wrap;
}
&.address-active{
border: 1px solid #CD6429;
}
.address-col{
display: flex;
align-items: center;
;
.img-sec{
width: 45px;
height: 45px;
border-radius: 7px;
background-color: #2C2C30;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-right: 19px;
@media($sm-1679){
width: 42px;
height: 42px;
}
@media($sm-1441){
width: 40px;
height: 40px;
}
@media($sm-1199){
width: 38px;
height: 38px;
}
@media($sm-991){
width: 36px;
height: 36px;
}
}
.content-sec{
.address-txt ,.phn-nmbr{
font-family: $primary-font;
font-weight: 400;
font-size: 16px;
line-height: 24px;
letter-spacing: 0%;
text-transform: uppercase;
color: #fff;
margin-bottom: 0px;
@media($sm-1679){
font-size: 14px;
line-height: 22px;
}
@media($sm-1441){
font-size: 12px;
line-height: 18px;
}
}
}
}
.rt-sec{
display: flex;
align-items: center;
@media($sm-579){
padding-top: 10px;
}
.delivery-btn{
background-color: $primary;
color: $white;
height: 38px;
width: 190px;
display: flex;
align-items: center;
justify-content: center;
font-family: $primary-font;
font-weight: 500;
font-size: 16px;
line-height: 100%;
letter-spacing: 0%;
text-transform: capitalize;
border-radius: 19px;
@media($sm-1679){
height: 36px;
font-size: 14px;
}
@media($sm-1441){
height: 34px;
font-size: 12px;
}
}
}
.edit-btn{
background-color: #28282C;
border-radius: 19px;
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
flex-shrink: 0px;
margin-right: 12px;
@media($sm-1679){
width: 36px;
height: 36px;
}
@media($sm-1441){
width: 34px;
height: 34px;
}
@media($sm-1199){
width: 32px;
height: 32px;
padding: 0;
flex-shrink: 0px;
img{
width: 12px;
}
}
}
}
.card-form{
max-width: 70%;
@media($sm-1199){
max-width: 100%;
}
.card-inner{
.form-grp{
@media($sm-767){
width: 100%;
}
}
}
.form-group{
margin-bottom: 30px;
@media($sm-1679){
margin-bottom: 25px;
}
@media($sm-1441){
margin-bottom: 20px;
}
@media($sm-1199){
margin-bottom: 15px;
}
}
.form-control , .form-select{
border: 1px solid #2E2E34;
height: 62px;
display: flex;
align-items: center;
padding-left: 40px;
font-family: $primary-font;
font-weight: 500;
font-size: 16px;
line-height: 100%;
background-color: transparent;
letter-spacing: 0%;
color: #fff;
border-radius: 50px;
&::placeholder{
color: #404046;
}
&:focus{
box-shadow: none;
border: 1px solid $primary;
}
@media($sm-1679){
font-size: 14px;
// padding-left: 30px;
height: 58px;
}
@media($sm-1481){
height: 52px;
font-size: 12px;
padding-left: 45px;
}
@media($sm-1199){
height: 48px;
// padding-left: 10px;
}
}
.form-grp{
position: relative;
.select-inner{
display: flex;
align-items: center;
.form-select{
padding-left: 15px;
@media($sm-1481){
padding-left: 10px;
font-size: 11px;
}
&.lt-select{
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
}
&.rt-select{
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
border-left: 0px;
}
}
}
.form-icon {
position: absolute;
left: 29px;
top: 50%;
transform: translateY(-50%);
color: #888;
width: 20px;
height: 18px;
display: flex;
align-items: center;
@media($sm-1679){
top: 51%;
}
@media($sm-1481){
top: 54%;
}
@media($sm-1199){
top: 58%;
}
img{
width: 100%;
height: 100%;
object-fit: contain;
}
}
.form-label{
font-family: $primary-font;
font-weight: 500;
font-size: 16px;
line-height: 100%;
letter-spacing: 0%;
color: #fff;
@media($sm-1679){
font-size: 14px;
}
@media($sm-1441){
font-size: 14px;
}
}
}
}
}
.card-wrp{
display: flex;
@media($sm-1199){
flex-wrap: wrap;
}
.save-card-sec{
flex: 1;
margin-left: 57px;
@media($sm-1679){
margin-left: 20px;
}
@media($sm-1441){
margin-left: 10px;
}
@media($sm-1199){
margin-left: 0px;
width: 100%;
}
// @media($sm-991){
// margin-left: 0px;
// }
// @media($sm-767){
// margin-left: 0px;
// width: 100%;
// }
.save-card-detail{
display: flex;
align-items: center;
justify-content: space-between;
.save-txt{
font-family: $primary-font;
font-weight: 500;
font-size: 16px;
line-height: 100%;
letter-spacing: 0%;
text-transform: capitalize;
color: #fff;
@media($sm-1679){
font-size: 14px;
}
@media($sm-1441){
font-size: 12px;
}
}
.all-txt{
font-family: $primary-font;
font-weight: 500;
font-size: 14px;
line-height: 100%;
letter-spacing: 0%;
text-decoration: underline;
color: #CD6429;
@media($sm-1679){
font-size: 13px;
}
@media($sm-1441){
font-size: 12px;
}
}
}
.save-card{
background-color: #212123;
border-radius: 12px;
padding: 16px 22px;
display: flex;
align-items: center;
margin-bottom: 11px;
@media($sm-1679){
padding: 12px 18px;
}
@media($sm-1441){
padding: 10px 10px;
}
.visa-detial{
margin-left: 18px;
@media($sm-1679){
margin-left: 16px;
}
@media($sm-1441){
margin-left: 14px;
}
@media($sm-1199){
margin-left: 12px;
}
@media($sm-991){
margin-left: 10px;
}
.txt , .crd-nmbr{
font-family: $primary-font;
font-weight: 500;
font-size: 14px;
line-height: 100%;
letter-spacing: 0%;
color: #fff;
@media($sm-1679){
font-size: 13px;
}
@media($sm-1441){
font-size: 11px;
}
}
.crd-nmbr{
color:#3F3F44;
margin-top: 5px;
.last-digit{
color: #fff;
}
}
}
}
}
}
.right-sec{
.top-sec{
display: flex;
align-items: center;
justify-content: space-between;
background: #18181A;
padding: 21px 30px;
border-radius: 20px;
margin-bottom: 26px;
@media($sm-1679){
padding: 15px 20px;
}
@media($sm-1441){
padding: 10px 15px;
}
.col-sec{
display: flex;
align-items: center;
.left-ico{
width: 59px;
height: 59px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 11px;
background-color: #232326;
flex-shrink: 0px;
@media($sm-1679){
width: 52px;
height: 52px;
}
@media($sm-1441){
width: 48px;
height: 48px;
}
@media($sm-1199){
width: 42px;
height: 42px;
}
}
.rt-content{
margin-left: 19px;
@media($sm-1679){
margin-left: 15px;
}
@media($sm-1441){
margin-left: 10px;
}
@media($sm-1199){
margin-left: 8px;
}
.rt-title{
font-family: $primary-font;
font-weight: 600;
font-size: 24px;
letter-spacing: 0%;
vertical-align: middle;
text-transform: capitalize;
color: #fff;
@media($sm-1679){
font-size: 22px;
}
@media($sm-1441){
font-size: 20px;
}
@media($sm-1199){
font-size: 18px;
}
@media($sm-991){
font-size: 16px;
}
@media($sm-767){
font-size: 14px;
}
}
.exp-cont{
font-family: $primary-font;
font-weight: 400;
font-size: 16px;
letter-spacing: 0%;
vertical-align: middle;
text-transform: capitalize;
color: #606069;
@media($sm-1679){
font-size: 14px;
}
@media($sm-1441){
font-size: 12px;
}
.date{
color: #fff;
}
}
}
}
}
.cart-summary{
background: #18181A;
border-radius: 28px;
.card-details,.totl-sec{
display: flex;
justify-content: space-between;
color: #606069;
padding: 21px 42px;
@media($sm-1679){
margin-left: 40px;
padding: 18px 35px;
}
@media($sm-1441){
margin-left: 35px;
padding: 16px 30px;
}
@media($sm-1199){
margin-left: 30px;
padding: 16px 20px;
}
@media($sm-991){
margin-left: 25px;
padding: 15px;
flex-wrap: wrap;
}
.total-amount-txt,.totl-amunt{
font-weight: 500;
font-size: 20px;
line-height: 32px;
letter-spacing: 0%;
vertical-align: middle;
text-transform: capitalize;
font-family: $primary-font;
word-break: break-all;
@media($sm-1679){
font-size: 18px;
}
@media($sm-1441){
font-size: 16px;
}
@media($sm-1199){
font-size: 14px;
}
}
}
.totl-sec{
border-top: 1px dashed #343437;
}
}
.checkout-sec{
// margin-left: 50px;
// @media($sm-1679){
// margin-left: 40px;
// }
// @media($sm-1441){
// margin-left: 30px;
// }
// @media($sm-1199){
// margin-left: 20px;
// }
// @media($sm-579){
// margin-left: 0px;
// }
.checkout-btn{
background-color: #CD6429;
border: 1px solid #CD6429;
height: 62px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-weight: 500;
font-size: 16px;
line-height: 100%;
font-family: $primary-font;
letter-spacing: 0%;
width: 100%;
border-radius: 50px;
margin-top: 22px;
@media($sm-1679){
height: 48px;
}
@media($sm-1441){
height: 42px;
}
@media($sm-1199){
height: 38px;
}
}
}
}
}
.woocommerce form .form-row .input-text, .woocommerce form .form-row select{
border: 1px solid #2E2E34 !important;
height: 62px !important;
display: flex;
align-items: center;
padding-left: 40px;
font-family: "Schibsted Grotesk", sans-serif;
font-weight: 500;
font-size: 16px;
line-height: 100%;
background-color: transparent !important;
letter-spacing: 0%;
color: #fff;
border-radius: 50px;
margin-bottom: 0px;
&::placeholder{
color: #404046;
}
&:focus{
box-shadow: none;
border: 1px solid $primary;
}
@media($sm-1679){
font-size: 14px;
// padding-left: 30px;
height: 58px;
}
@media($sm-1481){
height: 52px;
font-size: 12px;
padding-left: 45px;
}
@media($sm-1199){
height: 48px;
// padding-left: 10px;
}
}
.woocommerce form .form-row label {
line-height: 2;
font-family: "Schibsted Grotesk", sans-serif;
font-weight: 500;
font-size: 16px;
line-height: 100%;
letter-spacing: 0%;
color: #fff;
margin-bottom: 10px;
@media($sm-1679){
font-size: 14px;
}
@media($sm-1441){
font-size: 12px;
}
span{
line-height: 2;
font-family: "Schibsted Grotesk", sans-serif;
font-weight: 500;
font-size: 16px;
line-height: 100%;
letter-spacing: 0%;
color: #fff;
margin-bottom: 10px;
@media($sm-1679){
font-size: 14px;
}
@media($sm-1441){
font-size: 12px;
}
}
}
.woocommerce form .form-row {
margin-bottom: 30px;
@media($sm-991){
width: 100%;
}
}
h3{
font-family: "Schibsted Grotesk", sans-serif;
font-weight: 600;
font-size: 24px;
line-height: 52px;
letter-spacing: 0%;
vertical-align: middle;
text-transform: capitalize;
color: #fff;
@media($sm-1679){
font-size: 22px;
}
@media($sm-1441){
font-size: 20px;
}
@media($sm-1199){
font-size: 18px;
}
@media($sm-991){
font-size: 16px;
}
@media($sm-767){
font-size: 14px;
margin-bottom: 0px;
line-height: 30px;
}
}
.cart-subtotal{
font-size: 20px;
line-height: 32px;
letter-spacing: 0%;
vertical-align: middle;
text-transform: capitalize;
font-family: "Schibsted Grotesk", sans-serif;
word-break: break-all;
color: #606069;
@media($sm-1679){
font-size: 18px;
}
@media($sm-1441){
font-size: 16px;
}
@media($sm-1199){
font-size: 14px;
}
}
.woocommerce-error, .woocommerce-info, .woocommerce-message {
padding: 1em 2em 1em 3.5em;
margin: 0 0 2em;
position: relative;
background-color: #f6f5f8;
color: #515151;
/* border-top: 3px solid #720eec; */
list-style: none outside;
width: auto;
word-wrap: break-word;
background-color: #cd6429 !important;
border: 1px solid #cd6429 !important;
color: #fff !important;
border-top: 1px solid #cd6429 !important;
font-size: 18px;
letter-spacing: 0%;
vertical-align: middle;
text-transform: capitalize;
font-family: "Schibsted Grotesk", sans-serif;
word-break: break-all;
border-radius: 7px;
@media($sm-1679){
font-size: 16px;
}
@media($sm-1441){
font-size: 14px;
}
@media($sm-1199){
font-size: 12px;
}
a{
color: #fff !important;
}
&:focus-within{
border: none;
}
.wc-forward{
width: 225px;
height: 60px;
border: 0.75px solid #1C1C1F !important;
display: flex;
align-items: center;
justify-content: center;
background-color: #151516 !important;
color: #fff;
font-weight: 400;
font-size: 16px;
border-radius: 60px;
text-decoration: none;
justify-content: center;
padding: 21px 30px;
overflow: hidden;
position: relative;
@media($sm-1679){
font-size: 16px;
}
@media($sm-1441){
font-size: 14px;
}
@media($sm-1199){
font-size: 12px;
}
}
}
.woocommerce-info::before {
color: #fff !important;
}
.place-order{
button{
background-color: #CD6429 !important;
border: 1px solid #CD6429 !important;
height: 62px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-weight: 500;
font-size: 16px;
line-height: 100%;
font-family: $primary-font;
letter-spacing: 0%;
border-radius: 50px !important;
margin-top: 22px;
width: 270px;
@media($sm-1679){
height: 48px;
}
@media($sm-1441){
height: 42px;
}
@media($sm-1199){
height: 38px;
}
}
}
.woocommerce-privacy-policy-text p , .woocommerce-privacy-policy-text a{
color: #fff !important;
font-weight: 500;
font-size: 16px;
line-height: 100%;
font-family: $primary-font;
@media($sm-1679){
font-size: 14px;
}
@media($sm-1441){
font-size: 12px;
}
}
label.woocommerce-form__label.woocommerce-form__label-for-checkbox.checkbox{
span{
color: #fff !important;
font-weight: 500;
font-size: 16px;
line-height: 100%;
font-family: $primary-font;
@media($sm-1679){
font-size: 14px;
}
@media($sm-1441){
font-size: 12px;
}
}
}
.woocommerce table.shop_table tbody th, .woocommerce table.shop_table tfoot td, .woocommerce table.shop_table tfoot th {
font-weight: 700;
border-top: 1px solid rgba(0, 0, 0, .1);
color: #fff !important;
font-weight: 500;
}
.product-name , .product-total .woocommerce-Price-amount.amount{
color: #fff !important;
}
.checkout-inline-error-message {
color: red;
font-size: 12px;
margin-top: 8px;
font-size:13px;
font-weight:500;
font-family: "Schibsted Grotesk", sans-serif;
}
ul.woocommerce-error {
background: #2e0e0e !important;
font-size: 13px;
font-weight: 400;
line-height: 23px;
font-family: "Schibsted Grotesk", sans-serif;
}
.product-total{
color:#fff !important;
}
p.woocommerce-notice.woocommerce-notice--success.woocommerce-thankyou-order-received , .woocommerce-order p ,.woocommerce-order-details__title,.woocommerce-column__title{
color: #fff;
}
.woocommerce ul.order_details li ,.woocommerce .woocommerce-customer-details address{
color: #fff;
border: 0;
}
.woocommerce table.shop_table tbody th, .woocommerce table.shop_table tfoot td, .woocommerce table.shop_table tfoot th ,tbody, td, tfoot, th, thead, tr{
border: 0;
}
button.wc-forward{
border: 1px solid #232326 !important;
background-color: #181819 !important;
border-radius: 30px !important;
color: #fff;
display: flex
;
align-items: center;
font-size: 16px;
font-weight: 400;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
border: 1px solid #aaa;
background: transparent;
}
.select2-container .select2-dropdown, .select2-container .select2-selection {
border: 1px solid #2E2E34 !important;
background: #18181a !important;
color: #fff;
padding-left: 0px;
font-family: "Schibsted Grotesk", sans-serif;
font-weight: 500;
font-size: 16px;
// width: 100%;
}
.select2-container {
width: 100% !important;
// width: unset !important;
max-width: 100%;
}
.select2-selection__rendered{
border-radius: 30px;
border: 1px solid #2E2E34 !important;
padding: 20px 40px !important;
height: 62px;
align-items: center;
}
span.select2-selection.select2-selection--single {
border: none !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option--highlighted[data-selected] {
background-color: #cd6429 !important;
color: #fff;
}
.select2-container--default .select2-results__option[aria-selected=true], .select2-container--default .select2-results__option[data-selected=true]{
background-color: #cd6429 !important;
}
.select2-container .select2-selection--single .select2-selection__rendered{
color: #fff !important;
}
.select2-container .select2-selection--single .select2-selection__rendered{
color: #fff !important;
}
a.button.wc-forward {
border: 1px solid #232326 !important;
background-color: #181819 !important;
display: flex;
justify-content: center;
border-radius: 50px;
font-weight: 500;
}
.no-msg{
color: #fff !important;
}