/*
 * Multi Market Pro - Frontend discount selector
 * Theme-friendly: minimal CSS + scoped variables
 */

:root{
  --mmpro-discount-accent: #2d74ff;
  --mmpro-discount-selected-bg: rgba(45,116,255,.06);
  --mmpro-discount-popular-bg: rgba(255,177,0,.12);
}

.mmpro-discount-box{
  margin:10px 0;
  padding:6px;
  border:1px solid rgba(0,0,0,.10);
  border-radius:12px;
  max-width:720px;
}

.mmpro-discount-box__title{
  font-size:14px;
  font-weight:700;
  margin-bottom:8px;
  display:flex;
  align-items:center;
  gap:8px;
}

.mmpro-tier-grid{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

/* Thinner cards */
.mmpro-tier-card{
  flex:1 1 150px;
  min-width:140px;
  position:relative;
  border:1px solid rgba(0,0,0,.10);
  border-radius:12px;
  padding:6px;
  cursor:pointer;
  user-select:none;
  background:#fff;
  transition: border-color .12s ease, box-shadow .12s ease, background-color .12s ease;
}

.mmpro-tier-card:hover{border-color:rgba(0,0,0,.22)}

.mmpro-tier-card input.mmpro-tier-radio{position:absolute;opacity:0;pointer-events:none}

/* Selected state: bold + accent */
.mmpro-tier-card.is-selected{
  border-color: var(--mmpro-discount-accent);
  box-shadow: 0 0 0 2px rgba(45,116,255,.18);
  background: var(--mmpro-discount-selected-bg);
}

.mmpro-tier-card.is-selected .mmpro-tier-card__qty,
.mmpro-tier-card.is-selected .mmpro-new-price{
  font-weight:800;
}

.mmpro-tier-card.is-popular{
  border-color:rgba(0,0,0,.18);
}

.mmpro-tier-card.is-popular.is-selected{
  box-shadow: 0 0 0 2px rgba(255,177,0,.25);
}

.mmpro-tier-card__top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px}
.mmpro-tier-card__qty{font-size:13px;font-weight:700}
.mmpro-tier-card__offer{font-size:12px;opacity:.88;min-height:16px;line-height:1.2}
.mmpro-tier-card__prices{margin-top:6px;display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.mmpro-old-price{opacity:.55;font-size:12px}
.mmpro-new-price{font-weight:800;font-size:13px}

.mmpro-badge{
  display:inline-block;
  padding:2px 8px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  line-height:18px;
  border:1px solid rgba(0,0,0,.18);
  background: var(--mmpro-discount-popular-bg);
}