/**
 * Skin pentru blocurile WooCommerce (.wc-block-*) — Cart/Checkout Blocks.
 * DOAR culori / tipografie / radius pe tokens (Task 009, Grup D).
 * Layout-ul intern al blocurilor nu se atinge.
 * Depinde de tokens.css + base.css.
 */

/* Notices */
.wc-block-components-notice-banner {
    padding: 1rem 1.2rem;
    background: var(--hts-surface);
    border: 1px solid var(--hts-border);
    border-left: 0.25rem solid var(--hts-blue);
    border-radius: var(--hts-radius-sm);
    font-family: var(--hts-font-ui);
}

.wc-block-components-notice-banner.is-error {
    background: var(--hts-danger-bg);
    border-left-color: var(--hts-danger);
}

.wc-block-components-notice-banner.is-success {
    background: var(--hts-success-bg);
    border-left-color: var(--hts-blue);
}

/* Containere */
.wc-block-cart,
.wc-block-checkout {
    background: transparent;
    font-family: var(--hts-font-ui);
}

.wc-block-components-sidebar,
.wc-block-components-totals-wrapper,
.wc-block-components-order-summary {
    background: var(--hts-surface);
    border-radius: var(--hts-radius-md);
}

.wc-block-components-sidebar {
    padding: 1rem;
    border: 1px solid var(--hts-border);
}

/*
 * Task 009 P0-4: at 1280px the order-summary product name in the checkout
 * sidebar was compressing to one character per line. Flex/grid children
 * default to `min-width: auto` (their content's own intrinsic width); once
 * the thumbnail and price columns claim their space, the name column can be
 * left with less room than that default demands, and the browser then has
 * nowhere to wrap except mid-word. `min-width: 0` lets the column shrink to
 * the space the sidebar actually has; `overflow-wrap: break-word` keeps a
 * genuinely long single word from overflowing instead of breaking every
 * character. Neither property changes the block's structure, columns or
 * breakpoints — a wrapping fix only, not a layout change.
 */
.wc-block-components-order-summary-item,
.wc-block-components-order-summary-item__description {
    min-width: 0;
}

.wc-block-components-product-name {
    overflow-wrap: break-word;
    word-break: normal;
}

/* Titluri */
.wc-block-components-title,
.wc-block-cart__empty-cart__title,
.wc-block-components-checkout-step__title {
    font-family: var(--hts-font-display);
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--hts-ink);
}

/* Inputuri și combobox */
.wc-block-components-text-input input,
.wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input,
.wc-block-components-form .wc-block-components-text-input input {
    min-height: 3rem;
    padding: 0.7rem;
    background: var(--hts-surface);
    border: 1.5px solid var(--hts-border-control);
    border-radius: var(--hts-radius-sm);
    font: inherit;
    color: var(--hts-ink);
}

.wc-block-components-text-input input:focus,
.wc-block-components-combobox input.components-combobox-control__input:focus {
    border-color: var(--hts-blue);
    outline: 2px solid var(--hts-blue);
    outline-offset: 1px;
    box-shadow: none;
}

.wc-block-components-text-input label,
.wc-block-components-combobox label {
    color: var(--hts-text-muted);
}

/* Checkbox / radio */
.wc-block-checkout input[type="checkbox"],
.wc-block-checkout input[type="radio"],
.wc-block-cart input[type="checkbox"] {
    accent-color: var(--hts-blue);
}

/* Butoane: principal = CTA lime, per sistemul de design */
.wc-block-components-button:not(.is-link),
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
    background: var(--hts-blue);
    color: var(--hts-surface);
    border: 0;
    border-radius: var(--hts-radius-md);
    font-family: var(--hts-font-ui);
    font-weight: 800;
    text-transform: none;
}

.wc-block-components-button:not(.is-link):hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
    background: var(--hts-blue-dark);
    color: var(--hts-surface);
}

.wc-block-components-button:not(.is-link):active {
    background: var(--hts-blue-dark);
}

.wc-block-components-button:not(.is-link):focus-visible {
    outline: 2px solid var(--hts-blue);
    outline-offset: 3px;
}

.wc-block-components-button:not(.is-link):disabled {
    background: var(--hts-disabled-bg);
    color: var(--hts-disabled-text);
}

/* Butoane/linkuri secundare */
.wc-block-components-checkout-return-to-cart-button,
.wc-block-cart__empty-cart__browse-link,
.wc-block-components-totals-coupon-link,
.wc-block-cart a,
.wc-block-checkout a {
    color: var(--hts-blue);
}

.wc-block-cart a:hover,
.wc-block-checkout a:hover {
    color: var(--hts-blue-bright);
}

/* Prețuri și totaluri */
.wc-block-components-product-price,
.wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--hts-ink);
}

.wc-block-components-product-price ins,
.wc-block-formatted-money-amount.is-discounted {
    color: var(--hts-sale);
    text-decoration: none;
}

.wc-block-components-sale-badge,
.wc-block-grid__product-onsale {
    background: var(--hts-sale);
    color: var(--hts-surface);
    border: 0;
    border-radius: var(--hts-radius-sm);
    font-weight: 800;
    text-transform: none;
}

/* Grila de produse din empty-cart (wc-block-grid) — aliniere minimă la carduri */
.wc-block-grid__product {
    background: var(--hts-surface);
    border: 1px solid var(--hts-border);
    border-radius: var(--hts-radius-md);
}

.wc-block-grid__product-title {
    font-family: var(--hts-font-ui);
    font-weight: 600;
    color: var(--hts-ink);
}

/* Stepper cantitate */
.wc-block-components-quantity-selector {
    border: 1.5px solid var(--hts-border-control);
    border-radius: var(--hts-radius-sm);
}

.wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

/*
 * Woo Blocks still marks a 768px viewport as `is-large` and keeps its
 * desktop two-column floats. Inside the theme shell that leaves the summary
 * around 250px wide and pushes price/badge content beyond the viewport.
 * Recompose the existing blocks into the same summary-first single-column
 * flow used on phones; no fields or checkout behavior are changed.
 */
@media (max-width: 768px) {
    .woocommerce-checkout .wc-block-checkout {
        display: flex;
        flex-direction: column;
    }

    .woocommerce-checkout .wc-block-checkout__main,
    .woocommerce-checkout .wc-block-checkout__sidebar {
        float: none;
        width: 100% !important;
        padding-right: 0;
        padding-left: 0;
    }

    .woocommerce-checkout .wc-block-checkout__sidebar {
        position: static;
        order: -1;
        margin-bottom: var(--hts-space-5);
    }
}