.mlab-ssr-box{
  border: 1px solid #e5e5e5;
  padding: 18px;
  border-radius: 10px;
  max-width: 520px;
}
.mlab-ssr-row{ margin-bottom: 12px; }
.mlab-ssr-row label{ display:block; font-weight:600; margin-bottom:6px; }
.mlab-ssr-row input{ width:100%; padding:10px; border:1px solid #ccc; border-radius:8px; }
.mlab-ssr-btn{
  padding: 10px 14px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
}
.mlab-ssr-msg{
  margin-top: 10px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid #e5e5e5;
}
.mlab-ssr-msg.mlab-ssr-error{
  border-color: #d63638;
}


/* Plans grid */
.mlab-ssr-plans{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 14px 0 12px;
}
@media (min-width: 640px){
  .mlab-ssr-plans{ grid-template-columns: 1fr 1fr; }
}

.mlab-ssr-plan-card{
  position: relative;
  border: 2px solid #e5e5e5;
  border-radius: 14px;
  padding: 14px;
  cursor: pointer;
  display:block;
  transition: transform .08s ease, border-color .08s ease, box-shadow .08s ease;
  background: #fafafa;
}
.mlab-ssr-plan-card input[type="radio"]{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.mlab-ssr-plan-card:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}
.mlab-ssr-plan-card.is-selected{
  border-color: #111;
  box-shadow: 0 8px 22px rgba(0,0,0,.10);
}

.mlab-ssr-plan-title{
  font-weight: 800;
  font-size: 1.05rem;
  margin-bottom: 10px;
}
.mlab-ssr-plan-prices{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.mlab-ssr-price{
  display:flex;
  align-items:baseline;
  gap:6px;
  font-weight: 700;
}
.mlab-ssr-price-amt{ font-size: 1.05rem; }
.mlab-ssr-price-suf{ font-size: .95rem; opacity:.8; font-weight:600; }
.mlab-ssr-muted{ opacity:.6; font-weight:600; }

.mlab-ssr-plan-badge{
  position:absolute;
  top: 12px;
  right: 12px;
  font-size: .75rem;
  font-weight: 800;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid #e5e5e5;
  opacity:.85;
}

/* Fun, varied accents per card (no inline colors needed) */
.mlab-ssr-plan-card[data-index="1"]{ background: #f7f7ff; }
.mlab-ssr-plan-card[data-index="2"]{ background: #f7fff9; }
.mlab-ssr-plan-card[data-index="3"]{ background: #fff7f7; }
.mlab-ssr-plan-card[data-index="4"]{ background: #fffdf3; }
.mlab-ssr-plan-card[data-index="5"]{ background: #f3fbff; }

/* Billing toggle */
.mlab-ssr-billing-toggle{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  padding: 10px 12px;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  margin: 10px 0 14px;
  background: #fff;
}
.mlab-ssr-billing-label{ font-weight: 800; margin-right: 4px; }
.mlab-ssr-toggle-opt{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid #e5e5e5;
  cursor:pointer;
}
.mlab-ssr-toggle-opt input{ width:auto; }
.mlab-ssr-help{
  display:block;
  width:100%;
  opacity:.75;
  margin-top:6px;
}

/* Buttons */
.mlab-ssr-btn{
  background: #111;
  color: #fff;
}
.mlab-ssr-btn:hover{ opacity:.92; }
.mlab-ssr-btn-secondary{
  background:#fff;
  color:#111;
  border:1px solid #111;
}