/* BA Free Samples — Kosár oldali "válassz ingyenes mintát" blokk */

/*
 * A blokk (és a küszöb alatti .woocommerce-info üzenet) a form.woocommerce-cart-form
 * UTÁN, de még a .cart-wrapper-en BELÜL jelenik meg, egy állandó
 * #ba-fs-cart-block-wrapper div-be csomagolva (woocommerce_before_cart_collaterals
 * hook — a wrapper a ba-free-samples.php AJAX-fragment frissítéséhez kell,
 * l. woocommerce_add_to_cart_fragments a PHP-ban).
 *
 * A téma .cart-wrapper-je asztali nézetben flex (base.css ~17378), aminek
 * minden közvetlen gyermeke alapból width:100% — ez a mi wrapperünket saját
 * sorba kényszerítené, és emiatt a .cart-collaterals (ami csak flex-nek van
 * beállítva a form MELLÉ) lecsúszna a wrapper ALÁ. Grid-re váltva,
 * elnevezett területekkel: a form + a wrapper a bal oszlopban egymás
 * alatt, a .cart-collaterals a jobb oszlopban, mindkét sor magasságában.
 *
 * ISMERT KOMPROMISSZUM (2026-08-26, user döntése): mivel a .cart-collaterals
 * (a "Kosár összesen" doboz) a grid mindkét sorát átfogja, az 1. sor (a form
 * sora) a .cart-collaterals TELJES magasságára nő — ezért a 2. sorban lévő
 * küszöb-alatti üzenet a form tényleges (rövidebb) tartalma alatt üres
 * hellyel jelenne meg. Kipróbáltunk 2 "tisztán CSS-only, geometriailag
 * garantáltan helyes" megoldást is (nem-span-elt grid, majd float) —
 * egyik sem működött megbízhatóan (l. ba-free-samples.php komment a
 * `woocommerce_before_cart_collaterals` hook regisztrációjánál a teljes
 * történetért), egy harmadik (JS-es DOM-átcsoportosítás) MŰKÖDÖTT, de a
 * user túl bonyolultnak találta egy CSS layout-problémához képest.
 * VÉGSŐ DÖNTÉS: maradunk a grid-area-nál, és egy tuningolt NEGATÍV
 * margin-top-pal húzzuk fel a küszöb-alatti üzenetet a form tényleges
 * tartalma alá — ez EGYETLEN CSS-deklaráció, cserébe a mérete a jelenlegi
 * tartalom-mennyiséghez (1 kosártétel, a .cart-collaterals jelenlegi
 * magassága a szállítási módokkal) van hangolva egy user-screenshot
 * alapján (~654px .cart-collaterals, ~430px-nál végződő form-tartalom →
 * kb. 160px/10rem a kompenzálandó rés). HA a kosár sok tétellel jóval
 * magasabbra nő, mint a .cart-collaterals, ez a fix érték TÚL SOKAT húzhat
 * fel (átfedést okozva a kupon-sorral) — csak a KÜSZÖB ALATTI, RÖVID
 * .woocommerce-info üzenetre alkalmazzuk (NEM a teljes termékrács-választó
 * blokkra, ami jóval magasabb tartalom, ott nincs szükség rá és kockázatos
 * lenne).
 */
@media screen and (min-width: 992px) {
    .cart-wrapper {
        display: grid !important;
        grid-template-columns: 1fr 21.25rem;
        grid-template-areas:
            "form         collaterals"
            "sample-block collaterals";
        align-items: start;
    }
    .cart-wrapper > .woocommerce-cart-form {
        grid-area: form;
        width: auto;
    }
    .cart-wrapper > #ba-fs-cart-block-wrapper {
        grid-area: sample-block;
        width: auto;
    }
    .cart-wrapper > .cart-collaterals {
        grid-area: collaterals;
    }
    #ba-fs-cart-block-wrapper > .woocommerce-info {
        margin-top: -10rem;
    }
}

/*
 * A téma a `woocommerce_enqueue_styles` filtert `__return_false`-ra állítja
 * (blonwe/includes/woocommerce.php:242) — emiatt a WooCommerce SAJÁT
 * .woocommerce-message/.woocommerce-info/.woocommerce-error stílusa (háttér,
 * színes felső szegély, ikon) SEHOL nem töltődik be a site-on. A téma csak a
 * .woocommerce-message-hez ad saját, minimál pótlást (style.css ~1104:
 * vékony szürke keret, nincs háttér) — a .woocommerce-info-hoz semmit, ezért
 * ez a doboz eddig formázatlanul, a környező szöveggel egybefolyva jelent
 * meg (user visszajelzés, 2026-08-27). Mivel ez egy "válts vásárlási
 * szokáson" jellegű figyelmeztetés, "warning" színvilágot kapott (nem a
 * .woocommerce-message zöldjét vagy egy semleges kéket) — szándékosan
 * feltűnőbb háttér+szegély kombó, mint a téma saját (keret nélküli)
 * .woocommerce-message pótlása, hogy tényleg kiugorjon a kosár tartalma
 * mellett.
 */
#ba-fs-cart-block-wrapper > .woocommerce-info {
    display: block;
    position: relative;
    background-color: #fff3cd;
    border: 1px solid #ffe69c;
    border-left: 4px solid #ffc107;
    color: #664d03;
    padding: 0.875rem 1.25rem 0.875rem 2.75rem;
    margin-bottom: 1.25rem;
    font-size: 0.875rem;
    line-height: 1.5;
}

#ba-fs-cart-block-wrapper > .woocommerce-info::before {
    content: "\26A0";
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.125rem;
    line-height: 1;
}

.ba-fs-cart-block {
    margin-bottom: 1.25rem;
}

@media screen and (min-width: 992px) {
    .ba-fs-cart-block {
        margin-bottom: 0;
    }
}

.ba-fs-cart-block__title {
    margin-bottom: 0.5rem;
}

.ba-fs-cart-block__hint {
    margin-bottom: 1.25rem;
    opacity: 0.85;
}

.ba-fs-cart-block__hint strong {
    color: var(--color-green700);
}

/* Ha elfogyott az ingyenes keret, a woocommerce_loop_add_to_cart_link filter
   (ba-free-samples.php) üres stringet ad vissza a gomb helyett — ilyenkor a
   témás "product-buttons" doboz (benne az önmagában értelmetlenné vált
   mennyiség-lépegetővel) árván maradna gomb nélkül; ezt rejtjük el itt. */
.ba-fs-cart-block .product-buttons:not(:has(.add_to_cart_button)) {
    display: none;
}

/* Az "Ingyenes hozzáadás" gomb ugyanazt a méret/tipográfia receptet kapja,
   mint a site többi gombja (l. ba-custom/exibio-woocommerce.css), csak
   zöld háttérrel, hogy megkülönböztethető legyen a normál "Kosárba teszem"
   (kék) gomboktól. */
.ba-fs-add-form {
    margin: 0;
}

.ba-fs-add-button {
    display: inline-block !important;
    background-color: #2F9E44 !important;
    color: #fff !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    line-height: 2.1875rem !important;
    height: 2.1875rem !important;
    padding: 0 1.125rem !important;
    border: none !important;
    text-decoration: none !important;
    border-radius: 2px !important;
    cursor: pointer;
}

.ba-fs-add-button::before {
    font-family: "klbtheme-ecommerce" !important;
    font-style: normal !important;
    font-weight: normal !important;
    speak: never;
    display: inline-block;
    margin-right: 0.4375rem;
    vertical-align: middle;
    content: '\e800'; /* klb-ecommerce-icon-gift-thin */
}

.ba-fs-badge {
    display: inline-block;
    background-color: #2F9E44;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.5;
    padding: 0.0625rem 0.4375rem;
    border-radius: 2px;
    vertical-align: middle;
    margin-left: 0.4375rem;
}