/**
 * WC Alientech Bundles — Frontend Styles
 *
 * @package WC_Alientech_Bundles
 */

/* ──────────────────────────────────────────────────────────
   Product name formatter (prefix / main split)
   ────────────────────────────────────────────────────────── */

.wcab-name-prefix {
    font-weight: 300;
    color: #888;
}

.wcab-name-sep {
    font-weight: 300;
    color: #bbb;
}

.wcab-name-main {
    font-weight: 700;
    color: #000;
}

/* [wcab_product_title] shortcode — centered, smaller type, no link underline */
.wcab-product-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    font-size: 1rem;
    line-height: 1.4;
    margin: 0 auto;
    margin-bottom: 0;
    max-width: 100%;
}

/* No dash split: whole title bold; in loop card, sit at bottom of title zone */
.wcab-product-title--single {
    font-weight: 700;
}

.wcab-product-title--single a {
    font-weight: 700;
}

.wcab-product-title a {
    text-decoration: none !important;
    color: inherit;
}

.wcab-product-title a:hover,
.wcab-product-title a:focus,
.wcab-product-title a:active {
    text-decoration: none !important;
    color: inherit;
}

/* Prefix / main stack inside shortcode title */
.wcab-product-title .wcab-name-prefix {
    display: block;
    font-size: 0.65em;
    margin-bottom: 2px;
}

.wcab-product-title .wcab-name-sep {
    display: none;
}

.wcab-product-title .wcab-name-main {
    display: block;
}

/* Yellow pill for "Bundle Master" inside formatted titles */
.wcab-product-title .wcab-bundle-badge--inline {
    margin-left: 4px;
    margin-right: 4px;
    text-transform: none;
    letter-spacing: 0.02em;
    font-size: 0.78em;
}

/* [wcab_single_product_title] — left-aligned, larger type, category pills */
.wcab-single-product-title-block {
    width: 100%;
    text-align: left;
}

.wcab-single-product-title-block .wcab-single-product-title.wcab-product-title {
    align-items: flex-start;
    text-align: left;
    margin-left: 0;
    margin-right: 0;
    font-size: clamp(1.2rem, 2.8vw, 1.65rem);
    line-height: 1.28;
}

.wcab-single-product-title-block .wcab-name-prefix {
    font-size: 0.88em;
    margin-bottom: 0.12em;
}

.wcab-single-product-title-block .wcab-name-main {
    font-size: 1.12em;
}

.wcab-single-product-title-block .wcab-product-title a {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.wcab-single-product-cat-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
    margin-top: 0.55rem;
    justify-content: flex-start;
}

.wcab-single-product-cat-pill {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    color: #6b7280;
    background: #f1f3f5;
    border: 1px solid #e2e6ea;
    padding: 4px 10px;
    border-radius: 999px;
    line-height: 1.3;
}

/* ──────────────────────────────────────────────────────────
   [wcab_product_card] — full loop card (thumb, title, price, ATC, includes)
   ────────────────────────────────────────────────────────── */

/*
 * Elementor Loop Grid: theme/template rules like
 * .elementor-… .elementor-loop-container { grid-auto-rows: 1fr; }
 * stretch rows unevenly and break wc card layout. Reset when our shortcode is present.
 */
.elementor .elementor-loop-container:has(.wcab-product-card-shell) {
    grid-auto-rows: auto !important;
}

/* Outer shell (prefix + title + price row heights matched via product-card-match-height.js) */
.wcab-product-card-shell {
    width: 100%;
    box-sizing: border-box;
}

.wcab-product-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    box-sizing: border-box;
}

.wcab-product-card__thumb {
    flex: 0 0 auto;
    align-self: center;
    width: 100%;
    max-width: min(100%, 280px);
    text-align: center;
    margin-bottom: 0.5rem;
}

/* Fixed aspect frame: equal height per card; image contained (no crop), white rounded box; scales with column width. */
.wcab-product-card__thumb a {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    line-height: 0;
    text-decoration: none;
    background: #fff;
    border-radius: 4px;
    box-sizing: border-box;
}

.wcab-product-card__img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    object-fit: contain;
    object-position: center;
}

/* Title: JS sets min-height per row on .wcab-product-title.wcab-product-card__heading */
.wcab-product-card__title-wrap {
    width: 100%;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.wcab-product-card .wcab-product-title.wcab-product-card__heading {
    width: 100%;
    max-width: 100%;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
    text-align: center;
}

.wcab-product-card__title-wrap .wcab-product-title a {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Single-line title: anchor copy to bottom of JS-matched min-height */
.wcab-product-card .wcab-product-title.wcab-product-card__heading.wcab-product-title--single {
    justify-content: flex-end;
}

/* Slightly larger prefix than standalone [wcab_product_title] */
.wcab-product-card .wcab-name-prefix {
    font-size: 0.82em !important;
}

.wcab-product-card__price {
    flex: 0 0 auto;
    width: 100%;
    text-align: center;
    margin-top: 0.35rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    box-sizing: border-box;
}

/* Bundle: sum of components if bought separately (strikethrough, above bundle price) */
.wcab-product-card__was-price {
    display: block;
    font-size: 0.75rem;
    line-height: 1.3;
    color: #9a9a9a;
    margin-bottom: 0.2rem;
}

.wcab-product-card__was-price del {
    color: inherit;
    text-decoration: line-through;
    font-weight: 400;
    opacity: 0.95;
}

.wcab-product-card__actions {
    flex: 0 0 auto;
    width: 100%;
    margin-top: 0.5rem;
    text-align: center;
}

.wcab-product-card__actions .button,
.wcab-product-card__actions .add_to_cart_button,
.wcab-product-card__actions a.button,
.wcab-product-card__actions a.add_to_cart_button {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    text-transform: uppercase !important;
    font-weight: 300 !important;
    /* Elementor often sets font-size: 100% on .button — force loop card size */
    font-size: 0.8125rem !important;
    line-height: 1.35 !important;
    letter-spacing: 0.04em !important;
}

.wcab-product-card__includes {
    flex: 0 0 auto;
    width: 100%;
    margin-top: 0.5rem;
    text-align: center;
}

.wcab-product-card__includes .wcab-archive-summary-wrap {
    margin-top: 0;
}

/* ──────────────────────────────────────────────────────────
   Bundle components on the single product page
   ────────────────────────────────────────────────────────── */

.wcab-bundle-section {
    margin: 1.5em 0;
}

.wcab-bundle-heading {
    font-size: 1.15em;
    font-weight: 600;
    margin-bottom: 0.75em;
    color: #333;
}

/* Savings banner */
.wcab-bundle-savings {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
    color: #2e7d32;
    font-weight: 600;
    font-size: 0.95em;
    padding: 10px 16px;
    border-radius: 8px;
    margin-bottom: 1em;
    border: 1px solid #a5d6a7;
}

.wcab-bundle-savings .wcab-savings-icon {
    font-size: 1.2em;
}

/* Component cards grid */
.wcab-component-cards {
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr;
}

.wcab-component-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    background: #fafafa;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.wcab-component-card:hover {
    border-color: #ccc;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.wcab-component-info {
    flex: 1;
    min-width: 0;
}

.wcab-component-name {
    font-weight: 500;
    font-size: 0.95em;
    color: #333;
    display: block;
    line-height: 1.4;
}

.wcab-component-sku {
    font-size: 0.8em;
    color: #888;
    margin-top: 2px;
}

.wcab-component-qty {
    font-size: 0.8em;
    color: #666;
    margin-top: 2px;
}

.wcab-component-price {
    font-size: 0.95em;
    white-space: nowrap;
    flex-shrink: 0;
}

.wcab-component-price del {
    color: #999;
    font-weight: 400;
    margin-right: 4px;
}

.wcab-component-price .wcab-included {
    color: #2e7d32;
    font-weight: 600;
    font-size: 0.85em;
}

/* Bundle total comparison */
.wcab-bundle-total-comparison {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    margin-top: 1em;
    padding: 12px 16px;
    background: #f5f5f5;
    border-radius: 8px;
    font-size: 0.92em;
    color: #555;
}

.wcab-total-individual {
    text-decoration: line-through;
    color: #999;
}

.wcab-total-bundle {
    font-weight: 700;
    font-size: 1.1em;
    color: #333;
}

.wcab-total-saved {
    color: #2e7d32;
    font-weight: 600;
}

/* ──────────────────────────────────────────────────────────
   Suggestion banner on individual product pages
   ────────────────────────────────────────────────────────── */

.wcab-suggestion-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 100%);
    border: 1px solid #ffcc02;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 1em;
    font-size: 0.92em;
    color: #5d4037;
}

.wcab-suggestion-banner a {
    font-weight: 600;
    color: #e65100;
    text-decoration: underline;
}

.wcab-suggestion-banner a:hover {
    color: #bf360c;
}

.wcab-suggestion-icon {
    font-size: 1.3em;
    flex-shrink: 0;
}

/* ──────────────────────────────────────────────────────────
   Shortcode wrapper (Elementor / classic content)
   ────────────────────────────────────────────────────────── */

.wcab-bundle-shortcode-wrap {
    margin: 1.25em 0;
    clear: both;
}

/* ──────────────────────────────────────────────────────────
   Cart / checkout / mini-cart: bundle includes list (item meta)
   ────────────────────────────────────────────────────────── */

.wcab-cart-includes-list {
    margin: 0.35em 0 0;
    padding: 0.5em 0.65em 0.5em 1.5em;
    list-style: none;
    background: #f4f6f8;
    border-radius: 0;
    border-left: 3px solid #dfe3e8;
    font-size: 0.875rem;
    line-height: 1.5;
}

.wcab-cart-includes-list li {
    margin: 0.35em 0;
    padding: 0;
    position: relative;
}

.wcab-cart-includes-list li::before {
    content: "\2713";
    position: absolute;
    left: -1.1em;
    color: #5c6bc0;
    font-size: 0.85em;
    font-weight: 700;
}

.wcab-cart-includes-list .wcab-inc-name {
    color: #333;
    font-weight: 500;
}

.wcab-cart-includes-list .wcab-inc-sku {
    font-size: 0.8em;
    color: #666;
    background: #e8eaf0;
    padding: 1px 6px;
    border-radius: 4px;
    margin-left: 4px;
    vertical-align: middle;
}

/* WooCommerce cart & checkout: all item meta (bundles + Product Add-ons, etc.) */
.woocommerce-cart-form .cart_item td.product-name dl.variation,
.woocommerce-checkout-review-order-table .product-name dl.variation,
.woocommerce-mini-cart-item dl.variation {
    margin: 0.5em 0 0;
    padding: 0.65em 0.75em;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px dashed #666666;
    font-size: 0.8125rem;
    line-height: 1.45;
    max-width: 100%;
}

.woocommerce-cart-form .cart_item td.product-name dl.variation dt,
.woocommerce-checkout-review-order-table .product-name dl.variation dt,
.woocommerce-mini-cart-item dl.variation dt {
    font-weight: 600;
    color: #444;
    margin: 0.4em 0 0.15em;
    float: none;
    clear: both;
}

.woocommerce-cart-form .cart_item td.product-name dl.variation dt:first-child,
.woocommerce-checkout-review-order-table .product-name dl.variation dt:first-child,
.woocommerce-mini-cart-item dl.variation dt:first-child {
    margin-top: 0;
}

.woocommerce-cart-form .cart_item td.product-name dl.variation dd,
.woocommerce-checkout-review-order-table .product-name dl.variation dd,
.woocommerce-mini-cart-item dl.variation dd {
    margin: 0 0 0.35em 0;
    padding: 0;
}

.woocommerce-cart-form .cart_item td.product-name dl.variation dd p,
.woocommerce-checkout-review-order-table .product-name dl.variation dd p {
    margin: 0;
}

/* WooCommerce Blocks (cart / mini-cart) */
.wc-block-components-product-metadata {
    font-size: 0.875rem;
    line-height: 1.45;
}

.wc-block-components-product-metadata .wc-block-components-product-metadata__description {
    margin-top: 0.35em;
}

.wc-block-components-product-metadata .wcab-cart-includes-list {
    margin-top: 0.25em;
}

/* ──────────────────────────────────────────────────────────
   Cart: bundle badge
   ────────────────────────────────────────────────────────── */

.wcab-bundle-badge {
    display: inline-block;
    font-size: 0.7em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #000;
    background: #ffee00;
    padding: 2px 8px;
    border-radius: 4px;
    margin-left: 6px;
    vertical-align: middle;
}

.wcab-bundle-badge--inline {
    margin-left: 4px;
    margin-right: 4px;
    vertical-align: middle;
}

/* ──────────────────────────────────────────────────────────
   Cart: overlap / suggestion notices
   ────────────────────────────────────────────────────────── */

.wcab-overlap-notices,
.wcab-cart-suggestions {
    margin-bottom: 1.5em;
}

.wcab-overlap-notice,
.wcab-cart-suggestion {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wcab-cart-suggestion a {
    font-weight: 600;
}

/* ──────────────────────────────────────────────────────────
   Order: component list
   ────────────────────────────────────────────────────────── */

.wcab-order-components {
    margin-top: 6px;
}

.wcab-order-components-label {
    color: #888;
    font-size: 0.85em;
}

.wcab-order-components-list {
    margin: 4px 0 0 16px;
    padding: 0;
    list-style: disc;
    font-size: 0.85em;
    color: #666;
}

.wcab-order-components-list li {
    margin-bottom: 2px;
}

/* ──────────────────────────────────────────────────────────
   Cart: component sub-items (used in template)
   ────────────────────────────────────────────────────────── */

.wcab-cart-sub-items {
    margin-top: 6px;
    padding: 0;
    list-style: none;
}

.wcab-cart-sub-items li {
    font-size: 0.85em;
    color: #888;
    padding: 2px 0;
    padding-left: 12px;
    position: relative;
}

.wcab-cart-sub-items li::before {
    content: "↳";
    position: absolute;
    left: 0;
    color: #bbb;
}

/* ──────────────────────────────────────────────────────────
   Archive / loop: bundle summary shortcode
   ────────────────────────────────────────────────────────── */

.wcab-archive-summary-wrap {
    margin-top: 0.6em;
    text-align: center;
}

.wcab-archive-summary-savings {
    display: block;
    font-weight: 700;
    font-size: 0.78rem;
    color: #2e7d32;
    margin-bottom: 6px;
}

.wcab-archive-summary {
    padding: 8px 10px;
    background: #f8f9fa;
    border: 1px dashed #ccc;
    border-radius: 6px;
    font-size: 0.8rem;
    line-height: 1.45;
    text-align: left;
}

.wcab-archive-summary-label {
    display: block;
    font-weight: 500;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #999;
    margin-bottom: 4px;
}

.wcab-archive-summary-list {
    margin: 0;
    padding: 0 0 0 0.2em;
    list-style: none;
    color: #444;
}

.wcab-archive-summary-list li {
    margin: 2px 0;
    position: relative;
    padding-left: 1.1em;
}

.wcab-archive-summary-list li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    color: #2e7d32;
    font-size: 0.85em;
    font-weight: 700;
}

/* ──────────────────────────────────────────────────────────
   Mini-cart: tighter layout, name beside thumbnail
   ────────────────────────────────────────────────────────── */

.woocommerce-mini-cart-item {
    display: flex !important;
    align-items: flex-start;
    gap: 8px;
    flex-wrap: nowrap;
}

.woocommerce-mini-cart-item img,
.woocommerce-mini-cart-item .attachment-woocommerce_thumbnail {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
    margin: 0 !important;
    float: none !important;
}

.woocommerce-mini-cart-item .product-info-wrap {
    flex: 1;
    min-width: 0;
}

.woocommerce-mini-cart-item dl.variation {
    margin-top: 4px !important;
    padding: 4px 6px !important;
    font-size: 0.75rem !important;
}

.woocommerce-mini-cart-item .wcab-cart-includes-list {
    font-size: 0.75rem;
    padding: 4px 4px 4px 1.2em;
    margin-top: 4px;
}

.woocommerce-mini-cart-item .wcab-cart-includes-list li {
    margin: 2px 0;
}

.woocommerce-mini-cart-item .wcab-bundle-badge {
    font-size: 0.6em;
    padding: 1px 5px;
}

/* Prevent WooCommerce from wrapping mini-cart items in a second sidebar/drawer */
.widget_shopping_cart_content .woocommerce-mini-cart {
    max-height: none;
    overflow-y: auto;
}

/* ──────────────────────────────────────────────────────────
   Elementor Pro — WooCommerce Cart widget (mobile: section + table padding)
   .e-cart-section (--sections-padding 16px 30px, margin bottom 30px);
   table.cart tr/td (see above).
   ────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
    body .elementor-widget-woocommerce-cart .e-cart-section {
        padding: 10px 12px !important;
        margin: 0 0 16px 0 !important;
    }

    body .elementor-widget-woocommerce-cart .woocommerce table.cart tr {
        padding: 8px 12px !important;
    }

    body .elementor-widget-woocommerce-cart .woocommerce table.cart td {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}

/* ──────────────────────────────────────────────────────────
   Responsive
   ────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
    .wcab-component-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        padding: 12px;
    }

    .wcab-component-price {
        align-self: flex-end;
    }

    .wcab-bundle-total-comparison {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .wcab-suggestion-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
}