/* ========================================================= JILPLAN CHECKOUT — GRID ALIGNMENT FIX ========================================================= */ /* ========================================================= PAGE ========================================================= */ html, body, body.t706__body_cartwinshowed, #allrecords { background: #f7f8fa !important; overflow: auto !important; height: auto !important; } /* ========================================================= ST100 AS NORMAL PAGE BLOCK ========================================================= */ .t706__cartwin { position: static !important; display: block !important; width: 100% !important; height: auto !important; opacity: 1 !important; visibility: visible !important; overflow: visible !important; background: transparent !important; } .t706__cartwin::before { display: none !important; } /* ========================================================= CHECKOUT — ОТСТУП ОТ ШАПКИ ========================================================= */ /* * Зазор создаём контейнером ST100, * а не margin самой карточки. */ .t706 { box-sizing: border-box !important; padding-top: 12px !important; background: transparent !important; } /* ========================================================= MAIN CHECKOUT CARD ========================================================= */ .t706__cartwin-content { position: static !important; transform: none !important; box-sizing: border-box !important; width: calc(100% - 48px) !important; max-width: 810px !important; height: auto !important; min-height: 0 !important; margin: 0 auto 90px !important; padding: 42px 44px 46px !important; background: #ffffff !important; border: 0 !important; border-radius: 18px !important; box-shadow: 0 18px 44px rgba(18, 30, 50, .09) !important; overflow: visible !important; } /* ========================================================= MOBILE ========================================================= */ @media screen and (max-width: 640px) { /* * На мобильном шапка выше, * поэтому даём чуть больше воздуха. */ .t706 { padding-top: 14px !important; } .t706__cartwin-content { width: calc(100% - 20px) !important; max-width: none !important; margin: 0 auto 36px !important; padding: 26px 18px 24px !important; border-radius: 18px !important; box-shadow: 0 14px 34px rgba(19,31,51,.09) !important; } } /* ========================================================= REMOVE UNUSED CART UI ========================================================= */ .t706__cartwin-close, .t706__cartwin-close-wrapper, .t706__carticon, .t706__carticon-wrapper, .t706__cartwin-prodamount-wrap, .t706__cartwin-totalamount-wrap, .t706__cartwin-products { display: none !important; } /* ========================================================= REMOVE DIVIDERS ========================================================= */ .t706__cartwin-top, .t706__cartwin-bottom, .t706__cartwin-product, .t706__cartwin-products, .t706__cartwin-content { border: 0 !important; } .t706 hr { display: none !important; } /* ========================================================= LEFT COLUMN — TITLE ========================================================= */ .t706__cartwin-top { position: absolute !important; top: 48px !important; left: 54px !important; width: 38% !important; margin: 0 !important; padding: 0 !important; border: 0 !important; } .t706__cartwin-heading { margin: 0 !important; padding: 0 !important; font-family: "TikTok Sans", Arial, sans-serif !important; font-size: 32px !important; line-height: 1.15 !important; font-weight: 600 !important; color: #121725 !important; } /* ========================================================= RIGHT COLUMN — FORM ========================================================= */ .t706__cartwin-bottom { box-sizing: border-box !important; width: 48% !important; margin: 0 0 0 auto !important; padding: 0 !important; border: 0 !important; } .t706__cartwin-bottom .t-form, .t706__cartwin-bottom form, .t706__cartwin-bottom .t-form__inputsbox { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } /* ========================================================= FORM ========================================================= */ .t706 .t-input-group { margin-bottom: 14px !important; } .t706 input, .t706 textarea, .t706 .t-input { box-sizing: border-box !important; width: 100% !important; height: 64px !important; min-height: 64px !important; padding-left: 20px !important; padding-right: 20px !important; border: 0 !important; border-radius: 14px !important; background: #f2f4f7 !important; font-family: "TikTok Sans", Arial, sans-serif !important; font-size: 16px !important; line-height: 1.2 !important; color: #121725 !important; outline: none !important; box-shadow: none !important; } /* ========================================================= INPUT FOCUS — БЕЗ ОБВОДКИ ========================================================= */ .t706 .t-input:focus, .t706 textarea.t-input:focus, .t706 input.t-input:focus, .t706 input[type="tel"]:focus, .t706 input[type="text"]:focus, .t706 input[type="email"]:focus { background: #f2f4f7 !important; border: 0 !important; outline: none !important; box-shadow: none !important; -webkit-appearance: none !important; } .t706 input::placeholder, .t706 textarea::placeholder { color: #9a9da5 !important; opacity: 1 !important; } .t706 input::-webkit-input-placeholder, .t706 textarea::-webkit-input-placeholder { color: #9a9da5 !important; opacity: 1 !important; } /* ========================================================= PAY BUTTON ========================================================= */ .t706 .t-submit { box-sizing: border-box !important; width: 100% !important; height: 60px !important; min-height: 60px !important; margin-top: 12px !important; border: 0 !important; border-radius: 14px !important; background: #FFD900 !important; color: #121725 !important; font-family: "TikTok Sans", Arial, sans-serif !important; font-size: 18px !important; line-height: 1 !important; font-weight: 500 !important; text-transform: none !important; box-shadow: none !important; } /* ========================================================= TABLET ========================================================= */ @media screen and (max-width: 960px) { .t706__cartwin-content { width: calc(100% - 32px) !important; max-width: 860px !important; min-height: 560px !important; margin: 30px auto 60px !important; padding: 40px 36px !important; } .t706__cartwin-top { top: 40px !important; left: 36px !important; width: 38% !important; } .t706__cartwin-bottom { width: 50% !important; } .t706__cartwin-heading { font-size: 28px !important; } } /* ========================================================= MOBILE ========================================================= */ @media screen and (max-width: 640px) { .t706__cartwin-content { width: calc(100% - 20px) !important; max-width: none !important; min-height: auto !important; margin: 14px auto 30px !important; padding: 26px 18px 22px !important; border-radius: 18px !important; box-shadow: 0 14px 34px rgba(19, 31, 51, .09) !important; } .t706__cartwin-top { position: static !important; width: 100% !important; margin: 0 0 26px !important; padding: 0 !important; } .t706__cartwin-bottom { width: 100% !important; margin: 0 !important; } .t706__cartwin-heading { font-size: 25px !important; } .t706 input, .t706 textarea, .t706 .t-input { height: 60px !important; min-height: 60px !important; } .t706 .t-submit { height: 60px !important; min-height: 60px !important; font-size: 17px !important; } }