/* TBP Affiliate Toolkit - Front-end & Editor Styles */

.tbpat-disclosure {
    border-radius: 12px;
    padding: 16px 18px;
    margin: 0 0 24px 0;
    background: linear-gradient(135deg, #eef2ff 0%, #fff7ed 100%);
    border: 1px solid #c7d2fe;
    color: #1e293b;
    font-size: 0.95rem;
    line-height: 1.55;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
    width: 100%;
    box-sizing: border-box;
    overflow-wrap: anywhere;
}

.tbpat-summary-card {
    border-radius: 14px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    padding: 18px;
    margin: 0 0 28px 0;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .05);
    width: 100%;
    box-sizing: border-box;
    overflow-wrap: anywhere;
}

.tbpat-summary-head {
    display: grid;
    grid-template-columns: minmax(0, 180px) minmax(0, 1fr);
    gap: 18px;
    align-items: flex-start;
}

.tbpat-summary-image {
    border-radius: 10px;
    width: 100%;
    height: auto;
    max-width: 180px;
    display: block;
    object-fit: contain;
    background: #f8fafc;
}

.tbpat-summary-title {
    margin: 0 0 6px 0;
    font-size: 1.35rem;
    color: #0f172a;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.tbpat-summary-brand {
    font-size: 0.85rem;
    color: #64748b;
    font-weight: 500;
}

.tbpat-summary-rating {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap !important;
    gap: 10px;
    margin: 6px 0 12px 0;
    white-space: nowrap;
    min-width: 0;
    width: auto;
}

.tbpat-score {
    display: inline-flex !important;
    align-items: baseline;
    font-size: 1.8rem;
    color: #0f172a;
    letter-spacing: -0.02em;
    font-weight: 700;
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    line-height: 1.1;
    min-width: 0;
    max-width: 100%;
    text-rendering: optimizeLegibility;
}

.tbpat-summary-stars {
    font-size: 1.15rem;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    flex-shrink: 0;
}

.tbpat-summary-facts {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 18px;
}

.tbpat-summary-facts li {
    margin: 0;
    font-size: 0.95rem;
    color: #334155;
}

.tbpat-summary-facts li span { color: #64748b; margin-right: 6px; }

.tbpat-summary-cta { margin: 14px 0 0 0; }

a.tbpat-btn,
button.tbpat-btn,
.tbpat-btn,
.entry-content a.tbpat-btn,
.entry-content .tbpat-btn,
.wp-block-post-content a.tbpat-btn,
.tbpat-summary-cta a,
.tbpat-product-card-cta a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border-radius: 10px;
    background: #1d4ed8; /* solid royal blue, one colour */
    background-image: none !important;
    background-color: #1d4ed8 !important;
    color: #ffffff !important;
    fill: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-weight: 600;
    text-decoration: none !important;
    text-decoration-line: none !important;
    border: 0;
    box-shadow: 0 6px 16px rgba(29, 78, 216, .28);
    transition: transform .08s ease, box-shadow .2s ease, background-color .2s ease;
    cursor: pointer;
    line-height: 1.3;
    white-space: nowrap;
    /* override any theme .entry-content a { color:blue } rule with extreme specificity */
}

a.tbpat-btn:visited,
.entry-content a.tbpat-btn:visited,
.wp-block-post-content a.tbpat-btn:visited,
.tbpat-summary-cta a:visited,
.tbpat-product-card-cta a:visited {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

.tbpat-btn:hover,
.entry-content a.tbpat-btn:hover,
.tbpat-summary-cta a:hover,
.tbpat-product-card-cta a:hover {
    background-color: #1e40af !important;
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(30, 64, 175, .34);
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-decoration: none !important;
}

.tbpat-btn-small,
a.tbpat-btn-small,
.entry-content a.tbpat-btn-small {
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 0.9rem;
}

/* Star rating */
.tbpat-stars {
    display: inline-flex;
    gap: 2px;
    align-items: center;
    vertical-align: middle;
}
.tbpat-star { display: inline-block; font-size: 1em; line-height: 1; }
.tbpat-star svg { display: block; width: 1em; height: 1em; }

/* ---- Pros + Cons two-column ---- */
.tbpat-proscons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin: 18px 0 24px 0;
    width: 100%;
    box-sizing: border-box;
    overflow-wrap: anywhere;
}
.tbpat-pros, .tbpat-cons {
    border-radius: 12px;
    padding: 14px 16px 18px 16px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
}
.tbpat-pros { border-color: #bbf7d0; background: #f0fdf4; }
.tbpat-cons { border-color: #fecaca; background: #fff5f5; }
.tbpat-pros h3, .tbpat-cons h3 {
    margin: 0 0 8px 0;
    font-size: 1.05rem;
}
.tbpat-pros h3 { color: #15803d; }
.tbpat-cons h3 { color: #b91c1c; }
.tbpat-pros ul, .tbpat-cons ul { margin: 0; padding-left: 18px; }
.tbpat-pros li, .tbpat-cons li {
    margin: 6px 0;
    line-height: 1.45;
    color: #0f172a;
    overflow-wrap: anywhere;
}
.tbpat-pros li::marker { color: #16a34a; }
.tbpat-cons li::marker { color: #dc2626; }

/* ---- Single product card ---- */
.tbpat-product-card {
    display: grid;
    grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
    gap: 20px;
    border-radius: 14px;
    border: 1px solid #e5e7eb;
    padding: 16px;
    margin: 20px 0 24px 0;
    background: #ffffff;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .05);
    width: 100%;
    box-sizing: border-box;
    overflow-wrap: anywhere;
}

.tbpat-product-card-image img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    object-fit: contain;
    background: #f8fafc;
    display: block;
}

.tbpat-product-card-title h3 {
    margin: 0;
    font-size: 1.15rem;
    color: #0f172a;
    line-height: 1.3;
    overflow-wrap: anywhere;
}
.tbpat-brand {
    display: inline-block;
    margin-top: 4px;
    color: #64748b;
    font-size: 0.85rem;
}

.tbpat-product-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    align-items: center;
    margin: 10px 0;
    color: #334155;
    font-size: 0.95rem;
}
.tbpat-meta-price { font-weight: 700; color: #0f172a; font-size: 1.05rem; }
.tbpat-meta-bestfor { color: #475569; }

.tbpat-product-card-desc {
    margin: 8px 0 14px 0;
    color: #1e293b;
    font-size: 0.98rem;
    line-height: 1.6;
}

.tbpat-product-card-proscons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 10px 0;
}

.tbpat-product-card-proscons .tbpat-pros,
.tbpat-product-card-proscons .tbpat-cons {
    padding: 10px 12px 12px 12px;
}

.tbpat-product-card-proscons h4 {
    margin: 0 0 4px 0;
    font-size: 0.95rem;
}

.tbpat-product-card-cta { margin: 10px 0 0 0; }

/* ---- Comparison table ---- */
.tbpat-compare {
    width: 100%;
    overflow-x: auto;
    margin: 22px 0 28px 0;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    box-sizing: border-box;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .05);
}

.tbpat-compare-table {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
    font-size: 0.95rem;
    color: #0f172a;
}

.tbpat-compare-table thead th {
    background: linear-gradient(135deg, #eef2ff 0%, #f0fdfa 100%);
    padding: 12px 14px;
    text-align: left;
    font-weight: 600;
    color: #1e1b4b;
    border-bottom: 1px solid #e5e7eb;
    overflow-wrap: anywhere;
}

.tbpat-compare-table tbody td {
    padding: 14px;
    vertical-align: middle;
    border-bottom: 1px solid #f1f5f9;
    overflow-wrap: anywhere;
}

.tbpat-compare-table tbody tr:last-child td { border-bottom: 0; }

.tbpat-compare-product {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 180px;
}
.tbpat-compare-image img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    background: #f8fafc;
    border-radius: 8px;
}
.tbpat-compare-name {
    font-weight: 600;
    line-height: 1.35;
    overflow-wrap: anywhere;
}
.tbpat-compare-name small {
    display: block;
    color: #64748b;
    font-weight: 500;
    font-size: 0.8rem;
}

/* ---- Mobile collapse ---- */
@media (max-width: 900px) {
    .tbpat-summary-head { grid-template-columns: minmax(0, 140px) minmax(0, 1fr); gap: 14px; }
    .tbpat-product-card { grid-template-columns: minmax(0, 160px) minmax(0, 1fr); gap: 14px; }
    .tbpat-product-card-proscons { grid-template-columns: 1fr; }
    .tbpat-summary-facts { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .tbpat-proscons { grid-template-columns: 1fr !important; }
    .tbpat-summary-head { grid-template-columns: minmax(0, 120px) minmax(0, 1fr); }
    .tbpat-product-card { grid-template-columns: 1fr; }
    .tbpat-product-card-image img { max-height: 240px; object-fit: contain; margin: 0 auto; display: block; }

    .tbpat-compare-table thead { display: none; }
    .tbpat-compare-table,
    .tbpat-compare-table tbody,
    .tbpat-compare-table tr,
    .tbpat-compare-table td { display: block; width: 100% !important; min-width: 0 !important; }
    .tbpat-compare-table tr {
        border-top: 1px solid #e5e7eb;
        padding: 0;
    }
    .tbpat-compare-table tbody td {
        border-bottom: 1px dashed #e5e7eb;
        padding: 10px 14px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        text-align: right;
    }
    .tbpat-compare-table tbody td::before {
        content: attr(data-th);
        display: inline-block;
        font-weight: 600;
        color: #4338ca;
        text-align: left;
        flex: 0 0 auto;
        max-width: 40%;
    }
    .tbpat-compare-product { min-width: 0; }
    .tbpat-summary-card,
    .tbpat-disclosure,
    .tbpat-product-card,
    .tbpat-pros,
    .tbpat-cons,
    .tbpat-proscons {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        overflow-wrap: anywhere !important;
    }
}

/* ==========================================================================
 * v1.1.6 MOBILE VERDICT OVERLAP BUG FIX (the user screenshot showed
 * .tbpat-summary-head / .tbpat-summary-rating rows overflowing the card
 * horizontally and colliding with the verdict heading text on narrow
 * phones, producing "verdict section is not working fine in mobile view
 * text overlapping").
 *
 * The root cause was a conflict of layout rules on screens < ~640px:
 *   (a) .tbpat-summary-rating had white-space: nowrap + flex-wrap: nowrap
 *       → score + stars forced a single unbounded line (80–120px over).
 *   (b) .tbpat-score had word-break: keep-all + 1.8rem font-size → no
 *       shrink even on iPhone SE narrow widths.
 *   (c) .tbpat-summary-title had no line-height constraint and no
 *       hyphenation → long 18-w product names push the grid column beyond
 *       the card's visible right edge.
 *
 * Breakpoint below fixes all three simultaneously, plus padding/font-size
 * tuning so nothing bumps into anything else.
 * ==========================================================================
 */
@media (max-width: 640px) {
    /* --- Card-level --- */
    .tbpat-summary-card,
    .tbpat-product-card,
    .tbpat-disclosure { padding: 14px 14px 18px 14px !important; margin-left: 0 !important; margin-right: 0 !important; }
    .tbpat-summary-title { font-size: 1.1rem !important; line-height: 1.3 !important; hyphens: auto !important; }
    .tbpat-product-card-title h3 { font-size: 1.05rem !important; line-height: 1.3 !important; }

    /* --- Image + head wrap --- */
    .tbpat-summary-head {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .tbpat-summary-image {
        max-width: 140px !important;
        margin: 0 auto !important;
    }
    .tbpat-summary-main { min-width: 0; }

    /* --- Rating / stars row (MOST IMPORTANT) --- */
    .tbpat-summary-rating {
        flex-wrap: wrap !important;   /* allow stars to wrap BELOW score on very narrow */
        white-space: normal !important;
        gap: 6px !important;
    }
    .tbpat-score {
        font-size: 1.5rem !important;  /* was 1.8rem, was forcing row overflow */
        word-break: break-word !important;
        white-space: normal !important;
        line-height: 1.15 !important;
    }
    .tbpat-summary-stars { font-size: 1rem !important; flex-shrink: 1 !important; }

    /* --- Meta rows --- */
    .tbpat-product-card-meta {
        flex-wrap: wrap !important;
        gap: 6px 12px !important;
    }
    .tbpat-summary-facts { grid-template-columns: 1fr !important; }
    .tbpat-summary-facts li { font-size: 0.9rem !important; }

    /* --- Pros/Cons mobile tweaks --- */
    .tbpat-pros, .tbpat-cons { padding: 12px 12px 14px 12px !important; }
    .tbpat-pros ul, .tbpat-cons ul { padding-left: 16px; }
    .tbpat-pros li, .tbpat-cons li { font-size: 0.92rem !important; line-height: 1.4 !important; }

    /* --- Buttons --- */
    a.tbpat-btn,
    .entry-content a.tbpat-btn,
    .wp-block-post-content a.tbpat-btn {
        width: 100% !important;
        display: flex !important;
        white-space: normal !important;
        padding: 10px 14px !important;
        font-size: 0.95rem !important;
        line-height: 1.35 !important;
    }
}

/* Ultra-narrow devices (iPhone SE 1st gen, Fold inner screens < 380px) */
@media (max-width: 420px) {
    .tbpat-summary-title { font-size: 1.0rem !important; }
    .tbpat-score         { font-size: 1.3rem !important; }
    .tbpat-summary-stars { font-size: 0.95rem !important; }
    .tbpat-summary-card,
    .tbpat-product-card,
    .tbpat-disclosure    { padding: 12px !important; }
}