/**
 * Prenova izgleda WooCommerce Cart/Checkout BLOKOV (ne klasicni shortcode -
 * stran uporablja WooCommerce Blocks, ki vsebino izrise prek React/JS iz
 * Store API-ja - zato v surovem HTML-ju (view-source) vidis samo prazne
 * "is-loading" ovojnice, dejanski razredi spodaj se pojavijo sele po
 * nalozitvi v brskalniku). Vkljuci SAMO na /kosarica/ in /checkout/ (glej
 * ipo-custom.php enqueue).
 *
 * Razredi in privzete vrednosti spodaj so preverjeni neposredno iz DEJANSKIH
 * CSS datotek, ki jih WooCommerce (11.0) na tej strani naklada:
 *   wp-content/plugins/woocommerce/assets/client/blocks/{cart,packages-style,wc-blocks}.css
 * - ne gre za ugibanje imen razredov.
 *
 * V2 (popravek po povratni informaciji "ni mi vsec"): PRVA verzija je imela
 * sivo ozadje strani + tezke sence povsod, kar je delovalo pretezko/tuje
 * glede na WooCommerce-ovo lastno (ze kar dobro) privzeto postavitev. Ta
 * verzija je bolj zadrzana - "manj je vec":
 *   - Ozadje strani ostane BELO (ne sivo).
 *   - Kartice imajo tanko obrobo namesto tezke sence (sled sence samo na
 *     hover pri cross-sell izdelkih).
 *   - Kuponsko polje: WooCommerce ga ze privzeto postavi kot flex vrstico
 *     na 100% sirine (input:button = 3:1) - tu ga na MOBILNEM eksplicitno
 *     zlozimo v 2 polni vrstici (vnos nato gumb), da je jasno "razprto",
 *     na desktopu pustimo privzeto vrstico.
 *   - "Mogoce bi vas zanimalo" (cross-sells): na mobilnem 2 manjsi kartici
 *     v vrsti (ne 1 velika cez celo sirino), manjsa slika/pisava - v skladu
 *     s tem, kako WooCommerce sam postavlja podobne produktne mreze
 *     (repeat(auto-fit,minmax(...,1fr)) vzorec).
 *
 * Viri/dobre prakse:
 *   https://developer.woocommerce.com/docs/theming/block-theme-development/cart-and-checkout/
 *   https://developer.woocommerce.com/docs/theming/block-theme-development/css-styling/
 *   https://woocommerce.com/document/woocommerce-store-editing/customizing-cart-and-checkout/
 */

:root {
    --ipoteh-cc-accent: var(--ipoteh-promo-1, #0060c0);
    --ipoteh-cc-accent-dark: #004a94;
    --ipoteh-cc-accent-soft: rgba(0, 96, 192, 0.07);
    --ipoteh-cc-border: #e6e8ec;
    --ipoteh-cc-text-muted: #6b7280;
    --ipoteh-cc-radius: 12px;
    --ipoteh-cc-radius-sm: 8px;
    --ipoteh-cc-danger: #dc2626;
}

/* Ozadje strani ostane BELO - namerno brez custom barve na #main/.content. */

.wp-block-woocommerce-cart-cross-sells-block h2,
.wc-block-components-checkout-step__heading-title {
    font-weight: 700 !important;
    letter-spacing: -0.01em;
}

/* =====================================================================
 * KARTICE: tanka obroba + zaobljeni robovi (BREZ tezke sence) za glavne
 * sklope - da so sekcije vizualno locene, ne da "plavajo" v prostoru.
 * ===================================================================== */
.wp-block-woocommerce-cart-order-summary-block,
.wp-block-woocommerce-checkout-order-summary-block,
.wc-block-components-checkout-step,
.wc-block-checkout__payment-method,
.wc-block-cart-items {
    border: 1px solid var(--ipoteh-cc-border);
    border-radius: var(--ipoteh-cc-radius);
    padding: 18px 20px;
    margin-bottom: 16px;
}

.wp-block-woocommerce-cart-order-summary-heading-block h2 {
    font-size: 18px !important;
    margin-bottom: 4px !important;
}

/* "Mogoce bi vas zanimalo" NIMA kartice okoli celotnega sklopa (le naslov +
   mreza spodaj) - samo posamezne izdelke rahlo loci, glej nizje. */

/* =====================================================================
 * IZDELKI V KOSARICI
 * ===================================================================== */
.wc-block-cart-items__header {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ipoteh-cc-text-muted);
}

.wc-block-cart-item,
tr.wc-block-cart-items__row {
    border-bottom: 1px solid var(--ipoteh-cc-border) !important;
}
.wc-block-cart-item:last-child,
tr.wc-block-cart-items__row:last-child {
    border-bottom: none !important;
}

.wc-block-cart-item__image img,
.wc-block-cart-items__row .wc-block-components-product-image img {
    border-radius: var(--ipoteh-cc-radius-sm);
    border: 1px solid var(--ipoteh-cc-border);
}

.wc-block-components-product-name,
.wc-block-components-product-name a {
    font-weight: 600 !important;
    text-decoration: none !important;
}
.wc-block-components-product-name:hover {
    color: var(--ipoteh-cc-accent) !important;
}

/* kolicina (-/+): WooCommerce ze privzeto naredi mehko pilulko (currentColor
   5% ozadje) - samo dodamo jasnejso obrobo + hover barvo na +/- gumbih. */
.wc-block-components-quantity-selector {
    border: 1px solid var(--ipoteh-cc-border) !important;
}
.wc-block-components-quantity-selector__button:hover {
    color: var(--ipoteh-cc-accent) !important;
}

.wc-block-cart-item__remove-link:hover {
    color: var(--ipoteh-cc-danger) !important;
}

/* =====================================================================
 * "MOGOCE BI VAS ZANIMALO" (cross-sells)
 * ===================================================================== */
.wp-block-woocommerce-cart-cross-sells-block h2 {
    font-size: 19px !important;
    margin: 4px 0 12px !important;
}
.wp-block-woocommerce-cart-cross-sells-products-block li,
.wp-block-woocommerce-cart-cross-sells-products-block .wc-block-product {
    border: 1px solid var(--ipoteh-cc-border);
    border-radius: var(--ipoteh-cc-radius-sm);
    padding: 10px;
    transition: box-shadow 0.15s ease;
}
.wp-block-woocommerce-cart-cross-sells-products-block li:hover,
.wp-block-woocommerce-cart-cross-sells-products-block .wc-block-product:hover {
    box-shadow: 0 4px 14px rgba(20, 30, 60, 0.08);
}
.wp-block-woocommerce-cart-cross-sells-products-block .wp-block-button__link,
.wp-block-woocommerce-cart-cross-sells-products-block .wc-block-components-product-button__button {
    font-weight: 600 !important;
}

/* =====================================================================
 * TOTALI / "OCENJENI SKUPNI ZNESEK"
 * ===================================================================== */
.wc-block-components-totals-item__label {
    color: var(--ipoteh-cc-text-muted);
}
.wc-block-components-totals-footer-item {
    border-top: 1px solid var(--ipoteh-cc-border) !important;
    padding-top: 12px !important;
}

/* kupon */
.wc-block-components-totals-coupon-link {
    color: var(--ipoteh-cc-accent) !important;
    font-weight: 600 !important;
}
.wc-block-components-totals-coupon__button,
.wc-block-components-totals-coupon .wp-element-button {
    background: var(--ipoteh-cc-accent) !important;
    font-weight: 700 !important;
}
.wc-block-components-totals-coupon__button:hover {
    background: var(--ipoteh-cc-accent-dark) !important;
}

/* =====================================================================
 * GLAVNI GUMBI: "Nadaljuj na zakljucek nakupa" / "Oddaj narocilo"
 * ===================================================================== */
.wp-block-woocommerce-proceed-to-checkout-block .wp-block-button__link,
.wc-block-components-checkout-place-order-button {
    background: var(--ipoteh-cc-accent) !important;
    border: none !important;
    font-weight: 700 !important;
    transition: background-color 0.15s ease;
}
.wp-block-woocommerce-proceed-to-checkout-block .wp-block-button__link:hover,
.wc-block-components-checkout-place-order-button:hover {
    background: var(--ipoteh-cc-accent-dark) !important;
}

/* =====================================================================
 * CHECKOUT: vnosna polja + radio kontrole
 * ===================================================================== */
.wc-block-components-text-input input:focus,
.wc-block-components-address-form input:focus,
.wc-block-components-address-form select:focus {
    border-color: var(--ipoteh-cc-accent) !important;
    box-shadow: 0 0 0 3px var(--ipoteh-cc-accent-soft) !important;
}

.wc-block-components-radio-control__option:has(input:checked) {
    background: var(--ipoteh-cc-accent-soft) !important;
}
.wc-block-components-radio-control__input:checked {
    accent-color: var(--ipoteh-cc-accent);
}

/* =====================================================================
 * MOBILE (<= 600px, WooCommerce Blocks sam preklopi na eno-stolpicno
 * postavitev okoli te tocke) - manjse kartice, manjsi cross-sells,
 * "razprto" kuponsko polje.
 * ===================================================================== */
@media (max-width: 600px) {
    .wp-block-woocommerce-cart-order-summary-block,
    .wp-block-woocommerce-checkout-order-summary-block,
    .wc-block-components-checkout-step,
    .wc-block-checkout__payment-method,
    .wc-block-cart-items {
        padding: 14px !important;
        border-radius: 10px !important;
        margin-bottom: 12px !important;
    }

    /* gumbi na celotno sirino - lazje za prst, brez spreminjanja velikosti pisave */
    .wp-block-woocommerce-proceed-to-checkout-block .wp-block-button__link,
    .wc-block-components-checkout-place-order-button {
        width: 100%;
    }

    /* kuponsko polje: EKSPLICITNO razprto v 2 polni vrstici namesto
       stisnjenega input+gumb v isti ozki vrstici (privzeti flex:3/1 na
       ozkem mobilnem zaslonu zna izgledati "zmeckano"). */
    .wc-block-components-totals-coupon__form {
        flex-direction: column;
    }
    .wc-block-components-totals-coupon__form .wc-block-components-totals-coupon__input,
    .wc-block-components-totals-coupon__form .wc-block-components-totals-coupon__button {
        flex: 1 1 100%;
        width: 100%;
    }

    /* vnosna polja: >=16px prepreci samodejni zoom na iOS ob fokusu */
    .wc-block-components-text-input input,
    .wc-block-components-address-form input,
    .wc-block-components-address-form select {
        font-size: 16px !important;
    }

    /* cross-sell izdelki: kompaktna mreza 2 na vrstico (ne 1 velika cez
       celo sirino) - manjsa slika in pisava, da ne izgleda "napihnjeno". */
    .wp-block-woocommerce-cart-cross-sells-products-block {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .wp-block-woocommerce-cart-cross-sells-products-block li,
    .wp-block-woocommerce-cart-cross-sells-products-block .wc-block-product {
        width: auto !important;
        padding: 8px !important;
    }
    .wp-block-woocommerce-cart-cross-sells-products-block .wc-block-components-product-name {
        font-size: 12.5px !important;
        line-height: 1.3;
    }
    .wp-block-woocommerce-cart-cross-sells-products-block .wc-block-components-product-price {
        font-size: 13px !important;
    }
    .wp-block-woocommerce-cart-cross-sells-products-block .wp-block-button__link,
    .wp-block-woocommerce-cart-cross-sells-products-block .wc-block-components-product-button__button {
        font-size: 12px !important;
        padding: 8px 10px !important;
    }
}