/* assets/css/wcm-wm-style.css */

.wcm-wm-matrix-wrapper {
    --wcm-wm-alt-bg: #F9F8F6;
    --wcm-wm-select-bg: #ffffff;
    --wcm-wm-select-border: #cfc7bc;
    --wcm-wm-select-text: #2f2b27;
    --wcm-wm-button-bg: #4e5c39;
    --wcm-wm-button-bg-hover: #3f4a2f;
    margin: 40px 0;
    padding: 0;
    font-family: inherit;
    position: relative;
}

.wcm-wm-matrix-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 20px;
    color: var(--wd-title-color, #333);
}

.wcm-wm-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0;
    background: #fff;
    border: 1px solid var(--wd-form-brd-color, #e5e5e5);
}

.wcm-wm-table th {
    background-color: var(--wd-bg-light, #f9f9f9);
    padding: 15px;
    text-align: left;
    font-weight: 600;
    font-size: 14px;
    color: var(--wd-text-color, #555);
    border-bottom: 2px solid var(--wd-form-brd-color, #e5e5e5);
}

.wcm-wm-table td {
    padding: 15px;
    vertical-align: middle;
    border-bottom: 1px solid var(--wd-form-brd-color, #e5e5e5);
    color: var(--wd-text-color, #777);
    background: #fff;
}

.wcm-wm-table tbody tr:nth-child(even) td {
    background: var(--wcm-wm-alt-bg);
}

.wcm-wm-row:hover td {
    background-color: #f0ede8;
}

.wcm-wm-row-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--wd-title-color, #333);
}

.wcm-wm-length-selector,
.wcm-wm-wood-selector {
    width: 100%;
    max-width: 170px;
    padding: 8px 12px;
    border: 1px solid var(--wcm-wm-select-border);
    border-radius: var(--wd-brd-radius, 0px);
    background-color: var(--wcm-wm-select-bg);
    color: var(--wcm-wm-select-text);
    font-size: 14px;
    font-weight: 600;
}

.wcm-wm-length-selector:focus,
.wcm-wm-wood-selector:focus {
    outline: none;
    border-color: var(--wd-primary-color, #83b735);
    box-shadow: 0 0 0 2px rgba(131, 183, 53, 0.12);
}

.wcm-wm-length-single,
.wcm-wm-wood-single {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    font-weight: 600;
    color: var(--wd-title-color, #333);
}

.wcm-wm-price-display {
    font-weight: 600;
    color: var(--wd-primary-color, #83b735);
    font-size: 16px;
}

.wcm-wm-pack-display {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    color: var(--wd-title-color, #333);
}

.wcm-wm-pack-meta {
    font-size: 13px;
    font-weight: 600;
    color: var(--wd-text-color, #555);
}

.wcm-wm-pack-amount .amount,
.wcm-wm-pack-amount {
    color: var(--wd-primary-color, #83b735);
    font-weight: 700;
}

.wcm-wm-price-unit {
    font-size: 13px;
    color: var(--wd-text-color, #777);
}

.wcm-wm-wood-species {
    font-size: 14px;
    color: var(--wd-text-color, #555);
}

.wcm-wm-spelling-variants {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--wd-text-color, #777);
}

.wcm-wm-spelling-variants summary {
    cursor: pointer;
    color: var(--wd-primary-color, #83b735);
    font-weight: 600;
}

.wcm-wm-spelling-variants ul {
    margin: 8px 0 0;
    padding-left: 18px;
}

.wcm-wm-spelling-variants li {
    margin: 2px 0;
}

.wcm-select-variation {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    text-transform: none;
    background-color: var(--wcm-wm-button-bg);
    color: #fff;
    border: none;
    border-radius: var(--wd-brd-radius, 0px);
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    width: 100%;
    max-width: 180px;
}

.wcm-select-variation::after {
    content: "›";
    font-size: 18px;
    line-height: 1;
}

.wcm-select-variation:hover {
    background-color: var(--wcm-wm-button-bg-hover);
    color: #fff;
    transform: translateY(-1px);
}

.wcm-select-variation:focus-visible {
    outline: 2px solid #fff;
    box-shadow: 0 0 0 3px rgba(78, 92, 57, 0.22);
}

/* Скриване на редове */
.wcm-wm-row.wcm-wm-hidden {
    display: none;
}

/* Градиент и бутон "Виж още" */
.wcm-wm-expand-wrapper {
    position: relative;
    text-align: center;
    margin-top: -1px; /* Overlap table border */
}

.wcm-wm-gradient-overlay {
    position: absolute;
    bottom: 100%;
    left: 0;
    width: 100%;
    height: 80px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    pointer-events: none;
    border-bottom: 1px solid #fff;
}

.wcm-wm-expand-btn {
    display: inline-block;
    margin-top: 15px;
    background-color: transparent;
    color: var(--wd-title-color, #333);
    border: 2px solid var(--wd-form-brd-color, #e5e5e5);
    padding: 12px 30px;
}

.wcm-wm-expand-btn:hover {
    border-color: var(--wd-primary-color, #83b735);
    color: var(--wd-primary-color, #83b735);
    background-color: transparent;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .wcm-wm-table,
    .wcm-wm-table thead,
    .wcm-wm-table tbody,
    .wcm-wm-table th,
    .wcm-wm-table td,
    .wcm-wm-table tr {
        display: block;
    }

    .wcm-wm-table thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    .wcm-wm-table tr {
        border: 1px solid var(--wd-form-brd-color, #e5e5e5);
        margin-bottom: 15px;
        background: #fff;
    }

    .wcm-wm-table tbody tr:nth-child(even) {
        background: var(--wcm-wm-alt-bg);
    }

    .wcm-wm-table td {
        border: none;
        border-bottom: 1px solid var(--wd-form-brd-color, #eee);
        position: relative;
        padding-left: 50%;
        text-align: right;
        background: transparent !important;
    }

    .wcm-wm-table td:before {
        position: absolute;
        top: 15px;
        left: 15px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        text-align: left;
        font-weight: 600;
        color: var(--wd-title-color, #333);
    }

    .wcm-wm-col-size:before { content: "Размер"; }
    .wcm-wm-col-lengths:before { content: "Дължини"; }
    .wcm-wm-col-wood:before { content: "Дървесен вид"; }
    .wcm-wm-col-price:before { content: "Цена"; }
    .wcm-wm-col-action:before { content: "Вариант"; }

    .wcm-wm-length-selector,
    .wcm-wm-wood-selector,
    .wcm-select-variation {
        max-width: 100%;
    }
}