.qrlink-shop-grid{
  display:grid;
  gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  margin:20px 0
}
.qrlink-card{
  border:1px solid #e5e5e5;
  border-radius:10px;
  background:#fff;
  display:flex;
  flex-direction:column
}
.qrlink-card__header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 14px 0
}
.qrlink-card__title{
  margin:0;
  font-size:18px
}
.qrlink-badge{
  display:inline-block;
  padding:2px 8px;
  font-size:12px;
  border-radius:999px;
  border:1px solid #e2e2e2;
  background:#f6f7f7
}
.qrlink-badge--current{
  background:#ecf8ec;
  border-color:#cfe8cf;
  color:#2e7d32
}
.qrlink-card__price{
  font-size:22px;
  font-weight:700;
  padding:6px 14px
}
.qrlink-card__price small{
  font-size:12px;
  color:#777;
  margin-left:6px
}
.qrlink-card__limit{
  padding:0 14px 6px;
  color:#555
}
.qrlink-card__features{
  margin:0 0 10px 22px
}
.qrlink-card__footer{
  padding:12px 14px 16px;
  margin-top:auto
}
.qrlink-btn{
  display:inline-block;
  padding:10px 14px;
  border-radius:6px;
  background:#2e7d32;
  color:#fff;
  text-decoration:none;
  border:none;
  cursor:pointer
}
.qrlink-btn:hover{ background:#256a29; color:#fff }
.qrlink-btn--current{
  background:#9e9e9e;
  cursor:default
}
.qrlink-btn.is-busy{
  opacity:.7;
  pointer-events:none
}
.qrlink-muted{
  color:#777;
  font-size:12px;
  margin-top:6px
}

/* ===== Toggle Mensual / Anual (contraste alto) ===== */
.qrlink-shop-grid{
  --ql-bg: #f0f2f4;              /* fondo del toggle */
  --ql-border: #d0d7de;          /* borde del toggle */
  --ql-text: #1d2327;            /* texto normal */
  --ql-accent: #0073aa;          /* azul WP para seleccionado */
  --ql-accent-hover: #00669b;    /* hover seleccionado */
  --ql-contrast: #ffffff;        /* texto sobre el azul */
  --ql-disabled: #8c8f94;        /* opción deshabilitada */
}

.qrlink-shop-grid .qrlink-toggle{
  display:flex;
  gap:.5rem;
  background: var(--ql-bg) !important;
  border: 1px solid var(--ql-border) !important;
  border-radius: 8px;
  padding: 4px;
  margin: 12px 0 8px;
}

.qrlink-shop-grid .qrlink-toggle__option{
  flex:1;
  border: 0 !important;
  background: transparent !important;
  padding: 8px 10px;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  color: var(--ql-text) !important;
  box-shadow: none !important;
}

.qrlink-shop-grid .qrlink-toggle__option:hover{
  background: rgba(0,0,0,.05) !important;
}

.qrlink-shop-grid .qrlink-toggle__option[aria-selected="true"]{
  background: var(--ql-accent) !important;
  color: var(--ql-contrast) !important;
}

.qrlink-shop-grid .qrlink-toggle__option[aria-selected="true"]:hover{
  background: var(--ql-accent-hover) !important;
}

.qrlink-shop-grid .qrlink-toggle__option[disabled]{
  opacity: .6;
  color: var(--ql-disabled) !important;
  cursor: not-allowed !important;
  background: transparent !important;
}

.qrlink-shop-grid .qrlink-toggle__option:focus-visible{
  outline: 2px solid var(--ql-accent);
  outline-offset: 2px;
}

/* Badge de -20% con buen contraste sobre azul seleccionado */
.qrlink-shop-grid .qrlink-toggle__option[aria-selected="true"] .qrlink-badge--sale{
  background: rgba(255,255,255,.2) !important;
  border: 1px solid rgba(255,255,255,.35) !important;
  color: #fff !important;
}

.qrlink-badge--sale{
  background:#e52;
  color:#fff;
  font-size:.8em;
  padding:.1em .4em;
  border-radius:4px;
  margin-left:.35em;
}