/*COMMON*/ .w-100 { width: 100% !important; } .h-100 { height: 100% !important; } .d-block { display: block !important; } .d-flex { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; } .d-none { display: none !important; } .justify-content-between { -webkit-box-pack: justify !important; -ms-flex-pack: justify !important; justify-content: space-between !important; } @media (min-width: 768px) { .d-md-none { display: none !important; } .d-md-flex { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; } .d-md-block { display: block !important; } .justify-content-md-between { -webkit-box-pack: justify !important; -ms-flex-pack: justify !important; justify-content: space-between !important; } } .justify-content-center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .justify-content-end { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .align-items-center { -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important; } .align-items-start { -webkit-box-align: start !important; -ms-flex-align: start !important; align-items: flex-start !important; } .flex-column { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .flex-grow-1 { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .flex-shrink-0 { -ms-flex-negative: 0; flex-shrink: 0; } .flex-wrap { -ms-flex-wrap: wrap!important; flex-wrap: wrap!important; } .position-relative { position: relative !important; } .position-absolute { position: absolute !important; } .semi-bold { font-weight: bold !important; } @media (min-width: 768px) { .d-sm-none { display: none !important; } .d-sm-flex { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; } } @media (min-width: 1200px) { .d-xl-flex { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; } } /*/COMMON*/ /*CONTACTS styles*/ .step-cap { color: #A6A9B6; font-size: 20px; line-height: 24px; letter-spacing: 0.4px; } .step-number { border-radius: 50%; border: 1px solid #A6A9B6; justify-content: center; align-items: center; width: 28px; height: 28px; font-size: 14px; line-height: 18px; margin-right: 8px; } .active-step .step-cap, .prev-step .step-cap { color: #000; } .active-step .step-number { border: 1px solid #FF454B; } .prev-step .step-number { border: 1px solid #FF454B; color: #fff; background-color: #E7333A; } .contacts-data { display: none; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-top: 8px; font-size: 14px; line-height: 18px; } .checkout-edit { color: #666666; font-size: 14px; line-height: 18px; text-decoration: underline; cursor: pointer; } .checkout-edit:hover { text-decoration: none; color: #000000; } .contacts-data__edit { margin-left: 24px; } /*first step TABS*/ .contacts-wrap .nav-tabs { border-bottom: none; margin-top: 16px; } .contacts-wrap .nav-tabs > li > a { border: none; padding: 5px 0; margin-right: 32px; color: #121212; font-size: 16px; line-height: 20px; letter-spacing: 0.3px; } .contacts-wrap .nav > li > a:focus, .contacts-wrap .nav > li > a:hover { border: none; background: transparent; } .contacts-wrap .nav-tabs > li.active > a, .contacts-wrap .nav-tabs > li.active > a:focus, .contacts-wrap .nav-tabs > li.active > a:hover { border: none; color: #E82931; border-bottom: 1px solid #E82931; } /*login styles*/ .checkout-wrap__login .checkout-input-wrap label { display: block; width: auto; } .checkout-wrap__login .forgot-pass a { color: #666666; font-size: 14px; line-height: 18px; text-decoration: underline; letter-spacing: 0.3px; } .checkout-wrap__login-btn { padding-top: 12px; margin-bottom: 24px; } .checkout-wrap__login .btn-red { border-radius: 4px; background-color: #FF454B; font-size: 16px; line-height: 19px; font-weight: bold; letter-spacing: 0.3px; text-transform: none; padding: 0 24px; } .checkout-wrap__login .authorization-login__soc-desc { margin-left: 30px; font-size: 15px; } .checkout-wrap__login .soc-btn-holder { justify-content: flex-start; margin-top: 12px; } .checkout-wrap__login .soc-btn { border-radius: 50%; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-right: 12px; } .checkout-wrap__login .soc-btn .icon { padding-right: 0; } .checkout-wrap__login .google img { width: 16px; height: 16px; } /*/login styles*/ /*/first step TABS*/ /*INPUTS styles*/ .checkout-input-wrap__recipient, .checkout-wrap__login { margin-top: 16px; } .checkout-input-wrap { margin-bottom: 12px; color: #000; font-size: 15px; line-height: 19px; letter-spacing: 0.3px; } .checkout-input-wrap label { width: 170px; margin-right: 30px; font-weight: normal; } .checkout-input-wrap input { border-radius: 2px; border: 1px solid #DBDDE2; padding: 10px 12px; width: 270px; height: 40px; outline: none; } .checkout-input-wrap input:focus { border: 1px solid #000; } .checkout-input-wrap__checkbox { padding-top: 4px; margin-left: 205px; } .checkout-input-wrap__checkbox label { font-weight: normal; margin-bottom: 12px; } .checkout-input-wrap__checkbox input[type=checkbox]:not(:checked) + label::before { border: 1px solid #DBDDE2; } .checkout-input-wrap__checkbox input[type=checkbox] + label::after { transition: none; } .checkout-input-wrap__checkbox input[type=checkbox]:checked + label::before { border: 1px solid #E7333A; } .checkout-input-wrap__checkbox input[type=checkbox]:checked + label::after { content: ''; position: absolute; top: 4px; left: -20px; width: 5px; height: 9px; background: none; border-bottom: 1.5px solid #E7333A; border-right: 1.5px solid #E7333A; z-index: 10; transform: rotate(45deg); transition: none; } /*recipient styles*/ .checkout-input-wrap__no-recipient { display: none; } .checkout-input-wrap__no-recipient .step-cap { margin-top: 12px; margin-bottom: 16px; } /*/recipient styles*/ /*/INPUTS styles*/ .btn-next { border-radius: 4px; padding: 0 22px; margin-left: 205px; margin-top: 20px; margin-bottom: 24px; font-size: 16px; font-weight: bold; line-height: 19px; color: #fff; background-color: #FF454B; text-transform: none; } .btn-next:focus { color: #fff; } /*select CITY*/ .checkout-city-wrapper .dropdown-menu { width: 100%; max-height: 200px; margin-top: 0; -webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.2); -moz-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.2); box-shadow: 0 2px 5px 0 rgba(0,0,0,0.2); border: none; overflow-y: auto; } .checkout-city-wrapper .dropdown-menu li { padding: 10px 12px; } .checkout-city-wrapper .dropdown-menu li[data-city-code]:hover { background-color: #F7F7F7; } .select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar-track, #pickup-shop-choice .shops-choose .dropdown-menu::-webkit-scrollbar-track, .choose-address .dropdown-menu::-webkit-scrollbar-track, .delivery-map-modal .addresses-area::-webkit-scrollbar-track, .checkout-city-wrapper .dropdown-menu::-webkit-scrollbar-track { border-radius: 4px; background-color: #F7F7F7; } .select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar, #pickup-shop-choice .shops-choose .dropdown-menu::-webkit-scrollbar, .choose-address .dropdown-menu::-webkit-scrollbar, .delivery-map-modal .addresses-area::-webkit-scrollbar, .checkout-city-wrapper .dropdown-menu::-webkit-scrollbar { width: 8px; background-color: #F7F7F7; } .select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar-thumb, #pickup-shop-choice .shops-choose .dropdown-menu::-webkit-scrollbar-thumb, .choose-address .dropdown-menu::-webkit-scrollbar-thumb, .delivery-map-modal .addresses-area::-webkit-scrollbar-thumb, .checkout-city-wrapper .dropdown-menu::-webkit-scrollbar-thumb { border-radius: 4px; background-color: #DBDDE2; } .select2-container { width: 270px !important; height: 40px !important; } .select2-container--default .select2-selection--single { border-radius: 2px; border: 1px solid #DBDDE2; height: 40px; } .select2-container--default .select2-selection--single .select2-selection__arrow { display: none; } .select2-container--default .select2-selection--single .select2-selection__rendered { height: 100%; padding: 10px 12px; line-height: 20px; } .select2-container--default .select2-selection--single .select2-selection__rendered:focus, .select2-container--default .select2-selection--single:focus { outline: none; } .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: #F7F7F7; color: #000; } .select2-container--default .select2-results>.select2-results__options { -webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.2); -moz-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.2); box-shadow: 0 2px 5px 0 rgba(0,0,0,0.2); } .select2-search--dropdown { padding: 0; } .select2-dropdown { border: none; position: absolute; top: -40px; } .select2-container--default .select2-search--dropdown .select2-search__field { border: 1px solid #000000 !important; padding: 10px 12px; outline: none; border-radius: 2px; } .select2-results__option { padding: 10px 12px; } /*/select CITY*/ /*first step cart*/ .checkout-card-block { padding: 20px 12px 32px; box-shadow: 0 2px 8px 0 rgba(0,0,0,0.2); } .checkout-card-block .cart-block__name, #order-block .cart-block__name { border-top: none; } .checkout-card__cap { margin-bottom: 16px; display: none; } .set-products .cart-block__name div { font-weight: normal; } .checkout-card__cap div { font-size: 16px; line-height: 20px; font-family: DecimaNovaProBold; } .checkout-info__in-card { border-bottom: 1px solid #DBDDE2; margin-top: 16px; margin-bottom: 0; padding-bottom: 16px; } .checkout-card__info { margin-top: 16px; } .checkout-card__info > span:first-child { color: #000; font-size: 15px; line-height: 19px; } .checkout-card__info > span:last-child { font-size: 15px; line-height: 19px; } #checkout-card-title { font-size: 24px; letter-spacing: 0.4px; line-height: 29px; margin-bottom: 12px; display: none; } /*/first step cart*/ /*/CONTACTS styles*/ /*PAYMENT styles*/ .payment-wrap { margin-top: 32px; } .payment-form { display: none; margin-top: 16px; } .payment-form > div:not(:last-of-type) { padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid #DBDDE2; } .payment-form h3 { font-size: 16px; line-height: 20px; letter-spacing: 0.3px; margin-bottom: 16px; } .order-product:not(:last-of-type) { margin-bottom: 16px; } .order-product > a, .order-product img { height: 50px; width: 50px; } .order-product > a { -ms-flex-negative: 0; flex-shrink: 0; margin-right: 8px; } .order-product img { object-fit: contain; } .order-product__name { width: 100%; font-size: 14px; line-height: 18px; letter-spacing: 0.3px; color: #000000; margin-bottom: 6px; } .payment-parts-disabled, .purchase-limit-quantity { border-radius: 4px; display: inline-block; margin-top: 4px; padding: 4px; color: #333333; font-size: 12px; line-height: 12px; letter-spacing: 0.6px; background: #DBDDE2; } .purchase-limit-quantity { background: #FAE2BB; } .order-product__cost { flex-wrap: wrap; font-size: 14px; line-height: 18px; letter-spacing: 0.3px; margin-top: 6px; } .order-product__cost > div:first-of-type { color: #666666; } .order-product__wrapper .order-product__cost { margin-top: 0; width: 162px; margin-left: 32px; } .order-product__applied-promo { font-size: 14px; line-height: 18px; letter-spacing: .3px; color: #E7333A; margin-top: 4px; } .checkout-card-block .order-product { padding-bottom: 16px; border-bottom: 1px solid #DBDDE2; } .checkout-card-block .order-product > a, .checkout-card-block .order-product img { height: 65px; width: 65px; } .checkout-radio:not(.m-b-0) { margin-bottom: 16px; } .checkout-radio:last-of-type { margin-top: 16px; } .checkout-radio input[type=radio] + label { margin-left: 0; padding-left: 24px; font-weight: normal; font-size: 15px; line-height: 19px; letter-spacing: 0.3px; margin-bottom: 0; } .checkout-radio input[type=radio] + label::before { width: 16px; height: 16px; left: 0; top: 0; border-color: #CACACA; } .checkout-radio input[type=radio] + label::after { display: inline-block; width: 10px; height: 10px; left: 3px; top: 3px; background: #E7333A; } #payment-method-cashless-physical + label { width: 100%; } .checkout-radio input[type=radio]:checked + label::before { border-color: #E7333A; } #checkout-card-delivery, #checkout-card-total, #checkout-card-confirm, #cashless-legal-block, #pickup-meest-wrapper, #checkout-tou, #pickup-block, #pickup-choice-wrapper, #pickup-np-wrapper, .new-address, #checkout-card-bonuses, #np-block { display: none; } #pickup-meest-wrapper { margin-top: 8px; margin-left: 25px; } #pickup-meest-wrapper input { width: 296px; height: 48px; border: 1px solid #D3D3D3; border-radius: 3px; padding: 14px 39px 13px 16px; font-size: 15px; letter-spacing: 0.3px; line-height: 19px; color: #000; } #pickup-meest-wrapper input::-moz-placeholder, .checkout-city-wrapper input::-moz-placeholder, .checkout-discount-input input::-moz-placeholder { color: #A6A9B6; /* Цвет подсказывающего текста */ } #pickup-meest-wrapper input::-webkit-input-placeholder, .checkout-city-wrapper input::-webkit-input-placeholder, .checkout-discount-input input::-webkit-input-placeholder { color: #A6A9B6; } #pickup-meest-wrapper input:-ms-input-placeholder, .checkout-city-wrapper input:-ms-input-placeholder, .checkout-discount-input input:-ms-input-placeholder { color: #A6A9B6; } #pickup-meest-wrapper input::-ms-input-placeholder, .checkout-city-wrapper input::-ms-input-placeholder, .checkout-discount-input input::-ms-input-placeholder { color: #A6A9B6; } #pickup-meest-wrapper input::placeholder, .checkout-city-wrapper input::placeholder, .checkout-discount-input input::placeholder { color: #A6A9B6; } #checkout-card-delivery, #checkout-card-total, #checkout-card-bonuses { font-size: 15px; letter-spacing: 0.3px; line-height: 19px; } #checkout-card-delivery { margin: 8px 0; } #checkout-card-total > div:last-of-type { font-size: 16px; letter-spacing: 0.3px; line-height: 20px; } #checkout-card-confirm { padding-top: 8px; } #checkout-card-confirm-btn { text-transform: none; font-size: 16px; line-height: 19px; border-radius: 4px; letter-spacing: 0.3px; padding: 0 24px; } #checkout-card-confirm-btn:focus { color: #FFFFFF; } .checkout-card-line { padding-bottom: 16px; margin-bottom: 16px !important; border-bottom: 1px solid #DBDDE2; } #checkout-change-city, #checkout-add-comment { -ms-flex-item-align: start; align-self: flex-start; } .not-call-checkbox { margin-top: 24px; } .not-call-checkbox label { font-weight: 400; font-size: 14px; line-height: 18px; color: #666666; } .not-call-checkbox input[type=checkbox]:checked + label::before { border-color: #E7333A; } .not-call-checkbox input[type=checkbox]:checked + label::after { content: ''; position: absolute; top: 4px; left: -20px; width: 5px; height: 9px; background: none; border-bottom: 2px solid #E7333A; border-right: 2px solid #E7333A; z-index: 10; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: none; -o-transition: none; transition: none; } .delivery-cost { font-size: 14px; letter-spacing: 0.3px; line-height: 18px; color: #A6A9B6; } #incorrect-payment-method { padding-right: 0 !important; z-index: 1070; } #incorrect-payment-method .modal-dialog, #checkout-error-modal .modal-dialog { width: 463px; min-height: calc(100% - 6rem); margin: 30px auto; } #incorrect-payment-method .modal-content, #checkout-error-modal .modal-content { -webkit-box-shadow: none; box-shadow: none; border-radius: 2px; } #incorrect-payment-method .modal-header, #checkout-error-modal .modal-header { padding: 32px 32px 0; margin-bottom: 24px; border-bottom: none; } #incorrect-payment-method .modal-title, #checkout-error-modal .modal-title { font-size: 24px; letter-spacing: 0.4px; line-height: 29px; text-transform: none; } #incorrect-payment-method .modal-body, #checkout-error-modal .modal-body { padding: 0 32px 32px; } #incorrect-payment-method .modal-body p, #checkout-error-modal .modal-body p { font-size: 15px; letter-spacing: 0.3px; line-height: 19px; } #incorrect-payment-method .modal-body p:not(:last-of-type) { margin-bottom: 8px; } #incorrect-payment-method .close, #checkout-error-modal .close { opacity: 1; position: absolute; top: 12px; right: 16px; } #delivery-methods h3 { width: 80%; } @media (max-width: 767px) { #incorrect-payment-method .modal-dialog, #checkout-error-modal .modal-dialog { width: 290px; } #incorrect-payment-method .modal-header, #checkout-error-modal .modal-header { padding-right: 12px; padding-left: 12px; margin-bottom: 12px; } #incorrect-payment-method .close, #checkout-error-modal .close { top: 6px; right: 10px; } #incorrect-payment-method .modal-title, #checkout-error-modal .modal-title { font-size: 20px; line-height: 24px; } #incorrect-payment-method .modal-body, #checkout-error-modal .modal-body { padding-right: 12px; padding-left: 12px; } .checkout-wrap__login { margin-top: 16px !important; } .checkout-wrap__login > div { width: 100%; } .checkout-wrap__login .authorization-login__soc-desc { margin-top: 24px; margin-left: 0 !important; } .contacts-wrap .nav-tabs > li > a { margin-right: 12px; font-size: 15px; line-height: 19px; } .contacts-wrap .nav-tabs > li:last-of-type > a { margin-right: 0; } .checkout-input-wrap input { width: 100%; } .checkout-input-wrap__checkbox { margin-left: 0; } .btn-next { margin-left: 0 !important; } .w-xs-100 { width: 100%; } .select2-container { width: 100% !important; } .step-cap { font-size: 16px; line-height: 20px; letter-spacing: 0.3px; } .checkout-card__cap div { font-size: 16px !important; line-height: 20px !important; letter-spacing: 0.3px !important; } .checkout-card-block .order-product > a, .checkout-card-block .order-product img { height: 50px; width: 50px; } .contacts-data__edit { position: absolute; top: 0; right: 7px; } .payment-form { margin-top: 12px; } .payment-form > div:first-of-type h3 { margin-bottom: 12px; } #delivery-methods h3 { margin-bottom: 8px; width: 65%; } #checkout-change-city { margin-bottom: 16px; } .order-product__wrapper { -ms-flex-wrap: wrap; flex-wrap: wrap; } .order-product__wrapper .order-product__cost { width: 100%; margin-left: 0; } } #cashless-legal-block { margin-top: 16px; } #cashless-legal-block .checkout-input-wrap { margin-left: 25px; } #cashless-legal-block .checkout-input-wrap:last-of-type { margin-bottom: 0; } #checkout-tou { margin-top: 16px; font-size: 12px; letter-spacing: 0.6px; line-height: 16px; color: #666666; } #checkout-tou a { color: #666666; text-decoration: underline; } #checkout-tou a:hover { text-decoration: none; color: #000000; } #pickup-shop-choice, #pickup-np-wrapper { margin-top: 8px; } #pickup-shop-choice .shops-choose { float: none; margin: 0 0 0 24px; padding: 0; width: 296px; } #pickup-shop-choice .shops-choose__selected-item, .choose-address-result { border: 1px solid #D3D3D3; border-radius: 3px; color: #A6A9B6; font-size: 15px; letter-spacing: 0.3px; line-height: 19px; padding: 15px 39px 12px 16px; height: auto; -o-text-overflow: ellipsis; text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap; } #pickup-shop-choice .shops-choose__selected-item[aria-expanded="true"], .choose-address-result[aria-expanded="true"] { border-color: #000000; } #pickup-shop-choice .shops-choose__selected-item.selected-shop, .choose-address-result.selected-address { color: #000000; } #pickup-shop-choice .shops-choose .dropdown-menu, .choose-address .dropdown-menu { left: 0; width: 100%; margin-top: 8px; max-height: 250px; -webkit-box-shadow: 0 0 5px 0 rgba(0,0,0,0.2); box-shadow: 0 0 5px 0 rgba(0,0,0,0.2); } #pickup-shop-choice .shops-choose .dropdown-menu li:hover, .choose-address .dropdown-menu li:hover { background-color: #F7F7F7; } #pickup-shop-choice .shops-choose__selected-item::after, #pickup-np-choice .select2-container--default .select2-selection--single .select2-selection__arrow::after, .choose-address-result::after { content: ''; border-top: 1px solid #E7333A; border-right: 1px solid #E7333A; height: 14px; width: 14px; position: absolute; top: 12px; right: 20px; -webkit-transform: rotate(135deg); -ms-transform: rotate(135deg); transform: rotate(135deg); } #pickup-shop-choice .shops-choose__selected-item[aria-expanded=true]::after, #pickup-np-choice .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow::after, .choose-address-result[aria-expanded=true]::after { top: 20px; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } #pickup-shop-info > div, #pickup-np-info > div { margin-top: 12px; margin-left: 24px; font-size: 15px; letter-spacing: 0.3px; line-height: 19px; } #pickup-np-choice .select2-container--default .select2-selection--single, .checkout-np-warehouse-dropdown .select2-search--dropdown .select2-search__field { height: auto; border: 1px solid #D3D3D3; border-radius: 3px; } #pickup-np-choice .select2-container--default .select2-selection--single .select2-selection__rendered, .checkout-np-warehouse-dropdown .select2-search--dropdown .select2-search__field { padding: 14px 39px 13px 16px; font-size: 15px; letter-spacing: 0.3px; line-height: 19px; color: #000000; } #pickup-np-choice .select2-container--default .select2-selection--single .select2-selection__placeholder { color: #A6A9B6; } .checkout-np-warehouse-dropdown .select2-results__options li:first-child { display: block; } .checkout-np-warehouse-dropdown .select2-dropdown { top: -48px; } .checkout-np-warehouse-dropdown .select2-results__option, #pickup-shop-choice .shops-choose .dropdown-menu li, .choose-address .dropdown-menu li { padding: 8px 12px; border-bottom: 1px solid #e5e5e5; } #pickup-np-choice .select2-container--default .select2-selection--single .select2-selection__arrow { display: block; z-index: 1060; } #pickup-np-choice .select2-container--default .select2-selection--single .select2-selection__arrow b { display: none; } #pickup-np-choice .select2-container { height: auto !important; width: 296px !important; margin-left: 24px; } #np-courier-wrapper, #me-courier-wrapper { margin-top: 8px; margin-left: 24px; } .choose-address { width: 296px; } .new-address, #checkout-comment-wrapper { margin-top: 16px; } .new-address input { font-size: 15px; letter-spacing: 0.3px; line-height: 19px; padding: 10px 12px 8px; border: 1px solid #DBDDE2; border-radius: 2px; } .new-address input:focus, #pickup-meest-wrapper input:focus { outline: none; border-color: #000000; } .new-address-street:focus ~ span, .new-address-street:not([value='']) ~ span { left: 6px; } .new-address-house:focus ~ span, .new-address-house:not([value='']) ~ span { left: 18px; } .new-address-flat:focus ~ span, .new-address-flat:not([value='']) ~ span { left: 8px; } .new-address input::placeholder { color: #A6A9B6; } .new-address input:focus::placeholder { opacity: 0; } .new-address-street { width: 194px; } .new-address-house, .new-address-flat { width: 64px; } .new-address-house { margin-right: 12px; margin-left: 12px; } #checkout-add-comment[aria-expanded=false] span:first-child { display: block; } #checkout-add-comment[aria-expanded=false] span:last-child { display: none; } #checkout-add-comment[aria-expanded=true] span:first-child { display: none; } #checkout-add-comment[aria-expanded=true] span:last-child { display: block; } #checkout-comment-wrapper textarea { width: 100%; height: 96px; padding: 12px 16px; resize: none; line-height: 18px; overflow-y: hidden; } #checkout-comment-wrapper textarea:focus { outline: none; } #checkout-comment-wrapper .hint-error { margin-left: 0; } .btn-map { height: 20px; padding: 0; margin-left: 24px; font-size: 15px; letter-spacing: 0.3px; line-height: 19px; border: none; background-color: #FFFFFF; } .btn-map svg { margin-right: 8px; font-size: 20px; color: #E82931; } @media (max-width: 767px) { .btn-map { display: none !important; } #cashless-legal-block .checkout-input-wrap { margin-left: 0; } #pickup-shop-choice, #pickup-np-wrapper, #pickup-np-choice, #choose-address, #pickup-meest-wrapper input, .new-address > div:last-of-type, .new-address > div:last-of-type > div:first-of-type, .new-address-street { width: 100%; } #pickup-shop-choice .shops-choose, #pickup-np-choice .select2-container, #np-courier-wrapper, #pickup-meest-wrapper, #me-courier-wrapper { margin-left: 0; width: 100% !important; } .new-address > div:last-of-type { margin-top: 12px; } .new-address > div:last-of-type > div:first-of-type { margin-bottom: 12px; } .new-address-house, .new-address-flat { width: 104px; } .new-address-house { margin-right: 16px; margin-left: 0; } } #pickup-map-btn { margin-top: 8px; } .modal.delivery-map-modal, #incorrect-payment-method { z-index: 1070; } .delivery-map-modal .modal-dialog { width: 970px; min-height: calc(100% - 6rem); } .delivery-map-modal .modal-content { -webkit-box-shadow: none; box-shadow: none; border-radius: 0; border: none; } .delivery-map-modal .close { color: #FFFFFF; position: absolute; right: -32px; top: -32px; opacity: 1; font-size: 20px; height: 20px; } .delivery-map-modal .close:hover { color: #000000; } .delivery-map-modal .modal-body { padding: 0; } .delivery-map-modal .addresses-area { overflow-y: auto; height: 624px; } .delivery-map-modal .map-area { height: 624px; width: 700px; } @media (max-width: 1199px) { .delivery-map-modal .modal-dialog { width: 704px; } .delivery-map-modal .close { right: -16px; top: -36px; } .delivery-map-modal .map-area { width: 434px; } #checkout-card-wrapper { margin-top: 24px; } .btn-next { margin-top: 12px; margin-bottom: 0; margin-left: 274px; } .payment-wrap { margin-top: 24px; } .checkout-card__cap div { font-size: 20px; line-height: 24px; letter-spacing: 0.4px; } .checkout-card-block { padding-bottom: 24px; } .checkout-wrap__login-btn { padding-top: 4px; margin-bottom: 0; } .checkout-wrap__login { margin-top: 24px; } .checkout-wrap__login .authorization-login__soc-desc { margin-left: 64px; } } .delivery-map-item { padding: 16px; font-size: 15px; letter-spacing: 0.3px; line-height: 19px; } .delivery-map-item.active-address { background-color: #F0F0F0; } .delivery-map-item:not(.active-address) { cursor: pointer; } .delivery-map-item:not(:last-of-type) { border-bottom: 1px solid #A6A9B6; } .delivery-map-item:not(.active-address) .delivery-map-item__address:hover { color: #666666; } .delivery-map-item__schedule { margin-top: 8px; display: none; } .delivery-map-item.active-address .delivery-map-item__schedule { display: block; } #checkout-promo { -webkit-box-shadow: 0 2px 8px 0 rgba(0,0,0,0.2); box-shadow: 0 2px 8px 0 rgba(0,0,0,0.2); padding: 24px 12px; margin-bottom: 12px; display: none; } #checkout-promo-divider { height: 1px; background-color: #DBDDE2; margin-top: 16px; margin-bottom: 16px; } #checkout-promo-code-toggle > svg { color: #E7333A; } .applied-promo-code-text { font-size: 12px; line-height: 12px; letter-spacing: .6px; margin-top: 6px; color: #097034; } #checkout-promo-code-wrapper .hint-error { margin-top: 6px; margin-left: 0; } .bonus-state-description, #checkout-promo-code-toggle { font-size: 15px; letter-spacing: 0.3px; line-height: 19px; } .bonus-state-description > svg, #checkout-promo-code-toggle > svg { font-size: 20px; margin-right: 8px; } .bonus-state-description { display: none; } .bonus-state-description > svg { color: #FE760F; } .bonus-state-description--muted, .bonus-state-description--muted > svg { color: #A6A9B6; } .info-wrapper { display: inline-block; width: 14px; height: 14px; font-size: 14px; background-color: #DBDDE2; border-radius: 50%; color: #000000; vertical-align: middle; } .info-wrapper:hover { background-color: #C3C5C9; } .info-wrapper:hover .info-wrapper__tooltip { display: block; } .info-wrapper__tooltip { display: none; position: absolute; bottom: 30px; left: calc(50% - 147px); width: 294px; padding: 16px; -webkit-box-shadow: 0 0 8px 0 rgba(0,0,0,0.2); box-shadow: 0 0 8px 0 rgba(0,0,0,0.2); letter-spacing: 0.3px; line-height: 18px; background-color: #FFFFFF; } .info-wrapper__tooltip::after { content: ''; position: absolute; left: calc(50% - 8px); bottom: -16px; border: 8px solid transparent; border-top: 8px solid #FFFFFF; } .info-wrapper__tooltip div:not(:last-of-type) { margin-bottom: 4px; } @media(min-width: 500px) { .bonus-state-description { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .bonus-state-info { position: relative; } } @media(max-width: 499px) { .info-wrapper__tooltip { left: calc(50% - 120px); width: 240px; bottom: 42px; } } #bonus-login { color: #000000; } #bonus-login span { font-size: 15px; line-height: 19px; } .checkout-discount-input { margin-top: 12px; margin-bottom: 0; } .checkout-discount-input input { width: 100%; } .checkout-discount-input input[disabled] { background-color: #FFFFFF; } .discount-state-btn { background: #FFFFFF; border: none; padding: 11px 12px; font-size: 14px; letter-spacing: 0.3px; line-height: 1; color: #666666; position: absolute; top: 1px; right: 1px; height: 38px; } .discount-state-btn:hover { color: #000000; } .discount-state-btn svg { font-size: 16px; vertical-align: middle; } .info-wrapper--cabinet { position: absolute; top: calc(50% - 7px); right: 16px; } .info-wrapper--cabinet .info-wrapper__tooltip { right: -16px; bottom: 28px; left: auto; } .info-wrapper--cabinet .info-wrapper__tooltip a { color: #000; letter-spacing: 0.3px; line-height: 18px; } .info-wrapper--cabinet .info-wrapper__tooltip a:hover { color: #000; } .info-wrapper--cabinet .info-wrapper__tooltip::after { right: 16px; left: auto; } .cost-wrapper { font-size: 14px; line-height: 18px; letter-spacing: .3px; } .cost-wrapper__old-price { text-decoration: line-through; color: #A6A9B6; margin-right: 6px; } /*/PAYMENT styles*/ /*error styles*/ .hint-error { display: block; margin-top: 2px; margin-left: 205px; font-size: 12px; color: #E82931; line-height: 12px; } .checkout-wrap__login .hint-error { margin-left: 0; } .steps-wrap .error-message { border: none; width: 286px; margin: 16px 0; padding: 10px 16px 10px 45px; background-color: #FFE6E6; color: #E7333A; font-size: 15px; font-family: DecimaNovaPro; line-height: 19px; letter-spacing: 0.3px; } .steps-wrap .error-message:before { border-radius: 0; content: ''; left: 16px; width: 23px; height: 20px; background-image: url('/assets/img/icon-error.svg'); background-color: transparent; } .steps-wrap .error-message:after { display: none; } input.error-border, textarea.error-border, select.error-border + span .select2-selection, [data-toggle=dropdown].error-border, #pickup-np-wrapper .select2-selection.error-border { border: 1px solid #FB3F4C !important; } /*/error styles*/ /* Global container fix */ .checkout-container h2 { margin-bottom: 12px; } @media (min-width: 768px) { .order-product__name { width: 319px; } .checkout-container { width: 668px; } .checkout-container h2 { margin-bottom: 24px; } .checkout-city-wrapper, .popular-city-wrapper { margin-left: 4px; } .checkout-city-wrapper .hint-error { margin-left: 1px; } .cost-wrapper--prod { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } .cost-wrapper--prod .cost-wrapper__old-price { margin-top: 4px; margin-right: 0; } } @media (min-width: 1200px) { .checkout-container { width: 1200px; padding-right: 15px; padding-left: 15px; } .checkout-container .row { margin-right: -15px; margin-left: -15px; } .checkout-container .col-lg-6, .checkout-container .col-lg-4, .checkout-container .col-lg-8, .checkout-container .col-lg-2 { padding-right: 15px; padding-left: 15px; } #checkout-card-wrapper { position: sticky; top: 30px; } } /* Checkout header & footer */ #checkout-header-phone, #checkout-header-phone a { color: #FFFFFF; } #checkout-header-phone { font-size: 13px; letter-spacing: 0.2px; line-height: 15px; } #checkout-header-phone p { margin-bottom: 0; } #checkout-header-phone a { font-size: 20px; letter-spacing: 0.3px; line-height: 24px; } #checkout-footer { height: 72px; margin-top: 95px; } /* Checkout success pages */ #order-success { font-size: 15px; line-height: 19px; letter-spacing: 0.3px; } #order-info { margin-top: 9px; margin-bottom: 24px; } #order-number { color: #666666; font-size: 16px; line-height: 20px; margin-bottom: 16px; } #order-block { border-radius: 3px; -webkit-box-shadow: 0 2px 8px 0 rgba(0,0,0,0.2); box-shadow: 0 2px 8px 0 rgba(0,0,0,0.2); padding: 24px 40px; margin-bottom: 64px; } #order-delivery { margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid #DBDDE2; } .delivery-data-item:not(:last-of-type) { margin-bottom: 12px; } .delivery-data-item > div:first-of-type { width: 200px; } .order-success-product { margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid #DBDDE2; } .order-success-product__link { width: 100%; height: 100%; z-index: 1; } .order-success-product__img, .order-success-product__img img { width: 88px; height: 88px; -o-object-fit: contain; object-fit: contain; } .order-success-product__img img { -o-object-fit: contain; object-fit: contain; } .order-success-product__info { margin-left: 24px; } .order-success-product__info p { margin-bottom: 12px; } .order-success-product__quantity { color: #666666; } #order-total { font-size: 20px; line-height: 24px; letter-spacing: 0.4px; padding-top: 10px; } #order-total > div:first-of-type { width: 170px; } #order-total span { font-size: 15px; line-height: 19px; letter-spacing: 0.3px; } #actions-header { font-size: 20px; line-height: 24px; letter-spacing: 0.4px; margin-bottom: 24px; } .action-tile { width: 50%; } .action-tile:not(:last-of-type) { margin-right: 16px; } .action-tile img { max-height: 100%; } @media (max-width: 1199px) { #order-block { padding: 10px 32px 32px; margin-bottom: 30px; } #actions-header { margin-bottom: 16px; } .action-tile:not(:last-of-type) { margin-right: 12px; } #checkout-header-phone a { font-size: 16px; letter-spacing: 0.24px; line-height: 19px; } #checkout-footer { margin-top: 40px; } } @media (max-width: 767px) { #order-success { font-size: 14px; line-height: 18px; } #order-info { margin-top: 12px; margin-bottom: 16px; font-size: 15px; line-height: 19px; } #order-block { padding: 16px 12px 30px; margin-bottom: 30px; } #order-delivery { margin-bottom: 16px; padding-bottom: 16px; } .delivery-data-item, #actions-wrapper { -ms-flex-wrap: wrap; flex-wrap: wrap; } .delivery-data-item:not(:last-of-type) { margin-bottom: 14px; } .delivery-data-item > div:first-of-type { width: 100%; margin-bottom: 3px; } .order-success-product__img, .order-success-product__img img { width: 50px; height: 50px; } .order-success-product__info { margin-left: 8px; } .order-success-product__info p { margin-bottom: 4px; } #order-total { font-size: 15px; line-height: 19px; letter-spacing: 0.3px; padding-top: 0; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } #order-total > div:last-of-type, #order-total span { font-size: 16px; line-height: 20px; letter-spacing: 0.3px; font-weight: bold; } .action-tile { width: 100%; margin-right: 0 !important; } .action-tile:not(:last-of-type) { margin-bottom: 12px; } #checkout-footer { height: auto; margin-top: 0; padding: 24px 0; } #checkout-footer .col-xs-12 { font-size: 12px; line-height: 16px; letter-spacing: 0.6px; } #checkout-footer .col-xs-12:last-of-type > div { margin-top: 12px; webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .hint-error { margin-left: 0; } } /* Order status pages */ #order-status-page { border-radius: 3px; -webkit-box-shadow: 0 2px 8px 0 rgba(0,0,0,0.2); box-shadow: 0 2px 8px 0 rgba(0,0,0,0.2); padding: 48px 100px 68px; margin-top: 32px; } #order-status-page img { margin-bottom: 24px; } #redirect-header { margin-top: 24px; } #order-status-text { font-size: 14px; letter-spacing: 0.3px; line-height: 18px; } #order-status-text div { margin-top: 24px; margin-bottom: 16px; } #order-status-text a { color: #666666; text-decoration: underline; } .bank-redirect-link { white-space: nowrap; text-overflow: ellipsis; overflow-x: hidden; display: block; margin-bottom: 36px; } @media (max-width: 1199px) { #order-status-page { padding-right: 48px; padding-left: 48px; } #redirect-header { margin-top: 16px; } } @media (max-width: 767px) { #order-status-page { padding: 0; -webkit-box-shadow: none; box-shadow: none; } #order-status-page img { margin-bottom: 16px; } #order-status-page h2 { font-size: 20px; line-height: 24px; letter-spacing: 0.4px; } #redirect-header { margin-top: 0; } #order-status-text div { margin-top: 12px; margin-bottom: 8px; } } /* Checkout rework */ .popular-city-wrapper { margin-top: 8px; } .popular-city-item { font-size: 12px; line-height: 14px; letter-spacing: 0.3px; color: #666666; padding-bottom: 2px; border-bottom: 1px dashed rgba(166, 169, 182, 0.5); } .popular-city-item:hover { border-bottom-color: transparent; } .popular-city-item:not(:last-of-type) { margin-right: 15px; } .delivery-info { border-radius: 2px; border: 1px solid #F1AD3E; padding: 16px; margin-bottom: 32px; color: #000; font-size: 15px; line-height: 19px; letter-spacing: 0.3px; background-color: #FEFBF4; } .delivery-info div { margin-bottom: 8px; font-weight: bold; } @media (max-width: 767px) { .delivery-info { padding: 12px; margin-bottom: 24px; } } .payment-parts { padding-top: 10px; } .payment-info-icon { margin-left: 12px; border-radius: 50%; font-size: 18px; background-color: #DBDDE2; } .payment-parts-dropdown { margin-right: 8px; } .payment-parts-dropdown__btn { border-radius: 2px; border: 1px solid #C9C5CB; padding: 4px 28px 4px 8px; font-size: 14px; line-height: 20px; } .payment-parts-dropdown__btn input { border: none; width: 10px; height: auto; padding: 0; margin: 0; background-color: transparent; outline: none; cursor: pointer; } .payment-parts-dropdown__btn::after { content: ''; position: absolute; top: 11px; right: 6px; border: 6px solid transparent; border-top: 6px solid #E7333A; } .payment-parts-dropdown__list { min-width: 100% !important; } .payment-parts-dropdown__item { padding: 4px 28px 4px 8px; transition: all .3s; } .payment-parts-dropdown__item:hover { background: #C9C5CB; } .payment-parts { display: none; } .mono-phone { margin-top: 16px; } .mono-phone input { border: 1px solid #DBDDE2; border-radius: 2px; padding: 12px 16px; height: auto; font-size: 14px; line-height: 19px; letter-spacing: 0.3px; outline: none; } .mono-phone.floating-placeholder span { left: 3px; } .payment-parts__text { border: 1px solid #E7333A; border-radius: 8px; margin-top: 16px; padding: 12px 16px; font-size: 15px; line-height: 21px; letter-spacing: 0.3px; } .payment-parts-modal { z-index: 1070; } .payment-parts-modal .modal-body { max-height: 90vh; padding: 24px 16px; font-size: 14px; line-height: 20px; overflow-y: auto; } .payment-parts-modal .modal-body::-webkit-scrollbar { width: 4px; } .payment-parts-modal .modal-body::-webkit-scrollbar-thumb { border-radius: 4px; background-color: #999999; } .payment-parts-modal .modal-dialog-centered { display: flex; align-items: center; min-height: calc(100% - 3.5rem); } @media (min-width: 360px) { .payment-parts-modal .modal-dialog { width: 330px; margin: 10px auto; } } @media (min-width: 768px) { .payment-parts-modal .modal-dialog { width: 720px; } .payment-parts-modal .modal-body { padding: 24px; } } .payment-parts-modal h4 { margin: 0; font-size: 14px; line-height: 20px; } .part-modal-header { padding-bottom: 20px; } .logo-bank { margin-right: 8px; font-size: 24px; } .parts-modal-close { font-size: 24px; color: #666666; } .parts-info { margin-bottom: 16px; } @media (min-width: 768px) { .payment-parts-modal h4 { font-size: 20px; line-height: 28px; } .parts-info { font-size: 16px; line-height: 24px; } } .parts-steps { border-radius: 16px; margin-bottom: 24px; padding: 16px 24px; background-color: #F7F7F7; } @media (min-width: 768px) { .parts-steps { padding: 16px 40px; margin-left: 56px; margin-right: 56px; } } .parts-steps__item, .parts-questions { margin-bottom: 16px; } .parts-steps__icon-done { color: #0B8A40; } .parts-steps__icon-done .svg-icon { margin-right: 8px; color: #0B8A40; font-size: 24px; } .parts-questions__cap { margin-bottom: 4px; }