/* ========================================================================== CHECKOUT PAGE — MaskeZaMob.rs File: flatsome-child/css/_checkout.css Verzija: 1.1 Napomena: Checkout koristi WooCommerce Blocks (Gutenberg), ne klasični WooCommerce template — isti pristup kao _cart.css. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Sakrij sidebar widget (Archives/Categories) na checkout stranici -------------------------------------------------------------------------- */ .woocommerce-checkout .widget_archive, .woocommerce-checkout .widget_categories, .woocommerce-checkout .sidebar, .woocommerce-checkout .row.large-columns-4.mb-0 { display: none !important; } /* -------------------------------------------------------------------------- 2. Opšta tipografija — ceo checkout -------------------------------------------------------------------------- */ .wp-block-woocommerce-checkout, .wc-block-checkout { font-family: var(--mzm-font-family); } /* Naslovi sekcija — "Contact information", "Billing address", "Payment options" */ .wc-block-components-checkout-step__title { font-family: var(--mzm-font-family) !important; font-size: var(--mzm-text-base) !important; font-weight: 700 !important; color: var(--mzm-text-primary) !important; } /* -------------------------------------------------------------------------- 3. Input polja -------------------------------------------------------------------------- */ .wc-block-components-text-input input, .wc-block-components-text-input textarea, .wc-block-components-country-input .components-combobox-control__input, .wc-block-components-state-input .components-combobox-control__input { font-family: var(--mzm-font-family) !important; border: var(--mzm-border-width) solid var(--mzm-border) !important; border-radius: var(--mzm-radius-sm) !important; font-size: var(--mzm-text-sm) !important; transition: border-color var(--mzm-transition-fast), box-shadow var(--mzm-transition-fast) !important; } .wc-block-components-text-input input:focus, .wc-block-components-text-input textarea:focus, .wc-block-components-country-input .components-combobox-control__input:focus, .wc-block-components-state-input .components-combobox-control__input:focus { border-color: var(--mzm-accent) !important; box-shadow: 0 0 0 3px var(--mzm-accent-light) !important; outline: none !important; } /* Label boja */ .wc-block-components-text-input label, .wc-block-components-country-input label, .wc-block-components-state-input label { font-family: var(--mzm-font-family) !important; color: var(--mzm-text-secondary) !important; } /* Dropdown select boja */ .wc-block-components-country-input, .wc-block-components-state-input { font-family: var(--mzm-font-family) !important; } /* -------------------------------------------------------------------------- 4. Payment options box -------------------------------------------------------------------------- */ .wc-block-components-radio-control__option { border: var(--mzm-border-width) solid var(--mzm-border) !important; border-radius: var(--mzm-radius-md) !important; font-family: var(--mzm-font-family) !important; transition: border-color var(--mzm-transition-fast) !important; } .wc-block-components-radio-control__option-checked, .wc-block-components-radio-control__option[aria-checked="true"] { border-color: var(--mzm-accent) !important; background-color: var(--mzm-accent-light) !important; } .wc-block-components-radio-control__input:checked { accent-color: var(--mzm-accent) !important; } .wc-block-components-radio-control__option-layout__label { font-weight: var(--mzm-font-semibold) !important; color: var(--mzm-text-primary) !important; } .wc-block-components-radio-control__description { font-size: var(--mzm-text-xs) !important; color: var(--mzm-text-secondary) !important; } /* -------------------------------------------------------------------------- 5. "Place Order" dugme — accent plava -------------------------------------------------------------------------- */ .wc-block-components-checkout-place-order-button, button.wc-block-components-checkout-place-order-button { background-color: var(--mzm-accent) !important; color: #ffffff !important; border: none !important; border-radius: var(--mzm-radius-md) !important; font-family: var(--mzm-font-family) !important; font-weight: var(--mzm-font-semibold) !important; font-size: var(--mzm-text-base) !important; padding: 0.875rem 1.5rem !important; width: 100%; transition: background-color var(--mzm-transition-base) !important; } .wc-block-components-checkout-place-order-button:hover { background-color: #2d6fd4 !important; } /* -------------------------------------------------------------------------- 6. Order summary box (desno na desktopu) -------------------------------------------------------------------------- */ .wc-block-components-sidebar .wc-block-components-panel, .wp-block-woocommerce-checkout-order-summary-block { background-color: var(--mzm-surface) !important; border: var(--mzm-border-width) solid var(--mzm-border) !important; border-radius: var(--mzm-radius-md) !important; padding: 1.5rem !important; font-family: var(--mzm-font-family) !important; } .wc-block-components-checkout-order-summary__title-text, .wp-block-woocommerce-checkout-order-summary-block h2 { font-family: var(--mzm-font-family) !important; font-size: var(--mzm-text-base) !important; font-weight: 700 !important; color: var(--mzm-text-primary) !important; } /* Proizvod u order summary — sakrij SAMO opis paragraf, ne naziv */ .wc-block-components-product-metadata__description p { display: none !important; } /* Naziv proizvoda u order summary — stilizuj */ .wc-block-components-product-name { display: block !important; font-family: var(--mzm-font-family) !important; font-size: var(--mzm-text-sm) !important; font-weight: var(--mzm-font-semibold) !important; color: var(--mzm-text-primary) !important; margin: 0 0 0.25rem 0 !important; } /* Subtotal / Total redovi */ .wc-block-components-totals-item__label, .wc-block-components-totals-item__value { font-family: var(--mzm-font-family) !important; color: var(--mzm-text-primary) !important; } .wc-block-components-totals-footer-item .wc-block-components-totals-item__label, .wc-block-components-totals-footer-item .wc-block-components-totals-item__value { font-weight: 700 !important; font-size: var(--mzm-text-base) !important; } /* -------------------------------------------------------------------------- 7. Checkbox "Add a note" i terms linkovi -------------------------------------------------------------------------- */ .wc-block-checkout__add-note, .wc-block-checkout-terms-block { font-family: var(--mzm-font-family) !important; font-size: var(--mzm-text-sm) !important; color: var(--mzm-text-secondary) !important; } .wc-block-checkout-terms-block a { color: var(--mzm-accent) !important; } /* -------------------------------------------------------------------------- 8. Order summary — količina vidljivija (plava pilula) -------------------------------------------------------------------------- */ .wc-block-components-order-summary-item__quantity { background-color: var(--mzm-accent) !important; color: #ffffff !important; font-family: var(--mzm-font-family) !important; font-weight: var(--mzm-font-bold) !important; font-size: 0.7rem !important; min-width: 20px !important; height: 20px !important; line-height: 20px !important; border-radius: 999px !important; border: 2px solid #ffffff !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) !important; } /* -------------------------------------------------------------------------- 9. Mobile -------------------------------------------------------------------------- */ @media (max-width: 768px) { .wc-block-components-sidebar .wc-block-components-panel, .wp-block-woocommerce-checkout-order-summary-block { padding: 1.25rem !important; } /* KRITIČNO: WooCommerce Blocks renderuje order summary DVA PUTA u DOM-u (sticky sidebar verzija + inline verzija pre Place Order dugmeta). Na desktopu se sidebar verzija prikazuje sa strane, a na mobilnom bi se obe prikazale jedna ispod druge ako se ne sakrije jedna. Sakrivamo sticky sidebar duplikat — ostaje samo inline verzija unutar forme. */ .wc-block-components-sidebar.wc-block-checkout__sidebar { display: none !important; } /* Smanji razmak između breadcrumb-a i checkout sadržaja */ .checkout-page-title.page-title { padding-bottom: 0.5rem !important; } .wc-block-components-sidebar-layout.wc-block-checkout { margin-top: 0 !important; gap: 0.75rem !important; } } /* ============================================================ * THANK YOU STRANA (`F-065`, 27.08.2026.) * * ⚠️ Ova strana je KLASIČNA, ne blok — izmereno 27.08. na živoj strani, posle * probne porudžbine. Zato ovde nema nijednog `.wc-block-*` selektora; oni na * njoj ne postoje. * ============================================================ */ /* ⚠️ Prelom ide na SAME spanove, ne na roditelja. 28.08. je izmereno na porudžbini 80531: naslov i donacija su bili slepljeni („…baš kod nas!Doniraćemo"), iako su oba spana imala svoj font-size — dakle CSS je bio na serveru i klase su pogađale, ali `display: flex` na `.woocommerce-thankyou-order-received` nije uradio ništa. Nije izmereno ZAŠTO — Flatsome ovde ima svoj šablon i klasa možda nije ni prisutna. `display: block` na spanu radi u oba slučaja i ne zavisi od imena wrappera. */ .mzm-ty__naslov { display: block; font-size: 1.35rem; font-weight: 700; line-height: 1.3; } .mzm-ty__donacija { display: block; margin-top: 0.35rem; font-size: 1rem; font-weight: 400; line-height: 1.5; } .mzm-ty { display: grid; gap: 1.5rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(0, 0, 0, 0.1); } /* ⚠️ `auto-fit` prati ŠIRINU, ne broj stavki, i `minmax(0, …)` je obavezan — sa `1fr` umesto `0` dugačak red teksta razvuče kolonu preko kontejnera. Prag 850 je granica koju projekat koristi svuda (`F-056`). */ @media (min-width: 850px) { .mzm-ty { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 2.5rem; } } .mzm-ty__pod { margin: 0 0 0.5rem; font-size: 1rem; font-weight: 700; } .mzm-ty__blok p { margin: 0 0 0.5rem; line-height: 1.6; } .mzm-ty__blok p:last-child { margin-bottom: 0; } /* ── Adresa za naplatu se ne prikazuje (05.09.2026.) ──────────────────────── * * Naplatna adresa se NE PRIKUPLJA — sekcija `Billing Address` je sakrivena na * blagajni, a Vera pravna lica obrađuje ručno. WooCommerce je svejedno ispisuje * na thank you strani, jer je pri kreiranju porudžbine prepiše iz adrese za * isporuku. Kupac tako vidi dve identične adrese jednu pored druge i pita se u * čemu je razlika. * * ⚠️ Sakriva se PRIKAZ, ne podatak. Adresa i dalje stoji na porudžbini u * adminu, gde treba da stoji — ovo nije brisanje. * * ⚠️ PROMAŠUJE BEZBEDNO: ako Woo ikad promeni ime klase, kolona za naplatu se * ponovo pojavi (nezgodno), a nikad se ne desi da nestanu OBE adrese. * Zato se cilja kolona po imenu, a ne roditelj kroz `:has()` — `:has()` * pogađa svakog pretka koji sadrži metu, ne najbližeg (`D-056`). */ .woocommerce-order .woocommerce-column--billing-address { display: none; } /* Preostala kolona uzima punu širinu — inače adresa za isporuku ostane stisnuta na pola strane, sa praznom polovinom pored sebe. */ .woocommerce-order .woocommerce-columns--addresses .woocommerce-column--shipping-address { width: 100%; max-width: 100%; float: none; } /* ── Blok „Podaci o kupcu" (05.09.2026.) ──────────────────────────────────── * * Ispisuje ga `mzm_thankyou_podaci_o_kupcu()` na prioritetu 5, dakle IZNAD * tabele porudžbine. Zamenjuje razbacane Woo blokove: adresa je bila pod * tabelom, podaci o firmi na dnu strane. * * ⚠️ Zato se ISPOD tabele sakriva cela sekcija sa adresama — inače kupac istu * adresu vidi dvaput na istoj strani. Sakriva se SAMO na strani * „porudžbina završena" (`.woocommerce-order-received`); u „Moj nalog" ta * sekcija ostaje, jer se tamo naš blok ne ispisuje. */ .mzm-ty-kupac { margin: 0 0 2rem; } .mzm-ty-kupac__naslov { margin: 0 0 0.75rem; font-size: 1.25rem; font-weight: 700; } .mzm-ty-kupac__lista { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1.25rem; margin: 0; } .mzm-ty-kupac__lista dt { margin: 0; font-weight: 600; color: var(--mzm-text-muted, #6b7280); } .mzm-ty-kupac__lista dd { margin: 0; line-height: 1.5; } /* ⚠️ Ispod 550 se dve kolone slepe u jednu: „Adresa za dostavu" je dugačka etiketa i na telefonu bi vrednosti ostavila prst širine. Prag 550 je granica koju projekat već koristi. */ @media (max-width: 549px) { .mzm-ty-kupac__lista { grid-template-columns: 1fr; gap: 0.15rem; } .mzm-ty-kupac__lista dd { margin-bottom: 0.6rem; } } /* Adresa ispod tabele — sada je gore, u našem bloku. */ .woocommerce-order-received .woocommerce-customer-details { display: none; } /* ── Slika dizajna uz stavku porudžbine (05.09.2026.) ─────────────────────── * * Ispisuje je `mzm_print_slika_na_porudzbini()` iz `print-designer-cpt.php`. * ⚠️ Veličina je ovde, a ne u PHP-u: kad se menja izgled, menja se CSS, ne kod * koji bira sliku. */ .mzm-order-dizajn { display: block; width: 84px; margin: 0 0 0.6rem; } .mzm-order-dizajn img { display: block; width: 100%; height: auto; border-radius: 6px; background: #f3f4f6; } /* ── Slika levo, podaci uz nju (05.09.2026.) ──────────────────────────────── * * Podrazumevano je slika stajala u svom redu, a `Model / Dizajn / Šifra` ispod * nje — pa je desna polovina ćelije ostajala prazna. Sada slika pluta levo, a * spisak podataka teče pored nje. * * ⚠️ `overflow: hidden` na spisku NIJE sakrivanje. Njime spisak dobija svoj * formatting context i staje PORED plutajuće slike umesto da se podvuče pod * nju. Bez toga duži naziv modela prelomi red ispod slike i dobije se isto * prazno mesto, samo niže. * * ⚠️ Zato se ovaj `overflow` NE SME preneti na predak koji sadrži nešto * lepljivo — `overflow` na pretku ubija `position: sticky`. Ovde je na * listi, koja ne sadrži ništa takvo. * * ⚠️ Važi i za thank you stranu i za „Moj nalog → porudžbina" — obe koriste * isti `.woocommerce-order-details`. Namerno: ista porudžbina treba da * izgleda isto gde god se otvori. */ .woocommerce-order-details .mzm-order-dizajn { float: left; width: 110px; margin: 0.15rem 1rem 0.5rem 0; } .woocommerce-order-details .wc-item-meta { overflow: hidden; margin: 0; padding: 0; list-style: none; } /* Etiketa i vrednost u istom redu. Woo ih podrazumevano prelama, jer je vrednost u `

` — a blok element u listi znači nov red za svaku vrednost. */ .woocommerce-order-details .wc-item-meta li { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0 0 0.2rem; } .woocommerce-order-details .wc-item-meta p { margin: 0; line-height: 1.5; } /* ⚠️ Ćelija mora da „obuhvati" plutajuću sliku, inače joj slika ispadne iz visine reda i pređe preko zbira ispod tabele. */ .woocommerce-order-details .woocommerce-table__product-name::after { content: ""; display: table; clear: both; } /* Na telefonu slika ide uže, da uz nju ostane bar pola širine za tekst. */ @media (max-width: 549px) { .woocommerce-order-details .mzm-order-dizajn { width: 84px; margin-right: 0.75rem; } } /* ========================================================== * SAKRIVANJE ELEMENATA BLOK BLAGAJNE (04.09.2026.) * ========================================================== * Zahtev klijenta sa sastanka 03.09. + dopune Vere 04.09. * * ⚠️ ZAŠTO CSS A NE PODEŠAVANJE * Svi unutrašnji blokovi Woo blagajne su ZAKLJUČANI — ne mogu se obrisati * iz liste blokova. Provereno u editoru 04.09.: `Billing Address` nema * nijedno podešavanje osim „Advanced". Dakle nema prekidača; ostaje CSS. * * ⚠️ ZAŠTO OVDE A NE U POLJU „Additional CSS" NA BLOKU * To polje čuva CSS U BAZI, unutar bloka. Ne postoji ni u jednom fajlu, * ne nalazi se `grep`-om, i ne vidi se pri pregledu teme. Projekat već ima * tu ranu sa Customizer odlukama koje izgledaju kao CSS a nisu u fajlu. * * ⚠️ OVO SU KRPE, NE PODEŠAVANJA. Element je i dalje u DOM-u i i dalje šalje * vrednost — kupac ga samo ne vidi. Zapisano namerno, da se ne čita kao * da je Woo tako podešen. * ========================================================== */ /* --- 1. „Koristite istu adresu za naplatu" ------------------ * Klasa izmerena iz konzole 04.09.2026. na `/checkout/`: * wc-block-components-checkbox wc-block-checkout__use-address-for-billing * * ⚠️ SAMO SAKRIVANJE ČEKBOKSA NIJE BILO DOVOLJNO — i to se obistinilo već * sutradan. Rečenica koja je ovde stajala 04.09. glasila je: „ako Woo ikad * promeni podrazumevano stanje na neČekirano, ovde će se tiho pojaviti CELA * naplatna forma umesto čekboksa". **05.09. se pojavila.** * Izmereno: `checked=false`, forma prisutna, **6 obaveznih polja** u njoj. * * ⛔ FORMA SE NE SME SAKRITI CSS-om — sakrivena obavezna polja zaglave blagajnu * na grešci koju kupac ne vidi. Zato se čekboks od 05.09. vraća u čekirano * stanje iz `inc/mzm-blagajna.php`; Woo tada sam ukloni formu iz DOM-a. * **Ovo pravilo sakriva samo čekboks i ne sme da se proširi na formu.** * * ⚠️ Zapisana zamka nije rešena zamka. Ova je bila opisana rečenicu po * rečenicu 24 sata pre nego što je naplaćena. */ .wc-block-checkout__use-address-for-billing { display: none; } /* --- 2. „Opcije za isporuku" -------------------------------- * * ⛔⛔ USLOVNO PRAVILO — VAŽI SAMO DOK POSTOJI TAČNO JEDNA METODA DOSTAVE. * * Sada: zona `Srbija`, jedna metoda, 480 RSD. Woo je sam selektuje, pa * sakrivanje ništa ne oduzima kupcu. * * ⚠️ KUPONI SAMI PO SEBI NISU PROBLEM. Odluka Vere 04.09.2026.: besplatna * dostava se NE uvodi kao metoda, nego kuponom koji **umanjuje iznos za * 480**. Takav kupon ne stvara drugu metodu i ovo pravilo ostaje ispravno. * * ⛔ OPASNO JE TAČNO JEDNO POLJE: čekboks **„Allow free shipping"** u * podešavanjima kupona. Ako ga neko čekira umesto da unese fiksni popust, * Woo doda metodu „Besplatna dostava" — kupac je sa ovim pravilom NE VIDI, * ne može da je izabere, i biva mu naplaćeno 480 uprkos kuponu. * **To se ne prijavljuje kao greška nego kao reklamacija kupca.** * * ⛔ PRAVILO ZA KUPONE: popust na dostavu se unosi kao **fiksni iznos**. * „Allow free shipping" ostaje NEČEKIRAN dok ovo pravilo postoji. * * ⛔ Ako se „Allow free shipping" ipak bude koristio: obrisati ovo pravilo * ILI ga zameniti uslovnim oblikom koji sakriva sekciju samo kad nema * druge opcije. Uslovni oblik NIJE upisan sada jer traži tačnu klasu * pojedinačne stavke, a ona nije izmerena — a nemerena klasa je danas * već dvaput koštala krug. * * Provera pred svaku izmenu dostave ili kupona: * grep -n "shipping-methods" theme/css/_checkout.css * ------------------------------------------------------------ */ .wp-block-woocommerce-checkout-shipping-methods-block { display: none; } /* --- 3. Polje „Država/Region" ------------------------------- * * Izmereno 04.09.2026. na `/checkout/`: * select#shipping-country · klasa `wc-blocks-components-select__select` * omotač `wc-blocks-components-select` · 2 opcije (placeholder + Srbija) * * ⚠️ VEZANO ZA `id`, NE ZA KLASU OMOTAČA. `wc-blocks-components-select` je * GENERIČKA klasa koju nose i druga polja (npr. „Okrug"). Sakrivanje po * njoj bi odnelo i njih — a to bi se videlo tek kad neko pokuša da poruči. * * ⚠️ ZAŠTO JE OVDE CSS BEZBEDAN, iako je polje obavezno: * `WooCommerce → Settings → General → Sell to specific countries` sadrži * SAMO Srbiju, a `Default customer location` je zemlja radnje. Polje zato * ima jednu stvarnu opciju i ona je unapred izabrana — ne može ostati * prazno, pa nema skrivene greške validacije. * * ⛔ USLOV: ovo pravilo važi SAMO dok je u „Sell to specific countries" * jedna zemlja. Čim se doda druga, kupac ne može da je izabere, a polje * je obavezno → blagajna se zaglavljuje na grešci koju kupac NE VIDI. * ⛔ Pre svakog širenja prodaje van Srbije: obrisati ovo pravilo. * * ⚠️ Blok blagajna NE sakriva ovo polje sama, iako postoji jedna zemlja — * za razliku od klasične blagajne, koja to radi. Provereno merenjem, ne * pretpostavkom: podešavanje je već bilo tačno a polje se i dalje videlo. * ------------------------------------------------------------ */ .wc-blocks-components-select:has(#shipping-country), .wc-blocks-components-select:has(#billing-country) { display: none; } /* --- 4. Kartica adrese sa dugmetom „Uredi" ------------------ * Zahtev Vere 04.09.: adresa za isporuku uvek otvorena, bez „Uredi", * i kad kupac već ima popunjene podatke. * * Izmereno 04.09.2026. na `/checkout/`: * · polja adrese SU u DOM-u i kad je kartica prikazana * (`address_1`, `first_name`, `city` — po jedno) * · lanac roditelja iznad polja: `wc-block-components-address-form` → * `…-form-wrapper` → `…-checkout-step__content` → * `fieldset.wc-block-checkout__shipping-fields` * · NIJEDAN nivo ne skriva formu — svi `display` block/flex, * visina 294px, `opacity` 1 * * ⚠️ NALAZ KOJI NIJE RAZREŠEN: merenje protivreči screenshotu. Na screenshotu * se videla SAMO kartica, a u merenju su kartica i forma bile vidljive * istovremeno. Znači stanje nije stabilno — omotač nosi klasu `is-editing` * koju Woo pali i gasi, i skupljeno stanje nije uhvaćeno merenjem. * * IZMERENA STRUKTURA (04.09.2026., skupljeno stanje): * * .wc-block-components-address-address-wrapper * ├─ .wc-block-components-address-card-wrapper visina 74 polja 0 ← kartica * │ └─ .wc-block-components-address-card visina 74 polja 0 * └─ .wc-block-components-address-form-wrapper visina 0 polja 7 ← forma * └─ .wc-block-components-address-form visina 294 polja 7 * * ⚠️ Kartica i forma su BRAĆA, ne predak i potomak. Forma je uvek u DOM-u i * puna 294px, ali je **omotač steže na visinu 0**. Zato su potrebna DVA * pravila: sakriti karticu I otpustiti visinu omotača forme. * * ⛔ PRVI POKUŠAJ 04.09. JE PAO jer je imao samo prvo pravilo: nestala je * kartica, ostao omotač od nula piksela, i cela sekcija „Adresa za * isporuku" je izgledala kao da je obrisana. * * ⚠️ POUKA 1: dijagnoza „card-wrapper je predak forme" bila je POGREŠNA. * Izvedena je iz lanca roditelja čiji se ispis prekinuo baš na tom redu. * **Prekinut ispis se ne popunjava zaključivanjem.** * ⚠️ POUKA 2: `[class*="address-card"]` u merenju vraća PRVI pogodak — a to * je spoljni omotač, ne sama kartica. Ime klase sa „card" ne dokazuje * da je element kartica. * * ⚠️ `!important` na visini je namerno: nulu postavlja Woo kroz INLINE stil * (animacija otvaranja). CSS deklaracija sa `!important` nadjačava inline * stil bez `!important` — bez toga pravilo ne bi uradilo ništa. * * ⚠️ Pošto kartica nestaje, nestaje i dugme „Uredi" — forma je jedini način * unosa, što je i bio zahtev. Animacija otvaranja/zatvaranja time prestaje * da se koristi; to nije kvar nego posledica. * ------------------------------------------------------------ */ .wc-block-components-address-card-wrapper { display: none; } /* ⚠️ Animacija otvaranja NE menja samo visinu. Prvi pokušaj je imao samo * `height` i `overflow` — prostor od 294px se otvorio, ali su polja * ostala nevidljiva. Woo koristi react-spring, koji uz visinu animira i * prozirnost (a ume i pomeraj). * * ⚠️ Forsiran je CEO skup umesto pogađanja koje je svojstvo krivac. Svako od * njih je bezopasno ako nije uzrok — vraća element u stanje „otvoren", što * je ovde trajno stanje jer kartice i dugmeta „Uredi" više nema. * * ⚠️ Ako se u nekoj budućoj verziji Woo-a forma opet ne vidi, meri * `opacity`, `visibility`, `transform` i `clip-path` NA OVOM omotaču — * ne na `.wc-block-components-address-form` unutra, on je sve vreme * ispravan (izmereno: visina 294, opacity 1). */ .wc-block-components-address-form-wrapper { height: auto !important; overflow: visible !important; opacity: 1 !important; visibility: visible !important; transform: none !important; } /* ========================================================== * POLJA ZA FIRMU (04.09.2026.) * ========================================================== * Registracija polja: `inc/mzm-polja-firme.php` * * Izmereni id-jevi (konzola, `/checkout/`): * checkbox #order-mzm-firma * text #order-mzm-kompanija * text #order-mzm-pib * text #order-mzm-maticni * * ⚠️ `name` atributi nose kosu crtu (`order_mzm/firma`), ali `id` NE * (`order-mzm-firma`). Vezivati se za `id` — kosa crta u CSS selektoru * traži escape i lako se pogreši. * ========================================================== */ /* --- 1. Redosled: napomena PRE polja za firmu --------------- * * Izmereni redosled dece `form.wc-block-checkout__form` (bio `display: block`): * 7 · fieldset · wc-block-checkout__order-fields ← polja firme * 8 · div · wc-block-checkout__order-notes ← napomena * * Zahtev Vere: prvo napomena, pa ispod nje polja firme. * * ⚠️ Blokovi su ZAKLJUČANI u editoru i ne mogu se prevući, pa se redosled * menja ovde. Forma se prebacuje na flex kolonu SAMO zato što `order` * bez flex kontejnera ne radi. * ⚠️ Elementi 0–6 ostaju na podrazumevanom `order: 0` i zadržavaju redosled * iz DOM-a. Numerisani su samo oni od napomene naniže, da se ne pomeri * ništa iznad. * ⚠️ Prelazak na flex gasi sklapanje margina — ako se razmaci promene, * to je uzrok, ne bug u pojedinačnom bloku. * ------------------------------------------------------------ */ form.wc-block-checkout__form { display: flex; flex-direction: column; } /* ⚠️ Redosled je 04.09. promenjen JEDNOM: prvo je bilo napomena → firma, * pa je Vera precizirala obrnuto. Važeće: PODACI ZA FIRMU, pa NAPOMENA. */ form.wc-block-checkout__form > .wc-block-checkout__order-fields { order: 1; } form.wc-block-checkout__form > .wc-block-checkout__order-notes { order: 2; } form.wc-block-checkout__form > .wc-block-checkout__terms { order: 3; } form.wc-block-checkout__form > .wc-block-checkout__actions { order: 4; } /* --- 2. Tri polja se otvaraju tek na čekiranje --------------- * * ⚠️ Woo API za dodatna polja NEMA uslovno prikazivanje — mora ovako. * * ⚠️ Selektor namerno NE koristi ime klase omotača polja — cilja se preko * `:has(#id)`, pa pravilo preživi promenu Woo klasa. * * ⛔ PRVI POKUŠAJ 04.09. JE PAO. Bio je napisan kao: * .wc-block-checkout__order-fields:not(…) > :has(#order-mzm-kompanija) * Ishod: nestao je i SAM ČEKBOKS, pa je ostao samo naslov „Dodatne * informacije o porudžbini" nad praznim prostorom. * * Uzrok: sva četiri polja su unutar JEDNOG direktnog deteta kontejnera. * `> :has(#kompanija)` je zato pogodio taj zajednički omotač — a u njemu * je i čekboks koji treba da ostane vidljiv. * * ⚠️ POUKA: `:has()` pogađa SVAKOG pretka koji sadrži metu, ne najbliži. * Kad se sakriva jedan element iz grupe, mora se dodati i uslov ŠTA * omotač NE SME da sadrži. * * ⚠️ Zato `:not(:has(#order-mzm-firma))` — cilja se omotač koji sadrži dato * polje ALI NE sadrži čekboks. To je uvek unutrašnji omotač pojedinačnog * polja, nikad zajednički. * * ⚠️ PROMAŠUJE BEZBEDNO: ako selektor ne nađe metu, polja OSTAJU vidljiva * (nezgodno), a ne nestaju (slomljeno). * * ⚠️ Vrednosti sakrivenih polja se I DALJE ŠALJU. Ako kupac popuni PIB pa * odčekira kutijicu, PIB stiže u porudžbinu. Prihvatljivo jer su polja * neobavezna i Vera ručno obrađuje pravna lica — ali NIJE „polja su * obrisana", nego „polja se ne vide". * ------------------------------------------------------------ */ .wc-block-checkout__order-fields:not(:has(#order-mzm-firma:checked)) :has(#order-mzm-kompanija):not(:has(#order-mzm-firma)), .wc-block-checkout__order-fields:not(:has(#order-mzm-firma:checked)) :has(#order-mzm-pib):not(:has(#order-mzm-firma)), .wc-block-checkout__order-fields:not(:has(#order-mzm-firma:checked)) :has(#order-mzm-maticni):not(:has(#order-mzm-firma)) { display: none; } /* ========================================================== * REZIME PORUDŽBINE OSTAJE PRI SKROLU (05.09.2026.) * ========================================================== * * Izmereno u konzoli 05.09., pre pisanja ijednog pravila: * * KOL `wc-block-components-sidebar` * RODITELJ `flex` / `align-items: normal` * LOMI **ništa** — nijedan predak nema `transform`, `will-change` * ni `overflow` koji bi ubio `position: sticky` * H `--flatsome--header--sticky-height` = **113px** * * ⚠️ Zato ovde NEMA gašenja Flatsome `transform`-a na `#wrapper`, kao na strani * print dizajnera. Tamo je bilo neophodno; ovde bi bila krpa za problem koji * ne postoji. Mereno, ne prepisano. * * ── Dve prepreke koje jesu postojale ─────────────────────────────────────── * * 1. `align-self`. Roditelj je flex sa podrazumevanim razvlačenjem, pa je * kolona rezimea visoka koliko i cela leva kolona. Sticky element koji je * visok kao svoj kontejner nema kuda da se pomeri — izgleda POTPUNO ISTO * kao da sticky ne radi. Zato `align-self: flex-start`, a NE * `align-items: start` na roditelju: tako se dira samo desna kolona. * * 2. `top` se vezuje za PROMENLJIVU, ne za broj. Header je lepljiv i visok * 113px; sa `top: 20px` bi se rezime zaglavio ~93px ISPOD njegove donje * ivice, delimično skriven. Tačno to se desilo pretpregledu u print * dizajneru 05.09. — a „ne radi" i „radi ali je ispod headera" izgledaju * isto, pa je dijagnoza tada bila pogrešna iz prve. * * ⚠️ Fallback `113px` u `var()` nije ukras: promenljivu postavlja Flatsome i * ona ne postoji na stranama bez lepljivog headera. * * ── Šta je namerno IZOSTAVLJENO ──────────────────────────────────────────── * * Rezime se lepi dok ima mesta i **staje uz dno svoje kolone** — ne prati do * dugmeta „Naručite". Odluka Vere 05.09.: mirnije oku. To je i podrazumevano * ponašanje `sticky`-ja, pa se ništa ne dodaje da bi se dobilo. * ========================================================== */ @media (min-width: 1200px) { .wc-block-checkout .wc-block-components-sidebar { position: sticky; top: calc(var(--flatsome--header--sticky-height, 113px) + 20px); align-self: flex-start; /* ⚠️ Zaštita za dugačku korpu: sa dovoljno stavki rezime postane viši od ekrana, pa bi mu dno — a tu je „Ukupna vrednost korpe" — ostalo nedostupno. Tada dobija svoj skrol. Ovaj `overflow` je NA lepljivom elementu, ne na njegovom pretku, pa mu ne kvari `sticky`. */ max-height: calc(100vh - var(--flatsome--header--sticky-height, 113px) - 40px); overflow-y: auto; } } /* ⚠️ Ispod 1200px se NE lepi. Tamo blagajna ide u jednu kolonu, rezime stoji iznad forme, a lepljiv blok bi na telefonu pojeo pola ekrana dok se popunjavaju polja. Prag 1200 je granica koju projekat već koristi. */