/* =============================================================================
   verdict-cards.css — thatmy.com
   Verdict box card system. Extends the existing CSS custom properties
   already defined in your :root block.

   STYLE VARIANTS (14 total):
   winner  · budget · fast  · vps    · shared · premium
   support · cloud  · secure· wordpress · eco · runner
   avoid   · caution

   HOW IT WORKS:
   Each .verdict-box variant sets local CSS custom properties (--vb-*).
   The shared shell rules read those properties.
   You add a new style by adding ONE rule block that sets the variables.
   Nothing else changes.

   DEPENDENCIES:
   Requires these variables already in your :root:
   --color-success, --color-warning, --color-fast, --color-vps,
   --color-shared, --color-premium, --color-cloud, --color-security,
   --color-support, --color-wordpress, --color-eco, --color-runner

   ADD THESE two to your :root (not yet in your stylesheet):
   --color-avoid:   #991b1b;
   --color-caution: #b45309;
   ============================================================================= */


/* ─────────────────────────────────────────────────────────────────────────────
   ADD TO YOUR :root BLOCK
   ───────────────────────────────────────────────────────────────────────────── */
:root {
  --color-avoid:   #991b1b;
  --color-caution: #b45309;
}


/* ─────────────────────────────────────────────────────────────────────────────
   GRID CONTAINER
   ───────────────────────────────────────────────────────────────────────────── */
.quick-verdict-container {
  display: grid;
  gap: 24px;
  margin: 2em 0 2.5em;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* 1 card — centred, max readable width */
.quick-verdict-container.qvc-count-1 {
  grid-template-columns: minmax(280px, 580px);
  justify-content: center;
}

/* 2 cards — equal columns */
.quick-verdict-container.qvc-count-2 {
  grid-template-columns: repeat(2, 1fr);
}

/* 4 cards — 2×2 grid on desktop */
@media (min-width: 900px) {
  .quick-verdict-container.qvc-count-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile — stack everything */
@media (max-width: 640px) {
  .quick-verdict-container,
  .quick-verdict-container.qvc-count-2,
  .quick-verdict-container.qvc-count-4 {
    grid-template-columns: 1fr;
  }
}


/* ─────────────────────────────────────────────────────────────────────────────
   SHARED CARD SHELL
   All cards share this. Variants customise via --vb-* properties below.
   ───────────────────────────────────────────────────────────────────────────── */
.verdict-box {
  /* Layout */
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px 24px 22px;
  overflow: hidden;

  /* Appearance — reads variant properties, falls back to neutral */
  border-radius: 14px;
  background:   var(--vb-bg,      #ffffff);
  border:       var(--vb-border,  2px solid #e5e7eb);
  box-shadow:   var(--vb-shadow,  0 2px 12px rgba(0,0,0,.06));

  /* Transition */
  transition: transform .15s ease, box-shadow .15s ease;
}

/* Top accent bar */
.verdict-box::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--vb-accent, #e5e7eb);
  border-radius: 14px 14px 0 0;
}

.verdict-box:hover {
  transform: translateY(-3px);
  box-shadow: var(--vb-shadow-hover, 0 10px 28px rgba(0,0,0,.11));
}


/* ── 1. Label badge ───────────────────────────────────────────────────────── */
.verdict-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  align-self: flex-start;
  padding: 5px 14px;
  border-radius: 99px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: #fff;
  background: var(--vb-accent, #374151);
  box-shadow: 0 3px 8px var(--vb-accent-shadow, rgba(0,0,0,.2));
}


/* ── 2. Header: name + type pill ─────────────────────────────────────────── */
.verdict-header {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}

.verdict-name {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--vb-text-head, #111827);
}

.verdict-type-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .4px;
  text-transform: uppercase;
  white-space: nowrap;
  color:       var(--vb-accent, #6b7280);
  background:  var(--vb-tint,   #f3f4f6);
}


/* ── 3. Stats row ─────────────────────────────────────────────────────────── */
.verdict-stats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

.vs-price {
  font-size: 15px;
  font-weight: 800;
  color: var(--vb-accent, #111827);
}

.vs-sep {
  color: #d1d5db;
}

.vs-speed {
  font-size: 13px;
  font-weight: 600;
  color: var(--vb-text-body, #374151);
}

.vs-stars {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  font-size: 14px;
  letter-spacing: -1px;
}

.vs-stars .star-full  { color: #f59e0b; }
.vs-stars .star-half  { color: #f59e0b; opacity: .6; }
.vs-stars .star-empty { color: #d1d5db; }

.vs-rating-num {
  margin-left: 5px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--vb-text-body, #374151);
}


/* ── 4. Score bar ─────────────────────────────────────────────────────────── */
/* Shares the same visual language as the table .score-bar system */
.verdict-score-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.verdict-score-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.verdict-score-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--vb-text-muted, #6b7280);
}

.verdict-score-num {
  font-size: 14px;
  font-weight: 800;
  color: var(--vb-accent, #111827);
}

.verdict-score-denom {
  font-size: 11px;
  font-weight: 400;
  color: var(--vb-text-muted, #9ca3af);
}

.verdict-score-track {
  width: 100%;
  height: 8px;
  border-radius: 99px;
  background: var(--vb-bar-bg, #f3f4f6);
  overflow: hidden;
}

.verdict-score-fill {
  height: 100%;
  border-radius: 99px;
  /* Gradient from accent to a lighter tint of accent */
  background: linear-gradient(
    90deg,
    var(--vb-accent, #374151),
    var(--vb-accent-light, var(--vb-accent))
  );
  transition: width .7s cubic-bezier(.4, 0, .2, 1);
}


/* ── 5. Description ───────────────────────────────────────────────────────── */
.verdict-desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--vb-text-body, #374151);
}


/* ── 6. Bullet points ─────────────────────────────────────────────────────── */
.verdict-points {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.verdict-points li {
  position: relative;
  padding-left: 20px;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--vb-text-body, #374151);
}

.verdict-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--vb-accent, #6b7280);
  opacity: .65;
}


/* ── 7. CTA buttons ───────────────────────────────────────────────────────── */
.verdict-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
  padding-top: 4px;
}

.verdict-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 100px;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  transition: transform .1s ease, box-shadow .1s ease, background .15s ease;
}

.verdict-btn:active {
  transform: translateY(1px) !important;
}

/* Secondary (ghost) — "View Full Review" */
.verdict-btn--secondary {
  background: var(--vb-tint, #f3f4f6);
  color:      var(--vb-text-head, #111827);
  border:     1px solid var(--vb-tint-border, #e5e7eb);
}

.verdict-btn--secondary:hover {
  background: var(--vb-tint-hover, #e5e7eb);
}

/* Primary (solid accent) — "Get Cloudways →" */
.verdict-btn--primary {
  background: var(--vb-accent, #374151);
  color: #fff;
  box-shadow: 0 4px 0 var(--vb-accent-dark, rgba(0,0,0,.25));
}

.verdict-btn--primary:hover {
  box-shadow: 0 2px 0 var(--vb-accent-dark, rgba(0,0,0,.25));
}


/* =============================================================================
   STYLE VARIANTS
   Each sets --vb-* properties. Shell rules above read them.
   Add a new style by adding one rule block here — nothing else needed.
   ============================================================================= */

/* ── winner ─ Best Overall ──────────────────────────────────────────────── */
.verdict-box.winner {
  --vb-accent:        var(--color-success, #27ae60);
  --vb-accent-light:  #52c47a;
  --vb-accent-dark:   #1a7a42;
  --vb-accent-shadow: rgba(39, 174, 96, .35);
  --vb-bg:            linear-gradient(160deg, #f0fdf4 0%, #ffffff 70%);
  --vb-border:        2px solid var(--color-success, #27ae60);
  --vb-shadow:        0 4px 18px rgba(39, 174, 96, .12);
  --vb-shadow-hover:  0 12px 32px rgba(39, 174, 96, .20);
  --vb-text-head:     #14532d;
  --vb-text-body:     #374151;
  --vb-text-muted:    #6b7280;
  --vb-tint:          #dcfce7;
  --vb-tint-border:   #bbf7d0;
  --vb-tint-hover:    #bbf7d0;
  --vb-bar-bg:        #dcfce7;
}

/* ── budget ─ Best Value/Cheap ──────────────────────────────────────────── */
.verdict-box.budget {
  --vb-accent:        var(--color-warning, #f39c12);
  --vb-accent-light:  #f5b942;
  --vb-accent-dark:   #c07d0e;
  --vb-accent-shadow: rgba(243, 156, 18, .35);
  --vb-bg:            linear-gradient(160deg, #fffbeb 0%, #ffffff 70%);
  --vb-border:        2px solid var(--color-warning, #f39c12);
  --vb-shadow:        0 4px 18px rgba(243, 156, 18, .12);
  --vb-shadow-hover:  0 12px 32px rgba(243, 156, 18, .20);
  --vb-text-head:     #78350f;
  --vb-text-body:     #374151;
  --vb-text-muted:    #6b7280;
  --vb-tint:          #fef9c3;
  --vb-tint-border:   #fde68a;
  --vb-tint-hover:    #fef3c7;
  --vb-bar-bg:        #fef9c3;
}

/* ── fast ─ Speed/Performance ───────────────────────────────────────────── */
.verdict-box.fast {
  --vb-accent:        var(--color-fast, #2980b9);
  --vb-accent-light:  #5dade2;
  --vb-accent-dark:   #1a5276;
  --vb-accent-shadow: rgba(41, 128, 185, .35);
  --vb-bg:            linear-gradient(160deg, #f0f9ff 0%, #ffffff 70%);
  --vb-border:        2px solid var(--color-fast, #2980b9);
  --vb-shadow:        0 4px 18px rgba(41, 128, 185, .12);
  --vb-shadow-hover:  0 12px 32px rgba(41, 128, 185, .20);
  --vb-text-head:     #1e3a8a;
  --vb-text-body:     #374151;
  --vb-text-muted:    #6b7280;
  --vb-tint:          #dbeafe;
  --vb-tint-border:   #bfdbfe;
  --vb-tint-hover:    #bfdbfe;
  --vb-bar-bg:        #dbeafe;
}

/* ── vps ─ Power/Scalability ────────────────────────────────────────────── */
.verdict-box.vps {
  --vb-accent:        var(--color-vps, #8e44ad);
  --vb-accent-light:  #bb8fce;
  --vb-accent-dark:   #5b2c6f;
  --vb-accent-shadow: rgba(142, 68, 173, .35);
  --vb-bg:            linear-gradient(160deg, #faf5ff 0%, #ffffff 70%);
  --vb-border:        2px solid var(--color-vps, #8e44ad);
  --vb-shadow:        0 4px 18px rgba(142, 68, 173, .12);
  --vb-shadow-hover:  0 12px 32px rgba(142, 68, 173, .20);
  --vb-text-head:     #4c1d95;
  --vb-text-body:     #374151;
  --vb-text-muted:    #6b7280;
  --vb-tint:          #ede9fe;
  --vb-tint-border:   #ddd6fe;
  --vb-tint-hover:    #ddd6fe;
  --vb-bar-bg:        #ede9fe;
}

/* ── shared ─ Beginner Friendly ─────────────────────────────────────────── */
.verdict-box.shared {
  --vb-accent:        var(--color-shared, #1abc9c);
  --vb-accent-light:  #48c9b0;
  --vb-accent-dark:   #148f77;
  --vb-accent-shadow: rgba(26, 188, 156, .35);
  --vb-bg:            linear-gradient(160deg, #f0fdfa 0%, #ffffff 70%);
  --vb-border:        2px solid var(--color-shared, #1abc9c);
  --vb-shadow:        0 4px 18px rgba(26, 188, 156, .12);
  --vb-shadow-hover:  0 12px 32px rgba(26, 188, 156, .20);
  --vb-text-head:     #134e4a;
  --vb-text-body:     #374151;
  --vb-text-muted:    #6b7280;
  --vb-tint:          #ccfbf1;
  --vb-tint-border:   #99f6e4;
  --vb-tint-hover:    #99f6e4;
  --vb-bar-bg:        #ccfbf1;
}

/* ── premium ─ Enterprise/High End ─────────────────────────────────────── */
.verdict-box.premium {
  --vb-accent:        var(--color-premium, #d4af37);
  --vb-accent-light:  #e2cc72;
  --vb-accent-dark:   #9a7d0a;
  --vb-accent-shadow: rgba(212, 175, 55, .35);
  --vb-bg:            linear-gradient(160deg, #fffdf0 0%, #ffffff 70%);
  --vb-border:        2px solid var(--color-premium, #d4af37);
  --vb-shadow:        0 4px 18px rgba(212, 175, 55, .12);
  --vb-shadow-hover:  0 12px 32px rgba(212, 175, 55, .20);
  --vb-text-head:     #78350f;
  --vb-text-body:     #374151;
  --vb-text-muted:    #6b7280;
  --vb-tint:          #fef9c3;
  --vb-tint-border:   #fde68a;
  --vb-tint-hover:    #fde68a;
  --vb-bar-bg:        #fef9c3;
}

/* ── support ─ Best Customer Service ───────────────────────────────────── */
.verdict-box.support {
  --vb-accent:        var(--color-support, #e84393);
  --vb-accent-light:  #f06aad;
  --vb-accent-dark:   #a01060;
  --vb-accent-shadow: rgba(232, 67, 147, .35);
  --vb-bg:            linear-gradient(160deg, #fff0f6 0%, #ffffff 70%);
  --vb-border:        2px solid var(--color-support, #e84393);
  --vb-shadow:        0 4px 18px rgba(232, 67, 147, .12);
  --vb-shadow-hover:  0 12px 32px rgba(232, 67, 147, .20);
  --vb-text-head:     #831843;
  --vb-text-body:     #374151;
  --vb-text-muted:    #6b7280;
  --vb-tint:          #fce7f3;
  --vb-tint-border:   #fbcfe8;
  --vb-tint-hover:    #fbcfe8;
  --vb-bar-bg:        #fce7f3;
}

/* ── cloud ─ Scalable/Modern Cloud ─────────────────────────────────────── */
.verdict-box.cloud {
  --vb-accent:        var(--color-cloud, #3498db);
  --vb-accent-light:  #72b8e8;
  --vb-accent-dark:   #1f6ea6;
  --vb-accent-shadow: rgba(52, 152, 219, .35);
  --vb-bg:            linear-gradient(160deg, #eaf6ff 0%, #ffffff 70%);
  --vb-border:        2px solid var(--color-cloud, #3498db);
  --vb-shadow:        0 4px 18px rgba(52, 152, 219, .12);
  --vb-shadow-hover:  0 12px 32px rgba(52, 152, 219, .20);
  --vb-text-head:     #0c4a6e;
  --vb-text-body:     #374151;
  --vb-text-muted:    #6b7280;
  --vb-tint:          #dbeafe;
  --vb-tint-border:   #bfdbfe;
  --vb-tint-hover:    #bfdbfe;
  --vb-bar-bg:        #dbeafe;
}

/* ── secure ─ Security Focused ─────────────────────────────────────────── */
.verdict-box.secure {
  --vb-accent:        var(--color-security, #c0392b);
  --vb-accent-light:  #e74c3c;
  --vb-accent-dark:   #7b241c;
  --vb-accent-shadow: rgba(192, 57, 43, .35);
  --vb-bg:            linear-gradient(160deg, #fff5f5 0%, #ffffff 70%);
  --vb-border:        2px solid var(--color-security, #c0392b);
  --vb-shadow:        0 4px 18px rgba(192, 57, 43, .12);
  --vb-shadow-hover:  0 12px 32px rgba(192, 57, 43, .20);
  --vb-text-head:     #7f1d1d;
  --vb-text-body:     #374151;
  --vb-text-muted:    #6b7280;
  --vb-tint:          #fee2e2;
  --vb-tint-border:   #fecaca;
  --vb-tint-hover:    #fecaca;
  --vb-bar-bg:        #fee2e2;
}

/* ── wordpress ─ Managed WordPress ─────────────────────────────────────── */
.verdict-box.wordpress {
  --vb-accent:        var(--color-wordpress, #21759b);
  --vb-accent-light:  #4fa3c7;
  --vb-accent-dark:   #155270;
  --vb-accent-shadow: rgba(33, 117, 155, .35);
  --vb-bg:            linear-gradient(160deg, #f0f7fb 0%, #ffffff 70%);
  --vb-border:        2px solid var(--color-wordpress, #21759b);
  --vb-shadow:        0 4px 18px rgba(33, 117, 155, .12);
  --vb-shadow-hover:  0 12px 32px rgba(33, 117, 155, .20);
  --vb-text-head:     #0c4a6e;
  --vb-text-body:     #374151;
  --vb-text-muted:    #6b7280;
  --vb-tint:          #e0f2fe;
  --vb-tint-border:   #bae6fd;
  --vb-tint-hover:    #bae6fd;
  --vb-bar-bg:        #e0f2fe;
}

/* ── eco ─ Green/Sustainable Hosting ───────────────────────────────────── */
.verdict-box.eco {
  --vb-accent:        var(--color-eco, #2ecc71);
  --vb-accent-light:  #58d68d;
  --vb-accent-dark:   #1e8449;
  --vb-accent-shadow: rgba(46, 204, 113, .35);
  --vb-bg:            linear-gradient(160deg, #f0fff4 0%, #ffffff 70%);
  --vb-border:        2px solid var(--color-eco, #2ecc71);
  --vb-shadow:        0 4px 18px rgba(46, 204, 113, .12);
  --vb-shadow-hover:  0 12px 32px rgba(46, 204, 113, .20);
  --vb-text-head:     #14532d;
  --vb-text-body:     #374151;
  --vb-text-muted:    #6b7280;
  --vb-tint:          #dcfce7;
  --vb-tint-border:   #bbf7d0;
  --vb-tint-hover:    #bbf7d0;
  --vb-bar-bg:        #dcfce7;
}

/* ── runner ─ Runner Up/Alternative ────────────────────────────────────── */
.verdict-box.runner {
  --vb-accent:        var(--color-runner, #7f8c8d);
  --vb-accent-light:  #a6acad;
  --vb-accent-dark:   #566263;
  --vb-accent-shadow: rgba(127, 140, 141, .30);
  --vb-bg:            linear-gradient(160deg, #f8f9fa 0%, #ffffff 70%);
  --vb-border:        2px solid var(--color-runner, #7f8c8d);
  --vb-shadow:        0 4px 14px rgba(0, 0, 0, .08);
  --vb-shadow-hover:  0 10px 26px rgba(0, 0, 0, .13);
  --vb-text-head:     #374151;
  --vb-text-body:     #4b5563;
  --vb-text-muted:    #9ca3af;
  --vb-tint:          #f3f4f6;
  --vb-tint-border:   #e5e7eb;
  --vb-tint-hover:    #e5e7eb;
  --vb-bar-bg:        #e5e7eb;
}

/* ── avoid ─ Strong Warning / Do Not Use ───────────────────────────────── */
.verdict-box.avoid {
  --vb-accent:        var(--color-avoid, #991b1b);
  --vb-accent-light:  #dc2626;
  --vb-accent-dark:   #450a0a;
  --vb-accent-shadow: rgba(153, 27, 27, .40);
  --vb-bg:            linear-gradient(160deg, #fef2f2 0%, #fff5f5 70%);
  --vb-border:        3px solid #dc2626;
  --vb-shadow:        0 4px 18px rgba(220, 38, 38, .14);
  --vb-shadow-hover:  0 12px 32px rgba(220, 38, 38, .22);
  --vb-text-head:     #7f1d1d;
  --vb-text-body:     #450a0a;
  --vb-text-muted:    #991b1b;
  --vb-tint:          #fee2e2;
  --vb-tint-border:   #fecaca;
  --vb-tint-hover:    #fecaca;
  --vb-bar-bg:        #fecaca;
}

/* ── caution ─ Soft Warning / Proceed Carefully ────────────────────────── */
.verdict-box.caution {
  --vb-accent:        var(--color-caution, #b45309);
  --vb-accent-light:  #d97706;
  --vb-accent-dark:   #78350f;
  --vb-accent-shadow: rgba(180, 83, 9, .35);
  --vb-bg:            linear-gradient(160deg, #fffbeb 0%, #fefce8 70%);
  --vb-border:        2px dashed #d97706;
  --vb-shadow:        0 4px 18px rgba(217, 119, 6, .10);
  --vb-shadow-hover:  0 12px 32px rgba(217, 119, 6, .17);
  --vb-text-head:     #78350f;
  --vb-text-body:     #451a03;
  --vb-text-muted:    #92400e;
  --vb-tint:          #fef3c7;
  --vb-tint-border:   #fde68a;
  --vb-tint-hover:    #fde68a;
  --vb-bar-bg:        #fde68a;
}


/* ─────────────────────────────────────────────────────────────────────────────
   PRINT
   ───────────────────────────────────────────────────────────────────────────── */
@media print {
  .quick-verdict-container { grid-template-columns: 1fr 1fr; gap: 12px; }
  .verdict-box { break-inside: avoid; box-shadow: none !important; }
  .verdict-btn { display: none; }
}