/*
 * ZOS Client visual layer
 * Presentation layer for the full WHMCS 7.6 template. Form names, Smarty
 * variables and WHMCS JavaScript hooks remain untouched.
 */

@font-face {
    font-family: "Sora";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/sora-400.woff2") format("woff2");
}

@font-face {
    font-family: "Sora";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/sora-500.woff2") format("woff2");
}

@font-face {
    font-family: "Sora";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/sora-600.woff2") format("woff2");
}

@font-face {
    font-family: "Sora";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/sora-700.woff2") format("woff2");
}

:root {
    --wilo-orange: #8a2cf6;
    --wilo-orange-strong: #9f4cff;
    --wilo-orange-soft: rgba(138, 44, 246, .14);
    --wilo-charcoal: #202020;
    --wilo-charcoal-2: #171717;
    --wilo-ink: #f5f3f8;
    --wilo-muted: #aaa6b2;
    --wilo-line: rgba(255, 255, 255, .10);
    --wilo-bg: #1b1b1b;
    --wilo-white: #242424;
    --wilo-success: #52d88a;
    --wilo-danger: #ff687a;
    --wilo-shadow: 0 20px 55px rgba(0, 0, 0, .26);
    --wilo-radius: 16px;
}

html,
body.wilo-body {
    min-height: 100%;
    color: var(--wilo-ink);
    background-color: #1b1b1b;
    background-image:
        linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
    background-size: 64px 64px;
}

body.wilo-body,
body.wilo-body input,
body.wilo-body button,
body.wilo-body select,
body.wilo-body textarea,
body.wilo-body h1,
body.wilo-body h2,
body.wilo-body h3,
body.wilo-body h4,
body.wilo-body h5,
body.wilo-body h6 {
    font-family: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    letter-spacing: -.025em;
}

body.wilo-body strong,
body.wilo-body b,
body.wilo-body .btn,
body.wilo-body .panel-title,
body.wilo-body label {
    font-weight: 600;
}

body.wilo-body a {
    color: #b777ff;
}

body.wilo-body a:hover,
body.wilo-body a:focus {
    color: #d0a6ff;
}

body.wilo-body :focus-visible {
    outline: 3px solid rgba(138, 44, 246, .38);
    outline-offset: 3px;
}

/* Shared application chrome */
.wilo-sidebar {
    border-right: 1px solid rgba(255, 255, 255, .08);
    background: #171717;
    box-shadow: none;
}

.wilo-sidebar-brand,
.wilo-public-header,
.wilo-checkout-header,
.wilo-topbar {
    border-color: rgba(255, 255, 255, .08);
    background: #202020;
}

.wilo-sidebar-brand img,
.wilo-public-logo img,
.wilo-checkout-logo img,
.wilo-footer-logo img {
    width: auto;
    height: 34px;
    max-width: 198px;
    object-fit: contain;
}

.wilo-sidebar-brand > a,
.wilo-public-logo,
.wilo-checkout-logo,
.wilo-footer-logo {
    display: flex;
    align-items: center;
    gap: 12px;
}

.wilo-public-logo .wilo-public-area-label {
    margin-left: 10px;
}

.wilo-nav-link,
.wilo-sidebar-utility,
.wilo-sidebar-order,
.wilo-topbar-context strong,
.wilo-account-button,
.wilo-language-button {
    color: #f5f3f8 !important;
}

.wilo-nav-link:hover,
.wilo-nav-link:focus,
.wilo-nav-link.is-active {
    color: #fff !important;
    background: rgba(138, 44, 246, .15);
}

.wilo-nav-link.is-active::before {
    background: #9f4cff;
    box-shadow: 0 0 18px rgba(159, 76, 255, .55);
}

.wilo-sidebar-order,
.wilo-btn-light,
.wilo-public-login,
.btn-primary,
body.wilo-body .btn-primary {
    color: #fff !important;
    border-color: #8a2cf6 !important;
    background: #8a2cf6 !important;
    box-shadow: 0 10px 28px rgba(138, 44, 246, .22);
}

.wilo-sidebar-order:hover,
.wilo-btn-light:hover,
.wilo-public-login:hover,
.btn-primary:hover,
body.wilo-body .btn-primary:hover {
    border-color: #9f4cff !important;
    background: #9f4cff !important;
    transform: translateY(-1px);
}

body.wilo-sidebar-collapsed .wilo-sidebar-brand > a::before {
    display: inline-block;
    width: 38px;
    height: 38px;
    content: "";
    background: url("../img/zos-icon.png") center / contain no-repeat;
}

.wilo-app-shell,
.wilo-main-body,
.wilo-content-container {
    background: transparent;
}

body.wilo-checkout-focus,
body.wilo-checkout-focus .wilo-main-body,
body.wilo-checkout-focus .wilo-content-container {
    background-color: #1b1b1b;
    background-image:
        linear-gradient(rgba(255, 255, 255, .022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .022) 1px, transparent 1px);
    background-size: 64px 64px;
}

.wilo-topbar {
    box-shadow: none;
}

.wilo-command-search,
.wilo-account-button,
.wilo-language-button,
.wilo-icon-button {
    color: #d9d5de;
    border-color: rgba(255, 255, 255, .10);
    background: #282828;
}

.wilo-command-search input {
    color: #f5f3f8;
}

.wilo-command-search input::placeholder {
    color: #88838e;
}

.wilo-command-search kbd {
    color: #9c96a3;
    border-color: rgba(255, 255, 255, .10);
    background: #1b1b1b;
}

.wilo-notifications-menu,
.wilo-account-menu,
body.wilo-body .dropdown-menu {
    color: #efedf2;
    border: 1px solid rgba(255, 255, 255, .10);
    background: #252525;
    box-shadow: var(--wilo-shadow);
}

body.wilo-body .dropdown-menu > li > a,
.wilo-notification-item {
    color: #d8d4dd;
}

body.wilo-body .dropdown-menu > li > a:hover,
.wilo-notification-item:hover {
    color: #fff;
    background: rgba(138, 44, 246, .12);
}

/* Dashboard */
.wilo-overview {
    overflow: hidden;
    border: 1px solid rgba(177, 113, 255, .28);
    background: #28202f;
    box-shadow: var(--wilo-shadow);
}

.wilo-overview::before {
    position: absolute;
    inset: 0;
    border-top: 3px solid #8a2cf6;
    content: "";
    pointer-events: none;
}

.wilo-overview-grid {
    opacity: .28;
}

.wilo-overview h1,
.wilo-overview p,
.wilo-overview-stats strong,
.wilo-overview-stats span {
    color: #fff;
}

.wilo-overview-art {
    color: #b777ff;
    opacity: .72;
}

.wilo-overview-stats {
    border-color: rgba(255, 255, 255, .10);
    background: rgba(22, 22, 22, .42);
}

.wilo-overview-stats a + a {
    border-color: rgba(255, 255, 255, .09);
}

.wilo-surface,
.wilo-native-panel,
.wilo-context-menu-content,
.wilo-page-heading,
body.wilo-body .panel,
body.wilo-body .card,
body.wilo-body .well,
body.wilo-body .list-group-item {
    color: #efedf2;
    border-color: rgba(255, 255, 255, .10);
    background: #242424;
    box-shadow: 0 14px 36px rgba(0, 0, 0, .16);
}

.wilo-surface-header,
.wilo-native-panel > header,
body.wilo-body .panel-heading,
body.wilo-body .card-header,
body.wilo-body .panel-footer,
body.wilo-body .card-footer {
    color: #f7f5fa;
    border-color: rgba(255, 255, 255, .08);
    background: #292929;
}

.wilo-surface-header h2,
.wilo-native-panel h3,
.wilo-service-main strong,
.wilo-simple-empty strong,
.wilo-quick-actions strong,
.wilo-account-summary strong,
body.wilo-body .panel-title,
body.wilo-body .card-title {
    color: #f7f5fa;
}

.wilo-service-row,
.wilo-simple-empty,
.wilo-quick-actions a,
.wilo-support-state,
.wilo-account-summary a,
.wilo-native-list > a,
.wilo-native-list > div {
    border-color: rgba(255, 255, 255, .08);
    background: #202020;
}

.wilo-service-row:hover,
.wilo-quick-actions a:hover,
.wilo-account-summary a:hover,
.wilo-native-list > a:hover {
    border-color: rgba(159, 76, 255, .42);
    background: #29242e;
    transform: translateY(-2px);
}

.wilo-service-icon,
.wilo-surface-header i,
.wilo-quick-actions > a > i:first-child,
.wilo-support-icon {
    color: #bd82ff;
    background: rgba(138, 44, 246, .14);
}

.wilo-btn-outline,
body.wilo-body .btn-default {
    color: #f5f3f8 !important;
    border-color: rgba(255, 255, 255, .14) !important;
    background: #292929 !important;
}

.wilo-btn-outline:hover,
body.wilo-body .btn-default:hover {
    color: #fff !important;
    border-color: rgba(159, 76, 255, .55) !important;
    background: #332a3d !important;
}

/* Forms, tables and native WHMCS screens */
body.wilo-body .form-control,
body.wilo-body input[type="text"],
body.wilo-body input[type="email"],
body.wilo-body input[type="password"],
body.wilo-body input[type="number"],
body.wilo-body input[type="tel"],
body.wilo-body input[type="url"],
body.wilo-body input[type="search"],
body.wilo-body select,
body.wilo-body textarea {
    color: #f4f1f7;
    border: 1px solid rgba(255, 255, 255, .12);
    background: #1f1f1f;
    box-shadow: none;
}

body.wilo-body .form-control:focus,
body.wilo-body input:focus,
body.wilo-body select:focus,
body.wilo-body textarea:focus {
    border-color: #8a2cf6;
    box-shadow: 0 0 0 3px rgba(138, 44, 246, .15);
}

body.wilo-body .form-control::placeholder,
body.wilo-body input::placeholder,
body.wilo-body textarea::placeholder {
    color: #77727d;
}

body.wilo-body .input-group-addon,
body.wilo-body .input-group-btn .btn {
    color: #d7d2dc;
    border-color: rgba(255, 255, 255, .12);
    background: #292929;
}

body.wilo-body table,
body.wilo-body .table {
    color: #dedbe3;
    background: transparent;
}

body.wilo-body .table > thead > tr > th,
body.wilo-body .table > tbody > tr > td,
body.wilo-body .table > tbody > tr > th,
body.wilo-body .table > tfoot > tr > td {
    border-color: rgba(255, 255, 255, .08);
}

body.wilo-body .table > thead > tr > th {
    color: #aaa6b2;
    background: #292929;
}

body.wilo-body .table-striped > tbody > tr:nth-of-type(odd) {
    background: rgba(255, 255, 255, .018);
}

body.wilo-body .table-hover > tbody > tr:hover {
    background: rgba(138, 44, 246, .08);
}

body.wilo-body .dataTables_wrapper,
body.wilo-body .dataTables_info,
body.wilo-body .dataTables_length,
body.wilo-body .dataTables_filter,
body.wilo-body .dataTables_paginate {
    color: #aaa6b2;
}

body.wilo-body .pagination > li > a,
body.wilo-body .pagination > li > span {
    color: #d4cfd9;
    border-color: rgba(255, 255, 255, .10);
    background: #252525;
}

body.wilo-body .pagination > .active > a,
body.wilo-body .pagination > .active > span {
    color: #fff;
    border-color: #8a2cf6;
    background: #8a2cf6;
}

body.wilo-body hr,
body.wilo-body .divider {
    border-color: rgba(255, 255, 255, .08);
}

body.wilo-body .text-muted,
body.wilo-body small,
.wilo-service-category,
.wilo-service-main > a,
.wilo-simple-empty span,
.wilo-quick-actions small,
.wilo-support-state span,
.wilo-page-heading p,
.wilo-topbar-context span {
    color: #aaa6b2 !important;
}

body.wilo-body .alert {
    color: #eeeaf3;
    border-color: rgba(255, 255, 255, .12);
    background: #282828;
}

body.wilo-body .alert-success {
    border-color: rgba(82, 216, 138, .30);
    background: rgba(82, 216, 138, .10);
}

body.wilo-body .alert-warning {
    border-color: rgba(246, 190, 81, .30);
    background: rgba(246, 190, 81, .10);
}

body.wilo-body .alert-danger {
    border-color: rgba(255, 104, 122, .30);
    background: rgba(255, 104, 122, .10);
}

/* Login, registration and password recovery */
.wilo-public-header-inner,
.wilo-checkout-header-inner,
.wilo-auth-layout,
.wilo-register-shell {
    max-width: 1180px;
}

.wilo-auth-story,
.wilo-auth-access,
.wilo-register-intro,
.wilo-register-form,
.wilo-guest .wilo-main-body .logincontainer,
.wilo-guest .wilo-main-body .pwreset-container {
    color: #efedf2;
    border-color: rgba(255, 255, 255, .10);
    background: #242424;
    box-shadow: var(--wilo-shadow);
}

.wilo-auth-story {
    border-color: rgba(159, 76, 255, .26);
    background-color: #232126;
    background-image:
        linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
    background-size: 36px 36px;
}

.wilo-auth-story h1,
.wilo-auth-access h2,
.wilo-register-intro h1,
.wilo-register-form h2 {
    color: #fff;
}

.wilo-auth-story li,
.wilo-auth-story p,
.wilo-auth-access p,
.wilo-register-intro p {
    color: #b7b2bd;
}

.wilo-auth-story li i,
.wilo-auth-icon,
.wilo-field-icon {
    color: #bd82ff;
}

.wilo-auth-access .providerLinkingFeedback,
.wilo-auth-access .providerPreLinking,
.wilo-register-form .providerLinkingFeedback {
    border-color: rgba(255, 255, 255, .10);
    background: #202020;
}

/* Modal and contextual navigation */
.wilo-context-menu-toggle,
.wilo-context-menu-content,
body.wilo-body .modal-content {
    color: #efedf2;
    border-color: rgba(255, 255, 255, .10);
    background: #242424;
}

body.wilo-body .modal-header,
body.wilo-body .modal-footer {
    border-color: rgba(255, 255, 255, .08);
}

body.wilo-body .close {
    color: #fff;
    opacity: .8;
    text-shadow: none;
}

/* Footer */
.wilo-site-footer {
    color: #aaa6b2;
    border-top: 1px solid rgba(255, 255, 255, .08);
    background: #181818;
}

.wilo-footer-column h3,
.wilo-footer-brand strong,
.wilo-footer-bottom strong {
    color: #f7f5fa;
}

.wilo-site-footer a {
    color: #b6b1bc;
}

.wilo-site-footer a:hover {
    color: #c996ff;
}

.wilo-footer-bottom {
    border-color: rgba(255, 255, 255, .08);
}

/* Native WHMCS service, domain, invoice and ticket screens */
body.wilo-body .product-details,
body.wilo-body .product-details-tab-container,
body.wilo-body .domain-renewals,
body.wilo-body .domain-pricing,
body.wilo-body .ticket-reply,
body.wilo-body .ticket-replies,
body.wilo-body .invoice-container,
body.wilo-body .credit-card,
body.wilo-body .masspay-container,
body.wilo-body .kb-article-content,
body.wilo-body .announcement-single,
body.wilo-body .download-category {
    color: #efedf2;
    border-color: rgba(255, 255, 255, .10);
    background: #242424;
    box-shadow: 0 14px 36px rgba(0, 0, 0, .16);
}

body.wilo-body .product-status,
body.wilo-body .module-client-area,
body.wilo-body .tab-content,
body.wilo-body .nav-tabs > li > a,
body.wilo-body .list-group,
body.wilo-body .ticket-reply .user,
body.wilo-body .ticket-reply .admin,
body.wilo-body .invoice-container .invoice-status {
    border-color: rgba(255, 255, 255, .09);
}

body.wilo-body .nav-tabs {
    border-color: rgba(255, 255, 255, .10);
}

body.wilo-body .nav-tabs > li > a {
    color: #aaa6b2;
    background: #202020;
}

body.wilo-body .nav-tabs > li.active > a,
body.wilo-body .nav-tabs > li.active > a:hover,
body.wilo-body .nav-tabs > li.active > a:focus {
    color: #fff;
    border-color: rgba(159, 76, 255, .46);
    border-bottom-color: #242424;
    background: #242424;
}

body.wilo-body .module-client-area .btn,
body.wilo-body .product-details .btn {
    min-height: 42px;
    border-radius: 10px;
}

body.wilo-body .module-client-area .btn-primary,
body.wilo-body .module-client-area .btn-success,
body.wilo-body .module-client-area input[type="submit"] {
    color: #fff !important;
    border-color: #8a2cf6 !important;
    background: #8a2cf6 !important;
}

body.wilo-body .label,
body.wilo-body .badge {
    border: 1px solid rgba(255, 255, 255, .10);
    color: #f5f3f8;
    background: #302a36;
}

body.wilo-body .status-active,
body.wilo-body .status-paid,
body.wilo-body .label-success {
    color: #8ff0b6 !important;
    border-color: rgba(82, 216, 138, .26);
    background: rgba(82, 216, 138, .10) !important;
}

body.wilo-body .status-pending,
body.wilo-body .status-unpaid,
body.wilo-body .label-warning {
    color: #ffd27a !important;
    border-color: rgba(246, 190, 81, .26);
    background: rgba(246, 190, 81, .10) !important;
}

body.wilo-body .status-suspended,
body.wilo-body .status-cancelled,
body.wilo-body .status-terminated,
body.wilo-body .label-danger {
    color: #ff98a5 !important;
    border-color: rgba(255, 104, 122, .26);
    background: rgba(255, 104, 122, .10) !important;
}

/* Keep country, date and select popovers readable in dark mode. */
body.wilo-body .intl-tel-input .country-list,
body.wilo-body .bootstrap-datetimepicker-widget,
body.wilo-body .selectize-dropdown,
body.wilo-body .tt-menu,
body.wilo-body .typeahead {
    color: #efedf2;
    border-color: rgba(255, 255, 255, .12);
    background: #292929;
    box-shadow: var(--wilo-shadow);
}

body.wilo-body .intl-tel-input .country-list .country:hover,
body.wilo-body .intl-tel-input .country-list .country.highlight,
body.wilo-body .selectize-dropdown-content .option.active,
body.wilo-body .tt-suggestion:hover {
    color: #fff;
    background: rgba(138, 44, 246, .14);
}

/* Standalone OAuth authorization flow */
body.zos-oauth-body {
    color: #efedf2;
    background-color: #1b1b1b;
}

body.zos-oauth-body section#header,
body.zos-oauth-body section#footer {
    color: #aaa6b2;
    border-color: rgba(255, 255, 255, .09);
    background: #202020;
}

body.zos-oauth-body .content-container {
    color: #efedf2;
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 16px;
    background: #242424;
    box-shadow: 0 20px 55px rgba(0, 0, 0, .26);
}

body.zos-oauth-body .action-buttons {
    border-color: rgba(255, 255, 255, .09);
    background: #292929;
}

/* A subtle grid gives depth without gradients or bright white surfaces. */
.wilo-overview,
.wilo-auth-story,
.wilo-register-intro {
    background-color: #242126;
    background-image:
        linear-gradient(rgba(255, 255, 255, .022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .022) 1px, transparent 1px);
    background-size: 38px 38px;
}

.wilo-overview::after,
.wilo-auth-story::after {
    display: none;
}

.wilo-overview::before {
    border-top-width: 2px;
}

/* Lightweight, consistent motion */
.wilo-surface,
.wilo-native-panel,
.wilo-service-row,
.wilo-quick-actions a,
.wilo-account-summary a,
.wilo-auth-story,
.wilo-auth-access {
    animation: zos-rise .46s ease both;
}

@keyframes zos-rise {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 991px) {
    .wilo-topbar,
    .wilo-public-header,
    .wilo-checkout-header {
        background: #202020;
    }

    .wilo-sidebar {
        box-shadow: 18px 0 50px rgba(0, 0, 0, .42);
    }

    .wilo-overview {
        border-radius: 18px;
    }
}

@media (max-width: 767px) {
    html,
    body.wilo-body {
        background-size: 42px 42px;
    }

    .wilo-public-header-inner nav > a:not(.wilo-public-login):not(.wilo-cart-link) {
        display: none;
    }

    .wilo-sidebar-brand img,
    .wilo-public-logo img,
    .wilo-checkout-logo img,
    .wilo-footer-logo img {
        height: 30px;
        max-width: 182px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}