/* =========================================================
   SyncHost – Clean custom.css (opgeruimd + consistent)
   - Achtergrond gradient
   - Buttons / links
   - Containers transparant
   - Dropdown fix (z-index)
   - Logo intro
   - Homepage "sh-" layout + foto hoogte fix
   - Client area panelen donkerblauw
   ========================================================= */

/* -------------------------
   Basis kleuren / links
------------------------- */
:root{
  --sync-radius: 16px;
  --sync-blue: #6fa8dc;
  --sync-dark: #0b2a3d;
  --sync-border: #0b4f6c;
  --text-light: #f5f8fa;
}

body,
body.clientarea,
#main-body{
  color: var(--text-light) !important;
}

a{ color: #7fd4ff !important; }
a:hover{ color: #b5e6ff !important; }

/* -------------------------
   Achtergrond gradient
------------------------- */
html, body{ min-height:100%; }

body{
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #3ecf8e 20%,
    #1f8f6a 45%,
    #115169 70%,
    #050c1f 100%
  ) fixed !important;
}

/* -------------------------
   WHMCS containers transparant
------------------------- */
#wrapper,
#main-body,
#content,
.main-content,
.whmcs-container,
.container,
.container-fluid,
.main-body,
.primary-bg,
#main-body .container,
#main-body .main-content{
  background: transparent !important;
}

/* -------------------------
   Algemeen: rondingen
------------------------- */
#wrapper,
#header,
#main-menu,
#main-body,
#footer,
.navbar,
.panel,
.card,
.well,
#scrollUp{
  border-radius: var(--sync-radius) !important;
  overflow: hidden;
}

/* -------------------------
   Buttons (globaal)
------------------------- */
.btn,
.btn-lg,
.btn-primary,
.btn-success,
.btn-default,
.btn-info,
.btn-warning,
.btn-danger{
  border: none !important;
  border-radius: 10px !important;
  background: linear-gradient(90deg, #2E7AB7 0%, #77C087 100%) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}

.btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,.25);
  opacity: .95;
}

/* -------------------------
   Footer
------------------------- */
footer, #footer{
  background: linear-gradient(90deg, #2E7AB7 0%, #77C087 100%) !important;
  color:#fff !important;
  padding: 20px 0 !important;
  border-top: none !important;
}

footer a, #footer a{ color:#fff !important; text-decoration:none; }
footer a:hover, #footer a:hover{ color:#E0F5E8 !important; }

/* -------------------------
   Dropdown / menu fix (boven alles)
------------------------- */
#header,
#main-menu,
.navbar,
.navbar-main{
  position: relative !important;
  z-index: 99999 !important;
}

.navbar .dropdown-menu,
.navbar-main .dropdown-menu{
  position: absolute !important;
  z-index: 100000 !important;
  display: none !important;
}

.navbar li:hover > .dropdown-menu,
.navbar-main li:hover > .dropdown-menu{
  display: block !important;
}

/* Niets mag menu blokkeren */
body::before,
.background-overlay,
.page-bg{
  pointer-events: none !important;
}

/* -------------------------
   Logo intro
------------------------- */
body.logo-intro-active{ overflow:hidden; }

#logoIntro{
  position: fixed;
  inset: 0;
  z-index: 9000 !important;
  background:#000 !important;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none !important;
  animation: introBackground 2.6s ease-in-out forwards;
}

#logoIntro img{
  max-width:70vw;
  max-height:70vh;
  transform: scale(2.2);
  opacity:0;
  animation: introLogo 2.6s ease-in-out forwards;
}

@keyframes introBackground{
  0%,70%{ opacity:1; }
  100%{ opacity:0; visibility:hidden; }
}

@keyframes introLogo{
  0%{ opacity:0; transform: scale(2.2); }
  20%{ opacity:1; transform: scale(2.2); }
  70%{ opacity:1; transform: translateY(-25vh) scale(1); }
  100%{ opacity:0; transform: translateY(-40vh) scale(.6); }
}

/* -------------------------
   Domain menu verbergen
------------------------- */
#Primary_Navbar-Domain,
#Primary_Navbar-Domains{
  display:none !important;
}

/* =========================================================
   HOMEPAGE "sh-" LAYOUT
   (alleen voor jouw homeproducts.tpl blok)
   ========================================================= */

#main-body .sh-warn{
  background:#fff !important;
  color:#000 !important;
  padding:16px !important;
  border:3px solid red !important;
  margin:20px auto !important;
  border-radius:12px !important;
  max-width: 1250px !important;
}

#main-body .sh-home{
  max-width: 1250px !important;
  margin: 30px auto !important;
  padding: 0 15px !important;
}

#main-body .sh-top{
  display:grid !important;
  grid-template-columns: 260px 1fr 260px !important;
  gap: 20px !important;
  align-items:start !important;
}

#main-body .sh-side{
  display:flex !important;
  flex-direction:column !important;
  gap:16px !important;
}

#main-body .sh-card{
  background: var(--sync-blue) !important;
  color: var(--sync-dark) !important;
  border-radius: 14px !important;
  padding: 16px !important;
  border: 3px solid var(--sync-border) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12) !important;
}

#main-body .sh-title{
  font-size: 18px !important;
  font-weight: 800 !important;
  margin-bottom: 10px !important;
}

#main-body .sh-desc{
  font-size: 13px !important;
  line-height: 1.4 !important;
  margin-bottom: 12px !important;
  color: var(--sync-dark) !important;
}

#main-body .sh-btn{
  display:inline-block !important;
  padding:10px 14px !important;
  border-radius:10px !important;
  background:#0a7cff !important;
  color:#fff !important;
  text-decoration:none !important;
  font-weight:700 !important;
}

/* Foto’s: vaste (niet te hoge) vakken */
#main-body .sh-photos{
  display:grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 20px !important;
  align-content:start !important;
}

#main-body .sh-photo{
  height: 260px !important;          /* pas aan: 220 / 240 / 280 */
  max-height: 260px !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  border: 3px solid var(--sync-border) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12) !important;
  background:#000 !important;
}

#main-body .sh-photo img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display:block !important;
}

/* Onderste lijsten */
#main-body .sh-bottom{
  display:grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 20px !important;
  margin-top: 22px !important;
}

#main-body .sh-list{
  background: var(--sync-blue) !important;
  color: var(--sync-dark) !important;
  border-radius: 16px !important;
  padding: 18px !important;
  border: 3px solid var(--sync-border) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12) !important;
}

#main-body .sh-list-title{
  font-size: 18px !important;
  font-weight: 800 !important;
  margin-bottom: 12px !important;
}

#main-body .sh-item{
  display:flex !important;
  justify-content:space-between !important;
  align-items:flex-start !important;
  padding: 10px 0 !important;
  border-top: 1px solid rgba(0,0,0,0.15) !important;
  gap: 12px !important;
}

#main-body .sh-item-left{
  display:flex !important;
  flex-direction:column !important;
  gap: 6px !important;
  min-width: 0 !important;
}

#main-body .sh-item-name{
  font-weight: 800 !important;
}

#main-body .sh-item-spec{
  font-size: 12px !important;
  line-height: 1.35 !important;
  opacity: .9 !important;
  word-break: break-word !important;
}

#main-body .sh-item-link{
  text-decoration:none !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

/* Responsive */
@media (max-width: 950px){
  #main-body .sh-top{ grid-template-columns: 1fr !important; }
  #main-body .sh-photos{ grid-template-columns: 1fr !important; }
  #main-body .sh-bottom{ grid-template-columns: 1fr !important; }
  #main-body .sh-photo{ height: 200px !important; max-height:200px !important; }
}

/* =========================================================
   CLIENT AREA – WITTE BLOKKEN DONKERBLAUW
   (panelen, tiles, list items, etc.)
   ========================================================= */

#main-body .panel,
#main-body .panel-body,
#main-body .panel-default,
#main-body .client-home-panels .panel,
#main-body .card,
#main-body .list-group-item,
#main-body .well,
#main-body .content-padded,
#main-body .tile,
#main-body .stat{
  background: var(--sync-dark) !important;
  color: #e9f4ff !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}

/* Titels */
#main-body .panel-heading,
#main-body h2,
#main-body h3,
#main-body h4{
  color:#ffffff !important;
}

/* Tekst */
#main-body p,
#main-body span,
#main-body li{
  color:#dbefff !important;
}

/* Links in client area */
#main-body a{
  color: var(--sync-blue) !important;
  font-weight: 600;
}

#main-body a:hover{
  color:#9cc2ff !important;
}

/* Knoppen in client area */
#main-body .btn,
#main-body button{
  background: var(--sync-blue) !important;
  color: var(--sync-dark) !important;
  border: none !important;
  border-radius: 10px !important;
  font-weight: 800 !important;
}
#main-body .btn:hover{ background:#8bbcf0 !important; }

/* =========================================================
   SyncHost – FIX: alle witte “cards/panels” donkerblauw
   (client area + sidebar + widgets)
   Plak DIT HELE BLOK als LAATSTE in custom.css
   ========================================================= */

:root {
  --sync-dark: #0b2a3d;
  --sync-dark-2: #0b4f6c;
  --sync-text: #f5f8fa;
}

/* Tekst overal goed leesbaar */
body,
body.clientarea,
#main-body {
  color: var(--sync-text) !important;
}

/* Alle blokken waar normaal wit op zit */
#main-body .panel,
#main-body .panel-default,
#main-body .panel-body,
#main-body .panel-heading,
#main-body .card,
#main-body .card-body,
#main-body .well,
#main-body .alert,
#main-body .tile,
#main-body .tiles,
#main-body .list-group,
#main-body .list-group-item,
#main-body .kb-articles,
#main-body .client-home-panels .panel,
#main-body .home-shortcuts .panel,
#main-body .home-shortcuts .panel-body,
#main-body .sidebar .panel,
#main-body .sidebar .panel-body,
#main-body .sidebar .list-group-item {
  background: rgba(11, 42, 61, 0.90) !important;
  /* donkerblauw */
  border: 1px solid rgba(127, 212, 255, 0.18) !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25) !important;
}

/* Koppen / titels in panelen */
#main-body .panel-heading,
#main-body .panel-title,
#main-body .card-header {
  background: rgba(11, 79, 108, 0.55) !important;
  color: var(--sync-text) !important;
  border-bottom: 1px solid rgba(127, 212, 255, 0.15) !important;
}

/* Lijstregels netjes */
#main-body .list-group-item {
  border-color: rgba(127, 212, 255, 0.12) !important;
}

/* Form inputs (die zijn vaak nog wit) */
#main-body input,
#main-body select,
#main-body textarea {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--sync-text) !important;
  border: 1px solid rgba(127, 212, 255, 0.20) !important;
}

/* Tabellen (facturen/overzicht) */
#main-body table,
#main-body .table,
#main-body .table>thead>tr>th,
#main-body .table>tbody>tr>td {
  background: rgba(11, 42, 61, 0.80) !important;
  color: var(--sync-text) !important;
  border-color: rgba(127, 212, 255, 0.12) !important;
}

#main-body .sh-extra{
  margin-top: 25px !important;
  display: grid !important;
  grid-template-columns: 260px 1fr 260px !important;
  gap: 20px !important;
  align-items: stretch !important;
}

#main-body .sh-extra-box{
  background: rgba(255,255,255,0.18) !important;
  border: 2px solid rgba(255,255,255,0.25) !important;
  border-radius: 16px !important;
  padding: 18px !important;
}

#main-body .sh-extra-photo{
  border-radius: 16px !important;
  overflow: hidden !important;
}

#main-body .sh-photo3{
  width: 100% !important;
  height: 260px !important;
  object-fit: cover !important;
  display: block !important;
}

#main-body .sh-wide{
  margin-top: 20px !important;
  background: rgba(255,255,255,0.18) !important;
  border: 2px solid rgba(255,255,255,0.25) !important;
  border-radius: 16px !important;
  padding: 18px !important;
}

@media (max-width: 992px){
  #main-body .sh-extra{
    grid-template-columns: 1fr !important;
  }
  #main-body .sh-photo3{
    height: 220px !important;
  }
}

/* Foto-3 altijd normaal formaat */
#main-body .sh-extra-photo{
  max-width: 100% !important;
}

#main-body .sh-photo3{
  width: 100% !important;
  max-width: 100% !important;
  height: 260px !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 16px !important;
}

/* Fix: icoon mag niet buiten de tegel steken + highlight moet onderaan blijven */
.tiles .tile{
    position: relative;
    overflow: hidden;          /* dit knipt alles netjes binnen de tegel */
    padding-left: 70px;        /* ruimte voor icoon links */
}

/* Icoon netjes linksboven in een klein blokje */
.tiles .tile > i{
    position: absolute;
    top: 14px;
    left: 14px;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    line-height: 1;
}

/* Zorg dat de highlight weer een lijn onderaan is (geen verticale balk) */
.tiles .tile .highlight{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
}

/* Als je theme een extra pseudo-balk gebruikt, zet die uit */
.tiles .tile:before,
.tiles .tile:after{
    content: none !important;
}