/*
 * Poka Review Native Design System v2.1
 * Layout lives in the existing templates. Visual identity is controlled by CSS variables.
 * Priority: core defaults -> theme preset -> shortcode inline token overrides.
 */
.prp-design-system {
  --pr-primary: #22b9ff;
  --pr-primary-hover: #1599d6;
  --pr-bg: transparent;
  --pr-card-bg: #ffffff;
  --pr-text: #1d2327;
  --pr-muted: #646970;
  --pr-border: #e0e0e0;
  --pr-score: #22b9ff;
  --pr-bonus: #22b9ff;
  --pr-cta-bg: #22b9ff;
  --pr-cta-text: #ffffff;
  --pr-radius: 5px;
  --pr-button-radius: 5px;
  --pr-gap: 16px;
  --pr-padding: 16px;
  --pr-shadow: 0 3px 2px rgba(0,0,0,.10);
  --pr-hover-shadow: 0 8px 24px rgba(0,0,0,.12);
}

/* Theme presets: one layout can use any preset. */
.prp-theme-default { }
.prp-theme-blue-affiliate {
  --pr-primary:#1677ff; --pr-primary-hover:#0958d9; --pr-cta-bg:#1677ff;
  --pr-score:#16a34a; --pr-bonus:#e11d48; --pr-card-bg:#fff;
  --pr-text:#111827; --pr-muted:#64748b; --pr-border:#dbeafe; --pr-radius:12px;
}
.prp-theme-casino-dark {
  --pr-primary:#f5b942; --pr-primary-hover:#d99b18; --pr-bg:#111827;
  --pr-card-bg:#1f2937; --pr-text:#f9fafb; --pr-muted:#9ca3af;
  --pr-border:#374151; --pr-score:#22c55e; --pr-bonus:#fb7185;
  --pr-cta-bg:#ef4444; --pr-cta-text:#fff; --pr-radius:14px;
  --pr-shadow:0 10px 30px rgba(0,0,0,.25);
}
.prp-theme-gold-luxury {
  --pr-primary:#d4a72c; --pr-primary-hover:#b88913; --pr-bg:#fffdf7;
  --pr-card-bg:#fffaf0; --pr-text:#2b2118; --pr-muted:#806f5c;
  --pr-border:#ead7a1; --pr-score:#9a7b18; --pr-bonus:#b7791f;
  --pr-cta-bg:#d4a72c; --pr-cta-text:#211807; --pr-radius:14px;
}
.prp-theme-orange-brand {
  --pr-primary:#f97316; --pr-primary-hover:#ea580c; --pr-card-bg:#fff;
  --pr-text:#1f2937; --pr-muted:#6b7280; --pr-border:#fed7aa;
  --pr-score:#16a34a; --pr-bonus:#ea580c; --pr-cta-bg:#f97316; --pr-radius:12px;
}
.prp-theme-green-fintech {
  --pr-primary:#10b981; --pr-primary-hover:#059669; --pr-card-bg:#fff;
  --pr-text:#10231d; --pr-muted:#5b7068; --pr-border:#bbf7d0;
  --pr-score:#059669; --pr-bonus:#0f766e; --pr-cta-bg:#10b981; --pr-radius:10px;
}
.prp-theme-minimal-white {
  --pr-primary:#111827; --pr-primary-hover:#374151; --pr-bg:#fff;
  --pr-card-bg:#fff; --pr-text:#111827; --pr-muted:#6b7280;
  --pr-border:#e5e7eb; --pr-score:#111827; --pr-bonus:#111827;
  --pr-cta-bg:#111827; --pr-radius:6px; --pr-shadow:none;
}
.prp-theme-red-conversion {
  --pr-primary:#ef4444; --pr-primary-hover:#dc2626; --pr-card-bg:#fff;
  --pr-text:#18181b; --pr-muted:#71717a; --pr-border:#fecaca;
  --pr-score:#16a34a; --pr-bonus:#ef4444; --pr-cta-bg:#ef4444; --pr-radius:12px;
}

/* Core elements */
.prp-design-system.prp-themed { color:var(--pr-text); background:var(--pr-bg); }
.prp-design-system.prp-themed .prp-content { color:var(--pr-text); }
.prp-design-system.prp-themed .prp-content a:not(.prp-btn) { color:var(--pr-primary); }
.prp-design-system.prp-themed .prp-content .prp-btn {
  background:var(--pr-cta-bg); color:var(--pr-cta-text);
  border-radius:var(--pr-button-radius); box-shadow:var(--pr-shadow);
}
.prp-design-system.prp-themed .prp-content .prp-btn:hover,
.prp-design-system.prp-themed .prp-content .prp-btn:focus { background:var(--pr-primary-hover); color:var(--pr-cta-text); box-shadow:var(--pr-hover-shadow); }
.prp-design-system.prp-themed .prp-content .prp-btn--review { border-color:var(--pr-primary); }
.prp-design-system.prp-themed .prp-content .num-percent,
.prp-design-system.prp-themed .prp-content .prp-el-circle-rating,
.prp-design-system.prp-themed .prp-content .title-score { color:var(--pr-score); }
.prp-design-system.prp-themed .prp-content .prp-el-circle-rating { background-color:color-mix(in srgb, var(--pr-card-bg) 88%, var(--pr-primary) 12%); }
.prp-design-system.prp-themed .prp-content .prp-bonus-box,
.prp-design-system.prp-themed .prp-content .bonus-text { color:var(--pr-bonus); }
.prp-design-system.prp-themed .prp-content .star-list li:before,
.prp-design-system.prp-themed .prp-content .star-list-sep li:before { color:var(--pr-score); }

/* Table V1 / V2 / V3 / widget */
.prp-design-system.prp-themed .prp-content .table-s1,
.prp-design-system.prp-themed .prp-content .table-s2,
.prp-design-system.prp-themed .prp-content .table-s3,
.prp-design-system.prp-themed .prp-content .table-widget-s1 { color:var(--pr-text); }
.prp-design-system.prp-themed .prp-content .table-s1 .item,
.prp-design-system.prp-themed .prp-content .table-s2 .prp-item,
.prp-design-system.prp-themed .prp-content .table-s3 .item,
.prp-design-system.prp-themed .prp-content .table-widget-s1 .item {
  background:var(--pr-card-bg); border-color:var(--pr-border);
  border-radius:var(--pr-radius); color:var(--pr-text);
}
.prp-design-system.prp-themed .prp-content .table-s2 .prp-item,
.prp-design-system.prp-themed .prp-content .table-s3 .item { box-shadow:var(--pr-shadow); }
.prp-design-system.prp-themed .prp-content .table-widget-s1 .item { border-bottom-color:var(--pr-border); }
.prp-design-system.prp-themed .prp-content .prp-logo-box { background:var(--pr-card-bg); border-color:var(--pr-border); border-radius:calc(var(--pr-radius) * .75); }
.prp-design-system.prp-themed .prp-content .count { color:var(--pr-muted); }
.prp-design-system.prp-themed .prp-content .pros-list,
.prp-design-system.prp-themed .prp-content .prp-col-features { color:var(--pr-muted); }

/* Single review / bonus layouts */
.prp-design-system.prp-themed .prp-content .review-single-s1,
.prp-design-system.prp-themed .prp-content .prp-detailed-box,
.prp-design-system.prp-themed .prp-content .widget-content-left,
.prp-design-system.prp-themed .prp-content .widget-content-right {
  color:var(--pr-text); border-color:var(--pr-border);
}
.prp-design-system.prp-themed .prp-content .review-single-s1 { background-color:var(--pr-card-bg); border-radius:var(--pr-radius); box-shadow:var(--pr-shadow); }
.prp-design-system.prp-themed .prp-content .review-single-s1-title { background-color:var(--pr-primary); color:var(--pr-cta-text); }
.prp-design-system.prp-themed .prp-content .widget-details,
.prp-design-system.prp-themed .prp-content .summary-box,
.prp-design-system.prp-themed .prp-content .prp-text-group,
.prp-design-system.prp-themed .prp-content .info-list { color:var(--pr-text); }
.prp-design-system.prp-themed .prp-content .widget-details small,
.prp-design-system.prp-themed .prp-content .summary-box small { color:var(--pr-muted); }

/* Native fallback for browsers without color-mix(). */
@supports not (background: color-mix(in srgb, white 50%, black)) {
  .prp-design-system.prp-themed .prp-content .prp-el-circle-rating { background-color:var(--pr-card-bg); }
}

.prp-design-system.prp-themed .prp-content .star-list li.star-active svg polygon,
.prp-design-system.prp-themed .prp-content .star-list-sep li.star-active svg polygon { fill:var(--pr-score) !important; }

/* Component Registry V1 — modular components */
.prp-design-system .prp-component{box-sizing:border-box;background:var(--pr-card-bg);color:var(--pr-text);border:1px solid var(--pr-border);border-radius:var(--pr-radius);box-shadow:var(--pr-shadow);padding:var(--pr-padding);gap:var(--pr-gap)}
.prp-design-system .prp-review-card{display:grid;grid-template-columns:minmax(84px,120px) 1fr;align-items:center}
.prp-design-system .prp-component-logo img{max-width:100%;height:auto;display:block}
.prp-design-system .prp-component-title{margin:0 0 8px;color:var(--pr-text)}
.prp-design-system .prp-component-score{font-weight:800;color:var(--pr-score);font-size:1.25em;margin-bottom:6px}
.prp-design-system .prp-component-bonus{font-weight:800;color:var(--pr-bonus);margin-bottom:8px}
.prp-design-system .prp-component-pros{margin:8px 0 12px;padding-left:20px;color:var(--pr-muted)}
.prp-design-system .prp-component-pros li{margin:3px 0}
.prp-design-system .prp-component-actions{display:flex;gap:8px;flex-wrap:wrap}
.prp-design-system .prp-cta-box{display:flex;align-items:center}
.prp-design-system .prp-cta-box .prp-component-logo{flex:0 0 90px}
.prp-design-system .prp-cta-box .prp-component-body{flex:1}
.prp-design-system .prp-cta-box .prp-cta-primary{flex:0 0 auto}
.prp-design-system .prp-pros-cons{display:grid;grid-template-columns:1fr 1fr}
.prp-design-system .prp-pros-cons h4{margin:0 0 8px}
.prp-design-system .prp-pros-cons ul{margin:0;padding-left:20px}
.prp-design-system .prp-pros-cons .is-positive h4{color:var(--pr-score)}
.prp-design-system .prp-pros-cons .is-negative h4{color:var(--pr-bonus)}
.prp-design-system .prp-rating-summary{display:grid;grid-template-columns:minmax(120px,180px) 1fr;align-items:center}
.prp-design-system .prp-rating-total{text-align:center;border-right:1px solid var(--pr-border);padding-right:var(--pr-padding)}
.prp-design-system .prp-rating-number{display:block;color:var(--pr-score);font-size:2em;font-weight:800}
.prp-design-system .prp-rating-total small{color:var(--pr-muted)}
@media(max-width:640px){.prp-design-system .prp-review-card,.prp-design-system .prp-rating-summary,.prp-design-system .prp-pros-cons{grid-template-columns:1fr}.prp-design-system .prp-cta-box{align-items:flex-start;flex-direction:column}.prp-design-system .prp-rating-total{border-right:0;border-bottom:1px solid var(--pr-border);padding:0 0 var(--pr-padding);margin-bottom:var(--pr-padding)}}


/* Template Gallery V1 — native layout variants reusing the Table V3 renderer. */
.prp-design-system.prp-template-compact-list .table-s3 .item{display:grid!important;grid-template-columns:minmax(120px,.85fr) 1.15fr minmax(132px,.8fr);align-items:center;gap:var(--pr-gap);padding:10px 12px;min-height:0}
.prp-design-system.prp-template-compact-list .table-s3 .item .c1,.prp-design-system.prp-template-compact-list .table-s3 .item .c2,.prp-design-system.prp-template-compact-list .table-s3 .item .c3{width:auto!important;float:none!important;position:static!important}
.prp-design-system.prp-template-compact-list .table-s3 .pros-list{display:none}.prp-design-system.prp-template-compact-list .table-s3 .prp-el-circle-rating{transform:scale(.88);transform-origin:left center}.prp-design-system.prp-template-compact-list .table-s3 .prp-logo-box{max-width:110px;margin:auto}
.prp-design-system.prp-template-card-grid .table-s3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--pr-gap)}
.prp-design-system.prp-template-card-grid .table-s3 .item{display:flex!important;flex-direction:column;min-width:0;padding:var(--pr-padding);height:100%}.prp-design-system.prp-template-card-grid .table-s3 .item .c1,.prp-design-system.prp-template-card-grid .table-s3 .item .c2,.prp-design-system.prp-template-card-grid .table-s3 .item .c3{width:100%!important;float:none!important;position:static!important;text-align:center}.prp-design-system.prp-template-card-grid .table-s3 .prp-logo-box{max-width:160px;margin:0 auto 10px}.prp-design-system.prp-template-card-grid .table-s3 .pros-list{text-align:left}.prp-design-system.prp-template-card-grid .table-s3 .prp-btn{width:100%}
.prp-design-system.prp-template-minimal .table-s3 .item{border-width:0 0 1px!important;border-radius:0!important;box-shadow:none!important;background:transparent!important;padding:12px 0}.prp-design-system.prp-template-minimal .table-s3 .prp-logo-box{border:0!important;background:transparent!important}.prp-design-system.prp-template-minimal .table-s3 .pros-list{display:none}.prp-design-system.prp-template-minimal .table-s3 .prp-btn--review{background:transparent!important;color:var(--pr-primary)!important;border:0!important;box-shadow:none!important}.prp-design-system.prp-template-minimal .table-s3 .prp-btn{border-radius:4px}
.prp-design-system.prp-template-mobile-first .table-s3 .item{display:grid!important;grid-template-columns:88px 1fr;gap:10px;padding:12px;align-items:center}.prp-design-system.prp-template-mobile-first .table-s3 .item .c1{grid-column:2;grid-row:1;width:auto!important;float:none!important}.prp-design-system.prp-template-mobile-first .table-s3 .item .c2{grid-column:1;grid-row:1;width:auto!important;float:none!important}.prp-design-system.prp-template-mobile-first .table-s3 .item .c3{grid-column:1/-1;grid-row:2;width:auto!important;float:none!important}.prp-design-system.prp-template-mobile-first .table-s3 .prp-logo-box{margin:0;max-width:88px}.prp-design-system.prp-template-mobile-first .table-s3 .pros-list{display:none}.prp-design-system.prp-template-mobile-first .table-s3 .c3 .prp-table-cell{display:grid!important;grid-template-columns:1fr 1fr;gap:8px;align-items:center}.prp-design-system.prp-template-mobile-first .table-s3 .c3 h4,.prp-design-system.prp-template-mobile-first .table-s3 .c3 .terms{grid-column:1/-1}.prp-design-system.prp-template-mobile-first .table-s3 .prp-btn{width:100%;margin:0}
@media(max-width:980px){.prp-design-system.prp-template-card-grid .table-s3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.prp-design-system.prp-template-card-grid .table-s3{grid-template-columns:1fr}.prp-design-system.prp-template-compact-list .table-s3 .item{grid-template-columns:80px 1fr}.prp-design-system.prp-template-compact-list .table-s3 .item .c1{grid-column:2}.prp-design-system.prp-template-compact-list .table-s3 .item .c2{grid-column:1;grid-row:1}.prp-design-system.prp-template-compact-list .table-s3 .item .c3{grid-column:1/-1}}