/**
 * Споделен CSS за specs визуализацията.
 *
 * 1) Product Specs Chips + Gift + Perks (single product)
 *    — enqueue: product_specs_accordion.php
 * 2) PLP каталожни карти (категории) — brand line + specs pills
 *    — enqueue: mm-card-specs.php
 *
 * И двата контекста ползват един и същ визуален език и един файл,
 * за да съвпадат 1:1. Поведението (tooltip open/close) остава inline JS.
 */

/* ── Specs chips ────────────────────────────────────────── */
.moqt-specs,.moqt-specs *,.moqt-specs *::before,.moqt-specs *::after{box-sizing:border-box}
.moqt-specs{display:block;font-family:inherit;margin:20px 0;padding:20px;background:#fff;border:1px solid #e8e6df;border-radius:10px}
.moqt-specs__header{display:block;font-size:13px;font-weight:700;color:#5a5a65;margin:0 0 14px 0;padding:0;text-transform:uppercase;letter-spacing:0.8px;line-height:1.2}
.moqt-specs__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.moqt-chip{position:relative;display:grid;grid-template-columns:22px 1fr;align-items:center;gap:10px;padding:10px 12px;min-height:52px;background:#f6f5f2;border:1px solid #e8e6df;border-radius:10px;cursor:pointer;transition:all 0.18s ease;text-align:left;font-family:inherit;width:100%;margin:0;color:inherit;box-shadow:none;outline:none;-webkit-appearance:none;appearance:none}
.moqt-chip:hover,.moqt-chip:focus-visible{background:#f0f5f4;border-color:#0a3f3c;outline:none}
.moqt-specs .moqt-chip[data-open]{background:#e6eeed;border-color:#0a3f3c}
.moqt-chip__icon{display:flex;align-items:center;justify-content:center;width:22px;height:22px;color:#0a3f3c;flex-shrink:0;background:transparent}
.moqt-chip__icon svg{width:20px;height:20px;display:block;fill:none;stroke:currentColor}
.moqt-chip__body{display:flex;flex-direction:column;gap:2px;min-width:0;overflow:hidden;background:transparent}
.moqt-chip__label{display:block;font-size:10.5px;font-weight:600;letter-spacing:0.4px;text-transform:uppercase;color:#5a5a65;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0;padding:0}
.moqt-chip__count{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:14px;padding:0 4px;margin-left:4px;background:#0a3f3c;color:#fff;font-size:9px;font-weight:700;line-height:1;border-radius:7px;vertical-align:middle}
.moqt-chip--multi:hover .moqt-chip__count,.moqt-specs .moqt-chip--multi[data-open] .moqt-chip__count{background:#0e0e10}
.moqt-specs .moqt-chip[data-open] .moqt-chip__label{color:#0a3f3c}
.moqt-chip__value{display:block;font-size:13px;font-weight:600;color:#0e0e10;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0;padding:0}
.moqt-chip__value--mobile{display:none}
.moqt-chip__value--desktop{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:normal;overflow:hidden;text-overflow:ellipsis;line-height:1.35}
.moqt-chip__tip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%, 4px);display:block;min-width:200px;max-width:280px;width:max-content;padding:9px 12px;background:#0e0e10;color:#fff;font-size:11.5px;font-weight:400;line-height:1.45;text-align:left;letter-spacing:0;text-transform:none;border-radius:8px;border:0;box-shadow:0 8px 24px rgba(0,0,0,0.18);opacity:0;visibility:hidden;transition:opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;pointer-events:none;z-index:9999;white-space:normal;margin:0}
.moqt-chip__tip::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid #0e0e10}
.moqt-tip-list{display:flex;flex-direction:column;gap:10px}
.moqt-tip-item{display:block;padding-left:10px;border-left:2px solid rgba(255,255,255,0.25)}
.moqt-tip-item__name{display:block;font-size:11.5px;font-weight:700;color:#fff;margin:0 0 3px 0;line-height:1.3}
.moqt-tip-item__desc{display:block;font-size:11px;font-weight:400;color:rgba(255,255,255,0.85);line-height:1.4}
.moqt-chip--multi .moqt-chip__tip{min-width:240px;max-width:320px}
@media (hover:hover) and (pointer:fine){.moqt-chip:hover .moqt-chip__tip{opacity:1;visibility:visible;transform:translate(-50%, 0)}}
.moqt-chip:focus-visible .moqt-chip__tip{opacity:1;visibility:visible;transform:translate(-50%, 0)}
.moqt-specs .moqt-chip[data-open] .moqt-chip__tip{opacity:1;visibility:visible;transform:translate(-50%, 0)}
@media (min-width:601px) and (max-width:999px){
    .moqt-chip:nth-child(even) .moqt-chip__tip{left:auto;right:0;transform:translate(0, 4px)}
    .moqt-chip:nth-child(even):hover .moqt-chip__tip,.moqt-chip:nth-child(even):focus-visible .moqt-chip__tip,.moqt-specs .moqt-chip:nth-child(even)[data-open] .moqt-chip__tip{transform:translate(0, 0)}
    .moqt-chip:nth-child(even) .moqt-chip__tip::after{left:auto;right:20px;transform:none}
}
@media (max-width:600px){
    .moqt-specs{padding:16px;margin:16px 0}
    .moqt-specs__grid{grid-template-columns:1fr;gap:6px}

    /* Chip - flexbox layout за mobile */
    .moqt-specs .moqt-chip{
        display:flex !important;
        flex-wrap:wrap !important;
        align-items:center;
        gap:10px;
        padding:10px 12px;
        min-height:50px;
        position:relative;
        grid-template-columns:none !important;
    }

    .moqt-specs .moqt-chip__icon{
        flex:0 0 22px !important;
        order:1;
        width:22px;
        height:22px;
    }

    .moqt-chip__icon svg{width:18px;height:18px}

    .moqt-specs .moqt-chip__body{
        flex:1 1 0 !important;
        min-width:0;
        order:2;
        max-width:calc(100% - 32px);
    }

    .moqt-chip__label{font-size:10px}
    .moqt-chip__value{font-size:12.5px}

    .moqt-chip__value--desktop{display:none}
    .moqt-chip__value--mobile{
        display:block;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }

    /* Mobile tooltip - inline hint под chip-а */
    .moqt-specs .moqt-chip .moqt-chip__tip{
        position:static !important;
        left:auto !important;
        right:auto !important;
        bottom:auto !important;
        top:auto !important;
        display:none;
        opacity:1 !important;
        visibility:visible !important;
        transform:none !important;
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        margin:0 !important;
        padding:10px 12px !important;
        background:#0e0e10 !important;
        color:#fff !important;
        border-radius:6px !important;
        box-shadow:none !important;
        z-index:auto !important;
        font-size:12px !important;
        line-height:1.45 !important;
        pointer-events:auto !important;
        box-sizing:border-box !important;
        order:3 !important;
        flex:1 1 100% !important;
        white-space:normal !important;
    }

    .moqt-chip__tip::after{display:none !important}

    /* Disable hover на mobile - hide tooltip */
    .moqt-specs .moqt-chip:hover .moqt-chip__tip,
    .moqt-specs .moqt-chip:focus-visible .moqt-chip__tip{
        display:none !important;
    }

    /* Show only when data-open */
    .moqt-specs .moqt-chip[data-open] .moqt-chip__tip{
        display:block !important;
        margin-top:8px !important;
    }

    /* List tooltip mobile */
    .moqt-tip-list{gap:8px}
    .moqt-tip-item{padding-left:8px;border-left-width:2px}
    .moqt-tip-item__name{font-size:12px}
    .moqt-tip-item__desc{font-size:11.5px}
}
@media (prefers-reduced-motion:reduce){.moqt-chip,.moqt-chip__tip{transition:none}}

/* ── Gift tooltip ───────────────────────────────────────── */
.moqt-perks__gift--top{margin:20px 0 0 0}
.moqt-gift-tip-trigger{position:relative;width:100%;cursor:pointer;text-align:left;font-family:inherit;color:inherit;box-shadow:none;outline:none;-webkit-appearance:none;appearance:none;transition:all 0.18s ease}
.moqt-gift-tip-trigger:hover,.moqt-gift-tip-trigger:focus-visible,.moqt-gift-tip-trigger[data-open]{border-color:#b71414;background:linear-gradient(135deg, #fbe1e1 0%, #fff 100%);outline:none}
.moqt-gift-tip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%, 4px);display:block;min-width:220px;max-width:320px;width:max-content;padding:9px 12px;background:#0e0e10;color:#fff;font-size:11.5px;font-weight:400;line-height:1.45;text-align:left;letter-spacing:0;text-transform:none;border-radius:8px;border:0;box-shadow:0 8px 24px rgba(0,0,0,0.18);opacity:0;visibility:hidden;transition:opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;pointer-events:none;z-index:9999;white-space:normal;margin:0}
.moqt-gift-tip::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid #0e0e10}
@media (hover:hover) and (pointer:fine){.moqt-gift-tip-trigger:hover .moqt-gift-tip{opacity:1;visibility:visible;transform:translate(-50%, 0)}}
.moqt-gift-tip-trigger:focus-visible .moqt-gift-tip,.moqt-gift-tip-trigger[data-open] .moqt-gift-tip{opacity:1;visibility:visible;transform:translate(-50%, 0)}
@media (max-width:600px){
    .moqt-gift-tip-trigger{display:grid;grid-template-columns:22px 1fr;align-items:start}
    .moqt-gift-tip{position:static !important;grid-column:1 / -1;display:none;opacity:1 !important;visibility:visible !important;transform:none !important;width:100% !important;max-width:100% !important;min-width:0 !important;margin:8px 0 0 0 !important;padding:10px 12px !important;background:#0e0e10 !important;color:#fff !important;border-radius:6px !important;box-shadow:none !important;z-index:auto !important;font-size:12px !important;line-height:1.45 !important;pointer-events:auto !important;box-sizing:border-box !important;white-space:normal !important}
    .moqt-gift-tip::after{display:none !important}
    .moqt-gift-tip-trigger:hover .moqt-gift-tip,.moqt-gift-tip-trigger:focus-visible .moqt-gift-tip{display:none !important}
    .moqt-gift-tip-trigger[data-open] .moqt-gift-tip{display:block !important}
}
@media (prefers-reduced-motion:reduce){.moqt-gift-tip-trigger,.moqt-gift-tip{transition:none}}

/* ── Perks ──────────────────────────────────────────────── */
.moqt-perks{margin:16px 0 20px 0;display:flex;flex-direction:column;gap:8px;box-sizing:border-box}
.moqt-perks *,.moqt-perks *::before,.moqt-perks *::after{box-sizing:border-box}
.moqt-perks__item{display:grid;grid-template-columns:20px 1fr;align-items:center;gap:12px;padding:10px 14px;background:#f6f5f2;border:1px solid #e8e6df;border-radius:8px;font-size:13px;color:#0e0e10;line-height:1.4}
.moqt-perks__icon{display:flex;align-items:center;justify-content:center;width:20px;height:20px;color:#0a3f3c;flex-shrink:0}
.moqt-perks__icon svg{width:20px;height:20px;display:block}
.moqt-perks__text{min-width:0;word-wrap:break-word}
.moqt-perks__gift{display:grid;grid-template-columns:22px 1fr;align-items:start;gap:14px;padding:14px 16px;background:linear-gradient(135deg, #fbe9e9 0%, #fff 100%);border:1px solid #f0c5c5;border-radius:8px}
.moqt-perks__gift-icon{display:flex;align-items:center;justify-content:center;width:22px;height:22px;color:#b71414;flex-shrink:0;margin-top:2px}
.moqt-perks__gift-icon svg{width:22px;height:22px;display:block}
.moqt-perks__gift-content{display:flex;flex-direction:column;gap:2px;min-width:0}
.moqt-perks__gift-title{font-size:11px;font-weight:700;color:#b71414;text-transform:uppercase;letter-spacing:0.5px;line-height:1.2}
.moqt-perks__gift-text{font-size:13px;color:#0e0e10;font-weight:500;line-height:1.4}
@media (max-width:600px){
    .moqt-perks__item{padding:10px 12px;gap:10px;font-size:12.5px}
    .moqt-perks__gift{padding:12px 14px;gap:12px}
    .moqt-perks__gift-text{font-size:12.5px}
}

/* ════════════════════════════════════════════════════════════
 * PLP каталожна карта (категории) — бранд ред + specs pills.
 * Enqueue: mm-card-specs.php. Споделя визуалния език на чиповете
 * по-горе (#f6f5f2 / #e8e6df / teal #0a3f3c), за да съвпада 1:1.
 * ════════════════════════════════════════════════════════════ */

/* ── Brand line ─────────────────────────────────────────── */
/* Рендерира се вътре в product link anchor-а — затова __text е span, не <a>. */
.mm-brand-line{font-size:13px;font-weight:600;letter-spacing:.2px;color:var(--ink-3,#6a6a75);margin:2px 0 4px;line-height:1.3;text-align:center}
.mm-brand-line--magniflex{color:var(--brand-red,#b71414)}

/* ── Specs row ──────────────────────────────────────────── */
.mm-card-specs{display:flex;flex-wrap:wrap;gap:5px;align-items:center;justify-content:center;padding-top:6px;border-top:1px dashed #e8e6df;margin-top:4px;line-height:1.3}

/* ── Tags / pills ───────────────────────────────────────── */
/* Компактни pills — само стойност (без икона/етикет). */
.mm-tag{display:inline-block;padding:3px 9px;background:#f6f5f2;border:1px solid #e8e6df;border-radius:8px;font-size:11px;font-weight:600;color:#0e0e10;line-height:1.4;white-space:nowrap}
.mm-tag__icon{font-weight:700;color:#0a3f3c;opacity:.9}
/* Състав — teal акцент (като активното състояние на продуктов чип: #e6eeed/#0a3f3c) */
.mm-tag--sastav{background:#e6eeed;border-color:#bcd6d1;color:#0a3f3c}