/* ==========================================================================
   AffiliateCompare Pro – Frontend Styles
   Styles the [acp_table] comparison tables on posts/pages.
   ========================================================================== */

/* ── Wrapper ──────────────────────────────────────────────────────────── */
.acp-compare-wrapper {
    margin:  30px 0;
    overflow-x: auto; /* horizontal scroll on very small screens */
}

/* ── Table Reset & Base ────────────────────────────────────────────────── */
.acp-compare-table {
    width:          100%;
    border-collapse: collapse;
    font-family:    inherit;
    font-size:      15px;
    background:     #fff;
    border:         1px solid #e2e8f0;
    border-radius:  12px;
    overflow:       hidden;
    box-shadow:     0 2px 12px rgba(0, 0, 0, 0.06);
}

.acp-compare-table th,
.acp-compare-table td {
    padding:    14px 18px;
    text-align: center;
    border-bottom: 1px solid #f0f4f8;
    vertical-align: top;
}

.acp-compare-table tr:last-child td {
    border-bottom: none;
}

/* ── Header Row ────────────────────────────────────────────────────────── */
.acp-compare-table thead th {
    background:     #f8fafc;
    font-weight:    600;
    color:          #475569;
    font-size:      13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom:  2px solid #e2e8f0;
}

/* ── Highlighted Row (Best Value) ──────────────────────────────────────── */
.acp-compare-table .acp-row-highlight {
    background: linear-gradient(180deg, #eff6ff 0%, #ffffff 100%);
}

.acp-compare-table .acp-row-highlight td {
    border-bottom-color: #dbeafe;
}

/* ── Product Name ────────────────────────────────────────────────────────── */
.acp-col-name strong {
    color:       #1e293b;
    font-size:   16px;
    line-height: 1.3;
}

/* ── Product Image ─────────────────────────────────────────────────────── */
.acp-product-img {
    max-width:     120px;
    max-height:    120px;
    object-fit:    contain;
    border-radius: 8px;
}

.acp-no-image {
    color:   #94a3b8;
    font-size: 13px;
}

/* ── Price ─────────────────────────────────────────────────────────────── */
.acp-price {
    font-weight: 700;
    font-size:   18px;
    color:       #16a34a;
}

.acp-no-price {
    color: #94a3b8;
}

/* ── Features List ─────────────────────────────────────────────────────── */
.acp-features {
    list-style: none;
    padding:    0;
    margin:     0;
    text-align: left;
}

.acp-features li {
    padding:   4px 0;
    color:     #475569;
    font-size: 14px;
}

.acp-feature-yes {
    color: #16a34a !important;
}

/* ── Badges ────────────────────────────────────────────────────────────── */
.acp-badge {
    display:        inline-block;
    padding:        4px 10px;
    border-radius:  20px;
    font-size:      12px;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.acp-badge-best {
    background: #fbbf24;
    color:      #92400e;
}

.acp-badge-popular {
    background: #6366f1;
    color:      #ffffff;
}

.acp-badge-budget {
    background: #34d399;
    color:      #064e3b;
}

/* ── CTA Button ────────────────────────────────────────────────────────── */
.acp-cta-btn {
    display:         inline-block;
    padding:         10px 22px;
    background:      #6366f1;
    color:           #fff;
    text-decoration: none;
    border-radius:   8px;
    font-weight:     600;
    font-size:       14px;
    transition:      background 0.2s ease, transform 0.15s ease;
    white-space:     nowrap;
}

.acp-cta-btn:hover {
    background: #4f46e5;
    transform:  translateY(-1px);
    color:      #fff;
}

.acp-cta-btn:active {
    transform: translateY(0);
}

/* ── No-link placeholder ────────────────────────────────────────────────── */
.acp-no-link {
    color: #94a3b8;
}

/* ── Error messages ─────────────────────────────────────────────────────── */
.acp-error {
    color:        #dc2626;
    font-style:   italic;
    font-size:    14px;
    padding:      8px 12px;
    background:   #fef2f2;
    border-radius: 6px;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media ( max-width: 600px ) {
    .acp-compare-table th,
    .acp-compare-table td {
        padding:   10px 10px;
        font-size: 13px;
    }

    .acp-product-img {
        max-width:  80px;
        max-height: 80px;
    }

    .acp-price {
        font-size: 16px;
    }

    .acp-cta-btn {
        padding:   8px 14px;
        font-size: 13px;
    }
}