/* EVOHosting Premium — Blesta 6 client theme starter
   Kept separate from Blesta's theme.css so it can be maintained independently. */
:root {
    --evo-purple: #7D6FD5;
    --evo-purple-dark: #6555C0;
    --evo-ink: #252238;
    --evo-muted: #777487;
    --evo-page: #F5F5F9;
    --evo-border: #E7E5EF;
    --evo-card: #FFFFFF;
    --evo-radius: 14px;
    --evo-shadow: 0 5px 22px rgba(37, 34, 56, .055);
}
html { scroll-behavior: smooth; }
body {
    background: var(--evo-page);
    color: var(--evo-ink);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
}
a, a:hover, a:focus { color: var(--evo-purple-dark); }
a { transition: color .16s ease; }
.btn-primary, .btn.btn-primary {
    background-color: var(--evo-purple);
    border-color: var(--evo-purple);
    border-radius: 9px;
    box-shadow: none;
    font-weight: 600;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: var(--evo-purple-dark);
    border-color: var(--evo-purple-dark);
}
.btn, .form-control, .custom-select, select.form-control {
    border-radius: 9px;
}
.form-control, .custom-select, select.form-control {
    border-color: #DDD9E9;
    min-height: 40px;
}
.form-control:focus, .custom-select:focus {
    border-color: var(--evo-purple);
    box-shadow: 0 0 0 .2rem rgba(125, 111, 213, .16);
}
.card, .card-blesta, .panel, .well {
    border: 1px solid var(--evo-border);
    border-radius: var(--evo-radius);
    box-shadow: var(--evo-shadow);
}
.card-header, .panel-heading {
    background: #fff;
    border-bottom-color: var(--evo-border);
}
.table { color: var(--evo-ink); }
.table thead th {
    background: #F8F7FC;
    border-top: 0;
    border-bottom: 1px solid var(--evo-border);
    color: var(--evo-muted);
    font-size: .84rem;
    font-weight: 650;
}
.table td, .table th { vertical-align: middle; }
.pagination .page-item.active .page-link,
div.pagination ul.pagination li.active .page-link,
div.pagination ul.pagination li.active a {
    background-color: var(--evo-purple);
    border-color: var(--evo-purple);
}
.alert { border-radius: 10px; }
.badge { font-weight: 600; letter-spacing: .01em; }
.header {
    box-shadow: 0 3px 18px rgba(37, 34, 56, .06);
}
.nav-content nav.navbar {
    border: 0;
    border-radius: 12px;
}
.nav-content nav.navbar .navbar-nav > li > a {
    transition: background-color .15s ease, color .15s ease;
}
.nav-content nav.navbar .navbar-nav > li > a:hover,
.nav-content nav.navbar .navbar-nav > li > a:focus {
    background: rgba(125, 111, 213, .10);
}
.title { border-radius: 12px; }
.title h3 { font-weight: 700; letter-spacing: -.02em; }
.right_content .cards { margin-top: 1rem; }
@media (max-width: 767.98px) {
    body { font-size: 15px; }
    .container { padding-left: 14px; padding-right: 14px; }
    .table-responsive { border: 0; }
    .title { border-radius: 10px; }
}


/* Ensure EVO tokens win over the default Blesta theme stylesheet */
body { background-color: var(--evo-page) !important; color: var(--evo-ink); }
.btn-primary, .btn.btn-primary { background-color: var(--evo-purple) !important; border-color: var(--evo-purple) !important; }


/* EVOHosting Premium v4 — Nebulix-inspired client layout */
:root {
    --evo-purple: #7D6FD5;
    --evo-purple-dark: #5F4DBB;
    --evo-ink: #24213D;
    --evo-muted: #737187;
    --evo-page: #F6F6FB;
    --evo-border: #E8E7F1;
    --evo-card: #FFFFFF;
}
body { background: var(--evo-page) !important; color: var(--evo-ink); }
.header { position: sticky; top: 0; z-index: 1040; background: #fff; border-bottom: 1px solid var(--evo-border); box-shadow: none; }
.header .container-md { min-height: 76px; display: flex; align-items: center; }
.header .logo img { max-width: 210px; max-height: 48px; object-fit: contain; }
.nav-content { position: fixed; z-index: 1020; left: 0; top: 77px; bottom: 0; width: 245px; overflow-y: auto; background: #fff; border-right: 1px solid var(--evo-border); padding: 20px 12px; }
.nav-content nav.navbar { display: block; padding: 0; background: #fff !important; }
.nav-content nav.navbar .navbar-collapse { display: block !important; height: auto !important; padding: 0 !important; }
.nav-content nav.navbar .container-md { display: block !important; width: 100%; max-width: none; padding: 0 4px; }
.nav-content nav.navbar .navbar-nav { display: flex; flex-direction: column; width: 100%; }
.nav-content nav.navbar .navbar-nav + .navbar-nav { margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--evo-border); }
.nav-content nav.navbar .navbar-nav > li { width: 100%; margin: 2px 0; }
.nav-content nav.navbar .navbar-nav > li > a.nav-link { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 13px; border-radius: 9px; color: #4D4A65 !important; font-size: 14px; font-weight: 600; }
.nav-content nav.navbar .navbar-nav > li > a.nav-link i { width: 18px; color: var(--evo-purple); text-align: center; }
.nav-content nav.navbar .navbar-nav > li.active > a.nav-link,
.nav-content nav.navbar .navbar-nav > li > a.nav-link:hover,
.nav-content nav.navbar .navbar-nav > li > a.nav-link:focus { background: #EFECFF !important; color: var(--evo-purple-dark) !important; }
.nav-content .dropdown-menu { position: static !important; float: none; width: 100%; margin: 4px 0 8px; border: 0; box-shadow: none; background: #F8F7FD; }
.nav-content .dropdown-item { padding: 9px 12px; color: #4D4A65; white-space: normal; }
.nav-content .dropdown-item:hover { background: #EFECFF; color: var(--evo-purple-dark); }
.nav-content .navbar-toggler { display: none; }
.title { margin-left: 245px; background: transparent; border: 0; padding: 24px 24px 0; }
.title .container-md { max-width: 1280px; }
.title h3 { margin: 0; color: var(--evo-ink); font-size: 25px; font-weight: 750; }
body > .container-md, body > form.container-md { margin-left: 245px; width: calc(100% - 245px); max-width: none; padding: 22px 24px 36px; }
body > .container-md > .row { margin-left: 0; margin-right: 0; }
.right_content { min-width: 0; }
.evo-dashboard-welcome { padding: 25px 28px; margin: 0 0 22px; border: 1px solid #E5E0FA; border-radius: 16px; background: linear-gradient(115deg, #F1EEFF 0%, #FFFFFF 100%); }
.evo-dashboard-welcome .evo-dashboard-eyebrow { margin-bottom: 7px; color: var(--evo-purple-dark); font-size: 11px; font-weight: 800; letter-spacing: 1.4px; }
.evo-dashboard-welcome h2 { margin: 0 0 8px; color: var(--evo-ink); font-size: 25px; font-weight: 750; letter-spacing: -.4px; }
.evo-dashboard-welcome p { max-width: 760px; margin: 0; color: var(--evo-muted); font-size: 14px; }
.right_content .cards { margin-top: 0; }
.right_content .card, .right_content .panel, .right_content .well, .right_content .card-blesta { margin-bottom: 18px; }
.list-group-item { border-color: var(--evo-border); }
@media (max-width: 767.98px) {
    .header .container-md { min-height: 64px; }
    .nav-content { position: relative; top: auto; bottom: auto; width: 100%; padding: 8px 12px; border-right: 0; border-bottom: 1px solid var(--evo-border); overflow: visible; }
    .nav-content nav.navbar { padding: 0; }
    .nav-content nav.navbar .navbar-toggler { display: block; margin: 0 0 8px; border-color: #DCD6F5; background-color: var(--evo-purple-dark); }
    .nav-content nav.navbar .navbar-collapse { display: none !important; }
    .nav-content nav.navbar .navbar-collapse.show { display: block !important; }
    .nav-content nav.navbar .navbar-nav { flex-direction: column; }
    .title { margin-left: 0; padding: 20px 16px 0; }
    body > .container-md, body > form.container-md { margin-left: 0; width: 100%; padding: 18px 14px 28px; }
    .evo-dashboard-welcome { padding: 21px 20px; }
    .evo-dashboard-welcome h2 { font-size: 22px; }
}


/* Header alignment fix: logo left, language selector at the far right */
.header .container-md {
    width: 100%;
    max-width: none;
    padding-left: 24px;
    padding-right: 24px;
    justify-content: space-between;
}
.header .logo {
    float: none;
    flex: 0 0 auto;
    margin-right: auto;
}
.header .top-nav {
    float: none !important;
    flex: 0 0 auto;
    margin-left: auto;
}
.header .top-nav > ul {
    margin-bottom: 0;
}
@media (max-width: 767.98px) {
    .header .container-md {
        padding-left: 16px;
        padding-right: 16px;
    }
    .header .logo img {
        max-width: 175px;
        max-height: 42px;
    }
}


/* EVOHosting Nebulix sidebar: prominent portal button and icon navigation */
.nav-content .evo-sidebar-portal {
    display: flex; align-items: center; gap: 11px; width: 100%; box-sizing: border-box;
    margin: 0 0 18px; padding: 14px 15px; border-radius: 12px;
    background: #7D6FD5; color: #fff !important; text-decoration: none !important;
    font-size: 14px; font-weight: 750; line-height: 1.3;
    box-shadow: 0 7px 16px rgba(125,111,213,.22);
    transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.nav-content .evo-sidebar-portal > i:first-child { width: 20px; text-align: center; font-size: 16px; color: #fff; }
.nav-content .evo-sidebar-portal .evo-sidebar-portal-arrow { margin-left: auto; font-size: 12px; opacity: .9; }
.nav-content .evo-sidebar-portal:hover, .nav-content .evo-sidebar-portal:focus {
    background: #5F4DBB; color: #fff !important; transform: translateY(-1px);
    box-shadow: 0 9px 20px rgba(95,77,187,.28);
}
.nav-content .evo-primary-nav { margin-top: 0 !important; padding-top: 0 !important; border-top: 0 !important; }
.nav-content nav.navbar .navbar-nav > li > a.nav-link i { flex: 0 0 18px; font-size: 15px; }
.nav-content nav.navbar .navbar-nav > li.active > a.nav-link { font-weight: 750; }
@media (max-width: 767.98px) {
    .nav-content .evo-sidebar-portal { margin: 4px 0 12px; }
}

/* EVOHosting: verberg de algemene paginatitel op alle clientpagina's */
.title { display: none !important; }


/* EVOHosting sidebar icon visibility fix */
.nav-content nav.navbar .navbar-nav > li > a.nav-link .evo-nav-icon {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 18px !important;
    min-width: 18px;
    flex: 0 0 18px !important;
    color: #7D6FD5 !important;
    font-family: FontAwesome !important;
    font-style: normal !important;
    font-weight: normal !important;
    text-align: center;
    line-height: 1;
}
/* EVOHosting statusbalk – voeg toe aan evohosting.css of de stylesheet van het Blesta-thema */
@keyframes evo-status-pulse {
  0%, 100% {
    box-shadow: 0 0 0 3px rgba(125,111,213,.12);
    transform: scale(1);
    opacity: 1;
  }
  50% {
    box-shadow: 0 0 0 7px rgba(125,111,213,.04);
    transform: scale(.88);
    opacity: .78;
  }
}

.evo-status-pulse {
  animation: evo-status-pulse 2.8s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .evo-status-pulse {
    animation: none !important;
  }
}
/* EVOHosting CMS homepage – plaats dit in custom.css van je actieve Blesta-template */
/* EVOHosting refinement: zachte illustratieve watermark in de vier snelle-linkkaarten */
.evo-link-card{position:relative;isolation:isolate;overflow:hidden;min-height:190px;box-shadow:0 5px 18px rgba(49,35,105,.025);background:linear-gradient(135deg,#fff 0%,#fff 58%,#faf9ff 100%)!important;}
.evo-link-card:before{content:"";position:absolute;z-index:-1;top:-28px;right:-24px;width:170px;height:170px;border-radius:50%;background:radial-gradient(circle at 35% 65%,rgba(125,111,213,.14),rgba(125,111,213,.055) 42%,rgba(125,111,213,0) 72%);pointer-events:none;}
.evo-link-card:after{position:absolute;z-index:-1;right:8px;top:-21px;font-family:Arial,sans-serif;font-size:116px;line-height:1;font-weight:400;color:rgba(125,111,213,.075);pointer-events:none;transform:rotate(-12deg);transition:transform .25s ease,color .25s ease;}
.evo-link-card:nth-child(1):after{content:"♙";right:18px;top:-13px;font-size:112px;}
.evo-link-card:nth-child(2):after{content:"✉";right:9px;top:-18px;font-size:112px;}
.evo-link-card:nth-child(3):after{content:"▤";right:8px;top:-14px;font-size:110px;}
.evo-link-card:nth-child(4):after{content:"＋";right:12px;top:-12px;font-size:116px;}
.evo-link-card>*{position:relative;z-index:1;}
.evo-link-card:hover:after{transform:rotate(-7deg) scale(1.06);color:rgba(125,111,213,.12);}
.evo-link-card,.evo-service-card,.evo-plan-card,.evo-benefit-card{transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;}
.evo-link-card:hover,.evo-service-card:hover,.evo-plan-card:hover,.evo-benefit-card:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(73,55,145,.10);border-color:#c9c0f4!important;}
.evo-link-card:focus-visible,.evo-service-card:focus-visible,.evo-plan-card a:focus-visible,.evo-service-card a:focus-visible{outline:3px solid #7d6fd5;outline-offset:3px;}
@media(prefers-reduced-motion:reduce){.evo-link-card,.evo-service-card,.evo-plan-card,.evo-benefit-card{transition:none!important}.evo-link-card:hover,.evo-service-card:hover,.evo-plan-card:hover,.evo-benefit-card:hover{transform:none!important;}}
.evo-icon{width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:#eeeaff;color:#6555c0;border-radius:14px;margin-bottom:12px;}
.evo-icon svg{width:25px;height:25px;display:block;}
@media(max-width:600px){.evo-cta-inner{padding:30px 22px!important}.evo-cta-robot{right:-12px!important;opacity:.14!important;width:190px!important}.evo-cta-copy{position:relative;z-index:2}
}
/* EVO Calendar CMS-intropagina — EVOHosting paars #7D6FD5 */
.evo-calendar-page {
  --evo-purple: #7D6FD5;
  --evo-purple-dark: #5143a8;
  --evo-ink: #24233a;
  --evo-muted: #68677b;
  --evo-line: #e9e7f4;
  color: var(--evo-ink);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  line-height: 1.6;
  width: 100%;
  overflow: hidden;
}
.evo-calendar-page * { box-sizing: border-box; }
.evo-calendar-page a { text-decoration: none; }
.evo-calendar-page .evo-wrap { max-width: 1120px; margin: 0 auto; padding: 0 22px; }
.evo-calendar-page .evo-hero {
  position: relative; overflow: hidden; border: 1px solid #e7e2fb; border-radius: 26px;
  padding: 54px 48px;
  background: radial-gradient(circle at 90% 12%, rgba(125,111,213,.19), transparent 34%),
              linear-gradient(135deg, #fbfaff 0%, #f3f0ff 54%, #fff 100%);
}
.evo-calendar-page .evo-hero-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr); gap: 34px; align-items: center; }
.evo-calendar-page .evo-eyebrow { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 18px; color: var(--evo-purple-dark); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.evo-calendar-page .evo-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--evo-purple); box-shadow: 0 0 0 5px rgba(125,111,213,.13); display: inline-block; }
.evo-calendar-page h1 { margin: 0 0 18px; color: #211f38; font-size: clamp(34px, 4vw, 52px); line-height: 1.08; letter-spacing: -.04em; }
.evo-calendar-page .evo-highlight { color: var(--evo-purple-dark); }
.evo-calendar-page .evo-lead { max-width: 620px; margin: 0 0 26px; color: #5f5d73; font-size: 17px; }
.evo-calendar-page .evo-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.evo-calendar-page .evo-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; padding: 12px 19px; border: 1px solid transparent; border-radius: 12px; font-size: 14px; font-weight: 750; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.evo-calendar-page .evo-btn:hover { transform: translateY(-2px); }
.evo-calendar-page .evo-btn-primary { color: #fff; background: var(--evo-purple); box-shadow: 0 9px 22px rgba(93,76,183,.22); }
.evo-calendar-page .evo-btn-primary:hover { color: #fff; background: #6d5fc6; box-shadow: 0 12px 25px rgba(93,76,183,.27); }
.evo-calendar-page .evo-btn-secondary { color: #5143a8; background: rgba(255,255,255,.8); border-color: #dcd5fb; }
.evo-calendar-page .evo-hero-shot { width: 100%; display: block; border: 1px solid #dcd7ee; border-radius: 16px; box-shadow: 0 20px 45px rgba(49,38,110,.16); transform: rotate(1deg); }
.evo-calendar-page .evo-section { padding: 52px 0 8px; }
.evo-calendar-page .evo-section-heading { max-width: 720px; margin: 0 auto 28px; text-align: center; }
.evo-calendar-page .evo-kicker { margin: 0 0 8px; color: var(--evo-purple-dark); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.evo-calendar-page h2 { margin: 0 0 12px; color: #24223a; font-size: clamp(25px, 3vw, 34px); line-height: 1.2; letter-spacing: -.025em; }
.evo-calendar-page .evo-section-heading p { margin: 0; color: var(--evo-muted); }
.evo-calendar-page .evo-screenshots { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.evo-calendar-page .evo-shot-card { margin: 0; padding: 12px; border: 1px solid var(--evo-line); border-radius: 18px; background: #fff; box-shadow: 0 8px 24px rgba(39,32,82,.05); }
.evo-calendar-page .evo-shot-card img { display: block; width: 100%; height: auto; border-radius: 10px; border: 1px solid #e7e5ed; }
.evo-calendar-page .evo-shot-card figcaption { padding: 12px 5px 3px; color: #5f5d73; font-size: 13px; font-weight: 700; }
.evo-calendar-page .evo-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.evo-calendar-page .evo-feature { padding: 24px; border: 1px solid var(--evo-line); border-radius: 18px; background: #fff; box-shadow: 0 8px 24px rgba(39,32,82,.035); }
.evo-calendar-page .evo-feature-icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: 17px; border-radius: 13px; background: #f0edff; color: #5b4db0; font-size: 21px; }
.evo-calendar-page h3 { margin: 0 0 8px; color: #28263f; font-size: 17px; line-height: 1.35; }
.evo-calendar-page .evo-feature p { margin: 0; color: var(--evo-muted); font-size: 14px; }
.evo-calendar-page .evo-band { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 24px; margin: 44px 0 20px; padding: 30px 32px; border-radius: 20px; background: #292442; color: #fff; }
.evo-calendar-page .evo-band h2 { margin: 0 0 8px; color: #fff; font-size: 24px; }
.evo-calendar-page .evo-band p { margin: 0; color: #d4d0e9; font-size: 14px; }
.evo-calendar-page .evo-band .evo-btn { white-space: nowrap; }
.evo-calendar-page .evo-note { margin: 18px 0 0; color: #858298; font-size: 12px; text-align: center; }
@media (max-width: 760px) {
  .evo-calendar-page .evo-hero { padding: 34px 22px; }
  .evo-calendar-page .evo-hero-grid { grid-template-columns: 1fr; gap: 24px; }
  .evo-calendar-page .evo-screenshots, .evo-calendar-page .evo-features { grid-template-columns: 1fr; }
  .evo-calendar-page .evo-band { grid-template-columns: 1fr; padding: 25px 22px; }
  .evo-calendar-page .evo-band .evo-btn { justify-self: start; white-space: normal; }
}
/*
 * EVOHosting - conditionele hero
 * Desktop: bestaande grote hero tonen.
 * Tablet/mobiel: grote hero vervangen door compacte domeinzoekbalk.
 */

/* Standaardweergave voor desktop */
.evo-hero-desktop {
    display: block !important;
}

.evo-hero-mobile {
    display: none !important;
}

/* Tablet en mobiel */
@media screen and (max-width: 991px) {
    .evo-hero-desktop {
        display: none !important;
    }

    .evo-hero-mobile {
        display: block !important;
    }
}
