/* ============================================================
   Price Compare Pro — Frontend CSS
   ============================================================ */

:root {
    --pcp-primary:    #6c3fc5;
    --pcp-primary-h:  #5a32a8;
    --pcp-best:       #ff3d00;
    --pcp-green:      #2e7d32;
    --pcp-grey:       #f4f4f4;
    --pcp-border:     #e0e0e0;
    --pcp-text:       #1a1a1a;
    --pcp-text-muted: #666;
    --pcp-radius:     10px;
    --pcp-shadow:     0 2px 12px rgba(0,0,0,.08);
}

/* ── BOX ─────────────────────────────────────────────────── */
.pcp-box {
    display: flex;
    align-items: center;
    gap: 20px;
    border: 1px solid var(--pcp-border);
    border-radius: var(--pcp-radius);
    padding: 16px 20px;
    background: #fff;
    box-shadow: var(--pcp-shadow);
    font-family: inherit;
    margin: 1.5em 0;
}

.pcp-box__image {
    flex: 0 0 120px;
}
.pcp-box__image img {
    width: 120px;
    height: 120px;
    object-fit: contain;
    display: block;
}

.pcp-box__info {
    flex: 1;
    min-width: 0;
}
.pcp-box__title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--pcp-text);
    margin: 0 0 4px;
    line-height: 1.4;
}
.pcp-box__ean {
    font-size: .75rem;
    color: var(--pcp-text-muted);
    margin: 0;
}

.pcp-box__offers {
    flex: 0 0 340px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pcp-box__offer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 10px;
    border-radius: 6px;
    background: #fafafa;
    border: 1px solid var(--pcp-border);
    transition: background .15s;
}
.pcp-box__offer--best {
    background: #f3effc;
    border-color: var(--pcp-primary);
}

.pcp-box__merchant {
    flex: 0 0 80px;
    display: flex;
    align-items: center;
}
.pcp-box__logo {
    max-width: 70px;
    max-height: 28px;
    object-fit: contain;
}
.pcp-box__merchant-name {
    font-size: .85rem;
    font-weight: 600;
    color: var(--pcp-text);
}

.pcp-box__pricing {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
}
.pcp-box__badge {
    background: var(--pcp-best);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 4px;
    line-height: 1;
}
.pcp-box__old-price {
    font-size: .78rem;
    color: var(--pcp-text-muted);
    text-decoration: line-through;
}
.pcp-box__price {
    font-size: .95rem;
    font-weight: 700;
    color: var(--pcp-text);
}
.pcp-box__price--best {
    color: var(--pcp-primary);
    font-size: 1.05rem;
}

.pcp-box__btn {
    flex: 0 0 auto;
    display: inline-block;
    background: var(--pcp-primary);
    color: #fff !important;
    text-decoration: none !important;
    border-radius: 6px;
    padding: 7px 16px;
    font-size: .85rem;
    font-weight: 600;
    transition: background .15s, transform .1s;
    white-space: nowrap;
}
.pcp-box__btn:hover {
    background: var(--pcp-primary-h);
    transform: translateY(-1px);
}

/* ── TABLE ───────────────────────────────────────────────── */
.pcp-table {
    margin: 1.5em 0;
}
.pcp-table__title {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: .75em;
}
.pcp-table__grid {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: var(--pcp-radius);
    overflow: hidden;
    box-shadow: var(--pcp-shadow);
    border: 1px solid var(--pcp-border);
}
.pcp-table__grid thead th {
    background: var(--pcp-primary);
    color: #fff;
    font-size: .82rem;
    font-weight: 600;
    padding: 10px 14px;
    text-align: left;
}
.pcp-table__grid tbody td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--pcp-border);
    font-size: .9rem;
    vertical-align: middle;
}
.pcp-table__row--best td {
    background: #f3effc;
}
.pcp-table__merchant {
    display: flex;
    align-items: center;
    gap: 8px;
}
.pcp-table__logo {
    max-width: 60px;
    max-height: 24px;
    object-fit: contain;
}
.pcp-table__best-label {
    background: var(--pcp-green);
    color: #fff;
    font-size: .68rem;
    padding: 2px 6px;
    border-radius: 3px;
    font-weight: 600;
}
.pcp-table__price {
    font-weight: 700;
    color: var(--pcp-primary);
}
.pcp-table__old-price {
    display: block;
    font-size: .75rem;
    color: var(--pcp-text-muted);
    text-decoration: line-through;
    font-weight: 400;
}
.pcp-badge {
    font-size: .72rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
}
.pcp-badge--red { background: var(--pcp-best); color: #fff; }
.pcp-stock {
    font-size: .78rem;
    font-weight: 600;
}
.pcp-stock--in  { color: var(--pcp-green); }
.pcp-stock--out { color: #c62828; }

/* ── COMPACT ─────────────────────────────────────────────── */
.pcp-compact {
    margin: 1em 0;
}
.pcp-compact__title {
    font-size: .9rem;
    font-weight: 600;
    margin-right: 10px;
}
.pcp-compact__list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}
.pcp-compact__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--pcp-border);
    border-radius: 6px;
    padding: 5px 10px;
    background: #fff;
    text-decoration: none !important;
    color: var(--pcp-text) !important;
    font-size: .85rem;
    transition: border-color .15s, box-shadow .15s;
}
.pcp-compact__item--best {
    border-color: var(--pcp-primary);
    box-shadow: 0 0 0 2px rgba(108,63,197,.15);
}
.pcp-compact__item:hover {
    border-color: var(--pcp-primary);
}
.pcp-compact__logo {
    max-width: 50px;
    max-height: 20px;
    object-fit: contain;
}
.pcp-compact__price {
    font-weight: 700;
    color: var(--pcp-primary);
}
.pcp-compact__badge {
    background: var(--pcp-best);
    color: #fff;
    font-size: .65rem;
    padding: 1px 4px;
    border-radius: 3px;
    font-style: normal;
    font-weight: 700;
}

/* ── BUTTON ──────────────────────────────────────────────── */
.pcp-button {
    margin: 1em 0;
    text-align: center;
}
.pcp-btn--cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--pcp-primary);
    color: #fff !important;
    text-decoration: none !important;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 700;
    transition: background .15s, transform .1s;
    box-shadow: 0 4px 14px rgba(108,63,197,.3);
}
.pcp-btn--cta:hover {
    background: var(--pcp-primary-h);
    transform: translateY(-2px);
}
.pcp-btn__logo {
    max-width: 60px;
    max-height: 24px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}
.pcp-btn__badge {
    background: var(--pcp-best);
    font-size: .72rem;
    padding: 2px 6px;
    border-radius: 4px;
    font-style: normal;
    font-weight: 700;
}
.pcp-button__sub {
    font-size: .78rem;
    color: var(--pcp-text-muted);
    margin: 4px 0 0;
}

/* ── Boutons génériques ──────────────────────────────────── */
.pcp-btn {
    display: inline-block;
    padding: 7px 16px;
    border-radius: 6px;
    text-decoration: none !important;
    font-size: .85rem;
    font-weight: 600;
    transition: background .15s;
}
.pcp-btn--primary {
    background: var(--pcp-primary);
    color: #fff !important;
}
.pcp-btn--primary:hover { background: var(--pcp-primary-h); }
.pcp-btn--secondary {
    background: var(--pcp-grey);
    color: var(--pcp-text) !important;
    border: 1px solid var(--pcp-border);
}
.pcp-btn--secondary:hover { background: #e8e8e8; }

.pcp-no-offers {
    color: var(--pcp-text-muted);
    font-style: italic;
    font-size: .9rem;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 640px) {
    .pcp-box {
        flex-direction: column;
        align-items: flex-start;
    }
    .pcp-box__offers {
        flex: 1;
        width: 100%;
    }
    .pcp-table__grid {
        display: block;
        overflow-x: auto;
    }
}