/* EnerXCo v18: left-prone layout, service dropdown, clean account layout, logo fix */

:root{
  --ex-left: clamp(18px, 4.5vw, 72px);
  --ex-right: 28px;
  --ex-max: 1180px;
}

/* Left-prone website layout */
.header-inner,
.hero,
.page-wrap,
.account-layout,
.footer-inner{
  max-width: var(--ex-max) !important;
  margin-left: var(--ex-left) !important;
  margin-right: auto !important;
}

.header-inner{
  padding-left: 0 !important;
  padding-right: var(--ex-right) !important;
}

/* Logo size/shape */
.brand img{
  width: auto !important;
  height: 34px !important;
  max-width: 174px !important;
  border-radius: 0 !important;
  display: block !important;
  object-fit: contain !important;
}

.footer-brand img{
  width: auto !important;
  height: 28px !important;
  max-width: 155px !important;
  border-radius: 0 !important;
  display: block !important;
  object-fit: contain !important;
}

/* Main nav */
.nav-left{
  align-items: center !important;
  gap: 26px !important;
}

/* Our Services dropdown */
.nav-dropdown{
  position: relative;
  display: inline-flex;
  align-items: center;
}

.nav-dropdown > a::after{
  content: "";
  display: inline-block;
  margin-left: 7px;
  width: 6px;
  height: 6px;
  border-right: 1.7px solid currentColor;
  border-bottom: 1.7px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}

.nav-dropdown-menu{
  position: absolute;
  top: calc(100% + 18px);
  left: 0;
  min-width: 235px;
  background: #fff;
  border: 1px solid #eaecf0;
  border-radius: 16px;
  padding: 8px;
  box-shadow: 0 18px 50px rgba(16,24,40,.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: .16s ease;
  z-index: 1000;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-dropdown-menu a{
  display: block;
  padding: 11px 12px;
  border-radius: 11px;
  color: #344054 !important;
  font-size: 14px !important;
  font-weight: 650 !important;
}

.nav-dropdown-menu a:hover{
  background: #f2f4f7;
  color: #101828 !important;
}

/* Account two-column layout */
.account-layout{
  padding: 42px var(--ex-right) 84px 0 !important;
  display: grid !important;
  grid-template-columns: 260px minmax(0, 860px) !important;
  gap: 34px !important;
  align-items: start !important;
}

.account-sidebar{
  display: block !important;
  background: #ffffff !important;
  border: 1px solid #eaecf0 !important;
  border-radius: 22px !important;
  padding: 18px !important;
  box-shadow: 0 12px 34px rgba(16,24,40,.06) !important;
  position: sticky !important;
  top: 96px !important;
}

.account-user{
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 4px 2px 18px !important;
  margin: 0 0 14px !important;
  border-bottom: 1px solid #eaecf0 !important;
}

.account-avatar{
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  border-radius: 999px !important;
  background: #101828 !important;
  color: #fff !important;
  display: grid !important;
  place-items: center !important;
  font-size: 15px !important;
  font-weight: 800 !important;
}

.account-user strong{
  display: block !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  color: #101828 !important;
}

.account-user span{
  display: block !important;
  font-size: 12px !important;
  color: #667085 !important;
  max-width: 170px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  margin-top: 3px !important;
}

.account-sidebar nav{
  display: grid !important;
  gap: 6px !important;
}

.account-sidebar nav a{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 11px 12px !important;
  border-radius: 12px !important;
  color: #344054 !important;
  font-size: 14px !important;
  font-weight: 650 !important;
  text-decoration: none !important;
}

.account-sidebar nav a:hover,
.account-sidebar nav a.active{
  background: #f2f4f7 !important;
  color: #101828 !important;
}

.account-sidebar nav a.disabled{
  color: #98a2b3 !important;
  cursor: not-allowed !important;
}

.account-main{
  min-width: 0 !important;
}

.account-main h1{
  margin: 0 0 24px !important;
  font-size: 36px !important;
  line-height: 1.12 !important;
  letter-spacing: -.045em !important;
}

.dashboard-head{
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 18px !important;
  margin: 0 0 24px !important;
}

.account-main .card{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

.account-main .table{
  width: 100% !important;
  border-collapse: collapse !important;
  background: #ffffff !important;
  border: 1px solid #eaecf0 !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  box-shadow: 0 10px 30px rgba(16,24,40,.04) !important;
}

.account-main .table th,
.account-main .table td{
  padding: 15px 16px !important;
  border-bottom: 1px solid #eaecf0 !important;
  text-align: left !important;
  vertical-align: middle !important;
}

.account-main .table th{
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: .055em !important;
  color: #667085 !important;
  background: #f9fafb !important;
  font-weight: 750 !important;
}

.account-main .table tr:last-child td{
  border-bottom: 0 !important;
}

.account-main .btn{
  text-decoration: none !important;
}

.account-main .form{
  max-width: 720px !important;
}

/* Auth pages are left-prone but keep professional form width */
.auth-page{
  max-width: var(--ex-max) !important;
  margin-left: var(--ex-left) !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: var(--ex-right) !important;
}

.auth-card{
  margin-left: 0 !important;
}

/* Home page visual stays controlled */
.hero{
  padding-left: 0 !important;
  padding-right: var(--ex-right) !important;
}

/* Footer alignment */
.footer-inner{
  padding-left: 0 !important;
  padding-right: var(--ex-right) !important;
}

@media(max-width: 900px){
  .header-inner,
  .hero,
  .page-wrap,
  .account-layout,
  .footer-inner,
  .auth-page{
    margin-left: 22px !important;
    margin-right: 22px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .brand img{
    height: 30px !important;
    max-width: 150px !important;
  }

  .account-layout{
    grid-template-columns: 1fr !important;
  }

  .account-sidebar{
    position: static !important;
  }

  .nav-left{
    display: none !important;
  }
}