/* ── GPC Product Compare v2.1 ───────────────────────────────── */
:root {
    --gpc-primary:  #282768;
    --gpc-accent:   #e8a000;
    --gpc-bg:       #ffffff;
    --gpc-surface:  #f5f6f8;
    --gpc-text:     #1a1a1a;
    --gpc-muted:    #6b7280;
    --gpc-border:   #e5e7eb;
    --gpc-radius:   12px;
    --gpc-shadow:   0 20px 60px rgba(0,0,0,.28);
    --gpc-z:        9000;
    --gpc-font:     inherit;
}

/* ── Trigger ─────────────────────────────────────────────────── */
.gpc-trigger-wrap { display:flex; justify-content:center; padding:0 0 20px; position:relative; z-index:100; }
.gpc-trigger {
    display:inline-flex; align-items:center; gap:9px;
    padding:13px 32px;
    border:2px solid var(--gpc-primary);
    border-radius:8px;
    background:var(--gpc-primary); color:#fff;
    font-family:var(--gpc-font); font-size:16px; font-weight:700;
    cursor:pointer; transition:opacity .15s, box-shadow .15s;
    box-shadow:0 3px 14px rgba(40,39,104,.28);
    letter-spacing:.01em;
}
.gpc-trigger svg { width:18px; height:18px; flex-shrink:0; }
.gpc-trigger:hover { opacity:.88; box-shadow:0 5px 20px rgba(40,39,104,.38); }

/* ── Overlay base – POPUP CENTRATO ───────────────────────────── */
body.gpc-no-scroll { overflow:hidden; }

.gpc-overlay {
    position:fixed; inset:0;
    z-index:var(--gpc-z);
    display:flex;
    align-items:center;        /* centrato verticalmente */
    justify-content:center;
    padding:20px;              /* margine dal bordo schermo */
}
.gpc-overlay[hidden] { display:none; }

.gpc-overlay__backdrop {
    position:absolute; inset:0;
    background:rgba(0,0,0,.52);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
}
.gpc-overlay__panel {
    position:relative; z-index:1;
    background:var(--gpc-bg);
    width:100%;
    border-radius:var(--gpc-radius);   /* tutti gli angoli */
    display:flex; flex-direction:column;
    box-shadow:var(--gpc-shadow);
}

/* Animazione: zoom-in invece di slide-up */
@keyframes gpc-zoom-in {
    from { transform:scale(.94); opacity:0; }
    to   { transform:scale(1);   opacity:1; }
}
.gpc-overlay:not([hidden]) .gpc-overlay__panel {
    animation:gpc-zoom-in .18s ease;
}

.gpc-overlay__head {
    display:flex; align-items:flex-start; gap:12px;
    padding:18px 24px 14px;
    border-bottom:1px solid var(--gpc-border);
    flex-shrink:0;
}
.gpc-overlay__title { margin:0; font-size:18px; font-weight:700; color:var(--gpc-text); line-height:1.2; }
.gpc-overlay__close {
    margin-left:auto; flex-shrink:0;
    background:none; border:none; color:var(--gpc-muted);
    cursor:pointer; padding:4px; border-radius:5px; line-height:0;
    transition:color .15s,background .15s;
}
.gpc-overlay__close svg { width:22px; height:22px; display:block; }
.gpc-overlay__close:hover { color:var(--gpc-text); background:var(--gpc-surface); }

/* ── Picker panel ────────────────────────────────────────────── */
.gpc-picker__panel { max-height:82vh; max-width:900px; }
.gpc-picker__hint  { margin:2px 0 0; font-size:13px; color:var(--gpc-muted); }

.gpc-picker__search-bar {
    display:flex; align-items:center; gap:10px;
    padding:12px 20px;
    border-bottom:1px solid var(--gpc-border);
    flex-shrink:0;
}
.gpc-picker__search-icon { width:18px; height:18px; flex-shrink:0; color:var(--gpc-muted); }
.gpc-picker__search {
    flex:1; border:none; outline:none;
    font-size:15px; font-family:var(--gpc-font);
    color:var(--gpc-text); background:transparent;
}
.gpc-picker__search::placeholder { color:var(--gpc-muted); }

.gpc-picker__body { flex:1; overflow-y:auto; padding:16px 20px; }

/* ── Card griglia ────────────────────────────────────────────── */
.gpc-picker__grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(155px,1fr));
    gap:12px;
}
.gpc-card {
    border:2px solid var(--gpc-border);
    border-radius:10px; cursor:pointer;
    overflow:hidden; background:var(--gpc-bg);
    display:flex; flex-direction:column;
    transition:border-color .15s,box-shadow .15s,opacity .15s;
}
.gpc-card:hover        { border-color:var(--gpc-primary); box-shadow:0 2px 12px rgba(40,39,104,.12); }
.gpc-card--active      { border-color:var(--gpc-primary); background:rgba(40,39,104,.04); }
.gpc-card--disabled    { opacity:.38; pointer-events:none; }

.gpc-card__img-wrap    { position:relative; background:var(--gpc-surface); aspect-ratio:1; overflow:hidden; }
.gpc-card__img         { width:100%; height:100%; object-fit:contain; padding:8px; }
.gpc-card__check {
    position:absolute; top:6px; right:6px;
    width:22px; height:22px; border-radius:50%;
    background:var(--gpc-primary); color:#fff;
    font-size:13px; display:flex; align-items:center; justify-content:center;
    opacity:0; transform:scale(.6);
    transition:opacity .15s,transform .15s;
}
.gpc-card--active .gpc-card__check { opacity:1; transform:scale(1); }

.gpc-card__body  { padding:10px; display:flex; flex-direction:column; gap:4px; }
.gpc-card__name  { font-size:12px; font-weight:600; line-height:1.35; color:var(--gpc-text); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.gpc-card__price { font-size:13px; font-weight:700; color:var(--gpc-primary); }
.gpc-card__price .woocommerce-Price-amount { color:inherit; }

/* ── Load more / empty ───────────────────────────────────────── */
.gpc-picker__more-wrap { display:flex; justify-content:center; padding:16px 0 0; }
.gpc-picker__more-btn {
    padding:9px 28px;
    border:1.5px solid var(--gpc-border); border-radius:6px;
    background:none; font-family:var(--gpc-font);
    font-size:14px; color:var(--gpc-muted); cursor:pointer;
    transition:border-color .15s,color .15s;
}
.gpc-picker__more-btn:hover { border-color:var(--gpc-primary); color:var(--gpc-primary); }
.gpc-picker__empty { text-align:center; color:var(--gpc-muted); font-size:14px; padding:32px 0; }

/* ── Footer picker ───────────────────────────────────────────── */
.gpc-picker__foot {
    display:flex; align-items:center; gap:14px;
    padding:14px 20px;
    border-top:1px solid var(--gpc-border);
    flex-shrink:0; background:var(--gpc-surface);
    border-radius:0 0 var(--gpc-radius) var(--gpc-radius);
}
.gpc-picker__sel-label { flex:1; font-size:13px; color:var(--gpc-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gpc-picker__go-btn {
    flex-shrink:0; padding:10px 24px;
    background:var(--gpc-accent); color:#fff;
    border:none; border-radius:7px;
    font-family:var(--gpc-font); font-size:14px; font-weight:700;
    cursor:pointer; white-space:nowrap; transition:opacity .15s;
}
.gpc-picker__go-btn:disabled { opacity:.35; cursor:not-allowed; }
.gpc-picker__go-btn:not(:disabled):hover { opacity:.88; }

/* ── Compare panel ───────────────────────────────────────────── */
.gpc-compare__panel    { max-height:88vh; max-width:1200px; }
.gpc-compare__head-right { display:flex; align-items:center; gap:10px; margin-left:auto; }
.gpc-compare__back {
    font-size:13px; color:var(--gpc-muted);
    background:none; border:none; cursor:pointer;
    font-family:var(--gpc-font); padding:4px 0;
    transition:color .15s;
}
.gpc-compare__back:hover { color:var(--gpc-primary); }
.gpc-overlay__body { flex:1; overflow:auto; }

/* ── Tabella confronto ───────────────────────────────────────── */
.gpc-table-wrap { overflow-x:auto; }
.gpc-table { width:100%; border-collapse:collapse; font-size:14px; color:var(--gpc-text); table-layout:fixed; }

.gpc-th-label,
table.gpc-table td.gpc-td-label,
table.gpc-table th.gpc-td-label {
    position:sticky; left:0;
    background:var(--gpc-surface); z-index:2;
    min-width:160px; max-width:210px;
    text-align:left;
    border-right:2px solid var(--gpc-border);
}
.gpc-th-prod {
    vertical-align:top;
    text-align:center;
    padding:16px 14px;
    border-left:1px solid var(--gpc-border);
    background:var(--gpc-bg);
    word-break:break-word;
    overflow-wrap:break-word;
}
.gpc-prod-link { display:flex; flex-direction:column; align-items:center; gap:8px; text-decoration:none; color:inherit; }
.gpc-prod-img  { width:96px; height:96px; object-fit:contain; border-radius:8px; background:var(--gpc-surface); }
.gpc-prod-name { font-size:13px; font-weight:700; color:var(--gpc-primary); line-height:1.3; }
.gpc-prod-link:hover .gpc-prod-name { text-decoration:underline; }
.gpc-prod-price { font-size:16px; font-weight:700; margin:6px 0 4px; }
.gpc-prod-price .woocommerce-Price-amount { color:var(--gpc-text); }
.gpc-prod-buy {
    display:inline-block; font-size:12px;
    color:var(--gpc-accent); font-weight:600;
    border:1px solid var(--gpc-accent); border-radius:4px;
    padding:4px 10px; text-decoration:none;
    transition:background .15s,color .15s;
}
.gpc-prod-buy:hover { background:var(--gpc-accent); color:#fff; }

table.gpc-table td.gpc-td-label {
    padding: 9px 20px 9px 18px !important;
    font-size: 12px;
    font-weight: 600;
    color: var(--gpc-muted);
    border-top: 1px solid var(--gpc-border);
    white-space: nowrap;
}
.gpc-td-val   {
    padding:9px 14px;
    text-align:center;
    border-top:1px solid var(--gpc-border);
    border-left:1px solid var(--gpc-border);
    word-break:break-word;
    overflow-wrap:break-word;
    max-width:260px;
    min-width:160px;
}
.gpc-tr-even .gpc-td-label,
.gpc-tr-even .gpc-td-val  { background:var(--gpc-surface); }
.gpc-tr-odd  .gpc-td-val  { background:var(--gpc-bg); }
.gpc-tr-odd  .gpc-td-label{ background:var(--gpc-surface); }
.gpc-na { color:var(--gpc-border); }

/* Righe con valori diversi — evidenziazione gialla */
.gpc-tr-diff .gpc-td-label,
.gpc-tr-diff .gpc-td-val {
    background: #fffbea !important;
}
.gpc-tr-diff .gpc-td-label {
    border-right-color: #f0c040;
}

/* ── Loader ──────────────────────────────────────────────────── */
.gpc-loader { display:flex; justify-content:center; align-items:center; padding:56px; }
.gpc-loader[hidden] { display:none; }
.gpc-spinner { display:block; width:34px; height:34px; border:3px solid var(--gpc-border); border-top-color:var(--gpc-primary); border-radius:50%; animation:gpc-spin .7s linear infinite; }
@keyframes gpc-spin { to { transform:rotate(360deg); } }

/* ── Toast ───────────────────────────────────────────────────── */
.gpc-toast {
    position:fixed; bottom:28px; left:50%;
    transform:translateX(-50%) translateY(8px);
    background:#1a1a2e; color:#fff;
    padding:10px 20px; border-radius:6px;
    font-size:13px; white-space:nowrap;
    opacity:0; pointer-events:none;
    z-index:calc(var(--gpc-z) + 10);
    transition:opacity .2s,transform .2s;
}
.gpc-toast--show { opacity:1; transform:translateX(-50%) translateY(0); }
.gpc-error { text-align:center; color:var(--gpc-muted); padding:40px; font-size:14px; }

.gpc-legend {
    display:flex;
    align-items:center;
    gap:7px;
    margin:4px 0 0;
    font-size:12px;
    color:var(--gpc-text);
}
.gpc-legend__dot {
    display:inline-block;
    width:14px;
    height:14px;
    border-radius:3px;
    background:#fffbea;
    border:1.5px solid #f0c040;
    flex-shrink:0;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width:768px) {

    /* Overlay: fullscreen */
    .gpc-overlay        { padding:0; align-items:stretch; }
    .gpc-overlay__panel { border-radius:0; height:100dvh; max-height:100dvh; }
    .gpc-picker__panel  { max-height:100dvh; }
    .gpc-compare__panel { max-height:100dvh; }

    /* Trigger */
    .gpc-trigger-wrap   { justify-content:center; }
    .gpc-trigger        { width:100%; justify-content:center; font-size:15px; padding:12px 24px; }

    /* Picker grid */
    .gpc-picker__grid   { grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:8px; }
    .gpc-picker__body   { padding:12px 14px; }
    .gpc-picker__foot   { padding:12px 14px; gap:10px; position:relative; z-index:calc(var(--gpc-z) + 5); }
    .gpc-picker__go-btn { padding:9px 16px; font-size:13px; }

    /* ── Tabella confronto mobile: label → header full-width ── */
    .gpc-table-wrap { overflow-x:hidden; }

    .gpc-table,
    .gpc-table thead,
    .gpc-table tbody,
    .gpc-table tr { display:block; width:100%; }

    /* Header prodotti: riga orizzontale scrollabile */
    .gpc-table thead tr {
        display:flex;
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
        border-bottom:2px solid var(--gpc-border);
        background:var(--gpc-bg);
        position:sticky;
        top:0;
        z-index:3;
    }
    .gpc-th-label { display:none; } /* nasconde cella vuota */
    .gpc-th-prod  {
        flex:1;
        min-width:140px;
        padding:12px 10px;
        border-left:1px solid var(--gpc-border);
    }
    .gpc-prod-img  { width:60px; height:60px; }
    .gpc-prod-name { font-size:12px; }
    .gpc-prod-price{ font-size:14px; }
    .gpc-prod-buy  { font-size:11px; padding:3px 8px; }

    /* Righe body: label diventa header full-width */
    .gpc-table tbody tr {
        display:grid;
        /* colonne dinamiche: una per prodotto */
        grid-template-columns:repeat(var(--gpc-cols,2), 1fr);
        margin-bottom:0;
    }
    .gpc-table tbody tr::before {
        content: attr(data-label);
        display:block;
        grid-column:1 / -1;
        background:var(--gpc-primary);
        color:#fff;
        font-size:11px;
        font-weight:700;
        letter-spacing:.05em;
        text-transform:uppercase;
        padding:6px 14px;
        text-align:center;
    }

    table.gpc-table td.gpc-td-label {
        display:none !important; /* nascosto — sostituito da ::before */
    }
    .gpc-td-val {
        padding:10px 12px !important;
        text-align:center;
        font-size:13px;
        border-top:1px solid var(--gpc-border);
        border-left:1px solid var(--gpc-border);
        background:var(--gpc-bg);
    }
    .gpc-tr-even .gpc-td-val { background:var(--gpc-surface); }

    .gpc-overlay__head { padding:12px 16px 10px; }
    .gpc-overlay__title{ font-size:16px; }
}
