/**
 * Multipack konfigurátor – bezvaplenky.cz
 *
 * Barvy a tvarosloví přebírá z proměnných šablony (--color-primary,
 * --color-secondary), aby konfigurátor vypadal stejně jako zbytek eshopu.
 * Fallbacky odpovídají aktuálnímu nastavení: primární #2BBDCD, konverzní #478F00.
 *
 * Vlastní proměnné jsou prefixované --mp-*, aby nekolidovaly se šablonou
 * ani se stávající nadstavbou wt-xy-* (akce 2+1 / 3+3 zdarma).
 */

.wt-multipack {
    --mp-primary: var(--color-primary, #2BBDCD);
    --mp-primary-hover: var(--color-primary-hover, #007B89);
    --mp-cta: var(--color-secondary, #478F00);
    --mp-cta-hover: var(--color-secondary-hover, #2B5700);
    --mp-heading: #292C30;
    --mp-text: #5B6065;
    /* #6B7075 = 5,0:1 na bílé a 4,5:1 na světlém pozadí souhrnu (AA) */
    --mp-muted: #6B7075;
    --mp-border: #DDDFE2;
    --mp-surface: #FFFFFF;
    --mp-surface-alt: #E6F7F9;
    --mp-success: #478F00;
    /* Textová varianta zelené – #478F00 dává na bílé jen 4,0:1 a na #E6F7F9 3,6:1 */
    --mp-success-text: var(--color-secondary-hover, #2B5700);
    --mp-danger: #DA3232;
    --mp-star: #ECAB06;
    --mp-radius: 12px;
    --mp-radius-pill: 100px;

    font-size: 16px;
    line-height: 1.6;
    color: var(--mp-text);
    text-align: left;
}

.wt-multipack *,
.wt-multipack *::before,
.wt-multipack *::after {
    box-sizing: border-box;
}

.wt-multipack__inner {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* ---------------------------------------------------------------- */
/* Hlavička                                                          */
/* ---------------------------------------------------------------- */

.wt-multipack__header {
    text-align: center;
}

.wt-multipack__heading {
    margin: 0 0 12px;
    color: var(--mp-heading);
    font-size: clamp(24px, 4vw, 36px);
    line-height: 1.2;
    font-weight: 600;
}

.wt-multipack__subheading {
    margin: 0;
    font-size: 17px;
    color: var(--mp-text);
}

/* ---------------------------------------------------------------- */
/* Selektory – počet sloupců se řídí konfigurací (2–5)               */
/* ---------------------------------------------------------------- */

.wt-multipack__selectors {
    display: grid;
    /* min() chrání před přetečením, když je kontejner užší než 260 px */
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: 20px;
    align-items: stretch;
}

/* Počet sloupců podle konfigurace – auto-fit sám o sobě při 2 slotech karty
   roztáhne přes půl stránky a při 5 slotech zalomí pátou na druhý řádek. */
@media (min-width: 992px) {
    [data-slots="2"] .wt-multipack__selectors {
        grid-template-columns: repeat(2, minmax(0, 380px));
        justify-content: center;
    }

    [data-slots="4"] .wt-multipack__selectors {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    [data-slots="5"] .wt-multipack__selectors {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 14px;
    }
}

.wt-multipack__selector {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.wt-multipack__selector-label {
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--mp-muted);
}

.wt-multipack__select {
    width: 100%;
    height: 48px;
    padding: 0 44px 0 16px;
    border: 1px solid var(--mp-border);
    border-radius: var(--mp-radius);
    background-color: var(--mp-surface);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232BBDCD' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 16px;
    color: var(--mp-heading);
    font-family: inherit;
    font-size: 15px;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.wt-multipack__select:hover {
    border-color: var(--mp-primary);
}

.wt-multipack__select:focus:not(:focus-visible) {
    outline: none;
    border-color: var(--mp-primary);
    box-shadow: 0 0 0 3px rgba(43, 189, 205, .2);
}

/* ---------------------------------------------------------------- */
/* Karta vybraného produktu                                          */
/* ---------------------------------------------------------------- */

.wt-multipack__product {
    display: flex;
    flex-direction: column;
    /* bez flex:1 nemá margin-top:auto na footeru co odtlačit a ceny se rozjedou */
    flex: 1;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--mp-border);
    border-radius: var(--mp-radius);
    background-color: var(--mp-surface);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.wt-multipack__product:not(.is-empty) {
    border-color: var(--mp-primary);
    box-shadow: 0 2px 12px rgba(0, 176, 195, .12);
}

.wt-multipack__product-image {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    border-radius: 8px;
    background-color: var(--mp-surface);
    overflow: hidden;
}

.wt-multipack__product.is-empty .wt-multipack__product-image {
    background-color: var(--mp-surface-alt);
}

.wt-multipack__product-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.wt-multipack__product.is-empty .wt-multipack__product-image::after {
    content: '';
    width: 48px;
    height: 48px;
    background-color: var(--mp-primary);
    opacity: .35;
    -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='13' rx='2'/%3E%3Cpath d='M3 11h18M12 7v13M8 7l4-4 4 4'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='13' rx='2'/%3E%3Cpath d='M3 11h18M12 7v13M8 7l4-4 4 4'/%3E%3C/svg%3E") center / contain no-repeat;
}

.wt-multipack__product-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.wt-multipack__product-name {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--mp-heading);
}

.wt-multipack__product.is-empty .wt-multipack__product-name {
    color: var(--mp-muted);
    font-weight: 400;
}

.wt-multipack__product-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 13px;
}

.wt-multipack__product-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
    padding-top: 8px;
}

/* Tmavší odstín primární barvy – #2BBDCD má na bílé jen 2,3:1 */
.wt-multipack__product-link a {
    color: var(--mp-primary-hover);
    font-size: 13px;
    text-decoration: underline;
}

.wt-multipack__product-link a:hover {
    color: var(--mp-heading);
}

.wt-multipack__product-price {
    color: var(--mp-heading);
    font-size: 18px;
    font-weight: 600;
    white-space: nowrap;
}

/* Dostupnost */

.wt-multipack__availability {
    font-size: 13px;
    white-space: nowrap;
}

.wt-multipack__availability.is-instock {
    color: var(--mp-success-text);
}

.wt-multipack__availability.is-soldout {
    color: var(--mp-danger);
}

/* Hodnocení */

.wt-multipack__rating {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.wt-multipack__rating-stars {
    display: inline-flex;
    gap: 2px;
}

.wt-multipack__rating-count {
    color: var(--mp-muted);
    font-size: 12px;
    white-space: nowrap;
}

.wt-multipack__star {
    width: 14px;
    height: 14px;
    -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.1 6.6.9-4.8 4.7 1.2 6.6L12 17.2 6.1 20.3l1.2-6.6L2.5 9l6.6-.9z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.1 6.6.9-4.8 4.7 1.2 6.6L12 17.2 6.1 20.3l1.2-6.6L2.5 9l6.6-.9z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.wt-multipack__star.is-full {
    background-color: var(--mp-star);
}

/* #8C9095 = 3,1:1 na bílé; --mp-border by prázdné hvězdy nechal neviditelné */
.wt-multipack__star.is-empty {
    background-color: #8C9095;
}

.wt-multipack__star.is-half {
    background-image: linear-gradient(90deg, var(--mp-star) 50%, #8C9095 50%);
}

/* ---------------------------------------------------------------- */
/* Souhrn – ceny, množství, tlačítko                                 */
/* ---------------------------------------------------------------- */

.wt-multipack__summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 24px 28px;
    border-radius: var(--mp-radius);
    background-color: var(--mp-surface-alt);
}

.wt-multipack__prices {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 220px;
}

.wt-multipack__price-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}

.wt-multipack__price-label {
    color: var(--mp-text);
    font-size: 15px;
}

.wt-multipack__price-original {
    color: var(--mp-muted);
    font-size: 15px;
    text-decoration: line-through;
}

.wt-multipack__price-row--total .wt-multipack__price-label {
    color: var(--mp-heading);
    font-weight: 500;
}

.wt-multipack__price-discount {
    color: var(--mp-heading);
    font-size: 26px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

.wt-multipack__savings {
    margin-top: 4px;
    color: var(--mp-success-text);
    font-size: 14px;
    font-weight: 500;
}

.wt-multipack__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px;
}

/* Množství */

.wt-multipack__quantity {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wt-multipack__quantity-label {
    font-size: 13px;
    color: var(--mp-muted);
}

.wt-multipack__quantity-control {
    display: flex;
    align-items: center;
    height: 50px;
    border: 1px solid var(--mp-border);
    border-radius: var(--mp-radius-pill);
    background-color: var(--mp-surface);
    overflow: hidden;
}

.wt-multipack__quantity-btn {
    width: 44px;
    height: 100%;
    border: 0;
    background: none;
    color: var(--mp-heading);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: color .15s ease;
}

.wt-multipack__quantity-btn:hover {
    color: var(--mp-primary);
}

.wt-multipack__quantity-input {
    width: 48px;
    height: 100%;
    border: 0;
    padding: 0;
    background: none;
    color: var(--mp-heading);
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    appearance: textfield;
    -moz-appearance: textfield;
}

.wt-multipack__quantity-input::-webkit-outer-spin-button,
.wt-multipack__quantity-input::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.wt-multipack__quantity-input:focus:not(:focus-visible) {
    outline: none;
}

/* ---------------------------------------------------------------- */
/* Focus – jeden viditelný indikátor pro klávesnici                  */
/* ---------------------------------------------------------------- */

.wt-multipack__select:focus-visible,
.wt-multipack__quantity-input:focus-visible,
.wt-multipack__quantity-btn:focus-visible,
.wt-multipack__submit:focus-visible,
.wt-multipack__product-link a:focus-visible {
    outline: 2px solid var(--mp-primary-hover);
    outline-offset: 2px;
    box-shadow: none;
}

/* overflow:hidden na obalu by outline tlačítek +/- ořízl */
.wt-multipack__quantity-control:has(.wt-multipack__quantity-btn:focus-visible),
.wt-multipack__quantity-control:has(.wt-multipack__quantity-input:focus-visible) {
    overflow: visible;
}

/* Vizuálně skryté, ale čitelné pro čtečku */
.wt-multipack__sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Tlačítko do košíku – tvarosloví .btn.btn-conversion ze šablony */

.wt-multipack__submit {
    height: 50px;
    padding: 0 32px;
    border: 1px solid var(--mp-cta);
    border-radius: var(--mp-radius-pill);
    background-color: var(--mp-cta);
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, opacity .15s ease;
}

.wt-multipack__submit:hover:not(:disabled) {
    background-color: var(--mp-cta-hover);
    border-color: var(--mp-cta-hover);
}

.wt-multipack__submit:disabled {
    opacity: .6;
    cursor: not-allowed;
}

.wt-multipack__submit.is-loading {
    opacity: .75;
    cursor: wait;
}

.wt-multipack__submit.is-success {
    background-color: var(--mp-success);
    border-color: var(--mp-success);
    opacity: 1;
}

.wt-multipack__submit.is-error {
    background-color: var(--mp-danger);
    border-color: var(--mp-danger);
    opacity: 1;
}

/* ---------------------------------------------------------------- */
/* Rozpis balíčku v košíku                                           */
/* ---------------------------------------------------------------- */

/* Šablona template-13 dává padding KAŽDÉMU divu v td.p-name
   (`.cart-table .p-name div { padding-top: 1ex }`, ve style.css do 991 px navíc
   `padding-top: 8px; padding-bottom: 16px`). Specificita 0-2-1 přebije jednotřídní
   pravidla, takže by rozpis nabobtnal o padding na každé úrovni zanoření.
   Shoptet si u svého banneru pomáhá stejným resetem.
   Proto je celý rozpis scopovaný přes .cart-table .p-name. */

.cart-table .p-name .wt-multipack-cart,
.cart-table .p-name .wt-multipack-cart div {
    padding-top: 0;
    padding-bottom: 0;
}

/* Rozestupy řešíme gapem, ne paddingem – padding by musel přebíjet reset výše
   a šablona ho stejně zase přepíše na jiné úrovni zanoření. */
.cart-table .p-name .wt-multipack-cart,
.wt-multipack-cart {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cart-table .p-name .wt-multipack-cart__title,
.wt-multipack-cart__title {
    margin: 0;
    color: #292C30;
    font-size: 15px;
    font-weight: 600;
}

.cart-table .p-name .wt-multipack-cart__item,
.wt-multipack-cart__item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cart-table .p-name .wt-multipack-cart__item img,
.wt-multipack-cart__item img {
    width: 44px;
    height: 44px;
    border-radius: 6px;
    object-fit: contain;
    background-color: #E6F7F9;
    flex: 0 0 auto;
}

.cart-table .p-name .wt-multipack-cart__name,
.wt-multipack-cart__name {
    font-size: 14px;
    line-height: 1.3;
}

/* Rozpis v košíku žije mimo scope .wt-multipack, proto natvrdo bez proměnné */
.cart-table .p-name .wt-multipack-cart__code,
.wt-multipack-cart__code {
    color: #6B7075;
    font-size: 12px;
}

/* ---------------------------------------------------------------- */
/* Responzivita                                                      */
/* ---------------------------------------------------------------- */

@media (max-width: 991px) {
    .wt-multipack__summary {
        flex-direction: column;
        align-items: stretch;
        padding: 20px;
    }

    /* stretch by se u tlačítka s pevnou výškou zvrhl na flex-start
       a tlačítko by viselo o 27 px nad ovladačem množství */
    .wt-multipack__actions {
        align-items: flex-end;
        justify-content: space-between;
    }

    .wt-multipack__submit {
        flex: 1;
        min-width: 200px;
    }
}

@media (max-width: 575px) {
    .wt-multipack__inner {
        gap: 24px;
    }

    /* iOS Safari zvětší celou stránku, když má fokusovaný input pod 16 px */
    .wt-multipack__select,
    .wt-multipack__quantity-input {
        font-size: 16px;
    }

    .wt-multipack__selectors {
        grid-template-columns: 1fr;
    }

    /* Na mobilu kompaktní karta: obrázek vlevo, údaje vpravo */
    .wt-multipack__product {
        flex-direction: row;
        align-items: stretch;
        gap: 14px;
    }

    .wt-multipack__product-image {
        flex: 0 0 96px;
        width: 96px;
        aspect-ratio: 1;
    }

    .wt-multipack__product.is-empty .wt-multipack__product-image::after {
        width: 32px;
        height: 32px;
    }

    .wt-multipack__product-footer {
        padding-top: 4px;
    }

    .wt-multipack__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .wt-multipack__quantity-control {
        justify-content: center;
    }
}