/* Cart page tweaks for the custom RnB booking setup.
   RnB packs the room name, check-in/out dates, total days, per-night price and the
   line total into the Продукт (.product-name) cell, and group bookings are split
   into separate room items each with quantity 1 — so the standard WooCommerce
   Цена (.product-price) and Количество (.product-quantity) columns just repeat that
   information and add noise. Hide both; the shared class covers their <th> and <td>
   on desktop and the responsive/stacked layout.
   Kept: Общо (.product-subtotal) line total + the right-side reservation summary. */
.woocommerce-cart-form .product-price,
.woocommerce-cart-form .product-quantity {
    display: none !important;
}

/* Totals panel ("Сума на резервацията"): with the custom RnB setup there's no tax or
   shipping, so the cart subtotal and the order total are always identical (both shown
   as "Общо"). Hide the duplicate subtotal row; keep the final order total. */
.cart_totals tr.cart-subtotal {
    display: none !important;
}

/* Cart banner H1 ("РЕЗЕРВАЦИЯ"): the fixed 50px font overflowed its container on
   narrow screens. Scale with the viewport so it always fits, capped at 50px on
   desktop; break-word is a last-resort safety so it can never spill out. */
.elementor-element-2c70fa2 .elementor-heading-title {
    font-size: clamp(22px, 8vw, 50px) !important;
    max-width: 100%;
    overflow-wrap: break-word;
}

/* With only Продукт + Общо left, give the room details the room and keep a single,
   tidy right-aligned price column. (table-layout is auto, so width:100% on the name
   cell makes it grab the freed space; width:1% + nowrap shrinks Общо to its content.) */
.woocommerce-cart-form td.product-name,
.woocommerce-cart-form th.product-name {
    width: 100% !important;
}

.woocommerce-cart-form td.product-thumbnail,
.woocommerce-cart-form th.product-thumbnail {
    width: 120px !important;
}

.woocommerce-cart-form td.product-thumbnail img {
    width: 120px !important;
    /* WooCommerce caps cart thumbs at max-width:70px — override or width:120px is clamped. */
    max-width: 120px !important;
    height: auto !important;
}

.woocommerce-cart-form td.product-subtotal,
.woocommerce-cart-form th.product-subtotal {
    width: 1% !important;
    white-space: nowrap !important;
    text-align: right !important;
}

/* Mobile + tablet (the cart's stacked layout, ≤921px): lay each item out as
   [image 90%] [× 10%] on the top row, then the room details and total full-width
   below. Image fills its 90% column; the remove × sits in the 10% column to the
   right of the image (not stacked on top) with the site's standard #DACAA2 border. */
@media (max-width: 921px) {
    .elementor-widget-woocommerce-cart .woocommerce table.cart tr {
        padding: 0 !important;
    }

    .woocommerce-cart-form__cart-item {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: flex-start !important;
    }

    .woocommerce-cart-form td.product-thumbnail {
        order: 1 !important;
        width: 90% !important;
    }

    .woocommerce-cart-form td.product-thumbnail img {
        width: 100% !important;
        max-width: 100% !important;
    }

    .woocommerce-cart-form td.product-remove {
        order: 2 !important;
        width: 10% !important;
        display: flex !important;
        align-items: flex-start !important;
        justify-content: center !important;
        /* match the thumbnail cell's 20px top padding so the × drops below the
           divider line and aligns with the top of the image (not floating above it). */
        padding: 20px 0 0 0 !important;
    }

    /* Match the desktop × exactly: ONE circle, drawn by ::before, recoloured to
       #DACAA2; the glyph centred by a square 20x20 <a> (text-align + line-height).
       Removes the duplicate border my earlier rule put on the <a> itself. */
    .woocommerce-cart-form td.product-remove a.remove {
        display: inline-block !important;
        position: relative !important;
        width: 20px !important;
        height: 20px !important;
        line-height: 21px !important;
        text-align: center !important;
        border: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    .woocommerce-cart-form td.product-remove a.remove::before {
        border: 1px solid #DACAA2 !important;
        width: 20px !important;
        height: 20px !important;
        top: 0 !important;
        left: 0 !important;
        box-sizing: border-box !important;
    }

    .woocommerce-cart-form td.product-name {
        order: 3 !important;
        width: 100% !important;
    }

    .woocommerce-cart-form td.product-subtotal {
        order: 4 !important;
        width: 100% !important;
        text-align: left !important;
    }
}

/* Desktop (table layout, ≥922px — the cart stacks at ≤921px): nudge the × button. */
@media (min-width: 922px) {
    .woocommerce-cart-form td.product-remove a.remove {
        margin-left: -10px !important;
        margin-right: 10px !important;
    }
}