/* ==========================================================================
   Signet Hosting — WHMCS Template Styles
   Design tokens, component overrides, and custom utilities.
   Works alongside Tailwind CDN (configured in head.tpl).
   ========================================================================== */

/* ---------- Design Tokens (from React app index.css) ---------- */
:root {
  --background: 0 0% 100%;
  --foreground: 0 0% 12%;
  --card: 0 0% 100%;
  --card-foreground: 0 0% 12%;
  --popover: 0 0% 100%;
  --popover-foreground: 0 0% 12%;
  --primary: 0 78% 50%;
  --primary-foreground: 0 0% 100%;
  --secondary: 0 0% 92%;
  --secondary-foreground: 0 0% 12%;
  --muted: 0 0% 96%;
  --muted-foreground: 0 0% 45%;
  --accent: 0 0% 96%;
  --accent-foreground: 0 0% 12%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 0 0% 100%;
  --border: 0 0% 90%;
  --input: 0 0% 90%;
  --ring: 0 78% 50%;
  --radius: 0.5rem;
  --silver: 0 0% 75%;
  --silver-light: 0 0% 92%;
  --silver-dark: 0 0% 40%;
  --cloud-1: 204 100% 96%;
  --cloud-2: 204 80% 93%;
  --cloud-3: 204 60% 97%;
  --dark: 220 20% 14%;
  --dark-foreground: 0 0% 98%;
}

.dark {
  --background: 220 20% 10%;
  --foreground: 0 0% 98%;
  --card: 220 20% 14%;
  --card-foreground: 0 0% 98%;
  --popover: 220 20% 14%;
  --popover-foreground: 0 0% 98%;
  --primary: 0 78% 55%;
  --primary-foreground: 0 0% 100%;
  --secondary: 220 15% 20%;
  --secondary-foreground: 0 0% 98%;
  --muted: 220 15% 20%;
  --muted-foreground: 0 0% 65%;
  --accent: 220 15% 20%;
  --accent-foreground: 0 0% 98%;
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 0 0% 98%;
  --border: 220 15% 25%;
  --input: 220 15% 25%;
  --ring: 0 78% 55%;
  --cloud-1: 220 40% 12%;
  --cloud-2: 225 35% 15%;
  --cloud-3: 215 30% 10%;
}

/* ---------- Base ---------- */
* {
  border-color: hsl(var(--border));
}

body {
  font-family: 'Inter', system-ui, sans-serif;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  letter-spacing: -0.025em;
}

a {
  color: hsl(var(--primary));
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* ---------- Float Animations ---------- */
@keyframes float-slow {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}

@keyframes float-medium {
  0%, 100% { transform: translateY(0px) translateX(0px); }
  50% { transform: translateY(-15px) translateX(10px); }
}

@keyframes float-fast {
  0%, 100% { transform: translateY(0px) translateX(0px); }
  50% { transform: translateY(-10px) translateX(-8px); }
}

.animate-float-slow { animation: float-slow 8s ease-in-out infinite; }
.animate-float-medium { animation: float-medium 6s ease-in-out infinite; }
.animate-float-fast { animation: float-fast 7s ease-in-out infinite; }

/* ---------- Button Variants ---------- */
.btn-hero {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  font-weight: 600;
  padding: 0.625rem 1.5rem;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: background 0.15s;
}

.btn-hero:hover {
  background: hsl(var(--primary) / 0.9);
  text-decoration: none;
  color: hsl(var(--primary-foreground));
}

.btn-hero-lg {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  font-weight: 600;
  padding: 0.75rem 2rem;
  font-size: 1rem;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: background 0.15s;
}

.btn-hero-lg:hover {
  background: hsl(var(--primary) / 0.9);
  text-decoration: none;
  color: hsl(var(--primary-foreground));
}

.btn-hero-outline {
  background: transparent;
  color: hsl(var(--foreground));
  font-weight: 600;
  padding: 0.625rem 1.5rem;
  border-radius: var(--radius);
  border: 1px solid hsl(var(--border));
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.15s;
}

.btn-hero-outline:hover {
  background: hsl(var(--accent));
  text-decoration: none;
}

.btn-hero-dark {
  background: hsl(var(--dark));
  color: hsl(var(--dark-foreground));
  font-weight: 600;
  padding: 0.625rem 1.5rem;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: background 0.15s;
}

.btn-hero-dark:hover {
  background: hsl(var(--dark) / 0.85);
  text-decoration: none;
  color: hsl(var(--dark-foreground));
}

.btn-hero-outline-dark {
  background: transparent;
  color: hsl(var(--foreground));
  font-weight: 600;
  padding: 0.75rem 2rem;
  font-size: 1rem;
  border-radius: var(--radius);
  border: 1px solid hsl(var(--border));
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.15s;
}

.btn-hero-outline-dark:hover {
  background: hsl(var(--accent));
  color: hsl(var(--foreground));
  text-decoration: none;
}

/* ---------- Form Inputs (WHMCS overrides) ---------- */
.signet-input {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: hsl(var(--foreground));
  background: hsl(var(--background));
  border: 1px solid hsl(var(--input));
  border-radius: var(--radius);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.signet-input:focus {
  border-color: hsl(var(--ring));
  outline: none;
  box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2);
}

.signet-input::placeholder {
  color: hsl(var(--muted-foreground));
}

.signet-select {
  display: block;
  width: 100%;
  padding: 0.5rem 2rem 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: hsl(var(--foreground));
  background: hsl(var(--background)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2 4 4 4 4-4'/%3E%3C/svg%3E") no-repeat right 0.75rem center;
  background-size: 12px;
  border: 1px solid hsl(var(--input));
  border-radius: var(--radius);
  appearance: none;
}

.signet-select:focus {
  border-color: hsl(var(--ring));
  outline: none;
  box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2);
}

.signet-textarea {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: hsl(var(--foreground));
  background: hsl(var(--background));
  border: 1px solid hsl(var(--input));
  border-radius: var(--radius);
  resize: vertical;
}

.signet-textarea:focus {
  border-color: hsl(var(--ring));
  outline: none;
  box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2);
}

.signet-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(var(--foreground));
  margin-bottom: 0.375rem;
}

/* ---------- Card ---------- */
.signet-card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 0.75rem;
  overflow: hidden;
}

.signet-card-body {
  padding: 1.5rem;
}

.signet-card:hover {
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

/* ---------- Alert / Flash Message ---------- */
.signet-alert {
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  font-size: 0.875rem;
  margin-bottom: 1rem;
}

.signet-alert-info {
  background: hsl(204 100% 96%);
  color: hsl(204 80% 30%);
  border: 1px solid hsl(204 80% 85%);
}

.signet-alert-success {
  background: hsl(142 76% 96%);
  color: hsl(142 60% 25%);
  border: 1px solid hsl(142 60% 80%);
}

.signet-alert-warning {
  background: hsl(45 100% 96%);
  color: hsl(45 80% 25%);
  border: 1px solid hsl(45 80% 80%);
}

.signet-alert-danger {
  background: hsl(0 84% 96%);
  color: hsl(0 60% 35%);
  border: 1px solid hsl(0 60% 85%);
}

/* Alert dark mode */
.dark .signet-alert-info    { background: hsl(204 40% 15%); color: hsl(204 80% 75%); border-color: hsl(204 50% 25%); }
.dark .signet-alert-success { background: hsl(142 40% 12%); color: hsl(142 60% 65%); border-color: hsl(142 50% 20%); }
.dark .signet-alert-warning { background: hsl(45 50% 12%);  color: hsl(45 80% 70%);  border-color: hsl(45 60% 25%); }
.dark .signet-alert-danger  { background: hsl(0 50% 15%);   color: hsl(0 70% 70%);   border-color: hsl(0 50% 25%); }

/* ---------- Badge ---------- */
.signet-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.125rem 0.625rem;
  border-radius: 9999px;
}

/* ---------- Sidebar ---------- */
.signet-sidebar .sidebar-panel {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 0.75rem;
  overflow: hidden;
  margin-bottom: 1rem;
}

.signet-sidebar .sidebar-header {
  padding: 0.75rem 1rem;
  font-weight: 700;
  font-size: 0.875rem;
  border-bottom: 1px solid hsl(var(--border));
  background: hsl(var(--muted) / 0.3);
}

.signet-sidebar .sidebar-link {
  display: block;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
  border-bottom: 1px solid hsl(var(--border));
  transition: all 0.15s;
}

.signet-sidebar .sidebar-link:last-child {
  border-bottom: none;
}

.signet-sidebar .sidebar-link:hover,
.signet-sidebar .sidebar-link.active {
  color: hsl(var(--primary));
  background: hsl(var(--primary) / 0.05);
  text-decoration: none;
}

/* ---------- Table ---------- */
.signet-table {
  width: 100%;
  font-size: 0.875rem;
  border-collapse: collapse;
}

.signet-table thead tr {
  background: hsl(var(--muted) / 0.5);
  text-align: left;
}

.signet-table th {
  padding: 0.75rem 1.25rem;
  font-weight: 600;
  color: hsl(var(--foreground));
}

.signet-table td {
  padding: 0.75rem 1.25rem;
  border-top: 1px solid hsl(var(--border));
}

.signet-table tbody tr:hover {
  background: hsl(var(--muted) / 0.2);
}

/* ---------- Pagination ---------- */
.signet-pagination {
  display: flex;
  gap: 0.25rem;
  list-style: none;
  padding: 0;
  justify-content: center;
}

.signet-pagination a,
.signet-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 0.5rem;
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
  border: 1px solid hsl(var(--border));
  transition: all 0.15s;
}

.signet-pagination a:hover {
  background: hsl(var(--accent));
  color: hsl(var(--foreground));
  text-decoration: none;
}

.signet-pagination .active span {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border-color: hsl(var(--primary));
}

.signet-pagination .disabled span,
.signet-pagination .disabled a {
  opacity: 0.4;
  pointer-events: none;
}

/* ---------- Verification Banners ---------- */
.verification-banner {
  padding: 0.75rem 0;
  font-size: 0.875rem;
}

.verification-banner.email-verification {
  background: hsl(45 100% 96%);
  color: hsl(45 80% 25%);
  border-bottom: 1px solid hsl(45 80% 80%);
}

.verification-banner.user-validation {
  background: hsl(204 100% 96%);
  color: hsl(204 80% 30%);
  border-bottom: 1px solid hsl(204 80% 85%);
}

/* ---------- Dropdown Menu ---------- */
.signet-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding-top: 0.5rem;
  z-index: 60;
  display: none;
}

.signet-dropdown.open {
  display: block;
}

.signet-dropdown-content {
  background: hsl(var(--background));
  border: 1px solid hsl(var(--border));
  border-radius: 0.75rem;
  box-shadow: 0 10px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  padding: 0.5rem;
  min-width: 220px;
}

.signet-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  color: hsl(var(--foreground));
  transition: background 0.15s;
}

.signet-dropdown-item:hover {
  background: hsl(var(--accent));
  text-decoration: none;
}

.signet-dropdown-item .label {
  font-weight: 600;
  font-size: 0.875rem;
}

.signet-dropdown-item .desc {
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
  margin-top: 0.125rem;
}

/* ---------- Text Gradient Utility ---------- */
.text-gradient {
  background: linear-gradient(to right, hsl(var(--primary)), hsl(var(--silver-dark)));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ---------- Homepage Feature Tabs ---------- */
.ftab {
  background: transparent;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  border: none;
  transition: color 0.15s, background 0.15s;
}
.ftab:hover {
  color: hsl(var(--foreground));
}
.ftab.active {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}
.ftab.active:hover {
  color: hsl(var(--primary-foreground));
}

/* ---------- Mega Menu ---------- */
.signet-mega-parent {
  position: relative;
}

.signet-mega-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding-top: 0.5rem;
  z-index: 60;
  display: none;
  pointer-events: none;
}

.signet-mega-menu.open {
  display: block;
  pointer-events: auto;
}

.signet-mega-content {
  background: hsl(var(--background));
  border: 1px solid hsl(var(--border));
  border-radius: 0.75rem;
  box-shadow: 0 20px 40px -10px rgb(0 0 0 / 0.15), 0 8px 16px -8px rgb(0 0 0 / 0.1);
  padding: 1.25rem;
  min-width: 340px;
}

.signet-mega-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: 0.5rem;
  color: hsl(var(--foreground));
  transition: background 0.15s;
}

.signet-mega-item:hover {
  background: hsl(var(--accent));
  text-decoration: none;
}

.signet-mega-icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  color: hsl(var(--primary));
  margin-top: 0.125rem;
}

.signet-mega-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  display: block;
  line-height: 1.3;
}

.signet-mega-desc {
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
  display: block;
  margin-top: 0.125rem;
  line-height: 1.4;
}

/* ---------- Globe Container ---------- */
#globe-canvas-container {
  width: 100%;
  max-width: 500px;
  aspect-ratio: 1;
  margin: 0 auto;
}

#globe-canvas-container canvas {
  width: 100% !important;
  height: 100% !important;
}

/* ---------- WHMCS Override: hide default assets ---------- */
.home-domain-search {
  background: transparent !important;
}

/* ---------- Responsive helpers ---------- */
@media (max-width: 1023px) {
  .signet-nav-desktop { display: none !important; }
  .signet-nav-mobile-toggle { display: flex !important; }
}

@media (min-width: 1024px) {
  .signet-nav-desktop { display: flex !important; }
  .signet-nav-mobile-toggle { display: none !important; }
  .signet-nav-mobile-menu { display: none !important; }
}

/* ---------- Print Styles ---------- */
@media print {
  /* Hide navigation, chrome, and interactive controls */
  header, footer, nav,
  .signet-nav-desktop, .signet-nav-mobile-toggle, .signet-nav-mobile-menu,
  .signet-sidebar, .verification-banner,
  .print\:hidden, [class*="print:hidden"],
  button:not(.print-show), .btn-hero, .btn-hero-outline,
  #cookieConsent, .modal-backdrop,
  [data-lucide="printer"] { display: none !important; }

  /* Force white background and black text */
  *, *::before, *::after {
    background: #fff !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  /* Ensure links are visible without color */
  a, a:visited { color: #000 !important; text-decoration: underline; }

  /* Keep borders visible on tables */
  .signet-table, .signet-table th, .signet-table td,
  table, th, td {
    border-color: #ccc !important;
  }

  /* Invoice-specific print layout */
  .invoice-container {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Prevent page breaks inside table rows and cards */
  tr, .signet-card { page-break-inside: avoid; }

  /* Reduce font sizes for compact printing */
  body { font-size: 12pt; }
  h1 { font-size: 18pt; }
  h2 { font-size: 15pt; }
  h3 { font-size: 13pt; }

  /* Show full URLs after links in print */
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10pt; }

  /* Avoid orphaned headings */
  h1, h2, h3, h4 { page-break-after: avoid; }

  /* Keep the page margin sensible */
  @page { margin: 1.5cm; }
}