/*
  Globe WHMCS Theme Overlay (v3 - repair/safe)
  Built for WHMCS v9 + Six-derived template
*/

:root{
  --g-primary:#1F6FFF;
  --g-accent:#FF7A00;
  --g-dark:#071A33;
  --g-surface:#0B2347;
  --g-text:#0E1B2A;
  --g-muted:rgba(255,255,255,.75);
  --g-border:rgba(255,255,255,.10);
  --g-radius:14px;
  --g-radius-lg:22px;
  --g-shadow:0 18px 55px rgba(0,0,0,.16);
}

/* Base */
html, body{ height:100%; }
body{
  color: var(--g-text);
  letter-spacing: .1px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a{ transition: .15s ease; }
a:hover{ text-decoration:none; }

/* Buttons */
.btn{ border-radius: var(--g-radius); font-weight:600; }
.btn-primary{ background: var(--g-primary); border-color: var(--g-primary); }
.btn-primary:hover{ filter: brightness(1.05); }
.btn.search{ background: var(--g-primary); border-color: var(--g-primary); }
.btn.transfer{ background: var(--g-accent); border-color: var(--g-accent); color:#fff; }

/* Inputs */
.form-control, input[type="text"], input[type="email"], input[type="password"], select, textarea{
  border-radius: var(--g-radius);
}

/* ===== Top header strip ===== */
#header{
  background:#fff;
  border-bottom:1px solid rgba(0,0,0,.06);
}
#header .logo img{ max-height:42px; }

#header .top-nav{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 10px 0;
  margin: 0;
}
#header .top-nav > li{ margin:0; }
#header .top-nav a{
  color: rgba(0,0,0,.72);
  font-size: 13px;
}
#header .top-nav a:hover{ color: rgba(0,0,0,.92); }
#header .top-nav .primary-action .btn{
  background: var(--g-primary);
  border-color: var(--g-primary);
  color:#fff;
  padding: 7px 11px;
}
#header .top-nav .primary-action .btn:hover{ filter: brightness(1.05); }

/* Left side contact row in top nav */
#header .top-nav .globe-topbar-left{
  margin-right:auto;
  display:flex;
  align-items:center;
  gap: 12px;
}
#header .top-nav .globe-topbar-left a{
  display:inline-flex;
  align-items:center;
  gap: 8px;
}
#header .top-nav .globe-topbar-sep{ opacity:.35; }

/* Mobile: hide contact block */
@media (max-width: 767px){
  #header .top-nav{ justify-content:flex-end; }
  #header .top-nav .globe-topbar-left{ display:none; }
}

/* ===== Main navigation ===== */
#main-menu{
  background: rgba(255,255,255,.94);
  border-bottom: 1px solid rgba(0,0,0,.06);
}
#main-menu .navbar{
  margin-bottom: 0;
  border: 0;
  background: transparent;
}
#main-menu .navbar-main{
  position: sticky;
  top: 0;
  z-index: 1020;
  backdrop-filter: blur(10px);
}
#main-menu .navbar-nav > li > a{
  padding: 18px 16px;
  font-weight: 700;
  color: rgba(0,0,0,.78);
}
#main-menu .navbar-nav > li > a:hover,
#main-menu .navbar-nav > .open > a,
#main-menu .navbar-nav > .open > a:hover{
  color: rgba(0,0,0,.95);
  background: transparent;
}

/* Dropdowns: nicer */
#main-menu .dropdown-menu{
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 18px 55px rgba(0,0,0,.16);
  padding: 10px;
}
#main-menu .dropdown-menu > li > a{
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 600;
}
#main-menu .dropdown-menu > li > a:hover{
  background: rgba(31,111,255,.08);
}

/* Mega dropdown (JS adds .globe-mega) */
#main-menu .dropdown.globe-mega .dropdown-menu{
  width: min(900px, calc(100vw - 30px));
  padding: 18px;
}
#main-menu .dropdown.globe-mega .dropdown-menu > li{
  float:left;
  width: 33.3333%;
}
#main-menu .dropdown.globe-mega .dropdown-menu > li > a{
  white-space: normal;
}
@media (max-width: 991px){
  #main-menu .dropdown.globe-mega .dropdown-menu > li{ width: 50%; }
}
@media (max-width: 767px){
  #main-menu .dropdown.globe-mega .dropdown-menu > li{ width: 100%; float:none; }
}

/* Sticky shadow on scroll */
body.globe-scrolled #main-menu{ box-shadow: 0 10px 30px rgba(0,0,0,.08); }

/* ===== Hero (home banner) ===== */
#home-banner{
  position: relative;
  margin: 18px 0 0;
  border-radius: var(--g-radius-lg);
  overflow: hidden;
  color:#fff;
  background: #061733;
  min-height: 340px;
  display:flex;
  align-items:center;
}
#home-banner .container{ position: relative; z-index: 2; }
#home-banner:before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(7,26,51,.90), rgba(7,26,51,.55)),
    radial-gradient(900px 380px at 20% 35%, rgba(31,111,255,.25), rgba(31,111,255,0));
  z-index:1;
}
#home-banner:after{
  content:"";
  position:absolute; inset:0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: .55;
  z-index:0;
  transform: scale(1.02);
  transition: opacity .5s ease, transform 8s ease;
}

/* Slide images (body class switched by globe.js) */
body.globe-hero-1 #home-banner:after{ background-image: url('../img/hero-1.png'); }
body.globe-hero-2 #home-banner:after{ background-image: url('../img/hero-2.png'); }
body.globe-hero-3 #home-banner:after{ background-image: url('../img/hero-3.png'); }
body.globe-hero-1 #home-banner:after,
body.globe-hero-2 #home-banner:after,
body.globe-hero-3 #home-banner:after{ opacity:.62; transform: scale(1.08); }

#home-banner h2{
  font-size: clamp(28px, 3.4vw, 48px);
  font-weight: 800;
  letter-spacing: .2px;
  margin-bottom: 12px;
}
#home-banner .input-group-lg > .form-control{
  height: 54px;
  border-radius: 16px 0 0 16px;
  border: 1px solid rgba(255,255,255,.22);
}
#home-banner .input-group-btn > .btn{
  height: 54px;
  border-radius: 0 16px 16px 0;
  font-weight: 800;
}
#home-banner .btn.search{ background: var(--g-primary); }
#home-banner .btn.transfer{ background: var(--g-accent); }

@media (max-width: 767px){
  #home-banner{ border-radius: 18px; min-height: 420px; }
  #home-banner .input-group{ display:block; }
  #home-banner .input-group-lg > .form-control{ border-radius: 16px; margin-bottom: 10px; }
  #home-banner .input-group-btn{ display:block; }
  #home-banner .input-group-btn > .btn{ width:100%; border-radius: 16px; }
}

/* ===== Home shortcuts ===== */
.home-shortcuts{
  margin-top: 18px;
}
.home-shortcuts ul{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
}
.home-shortcuts ul li{ flex: 1 1 200px; }
.home-shortcuts ul li a{
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.06);
  background:#fff;
  box-shadow: 0 12px 35px rgba(0,0,0,.07);
  padding: 16px;
  display:flex;
  align-items:center;
  gap: 12px;
}
.home-shortcuts ul li a:hover{ transform: translateY(-2px); box-shadow: 0 16px 45px rgba(0,0,0,.10); }
.home-shortcuts ul li a i{
  width: 44px;
  height: 44px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 14px;
  background: rgba(31,111,255,.10);
  color: var(--g-primary);
}
.home-shortcuts ul li a p{ margin:0; font-weight:700; }

/* ===== Homepage sections (homepage.tpl) ===== */
.globe-section{ padding: 56px 0; }
.globe-section-title{
  font-weight: 800;
  letter-spacing: .2px;
  margin: 0 0 10px;
}
.globe-section-lead{ color: rgba(0,0,0,.64); margin: 0 0 22px; }

.globe-cards .globe-card{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius: 18px;
  padding: 18px;
  height: 100%;
  box-shadow: 0 14px 40px rgba(0,0,0,.08);
  transition: transform .15s ease, box-shadow .15s ease;
}
.globe-cards .globe-card:hover{ transform: translateY(-3px); box-shadow: 0 18px 55px rgba(0,0,0,.12); }
.globe-card .globe-icon{
  width: 46px; height: 46px;
  border-radius: 16px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(31,111,255,.10);
  color: var(--g-primary);
  margin-bottom: 12px;
  font-size: 18px;
}
.globe-card h3{ margin: 8px 0 8px; font-weight: 800; font-size: 18px; }
.globe-card p{ margin: 0 0 12px; color: rgba(0,0,0,.65); }
.globe-card .globe-card-link{ font-weight: 800; color: var(--g-primary); }

.globe-darkband{
  background: linear-gradient(180deg, var(--g-dark), #050E1D);
  color: #fff;
}
.globe-darkband .globe-section-lead{ color: rgba(255,255,255,.72); }
.globe-darkband .globe-card{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: none;
}
.globe-darkband .globe-card p{ color: rgba(255,255,255,.74); }
.globe-darkband .globe-card .globe-icon{ background: rgba(255,255,255,.10); color:#fff; }

.globe-cta{
  border-radius: 22px;
  padding: 26px;
  background: linear-gradient(90deg, rgba(31,111,255,.16), rgba(255,122,0,.12));
  border: 1px solid rgba(0,0,0,.06);
}
.globe-cta h3{ margin:0 0 6px; font-weight: 900; }
.globe-cta p{ margin:0; color: rgba(0,0,0,.66); }

/* ===== Client area polish ===== */
#main-body{ padding-top: 26px; }

.panel{
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 14px 40px rgba(0,0,0,.08);
}
.panel-heading{ border-radius: 18px 18px 0 0; font-weight: 800; }
.table>thead>tr>th{ border-bottom: 1px solid rgba(0,0,0,.08); }

/* Sidebar */
.sidebar .panel{ box-shadow: 0 12px 35px rgba(0,0,0,.07); }

/* Footer */
#footer{
  background: linear-gradient(180deg, #050E1D, #040A14);
  color: rgba(255,255,255,.72);
  border-top: 1px solid rgba(255,255,255,.08);
}
#footer a{ color: rgba(255,255,255,.82); }
#footer a:hover{ color: #fff; }

/* Reduce weird spacing on old elements */
#header .container, #main-menu .container{ position: relative; }

/* Accessibility */
a:focus, button:focus, input:focus, select:focus, textarea:focus{
  outline: 0;
  box-shadow: 0 0 0 3px rgba(31,111,255,.22);
}