/* Vibe Media Hosting - WHMCS dark child theme
   Upload this folder to /templates/vibe-media-hosting/ and select it in WHMCS.
*/
:root {
  --vibe-bg: #070a12;
  --vibe-bg-2: #0d1222;
  --vibe-card: rgba(18, 25, 45, 0.88);
  --vibe-card-2: rgba(26, 35, 64, 0.9);
  --vibe-text: #eef4ff;
  --vibe-muted: #aab7d4;
  --vibe-border: rgba(138, 159, 255, 0.18);
  --vibe-primary: #7c3aed;
  --vibe-accent: #06b6d4;
  --vibe-green: #22c55e;
  --vibe-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
}

html, body {
  background: radial-gradient(circle at top left, rgba(124, 58, 237, .22), transparent 28%),
              radial-gradient(circle at top right, rgba(6, 182, 212, .16), transparent 24%),
              var(--vibe-bg) !important;
  color: var(--vibe-text) !important;
}

body, .main-content, .client-home-panels, section#main-body {
  background: transparent !important;
}

a, .text-primary { color: #8bdcff; }
a:hover { color: #c4b5fd; }

.navbar, .navbar-main, .topbar, .header, #header {
  background: rgba(7, 10, 18, .86) !important;
  border-bottom: 1px solid var(--vibe-border) !important;
  backdrop-filter: blur(16px);
}

.navbar a, .navbar-main a, .topbar a, #header a { color: var(--vibe-text) !important; }
.navbar .active > a, .navbar-main .active > a { color: #8bdcff !important; }

.card, .panel, .list-group-item, .tile, .domain-pricing .tld-pricing-header,
.client-home-panels .panel, .store-order-container, .product-status, .invoice-container,
.logincontainer, .modal-content, .dropdown-menu {
  background: var(--vibe-card) !important;
  color: var(--vibe-text) !important;
  border: 1px solid var(--vibe-border) !important;
  border-radius: 18px !important;
  box-shadow: var(--vibe-shadow);
}

.card-header, .panel-heading, .modal-header, .modal-footer {
  background: rgba(255,255,255,.035) !important;
  border-color: var(--vibe-border) !important;
  color: var(--vibe-text) !important;
}

.text-muted, .small, small, .help-block, .breadcrumb, .breadcrumb a, label {
  color: var(--vibe-muted) !important;
}

.form-control, input, select, textarea {
  background: rgba(3, 7, 18, .72) !important;
  color: var(--vibe-text) !important;
  border: 1px solid rgba(170, 183, 212, .24) !important;
  border-radius: 12px !important;
}

.form-control:focus, input:focus, select:focus, textarea:focus {
  border-color: var(--vibe-accent) !important;
  box-shadow: 0 0 0 .2rem rgba(6, 182, 212, .18) !important;
}

.btn-primary, .btn-success, input[type="submit"], button[type="submit"] {
  background: linear-gradient(135deg, var(--vibe-primary), var(--vibe-accent)) !important;
  border: 0 !important;
  color: #fff !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  box-shadow: 0 16px 35px rgba(6, 182, 212, .2);
}

.btn-default, .btn-secondary, .btn-outline-primary {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid var(--vibe-border) !important;
  color: var(--vibe-text) !important;
  border-radius: 999px !important;
}

.table, table { color: var(--vibe-text) !important; }
.table th, .table td, table th, table td { border-color: var(--vibe-border) !important; }
.table-striped tbody tr:nth-of-type(odd) { background: rgba(255,255,255,.03) !important; }

.vibe-hero {
  position: relative;
  overflow: hidden;
  margin: 0 0 2rem;
  padding: clamp(3rem, 7vw, 6rem) 1.25rem;
  border: 1px solid var(--vibe-border);
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(124,58,237,.26), rgba(6,182,212,.10)), rgba(13,18,34,.9);
  box-shadow: var(--vibe-shadow);
}
.vibe-hero:before {
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle, rgba(255,255,255,.14), transparent 38%);
  transform: translateX(35%);
  pointer-events: none;
}
.vibe-hero-inner { position: relative; max-width: 1160px; margin: 0 auto; display: grid; gap: 2rem; grid-template-columns: 1.25fr .75fr; align-items: center; }
.vibe-eyebrow { color: #8bdcff; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; font-size: .82rem; }
.vibe-hero h1 { color: #fff; font-weight: 950; font-size: clamp(2.4rem, 6vw, 5rem); line-height: .96; margin: .7rem 0 1rem; }
.vibe-hero p { color: var(--vibe-muted); font-size: 1.1rem; max-width: 680px; }
.vibe-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.5rem; }
.vibe-btn { display:inline-flex; align-items:center; justify-content:center; min-height: 46px; padding: .8rem 1.2rem; border-radius: 999px; font-weight: 900; text-decoration:none !important; }
.vibe-btn-primary { color:#fff !important; background: linear-gradient(135deg, var(--vibe-primary), var(--vibe-accent)); }
.vibe-btn-ghost { color:var(--vibe-text) !important; border:1px solid var(--vibe-border); background: rgba(255,255,255,.06); }
.vibe-stat-grid { display:grid; gap: 1rem; }
.vibe-stat { padding: 1.1rem; border-radius: 20px; background: rgba(255,255,255,.06); border: 1px solid var(--vibe-border); }
.vibe-stat strong { display:block; color:#fff; font-size:1.7rem; }
.vibe-section { max-width:1160px; margin: 0 auto 2rem; padding: 0 1.25rem; }
.vibe-section h2 { color:#fff; font-weight: 950; margin-bottom: .5rem; }
.vibe-section-lead { color: var(--vibe-muted); margin-bottom: 1.25rem; }
.vibe-services { display:grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 1rem; }
.vibe-service { padding: 1.25rem; border-radius: 22px; background: var(--vibe-card); border:1px solid var(--vibe-border); box-shadow: 0 18px 45px rgba(0,0,0,.22); transition: transform .2s ease, border-color .2s ease; }
.vibe-service:hover { transform: translateY(-4px); border-color: rgba(6,182,212,.55); }
.vibe-icon { width: 46px; height: 46px; border-radius: 16px; display:grid; place-items:center; background: linear-gradient(135deg, rgba(124,58,237,.85), rgba(6,182,212,.85)); margin-bottom: .8rem; font-size: 1.35rem; }
.vibe-service h3 { color:#fff; font-size: 1.05rem; font-weight: 900; }
.vibe-service p { color: var(--vibe-muted); font-size: .94rem; }
.vibe-badge-row { display:flex; flex-wrap:wrap; gap:.65rem; margin-top:1rem; }
.vibe-badge { border:1px solid var(--vibe-border); background:rgba(255,255,255,.05); color:var(--vibe-muted); padding:.45rem .7rem; border-radius:999px; font-size:.84rem; }
.vibe-notice { max-width:1160px; margin: 0 auto 2rem; padding: 1rem 1.25rem; border:1px solid rgba(34,197,94,.28); border-radius:18px; background:rgba(34,197,94,.08); color:#c9fdd8; }
footer, .footer, #footer { background: rgba(3, 7, 18, .92) !important; color: var(--vibe-muted) !important; border-top: 1px solid var(--vibe-border); }

@media (max-width: 1100px) { .vibe-services { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 760px) { .vibe-hero-inner { grid-template-columns: 1fr; } .vibe-services { grid-template-columns: 1fr; } .vibe-actions { flex-direction: column; } .vibe-btn { width: 100%; } }

/* Full top navigation layout matching WHMCS default menu items */
.vibe-navbar { min-height: 82px; padding-top: 1rem; padding-bottom: 1rem; }
.vibe-brand { font-weight: 950; color: #fff !important; letter-spacing: -.03em; margin-right: 2rem; white-space: nowrap; }
.vibe-brand-dot { display:inline-block; width:12px; height:12px; border-radius:50%; background:linear-gradient(135deg,#7c3aed,#06b6d4); box-shadow:0 0 18px #06b6d4; margin-right:8px; }
.vibe-main-menu .nav-link, .vibe-account-menu .nav-link { font-size: 1.05rem; font-weight: 650; padding-left: 1rem !important; padding-right: 1rem !important; }
.vibe-main-menu .nav-link:hover, .vibe-account-menu .nav-link:hover { color: #8bdcff !important; }
.dropdown-menu .dropdown-item { color: var(--vibe-text) !important; border-radius: 10px; }
.dropdown-menu .dropdown-item:hover, .dropdown-menu .dropdown-item:focus { background: rgba(6,182,212,.14) !important; color: #fff !important; }
.dropdown-divider { border-top-color: var(--vibe-border) !important; }
@media (max-width: 1200px) { .vibe-main-menu .nav-link, .vibe-account-menu .nav-link { padding-left: .65rem !important; padding-right: .65rem !important; } }

/* Dropdown fix: make the Store/Account menus solid, readable, and above page content */
.vibe-header,
.vibe-navbar,
.vibe-navbar .container-fluid,
.vibe-navbar .navbar-collapse,
.vibe-navbar .nav-item.dropdown {
  overflow: visible !important;
}

.vibe-navbar .dropdown-menu {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  z-index: 99999 !important;
  min-width: 270px !important;
  margin-top: .85rem !important;
  padding: .65rem !important;
  background: #10182d !important;
  background-image: linear-gradient(180deg, #121b33, #0d1428) !important;
  border: 1px solid rgba(138, 159, 255, .34) !important;
  border-radius: 18px !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.72) !important;
  backdrop-filter: none !important;
}

.vibe-navbar .dropdown-menu-right {
  right: 0 !important;
  left: auto !important;
}

.vibe-navbar .dropdown-menu .dropdown-item {
  display: block !important;
  width: 100% !important;
  padding: .85rem 1rem !important;
  line-height: 1.2 !important;
  font-size: 1rem !important;
  font-weight: 650 !important;
  white-space: nowrap !important;
  color: #eef4ff !important;
  background: transparent !important;
  border-radius: 12px !important;
}

.vibe-navbar .dropdown-menu .dropdown-item + .dropdown-item {
  margin-top: .12rem !important;
}

.vibe-navbar .dropdown-menu .dropdown-item:hover,
.vibe-navbar .dropdown-menu .dropdown-item:focus {
  background: rgba(6, 182, 212, .16) !important;
  color: #ffffff !important;
}

/* Give WHMCS page titles a little breathing room under the custom header */
section#main-body {
  padding-top: 2.4rem !important;
}

@media (max-width: 1199px) {
  .vibe-navbar .dropdown-menu {
    position: static !important;
    min-width: 100% !important;
    margin: .5rem 0 1rem !important;
  }
}