/* ==========================================================================
   WC Custom Calc Product — фронтенд стилі
   BEM: .wccp-calc / .wccp-block / .wccp-card
   ========================================================================== */

/* ── Обгортка калькулятора ─────────────────────────────────────────────────── */

.wccp-calc {
    margin: 24px 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    user-select: text;
    -webkit-user-select: text;
}

/* Гарантуємо що [hidden] завжди перемагає над будь-яким display від CSS */
[hidden] { display: none !important; }

/* ── Блок ─────────────────────────────────────────────────────────────────── */

.wccp-block {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Назва блоку — p-тег без браузерних відступів; розмір керується CSS-змінною */
.wccp-block__title {
    font-size: var(--wccp-title-size, 20px);
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1.3;
    margin: 0 0 8px;
    padding: 0;
}

/* ── Розміри ──────────────────────────────────────────────────────────────── */

.wccp-dimensions-row,
.wccp-letters-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
/* flex: 1 1 140px — автоширина; max-width з inline style обмежує якщо задано */
.wccp-dimensions-row .wccp-field-group,
.wccp-letters-row .wccp-field-group { flex: 1 1 140px; min-width: 80px; max-width: 100%; }

/* ── Поля вводу ───────────────────────────────────────────────────────────── */

.wccp-field-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wccp-label {
    font-size: var(--wccp-label-fs, 15px);
    font-weight: 600;
    color: #444;
}
.wccp-label::after {
    content: ':';
}

.wccp-input-with-unit {
    display: flex;
    align-items: center;
    gap: 6px;
}

.wccp-input-with-unit .wccp-input {
    flex: 1;
}

.wccp-input {
    width: 100%;
    height: 42px;
    box-sizing: border-box;
    padding: 0 12px;
    border: 1.5px solid #ddd;
    border-radius: 7px;
    font-size: 1rem;
    background: #fafafa;
    transition: border-color .2s, box-shadow .2s;
    min-width: 0;
    text-align: left;
}
.wccp-input::placeholder {
    text-align: left;
    color: #aaa;
    opacity: 1;
}
.wccp-input:focus {
    outline: none;
    border-color: #0073aa;
    box-shadow: 0 0 0 3px rgba(0,115,170,.15);
    background: #fff;
}
.wccp-input.wccp-input--error { border-color: #d63638; }

.wccp-input-unit {
    font-size: 0.8rem;
    color: #888;
    white-space: nowrap;
    flex-shrink: 0;
}

.wccp-char-counter {
    font-size: 0.775rem;
    color: #999;
}

/* ── Картки (design / multiplier / addon / shape) ───────────────────────────── */

.wccp-cards {
    gap: var(--wccp-gap, 10px);
    min-width: 0;
    box-sizing: border-box;
    padding-inline: var(--wccp-cards-inset, 10px);
}

/* ── Режим МАСШТАБ (scale): колонки стискаються щоб вмістити N в рядку ── */
.wccp-cards--scale {
    display: grid;
    /* Ширина колонки = min(img-size, доступна ширина / N).
       На вузьких екранах колонки масштабуються, gap залишається точним. */
    grid-template-columns: repeat(
        var(--wccp-cols, 3),
        min(
            var(--wccp-img-size, 80px),
            calc((100% - (var(--wccp-cols, 3) - 1) * var(--wccp-gap, 10px)) / var(--wccp-cols, 3))
        )
    );
}
.wccp-cards--scale .wccp-card {
    width: 100%;
}

/* ── Режим ПЕРЕНОС (wrap, за замовчуванням): фіксований розмір, переноситься на новий рядок ── */
.wccp-cards--wrap {
    display: flex;
    flex-wrap: wrap;
    /* Картки зберігають заданий розмір; якщо не влазять — переносяться */
}
.wccp-cards--wrap .wccp-card {
    flex: 0 0 var(--wccp-img-size, 80px);
    width: var(--wccp-img-size, 80px);
}
.wccp-cards--wrap .wccp-card__img-wrap {
    width: 100%; /* = var(--wccp-img-size) через flex-basis батька */
}

/* Card — flex-контейнер без рамки; рамка виключно на .wccp-card__img-wrap */
.wccp-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    text-align: center;
    min-width: 0;
    transition: transform .12s;
    user-select: text;
    -webkit-user-select: text;
}
.wccp-card:hover { transform: translateY(-1px); }

/* ── Image wrap ─────────────────────────────────────────────────────────────
   Єдиний видимий контейнер: border / border-radius / padding / clip.
   width: 100% — заповнює колонку (яка вже = img-size через grid).
   Так gap точно = відстань між фото. */
.wccp-card__img-wrap {
    width: 100%;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    border: var(--wccp-brd-w, 2px) solid transparent;
    border-radius: var(--wccp-brd-r, 9px);
    padding: var(--wccp-pad, 5px);
    background: rgba(0,0,0,.02);
    transition: border-color .18s, box-shadow .18s, background .12s;
    box-sizing: border-box;
    flex-shrink: 0;
}
.wccp-card:hover .wccp-card__img-wrap {
    background: rgba(0,0,0,.05);
}
.wccp-card--active .wccp-card__img-wrap,
.wccp-card[aria-pressed="true"] .wccp-card__img-wrap {
    border-color: var(--wccp-brd-c, #558000);
    box-shadow: 0 0 0 1px var(--wccp-brd-c, #558000);
    background: #fff;
}

/* Зображення заповнює wrap — shape задається border-radius + overflow:hidden */
.wccp-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Text-swatch (без фото): wrap адаптується до тексту */
.wccp-card--text-swatch .wccp-card__img-wrap {
    width: auto;
    aspect-ratio: auto;
    min-width: var(--wccp-img-size, 80px);
    padding: max(8px, var(--wccp-pad, 8px));
    font-weight: 500;
    font-size: var(--wccp-swatch-font-size, 11px);
}

/* ── Підписи ────────────────────────────────────────────────────────────── */

/* Зовнішній підпис: рівна ширина колонки картки, текст по центру (не залежить від сусідів) */
.wccp-card > .wccp-card__label {
    align-self: stretch;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
    padding-inline: 0;
    font-size: 0.72rem;
    color: currentColor;
    line-height: 1.35;
    text-align: center;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    user-select: text;
    -webkit-user-select: text;
}

/* Внутрішній підпис — overlay всередині img-wrap (round+inside режим) */
.wccp-card__img-wrap > .wccp-card__label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,.48);
    color: #fff;
    font-size: 0.65rem;
    padding: 2px 4px 3px;
    line-height: 1.2;
    text-align: center;
}

/* Text-swatch: скасовуємо overlay-стилі для підпису всередині wrap */
.wccp-card--text-swatch .wccp-card__img-wrap > .wccp-card__label {
    position: static;
    background: none;
    color: currentColor;
    padding: 0;
    font-size: var(--wccp-swatch-font-size, 11px);
    user-select: text;
    -webkit-user-select: text;
}

/* ── Кругла форма ──────────────────────────────────────────────────────────
   border-radius: 50% фіксований; --wccp-brd-r ігнорується для round.
   padding: 0 — зображення заповнює коло без внутрішнього відступу. */
.wccp-cards--round .wccp-card:not(.wccp-card--text-swatch) .wccp-card__img-wrap {
    border-radius: 50%;
    padding: 0;
}

/* ── Примітка під блоком ──────────────────────────────────────────────────── */

.wccp-block__note {
    font-size: 0.6875rem; /* 11px */
    color: #c0392b;
    line-height: 1.4;
    min-height: 0;
}

/* ── Підсумок (ціна) ──────────────────────────────────────────────────────── */

.wccp-calc__summary {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 0 0; /* низ = 0, відступ від кнопки через .wccp-calc__actions margin-top */
    border-top: 2px solid #f0f0f0;
}

.wccp-calc__price-label {
    font-size: 1rem;
    color: #555;
    flex-shrink: 0;
}

/* .price-wrapper — огортка з class="price" щоб успадкувати колір ціни від теми (Blocksy тощо) */
.wccp-calc__price-wrapper {
    display: contents;
}

.wccp-calc__price-value {
    font-size: 1.7rem;
    font-weight: 700;
    margin: 0; /* скасовуємо дефолтний margin <p> */
    display: flex;
    align-items: baseline;
    gap: 4px;
    flex-wrap: wrap;
    /* Колір успадковується від .price теми; якщо теми нема — currentColor */
}

.wccp-price-amount {
    display: inline-block;
    font-variant-numeric: tabular-nums;
}

/* Символ валюти і суфікс ПДВ успадковують колір від .price (Blocksy і т.д.) */
.wccp-price-currency {
    font-size: 1.1rem;
    font-weight: 500;
    color: inherit;
}

.wccp-price-tax-note {
    font-size: 0.75rem;
    font-weight: 400;
    color: inherit;
    opacity: 0.72;
    align-self: flex-end;
    margin-bottom: 2px;
}

/* ── Повідомлення валідації розміру ──────────────────────────────────────── */

.wccp-field-error {
    display: block;
    font-size: 0.8rem;
    color: #c0392b;
    margin-top: 4px;
    line-height: 1.3;
}

/* SVG форми — той самий wrap, що й у multiplier (квадратна рамка через aspect-ratio) */
.wccp-card__img-wrap svg {
    width: 82%;
    height: 82%;
    max-width: 100%;
    max-height: 100%;
    display: block;
    fill: #000;
    flex-shrink: 0;
}

/* ── Приховування стандартних WooCommerce елементів ─────────────────────── */
/*
 * Коли на сторінці є наш калькулятор (body.wccp-product-active):
 *  - ховаємо стандартну ціну WooCommerce (замінюємо на нашу)
 *  - ховаємо UI варіацій (dropdown, повідомлення про наявність)
 *  - НЕ ховаємо form.cart і .single_add_to_cart_button — вони нативні!
 */
.wccp-product-active .entry-summary > .price:first-of-type,
.wccp-product-active .summary > .price:first-of-type {
    display: none !important;
}

.wccp-product-active .woocommerce-variation-availability,
.wccp-product-active .woocommerce-variation-description,
.wccp-product-active .single_variation_wrap,
.wccp-product-active .variations_form,
.wccp-product-active .woocommerce-product-gallery + .summary .woocommerce-variation {
    display: none !important;
}