/* Frontend styles for ABX plugin - unique class prefixes: abx- */
.abx-accordion-wrapper { max-width: 1200px; margin: 20px auto; padding: 10px; }
.abx-accordion-item { background: transparent; margin-bottom: 18px; border-radius: 6px; }
.abx-accordion-toggle { width: 100%; text-align: left; font-size: 20px; font-weight: 700; padding: 14px 18px; border: 0; background: #333; color:#fff; cursor: pointer; position: relative; border-radius:4px; }
.abx-accordion-toggle .abx-accordion-chevron { float: right; font-size: 20px; color: #b5e6b9; }
.abx-accordion-content { padding: 18px; background: #fff; border-radius:6px; margin-top:12px; }

/* Box row and cards: use fixed basis so fewer boxes don't stretch */
.abx-box-row { display:flex; flex-wrap:wrap; gap:20px; align-items:flex-start; justify-content:flex-start; }
.abx-box-card { flex: 0 0 calc(33.333% - 20px); background:#fafafa; border-radius:6px; padding:28px 22px; box-shadow: 0 1px 0 rgba(0,0,0,0.04); position:relative; text-align:center; min-width:220px; box-sizing:border-box; }
/* If you want exactly 3 per row, the above calc keeps each card 1/3 width minus gap. */

/* Responsive */
@media (max-width:1000px) {
  .abx-box-card { flex: 0 0 calc(50% - 20px); }
}
@media (max-width:600px) {
  .abx-box-card { flex: 0 0 100%; }
}

/* Ribbon (angled top-right) */
.abx-ribbon { position:absolute; right:-36px; top:12px; color:#fff; padding:8px 58px; transform: rotate(45deg); font-weight:700; box-shadow:0 1px 2px rgba(0,0,0,0.12); }

/* Ribbon variants */
.abx-ribbon--win { background:#4CAF50; }
.abx-ribbon--loss { background:#F44336; }

/* Box content */
.abx-box-title { font-size:18px; margin:12px 0 8px; color:#222; }
.abx-box-desc { font-size:14px; color:#444; line-height:1.6; margin-bottom:18px; }

/* Button */
.abx-box-btn { display:inline-block; padding:10px 18px; background:#ff8c2b; color:#fff; border-radius:6px; text-decoration:none; font-weight:700; }