/* ============================================================
   CHERRY HOSTING — BILLING BRIDGE
   Maps Paymenter / Melon Tailwind components to billing.css look.
   Loaded AFTER billing.css.
   ============================================================ */

:root,
html:root {
  --ch-pink: #ff5c93;
  --ch-rose: #ff2e6e;
  --ch-deep: #d81b58;
  --ch-blush: #ffd3e3;
  --ch-petal: #ffb3cd;
  --ch-text: #fff5f9;
  --ch-dim: #ead0dc;
  --ch-faint: #c9a6b7;
  --ch-glass: rgba(30, 10, 22, 0.50);
  --ch-glass-2: rgba(24, 8, 18, 0.74);
  --ch-glass-solid: #1d0a16;
  --ch-line: rgba(255, 196, 219, 0.14);
  --ch-line-2: rgba(255, 196, 219, 0.26);
  --ch-radius: 14px;

  /* legacy token names used across paymenter templates -> cherry */
  --mh-green: var(--ch-pink);
  --mh-green-2: var(--ch-deep);
  --mh-pink: var(--ch-petal);
  --mh-text: var(--ch-text);
  --mh-dim: var(--ch-dim);
  --mh-line: var(--ch-line);
  --mh-line-2: var(--ch-line-2);
  --mh-glass: var(--ch-glass);
  --mh-glass-2: var(--ch-glass-2);
  --mh-panel: rgba(24, 8, 18, 0.74);
  --mh-panel-2: rgba(30, 10, 22, 0.50);
  --mh-blur: 14px;
  --mh-bg: #12060d;
  --mh-amber: #fcd581;
}

/* ── Global body background (cherry blossom scene) ── */
body.cherry-billing {
  background: #12060d !important;
  color: #fff5f9 !important;
  font-family: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif !important;
  min-height: 100vh;
}
body.cherry-billing::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(18,6,13,.42) 0%, rgba(18,6,13,.56) 45%, rgba(14,3,10,.78) 100%),
    url("/cherry/cherry-bg-soft.jpg") center / cover no-repeat;
}

/* ── Override font-display to Geist ── */
.cherry-billing .font-display,
.cherry-billing [class*="font-display"] {
  font-family: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif !important;
  letter-spacing: -0.025em;
}

/* ── Melon cards -> Cherry frosted glass ── */
.cherry-billing .mh-card,
.cherry-billing .card {
  background: rgba(30, 10, 22, .50) !important;
  border: 1px solid rgba(255, 196, 219, .14) !important;
  border-radius: 14px !important;
  box-shadow: 0 18px 44px -26px rgba(10, 0, 6, .85), inset 0 1px 0 rgba(255, 255, 255, .05) !important;
  backdrop-filter: blur(14px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
}
.cherry-billing .mh-card:hover,
.cherry-billing .card:hover {
  border-color: rgba(255, 196, 219, .26) !important;
}

/* ── Primary Buttons ── */
.cherry-billing .mh-btn-primary,
.cherry-billing .mh-btn.mh-btn-primary,
.cherry-billing button[class*="bg-primary"],
.cherry-billing a[class*="bg-primary"],
.cherry-billing .btn-primary {
  background: linear-gradient(135deg, #e0225c 0%, #c2144a 100%) !important;
  color: #fff !important;
  box-shadow: 0 8px 22px -12px rgba(255, 51, 102, .8), inset 0 1px 0 rgba(255, 255, 255, .18) !important;
  border: 1px solid transparent !important;
  border-radius: 9px !important;
  font-weight: 550 !important;
  transition: all .15s ease !important;
}
.cherry-billing .mh-btn-primary:hover,
.cherry-billing .mh-btn.mh-btn-primary:hover,
.cherry-billing button[class*="bg-primary"]:hover,
.cherry-billing a[class*="bg-primary"]:hover,
.cherry-billing .btn-primary:hover {
  background: linear-gradient(135deg, #ea2d66 0%, #cf1a52 100%) !important;
  transform: translateY(-1px);
}

/* ── Ghost / Secondary Buttons ── */
.cherry-billing .mh-btn-ghost,
.cherry-billing .mh-btn.mh-btn-ghost,
.cherry-billing .btn-secondary,
.cherry-billing button[class*="bg-secondary"],
.cherry-billing a[class*="bg-secondary"] {
  background: rgba(255, 255, 255, .045) !important;
  color: #fff5f9 !important;
  border: 1px solid rgba(255, 196, 219, .26) !important;
  border-radius: 9px !important;
  font-weight: 550 !important;
  transition: all .15s ease !important;
}
.cherry-billing .mh-btn-ghost:hover,
.cherry-billing .mh-btn.mh-btn-ghost:hover,
.cherry-billing .btn-secondary:hover,
.cherry-billing button[class*="bg-secondary"]:hover,
.cherry-billing a[class*="bg-secondary"]:hover {
  background: rgba(255, 255, 255, .08) !important;
  border-color: rgba(255, 196, 219, .4) !important;
}

/* ── Inputs / Selects / Forms ── */
.cherry-billing input[type="text"],
.cherry-billing input[type="email"],
.cherry-billing input[type="password"],
.cherry-billing input[type="search"],
.cherry-billing input[type="number"],
.cherry-billing input[type="url"],
.cherry-billing input[type="tel"],
.cherry-billing textarea,
.cherry-billing select {
  background: rgba(10, 2, 7, .50) !important;
  border: 1px solid rgba(255, 196, 219, .26) !important;
  border-radius: 9px !important;
  color: #fff5f9 !important;
  font-family: "Geist", ui-sans-serif, system-ui, sans-serif !important;
  padding: 8px 12px !important;
}
.cherry-billing input:focus,
.cherry-billing textarea:focus,
.cherry-billing select:focus {
  border-color: #ff3366 !important;
  box-shadow: 0 0 0 3px rgba(255, 51, 102, .14) !important;
  outline: none !important;
}
.cherry-billing select option {
  background: #1d0a16 !important;
  color: #fff5f9 !important;
}

/* ── Sidebar rail ── */
.cherry-billing .mh-rail {
  background: rgba(18, 5, 13, .62) !important;
  border-right: 1px solid rgba(255, 196, 219, .14) !important;
  backdrop-filter: blur(14px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
}
.cherry-billing .mh-rail-link {
  border-radius: 7px !important;
  transition: all .15s ease !important;
}
.cherry-billing .mh-rail-link:hover {
  background: rgba(255, 255, 255, .045) !important;
}
.cherry-billing .mh-rail-link.is-active {
  background: rgba(255, 51, 102, .14) !important;
  color: #ffc2d6 !important;
}

/* ── Topbar (client area) ── */
.cherry-billing header[class*="sticky"] {
  background: rgba(18, 5, 13, .62) !important;
  border-bottom: 1px solid rgba(255, 196, 219, .14) !important;
  backdrop-filter: blur(14px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
}

/* ── Public floating nav ── */
.cherry-billing nav[class*="fixed"][class*="z-40"] > div {
  background: rgba(16, 9, 14, 0.72) !important;
  border: 1px solid rgba(255, 196, 219, 0.26) !important;
  backdrop-filter: blur(18px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
  box-shadow: 0 20px 50px -25px rgba(0, 0, 0, 0.8) !important;
}

/* ── Pills & Badges ── */
.cherry-billing .mh-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: capitalize !important;
  width: fit-content !important;
}
.cherry-billing .mh-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.cherry-billing .mh-pill-ok {
  color: #7ee2a8 !important;
  background: rgba(52, 211, 120, .14) !important;
}
.cherry-billing .mh-pill-warn {
  color: #fcd581 !important;
  background: rgba(245, 158, 11, .16) !important;
}
.cherry-billing .mh-pill-off {
  color: #ffaaa5 !important;
  background: rgba(248, 81, 73, .16) !important;
}
.cherry-billing .mh-pill-muted {
  color: #dcc7d1 !important;
  background: rgba(255, 255, 255, .09) !important;
}

.cherry-billing .badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  text-transform: capitalize;
}
.cherry-billing .badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.cherry-billing .b-active, .cherry-billing .b-paid, .cherry-billing .b-answered { color: #7ee2a8; background: rgba(52, 211, 120, .14); }
.cherry-billing .b-pending, .cherry-billing .b-unpaid { color: #fcd581; background: rgba(245, 158, 11, .16); }
.cherry-billing .b-closed, .cherry-billing .b-cancelled, .cherry-billing .b-suspended { color: #dcc7d1; background: rgba(255, 255, 255, .09); }
.cherry-billing .b-overdue { color: #ffaaa5; background: rgba(248, 81, 73, .16); }

/* ── Status Colors ── */
.cherry-billing .text-green-500,
.cherry-billing .text-green-600 { color: #7ee2a8 !important; }
.cherry-billing .text-orange-500,
.cherry-billing .text-yellow-600 { color: #fcd581 !important; }
.cherry-billing .text-red-500,
.cherry-billing .text-red-600 { color: #ffaaa5 !important; }

/* ── Background contexts ── */
.cherry-billing .bg-background-secondary,
.cherry-billing .bg-primary-800,
.cherry-billing [class*="bg-primary-800"] {
  background: rgba(24, 8, 18, .74) !important;
  border-radius: 14px !important;
}

/* ── Tables ── */
.cherry-billing table {
  border-collapse: collapse;
  width: 100%;
}
.cherry-billing thead tr {
  background: rgba(255, 255, 255, .045) !important;
}
.cherry-billing th {
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  font-size: 12px !important;
  color: #c9a6b7 !important;
  font-weight: 600 !important;
  padding: 10px 14px !important;
}
.cherry-billing td {
  border-bottom: 1px solid rgba(255, 196, 219, .14) !important;
  padding: 12px 14px !important;
}
.cherry-billing tbody tr:hover td {
  background: rgba(255, 255, 255, .03) !important;
}
.cherry-billing tr:last-child td {
  border-bottom: 0 !important;
}

/* ── Eyebrow / Dim text ── */
.cherry-billing .mh-dim {
  color: #ead0dc !important;
}
.cherry-billing .mh-eyebrow {
  font-family: "Geist", ui-sans-serif, system-ui, sans-serif !important;
  color: #ffb3cd !important;
  text-transform: uppercase !important;
  letter-spacing: .14em !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

/* ── Product cards in store ── */
.cherry-billing .mh-card.mh-hover {
  transition: border-color .15s ease, transform .15s ease !important;
}
.cherry-billing .mh-card.mh-hover:hover {
  border-color: rgba(255, 196, 219, .26) !important;
}

/* ── Footer ── */
.cherry-billing footer {
  border-color: rgba(255, 196, 219, .14) !important;
}

/* ── Auth pages (login/register) ── */
.cherry-billing .mh-card.\!rounded-\[2rem\],
.cherry-billing .mh-card[class*="rounded-[2rem]"] {
  background: rgba(30, 10, 22, .50) !important;
  backdrop-filter: blur(14px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
}

/* ── Scrollbars ── */
.cherry-billing ::-webkit-scrollbar { width: 8px; height: 8px; }
.cherry-billing ::-webkit-scrollbar-track { background: transparent; }
.cherry-billing ::-webkit-scrollbar-thumb { background: rgba(255, 196, 219, .2); border-radius: 4px; }
.cherry-billing ::-webkit-scrollbar-thumb:hover { background: rgba(255, 196, 219, .35); }

/* ── Accent color override ── */
.cherry-billing [style*="--mh-green"] {
  --mh-green: #ff6f9c !important;
}

/* ── Checkboxes ── */
.cherry-billing input[type="checkbox"] {
  accent-color: #ff3366 !important;
}

/* ── Remove conflicting cherry-theme.css hero if present ── */
.cherry-billing .cherry-hero { display: none !important; }