/** * ANSA Checkout Reskin v12 — единствен източник на стилове. * * Промени спрямо v11: * - Няма opacity:0 FOUC система — файлът се зарежда в преди първия paint. * - Няма overflow-x:hidden върху html/body — истинската причина за хоризонталния * overflow (Select2 във flex ред без min-width:0) е оправена в секцията SHIPPING. * - Инпутите са 16px на мобилно (иначе iOS Safari зуумва при фокус). * - Лейбълите са #6b6b6b (старото #999 е под WCAG AA контраст). * - Баджовете на мобилно са мин. 10px (8px беше нечетимо). * * !important е запазен умишлено: FunnelKit сам ползва !important и инлайн * стилове, така че сваляне селектор по селектор е задача за live тестване. */ /* ═══════ TOKENS ═══════ */ :root { --ao: #e8722a; --aoh: #d4611e; --aog: rgba(232, 114, 42, .07); --ag: #16a34a; --agb: #ecfdf5; --t: #1a1a1a; --t2: #5e5757; --t3: #999; --tl: #6b6b6b; /* label color — АА контраст върху бяло */ --b: #ddd8d1; --b2: #eae5df; --bg: #f6f3ef; --w: #fff; --r: 12px; --rs: 10px; --f: "DM Sans", system-ui, sans-serif; } /* ═══════ GLOBAL ═══════ */ body #wfacp-e-form * { box-sizing: border-box !important; } /* Safety net само върху формата — НЕ върху html/body */ body #wfacp-e-form { overflow-x: hidden !important; max-width: 100% !important; } /* ═══════ SECTION CARDS ═══════ */ body #wfacp-e-form .wfacp-section { background: var(--w) !important; border: 1px solid var(--b) !important; border-radius: var(--r) !important; padding: 24px 22px !important; margin-bottom: 12px !important; max-width: 100% !important; box-shadow: none !important; } body #wfacp-e-form .wfacp-hg-by-box { border: 1px solid var(--b) !important; box-shadow: none !important; background: var(--w) !important; border-radius: var(--r) !important; padding: 24px 22px !important; } /* ═══════ SECTION HEADINGS (номерирани) ═══════ */ body #wfacp-e-form .wfacp-left-panel { counter-reset: ansa-sec !important; } body #wfacp-e-form .wfacp-section { counter-increment: ansa-sec !important; } body #wfacp-e-form .wfacp_section_heading { font-family: var(--f) !important; font-size: 16px !important; font-weight: 700 !important; color: var(--t) !important; margin: 0 0 18px !important; padding: 0 !important; display: flex !important; align-items: center !important; gap: 10px !important; border: none !important; background: none !important; } body #wfacp-e-form .wfacp_section_heading::before { content: counter(ansa-sec) !important; width: 28px !important; height: 28px !important; border-radius: 50% !important; background: var(--ao) !important; color: #fff !important; font-size: 13px !important; font-weight: 700 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; } /* ═══════ LABELS — над полето, не floating ═══════ */ body #wfacp-e-form .wfacp-form-control-label { font-family: var(--f) !important; font-size: 12px !important; font-weight: 500 !important; color: var(--tl) !important; position: static !important; transform: none !important; display: block !important; margin-bottom: 5px !important; padding: 0 2px !important; opacity: 1 !important; pointer-events: auto !important; transition: none !important; } body #wfacp-e-form .wfacp-form-control-label .required { color: var(--ao) !important; } /* ═══════ TEXT INPUTS ═══════ */ body #wfacp-e-form .wfacp_main_form.woocommerce input[type="text"], body #wfacp-e-form .wfacp_main_form.woocommerce input[type="email"], body #wfacp-e-form .wfacp_main_form.woocommerce input[type="tel"], body #wfacp-e-form .wfacp_main_form.woocommerce input[type="password"], body #wfacp-e-form .wfacp_main_form.woocommerce input[type="number"], body #wfacp-e-form .wfacp_main_form.woocommerce select:not(.select2-hidden-accessible) { border: 1.5px solid var(--b) !important; border-radius: var(--rs) !important; font-family: var(--f) !important; font-size: 15px !important; color: var(--t) !important; background: var(--w) !important; height: 48px !important; padding: 0 14px !important; outline: none !important; box-shadow: none !important; transition: border-color .15s, box-shadow .15s !important; } /* Reset FK padding-top само за секционните инпути */ body #wfacp-e-form .wfacp_main_form p.form-row .wfacp-form-control { padding-top: 0 !important; padding-bottom: 0 !important; line-height: 48px !important; } body #wfacp-e-form .wfacp_main_form.woocommerce textarea { border: 1.5px solid var(--b) !important; border-radius: var(--rs) !important; font-family: var(--f) !important; font-size: 15px !important; color: var(--t) !important; background: var(--w) !important; height: auto !important; min-height: 60px !important; padding: 12px 14px !important; outline: none !important; box-shadow: none !important; } /* Скриване на нативните select-и, когато Select2 е активен */ body select.select2-hidden-accessible, body #wfacp-e-form ul#shipping_method select[style*="display"], body [id*="wc-speedy"] select:not(:only-child), body [id*="wc-econt"] select:not(:only-child), body [id*="wc-fan"] select:not(:only-child), body [id*="wc-boxnow"] select:not(:only-child) { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; border: 0 !important; opacity: 0 !important; clip-path: inset(50%) !important; } /* Focus / valid / invalid */ body #wfacp-e-form .wfacp_main_form .wfacp-form-control:focus { border-color: var(--ao) !important; box-shadow: 0 0 0 3px var(--aog) !important; } body #wfacp-e-form .wfacp_main_form p.form-row.woocommerce-validated .wfacp-form-control { border-color: var(--ag) !important; } body #wfacp-e-form .wfacp_main_form p.form-row.woocommerce-invalid .wfacp-form-control { border-color: #ef4444 !important; } /* ═══════ PHONE (intl-tel-input) ═══════ */ body #wfacp-e-form #billing_phone_field .iti { width: 100% !important; } body #wfacp-e-form #billing_phone_field .iti input[type="tel"] { height: 48px !important; border: 1.5px solid var(--b) !important; border-radius: var(--rs) !important; font-family: var(--f) !important; font-size: 15px !important; } body #wfacp-e-form #billing_phone_field .iti input[type="tel"]:focus { border-color: var(--ao) !important; box-shadow: 0 0 0 3px var(--aog) !important; } /* ═══════ FORM SELECT2 (град/област) ═══════ */ body #wfacp-e-form .wfacp_main_form .select2-container .select2-selection--single { height: 48px !important; border: 1.5px solid var(--b) !important; border-radius: var(--rs) !important; background: var(--w) !important; display: flex !important; align-items: center !important; } body #wfacp-e-form .wfacp_main_form .select2-container .select2-selection__rendered { line-height: 48px !important; padding: 0 14px !important; font-family: var(--f) !important; font-size: 14px !important; color: var(--t) !important; } body #wfacp-e-form .wfacp_main_form .select2-container--open .select2-selection--single { border-color: var(--ao) !important; box-shadow: 0 0 0 3px var(--aog) !important; } /* ═══════ RADIOS ═══════ */ body #wfacp-e-form .wfacp_main_form.woocommerce input[type="radio"] { width: 20px !important; height: 20px !important; min-width: 20px !important; border: 2px solid #bbb !important; border-radius: 50% !important; -webkit-appearance: none !important; appearance: none !important; background: #fff !important; cursor: pointer !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; flex-shrink: 0 !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 0 0 !important; outline: none !important; } body #wfacp-e-form .wfacp_main_form.woocommerce input[type="radio"]:checked { border-color: #e8722a !important; border-width: 2px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Ccircle cx='5' cy='5' r='5' fill='%23e8722a'/%3E%3C/svg%3E") !important; background-size: 10px 10px !important; } body #wfacp-e-form input[type="radio"]::before, body #wfacp-e-form input[type="radio"]::after { display: none !important; content: none !important; } /* ═══════ CHECKBOXES ═══════ */ body #wfacp-e-form input[type="checkbox"], body #wfob_wrap input[type="checkbox"] { width: 20px !important; height: 20px !important; min-width: 20px !important; border: 2px solid var(--b) !important; border-radius: 6px !important; appearance: none !important; -webkit-appearance: none !important; background: var(--w) !important; cursor: pointer !important; flex-shrink: 0 !important; margin: 0 8px 0 0 !important; box-shadow: none !important; display: inline-block !important; vertical-align: middle !important; position: relative !important; float: none !important; top: auto !important; left: auto !important; } body #wfacp-e-form .woocommerce-form__label-for-checkbox, body #wfacp-e-form .create-account label, body #wfacp-e-form #billing_create_account_field label { display: inline-flex !important; align-items: center !important; gap: 8px !important; cursor: pointer !important; font-family: var(--f) !important; font-size: 13px !important; color: var(--t2) !important; } body #wfacp-e-form #billing_create_account_field input[type="checkbox"] { position: relative !important; float: none !important; margin: 0 8px 0 0 !important; } body #wfacp-e-form input[type="checkbox"]::before, body #wfacp-e-form input[type="checkbox"]::after, body #wfob_wrap input[type="checkbox"]::before, body #wfob_wrap input[type="checkbox"]::after { display: none !important; content: none !important; } body #wfacp-e-form input[type="checkbox"]:checked, body #wfob_wrap input[type="checkbox"]:checked { background-color: var(--ao) !important; border-color: var(--ao) !important; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 4.5L5.5 10L3 7.5' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-size: 14px !important; background-position: center !important; background-repeat: no-repeat !important; } /* ═══════ SHIPPING LIST ═══════ */ body #wfacp-e-form .wfacp_shipping_table { border: none !important; background: none !important; padding: 0 !important; margin: 0 !important; width: 100% !important; } body #wfacp-e-form .wfacp_shipping_table table { border: none !important; border-collapse: collapse !important; width: 100% !important; table-layout: fixed !important; } body #wfacp-e-form ul#shipping_method { list-style: none !important; margin: 0 !important; padding: 0 !important; border: 1.5px solid var(--b) !important; border-radius: var(--r) !important; background: var(--w) !important; overflow: hidden !important; width: 100% !important; max-width: 100% !important; } body #wfacp-e-form ul#shipping_method li { border: none !important; border-bottom: 1px solid var(--b2) !important; border-radius: 0 !important; margin: 0 !important; padding: 0 !important; background: transparent !important; transition: background .12s !important; position: relative !important; list-style: none !important; box-shadow: none !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; } body #wfacp-e-form ul#shipping_method li:first-child { border-radius: 11px 11px 0 0 !important; } body #wfacp-e-form ul#shipping_method li:last-child { border-bottom: none !important; border-radius: 0 0 11px 11px !important; } body #wfacp-e-form ul#shipping_method li:only-child { border-radius: 11px !important; border-bottom: none !important; } /* Ред */ body #wfacp-e-form ul#shipping_method li .wfacp_single_shipping { position: relative !important; display: flex !important; align-items: center !important; padding: 13px 16px 13px 44px !important; cursor: pointer !important; min-height: 48px !important; width: 100% !important; min-width: 0 !important; } body #wfacp-e-form ul#shipping_method li .wfacp_shipping_radio { display: flex !important; align-items: center !important; flex: 1 !important; min-width: 0 !important; } body #wfacp-e-form ul#shipping_method li .wfacp_shipping_radio input[type="radio"] { position: absolute !important; left: 16px !important; top: 50% !important; transform: translateY(-50%) !important; } body #wfacp-e-form ul#shipping_method li .wfacp_shipping_radio label { font-family: var(--f) !important; font-size: 13.5px !important; font-weight: 500 !important; color: var(--t) !important; cursor: pointer !important; margin: 0 !important; padding: 0 !important; min-width: 0 !important; overflow-wrap: anywhere !important; } body #wfacp-e-form ul#shipping_method li .wfacp_shipping_price { margin-left: auto !important; flex-shrink: 0 !important; white-space: nowrap !important; font-family: var(--f) !important; font-size: 13px !important; color: var(--t2) !important; padding-left: 12px !important; } /* Активен ред */ body #wfacp-e-form ul#shipping_method li.ansa-active { background: rgba(232, 114, 42, .04) !important; } body #wfacp-e-form ul#shipping_method li.ansa-active::after { content: "" !important; position: absolute !important; left: 0 !important; top: 0 !important; bottom: 0 !important; width: 3.5px !important; background: var(--ao) !important; pointer-events: none !important; z-index: 1 !important; display: block !important; } body #wfacp-e-form ul#shipping_method li:first-child.ansa-active::after { border-radius: 11px 0 0 0 !important; } body #wfacp-e-form ul#shipping_method li:last-child.ansa-active::after { border-radius: 0 0 0 11px !important; } body #wfacp-e-form ul#shipping_method li:only-child.ansa-active::after { border-radius: 11px 0 0 11px !important; } /* ═══════ SHIPPING SELECT2 + SUB-FIELDS (Speedy/Econt/BoxNow/FAN) Коренният фикс за "разширяващия се" Select2: flex деца с min-width:0 + контейнер на 100%. Това замества целия fixSelect2Width() полинг от v11. ═══════ */ body #wfacp-e-form ul#shipping_method li > div, body #wfacp-e-form ul#shipping_method li div[id*="select-container"], body #wfacp-e-form ul#shipping_method li div[id*="address-detail-container"] { min-width: 0 !important; max-width: 100% !important; } body #wfacp-e-form ul#shipping_method li div[id*="select-container"], body #wfacp-e-form ul#shipping_method li div[id*="address-detail-container"] { padding: 4px 16px 8px 44px !important; } body #wfacp-e-form ul#shipping_method .select2-container, body [id*="wc-speedy"] .select2-container, body [id*="wc-econt"] .select2-container, body [id*="wc-fan"] .select2-container, body [id*="wc-boxnow"] .select2-container { width: 100% !important; max-width: 100% !important; min-width: 0 !important; display: block !important; } body #wfacp-e-form ul#shipping_method .select2-selection--single, body [id*="wc-speedy"] .select2-selection--single, body [id*="wc-econt"] .select2-selection--single, body [id*="wc-fan"] .select2-selection--single, body [id*="wc-boxnow"] .select2-selection--single { height: 44px !important; min-height: 44px !important; max-height: 44px !important; border: 1.5px solid var(--b) !important; border-radius: var(--rs) !important; background: #f6f3ef !important; padding: 0 !important; position: relative !important; display: block !important; overflow: hidden !important; } body #wfacp-e-form ul#shipping_method .select2-selection__rendered, body [id*="wc-speedy"] .select2-selection__rendered, body [id*="wc-econt"] .select2-selection__rendered, body [id*="wc-fan"] .select2-selection__rendered, body [id*="wc-boxnow"] .select2-selection__rendered { font-family: var(--f) !important; font-size: 13px !important; color: var(--t) !important; line-height: 40px !important; min-height: 40px !important; padding: 0 36px 0 14px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; display: block !important; } body #wfacp-e-form ul#shipping_method .select2-selection__placeholder, body [id*="wc-speedy"] .select2-selection__placeholder, body [id*="wc-econt"] .select2-selection__placeholder, body [id*="wc-fan"] .select2-selection__placeholder, body [id*="wc-boxnow"] .select2-selection__placeholder { color: #767676 !important; font-size: 13px !important; } body #wfacp-e-form ul#shipping_method .select2-selection__arrow, body [id*="wc-speedy"] .select2-selection__arrow, body [id*="wc-econt"] .select2-selection__arrow, body [id*="wc-fan"] .select2-selection__arrow, body [id*="wc-boxnow"] .select2-selection__arrow { width: 36px !important; right: 0 !important; top: 0 !important; height: 44px !important; position: absolute !important; display: flex !important; align-items: center !important; justify-content: center !important; } body #wfacp-e-form ul#shipping_method .select2-selection__arrow b, body [id*="wc-speedy"] .select2-selection__arrow b, body [id*="wc-econt"] .select2-selection__arrow b, body [id*="wc-fan"] .select2-selection__arrow b, body [id*="wc-boxnow"] .select2-selection__arrow b { border-color: #666 transparent transparent !important; border-width: 7px 6px 0 !important; border-style: solid !important; margin: 0 !important; position: static !important; display: block !important; width: 0 !important; height: 0 !important; } body #wfacp-e-form ul#shipping_method .select2-selection__clear, body [id*="wc-speedy"] .select2-selection__clear, body [id*="wc-econt"] .select2-selection__clear { float: right !important; margin-right: 4px !important; font-size: 16px !important; color: #999 !important; line-height: 40px !important; } body #wfacp-e-form ul#shipping_method .select2-container--open .select2-selection--single { border-color: var(--ao) !important; box-shadow: 0 0 0 3px var(--aog) !important; } /* Адресни инпути в куриерските полета */ body #wfacp-e-form ul#shipping_method [id*="address-detail"] input, body #wfacp-e-form ul#shipping_method [id*="street"] input, body #wfacp-e-form ul#shipping_method li input[type="text"] { width: 100% !important; height: 44px !important; border: 1.5px solid var(--b) !important; border-radius: var(--rs) !important; font-family: var(--f) !important; font-size: 13px !important; padding: 0 12px !important; background: var(--w) !important; line-height: 44px !important; } body #wfacp-e-form ul#shipping_method [id*="address-detail"] input:focus, body #wfacp-e-form ul#shipping_method [id*="street"] input:focus { border-color: var(--ao) !important; outline: none !important; } /* ═══════ SELECT2 DROPDOWN PANEL (appended към body) ═══════ */ .select2-dropdown { border: 1.5px solid var(--b) !important; border-radius: var(--rs) !important; box-shadow: 0 8px 30px rgba(0, 0, 0, .08) !important; font-family: var(--f) !important; } .select2-search--dropdown .select2-search__field { border: 1.5px solid var(--b) !important; border-radius: 8px !important; height: 40px !important; font-family: var(--f) !important; font-size: 14px !important; padding: 0 12px !important; outline: none !important; } .select2-search--dropdown .select2-search__field:focus { border-color: var(--ao) !important; } .select2-results__option { font-family: var(--f) !important; font-size: 13px !important; padding: 10px 14px !important; } .select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--aog) !important; color: var(--t) !important; } /* ═══════ PAYMENT LIST ═══════ */ body #wfacp-e-form #payment { background: none !important; border: none !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; } body #wfacp-e-form #payment ul.payment_methods { list-style: none !important; margin: 0 !important; padding: 0 !important; border: 1.5px solid var(--b) !important; border-radius: var(--r) !important; background: var(--w) !important; overflow: hidden !important; } body #wfacp-e-form #payment ul.payment_methods li { border: none !important; border-bottom: 1px solid var(--b2) !important; margin: 0 !important; padding: 0 !important; background: transparent !important; position: relative !important; box-shadow: none !important; } body #wfacp-e-form #payment ul.payment_methods li:first-child { border-radius: 11px 11px 0 0 !important; } body #wfacp-e-form #payment ul.payment_methods li:last-child { border-bottom: none !important; border-radius: 0 0 11px 11px !important; } body #wfacp-e-form #payment ul.payment_methods li:only-child { border-radius: 11px !important; border-bottom: none !important; } body #wfacp-e-form #payment ul.payment_methods li > input.input-radio { position: absolute !important; left: 16px !important; top: 16px !important; z-index: 2 !important; } body #wfacp-e-form #payment ul.payment_methods li > label { display: flex !important; align-items: center !important; padding: 13px 16px 13px 44px !important; cursor: pointer !important; font-family: var(--f) !important; font-size: 13.5px !important; font-weight: 500 !important; color: var(--t) !important; margin: 0 !important; min-height: 48px !important; gap: 8px !important; flex-wrap: nowrap !important; justify-content: space-between !important; } /* Баджове — винаги най-вдясно */ body #wfacp-e-form #payment ul.payment_methods label small { font-size: 10px !important; font-weight: 600 !important; padding: 3px 8px !important; border-radius: 14px !important; white-space: nowrap !important; flex-shrink: 0 !important; line-height: 1.3 !important; display: inline-block !important; } body #wfacp-e-form #payment ul.payment_methods label small.cod-fee { background: #fef9ee !important; color: #b45309 !important; border: 1px solid #fde68a !important; } body #wfacp-e-form #payment ul.payment_methods label small.card-bonus { background: #ecfdf5 !important; color: var(--ag) !important; border: 1px solid #bbf7d0 !important; } /* Скриване на payment иконите — освобождава място за баджовете */ body #wfacp-e-form #payment ul.payment_methods label img { display: none !important; } body #wfacp-e-form #payment .payment_box { padding: 0 16px 12px 44px !important; font-family: var(--f) !important; font-size: 12.5px !important; color: var(--t2) !important; background: none !important; border: none !important; margin: 0 !important; } body #wfacp-e-form #payment .payment_box::before { display: none !important; } body #wfacp-e-form #payment ul.payment_methods li.ansa-active { background: rgba(232, 114, 42, .04) !important; } body #wfacp-e-form #payment ul.payment_methods li.ansa-active::after { content: "" !important; position: absolute !important; left: 0 !important; top: 0 !important; bottom: 0 !important; width: 3.5px !important; background: var(--ao) !important; pointer-events: none !important; z-index: 1 !important; display: block !important; } body #wfacp-e-form #payment ul.payment_methods li:first-child.ansa-active::after { border-radius: 11px 0 0 0 !important; } body #wfacp-e-form #payment ul.payment_methods li:last-child.ansa-active::after { border-radius: 0 0 0 11px !important; } /* ═══════ STRIPE ═══════ */ body #wfacp-e-form .fkwcs-credit-card-field { border: 1.5px solid var(--b) !important; border-radius: var(--rs) !important; padding: 12px !important; background: var(--w) !important; } /* ═══════ ORDER BUMP (FunnelKit wfob) ═══════ Целта е изгледът от FK builder preview-то: компактна карта, изображение вляво, inline цени, стегнат checkbox ред. CSS-ът зарежда само на checkout, затова scope-ът body .wfob_wrapper е безопасен. */ body #wfacp-e-form #wfob_wrap { margin: 14px 0 !important; } body .wfob_wrapper .wfob_bump { background: #f2f7fd !important; border: 1.5px solid #cdd9ea !important; border-radius: var(--r) !important; padding: 16px !important; margin: 0 !important; box-shadow: none !important; position: relative !important; overflow: visible !important; } body .wfob_wrapper .wfob_sec_start { padding: 0 !important; margin: 0 !important; } /* Основен ред: имидж вляво, текст вдясно */ body .wfob_wrapper .bwf_display_flex { display: flex !important; gap: 14px !important; align-items: flex-start !important; } body .wfob_wrapper .wfob_pro_image_wrap { flex: 0 0 92px !important; max-width: 92px !important; padding: 0 !important; margin: 0 !important; } body .wfob_wrapper .wfob_pro_img_wrap { margin: 0 !important; padding: 0 !important; } body .wfob_wrapper .wfob_pro_img_wrap img { width: 100% !important; height: auto !important; border-radius: 10px !important; border: 1px solid #dde7f3 !important; display: block !important; background: var(--w) !important; } /* v12.0.2: .wfob-moved = FK вече е преместил изображението като float в описанието → видимото изображение е .wfob-float-img, колоната се крие. (В 12.0.1 беше обратното и изображението изчезваше изцяло.) */ body .wfob_wrapper .wfob_pro_image_wrap.wfob-moved { display: none !important; } body .wfob_wrapper .wfob-float-img { float: left !important; width: 88px !important; height: auto !important; border-radius: 10px !important; border: 1px solid #dde7f3 !important; margin: 0 12px 8px 0 !important; background: var(--w) !important; display: block !important; } /* Ако колоната е видима (без wfob-moved), крием float-a — никога двете едновременно */ body .wfob_wrapper .wfob_bump:has(.wfob_pro_image_wrap:not(.wfob-moved)) .wfob-float-img { display: none !important; } body .wfob_wrapper .wfob_pro_txt_wrap { flex: 1 !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important; } body .wfob_wrapper .wfob_description_wrap { padding: 0 !important; margin: 0 !important; } /* Бадж — пил, само на активната позиция (above_description при нашите бъмпове). FK принтира баджа до 4 пъти в маркъпа; скриваме останалите позиции. */ body .wfob_wrapper .wfob_exclusive_content { margin: 0 0 8px !important; line-height: 1 !important; } body .wfob_wrapper .wfob_exclusive_content span { display: inline-block !important; padding: 4px 10px !important; border-radius: 6px !important; font-family: var(--f) !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: .3px !important; line-height: 1.3 !important; } body .wfob_wrapper .wfob_exclusive_outside_top_left, body .wfob_wrapper .wfob_exclusive_outside_top_right, body .wfob_wrapper .wfob_exclusive_below_description { display: none !important; } /* Описание */ body .wfob_wrapper .wfob_skin_description { margin: 0 0 8px !important; } body .wfob_wrapper .wfob_text_inner p { font-family: var(--f) !important; font-size: 13.5px !important; line-height: 1.5 !important; color: var(--t) !important; margin: 0 !important; } /* Цени — inline на един ред. FK skin_type_3 позиционира del АБСОЛЮТНО върху ins (анимационен ефект) → цените се препокриваха. Форсираме static. */ body .wfob_wrapper .wfob_price_container { border: none !important; border-top: none !important; padding: 0 !important; margin: 0 0 10px !important; background: none !important; position: static !important; } body .wfob_wrapper .wfob_price { display: block !important; font-family: var(--f) !important; text-align: left !important; position: static !important; line-height: 1.4 !important; } body .wfob_wrapper .wfob_price del, body .wfob_wrapper .wfob_price ins { position: static !important; inset: auto !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; transform: none !important; animation: none !important; opacity: 1 !important; display: inline-block !important; vertical-align: baseline !important; margin: 0 !important; background: none !important; } body .wfob_wrapper .wfob_price del { font-size: 12.5px !important; color: var(--t3) !important; text-decoration: line-through !important; } body .wfob_wrapper .wfob_price ins { text-decoration: none !important; font-size: 15px !important; font-weight: 700 !important; color: var(--t) !important; margin-left: 8px !important; } body .wfob_wrapper .wfob_price .woocommerce-Price-amount { color: inherit !important; font-size: inherit !important; font-weight: inherit !important; position: static !important; } /* Checkbox ред — стегната бяла кутия като в FK preview */ body .wfob_wrapper .wfob_title_wrap { margin: 0 !important; padding: 0 !important; } body .wfob_wrapper .wfob_bgBox_table { background: var(--w) !important; border: 1.5px solid #cdd9ea !important; border-radius: 10px !important; padding: 10px 14px !important; display: block !important; } body .wfob_wrapper .wfob_bump_title_start { display: flex !important; align-items: center !important; gap: 10px !important; } body .wfob_wrapper .wfob_checkbox_input_wrap { display: flex !important; align-items: center !important; margin: 0 !important; } body .wfob_wrapper .wfob_bump_checkbox { display: flex !important; align-items: center !important; } body .wfob_wrapper .wfob_label_wrap { min-width: 0 !important; } body .wfob_wrapper .wfob_label_wrap label { font-family: var(--f) !important; font-size: 13.5px !important; font-weight: 600 !important; color: var(--t) !important; margin: 0 !important; padding: 0 !important; cursor: pointer !important; line-height: 1.4 !important; display: inline !important; } /* Checkbox в бъмпа — същият стил като останалите (маркъпът е .wfob_wrapper, не #wfob_wrap, затова дублираме правилото) */ body .wfob_wrapper input[type="checkbox"] { width: 20px !important; height: 20px !important; min-width: 20px !important; border: 2px solid var(--b) !important; border-radius: 6px !important; appearance: none !important; -webkit-appearance: none !important; background: var(--w) !important; cursor: pointer !important; flex-shrink: 0 !important; margin: 0 !important; box-shadow: none !important; display: inline-block !important; vertical-align: middle !important; position: relative !important; float: none !important; } body .wfob_wrapper input[type="checkbox"]::before, body .wfob_wrapper input[type="checkbox"]::after { display: none !important; content: none !important; } body .wfob_wrapper input[type="checkbox"]:checked { background-color: var(--ao) !important; border-color: var(--ao) !important; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 4.5L5.5 10L3 7.5' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-size: 14px !important; background-position: center !important; background-repeat: no-repeat !important; } /* Скриване на празните tooltip/blink остатъци от FK маркъпа */ body .wfob_wrapper .wfob-social-proof-tooltip:empty, body .wfob_wrapper .wfob-social-proof-tooltip-header:empty, body .wfob_wrapper .wfob-social-proof-tooltip-content:empty, body .wfob_wrapper .wfob_blink_img_wrap:empty { display: none !important; } /* ═══════ PLACE ORDER ═══════ */ body #wfacp-e-form #place_order { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 56px !important; background: linear-gradient(135deg, #e8722a, #d4611e) !important; color: #fff !important; border: none !important; border-radius: var(--r) !important; font-family: var(--f) !important; font-size: 16px !important; font-weight: 700 !important; cursor: pointer !important; box-shadow: 0 4px 16px rgba(232, 114, 42, .25) !important; text-transform: none !important; letter-spacing: 0 !important; } body #wfacp-e-form #place_order:hover { transform: translateY(-1px) !important; box-shadow: 0 6px 24px rgba(232, 114, 42, .30) !important; } /* ═══════ COUPON ═══════ */ body #wfacp-e-form .wfacp-coupon-section .wfacp_coupon_field_input { height: 42px !important; border: 1.5px solid var(--b) !important; border-radius: var(--rs) !important; font-family: var(--f) !important; } body #wfacp-e-form .wfacp-coupon-section .wfacp-coupon-field-btn { height: 42px !important; border-radius: var(--rs) !important; background: var(--ao) !important; color: #fff !important; font-family: var(--f) !important; font-weight: 600 !important; border: none !important; } /* ═══════ LOGIN ═══════ */ body .wfacp_custom_login_wrapper { font-family: var(--f) !important; font-size: 13px !important; color: var(--t2) !important; } body .wfacp_custom_login_wrapper a { color: var(--ao) !important; font-weight: 600 !important; } /* ═══════ SHIPPING SUBTITLE ═══════ */ body #wfacp-e-form .wfacp_main_form label.label_shiping { font-family: var(--f) !important; font-size: 13px !important; color: var(--t2) !important; margin-bottom: 10px !important; } /* ═══════ CHROME: степер, FSB, trust, гаранция, ревю ═══════ */ .ansa-hd { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 14px 16px; background: rgba(246, 243, 239, .92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); margin-bottom: 10px; font-family: var(--f); } .ansa-hd-steps { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--t3); } .ansa-hd-s { padding: 5px 12px; border-radius: 16px; white-space: nowrap; } .ansa-hd-s.done { color: var(--ag); } .ansa-hd-s.now { color: var(--ao); background: rgba(232, 114, 42, .08); } .ansa-hd-sep { width: 14px; height: 1.5px; background: var(--b2); } .ansa-fsb { margin-bottom: 10px; font-family: var(--f); max-width: 100%; overflow: hidden; } .ansa-fsb-inner { padding: 10px 16px; border-radius: var(--r); font-size: 13px; font-weight: 500; text-align: center; line-height: 1.4; overflow: hidden; } .ansa-fsb.free .ansa-fsb-inner { background: var(--agb); color: var(--ag); } .ansa-fsb-bar { height: 3px; border-radius: 2px; background: rgba(0, 0, 0, .06); margin-top: 6px; overflow: hidden; max-width: 100%; } .ansa-fsb-fill { height: 100%; border-radius: 2px; background: var(--ag); } /* wc_price рендва — темата го чупеше на нов ред (float/block) и барът се разпадаше на 3 реда с изместена цена */ .ansa-fsb-inner .woocommerce-Price-amount, .ansa-fsb-inner .woocommerce-Price-currencySymbol, .ansa-fsb-inner bdi, .ansa-fsb-inner strong { display: inline !important; float: none !important; font-size: inherit !important; color: inherit !important; font-weight: 700 !important; margin: 0 !important; padding: 0 !important; } /* Компактни, ляво подравнени; text-align:left се форсира, защото FK центрира текст в някои от wrapper-ите си (виж центрирания цитат в v12.0.0) */ .ansa-bottom-blocks { margin-top: 12px; text-align: left !important; } .ansa-bottom-blocks * { text-align: left !important; } /* v12.0.3: стрей копия (клонирани от FK извън блока) се крият МОМЕНТАЛНО от CSS — JS cleanup-ът с таймери губеше надпреварата с късните клонирания */ .ansa-trust:not(.ansa-bottom-blocks .ansa-trust), .ansa-guarantee:not(.ansa-bottom-blocks .ansa-guarantee), .ansa-review:not(.ansa-bottom-blocks .ansa-review) { display: none !important; } .ansa-guarantee { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border: 1px solid #d1fae5; border-radius: var(--rs); background: var(--agb); font-family: var(--f); } .ansa-guarantee svg { width: 20px; height: 20px; flex-shrink: 0; } .ansa-guarantee-body { min-width: 0; line-height: 1.45; } .ansa-guarantee-txt { font-size: 12.5px; font-weight: 700; color: var(--ag); margin-right: 6px; } .ansa-guarantee-sub { font-size: 11.5px; color: var(--t2); } .ansa-review { border: 1px solid var(--b); border-radius: var(--rs); background: var(--w); padding: 12px 14px; margin-top: 8px; font-family: var(--f); } .ansa-review-hd { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; } .ansa-review-ava { width: 32px; height: 32px; border-radius: 50%; background: var(--aog); color: var(--ao); font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .ansa-review-meta { min-width: 0; line-height: 1.3; } .ansa-review-name { font-size: 13px; font-weight: 700; color: var(--t); } .ansa-review-handle { font-size: 11px; color: var(--t3); } .ansa-review-stars { color: #f59e0b; font-size: 11px; letter-spacing: 1px; margin-left: 4px; font-weight: 400; } .ansa-review-txt { font-size: 12.5px; color: var(--t2); line-height: 1.5; } .ansa-trust { padding: 10px 0 0; font-family: var(--f); font-size: 10.5px; color: var(--t3); font-weight: 500; text-align: center !important; } /* ═══════ MOBILE CTA ═══════ */ .ansa-mob-cta { display: none; } /* ═══════ MOBILE ═══════ */ @media (max-width: 767px) { body #wfacp-e-form .wfacp-section { padding: 16px 14px !important; } /* iOS Safari зуумва при фокус на инпут под 16px — вдигаме всичко */ body #wfacp-e-form .wfacp_main_form.woocommerce input[type="text"], body #wfacp-e-form .wfacp_main_form.woocommerce input[type="email"], body #wfacp-e-form .wfacp_main_form.woocommerce input[type="tel"], body #wfacp-e-form .wfacp_main_form.woocommerce input[type="password"], body #wfacp-e-form .wfacp_main_form.woocommerce input[type="number"], body #wfacp-e-form .wfacp_main_form.woocommerce textarea, body #wfacp-e-form #billing_phone_field .iti input[type="tel"], body #wfacp-e-form ul#shipping_method [id*="address-detail"] input, body #wfacp-e-form ul#shipping_method [id*="street"] input, body #wfacp-e-form ul#shipping_method li input[type="text"] { font-size: 16px !important; } .select2-search--dropdown .select2-search__field { font-size: 16px !important; height: 44px !important; } body #wfacp-e-form ul#shipping_method li .wfacp_single_shipping { padding: 12px 12px 12px 38px !important; } body #wfacp-e-form ul#shipping_method li .wfacp_shipping_radio input[type="radio"] { left: 12px !important; } body #wfacp-e-form ul#shipping_method li .wfacp_shipping_radio label { font-size: 12.5px !important; } body #wfacp-e-form ul#shipping_method li .wfacp_shipping_price { font-size: 11.5px !important; padding-left: 8px !important; } body #wfacp-e-form ul#shipping_method li div[id*="select-container"], body #wfacp-e-form ul#shipping_method li div[id*="address-detail-container"] { padding: 4px 12px 8px 12px !important; } .select2-container--open .select2-dropdown { max-width: 94vw !important; } .select2-results__option { padding: 12px 14px !important; font-size: 13px !important; min-height: 44px !important; } body #wfacp-e-form #payment ul.payment_methods li > label { padding: 12px 10px 12px 38px !important; font-size: 12px !important; gap: 4px !important; flex-wrap: nowrap !important; justify-content: space-between !important; } body #wfacp-e-form #payment ul.payment_methods li > input.input-radio { left: 12px !important; } body #wfacp-e-form #payment .payment_box { padding: 0 10px 10px 38px !important; } /* мин. 10px — 8px беше нечетимо */ body #wfacp-e-form #payment ul.payment_methods label small { font-size: 10px !important; padding: 2px 6px !important; } body #wfacp-e-form #place_order { height: 50px !important; font-size: 14.5px !important; } /* Order bump на мобилно */ body .wfob_wrapper .wfob_bump { padding: 12px !important; } body .wfob_wrapper .bwf_display_flex { gap: 10px !important; } body .wfob_wrapper .wfob_pro_image_wrap { flex: 0 0 72px !important; max-width: 72px !important; } body .wfob_wrapper .wfob-float-img { width: 68px !important; margin: 0 10px 6px 0 !important; } body .wfob_wrapper .wfob_text_inner p { font-size: 12.5px !important; } body .wfob_wrapper .wfob_label_wrap label { font-size: 12.5px !important; } body .wfob_wrapper .wfob_bgBox_table { padding: 9px 12px !important; } /* v12.0.3: на мобилно степерът НЕ е sticky (заедно със site header-а изяждаше половината екран) и е максимално слим */ .ansa-hd { position: static !important; padding: 6px 8px !important; margin-bottom: 6px !important; background: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .ansa-hd-steps { font-size: 10px !important; gap: 2px !important; } .ansa-hd-s { padding: 3px 6px !important; } .ansa-hd-sep { width: 10px !important; } .ansa-fsb { margin-bottom: 6px !important; } .ansa-fsb-inner { padding: 7px 12px !important; font-size: 11.5px !important; } /* Място за фиксирания CTA бар */ body.wfacp_page { padding-bottom: 76px !important; } body:has(.ansa-mob-cta) { padding-bottom: 76px !important; } .ansa-mob-cta { display: flex; align-items: center; position: fixed; bottom: 0; left: 0; right: 0; background: var(--w); border-top: 1px solid var(--b); padding: 10px 14px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0)); z-index: 9999; box-shadow: 0 -4px 20px rgba(0, 0, 0, .06); font-family: var(--f); gap: 12px; } .ansa-mob-info { flex-shrink: 0; } .ansa-mob-l { font-size: 9px; color: var(--t3); font-weight: 600; text-transform: uppercase; } .ansa-mob-a { font-size: 16px; font-weight: 700; color: var(--t); } .ansa-mob-a .woocommerce-Price-amount { font-size: inherit; font-weight: inherit; color: inherit; } .ansa-mob-btn { flex: 1; height: 46px; background: linear-gradient(135deg, #e8722a, #d4611e); color: #fff; border: none; border-radius: var(--r); font-family: var(--f); font-size: 14.5px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 14px rgba(232, 114, 42, .25); display: flex; align-items: center; justify-content: center; } }