/* ===================================================================
   WHMCS - Registeram Landing Page Theme (custom.css) + RED COVERAGE
   =================================================================== */

:root{
  /* Brand core */
  --ra-primary: #e11d48;
  --ra-primary-hover: #be123c;

  /* Accent(s) */
  --ra-accent: #ff7a18;
  --ra-accent-hover: #e86a10;

  /* Brand RED (missed before) */
  --ra-red: #e11d48;              /* Brand red */
  --ra-red-hover: #be123c;        /* Darker hover */
  --ra-red-soft: rgba(225,29,72,.12); /* Soft bg */
  --ra-red-ring: rgba(225,29,72,.25); /* Focus ring */

  /* Neutrals */
  --ra-bg: #0b1220;
  --ra-surface: #ffffff;
  --ra-muted: #6b7280;
  --ra-text: #111827;

  /* UI */
  --ra-border: #e5e7eb;
  --ra-ring: rgba(31,111,235,.25);

  /* Status */
  --ra-success: #16a34a;
  --ra-warning: #f59e0b;
  --ra-danger:  #dc2626; /* still keep for “system danger” if you want */

  --ra-radius: 12px;
  --ra-shadow: 0 10px 30px rgba(0,0,0,.08);
}

/* General */
body{ color: var(--ra-text); }
a{ color: var(--ra-primary); text-decoration: none; }
a:hover, a:focus{ color: var(--ra-primary-hover); text-decoration: underline; }

/* Buttons */
.btn-primary{
  background-color: var(--ra-primary) !important;
  border-color: var(--ra-primary) !important;
  border-radius: var(--ra-radius) !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active{ background-color: var(--ra-primary-hover) !important; border-color: var(--ra-primary-hover) !important; }

.btn:focus{ outline: none !important; box-shadow: 0 0 0 .25rem var(--ra-ring) !important; }

/* --- NEW: RED BUTTONS (Bootstrap/WHMCS uses .btn-danger commonly) --- */
.btn-danger,
.btn.btn-danger{
  background-color: var(--ra-red) !important;
  border-color: var(--ra-red) !important;
  border-radius: var(--ra-radius) !important;
}
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-danger.active{
  background-color: var(--ra-red-hover) !important;
  border-color: var(--ra-red-hover) !important;
}
.btn-danger:focus{
  box-shadow: 0 0 0 .25rem var(--ra-red-ring) !important;
}

/* Optional: RED OUTLINE button */
.btn-outline-danger{
  border-color: var(--ra-red) !important;
  color: var(--ra-red) !important;
  border-radius: var(--ra-radius) !important;
}
.btn-outline-danger:hover{
  background: var(--ra-red) !important;
  border-color: var(--ra-red) !important;
  color: #fff !important;
}

/* Panels / cards */
.panel, .card, .well{
  border-color: var(--ra-border) !important;
  border-radius: var(--ra-radius) !important;
  box-shadow: var(--ra-shadow);
}
.panel-heading{
  border-top-left-radius: var(--ra-radius) !important;
  border-top-right-radius: var(--ra-radius) !important;
}

/* Forms */
.form-control{
  border-color: var(--ra-border) !important;
  border-radius: var(--ra-radius) !important;
  box-shadow: none !important;
}
.form-control:focus{
  border-color: var(--ra-primary) !important;
  box-shadow: 0 0 0 .25rem var(--ra-ring) !important;
}

/* --- NEW: RED states for form validation (common in WHMCS) --- */
.has-error .form-control,
.form-control.is-invalid,
input:invalid,
select:invalid,
textarea:invalid{
  border-color: var(--ra-red) !important;
}
.has-error .form-control:focus,
.form-control.is-invalid:focus{
  box-shadow: 0 0 0 .25rem var(--ra-red-ring) !important;
}

/* Labels / badges */
.label-primary, .badge-primary{ background: var(--ra-primary) !important; }
.label-danger, .badge-danger{ background: var(--ra-red) !important; } /* NEW */
.label-success{ background: var(--ra-success) !important; }
.label-warning{ background: var(--ra-warning) !important; }

/* --- NEW: RED text helpers (Bootstrap 3/4 variants) --- */
.text-danger{ color: var(--ra-red) !important; }
.text-red, .ra-text-red{ color: var(--ra-red) !important; }

/* Alerts */
.alert-danger{
  border-color: var(--ra-red) !important;
  background: var(--ra-red-soft) !important;
  color: #7f1d1d !important; /* readable dark red */
}
.alert-danger a{ color: var(--ra-red-hover) !important; text-decoration: underline; }

/* --- NEW: ERROR/WARNING boxes WHMCS sometimes uses --- */
.errorbox, .error, .errormsg{
  border: 1px solid var(--ra-red) !important;
  background: var(--ra-red-soft) !important;
  color: #7f1d1d !important;
  border-radius: var(--ra-radius) !important;
}

/* Tables */
.table > thead > tr > th{ border-bottom-color: var(--ra-border) !important; }
.table > tbody > tr > td{ border-top-color: var(--ra-border) !important; }

/* --- NEW: RED row highlight (optional) --- */
.table > tbody > tr.danger > td,
.table > tbody > tr > td.danger{
  background: var(--ra-red-soft) !important;
}

/* Optional: Hero wrapper */
.ra-hero{
  background: radial-gradient(1200px 600px at 20% 0%, rgba(31,111,235,.20), transparent 55%),
              radial-gradient(900px 500px at 90% 10%, rgba(255,122,24,.14), transparent 50%),
              var(--ra-bg);
  color: #fff;
}