@font-face {
    font-family: "Rubik";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/rubik-medium-latin.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: #17191b;
    --wilo-ink: #16181b;
    --wilo-muted: #69727d;
    --wilo-line: rgba(255, 255, 255, .10);
    --wilo-bg: #f6f8fa;
    --wilo-white: #fff;
    --wilo-success: #20a95b;
    --wilo-danger: #d83b42;
    --wilo-shadow: 0 10px 32px rgba(24, 28, 33, .07);
    --wilo-radius: 14px;
    --wilo-sidebar: 264px;
    --wilo-topbar: 84px;
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: var(--wilo-bg);
}

body.wilo-body {
    min-height: 100vh;
    margin: 0;
    color: var(--wilo-ink);
    background: var(--wilo-bg);
    font-family: "Rubik", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -.05em;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
}

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: "Rubik", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 500;
    letter-spacing: -.05em;
}

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

body.wilo-body i[class^="fa"],
body.wilo-body i[class*=" fa"] {
    letter-spacing: normal;
}

body.wilo-body a {
    color: var(--wilo-orange);
    transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

body.wilo-body a:hover,
body.wilo-body a:focus {
    color: var(--wilo-orange-strong);
    text-decoration: none;
}

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

/* Keep international dialing controls readable in registration forms. */
body.wilo-body .wilo-phone-field > .field-icon {
    display: none !important;
}

body.wilo-body .wilo-phone-field .intl-tel-input {
    display: grid !important;
    width: 100% !important;
    min-height: 47px;
    grid-template-columns: 126px minmax(0, 1fr);
    align-items: stretch;
    border: 1px solid var(--wilo-line);
    border-radius: 8px;
    background: #242424;
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

body.wilo-body .wilo-phone-field .intl-tel-input input.field {
    position: relative;
    z-index: 1;
    width: 100% !important;
    min-width: 0;
    height: 45px;
    min-height: 45px;
    grid-column: 2;
    grid-row: 1;
    margin: 0 !important;
    padding: 10px 14px !important;
    border: 0 !important;
    border-radius: 0 8px 8px 0 !important;
    background: transparent;
    box-shadow: none !important;
    text-indent: 0 !important;
}

body.wilo-body .wilo-phone-field .intl-tel-input .flag-container {
    position: relative !important;
    inset: auto !important;
    z-index: 3;
    width: 126px !important;
    height: 45px;
    grid-column: 1;
    grid-row: 1;
    padding: 0;
}

body.wilo-body .wilo-phone-field .intl-tel-input .selected-flag {
    width: 126px !important;
    height: 45px;
    border-right: 1px solid var(--wilo-line);
    border-radius: 8px 0 0 8px;
    background: #292929;
}

body.wilo-body .wilo-phone-field .intl-tel-input .selected-dial-code {
    color: var(--wilo-ink);
}

body.wilo-body .wilo-phone-field .intl-tel-input:focus-within {
    border-color: var(--wilo-orange);
    box-shadow: 0 0 0 3px rgba(138, 44, 246, .12);
}

.wilo-sidebar {
    position: fixed;
    z-index: 1040;
    inset: 0 auto 0 0;
    display: flex;
    width: var(--wilo-sidebar);
    flex-direction: column;
    color: #fff;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, 0)),
        var(--wilo-charcoal-2);
    box-shadow: 8px 0 30px rgba(0, 0, 0, .08);
    transition: width .22s ease, transform .22s ease;
}

.wilo-sidebar-brand {
    position: relative;
    min-height: 100px;
    padding: 24px 26px 15px;
}

.wilo-sidebar-brand > a {
    display: block;
    color: #fff;
}

.wilo-sidebar-brand img {
    display: block;
    width: 190px;
    max-width: 100%;
    height: auto;
}

.wilo-sidebar-brand span {
    display: block;
    margin-top: 8px;
    color: rgba(255, 255, 255, .7);
    font-size: 13px;
    font-weight: 500;
}

.wilo-sidebar-collapse {
    position: absolute;
    top: 26px;
    right: -18px;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 50%;
    color: #fff;
    background: #292c2f;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .2);
}

.wilo-sidebar-nav {
    display: flex;
    gap: 4px;
    padding: 4px 12px;
    flex-direction: column;
}

.wilo-nav-link {
    position: relative;
    display: flex;
    min-height: 50px;
    padding: 0 18px;
    align-items: center;
    gap: 15px;
    border-radius: 10px;
    color: rgba(255, 255, 255, .78) !important;
    font-size: 15px;
    font-weight: 500;
}

.wilo-nav-link::before {
    position: absolute;
    top: 11px;
    bottom: 11px;
    left: -12px;
    width: 4px;
    border-radius: 0 6px 6px 0;
    background: transparent;
    content: "";
}

.wilo-nav-link i {
    width: 20px;
    color: rgba(255, 255, 255, .72);
    font-size: 18px;
    text-align: center;
}

.wilo-nav-link:hover,
.wilo-nav-link:focus,
.wilo-nav-link.is-active {
    color: #fff !important;
    background: rgba(255, 255, 255, .075);
}

.wilo-nav-link.is-active::before {
    background: var(--wilo-orange);
}

.wilo-nav-link.is-active i {
    color: var(--wilo-orange);
}

.wilo-sidebar-footer {
    display: flex;
    gap: 8px;
    margin-top: auto;
    padding: 16px 26px 22px;
    flex-direction: column;
}

.wilo-sidebar-order {
    display: flex;
    min-height: 48px;
    margin-bottom: 8px;
    padding: 0 16px;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border: 1px solid var(--wilo-orange);
    border-radius: 9px;
    color: var(--wilo-orange) !important;
    font-weight: 500;
}

.wilo-sidebar-order:hover,
.wilo-sidebar-order:focus {
    color: #fff !important;
    background: var(--wilo-orange);
}

.wilo-sidebar-utility {
    display: flex;
    min-height: 42px;
    padding: 0 10px;
    align-items: center;
    gap: 13px;
    color: rgba(255, 255, 255, .66) !important;
    font-size: 13px;
}

.wilo-sidebar-utility i {
    width: 18px;
    font-size: 16px;
    text-align: center;
}

.wilo-sidebar-utility:hover,
.wilo-sidebar-utility:focus {
    color: #fff !important;
}

.wilo-app-shell {
    min-height: 100vh;
    margin-left: var(--wilo-sidebar);
    transition: margin-left .22s ease;
}

.wilo-topbar {
    position: sticky;
    z-index: 1020;
    top: 0;
    display: grid;
    min-height: var(--wilo-topbar);
    padding: 14px 26px;
    grid-template-columns: minmax(190px, 1fr) minmax(340px, 520px) minmax(290px, 1fr);
    align-items: center;
    gap: 26px;
    border-bottom: 1px solid var(--wilo-line);
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 2px 14px rgba(22, 24, 27, .025);
    backdrop-filter: blur(14px);
}

.wilo-topbar-context {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 12px;
}

.wilo-topbar-context strong,
.wilo-topbar-context span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wilo-topbar-context strong {
    color: var(--wilo-ink);
    font-size: 19px;
    font-weight: 500;
}

.wilo-topbar-context span {
    color: var(--wilo-muted);
    font-size: 12px;
}

.wilo-command-search {
    position: relative;
    display: flex;
    width: 100%;
    height: 46px;
    padding: 0 12px 0 44px;
    align-items: center;
    border: 1px solid var(--wilo-line);
    border-radius: 10px;
    background: #292929;
}

.wilo-command-search > i {
    position: absolute;
    left: 17px;
    color: #8c949c;
}

.wilo-command-search input {
    width: 100%;
    height: 42px;
    padding: 0 10px 0 0;
    border: 0;
    outline: 0;
    color: var(--wilo-ink);
    background: transparent;
    font-size: 14px;
}

.wilo-command-search kbd {
    min-width: 48px;
    padding: 4px 6px;
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 6px;
    color: #7d858e;
    background: #242424;
    box-shadow: none;
    font-family: inherit;
    font-size: 10px;
    font-weight: 500;
    text-align: center;
}

.wilo-topbar-actions {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.wilo-icon-button,
.wilo-language-button,
.wilo-account-button,
.wilo-mobile-menu {
    display: inline-flex;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 9px;
    color: var(--wilo-ink);
    background: transparent;
}

.wilo-icon-button:hover,
.wilo-language-button:hover,
.wilo-account-button:hover,
.wilo-mobile-menu:hover {
    background: #292929;
}

.wilo-icon-button {
    position: relative;
    font-size: 18px;
}

.wilo-notification-count {
    position: absolute;
    top: 1px;
    right: 0;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border: 2px solid #fff;
    border-radius: 9px;
    color: #fff;
    background: var(--wilo-orange);
    font-size: 9px;
    font-weight: 500;
    line-height: 14px;
}

.wilo-language-button {
    gap: 9px;
    padding: 0 12px;
    color: #ded9e3;
    font-size: 13px;
}

.wilo-language-button .fa-chevron-down,
.wilo-account-button .fa-chevron-down {
    font-size: 9px;
}

.wilo-account-button {
    max-width: 245px;
    gap: 10px;
    padding: 0 10px 0 5px;
}

.wilo-account-avatar {
    display: inline-flex;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
    border-radius: 50%;
    color: #fff;
    background: var(--wilo-orange);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
}

.wilo-account-name {
    overflow: hidden;
    color: #2e3338;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wilo-notifications-menu,
.wilo-account-menu,
.wilo-topbar .dropdown-menu {
    min-width: 250px;
    margin-top: 10px;
    padding: 8px;
    border: 1px solid var(--wilo-line);
    border-radius: 10px;
    box-shadow: var(--wilo-shadow);
}

.wilo-dropdown-title {
    padding: 9px 11px 11px;
    color: var(--wilo-ink);
    font-size: 13px;
    font-weight: 500;
}

.wilo-notification-item,
.wilo-dropdown-empty {
    display: flex;
    padding: 10px 11px;
    align-items: flex-start;
    gap: 10px;
    border-radius: 7px;
    color: #d3ced8 !important;
    font-size: 12px;
}

.wilo-notification-item:hover {
    background: #292929;
}

.wilo-dropdown-empty {
    color: var(--wilo-muted) !important;
}

.wilo-account-menu > li > a,
.wilo-topbar .dropdown-menu > li > a {
    padding: 10px 12px;
    border-radius: 7px;
    color: #d3ced8;
    font-size: 13px;
}

.wilo-account-menu > li > a:hover,
.wilo-topbar .dropdown-menu > li > a:hover {
    color: var(--wilo-orange);
    background: var(--wilo-orange-soft);
}

.wilo-account-menu i {
    width: 20px;
    margin-right: 6px;
    text-align: center;
}

body.wilo-authenticated section#main-body.wilo-main-body {
    min-height: calc(100vh - var(--wilo-topbar) - 64px);
    margin: 0;
    padding: 16px 18px 8px;
    background: var(--wilo-bg);
}

.wilo-content-container {
    width: 100%;
    max-width: none;
    margin: 0 auto;
    padding: 0;
}

.wilo-content-container > .row {
    margin-right: -6px;
    margin-left: -6px;
}

.wilo-content-container > .row > [class*="col-"] {
    padding-right: 6px;
    padding-left: 6px;
}

.wilo-body .main-content {
    min-height: 0;
    margin-bottom: 12px;
}

.wilo-dashboard {
    width: 100%;
}

.wilo-overview {
    position: relative;
    min-height: 282px;
    overflow: hidden;
    margin-bottom: 12px;
    padding: 32px 34px 0;
    border-radius: var(--wilo-radius);
    color: #fff;
    background: linear-gradient(118deg, #9f4cff 0%, var(--wilo-orange) 47%, #7a1ee2 100%);
    box-shadow: 0 14px 36px rgba(138, 44, 246, .2);
}

.wilo-overview-grid {
    position: absolute;
    inset: 0;
    opacity: .17;
    background-image:
        linear-gradient(rgba(255, 255, 255, .3) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .3) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .35) 42%, #000 100%);
}

.wilo-overview::after {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 28% 34%, rgba(255, 255, 255, .13), transparent 36%);
    content: "";
    pointer-events: none;
}

.wilo-overview-content {
    position: relative;
    z-index: 2;
    max-width: 620px;
}

.wilo-overview h1 {
    margin: 0 0 6px;
    color: #fff;
    font-size: clamp(30px, 2.7vw, 40px);
    font-weight: 500;
    letter-spacing: -.05em;
    line-height: 1.12;
}

.wilo-overview p {
    margin: 0;
    color: rgba(255, 255, 255, .9);
    font-size: 16px;
}

.wilo-overview-actions {
    display: flex;
    margin-top: 18px;
    flex-wrap: wrap;
    gap: 10px;
}

.wilo-overview-actions .btn {
    min-height: 44px;
    padding: 11px 20px;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 500;
}

.wilo-btn-light {
    border: 1px solid #fff;
    color: var(--wilo-orange) !important;
    background: #242424;
    box-shadow: 0 8px 22px rgba(121, 47, 0, .12);
}

.wilo-btn-light:hover,
.wilo-btn-light:focus {
    color: var(--wilo-orange-strong) !important;
    background: #242424;
    transform: translateY(-1px);
}

.wilo-btn-ghost {
    border: 1px solid rgba(255, 255, 255, .85);
    color: #fff !important;
    background: rgba(255, 255, 255, .05);
}

.wilo-btn-ghost:hover,
.wilo-btn-ghost:focus {
    color: #fff !important;
    background: rgba(255, 255, 255, .14);
}

.wilo-overview-art {
    position: absolute;
    z-index: 1;
    top: 20px;
    right: 54px;
    width: min(24%, 300px);
    color: rgba(255, 255, 255, .28);
}

.wilo-overview-art svg {
    width: 100%;
    height: auto;
}

.wilo-overview-stats {
    position: absolute;
    z-index: 3;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    min-height: 74px;
    padding: 0 34px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, .24);
    background: rgba(186, 57, 0, .1);
}

.wilo-overview-stats a {
    display: grid;
    min-height: 48px;
    padding: 5px 20px;
    grid-template-columns: 32px 40px minmax(0, 1fr);
    align-items: center;
    color: #fff !important;
    border-right: 1px solid rgba(255, 255, 255, .27);
}

.wilo-overview-stats a:last-child {
    border-right: 0;
}

.wilo-overview-stats i {
    font-size: 21px;
}

.wilo-overview-stats strong {
    font-size: 25px;
    font-weight: 500;
}

.wilo-overview-stats span {
    color: rgba(255, 255, 255, .88);
    font-size: 12px;
    line-height: 1.3;
}

.wilo-dashboard-row {
    display: flex;
    margin: 0 -6px 12px;
}

.wilo-dashboard-row::before,
.wilo-dashboard-row::after {
    display: none;
}

.wilo-dashboard-row > [class*="col-"] {
    display: flex;
    padding-right: 6px;
    padding-left: 6px;
}

.wilo-surface {
    width: 100%;
    min-height: 100%;
    overflow: hidden;
    border: 1px solid var(--wilo-line);
    border-radius: var(--wilo-radius);
    background: #242424;
    box-shadow: 0 4px 20px rgba(24, 28, 33, .035);
}

.wilo-surface-header {
    display: flex;
    min-height: 58px;
    padding: 0 20px;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--wilo-line);
}

.wilo-surface-header > div {
    display: flex;
    align-items: center;
    gap: 12px;
}

.wilo-surface-header > div > i {
    color: #ded9e3;
    font-size: 19px;
}

.wilo-surface-header h2 {
    margin: 0;
    color: var(--wilo-ink);
    font-size: 17px;
    font-weight: 500;
}

.wilo-surface-header > a {
    display: inline-flex;
    min-height: 40px;
    padding: 0 4px;
    align-items: center;
    gap: 9px;
    font-size: 12px;
    font-weight: 500;
}

.wilo-services-surface {
    display: flex;
    flex-direction: column;
}

.wilo-services-surface .wilo-service-row,
.wilo-services-surface .wilo-simple-empty {
    flex: 1;
}

.wilo-service-row {
    display: grid;
    min-height: 126px;
    padding: 20px;
    grid-template-columns: 64px minmax(180px, 1fr) auto auto;
    align-items: center;
    gap: 16px;
}

.wilo-service-icon {
    display: flex;
    width: 58px;
    height: 58px;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: var(--wilo-orange);
    background: var(--wilo-orange-soft);
    font-size: 24px;
}

.wilo-service-main {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.wilo-service-category {
    margin-bottom: 3px;
    color: #8a929a;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.wilo-service-main strong {
    overflow: hidden;
    margin-bottom: 4px;
    color: var(--wilo-ink);
    font-size: 15px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wilo-service-main a {
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wilo-service-status {
    display: inline-flex;
    min-height: 34px;
    padding: 0 12px;
    align-items: center;
    gap: 7px;
    border-radius: 17px;
    font-size: 11px;
    font-weight: 500;
}

.wilo-service-status.is-active {
    color: #167f42;
    background: rgba(82, 216, 138, .10);
}

.wilo-btn-outline {
    min-height: 42px;
    padding: 10px 17px;
    border: 1px solid var(--wilo-orange);
    border-radius: 8px;
    color: var(--wilo-orange) !important;
    background: #242424;
    font-size: 12px;
    font-weight: 500;
}

.wilo-btn-outline:hover,
.wilo-btn-outline:focus {
    color: #fff !important;
    background: var(--wilo-orange);
}

.wilo-simple-empty,
.wilo-support-state {
    display: flex;
    min-height: 126px;
    padding: 20px;
    align-items: center;
    gap: 18px;
}

.wilo-simple-empty > i {
    color: #c8ced4;
    font-size: 34px;
}

.wilo-simple-empty > div,
.wilo-support-state > div {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.wilo-simple-empty strong,
.wilo-support-state strong {
    color: #ece8f0 ;
    font-size: 13px;
    font-weight: 500;
}

.wilo-simple-empty span,
.wilo-support-state span {
    margin-top: 3px;
    color: var(--wilo-muted);
    font-size: 11px;
}

.wilo-quick-actions a {
    display: grid;
    min-height: 60px;
    margin: 0 18px;
    padding: 8px 3px;
    grid-template-columns: 34px minmax(0, 1fr) 20px;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--wilo-line);
    color: #ece8f0 !important;
}

.wilo-quick-actions a:last-child {
    border-bottom: 0;
}

.wilo-quick-actions a > i:first-child {
    color: #aaa6b2 ;
    font-size: 19px;
    text-align: center;
}

.wilo-quick-actions a > i:last-child {
    color: #8f969d;
    font-size: 10px;
}

.wilo-quick-actions a > span {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.wilo-quick-actions strong {
    color: #ece8f0;
    font-size: 13px;
    font-weight: 500;
}

.wilo-quick-actions small {
    overflow: hidden;
    margin-top: 1px;
    color: var(--wilo-muted);
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wilo-quick-actions a:hover {
    padding-right: 0;
    padding-left: 8px;
    color: var(--wilo-orange) !important;
}

.wilo-quick-actions a:hover > i,
.wilo-quick-actions a:hover strong {
    color: var(--wilo-orange);
}

.wilo-support-icon {
    display: flex !important;
    width: 60px;
    height: 60px;
    margin: 0 !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 60px;
    border-radius: 50%;
    color: #d3ced8 !important;
    background: #292929;
    font-size: 24px !important;
}

.wilo-account-summary {
    display: flex;
    min-height: 126px;
    padding: 13px 20px;
    flex-direction: column;
}

.wilo-account-summary > strong {
    padding: 3px 7px 7px;
    color: var(--wilo-ink);
    font-size: 14px;
    font-weight: 500;
}

.wilo-account-summary > a {
    display: grid;
    min-height: 38px;
    padding: 0 7px;
    grid-template-columns: 24px minmax(0, 1fr) 12px;
    align-items: center;
    color: #d3ced8 !important;
    font-size: 12px;
}

.wilo-account-summary > a:hover {
    color: var(--wilo-orange) !important;
}

.wilo-account-summary > a .fa-chevron-right {
    font-size: 9px;
}

.wilo-native-panels {
    display: grid;
    margin-bottom: 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.wilo-native-panel {
    overflow: hidden;
    border: 1px solid var(--wilo-line);
    border-radius: var(--wilo-radius);
    background: #242424;
}

.wilo-native-panel[menuItemName="Active Products/Services"],
.wilo-native-panel[menuItemName="Recent Support Tickets"],
.wilo-native-panel[menuItemName="Register a New Domain"] {
    display: none;
}

.wilo-native-panel > header {
    display: flex;
    min-height: 58px;
    padding: 0 20px;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--wilo-line);
}

.wilo-native-panel h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 500;
}

.wilo-native-panel h3 i {
    margin-right: 9px;
}

.wilo-native-panel-body {
    padding: 18px 20px;
}

.wilo-native-list > a,
.wilo-native-list > div {
    display: flex;
    min-height: 48px;
    padding: 0 20px;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--wilo-line);
    color: #d3ced8 !important;
}

.wilo-native-list > :last-child {
    border-bottom: 0;
}

.wilo-addon-output:empty,
.wilo-native-panels:empty {
    display: none;
}

.wilo-site-footer {
    margin: 0;
    padding: 40px 0;
    border-top: 1px solid #eee;
    color: #fff;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, 0)),
        var(--wilo-charcoal-2);
    font-size: 14px;
}

.wilo-site-footer-authenticated {
    margin-left: var(--wilo-sidebar);
    transition: margin-left .22s ease;
}

.wilo-site-footer-inner {
    width: calc(100% - 48px);
    max-width: 1320px;
    margin: 0 auto;
}

.wilo-footer-grid {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 30px;
}

.wilo-footer-brand {
    min-width: 400px;
    flex: 1;
}

.wilo-footer-logo,
.wilo-footer-green-badge {
    display: block;
    width: max-content;
    max-width: 100%;
}

.wilo-footer-logo img {
    display: block;
    width: 230px;
    max-width: 100%;
    height: auto;
}

.wilo-footer-green-badge {
    margin-top: 10px;
}

.wilo-footer-green-badge img {
    display: block;
    width: 200px;
    max-width: 100%;
    height: auto;
}

.wilo-footer-brand p,
.wilo-footer-brand address {
    max-width: 455px;
    margin: 15px 0 0;
    color: #fff;
    font-size: 14px;
    font-style: normal;
    line-height: 1.65;
}

.wilo-site-footer a {
    color: #fff !important;
    transition: color .15s ease, opacity .15s ease, transform .15s ease;
}

.wilo-site-footer a:hover,
.wilo-site-footer a:focus {
    color: #fff !important;
}

.wilo-footer-social {
    display: flex;
    margin-top: 10px;
    align-items: center;
    gap: 10px;
}

.wilo-footer-social a {
    display: inline-flex;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    border-radius: 0;
}

.wilo-footer-social img {
    display: block;
    width: 30px;
    height: 30px;
}

.wilo-footer-column {
    min-width: 180px;
    flex: 1;
}

.wilo-footer-column h3 {
    margin: 0 0 15px;
    color: #f97316;
    font-size: 17px;
    font-weight: 500;
    letter-spacing: -.04em;
}

.wilo-footer-column > a {
    display: block;
    width: fit-content;
    margin: 0;
    font-size: 14px;
    line-height: 1.8;
}

.wilo-footer-memberships {
    display: flex;
    margin-top: 30px;
    padding: 25px 0;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 40px;
    border-top: 1px solid #eee;
    border-bottom: 0;
}

.wilo-footer-memberships a {
    display: inline-flex;
    min-height: 56px;
    align-items: center;
    justify-content: center;
}

.wilo-footer-memberships img {
    display: block;
    width: auto;
    max-width: none;
    height: 55px;
    object-fit: contain;
    filter: grayscale(100%) brightness(200%);
    opacity: .9;
    transition: filter .18s ease, opacity .18s ease;
}

.wilo-footer-memberships a:hover img,
.wilo-footer-memberships a:focus img {
    filter: grayscale(20%) brightness(115%);
    opacity: 1;
}

.wilo-footer-bottom {
    padding-top: 0;
    color: #fff;
    font-size: 13px;
    line-height: 1.65;
    text-align: center;
}

.wilo-footer-bottom p {
    margin: 0;
}

.wilo-footer-bottom nav {
    display: flex;
    margin-top: 6px;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 20px;
}

.wilo-footer-bottom nav a {
    margin: 0 10px;
    color: #fff !important;
}

/*
 * WHMCS can continue serving the legacy products.tpl after an order-form
 * change. This desktop fallback promotes its left catalogue sidebar to the
 * same full-width horizontal navigation used by wilohosting_cart 1.0.7.
 */
@media (min-width: 992px) {
    body.wilo-template-products .wilo-shopping-cart #order-standard_cart > .row {
        display: grid;
        margin-right: 0;
        margin-left: 0;
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "catalogue-menu"
            "catalogue-heading"
            "catalogue-products";
        gap: 0;
    }

    body.wilo-template-products .wilo-shopping-cart #order-standard_cart > .row > [class*="col-"] {
        width: 100%;
        padding-right: 0;
        padding-left: 0;
        float: none;
    }

    body.wilo-template-products .wilo-shopping-cart #order-standard_cart > .row > .pull-md-right:first-child {
        grid-area: catalogue-heading;
    }

    body.wilo-template-products .wilo-shopping-cart #order-standard_cart > .row > .sidebar {
        display: block !important;
        margin: 0 0 24px;
        grid-area: catalogue-menu;
    }

    body.wilo-template-products .wilo-shopping-cart #order-standard_cart > .row > .sidebar + .pull-md-right {
        grid-area: catalogue-products;
    }

    body.wilo-template-products .wilo-shopping-cart #order-standard_cart > .row > .sidebar .panel {
        display: grid;
        width: 100%;
        min-height: 84px;
        margin: 0 0 12px;
        overflow: hidden;
        grid-template-columns: 250px minmax(0, 1fr);
        border: 1px solid var(--wilo-line);
        border-radius: 13px;
        background: #242424;
        box-shadow: 0 7px 24px rgba(24, 28, 33, .05);
    }

    body.wilo-template-products .wilo-shopping-cart #order-standard_cart > .row > .sidebar .panel:last-child {
        margin-bottom: 0;
    }

    body.wilo-template-products .wilo-shopping-cart #order-standard_cart > .row > .sidebar .panel-heading {
        display: flex;
        min-height: 84px;
        padding: 0 28px;
        align-items: center;
        border: 0;
        border-right: 1px solid rgba(255, 255, 255, .14);
        border-radius: 0;
        color: #fff;
        background: var(--wilo-charcoal-2);
    }

    body.wilo-template-products .wilo-shopping-cart #order-standard_cart > .row > .sidebar .panel-title {
        width: 100%;
        margin: 0;
        color: #fff;
        font-size: 17px;
        line-height: 1.25;
    }

    body.wilo-template-products .wilo-shopping-cart #order-standard_cart > .row > .sidebar .panel-minimise {
        display: none;
    }

    body.wilo-template-products .wilo-shopping-cart #order-standard_cart > .row > .sidebar .list-group {
        display: flex !important;
        min-width: 0;
        margin: 0;
        overflow-x: auto;
        border: 0;
    }

    body.wilo-template-products .wilo-shopping-cart #order-standard_cart > .row > .sidebar .list-group-item {
        display: flex;
        min-width: 185px;
        min-height: 84px;
        margin: 0;
        padding: 0 26px;
        align-items: center;
        flex: 1 0 auto;
        border-width: 0 1px 0 0;
        border-radius: 0;
        color: #d3ced8;
        background: #242424;
        font-size: 15px;
        line-height: 1.3;
        white-space: nowrap;
    }

    body.wilo-template-products .wilo-shopping-cart #order-standard_cart > .row > .sidebar .list-group-item:last-child {
        border-right: 0;
    }

    body.wilo-template-products .wilo-shopping-cart #order-standard_cart > .row > .sidebar .list-group-item:hover,
    body.wilo-template-products .wilo-shopping-cart #order-standard_cart > .row > .sidebar .list-group-item:focus {
        color: var(--wilo-orange);
        background: var(--wilo-orange-soft);
    }

    body.wilo-template-products .wilo-shopping-cart #order-standard_cart > .row > .sidebar .list-group-item.active {
        border-color: var(--wilo-orange);
        color: #fff;
        background: var(--wilo-orange);
        box-shadow: inset 0 -4px 0 rgba(255, 255, 255, .55);
    }
}

/* Generic WHMCS surfaces */
.wilo-body .header-lined {
    margin: 0 0 12px;
    padding: 0 0 10px;
    border-bottom: 1px solid var(--wilo-line);
}

.wilo-body .header-lined h1,
.wilo-body .wilo-page-heading h1 {
    margin: 0;
    padding: 0;
    border-bottom: 0;
    color: var(--wilo-ink);
    font-size: 27px;
    font-weight: 500;
    letter-spacing: -.05em;
}

.wilo-body .header-lined h1 small,
.wilo-body .wilo-page-heading h1 small {
    color: var(--wilo-muted);
    font-size: 16px;
    font-weight: 500;
}

.wilo-body .header-lined .breadcrumb {
    margin: 4px 0 0;
    padding: 0;
    background: transparent;
    font-size: 12px;
}

.wilo-body .header-lined p {
    margin: 4px 0 0;
    color: var(--wilo-muted);
}

.wilo-body .panel,
.wilo-body .card {
    border: 1px solid var(--wilo-line);
    border-radius: 11px;
    box-shadow: 0 4px 18px rgba(24, 28, 33, .035);
}

.wilo-body .panel-heading,
.wilo-body .card-header {
    border-bottom: 1px solid var(--wilo-line);
    border-radius: 10px 10px 0 0;
    background: #242424;
}

.wilo-body .panel-title {
    color: var(--wilo-ink);
    font-weight: 500;
}

.wilo-body .list-group-item {
    border-color: var(--wilo-line);
}

.wilo-body .list-group-item.active,
.wilo-body .list-group-item.active:hover {
    border-color: var(--wilo-orange);
    background: var(--wilo-orange);
}

.wilo-body .btn {
    min-height: 42px;
    border-radius: 8px;
    font-weight: 500;
}

.wilo-body .btn-sm,
.wilo-body .btn-xs {
    min-height: 34px;
}

.wilo-body .btn-primary,
.wilo-body .btn-success,
.wilo-body .btn-info {
    border-color: var(--wilo-orange);
    color: #fff;
    background: var(--wilo-orange);
}

.wilo-body .btn-primary:hover,
.wilo-body .btn-primary:focus,
.wilo-body .btn-success:hover,
.wilo-body .btn-success:focus,
.wilo-body .btn-info:hover,
.wilo-body .btn-info:focus {
    border-color: var(--wilo-orange-strong);
    color: #fff;
    background: var(--wilo-orange-strong);
}

.wilo-body .btn-default {
    border-color: rgba(255, 255, 255, .10);
    color: #ded9e3;
    background: #242424;
}

.wilo-body .form-control,
.wilo-body input.field,
.wilo-body select.field,
.wilo-body textarea.field {
    min-height: 46px;
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 8px;
    color: #2d3339;
    background: #242424;
    box-shadow: none;
}

.wilo-body .form-control:focus,
.wilo-body input.field:focus,
.wilo-body select.field:focus,
.wilo-body textarea.field:focus {
    border-color: var(--wilo-orange);
    box-shadow: 0 0 0 3px rgba(138, 44, 246, .12);
}

.wilo-body .table-container {
    overflow: hidden;
    padding: 10px;
    border: 1px solid var(--wilo-line);
    border-radius: 11px;
    background: #242424;
}

.wilo-body .table-container > .dataTables_wrapper,
.wilo-body .dataTables_wrapper {
    overflow: visible;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.wilo-body .dataTables_wrapper > .row {
    margin-right: 0;
    margin-left: 0;
}

.wilo-body .dataTables_wrapper > .row > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
}

.wilo-body .dataTables_wrapper > .row:first-child {
    display: flex;
    min-height: 52px;
    align-items: center;
    border-radius: 8px 8px 0 0;
    background: #292929;
}

.wilo-body .dataTables_wrapper .dataTables_info {
    margin: 0;
    padding: 16px !important;
    border: 0;
    color: #66707a;
    background: transparent;
    font-size: 14px;
    font-weight: 500;
}

.wilo-body .dataTables_wrapper .dataTables_filter label {
    margin: 0;
    padding: 6px 8px;
    font-weight: 500;
}

.wilo-body .dataTables_wrapper .dataTables_filter label .form-control {
    width: 210px;
    min-height: 38px;
    padding: 7px 10px 7px 38px !important;
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 7px;
    background-position: 9px center;
    background-color: #242424;
}

.wilo-body .dataTables_wrapper > .row:last-child {
    min-height: 48px;
    border-radius: 0 0 8px 8px;
    background: #292929;
}

.wilo-body .dataTables_wrapper .dataTables_length {
    color: #737c85;
    background: transparent;
    font-size: 14px;
}

.wilo-body .dataTables_wrapper .dataTables_length label {
    margin: 0;
    padding: 7px 10px;
    font-weight: 500;
}

.wilo-body .dataTables_wrapper .dataTables_paginate {
    padding: 7px 10px 0;
}

.wilo-body table.table > thead > tr > th {
    padding: 11px 10px;
    border-bottom: 2px solid rgba(138, 44, 246, .52);
    color: #7c858e;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: -.02em;
    text-transform: uppercase;
}

body.wilo-body .dataTables_wrapper table.table-list > thead > tr > th,
body.wilo-body .dataTables_wrapper table.table-list > thead > tr > th:nth-child(even) {
    border-bottom: 2px solid rgba(138, 44, 246, .52);
}

.wilo-body table.table > tbody > tr > td {
    padding: 12px 10px;
    border-top-color: rgba(255, 255, 255, .08);
    vertical-align: middle;
    font-size: 15px;
}

.wilo-context-menu {
    min-width: 0;
    margin-bottom: 18px;
}

.wilo-context-menu-content {
    display: block;
    min-height: 0;
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.wilo-context-menu-content::-webkit-scrollbar {
    height: 5px;
}

.wilo-context-menu-content::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #cbd1d6;
}

.wilo-context-menu-label {
    display: none;
}

.wilo-context-menu-label > span,
.wilo-context-menu-toggle-icon {
    display: inline-flex;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    color: var(--wilo-orange);
    background: var(--wilo-orange-soft);
    font-size: 16px;
}

.wilo-context-menu-label > div,
.wilo-context-menu-toggle > span:nth-child(2) {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 1px;
}

.wilo-context-menu-label strong,
.wilo-context-menu-toggle strong {
    color: var(--wilo-ink);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
}

.wilo-context-menu-label small,
.wilo-context-menu-toggle small {
    color: var(--wilo-muted);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.25;
}

.wilo-context-menu-toggle {
    display: none;
    width: 100%;
    min-height: 72px;
    margin-bottom: 8px;
    padding: 12px 16px;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--wilo-line);
    border-radius: 11px;
    color: var(--wilo-ink);
    background: #242424;
    box-shadow: 0 4px 18px rgba(24, 28, 33, .035);
    text-align: left;
}

.wilo-context-menu-toggle-chevron {
    margin-left: auto;
    color: #8d959d;
    font-size: 11px;
    transition: transform .18s ease;
}

.wilo-context-menu.is-open .wilo-context-menu-toggle-chevron {
    transform: rotate(180deg);
}

.wilo-context-menu .wilo-context-primary,
.wilo-context-menu .wilo-context-secondary {
    display: block;
    width: 100%;
}

.wilo-context-menu .panel {
    display: grid;
    width: 100%;
    min-height: 100px;
    overflow: hidden;
    margin: 0 0 14px;
    grid-template-columns: 280px minmax(0, 1fr);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 15px;
    background: #242424;
    box-shadow: 0 8px 26px rgba(24, 28, 33, .055);
}

.wilo-context-menu .wilo-context-secondary .panel:last-child,
.wilo-context-menu .wilo-context-primary:last-child .panel:last-child {
    margin-bottom: 0;
}

.wilo-context-menu .panel-heading {
    display: flex;
    min-height: 100px;
    padding: 0 30px;
    align-items: center;
    border: 0;
    border-right: 1px solid rgba(255, 255, 255, .08);
    border-radius: 0;
    background: var(--wilo-charcoal);
}

.wilo-context-menu .panel-title {
    color: #fff !important;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.25;
    white-space: nowrap;
}

.wilo-context-menu .panel-title > a {
    color: #fff !important;
}

.wilo-context-menu .panel-title > i:first-child:not(.panel-minimise) {
    width: 20px;
    margin-right: 8px;
    color: #fff;
    text-align: center;
}

.wilo-context-menu .panel-minimise {
    display: none;
}

.wilo-context-menu .panel-body,
.wilo-context-menu .panel-footer {
    display: flex !important;
    max-width: none;
    min-height: 100px;
    padding: 16px 28px;
    align-items: center;
    border: 0;
    color: #aaa6b2;
    background: #242424;
    font-size: 15px;
    line-height: 1.4;
}

.wilo-context-menu .list-group {
    display: flex !important;
    min-width: 0;
    margin: 0;
    align-items: stretch;
    overflow-x: auto;
}

.wilo-context-menu .panel > .panel-body,
.wilo-context-menu .panel > .panel-footer,
.wilo-context-menu .panel > .list-group {
    grid-column: 2;
}

.wilo-context-menu .list-group-item {
    display: flex;
    min-width: 205px;
    min-height: 100px;
    padding: 0 28px;
    flex: 1 0 auto;
    align-items: center;
    gap: 9px;
    border: 0;
    border-left: 1px solid rgba(255, 255, 255, .08);
    color: #aaa6b2;
    background: #242424;
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
    transition: color .15s ease, background .15s ease, box-shadow .15s ease;
}

.wilo-context-menu .list-group-item:hover,
.wilo-context-menu .list-group-item:focus {
    color: var(--wilo-orange);
    background: rgba(138, 44, 246, .10) ;
}

.wilo-context-menu .list-group-item.active,
.wilo-context-menu .list-group-item.active:hover,
.wilo-context-menu .list-group-item.active:focus,
.wilo-context-menu .list-group-item-selected {
    color: #fff !important;
    background: var(--wilo-orange) !important;
    box-shadow: inset 0 -5px 0 rgba(255, 255, 255, .52);
}

.wilo-context-menu .badge {
    min-width: 26px;
    padding: 4px 7px;
    border-radius: 999px;
    color: #6c747d;
    background: rgba(255, 255, 255, .08);
    font-size: 10px;
}

.wilo-context-menu .list-group-item.active .badge,
.wilo-context-menu .list-group-item-selected .badge {
    color: var(--wilo-orange);
    background: #242424;
}

.wilo-body .alert {
    border-radius: 9px;
}

/* Public and authentication shell */
.wilo-guest {
    background: #292929 !important;
}

/* Focused guest checkout */
.wilo-checkout-header {
    display: flex;
    min-height: 132px;
    align-items: center;
    color: #fff;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, 0)),
        var(--wilo-charcoal-2);
}

.wilo-checkout-header-inner {
    width: calc(100% - 48px);
    max-width: 1180px;
    margin: 0 auto;
}

.wilo-checkout-logo {
    display: block;
    width: max-content;
    max-width: 100%;
}

.wilo-checkout-logo img {
    display: block;
    width: 300px;
    max-width: 100%;
    height: auto;
}

body.wilo-checkout-focus,
body.wilo-checkout-focus .wilo-main-body,
body.wilo-checkout-focus .wilo-content-container {
    background: #242424;
}

body.wilo-checkout-focus .wilo-main-body.wilo-shopping-cart {
    min-height: calc(100vh - 132px);
    padding: 0 0 80px;
}

body.wilo-checkout-focus .wilo-content-container {
    width: 100%;
    padding: 0;
}

body.wilo-checkout-focus .wilo-content-container > .row {
    margin: 0;
}

body.wilo-checkout-focus .wilo-content-container .main-content {
    width: 100%;
    padding: 0;
    float: none;
}

body.wilo-checkout-focus .wilo-purchase-progress {
    width: 100%;
    max-width: none;
    margin: 0 0 48px;
    padding: 0;
    background: #292929;
}

body.wilo-checkout-focus .wilo-purchase-progress ol {
    position: relative;
    width: calc(100% - 48px);
    max-width: 1180px;
    min-height: 146px;
    margin: 0 auto;
    padding: 24px 36px;
    align-items: center;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

body.wilo-checkout-focus .wilo-purchase-progress ol::before,
body.wilo-checkout-focus .wilo-purchase-progress ol::after {
    position: absolute;
    z-index: 0;
    top: 51px;
    left: 10%;
    height: 3px;
    content: "";
}

body.wilo-checkout-focus .wilo-purchase-progress ol::before {
    right: 10%;
    background: var(--wilo-charcoal-2);
    opacity: .9;
}

body.wilo-checkout-focus .wilo-purchase-progress ol::after {
    width: 20%;
    background: var(--wilo-orange);
}

body.wilo-checkout-focus .wilo-purchase-progress.wilo-progress-step-2 ol::after {
    width: 40%;
}

body.wilo-checkout-focus .wilo-purchase-progress.wilo-progress-step-3 ol::after {
    width: 60%;
}

body.wilo-checkout-focus .wilo-purchase-progress.wilo-progress-step-4 ol::after {
    width: 80%;
}

body.wilo-checkout-focus .wilo-purchase-progress.wilo-progress-step-5 ol::after {
    width: 80%;
}

body.wilo-checkout-focus .wilo-purchase-progress li {
    gap: 11px;
    color: var(--wilo-charcoal-2);
    font-size: 15px;
}

body.wilo-checkout-focus .wilo-purchase-progress li > span {
    display: inline-flex;
    width: 54px;
    height: 54px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background: var(--wilo-charcoal-2);
    font-size: 19px;
}

body.wilo-checkout-focus .wilo-purchase-progress li.is-complete > span,
body.wilo-checkout-focus .wilo-purchase-progress li.is-current > span {
    color: #fff;
    background: var(--wilo-orange);
}

body.wilo-checkout-focus .wilo-purchase-progress li.is-current > span {
    box-shadow: 0 0 0 6px rgba(138, 44, 246, .14);
}

body.wilo-checkout-focus .wilo-purchase-progress li > strong {
    font-size: 15px;
}

body.wilo-checkout-focus #order-standard_cart {
    width: calc(100% - 48px);
    max-width: 1180px;
    margin-right: auto;
    margin-left: auto;
}

body.wilo-checkout-focus #order-standard_cart > .row {
    margin-right: 0;
    margin-left: 0;
}

body.wilo-checkout-focus #order-standard_cart > .row > [class*="col-"] {
    width: 100%;
    padding-right: 0;
    padding-left: 0;
    float: none;
}

body.wilo-checkout-focus #order-standard_cart > .row > .sidebar,
body.wilo-checkout-focus #order-standard_cart .sidebar-collapsed,
body.wilo-checkout-focus #order-standard_cart .wilo-products-menu {
    display: none !important;
}

body.wilo-checkout-focus #order-standard_cart .header-lined {
    margin-bottom: 28px;
    text-align: center;
}

body.wilo-checkout-focus #order-standard_cart .header-lined h1,
body.wilo-checkout-focus #order-standard_cart .header-lined p {
    margin-right: auto;
    margin-left: auto;
}

@media (max-width: 767px) {
    .wilo-checkout-header {
        min-height: 88px;
    }

    .wilo-checkout-header-inner {
        width: calc(100% - 32px);
    }

    .wilo-checkout-logo img {
        width: 220px;
    }

    body.wilo-checkout-focus .wilo-main-body.wilo-shopping-cart {
        min-height: calc(100vh - 88px);
        padding-bottom: 48px;
    }

    body.wilo-checkout-focus .wilo-purchase-progress {
        margin-bottom: 30px;
    }

    body.wilo-checkout-focus .wilo-purchase-progress ol {
        width: 100%;
        min-height: 102px;
        padding: 16px 4px;
    }

    body.wilo-checkout-focus .wilo-purchase-progress ol::before,
    body.wilo-checkout-focus .wilo-purchase-progress ol::after {
        top: 36px;
        height: 2px;
    }

    body.wilo-checkout-focus .wilo-purchase-progress li {
        gap: 7px;
        font-size: 10px;
    }

    body.wilo-checkout-focus .wilo-purchase-progress li > span {
        width: 40px;
        height: 40px;
        font-size: 14px;
    }

    body.wilo-checkout-focus .wilo-purchase-progress li > strong {
        max-width: 62px;
        overflow: visible;
        font-size: 10px;
        text-overflow: clip;
        white-space: normal;
    }

    body.wilo-checkout-focus #order-standard_cart {
        width: calc(100% - 28px);
    }
}

/* Comunicados desactivados: las rutas públicas siguen siendo válidas sin mostrar anuncios. */
.wilo-communications-disabled {
    display: flex;
    align-items: center;
    gap: 18px;
    max-width: 860px;
    margin: 28px auto;
    padding: 26px 30px;
    color: var(--wilo-ink, #202124);
    background: #242424;
    border: 1px solid var(--wilo-border, rgba(255, 255, 255, .10));
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(24, 31, 38, .05);
}

.wilo-communications-disabled-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    color: #8a2cf6;
    background: rgba(138, 44, 246, .14);
    border-radius: 12px;
    font-size: 20px;
}

.wilo-communications-disabled h2 {
    margin: 0 0 5px;
    color: var(--wilo-ink, #202124);
    font-size: 22px;
    font-weight: 700;
}

.wilo-communications-disabled p {
    margin: 0;
    color: var(--wilo-muted, #69727d);
    font-size: 15px;
}

.wilo-communications-disabled .btn {
    margin-top: 15px;
}

@media (max-width: 767px) {
    .wilo-communications-disabled {
        align-items: flex-start;
        margin: 20px 0;
        padding: 21px;
    }
}

/* Product actions: cancellation is secondary, clear and intentionally safe. */
.wilo-product-actions-row {
    margin-top: 18px;
}

.wilo-product-actions-row > .col-xs-12 {
    display: flex;
    justify-content: flex-end;
}

body.wilo-body a.wilo-product-cancel {
    display: inline-flex;
    min-height: 46px;
    padding: 11px 18px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 1px solid rgba(255, 104, 122, .28);
    border-radius: 10px;
    color: #a5282e;
    background: rgba(255, 104, 122, .10);
    box-shadow: none;
    font-size: 14px;
    line-height: 1.2;
}

.wilo-product-actions-row > .col-xs-12 .wilo-product-cancel {
    width: auto;
    min-width: 230px;
}

body.wilo-body a.wilo-product-cancel:hover,
body.wilo-body a.wilo-product-cancel:focus {
    border-color: #bd343b;
    color: #fff;
    background: #bd343b;
    box-shadow: 0 7px 18px rgba(189, 52, 59, .16);
    transform: translateY(-1px);
}

body.wilo-body a.wilo-product-cancel.disabled,
body.wilo-body a.wilo-product-cancel[disabled] {
    border-color: rgba(255, 104, 122, .20);
    color: #8b7779;
    background: rgba(255, 104, 122, .10);
    box-shadow: none;
    opacity: 1;
    transform: none;
}

@media (max-width: 767px) {
    .wilo-product-actions-row > .col-xs-12 .wilo-product-cancel {
        width: 100%;
        min-width: 0;
    }
}

.wilo-public-header {
    min-height: 78px;
    background: var(--wilo-charcoal);
}

.wilo-public-header-inner {
    display: flex;
    width: calc(100% - 48px);
    max-width: 1240px;
    min-height: 78px;
    margin: 0 auto;
    align-items: center;
    justify-content: space-between;
}

.wilo-public-logo img {
    display: block;
    width: 190px;
    height: auto;
}

.wilo-public-logo {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 16px;
}

.wilo-public-area-label {
    display: none;
    padding-left: 16px;
    border-left: 1px solid rgba(255, 255, 255, .24);
    color: rgba(255, 255, 255, .88);
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
}

body.wilo-template-login .wilo-public-logo img {
    width: 235px;
}

body.wilo-template-login .wilo-public-area-label {
    display: inline-block;
}

.wilo-public-header nav {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wilo-public-header nav a {
    display: inline-flex;
    min-height: 44px;
    padding: 0 14px;
    align-items: center;
    border-radius: 8px;
    color: rgba(255, 255, 255, .78);
    font-size: 13px;
}

.wilo-public-header nav a:hover {
    color: #fff;
    background: rgba(255, 255, 255, .07);
}

.wilo-public-header .wilo-public-login {
    margin-left: 6px;
    color: #fff;
    background: var(--wilo-orange);
}

.wilo-public-header .wilo-public-login:hover {
    background: var(--wilo-orange-strong);
}

.wilo-cart-link {
    justify-content: center;
    font-size: 16px !important;
}

.wilo-guest .wilo-main-body {
    min-height: calc(100vh - 142px);
    padding-top: 42px;
}

.wilo-template-login .main-content,
.wilo-template-pwreset .main-content,
.wilo-template-pwresetvalidation .main-content {
    display: flex;
    min-height: 650px;
    align-items: flex-start;
    justify-content: center;
}

.wilo-body .logincontainer {
    width: 100%;
    max-width: 500px;
    margin: 38px auto;
    padding: 34px;
    border: 1px solid var(--wilo-line);
    border-radius: 16px;
    background: #242424;
    box-shadow: var(--wilo-shadow);
}

.wilo-body .logincontainer .header-lined {
    text-align: left;
}

.wilo-body .login-form .btn-primary {
    min-width: 150px;
}

/* Wilohosting authentication experience */
.wilo-template-login .main-content {
    min-height: calc(100vh - 184px);
    align-items: center;
}

.wilo-template-login .logincontainer.wilo-auth-shell {
    display: grid;
    overflow: hidden;
    width: min(1080px, 100%);
    max-width: 1080px;
    min-height: 560px;
    margin: 24px auto 34px;
    padding: 0;
    grid-template-columns: minmax(360px, .92fr) minmax(440px, 1.08fr);
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 20px;
    background: #242424;
    box-shadow: 0 24px 70px rgba(19, 22, 25, .12);
}

.wilo-auth-story {
    position: relative;
    z-index: 0;
    display: flex;
    overflow: hidden;
    min-width: 0;
    padding: 52px 46px 34px;
    flex-direction: column;
    justify-content: space-between;
    color: #fff;
    background:
        radial-gradient(circle at 85% 18%, rgba(138, 44, 246, .38), transparent 31%),
        linear-gradient(145deg, #202326 0%, #151719 100%);
}

.wilo-auth-story::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    background:
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 36px 36px;
    content: "";
    mask-image: linear-gradient(to bottom right, #000, transparent 76%);
    -webkit-mask-image: linear-gradient(to bottom right, #000, transparent 76%);
}

.wilo-auth-story::after {
    position: absolute;
    z-index: -1;
    right: -115px;
    bottom: -125px;
    width: 300px;
    height: 300px;
    border: 54px solid rgba(138, 44, 246, .1);
    border-radius: 50%;
    content: "";
}

.wilo-auth-story-copy {
    position: relative;
    z-index: 1;
}

.wilo-auth-story-icon {
    position: relative;
    display: flex;
    width: 82px;
    height: 82px;
    margin-bottom: 46px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 22px;
    color: rgba(255, 255, 255, .9);
    background: rgba(255, 255, 255, .07);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
    font-size: 38px;
}

.wilo-auth-story-icon > span {
    position: absolute;
    right: -9px;
    bottom: -9px;
    display: flex;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    border: 4px solid #1a1c1f;
    border-radius: 11px;
    color: #fff;
    background: var(--wilo-orange);
    font-size: 14px;
}

.wilo-auth-story h1 {
    max-width: 380px;
    margin: 0;
    color: #fff;
    font-size: clamp(34px, 3.2vw, 46px);
    line-height: 1.05;
}

.wilo-auth-story-copy > p {
    max-width: 390px;
    margin: 20px 0 0;
    color: rgba(255, 255, 255, .69);
    font-size: 15px;
    line-height: 1.65;
}

.wilo-auth-benefits {
    display: grid;
    margin: 36px 0 0;
    padding: 0;
    gap: 16px;
    list-style: none;
}

.wilo-auth-benefits li {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    color: rgba(255, 255, 255, .83);
    font-size: 12px;
    line-height: 1.45;
}

.wilo-auth-benefits i {
    display: flex;
    width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    background: rgba(138, 44, 246, .82);
    font-size: 9px;
}

.wilo-auth-story-footer {
    position: relative;
    z-index: 1;
    display: flex;
    margin-top: 42px;
    align-items: center;
    gap: 9px;
    color: rgba(255, 255, 255, .5);
    font-size: 10px;
}

.wilo-auth-story-footer i {
    color: var(--wilo-orange);
    font-size: 13px;
}

.wilo-auth-access {
    display: flex;
    min-width: 0;
    padding: 48px clamp(38px, 5vw, 70px);
    align-items: center;
    background: #242424;
}

.wilo-auth-access-inner {
    width: 100%;
    max-width: 430px;
    margin: 0 auto;
}

.wilo-auth-heading {
    display: grid;
    margin-bottom: 34px;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    gap: 15px;
}

.wilo-auth-heading-icon {
    display: flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    color: var(--wilo-orange);
    background: var(--wilo-orange-soft);
    font-size: 17px;
}

.wilo-auth-heading h2 {
    margin: 0;
    color: var(--wilo-ink);
    font-size: 25px;
    line-height: 1.15;
}

.wilo-auth-heading p {
    margin: 6px 0 0;
    color: var(--wilo-muted);
    font-size: 12px;
}

.wilo-auth-access .alert {
    margin-bottom: 22px;
    padding: 13px 15px;
    font-size: 12px;
    text-align: left;
}

.wilo-auth-form .form-group {
    margin-bottom: 20px;
}

.wilo-auth-form .form-group > label {
    margin-bottom: 8px;
    color: #ece8f0 ;
    font-size: 12px;
}

.wilo-auth-input {
    position: relative;
}

.wilo-auth-input > i {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 17px;
    width: 18px;
    color: #9098a1;
    font-size: 14px;
    text-align: center;
    transform: translateY(-50%);
}

.wilo-body .wilo-auth-input .form-control {
    height: 52px;
    padding: 12px 16px 12px 48px;
    border-color: rgba(255, 255, 255, .10);
    border-radius: 10px;
    font-size: 13px;
}

.wilo-auth-input:focus-within > i {
    color: var(--wilo-orange);
}

.wilo-auth-options {
    display: flex;
    margin: 2px 0 24px;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    font-size: 11px;
}

.wilo-auth-remember {
    display: inline-flex;
    margin: 0;
    align-items: center;
    gap: 8px;
    color: #aaa6b2 ;
    cursor: pointer;
}

.wilo-auth-remember input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--wilo-orange);
}

.wilo-auth-options > a {
    white-space: nowrap;
}

.wilo-body .wilo-auth-submit {
    display: flex;
    width: 100%;
    min-height: 52px;
    padding: 0 20px;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border-radius: 10px;
    box-shadow: 0 10px 24px rgba(138, 44, 246, .2);
    font-size: 13px;
}

.wilo-body .wilo-auth-submit:hover,
.wilo-body .wilo-auth-submit:focus {
    transform: translateY(-1px);
    box-shadow: 0 13px 28px rgba(138, 44, 246, .25);
}

.wilo-auth-divider {
    display: flex;
    margin: 28px 0 18px;
    align-items: center;
    gap: 12px;
    color: #929aa2;
    font-size: 10px;
    text-align: center;
}

.wilo-auth-divider::before,
.wilo-auth-divider::after {
    height: 1px;
    flex: 1;
    background: var(--wilo-line);
    content: "";
}

.wilo-auth-providers .provider-prelinking,
.wilo-auth-providers .providerLinkingFeedback {
    font-size: 11px;
}

.wilo-auth-help {
    display: flex;
    margin-top: 28px;
    padding-top: 20px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-top: 1px solid var(--wilo-line);
    color: #818a93;
    font-size: 10px;
}

.wilo-auth-help i {
    margin-right: 2px;
    color: var(--wilo-orange);
    font-size: 13px;
}

/* Collapsed application navigation */
body.wilo-sidebar-collapsed .wilo-sidebar {
    width: 78px;
}

body.wilo-sidebar-collapsed .wilo-app-shell {
    margin-left: 78px;
}

body.wilo-sidebar-collapsed .wilo-site-footer-authenticated {
    margin-left: 78px;
}

body.wilo-sidebar-collapsed .wilo-sidebar-brand {
    padding: 26px 16px;
    text-align: center;
}

body.wilo-sidebar-collapsed .wilo-sidebar-brand > a img,
body.wilo-sidebar-collapsed .wilo-sidebar-brand > a span,
body.wilo-sidebar-collapsed .wilo-nav-link span,
body.wilo-sidebar-collapsed .wilo-sidebar-footer span {
    display: none;
}

body.wilo-sidebar-collapsed .wilo-sidebar-brand > a::before {
    color: var(--wilo-orange);
    content: "w";
    font-size: 34px;
    font-weight: 500;
}

body.wilo-sidebar-collapsed .wilo-nav-link {
    padding: 0;
    justify-content: center;
}

body.wilo-sidebar-collapsed .wilo-nav-link::before {
    left: -12px;
}

body.wilo-sidebar-collapsed .wilo-sidebar-footer {
    padding: 18px 12px 24px;
}

body.wilo-sidebar-collapsed .wilo-sidebar-order,
body.wilo-sidebar-collapsed .wilo-sidebar-utility {
    padding: 0;
    justify-content: center;
}

body.wilo-sidebar-collapsed .wilo-sidebar-order i,
body.wilo-sidebar-collapsed .wilo-sidebar-utility i {
    width: auto;
}

body.wilo-sidebar-collapsed .wilo-sidebar-collapse i {
    transform: rotate(180deg);
}

.wilo-mobile-overlay {
    display: none;
}

@media (min-width: 992px) {
    .wilo-content-container > .row.wilo-has-context-menu {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "heading"
            "menu"
            "main";
        align-items: start;
    }

    .wilo-has-context-menu > .wilo-page-heading {
        grid-area: heading;
    }

    .wilo-has-context-menu > .main-content {
        grid-area: main;
    }

    .wilo-has-context-menu > .wilo-context-menu {
        grid-area: menu;
    }

    .wilo-has-context-menu > .wilo-page-heading,
    .wilo-has-context-menu > .main-content,
    .wilo-has-context-menu > .wilo-context-menu {
        width: auto !important;
        float: none !important;
    }

    .wilo-has-context-menu > .clearfix {
        display: none;
    }
}

@media (max-width: 1250px) {
    .wilo-topbar {
        grid-template-columns: minmax(170px, 1fr) minmax(300px, 450px) minmax(250px, 1fr);
        gap: 14px;
    }

    .wilo-overview {
        padding-right: 30px;
        padding-left: 30px;
    }

    .wilo-overview-stats {
        padding-right: 22px;
        padding-left: 22px;
    }

    .wilo-overview-stats a {
        padding-right: 13px;
        padding-left: 13px;
        grid-template-columns: 30px 36px minmax(0, 1fr);
    }
}

@media (max-width: 991px) {
    .wilo-site-footer-authenticated,
    body.wilo-sidebar-collapsed .wilo-site-footer-authenticated {
        margin-left: 0;
    }

    .wilo-footer-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .wilo-footer-brand {
        max-width: none;
        flex-basis: 100%;
        grid-column: 1 / -1;
    }

    .wilo-content-container > .row.wilo-has-context-menu {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "heading"
            "menu"
            "main";
        align-items: start;
    }

    .wilo-has-context-menu > .wilo-page-heading {
        width: 100%;
        grid-area: heading;
    }

    .wilo-has-context-menu > .main-content {
        width: 100%;
        grid-area: main;
    }

    .wilo-has-context-menu > .wilo-context-menu {
        position: static;
        width: 100%;
        margin-bottom: 12px;
        grid-area: menu;
    }

    .wilo-has-context-menu > .clearfix {
        display: none;
    }

    .wilo-context-menu-toggle {
        display: flex;
    }

    .wilo-context-menu.is-mobile-ready:not(.is-open) .wilo-context-menu-content {
        display: none;
    }

    .wilo-context-menu.is-open .wilo-context-menu-content {
        display: block;
    }

    .wilo-context-menu .wilo-context-primary,
    .wilo-context-menu .wilo-context-secondary,
    .wilo-context-menu .panel,
    .wilo-context-menu .list-group {
        display: block !important;
    }

    .wilo-context-menu .panel {
        margin-bottom: 8px;
    }

    .wilo-context-menu .panel:last-child {
        margin-bottom: 0;
    }

    .wilo-context-menu .panel-heading {
        min-height: 58px;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .08);
    }

    .wilo-context-menu .panel-body,
    .wilo-context-menu .panel-footer {
        display: block !important;
        max-width: none;
        min-height: 0;
    }

    .wilo-context-menu .list-group-item {
        min-height: 52px;
        border-top: 1px solid rgba(255, 255, 255, .08);
        border-left: 0;
        white-space: normal;
    }

    .wilo-context-menu .list-group-item.active,
    .wilo-context-menu .list-group-item.active:hover,
    .wilo-context-menu .list-group-item.active:focus,
    .wilo-context-menu .list-group-item-selected {
        box-shadow: inset 3px 0 0 var(--wilo-orange);
    }

    .wilo-template-login .logincontainer.wilo-auth-shell {
        width: min(760px, 100%);
        grid-template-columns: 1fr;
    }

    .wilo-auth-story {
        min-height: 300px;
        padding: 38px 42px 30px;
    }

    .wilo-auth-story-icon {
        width: 66px;
        height: 66px;
        margin-bottom: 28px;
        border-radius: 18px;
        font-size: 30px;
    }

    .wilo-auth-story h1 {
        max-width: 520px;
        font-size: 36px;
    }

    .wilo-auth-benefits {
        margin-top: 26px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
    }

    .wilo-auth-benefits li {
        align-items: start;
        grid-template-columns: 24px minmax(0, 1fr);
        font-size: 10px;
    }

    .wilo-auth-story-footer {
        margin-top: 28px;
    }

    .wilo-auth-access {
        padding-top: 42px;
        padding-bottom: 42px;
    }

    .wilo-sidebar {
        width: 264px;
        transform: translateX(-105%);
    }

    .wilo-app-shell,
    body.wilo-sidebar-collapsed .wilo-app-shell {
        margin-left: 0;
    }

    body.wilo-sidebar-open .wilo-sidebar {
        transform: translateX(0);
    }

    body.wilo-sidebar-open .wilo-mobile-overlay {
        position: fixed;
        z-index: 1035;
        inset: 0;
        display: block;
        background: rgba(18, 20, 22, .48);
        backdrop-filter: blur(2px);
    }

    .wilo-topbar {
        grid-template-columns: minmax(160px, 1fr) auto;
    }

    .wilo-dashboard-row,
    .wilo-dashboard-row > [class*="col-"] {
        display: block;
    }

    .wilo-overview-art {
        right: 30px;
        width: 27%;
        opacity: .62;
    }

    .wilo-overview-stats span {
        font-size: 10px;
    }

    .wilo-service-row {
        grid-template-columns: 58px minmax(150px, 1fr) auto;
    }

    .wilo-service-row .wilo-btn-outline {
        grid-column: 2 / -1;
        justify-self: start;
    }

    .wilo-dashboard-row > [class*="col-"] + [class*="col-"] {
        margin-top: 20px;
    }
}

@media (max-width: 767px) {
    :root {
        --wilo-topbar: 72px;
    }

    .wilo-site-footer {
        padding: 36px 22px 22px;
    }

    .wilo-site-footer-inner {
        width: 100%;
    }

    .wilo-footer-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .wilo-footer-brand {
        min-width: 0;
        grid-column: auto;
    }

    .wilo-footer-column {
        min-width: 0;
        padding-top: 20px;
        flex-basis: 100%;
        border-top: 1px solid rgba(255, 255, 255, .1);
    }

    .wilo-footer-column h3 {
        margin-top: 0;
    }

    .wilo-footer-memberships {
        gap: 26px;
    }

    .wilo-footer-memberships img {
        max-width: 135px;
        height: 44px;
    }

    .wilo-topbar {
        min-height: 72px;
        padding: 12px 16px;
        gap: 8px;
    }

    .wilo-topbar-context strong {
        font-size: 16px;
    }

    .wilo-topbar-actions {
        gap: 1px;
    }

    .wilo-account-button {
        padding: 0 2px;
    }

    .wilo-main-body,
    .wilo-guest .wilo-main-body {
        padding: 16px 14px 8px;
    }

    body.wilo-authenticated section#main-body.wilo-main-body {
        padding: 12px;
    }

    .wilo-overview {
        min-height: 420px;
        padding: 27px 22px 0;
        border-radius: 12px;
    }

    .wilo-overview h1 {
        max-width: 80%;
        font-size: 31px;
    }

    .wilo-overview p {
        max-width: 72%;
        font-size: 14px;
    }

    .wilo-overview-art {
        display: none;
    }

    .wilo-overview-actions {
        max-width: 230px;
        margin-top: 17px;
    }

    .wilo-overview-actions .btn {
        width: 100%;
        text-align: center;
    }

    .wilo-overview-stats {
        min-height: 146px;
        padding: 9px 14px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wilo-overview-stats a {
        min-height: 62px;
        padding: 5px 9px;
        grid-template-columns: 25px 30px minmax(0, 1fr);
        border-right: 1px solid rgba(255, 255, 255, .24);
        border-bottom: 1px solid rgba(255, 255, 255, .18);
    }

    .wilo-overview-stats a:nth-child(2) {
        border-right: 0;
    }

    .wilo-overview-stats a:nth-child(n+3) {
        border-bottom: 0;
    }

    .wilo-overview-stats strong {
        font-size: 21px;
    }

    .wilo-overview-stats i {
        font-size: 17px;
    }

    .wilo-service-row,
    .wilo-simple-empty,
    .wilo-support-state {
        display: flex;
        padding: 18px;
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .wilo-service-main {
        width: calc(100% - 80px);
    }

    .wilo-service-status {
        margin-left: 78px;
    }

    .wilo-service-row .wilo-btn-outline,
    .wilo-support-state .wilo-btn-outline,
    .wilo-simple-empty .wilo-btn-outline {
        width: 100%;
        margin-left: 0;
        text-align: center;
    }

    .wilo-support-icon {
        display: none !important;
    }

    .wilo-surface-header {
        padding: 0 18px;
    }

    .wilo-quick-actions a {
        margin: 0 15px;
    }

    .wilo-native-panels {
        grid-template-columns: 1fr;
    }

    .wilo-public-header-inner {
        width: calc(100% - 28px);
    }

    .wilo-public-logo img {
        width: 155px;
    }

    body.wilo-template-login .wilo-public-logo img {
        width: 170px;
    }

    body.wilo-template-login .wilo-public-area-label {
        display: none;
    }

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

    .wilo-public-header .wilo-public-login {
        min-height: 40px;
        padding: 0 11px;
        font-size: 11px;
    }

    .wilo-body .logincontainer {
        margin: 12px auto;
        padding: 24px 20px;
    }

    .wilo-template-login .main-content {
        min-height: auto;
    }

    .wilo-template-login .logincontainer.wilo-auth-shell {
        display: block;
        margin: 0 auto 16px;
        padding: 0;
        border-radius: 16px;
    }

    .wilo-auth-story {
        min-height: 230px;
        padding: 30px 25px 24px;
    }

    .wilo-auth-story-icon {
        width: 54px;
        height: 54px;
        margin-bottom: 22px;
        border-radius: 15px;
        font-size: 25px;
    }

    .wilo-auth-story-icon > span {
        right: -7px;
        bottom: -7px;
        width: 30px;
        height: 30px;
        border-width: 3px;
        border-radius: 9px;
        font-size: 11px;
    }

    .wilo-auth-story h1 {
        font-size: 29px;
    }

    .wilo-auth-story-copy > p {
        margin-top: 13px;
        font-size: 12px;
        line-height: 1.55;
    }

    .wilo-auth-benefits,
    .wilo-auth-story-footer {
        display: none;
    }

    .wilo-auth-access {
        padding: 31px 22px 26px;
    }

    .wilo-auth-heading {
        margin-bottom: 27px;
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 12px;
    }

    .wilo-auth-heading-icon {
        width: 42px;
        height: 42px;
        border-radius: 12px;
        font-size: 15px;
    }

    .wilo-auth-heading h2 {
        font-size: 21px;
    }

    .wilo-auth-heading p {
        font-size: 10px;
        line-height: 1.4;
    }

    .wilo-auth-options {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .wilo-auth-help {
        flex-wrap: wrap;
    }

    .wilo-body .table-container,
    .wilo-body .dataTables_wrapper {
        padding: 8px;
    }

    .wilo-body .table-container > .dataTables_wrapper,
    .wilo-body .dataTables_wrapper,
    .wilo-body .dataTables_wrapper > .row > [class*="col-"] {
        padding: 0;
    }

    .wilo-body .dataTables_wrapper > .row:first-child {
        display: block;
    }

    .wilo-body .dataTables_wrapper .dataTables_filter label,
    .wilo-body .dataTables_wrapper .dataTables_filter label .form-control {
        width: 100%;
    }
}

@media (max-width: 420px) {
    body.wilo-template-login .wilo-public-logo img {
        width: 145px;
    }

    .wilo-public-header .wilo-public-login {
        padding-right: 9px;
        padding-left: 9px;
        font-size: 10px;
    }
}

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

/* 1.0.20: keep contextual navigation expanded and readable.  The product
 * catalogue and client-area pages share the same WHMCS sidebar markup, so
 * these rules deliberately target the branded wrapper rather than changing
 * the underlying menu data or links. */
.wilo-context-menu .wilo-context-menu-content {
    display: block !important;
    min-height: 0;
    padding: 0;
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.wilo-context-menu .wilo-context-menu-toggle,
.wilo-context-menu .wilo-context-menu-label {
    display: none !important;
}

.wilo-context-menu .wilo-context-primary,
.wilo-context-menu .wilo-context-secondary {
    display: block !important;
    width: 100% !important;
}

.wilo-context-menu .panel.hidden-sm.hidden-xs {
    display: block !important;
}

.wilo-context-menu .panel.hidden-lg.hidden-md {
    display: none !important;
}

.wilo-context-menu .panel {
    display: block !important;
    width: 100% !important;
    min-height: 0;
    overflow: hidden;
    margin: 0 0 20px;
    border: 1px solid var(--wilo-line);
    border-radius: 16px;
    background: #242424;
    box-shadow: 0 8px 26px rgba(24, 28, 33, .055);
}

.wilo-context-menu .panel-heading {
    display: flex;
    min-height: 82px;
    padding: 0 28px;
    align-items: center;
    border: 0;
    border-radius: 0;
    background: var(--wilo-charcoal);
}

.wilo-context-menu .panel-heading .panel-title {
    display: flex;
    width: 100%;
    min-width: 0;
    margin: 0;
    align-items: center;
    color: #fff !important;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.25;
    white-space: normal;
}

.wilo-context-menu .panel-title > a,
.wilo-context-menu .panel-title > i:first-child:not(.panel-minimise) {
    color: #fff !important;
}

.wilo-context-menu .panel-title > i:first-child:not(.panel-minimise) {
    width: 24px;
    margin-right: 10px;
    flex: 0 0 24px;
    text-align: center;
}

.wilo-context-menu .panel-minimise {
    display: inline-block !important;
    width: auto !important;
    margin-left: auto;
    color: #fff !important;
    transform: none !important;
}

.wilo-context-menu .panel-body,
.wilo-context-menu .panel-footer,
.wilo-context-menu .list-group {
    display: block !important;
    width: 100%;
    max-width: none;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: #242424;
}

.wilo-context-menu .list-group-item {
    display: flex;
    width: 100%;
    min-width: 0;
    min-height: 72px;
    margin: 0;
    padding: 0 28px;
    align-items: center;
    gap: 9px;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, .08);
    color: #aaa6b2;
    background: #242424;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.3;
    white-space: normal;
}

.wilo-context-menu .list-group-item:hover,
.wilo-context-menu .list-group-item:focus {
    color: var(--wilo-orange);
    background: var(--wilo-orange-soft);
}

.wilo-context-menu .list-group-item.active,
.wilo-context-menu .list-group-item.active:hover,
.wilo-context-menu .list-group-item.active:focus,
.wilo-context-menu .list-group-item-selected {
    color: var(--wilo-orange) !important;
    background: rgba(138, 44, 246, .10) !important;
    box-shadow: inset 4px 0 0 var(--wilo-orange);
}

@media (min-width: 992px) {
    .wilo-content-container > .row.wilo-has-context-menu {
        grid-template-columns: minmax(270px, 330px) minmax(0, 1fr);
        grid-template-areas:
            "heading heading"
            "menu main";
        column-gap: 24px;
        row-gap: 0;
    }

    .wilo-has-context-menu > .wilo-page-heading,
    .wilo-has-context-menu > .main-content,
    .wilo-has-context-menu > .wilo-context-menu {
        width: auto !important;
        float: none !important;
    }

    .wilo-has-context-menu > .wilo-context-menu {
        min-width: 0;
        grid-area: menu;
    }

    .wilo-has-context-menu > .main-content {
        min-width: 0;
        grid-area: main;
    }
}

@media (max-width: 991px) {
    .wilo-content-container > .row.wilo-has-context-menu {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "heading"
            "menu"
            "main";
    }

    .wilo-has-context-menu > .wilo-context-menu,
    .wilo-has-context-menu > .main-content,
    .wilo-has-context-menu > .wilo-page-heading {
        width: 100% !important;
        float: none !important;
    }

    .wilo-has-context-menu > .wilo-context-menu {
        grid-area: menu;
        margin-bottom: 18px;
    }

    .wilo-context-menu .panel-heading {
        min-height: 68px;
        padding: 0 22px;
    }

    .wilo-context-menu .panel-heading .panel-title {
        font-size: 18px;
    }

    .wilo-context-menu .list-group-item {
        min-height: 64px;
        padding: 0 22px;
        font-size: 16px;
    }
}

/* Product catalogue navigation uses a separate order-form wrapper but keeps
 * the same expanded-card presentation as the client-area menus. */
#order-standard_cart.wilo-products-layout {
    display: grid;
    grid-template-columns: minmax(270px, 320px) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

#order-standard_cart.wilo-products-layout .wilo-products-menu {
    display: block !important;
    width: 100%;
    min-width: 0;
    margin: 0;
    grid-column: 1;
    grid-row: 1;
}

#order-standard_cart.wilo-products-layout .wilo-products-main {
    min-width: 0;
    grid-column: 2;
    grid-row: 1;
}

#order-standard_cart.wilo-products-layout .wilo-products-menu .panel {
    display: block !important;
    width: 100%;
    min-height: 0;
    overflow: hidden;
    margin: 0 0 20px;
    border: 1px solid var(--cart-line);
    border-radius: 16px;
    background: #242424;
    box-shadow: 0 8px 26px rgba(24, 28, 33, .055);
}

#order-standard_cart.wilo-products-layout .wilo-products-menu .panel-heading {
    display: flex;
    min-height: 82px;
    padding: 0 24px;
    align-items: center;
    border: 0;
    border-radius: 0;
    background: var(--cart-charcoal);
}

#order-standard_cart.wilo-products-layout .wilo-products-menu .panel-title {
    display: flex;
    width: 100%;
    min-width: 0;
    margin: 0;
    align-items: center;
    color: #fff !important;
    font-size: 20px;
    line-height: 1.25;
    white-space: normal;
}

#order-standard_cart.wilo-products-layout .wilo-products-menu .panel-title > i:first-child:not(.panel-minimise) {
    width: 24px;
    margin-right: 10px;
    flex: 0 0 24px;
    color: #fff !important;
    text-align: center;
}

#order-standard_cart.wilo-products-layout .wilo-products-menu .panel-minimise {
    display: inline-block !important;
    width: auto !important;
    margin-left: auto;
    color: #fff !important;
}

#order-standard_cart.wilo-products-layout .wilo-products-menu .panel-body,
#order-standard_cart.wilo-products-layout .wilo-products-menu .panel-footer,
#order-standard_cart.wilo-products-layout .wilo-products-menu .list-group {
    display: block !important;
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: #242424;
}

#order-standard_cart.wilo-products-layout .wilo-products-menu .list-group-item {
    display: flex;
    width: 100%;
    min-width: 0;
    min-height: 72px;
    margin: 0;
    padding: 0 24px;
    align-items: center;
    gap: 8px;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, .08);
    border-radius: 0;
    color: #aaa6b2;
    background: #242424;
    font-size: 16px;
    line-height: 1.3;
    white-space: normal;
}

#order-standard_cart.wilo-products-layout .wilo-products-menu .list-group-item:hover,
#order-standard_cart.wilo-products-layout .wilo-products-menu .list-group-item:focus {
    color: var(--cart-orange);
    background: var(--cart-orange-soft);
}

#order-standard_cart.wilo-products-layout .wilo-products-menu .list-group-item.active {
    color: var(--cart-orange) !important;
    background: rgba(138, 44, 246, .10) !important;
    box-shadow: inset 4px 0 0 var(--cart-orange);
}

/* The focused/guest checkout is intentionally distraction-free and remains a
 * single column; only the catalogue receives the two-column navigation. */
body.wilo-checkout-focus #order-standard_cart.wilo-products-layout {
    display: block;
}

body.wilo-checkout-focus #order-standard_cart.wilo-products-layout .wilo-products-menu {
    display: none !important;
}

@media (max-width: 991px) {
    #order-standard_cart.wilo-products-layout {
        display: block;
    }

    #order-standard_cart.wilo-products-layout .wilo-products-menu {
        display: none !important;
    }

    #order-standard_cart.wilo-products-layout .wilo-products-main {
        width: 100%;
    }
}

/* Public support form: retain WHMCS fields and validation while giving an
 * unauthenticated visitor a calm, centered Wilohosting surface to complete. */
body.wilo-guest.wilo-template-supportticketsubmit-steptwo .wilo-main-body {
    background: var(--wilo-bg);
}

body.wilo-guest.wilo-template-supportticketsubmit-steptwo .wilo-content-container {
    max-width: 1120px;
    padding: 0 20px 64px;
}

body.wilo-guest.wilo-template-supportticketsubmit-steptwo .main-content {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
}

body.wilo-guest.wilo-template-supportticketsubmit-steptwo .main-content > .header-lined {
    margin: 0 0 24px;
    padding: 0 0 18px;
    border-bottom: 1px solid var(--wilo-line);
}

body.wilo-guest.wilo-template-supportticketsubmit-steptwo .main-content > .header-lined h1 {
    font-size: clamp(28px, 4vw, 36px);
}

body.wilo-guest.wilo-template-supportticketsubmit-steptwo .main-content > .header-lined .breadcrumb {
    font-size: 13px;
}

body.wilo-guest.wilo-template-supportticketsubmit-steptwo .wilo-support-form {
    margin: 0;
    padding: 32px 36px 36px;
    border: 1px solid var(--wilo-line);
    border-radius: 18px;
    background: #242424;
    box-shadow: 0 14px 38px rgba(24, 28, 33, .07);
}

body.wilo-guest.wilo-template-supportticketsubmit-steptwo .wilo-support-form > .row {
    display: flex;
    margin-right: 0;
    margin-left: 0;
    flex-wrap: wrap;
    gap: 0 18px;
}

body.wilo-guest.wilo-template-supportticketsubmit-steptwo .wilo-support-form > .row > [class*="col-"] {
    float: none;
    padding-right: 0;
    padding-left: 0;
}

body.wilo-guest.wilo-template-supportticketsubmit-steptwo .wilo-support-form > .row:not(.form-group) .col-sm-4,
body.wilo-guest.wilo-template-supportticketsubmit-steptwo .wilo-support-form > .row:not(.form-group) .col-sm-5 {
    width: calc(50% - 9px);
    flex: 1 1 280px;
}

body.wilo-guest.wilo-template-supportticketsubmit-steptwo .wilo-support-form > .row:not(.form-group) .col-sm-10 {
    width: 100%;
    flex: 1 1 100%;
}

body.wilo-guest.wilo-template-supportticketsubmit-steptwo .wilo-support-form > .row:not(.form-group) .col-sm-3 {
    width: auto;
    min-width: 190px;
    flex: 1 1 0;
}

body.wilo-guest.wilo-template-supportticketsubmit-steptwo .wilo-support-form > .row.form-group .col-sm-12 {
    width: 100%;
    flex: 1 1 100%;
}

body.wilo-guest.wilo-template-supportticketsubmit-steptwo .wilo-support-form > .row.form-group .col-sm-9 {
    width: auto;
    flex: 1 1 300px;
}

body.wilo-guest.wilo-template-supportticketsubmit-steptwo .wilo-support-form > .row.form-group .col-sm-3 {
    width: auto;
    flex: 0 0 180px;
}

body.wilo-guest.wilo-template-supportticketsubmit-steptwo .wilo-support-form .form-group {
    margin-bottom: 22px;
}

body.wilo-guest.wilo-template-supportticketsubmit-steptwo .wilo-support-form label {
    display: block;
    margin-bottom: 8px;
    color: var(--wilo-ink);
    font-size: 14px;
    font-weight: 500;
}

body.wilo-guest.wilo-template-supportticketsubmit-steptwo .wilo-support-form input.form-control,
body.wilo-guest.wilo-template-supportticketsubmit-steptwo .wilo-support-form select.form-control,
body.wilo-guest.wilo-template-supportticketsubmit-steptwo .wilo-support-form textarea.form-control {
    min-height: 50px;
    padding: 13px 15px;
    border: 1px solid #dfe4e8;
    border-radius: 10px;
    color: var(--wilo-ink);
    background: #242424;
    font-size: 15px;
    box-shadow: none;
}

body.wilo-guest.wilo-template-supportticketsubmit-steptwo .wilo-support-form textarea.form-control {
    min-height: 220px;
    resize: vertical;
    line-height: 1.55;
}

body.wilo-guest.wilo-template-supportticketsubmit-steptwo .wilo-support-form .form-control:focus {
    border-color: var(--wilo-orange);
    box-shadow: 0 0 0 3px rgba(138, 44, 246, .12);
}

body.wilo-guest.wilo-template-supportticketsubmit-steptwo .wilo-support-form .md-editor {
    overflow: hidden;
    border: 1px solid #dfe4e8;
    border-radius: 11px;
    background: #242424;
}

body.wilo-guest.wilo-template-supportticketsubmit-steptwo .wilo-support-form .md-editor .md-header {
    min-height: 48px;
    padding: 7px 9px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    background: #292929;
}

body.wilo-guest.wilo-template-supportticketsubmit-steptwo .wilo-support-form .md-editor .md-header .btn {
    min-width: 34px;
    min-height: 34px;
    padding: 6px 9px;
    border-color: rgba(255, 255, 255, .10);
    color: #aaa6b2;
    background: #242424;
}

body.wilo-guest.wilo-template-supportticketsubmit-steptwo .wilo-support-form .md-editor .md-header .btn:hover,
body.wilo-guest.wilo-template-supportticketsubmit-steptwo .wilo-support-form .md-editor .md-header .btn:focus {
    border-color: var(--wilo-orange);
    color: var(--wilo-orange);
    background: var(--wilo-orange-soft);
}

body.wilo-guest.wilo-template-supportticketsubmit-steptwo .wilo-support-form .md-editor > textarea {
    min-height: 220px;
    padding: 16px;
    border: 0;
    border-radius: 0;
}

body.wilo-guest.wilo-template-supportticketsubmit-steptwo .wilo-support-form .md-footer {
    padding: 6px 12px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    color: var(--wilo-muted);
    background: #292929;
    font-size: 11px;
}

body.wilo-guest.wilo-template-supportticketsubmit-steptwo .wilo-support-form #inputAttachments {
    height: auto;
    min-height: 50px;
    padding: 12px;
}

body.wilo-guest.wilo-template-supportticketsubmit-steptwo .wilo-support-form .ticket-attachments-message {
    margin-top: 7px;
    font-size: 12px;
}

body.wilo-guest.wilo-template-supportticketsubmit-steptwo .wilo-support-form #customFieldsContainer,
body.wilo-guest.wilo-template-supportticketsubmit-steptwo .wilo-support-form #autoAnswerSuggestions,
body.wilo-guest.wilo-template-supportticketsubmit-steptwo .wilo-support-form .margin-bottom {
    margin-top: 10px;
}

body.wilo-guest.wilo-template-supportticketsubmit-steptwo .wilo-support-form > p.text-center {
    display: flex;
    margin: 28px 0 0;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

body.wilo-guest.wilo-template-supportticketsubmit-steptwo .wilo-support-form #openTicketSubmit {
    min-width: 180px;
    min-height: 50px;
    padding: 13px 22px;
    border: 1px solid var(--wilo-orange);
    border-radius: 9px;
    color: #fff;
    background: var(--wilo-orange);
    font-size: 15px;
}

body.wilo-guest.wilo-template-supportticketsubmit-steptwo .wilo-support-form > p.text-center .btn-default {
    min-height: 50px;
    padding: 13px 20px;
    border-radius: 9px;
}

@media (max-width: 767px) {
    body.wilo-guest.wilo-template-supportticketsubmit-steptwo .wilo-content-container {
        padding-right: 12px;
        padding-left: 12px;
    }

    body.wilo-guest.wilo-template-supportticketsubmit-steptwo .wilo-support-form {
        padding: 24px 18px 26px;
        border-radius: 14px;
    }

    body.wilo-guest.wilo-template-supportticketsubmit-steptwo .wilo-support-form > .row > [class*="col-"] {
        width: 100% !important;
        min-width: 0;
        flex: 1 1 100% !important;
    }

    body.wilo-guest.wilo-template-supportticketsubmit-steptwo .wilo-support-form > p.text-center {
        align-items: stretch;
        flex-direction: column;
    }

    body.wilo-guest.wilo-template-supportticketsubmit-steptwo .wilo-support-form > p.text-center .btn,
    body.wilo-guest.wilo-template-supportticketsubmit-steptwo .wilo-support-form #openTicketSubmit {
        width: 100%;
    }
}

/* Public support chooser: present departments as clear, centered cards while
 * keeping the native WHMCS step=2 links and language strings intact. */
body.wilo-guest.wilo-template-supportticketsubmit-stepone .wilo-main-body {
    background: var(--wilo-bg);
}

body.wilo-guest.wilo-template-supportticketsubmit-stepone .wilo-content-container {
    max-width: 1180px;
    padding: 0 24px 64px;
}

body.wilo-guest.wilo-template-supportticketsubmit-stepone .main-content {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding-right: 0;
    padding-left: 0;
}

body.wilo-guest.wilo-template-supportticketsubmit-stepone .main-content > .header-lined {
    margin: 0 auto 24px;
    padding: 0 0 18px;
    border-bottom: 1px solid var(--wilo-line);
}

body.wilo-guest.wilo-template-supportticketsubmit-stepone .main-content > .header-lined h1 {
    font-size: clamp(30px, 3.5vw, 38px);
}

body.wilo-guest.wilo-template-supportticketsubmit-stepone .main-content > .header-lined .breadcrumb {
    font-size: 13px;
}

body.wilo-guest.wilo-template-supportticketsubmit-stepone .wilo-support-departments {
    max-width: 1060px;
    margin: 0 auto;
    padding: 32px 34px 36px;
    border: 1px solid var(--wilo-line);
    border-radius: 18px;
    background: #242424;
    box-shadow: 0 14px 38px rgba(24, 28, 33, .07);
}

body.wilo-guest.wilo-template-supportticketsubmit-stepone .wilo-support-intro {
    max-width: 780px;
    margin: 0 0 26px;
    color: var(--wilo-muted);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.55;
}

body.wilo-guest.wilo-template-supportticketsubmit-stepone .wilo-support-departments-grid {
    display: grid;
    margin: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

body.wilo-guest.wilo-template-supportticketsubmit-stepone .wilo-support-department {
    min-width: 0;
    margin: 0;
}

body.wilo-guest.wilo-template-supportticketsubmit-stepone .wilo-support-department-link {
    position: relative;
    display: flex;
    min-height: 144px;
    padding: 22px 54px 21px 22px;
    flex-direction: column;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 14px;
    color: var(--wilo-ink);
    background: #242424;
    box-shadow: 0 4px 16px rgba(24, 28, 33, .035);
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

body.wilo-guest.wilo-template-supportticketsubmit-stepone .wilo-support-department-link:hover,
body.wilo-guest.wilo-template-supportticketsubmit-stepone .wilo-support-department-link:focus {
    border-color: var(--wilo-orange);
    color: var(--wilo-ink);
    background: #242424;
    box-shadow: 0 10px 24px rgba(138, 44, 246, .12);
    outline: 0;
    transform: translateY(-2px);
}

body.wilo-guest.wilo-template-supportticketsubmit-stepone .wilo-support-department-title {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 11px;
    color: var(--wilo-ink);
    font-size: 18px;
    line-height: 1.25;
}

body.wilo-guest.wilo-template-supportticketsubmit-stepone .wilo-support-department-title i {
    display: inline-flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    border-radius: 9px;
    color: var(--wilo-orange);
    background: var(--wilo-orange-soft);
    font-size: 15px;
}

body.wilo-guest.wilo-template-supportticketsubmit-stepone .wilo-support-department-description {
    display: block;
    margin: 13px 0 0 45px;
    color: var(--wilo-muted);
    font-size: 14px;
    line-height: 1.5;
}

body.wilo-guest.wilo-template-supportticketsubmit-stepone .wilo-support-department-arrow {
    position: absolute;
    top: 50%;
    right: 20px;
    display: inline-flex;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #9aa2aa;
    background: #292929;
    font-size: 12px;
    transform: translateY(-50%);
    transition: color .16s ease, background .16s ease;
}

body.wilo-guest.wilo-template-supportticketsubmit-stepone .wilo-support-department-link:hover .wilo-support-department-arrow,
body.wilo-guest.wilo-template-supportticketsubmit-stepone .wilo-support-department-link:focus .wilo-support-department-arrow {
    color: #fff;
    background: var(--wilo-orange);
}

body.wilo-guest.wilo-template-supportticketsubmit-stepone .wilo-support-departments-grid > .alert {
    margin: 0;
    grid-column: 1 / -1;
}

@media (max-width: 767px) {
    body.wilo-guest.wilo-template-supportticketsubmit-stepone .wilo-content-container {
        padding: 0 12px 44px;
    }

    body.wilo-guest.wilo-template-supportticketsubmit-stepone .main-content > .header-lined {
        margin-bottom: 18px;
        padding-bottom: 14px;
    }

    body.wilo-guest.wilo-template-supportticketsubmit-stepone .main-content > .header-lined h1 {
        font-size: 30px;
    }

    body.wilo-guest.wilo-template-supportticketsubmit-stepone .wilo-support-departments {
        padding: 24px 18px 22px;
        border-radius: 14px;
    }

    body.wilo-guest.wilo-template-supportticketsubmit-stepone .wilo-support-intro {
        margin-bottom: 20px;
        font-size: 15px;
    }

    body.wilo-guest.wilo-template-supportticketsubmit-stepone .wilo-support-departments-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    body.wilo-guest.wilo-template-supportticketsubmit-stepone .wilo-support-department-link {
        min-height: 126px;
        padding: 18px 48px 18px 17px;
    }

    body.wilo-guest.wilo-template-supportticketsubmit-stepone .wilo-support-department-title {
        font-size: 17px;
    }

    body.wilo-guest.wilo-template-supportticketsubmit-stepone .wilo-support-department-description {
        margin-top: 10px;
        margin-left: 45px;
        font-size: 13px;
    }
}

/* Public knowledge base */
body.wilo-guest.wilo-template-knowledgebase .wilo-main-body,
body.wilo-guest.wilo-template-knowledgebasecat .wilo-main-body,
body.wilo-guest.wilo-template-knowledgebasearticle .wilo-main-body {
    padding-right: clamp(24px, 4vw, 64px);
    padding-left: clamp(24px, 4vw, 64px);
}

body.wilo-guest.wilo-template-knowledgebase .main-content,
body.wilo-guest.wilo-template-knowledgebasecat .main-content,
body.wilo-guest.wilo-template-knowledgebasearticle .main-content {
    min-width: 0;
}

.wilo-knowledgebase {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 0 40px;
    color: var(--wilo-ink);
}

.wilo-kb-search-form {
    margin: 0 0 28px;
    padding: 22px 24px 24px;
    border: 1px solid var(--wilo-line);
    border-radius: 16px;
    background: #242424;
    box-shadow: var(--wilo-shadow);
}

.wilo-kb-search-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 17px;
}

.wilo-kb-search-icon {
    display: inline-flex;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: var(--wilo-orange);
    background: var(--wilo-orange-soft);
    font-size: 16px;
}

.wilo-kb-search-heading strong,
.wilo-kb-search-heading span:not(.wilo-kb-search-icon) {
    display: block;
}

.wilo-kb-search-heading strong {
    color: var(--wilo-ink);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
}

.wilo-kb-search-heading span:not(.wilo-kb-search-icon) {
    margin-top: 4px;
    color: var(--wilo-muted);
    font-size: 13px;
    line-height: 1.45;
}

.wilo-kb-search-group {
    display: flex;
    width: 100%;
    align-items: stretch;
}

.wilo-kb-search-group .form-control {
    z-index: 1;
    width: auto;
    height: 54px;
    flex: 1 1 auto;
    border: 1px solid var(--wilo-line);
    border-radius: 10px 0 0 10px;
    box-shadow: none;
    color: var(--wilo-ink);
    font-size: 16px;
}

.wilo-kb-search-group .form-control:focus {
    border-color: rgba(138, 44, 246, .55);
    box-shadow: 0 0 0 3px rgba(138, 44, 246, .12);
}

.wilo-kb-search-group .form-control::placeholder {
    color: #98a0a8;
    opacity: 1;
}

.wilo-kb-search-group .input-group-btn {
    display: block;
    width: auto;
    flex: 0 0 auto;
}

.wilo-kb-search-group .btn {
    min-width: 124px;
    height: 54px;
    padding: 0 22px;
    border: 1px solid var(--wilo-orange);
    border-radius: 0 10px 10px 0;
    color: #fff;
    background: var(--wilo-orange);
    font-size: 15px;
    font-weight: 600;
}

.wilo-kb-search-group .btn:hover,
.wilo-kb-search-group .btn:focus {
    border-color: var(--wilo-orange-strong);
    background: var(--wilo-orange-strong);
}

.wilo-knowledgebase > h2 {
    margin: 30px 0 15px;
    color: var(--wilo-ink);
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -.04em;
}

.wilo-kb-category-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.wilo-kb-category-card {
    min-width: 0;
    overflow: hidden;
    padding: 0 0 16px;
    border: 1px solid var(--wilo-line);
    border-radius: 13px;
    background: #242424;
    box-shadow: 0 7px 22px rgba(24, 28, 33, .045);
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.wilo-kb-category-card:hover {
    border-color: rgba(138, 44, 246, .32);
    box-shadow: 0 12px 28px rgba(24, 28, 33, .09);
    transform: translateY(-2px);
}

.wilo-kb-category-link {
    display: grid;
    min-height: 70px;
    padding: 14px 15px 12px;
    grid-template-columns: 36px minmax(0, 1fr) auto 18px;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    color: var(--wilo-ink) !important;
    text-decoration: none !important;
}

.wilo-kb-category-icon,
.wilo-kb-article-icon {
    display: inline-flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: var(--wilo-orange);
    background: var(--wilo-orange-soft);
    font-size: 14px;
}

.wilo-kb-category-name {
    min-width: 0;
    overflow: hidden;
    color: var(--wilo-ink);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wilo-kb-category-count {
    min-width: 28px;
    padding: 3px 7px;
    border-radius: 999px;
    color: #8b4a22;
    background: rgba(138, 44, 246, .12);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
}

.wilo-kb-category-arrow,
.wilo-kb-article-arrow {
    color: #a4abb1;
    font-size: 12px;
    transition: color .16s ease, transform .16s ease;
}

.wilo-kb-category-link:hover .wilo-kb-category-arrow,
.wilo-kb-category-link:focus .wilo-kb-category-arrow,
.wilo-kb-article-link:hover .wilo-kb-article-arrow,
.wilo-kb-article-link:focus .wilo-kb-article-arrow {
    color: var(--wilo-orange);
    transform: translateX(2px);
}

.wilo-kb-category-card p,
.wilo-kb-popular-card p {
    margin: 12px 16px 0;
    color: var(--wilo-muted);
    font-size: 13px;
    line-height: 1.48;
}

.wilo-kb-category-card .admin-inline-edit,
.wilo-kb-popular-card .admin-inline-edit {
    display: inline-flex;
    margin: 10px 16px 0;
    color: var(--wilo-orange) !important;
    font-size: 12px;
}

.wilo-kb-popular-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.wilo-kb-popular-card {
    min-width: 0;
    padding: 0 0 16px;
    border: 1px solid var(--wilo-line);
    border-radius: 13px;
    background: #242424;
    box-shadow: 0 7px 22px rgba(24, 28, 33, .04);
}

.wilo-kb-article-link {
    display: flex;
    min-height: 62px;
    padding: 12px 16px 10px;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    color: var(--wilo-ink) !important;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none !important;
}

.wilo-kb-article-link > span:nth-child(2) {
    min-width: 0;
}

.wilo-kb-article-arrow {
    margin-left: auto;
    flex: 0 0 auto;
}

.wilo-knowledgebase-category .kbcategories {
    display: grid;
    margin: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.wilo-knowledgebase-category .kbcategories::before,
.wilo-knowledgebase-category .kbcategories::after {
    display: none;
}

.wilo-knowledgebase-category .kbcategories > [class*="col-"] {
    width: auto;
    float: none;
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--wilo-line);
    border-radius: 13px;
    background: #242424;
    box-shadow: 0 7px 22px rgba(24, 28, 33, .04);
}

.wilo-knowledgebase-category .kbcategories > [class*="col-"] > a:first-child {
    display: flex;
    min-height: 42px;
    align-items: center;
    gap: 9px;
    color: var(--wilo-ink) !important;
    font-size: 15px;
    line-height: 1.35;
}

.wilo-knowledgebase-category .kbcategories > [class*="col-"] > a:first-child .glyphicon,
.wilo-knowledgebase-category .kbarticles a .glyphicon {
    color: var(--wilo-orange);
}

.wilo-knowledgebase-category .kbcategories .badge {
    margin-left: auto;
    color: #8b4a22;
    background: rgba(138, 44, 246, .12);
}

.wilo-knowledgebase-category .kbcategories p {
    margin: 10px 0 0;
    color: var(--wilo-muted);
    font-size: 13px;
    line-height: 1.48;
}

.wilo-knowledgebase-category .kbarticles {
    display: grid;
    gap: 10px;
    padding: 0 0 25px;
}

.wilo-knowledgebase-category .kbarticles > a:not(.admin-inline-edit) {
    display: flex;
    min-height: 54px;
    padding: 12px 15px;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--wilo-line);
    border-radius: 11px;
    color: var(--wilo-ink) !important;
    background: #242424;
    font-size: 15px;
    text-decoration: none;
}

.wilo-knowledgebase-category .kbarticles > p {
    margin: -5px 15px 6px;
    color: var(--wilo-muted);
    font-size: 13px;
}

.wilo-knowledgebase-article {
    padding: 26px 30px 32px;
    border: 1px solid var(--wilo-line);
    border-radius: 16px;
    background: #242424;
    box-shadow: var(--wilo-shadow);
}

.wilo-knowledgebase-article .kb-article-title {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--wilo-line);
}

.wilo-knowledgebase-article .kb-article-title h2 {
    color: var(--wilo-ink);
    font-size: 27px;
    font-weight: 600;
}

.wilo-knowledgebase-article .kb-article-content {
    color: #ded9e3;
    font-size: 16px;
    line-height: 1.7;
}

.wilo-knowledgebase-article .kb-rate-article {
    border-left: 3px solid var(--wilo-orange);
    color: var(--wilo-muted);
    background: var(--wilo-orange-soft);
}

.wilo-knowledgebase-article .kb-rate-article .btn-link {
    color: var(--wilo-orange);
}

.wilo-knowledgebase-article .kb-also-read {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid var(--wilo-line);
}

.wilo-knowledgebase-article .kb-also-read h3 {
    margin: 0 0 14px;
    color: var(--wilo-ink);
    font-size: 20px;
}

.wilo-knowledgebase-article .kb-also-read .kbarticles {
    display: grid;
    gap: 10px;
}

.wilo-knowledgebase-article .kb-also-read .kbarticles > div {
    padding: 12px 14px;
    border: 1px solid var(--wilo-line);
    border-radius: 11px;
    background: #242424;
}

.wilo-knowledgebase-article .kb-also-read .kbarticles a {
    color: var(--wilo-ink) !important;
    font-size: 15px;
}

.wilo-knowledgebase-article .kb-also-read .kbarticles p {
    margin: 7px 0 0;
    color: var(--wilo-muted);
    font-size: 13px;
    line-height: 1.45;
}

@media (max-width: 991px) {
    .wilo-kb-category-grid,
    .wilo-knowledgebase-category .kbcategories {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    body.wilo-guest.wilo-template-knowledgebase .wilo-main-body,
    body.wilo-guest.wilo-template-knowledgebasecat .wilo-main-body,
    body.wilo-guest.wilo-template-knowledgebasearticle .wilo-main-body {
        padding-right: 16px;
        padding-left: 16px;
    }

    .wilo-knowledgebase {
        padding-bottom: 28px;
    }

    .wilo-kb-search-form {
        margin-bottom: 23px;
        padding: 18px 16px 17px;
        border-radius: 13px;
    }

    .wilo-kb-search-heading {
        margin-bottom: 14px;
    }

    .wilo-kb-search-heading strong {
        font-size: 17px;
    }

    .wilo-kb-search-heading span:not(.wilo-kb-search-icon) {
        font-size: 12px;
    }

    .wilo-kb-search-group {
        display: block;
    }

    .wilo-kb-search-group .form-control,
    .wilo-kb-search-group .btn {
        width: 100%;
        border-radius: 9px;
    }

    .wilo-kb-search-group .input-group-btn {
        display: block;
        margin-top: 9px;
    }

    .wilo-kb-search-group .btn {
        min-width: 0;
    }

    .wilo-knowledgebase > h2 {
        margin-top: 24px;
        font-size: 23px;
    }

    .wilo-kb-category-grid,
    .wilo-kb-popular-list,
    .wilo-knowledgebase-category .kbcategories {
        grid-template-columns: 1fr;
    }

    .wilo-knowledgebase-article {
        padding: 20px 17px 25px;
        border-radius: 13px;
    }

    .wilo-knowledgebase-article .kb-article-title h2 {
        font-size: 23px;
    }

    .wilo-knowledgebase-article .kb-article-content {
        font-size: 15px;
    }
}