/* ==========================================================================
   Badge & Tag Design System — SMM Panel Service Badges
   ========================================================================== */

:root {
  /* Base Badge Properties */
  --badge-radius: 6px;
  --badge-padding: 3px 8px;
  --badge-font-size: 12px;
  --badge-font-weight: 600;
  --badge-line-height: 1.2;

  /* 1) NHÓM NỔI BẬT BÁN HÀNG */
  --badge-best-seller-text: #b91c1c;
  --badge-best-seller-bg: #fee2e2;
  --badge-best-seller-border: #fca5a5;

  --badge-promotion-text: #c2410c;
  --badge-promotion-bg: #ffedd5;
  --badge-promotion-border: #fdba74;

  --badge-recommend-text: #1d4ed8;
  --badge-recommend-bg: #dbeafe;
  --badge-recommend-border: #93c5fd;

  /* 2) NHÓM ĐẶC TÍNH DỊCH VỤ */
  --badge-owner-text: #6b21a8;
  --badge-owner-bg: #f3e8ff;
  --badge-owner-border: #d8b4fe;

  --badge-exclusive-text: #9d174d;
  --badge-exclusive-bg: #fce7f3;
  --badge-exclusive-border: #fbcfe8;

  --badge-provider-direct-text: #92400e;
  --badge-provider-direct-bg: #fef3c7;
  --badge-provider-direct-border: #fde68a;

  --badge-new-text: #047857;
  --badge-new-bg: #d1fae5;
  --badge-new-border: #6ee7b7;

  /* 3) NHÓM TỐC ĐỘ */
  --badge-instant-text: #0e7490;
  --badge-instant-bg: #cffaff;
  --badge-instant-border: #67e8f9;

  --badge-super-fast-text: #0f766e;
  --badge-super-fast-bg: #ccfbf1;
  --badge-super-fast-border: #5eead4;

  /* 4) NHÓM CHẤT LƯỢNG */
  --badge-real-text: #15803d;
  --badge-real-bg: #dcfce7;
  --badge-real-border: #86efac;

  --badge-lifetime-text: #a16207;
  --badge-lifetime-bg: #fef3c7; /* WCAG AA contrast ratio >= 4.5:1 */
  --badge-lifetime-border: #fde047;

  /* 5) NHÓM CHÍNH SÁCH / REFILL */
  --badge-refill-text: #475569;
  --badge-refill-bg: #f8fafc;
  --badge-refill-border: #cbd5e1;

  --badge-no-refill-text: #64748b;
  --badge-no-refill-bg: #f8fafc;
  --badge-no-refill-border: #cbd5e1;

  --badge-auto-refill-text: #5b21b6;
  --badge-auto-refill-bg: #f5f3ff;
  --badge-auto-refill-border: #ddd6fe;

  --badge-no-refund-text: #881337;
  --badge-no-refund-bg: #fff1f2;
  --badge-no-refund-border: #fecdd3;

  /* 6) NÚT HÀNH ĐỘNG */
  --badge-refill-btn-text: #3f6212;
  --badge-refill-btn-bg: #ecfccb;
  --badge-refill-btn-border: #bef264;
  --badge-refill-btn-hover-bg: #d9f99d;

  --badge-cancel-btn-text: #4c1d95;
  --badge-cancel-btn-bg: #f3e8ff;
  --badge-cancel-btn-border: #ddd6fe;
  --badge-cancel-btn-hover-bg: #e9d5ff;
}

/* Dark Mode Theme Variables */
[data-bs-theme="dark"],
html[data-bs-theme="dark"] {
  --badge-best-seller-text: #fca5a5;
  --badge-best-seller-bg: rgba(185, 28, 28, 0.25);
  --badge-best-seller-border: rgba(252, 165, 165, 0.4);

  --badge-promotion-text: #fed7aa;
  --badge-promotion-bg: rgba(194, 65, 12, 0.25);
  --badge-promotion-border: rgba(253, 186, 116, 0.4);

  --badge-recommend-text: #bfdbfe;
  --badge-recommend-bg: rgba(29, 78, 216, 0.25);
  --badge-recommend-border: rgba(147, 197, 253, 0.4);

  --badge-owner-text: #e9d5ff;
  --badge-owner-bg: rgba(107, 33, 168, 0.25);
  --badge-owner-border: rgba(216, 180, 254, 0.4);

  --badge-exclusive-text: #fce7f3;
  --badge-exclusive-bg: rgba(157, 23, 77, 0.25);
  --badge-exclusive-border: rgba(251, 207, 232, 0.4);

  --badge-provider-direct-text: #fef3c7;
  --badge-provider-direct-bg: rgba(146, 64, 14, 0.25);
  --badge-provider-direct-border: rgba(253, 230, 138, 0.4);

  --badge-new-text: #a7f3d0;
  --badge-new-bg: rgba(4, 120, 87, 0.25);
  --badge-new-border: rgba(110, 231, 183, 0.4);

  --badge-instant-text: #a5f3fc;
  --badge-instant-bg: rgba(14, 116, 144, 0.25);
  --badge-instant-border: rgba(103, 232, 249, 0.4);

  --badge-super-fast-text: #99f6e4;
  --badge-super-fast-bg: rgba(15, 118, 110, 0.25);
  --badge-super-fast-border: rgba(94, 234, 212, 0.4);

  --badge-real-text: #bbf7d0;
  --badge-real-bg: rgba(21, 128, 61, 0.25);
  --badge-real-border: rgba(134, 239, 172, 0.4);

  --badge-lifetime-text: #fef08a;
  --badge-lifetime-bg: rgba(161, 98, 7, 0.25);
  --badge-lifetime-border: rgba(253, 224, 71, 0.4);

  --badge-refill-text: #cbd5e1;
  --badge-refill-bg: rgba(71, 85, 105, 0.2);
  --badge-refill-border: rgba(203, 213, 225, 0.3);

  --badge-no-refill-text: #e2e8f0;
  --badge-no-refill-bg: rgba(71, 85, 105, 0.2);
  --badge-no-refill-border: rgba(203, 213, 225, 0.3);

  --badge-auto-refill-text: #ddd6fe;
  --badge-auto-refill-bg: rgba(91, 33, 182, 0.25);
  --badge-auto-refill-border: rgba(196, 181, 253, 0.4);

  --badge-no-refund-text: #fecdd3;
  --badge-no-refund-bg: rgba(136, 19, 55, 0.25);
  --badge-no-refund-border: rgba(254, 205, 211, 0.4);

  --badge-refill-btn-text: #d9f99d;
  --badge-refill-btn-bg: rgba(63, 98, 18, 0.35);
  --badge-refill-btn-border: rgba(190, 242, 100, 0.4);
  --badge-refill-btn-hover-bg: rgba(63, 98, 18, 0.55);

  --badge-cancel-btn-text: #e9d5ff;
  --badge-cancel-btn-bg: rgba(76, 29, 149, 0.35);
  --badge-cancel-btn-border: rgba(221, 214, 254, 0.4);
  --badge-cancel-btn-hover-bg: rgba(76, 29, 149, 0.55);
}

/* Base Component Rules */
.svc-tag-badge,
.badge-highlight,
.badge-attribute,
.badge-speed,
.badge-quality,
.badge-policy {
  display: inline-flex !important;
  align-items: center !important;
  font-size: var(--badge-font-size) !important;
  font-weight: var(--badge-font-weight) !important;
  line-height: var(--badge-line-height) !important;
  padding: var(--badge-padding) !important;
  border-radius: var(--badge-radius) !important;
  border: 1px solid transparent !important;
  letter-spacing: 0.1px !important;
  transition: all 0.15s ease-in-out !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  margin-top: 2px !important;
  margin-bottom: 2px !important;
}

/* GROUP 1: NHÓM NỔI BẬT BÁN HÀNG */
.svc-tag-best-seller,
.badge-highlight.is-best-seller {
  color: var(--badge-best-seller-text) !important;
  background-color: var(--badge-best-seller-bg) !important;
  border-color: var(--badge-best-seller-border) !important;
}

.svc-tag-promotion,
.badge-highlight.is-promotion {
  color: var(--badge-promotion-text) !important;
  background-color: var(--badge-promotion-bg) !important;
  border-color: var(--badge-promotion-border) !important;
}

.svc-tag-recommend,
.badge-highlight.is-recommend {
  color: var(--badge-recommend-text) !important;
  background-color: var(--badge-recommend-bg) !important;
  border-color: var(--badge-recommend-border) !important;
}

/* GROUP 2: NHÓM ĐẶC TÍNH DỊCH VỤ */
.svc-tag-owner,
.badge-attribute.is-owner {
  color: var(--badge-owner-text) !important;
  background-color: var(--badge-owner-bg) !important;
  border-color: var(--badge-owner-border) !important;
}

.svc-tag-exclusive,
.badge-attribute.is-exclusive {
  color: var(--badge-exclusive-text) !important;
  background-color: var(--badge-exclusive-bg) !important;
  border-color: var(--badge-exclusive-border) !important;
}

.svc-tag-provider-direct,
.badge-attribute.is-provider-direct {
  color: var(--badge-provider-direct-text) !important;
  background-color: var(--badge-provider-direct-bg) !important;
  border-color: var(--badge-provider-direct-border) !important;
}

.svc-tag-new,
.badge-attribute.is-new {
  color: var(--badge-new-text) !important;
  background-color: var(--badge-new-bg) !important;
  border-color: var(--badge-new-border) !important;
}

/* GROUP 3: NHÓM TỐC ĐỘ */
.svc-tag-instant,
.badge-speed.is-instant {
  color: var(--badge-instant-text) !important;
  background-color: var(--badge-instant-bg) !important;
  border-color: var(--badge-instant-border) !important;
}

.svc-tag-super-fast,
.badge-speed.is-super-fast {
  color: var(--badge-super-fast-text) !important;
  background-color: var(--badge-super-fast-bg) !important;
  border-color: var(--badge-super-fast-border) !important;
}

/* GROUP 4: NHÓM CHẤT LƯỢNG */
.svc-tag-real,
.badge-quality.is-real {
  color: var(--badge-real-text) !important;
  background-color: var(--badge-real-bg) !important;
  border-color: var(--badge-real-border) !important;
}

.svc-tag-lifetime,
.badge-quality.is-lifetime {
  color: var(--badge-lifetime-text) !important;
  background-color: var(--badge-lifetime-bg) !important;
  border-color: var(--badge-lifetime-border) !important;
}

/* GROUP 5: NHÓM CHÍNH SÁCH / REFILL */
.svc-tag-refill-7,
.svc-tag-refill-15,
.svc-tag-refill-30,
.svc-tag-refill-60,
.svc-tag-refill-90,
.svc-tag-refill-365,
.badge-policy.is-refill-days {
  color: var(--badge-refill-text) !important;
  background-color: var(--badge-refill-bg) !important;
  border-color: var(--badge-refill-border) !important;
}

.svc-tag-no-refill,
.badge-policy.is-no-refill {
  color: var(--badge-no-refill-text) !important;
  background-color: var(--badge-no-refill-bg) !important;
  border-color: var(--badge-no-refill-border) !important;
}

.svc-tag-auto-refill,
.badge-policy.is-auto-refill {
  color: var(--badge-auto-refill-text) !important;
  background-color: var(--badge-auto-refill-bg) !important;
  border-color: var(--badge-auto-refill-border) !important;
}

.svc-tag-no-refund,
.badge-policy.is-no-refund {
  color: var(--badge-no-refund-text) !important;
  background-color: var(--badge-no-refund-bg) !important;
  border-color: var(--badge-no-refund-border) !important;
}

/* GROUP 6: NÚT HÀNH ĐỘNG (Real Action Buttons) */
.badge-action,
.svc-tag-refill-button,
.svc-tag-cancel-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: var(--badge-font-size) !important;
  font-weight: 600 !important;
  line-height: var(--badge-line-height) !important;
  padding: var(--badge-padding) !important;
  border-radius: var(--badge-radius) !important;
  border: 1px solid transparent !important;
  cursor: pointer !important;
  user-select: none !important;
  transition: all 0.15s ease-in-out !important;
  margin-top: 2px !important;
  margin-bottom: 2px !important;
}

.svc-tag-refill-button,
.badge-action.is-refill-button {
  color: var(--badge-refill-btn-text) !important;
  background-color: var(--badge-refill-btn-bg) !important;
  border-color: var(--badge-refill-btn-border) !important;
}

.svc-tag-refill-button:hover,
.badge-action.is-refill-button:hover {
  background-color: var(--badge-refill-btn-hover-bg) !important;
  transform: translateY(-1px) !important;
}

.svc-tag-cancel-button,
.badge-action.is-cancel-button {
  color: var(--badge-cancel-btn-text) !important;
  background-color: var(--badge-cancel-btn-bg) !important;
  border-color: var(--badge-cancel-btn-border) !important;
}

.svc-tag-cancel-button:hover,
.badge-action.is-cancel-button:hover {
  background-color: var(--badge-cancel-btn-hover-bg) !important;
  transform: translateY(-1px) !important;
}