/* Affiliate components for SEO Theme.
   Deferred; loads only on pages that use an affiliate pattern or have a sticky
   CTA (see inc/affiliate.php). Uses the theme's existing design tokens only. */

/* --- Star rating ---------------------------------------------------------- */
/* Set the score on the element: <span class="stars" style="--rating:4.6"> */
.stars{--rating:0;position:relative;display:inline-block;width:5.4em;height:1.05em;
  font-size:1rem;line-height:1;vertical-align:-.12em}
.stars::before,.stars::after{content:"★★★★★";position:absolute;left:0;top:0;
  letter-spacing:.05em;white-space:nowrap}
.stars::before{color:var(--color-border)}
.stars::after{color:#f5a623;width:calc(var(--rating) / 5 * 100%);overflow:hidden}

/* --- Affiliate button helper (reuses the theme's button look) ------------- */
.aff-btn{display:inline-block;background:var(--color-accent);color:var(--color-accent-contrast);
  padding:.55rem 1.1rem;border-radius:var(--radius);font-weight:600;text-decoration:none;
  white-space:nowrap;transition:filter .15s ease}
.aff-btn:hover,.aff-btn:focus-visible{filter:brightness(1.07);color:var(--color-accent-contrast)}

/* --- Comparison table (responsive: stacks to cards on mobile) ------------- */
.affiliate-compare{margin-block:var(--space-lg)}
.affiliate-compare__scroll{overflow-x:auto}
.affiliate-compare table{width:100%;border-collapse:collapse;min-width:40rem}
.affiliate-compare :is(th,td){padding:.75rem .8rem;border-bottom:1px solid var(--color-border);
  text-align:start;vertical-align:middle}
.affiliate-compare thead th{font-size:.8125rem;text-transform:uppercase;letter-spacing:.03em;
  color:var(--color-muted)}
.affiliate-compare tr.is-top{background:color-mix(in srgb, var(--color-accent) 7%, transparent)}
.affiliate-compare .badge{display:inline-block;background:var(--color-accent);
  color:var(--color-accent-contrast);font-size:.68rem;font-weight:700;padding:.14em .5em;
  border-radius:.4em;margin-inline-end:.45em;text-transform:uppercase;letter-spacing:.03em}
.affiliate-compare .product{font-weight:600}

@media (max-width:46rem){
  .affiliate-compare__scroll{overflow:visible}
  .affiliate-compare table{min-width:0}
  .affiliate-compare table,.affiliate-compare thead,.affiliate-compare tbody,
  .affiliate-compare tr,.affiliate-compare td{display:block;width:auto}
  .affiliate-compare thead{position:absolute;left:-9999px}        /* labels move into td::before */
  .affiliate-compare tr{border:1px solid var(--color-border);border-radius:var(--radius);
    padding:.4rem .9rem;margin-block:.85rem;background:var(--color-bg)}
  .affiliate-compare tr.is-top{box-shadow:0 0 0 2px var(--color-accent) inset}
  .affiliate-compare td{border:0;padding:.4rem 0;display:flex;justify-content:space-between;
    gap:1rem;align-items:center}
  .affiliate-compare td::before{content:attr(data-label);font-size:.8rem;color:var(--color-muted);
    font-weight:600}
  .affiliate-compare td.cell-cta{padding-top:.7rem}
  .affiliate-compare td.cell-cta::before{display:none}
  .affiliate-compare td.cell-cta .aff-btn{width:100%;text-align:center}
}

/* --- Verdict / review box ------------------------------------------------- */
.verdict-box{border:1px solid var(--color-border);border-radius:var(--radius);
  padding:var(--space-md);background:var(--color-surface);margin-block:var(--space-lg)}
.verdict-box__head{align-items:center;gap:var(--space-sm)}
.verdict-box__score{font-size:1rem;color:var(--color-muted);white-space:nowrap}
.verdict-box__score strong{font-size:1.7rem;color:var(--color-heading, var(--color-fg))}
.verdict-box__proscons{margin-block-start:var(--space-sm)}
.verdict-box ul{list-style:none;margin:0;padding:0}
.verdict-box li{position:relative;padding-inline-start:1.6em;margin-block:.3em}
.verdict-box .pros li::before{content:"✓";position:absolute;inset-inline-start:0;
  color:#16a34a;font-weight:700}
.verdict-box .cons li::before{content:"✕";position:absolute;inset-inline-start:0;
  color:#dc2626;font-weight:700}

/* --- "Best of" ranking list ---------------------------------------------- */
.ranking-list{margin-block:var(--space-lg);display:grid;gap:var(--space-md)}
.ranking-item{position:relative;border:1px solid var(--color-border);border-radius:var(--radius);
  padding:var(--space-md);padding-inline-start:3.4rem;background:var(--color-bg)}
.ranking-item__rank{position:absolute;inset-inline-start:var(--space-sm);top:var(--space-sm);
  width:2rem;height:2rem;border-radius:50%;background:var(--color-accent);
  color:var(--color-accent-contrast);display:grid;place-items:center;font-weight:700}
.ranking-item__title{margin:0 0 .25rem;font-size:1.15rem}
.ranking-item__meta{display:flex;gap:1.1rem;flex-wrap:wrap;color:var(--color-muted);
  font-size:.9rem;margin:.3rem 0 .85rem}

/* --- Sticky CTA (mobile only) -------------------------------------------- */
.sticky-cta{position:fixed;inset-inline:0;bottom:0;z-index:60;background:var(--color-bg);
  border-top:1px solid var(--color-border);box-shadow:0 -2px 12px rgba(0,0,0,.08);
  transform:translateY(110%);transition:transform .25s ease}
.sticky-cta.is-visible{transform:translateY(0)}
.sticky-cta__inner{display:flex;align-items:center;gap:var(--space-md);padding-block:.6rem}
.sticky-cta__text{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sticky-cta__btn{margin-inline-start:auto}
@media (min-width:48rem){.sticky-cta{display:none}}      /* desktop shows in-page CTAs */
@media (max-width:26rem){.sticky-cta__text{display:none}}

/* --- E-E-A-T author box --------------------------------------------------- */
.author-box{display:flex;gap:var(--space-md);align-items:flex-start;
  border:1px solid var(--color-border);border-radius:var(--radius);padding:var(--space-md);
  background:var(--color-surface);margin-block:var(--space-lg)}
.author-box__avatar{flex:0 0 auto;width:64px;height:64px;border-radius:50%}
.author-box__name{font-weight:700;margin:0}
.author-box__cred{font-weight:500;color:var(--color-muted);font-size:.9em}
.author-box__bio{margin:.35rem 0 .5rem;color:var(--color-fg)}
.author-box__meta{display:flex;gap:1rem;flex-wrap:wrap;font-size:.85rem;color:var(--color-muted)}
.author-box__review{font-style:italic}