/* ================================================================
   Plugin 1286 — Card Info Boxes
   ================================================================ */

/* ── TOKENS (scoped to outer wrapper) ── */
.ow-ss-bc-wrap-outer {
  --ow-bc-dark:   #0d1e36;
  --ow-bc-border: rgba(255,255,255,.07);
  --ow-bc-text:   #e0ecf8;
  --ow-bc-muted:  #8aabcc;
  --ow-bc-label:  #5a7a99;
  --ow-bc-accent: #5bb5f0;
  --ow-bc-max:    1180px;
  --ow-bc-r:      14px;
  --ow-bc-tr:     .2s ease;
}

/* ── INNER GRID ── */
.ow-ss-bc-btm-tabs { padding: 0; }

.ow-ss-bc-btm-inner {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  max-width: var(--ow-bc-max);
  margin: 0 auto;
  padding: 0 20px;
}
@media (min-width: 700px) {
  .ow-ss-bc-btm-inner { padding: 0 32px; }
}

/* ── CARD ── */
.ow-ss-bc-btm-card {
  display: flex;
  flex-direction: column;
  background: var(--ow-bc-dark);
  border-radius: var(--ow-bc-r);
  padding: 32px 28px;
  text-decoration: none;
  color: var(--ow-bc-text);
  border: 1px solid var(--ow-bc-border);
  transition: transform var(--ow-bc-tr), box-shadow var(--ow-bc-tr), border-color var(--ow-bc-tr);
}
.ow-ss-bc-btm-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 48px rgba(0,0,0,.35);
  border-color: rgba(255,255,255,.14);
  text-decoration: none;
  color: var(--ow-bc-text);
}

/* ── ICON BOX ── */
.ow-ss-bc-btm-icon {
  width: 54px;
  height: 54px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  flex-shrink: 0;
}

/* SVG icon — white stroke, no fill */
.ow-ss-bc-btm-icon svg {
  width: 26px;
  height: 26px;
  stroke: #fff;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* PNG image icon — transparent PNG rendered white, same look as SVG */
.ow-ss-bc-btm-icon img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

/* ── ICON COLOUR VARIANTS ── */
.ow-ss-bc-ic-b { background: rgba(14,  165, 233, .18); }  /* sky blue  */
.ow-ss-bc-ic-g { background: rgba(16,  185, 129, .18); }  /* green     */
.ow-ss-bc-ic-p { background: rgba(139,  92, 246, .18); }  /* purple    */
.ow-ss-bc-ic-o { background: rgba(245, 158,  11, .18); }  /* orange    */
.ow-ss-bc-ic-r { background: rgba(239,  68,  68, .18); }  /* red       */
.ow-ss-bc-ic-w { background: rgba(255, 255, 255, .10); }  /* white/glass */

/* ── LABEL ── */
.ow-ss-bc-btm-label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ow-bc-label);
  margin-bottom: 6px;
}

/* ── TITLE ── */
.ow-ss-bc-btm-title {
  font-size: 1.08rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
  line-height: 1.3;
}

/* ── DESCRIPTION ── */
.ow-ss-bc-btm-desc {
  font-size: .84rem;
  color: var(--ow-bc-muted);
  line-height: 1.68;
  flex: 1;
  margin: 0 0 22px;
}

/* ── ARROW LINK ── */
.ow-ss-bc-btm-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .82rem;
  font-weight: 700;
  color: var(--ow-bc-accent);
  transition: gap var(--ow-bc-tr);
  margin-top: auto;
}
.ow-ss-bc-btm-arrow svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  transition: transform var(--ow-bc-tr);
}
.ow-ss-bc-btm-card:hover .ow-ss-bc-btm-arrow     { gap: 10px; }
.ow-ss-bc-btm-card:hover .ow-ss-bc-btm-arrow svg { transform: translateX(4px); }

/* ── RESPONSIVE ── */
@media (max-width: 640px) {
  .ow-ss-bc-btm-inner  { grid-template-columns: 1fr; padding: 0 16px; }
  .ow-ss-bc-btm-card   { padding: 24px 20px; }
}