/* HQClouds custom theme on top of Tabler (Bootstrap 5).
   Own colors, server cards, pricing blocks, status badges, empty states, dark/light. */

:root {
  --hq-brand-1: #2dd4bf;   /* teal */
  --hq-brand-2: #6366f1;   /* indigo */
  --hq-brand-3: #0ea5e9;   /* sky */
  --hq-accent: #22d3ee;
  --hq-ok: #16a34a;
  --hq-warn: #d97706;
  --hq-danger: #dc2626;
  --hq-radius: 16px;
  --tblr-primary: #6366f1;
  --tblr-primary-rgb: 99, 102, 241;
}

html[data-bs-theme="dark"] {
  --hq-bg: #0b1020;
  --hq-bg-soft: #121a31;
  --hq-card: #131c34;
  --hq-border: #20294a;
  --hq-text: #e8ecf4;
  --hq-muted: #93a0c0;
}
html[data-bs-theme="light"] {
  --hq-bg: #f6f8fc;
  --hq-bg-soft: #eef2f9;
  --hq-card: #ffffff;
  --hq-border: #e3e8f2;
  --hq-text: #0c1428;
  --hq-muted: #5b6a86;
}

body.hq {
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(99,102,241,.18), transparent 60%),
    radial-gradient(1000px 500px at 110% 0%, rgba(45,212,191,.15), transparent 55%),
    var(--hq-bg);
  color: var(--hq-text);
  min-height: 100vh;
}

/* Brand / nav */
.hq-navbar {
  background: color-mix(in srgb, var(--hq-bg-soft) 78%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hq-border);
}
.hq-logo {
  font-weight: 800; letter-spacing: -.02em; font-size: 1.25rem;
  background: linear-gradient(90deg, var(--hq-brand-1), var(--hq-brand-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hq-navbar a.hq-link { color: var(--hq-muted); text-decoration: none; font-weight: 500; }
.hq-navbar a.hq-link:hover { color: var(--hq-text); }

/* Hero */
.hq-hero { padding: 72px 0 32px; }
.hq-hero h1 {
  font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.05;
}
.hq-hero .hq-grad {
  background: linear-gradient(90deg, var(--hq-brand-1), var(--hq-brand-3), var(--hq-brand-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hq-hero p.lead { color: var(--hq-muted); max-width: 640px; font-size: 1.1rem; }
.hq-chip {
  display: inline-flex; gap: .4rem; align-items: center; font-size: .8rem; font-weight: 600;
  color: var(--hq-text); background: var(--hq-bg-soft); border: 1px solid var(--hq-border);
  padding: .35rem .7rem; border-radius: 999px;
}

/* Server / pricing cards */
.hq-card {
  background: linear-gradient(180deg, color-mix(in srgb, var(--hq-card) 92%, var(--hq-brand-2) 8%), var(--hq-card));
  border: 1px solid var(--hq-border); border-radius: var(--hq-radius);
  padding: 22px; height: 100%; position: relative; overflow: hidden;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.hq-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--hq-brand-2) 55%, var(--hq-border)); box-shadow: 0 18px 40px -24px rgba(99,102,241,.7); }
.hq-card .hq-name { font-weight: 700; font-size: 1.15rem; }
.hq-card .hq-region { color: var(--hq-muted); font-size: .85rem; }
.hq-price { font-size: 2rem; font-weight: 800; letter-spacing: -.02em; }
.hq-price small { font-size: .9rem; font-weight: 600; color: var(--hq-muted); }
.hq-specs { list-style: none; padding: 0; margin: 14px 0; color: var(--hq-muted); }
.hq-specs li { padding: 4px 0; display: flex; gap: .5rem; align-items: center; }
.hq-specs li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--hq-brand-1); }
.hq-btn {
  display: inline-block; width: 100%; text-align: center; font-weight: 700; border: 0; border-radius: 12px;
  padding: .7rem 1rem; color: #06121f; cursor: pointer;
  background: linear-gradient(90deg, var(--hq-brand-1), var(--hq-brand-3));
}
.hq-btn:hover { filter: brightness(1.06); color: #06121f; }
.hq-card.hq-featured { border-color: color-mix(in srgb, var(--hq-brand-2) 60%, var(--hq-border)); }
.hq-card.hq-featured::after {
  content: "POPULAR"; position: absolute; top: 14px; right: -34px; transform: rotate(45deg);
  background: linear-gradient(90deg, var(--hq-brand-1), var(--hq-brand-2)); color: #06121f;
  font-size: .65rem; font-weight: 800; padding: 3px 40px;
}

/* Status badges */
.hq-badge { font-size: .72rem; font-weight: 700; padding: .25rem .6rem; border-radius: 999px; border: 1px solid transparent; }
.hq-badge.is-active { color: #052e14; background: #4ade80; }
.hq-badge.is-creating { color: #06121f; background: var(--hq-accent); }
.hq-badge.is-suspended { color: #3b1206; background: var(--hq-warn); }
.hq-badge.is-error { color: #fff; background: var(--hq-danger); }
.hq-badge.is-expired { color: #fff; background: #64748b; }

/* Empty state */
.hq-empty {
  text-align: center; padding: 56px 20px; border: 1px dashed var(--hq-border);
  border-radius: var(--hq-radius); background: var(--hq-bg-soft); color: var(--hq-muted);
}
.hq-empty .hq-emoji { font-size: 2.4rem; }

/* Footer */
.hq-footer { color: var(--hq-muted); border-top: 1px solid var(--hq-border); margin-top: 48px; padding: 24px 0; }

/* Theme toggle */
.hq-toggle { background: var(--hq-bg-soft); border: 1px solid var(--hq-border); color: var(--hq-text); border-radius: 10px; padding: .35rem .6rem; cursor: pointer; }