/* * Finalizarea comenzii, pe doua coloane. * * Se incarca numai la coș si la finalizare. Grila e legata de clasa * `woocommerce-checkout` de pe , deci nu atinge coșul - acolo se folosesc * doar stilurile de text de la sfarsit. * * Structura pe care se sprijina, citita din pagina la 02.09.2026: * form.checkout > #customer_details, #order_review_heading, #order_review * toti trei frati directi, iar containerul temei Storefront e `.col-full`. */ /* ------------------------------------------------------------------ * * Doua coloane, peste 900 px * ------------------------------------------------------------------ */ @media (min-width: 900px) { /* Storefront ingusteaza continutul; la finalizare avem nevoie de latime. */ .woocommerce-checkout .col-full { max-width: 1180px; } .woocommerce-checkout form.checkout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); column-gap: 2.5rem; align-items: start; } /* * Regula implicita, INAINTEA plasarilor explicite. * * In formular tipareste orice se aga de woocommerce_checkout_before_* * si _after_* - inclusiv modulele de plata. Fara linia asta, un element * neprevazut ar nimeri intr-o coloana aleasa de browser. */ .woocommerce-checkout form.checkout > * { grid-column: 1 / -1; } /* * Amandoi copiii sunt ingustati la ~48% de tema, ca resturi ale asezarii * vechi pe doua coloane. Intr-o grila, latimea o da coloana, nu procentul - * altfel ies doua fasii inguste cu un gol mare intre ele, iar titlurile * produselor se rup cate o litera pe rand. */ .woocommerce-checkout form.checkout > #customer_details, .woocommerce-checkout form.checkout > #order_review { width: 100%; float: none; } .woocommerce-checkout form.checkout > #customer_details { grid-column: 1; grid-row: 1 / span 2; } .woocommerce-checkout form.checkout > #order_review_heading { grid-column: 2; grid-row: 1; margin-top: 0; } .woocommerce-checkout form.checkout > #order_review { grid-column: 2; grid-row: 2; position: sticky; top: 1rem; } /* * `#customer_details` e un col2-set cu doua coloane la ~48%: facturarea si, * langa ea, livrarea la alta adresa cu notele. Intr-o jumatate de pagina * s-ar strange urat, deci setul interior trece pe o singura coloana. */ .woocommerce-checkout #customer_details .col-1, .woocommerce-checkout #customer_details .col-2 { float: none; width: 100%; } } /* ------------------------------------------------------------------ * * Textele adaugate - si la coș, si la finalizare * ------------------------------------------------------------------ */ .libraria-explicatie-livrare { margin: .2em 0 .9em; font-size: .875em; line-height: 1.45; opacity: .78; } .libraria-explicatie-pret td { font-size: .875em; line-height: 1.45; opacity: .78; font-weight: normal; } .libraria-avertisment-ebook p:last-child { margin-bottom: 0; } /* ------------------------------------------------------------------ * * Metodele de plata * * In Custom CSS-ul temei fiecare metoda primise un chenar colorat de 5 px: * verde la numerar, lila la card, mentolat la transfer. Aici le inlocuim cu * un chenar discret si o evidentiere a celei alese. Selectorii au id, deci * bat regulile vechi indiferent de ordinea in care se incarca. * ------------------------------------------------------------------ */ .libraria-titlu-plata { margin: 1.2em 0 .6em; font-size: 1.15em; } #payment ul.wc_payment_methods { padding: 0; border: 0; background: transparent; } #payment ul.wc_payment_methods li.wc_payment_method { list-style: none; background: #fff; border: 1px solid #e2e2dd; border-radius: 6px; padding: .7em .9em; margin: 0 0 .5em; } #payment ul.wc_payment_methods li.wc_payment_method:hover { border-color: #b9b9b1; } /* Cea aleasa. Browserele fara :has raman doar cu chenarul discret. */ #payment ul.wc_payment_methods li.wc_payment_method:has(input:checked) { border-color: #2f5fd0; box-shadow: inset 0 0 0 1px #2f5fd0; } #payment ul.wc_payment_methods li.wc_payment_method label { margin: 0; font-weight: 600; } #payment ul.wc_payment_methods li.wc_payment_method .payment_box { background: transparent; border: 0; margin: .45em 0 0; padding: 0; font-size: .9em; line-height: 1.45; opacity: .8; } #payment ul.wc_payment_methods li.wc_payment_method .payment_box::before { display: none; }