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

/* Dynamic service overview — v1.0.36 */
.wilo-service-details {
    --wilo-service-accent: #ff6700;
    --wilo-service-accent-rgb: 255, 103, 0;
    margin: 0 0 24px;
}

.wilo-service-details--hosting {
    --wilo-service-accent: #2f80ed;
    --wilo-service-accent-rgb: 47, 128, 237;
}

.wilo-service-details--vps,
.wilo-service-details--dedicated {
    --wilo-service-accent: #ff6700;
    --wilo-service-accent-rgb: 255, 103, 0;
}

.wilo-service-details--video {
    --wilo-service-accent: #8b5cf6;
    --wilo-service-accent-rgb: 139, 92, 246;
}

.wilo-service-details--radio {
    --wilo-service-accent: #e54368;
    --wilo-service-accent-rgb: 229, 67, 104;
}

.wilo-service-details--pbx {
    --wilo-service-accent: #0f9f94;
    --wilo-service-accent-rgb: 15, 159, 148;
}

.wilo-service-details--housing {
    --wilo-service-accent: #d18b19;
    --wilo-service-accent-rgb: 209, 139, 25;
}

.wilo-service-details--domain {
    --wilo-service-accent: #3769d6;
    --wilo-service-accent-rgb: 55, 105, 214;
}

.wilo-service-details--backup {
    --wilo-service-accent: #2c9b5f;
    --wilo-service-accent-rgb: 44, 155, 95;
}

.wilo-service-overview {
    display: grid;
    grid-template-columns: minmax(300px, 0.86fr) minmax(0, 1.35fr);
    overflow: hidden;
    border: 1px solid #e2e6ea;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 18px 48px rgba(20, 24, 28, 0.09);
}

.wilo-service-identity {
    position: relative;
    display: flex;
    min-height: 430px;
    padding: 38px;
    overflow: hidden;
    flex-direction: column;
    justify-content: space-between;
    color: #fff;
    background:
        radial-gradient(circle at 80% 15%, rgba(var(--wilo-service-accent-rgb), 0.32), transparent 32%),
        linear-gradient(145deg, #101214 0%, #1c2024 100%);
}

.wilo-service-identity::before {
    position: absolute;
    inset: 0;
    border-top: 4px solid var(--wilo-service-accent);
    content: '';
    pointer-events: none;
}

.wilo-service-art {
    position: relative;
    display: grid;
    width: 100%;
    min-height: 210px;
    place-items: center;
    isolation: isolate;
}

.wilo-service-art-grid {
    position: absolute;
    inset: 0;
    z-index: -2;
    opacity: 0.27;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: linear-gradient(to bottom, #000, transparent 92%);
    -webkit-mask-image: linear-gradient(to bottom, #000, transparent 92%);
}

.wilo-service-art-icon {
    position: relative;
    display: grid;
    width: 116px;
    height: 116px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 34px;
    color: #fff;
    background: linear-gradient(145deg, rgba(var(--wilo-service-accent-rgb), 0.96), rgba(var(--wilo-service-accent-rgb), 0.62));
    box-shadow: 0 24px 60px rgba(var(--wilo-service-accent-rgb), 0.32);
    font-size: 47px;
    place-items: center;
    transform: rotate(-3deg);
}

.wilo-service-art-icon::after {
    position: absolute;
    inset: 10px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 26px;
    content: '';
}

.wilo-service-art-orbit {
    position: absolute;
    z-index: -1;
    border: 1px solid rgba(var(--wilo-service-accent-rgb), 0.5);
    border-radius: 50%;
}

.wilo-service-art-orbit-one {
    width: 178px;
    height: 178px;
}

.wilo-service-art-orbit-two {
    width: 230px;
    height: 114px;
    transform: rotate(-18deg);
}

.wilo-service-art-node {
    position: absolute;
    width: 11px;
    height: 11px;
    border: 3px solid #171a1d;
    border-radius: 50%;
    background: var(--wilo-service-accent);
    box-shadow: 0 0 0 4px rgba(var(--wilo-service-accent-rgb), 0.14);
}

.wilo-service-art-node-one {
    top: 50px;
    left: calc(50% + 73px);
}

.wilo-service-art-node-two {
    right: calc(50% + 91px);
    bottom: 42px;
}

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

.wilo-service-eyebrow {
    display: inline-flex;
    margin-bottom: 14px;
    padding: 8px 11px;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(var(--wilo-service-accent-rgb), 0.38);
    border-radius: 999px;
    color: #fff;
    background: rgba(var(--wilo-service-accent-rgb), 0.15);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
}

.wilo-service-copy h2 {
    margin: 0 0 7px;
    color: #fff;
    font-size: clamp(27px, 2.2vw, 38px);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.08;
}

.wilo-service-copy p {
    margin: 0 0 22px;
    color: rgba(255, 255, 255, 0.67);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.wilo-service-status {
    display: inline-flex;
    min-height: 34px;
    padding: 8px 12px;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.055em;
    line-height: 1;
    text-transform: uppercase;
}

.wilo-service-status > span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ffb24a;
    box-shadow: 0 0 0 4px rgba(255, 178, 74, 0.14);
}

.wilo-service-status--active > span {
    background: #56d88c;
    box-shadow: 0 0 0 4px rgba(86, 216, 140, 0.14);
}

.wilo-service-status--suspended > span {
    background: #6eb7ff;
    box-shadow: 0 0 0 4px rgba(110, 183, 255, 0.14);
}

.wilo-service-status--terminated > span,
.wilo-service-status--cancelled > span,
.wilo-service-status--fraud > span {
    background: #ff6d6d;
    box-shadow: 0 0 0 4px rgba(255, 109, 109, 0.14);
}

.wilo-service-facts {
    padding: 36px;
    background: #fff;
}

.wilo-service-facts-header {
    display: flex;
    margin-bottom: 24px;
    padding-bottom: 20px;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-bottom: 1px solid #edf0f2;
}

.wilo-service-facts-kicker {
    display: block;
    margin-bottom: 5px;
    color: var(--wilo-service-accent);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.wilo-service-facts-header h3 {
    margin: 0;
    color: #16191c;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.025em;
}

.wilo-service-reference {
    display: inline-flex;
    min-width: 50px;
    height: 34px;
    padding: 0 11px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: #6a7178;
    background: #f3f5f7;
    font-size: 12px;
    font-weight: 700;
}

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

.wilo-service-fact {
    display: grid;
    min-height: 104px;
    padding: 17px;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 13px;
    border: 1px solid #e7eaed;
    border-radius: 15px;
    background: #fafbfc;
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.wilo-service-fact:hover {
    border-color: rgba(var(--wilo-service-accent-rgb), 0.32);
    box-shadow: 0 9px 25px rgba(24, 29, 34, 0.07);
    transform: translateY(-2px);
}

.wilo-service-fact--wide {
    grid-column: 1 / -1;
}

.wilo-service-fact-icon {
    display: grid;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    color: var(--wilo-service-accent);
    background: rgba(var(--wilo-service-accent-rgb), 0.1);
    font-size: 16px;
    place-items: center;
}

.wilo-service-fact-label {
    display: block;
    margin-bottom: 5px;
    color: #70777e;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.045em;
    line-height: 1.25;
    text-transform: uppercase;
}

.wilo-service-fact strong {
    display: block;
    color: #171a1d;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.wilo-service-fact--amount {
    border-color: rgba(var(--wilo-service-accent-rgb), 0.2);
    background: linear-gradient(135deg, rgba(var(--wilo-service-accent-rgb), 0.075), #fff);
}

.wilo-service-fact--amount strong {
    color: var(--wilo-service-accent);
    font-size: 19px;
}

.wilo-service-fact--warning {
    border-color: #f1d099;
    background: #fff9ee;
}

.wilo-service-fact--warning .wilo-service-fact-icon {
    color: #a46600;
    background: #fff0d4;
}

.wilo-service-details .wilo-product-actions-row {
    margin: 16px -8px 0;
}

.wilo-service-details .wilo-product-actions-row > div {
    padding-right: 8px;
    padding-left: 8px;
}

@media (max-width: 991px) {
    .wilo-service-overview {
        grid-template-columns: minmax(260px, 0.78fr) minmax(0, 1.25fr);
    }

    .wilo-service-identity,
    .wilo-service-facts {
        padding: 28px;
    }

    .wilo-service-identity {
        min-height: 410px;
    }

    .wilo-service-facts-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .wilo-service-fact--wide {
        grid-column: auto;
    }
}

@media (max-width: 767px) {
    .wilo-service-overview {
        grid-template-columns: minmax(0, 1fr);
        border-radius: 18px;
    }

    .wilo-service-identity {
        min-height: auto;
        padding: 26px 22px;
    }

    .wilo-service-art {
        min-height: 172px;
    }

    .wilo-service-art-icon {
        width: 94px;
        height: 94px;
        border-radius: 28px;
        font-size: 38px;
    }

    .wilo-service-art-icon::after {
        border-radius: 20px;
    }

    .wilo-service-art-orbit-one {
        width: 145px;
        height: 145px;
    }

    .wilo-service-art-orbit-two {
        width: 185px;
        height: 90px;
    }

    .wilo-service-copy h2 {
        font-size: 29px;
    }

    .wilo-service-facts {
        padding: 24px 20px;
    }

    .wilo-service-facts-header {
        margin-bottom: 18px;
        padding-bottom: 17px;
    }

    .wilo-service-facts-header h3 {
        font-size: 21px;
    }

    .wilo-service-facts-grid {
        gap: 10px;
    }

    .wilo-service-fact {
        min-height: 90px;
        padding: 14px;
    }

    .wilo-service-fact strong {
        font-size: 16px;
    }

    .wilo-service-fact--amount strong {
        font-size: 18px;
    }
}

@media (max-width: 520px) {
    .wilo-service-details .wilo-product-actions-row > div {
        width: 100%;
        margin-bottom: 10px;
    }

    .wilo-service-reference {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wilo-service-fact {
        transition: none;
    }

    .wilo-service-fact:hover {
        transform: none;
    }
}

:root {
    --wilo-orange: #ff6700;
    --wilo-orange-strong: #f25700;
    --wilo-orange-soft: #fff2e9;
    --wilo-charcoal: #202020;
    --wilo-charcoal-2: #17191b;
    --wilo-ink: #16181b;
    --wilo-muted: #69727d;
    --wilo-line: #e6e9ed;
    --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(255, 103, 0, .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: #fff;
    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: #f7f8fa;
}

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(255, 103, 0, .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: #fbfcfd;
}

.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 #e0e4e8;
    border-radius: 6px;
    color: #7d858e;
    background: #fff;
    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: #f3f5f7;
}

.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: #3d4248;
    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: #4c545c !important;
    font-size: 12px;
}

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

.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: #414850;
    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, #ff780d 0%, var(--wilo-orange) 47%, #f25300 100%);
    box-shadow: 0 14px 36px rgba(242, 87, 0, .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: #fff;
    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: #fff;
    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: #fff;
    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: #384047;
    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: #e8f8ee;
}

.wilo-btn-outline {
    min-height: 42px;
    padding: 10px 17px;
    border: 1px solid var(--wilo-orange);
    border-radius: 8px;
    color: var(--wilo-orange) !important;
    background: #fff;
    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: #343a40;
    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: #343a40 !important;
}

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

.wilo-quick-actions a > i:first-child {
    color: #596169;
    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: #30363c;
    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: #4c555e !important;
    background: #f4f6f8;
    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: #4b535b !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: #fff;
}

.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: #4b535b !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: #fff;
        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: #4e565e;
        background: #fff;
        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: #fff;
}

.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: #dfe3e7;
    color: #3e454c;
    background: #fff;
}

.wilo-body .form-control,
.wilo-body input.field,
.wilo-body select.field,
.wilo-body textarea.field {
    min-height: 46px;
    border: 1px solid #dfe3e7;
    border-radius: 8px;
    color: #2d3339;
    background: #fff;
    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(255, 103, 0, .12);
}

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

.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: #f4f6f8;
}

.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 #dfe3e7;
    border-radius: 7px;
    background-position: 9px center;
    background-color: #fff;
}

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

.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(255, 103, 0, .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(255, 103, 0, .52);
}

.wilo-body table.table > tbody > tr > td {
    padding: 12px 10px;
    border-top-color: #edf0f2;
    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: #fff;
    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 #e8ebee;
    border-radius: 15px;
    background: #fff;
    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 #e8ebee;
    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: #59616a;
    background: #fff;
    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 #edf0f2;
    color: #59616a;
    background: #fff;
    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: #fff8f3;
}

.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: #edf0f2;
    font-size: 10px;
}

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

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

/* Public and authentication shell */
.wilo-guest {
    background: #f5f7f9 !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: #fff;
}

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: #f0f2f5;
}

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(255, 103, 0, .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: #fff;
    border: 1px solid var(--wilo-border, #e4e7eb);
    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: #ff6700;
    background: #fff2e9;
    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 #efb9bd;
    border-radius: 10px;
    color: #a5282e;
    background: #fff7f7;
    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: #e3d5d6;
    color: #8b7779;
    background: #f7f3f3;
    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: #fff;
    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 #e2e6ea;
    border-radius: 20px;
    background: #fff;
    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(255, 103, 0, .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(255, 103, 0, .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(255, 103, 0, .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: #fff;
}

.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: #343a40;
    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: #dfe3e7;
    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: #596169;
    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(255, 103, 0, .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(255, 103, 0, .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 #e8ebee;
    }

    .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 #edf0f2;
        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: #fff;
    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: #fff;
}

.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 #edf0f2;
    color: #59616a;
    background: #fff;
    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: #fff8f3 !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: #fff;
    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: #fff;
}

#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 #edf0f2;
    border-radius: 0;
    color: #59616a;
    background: #fff;
    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: #fff8f3 !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: #fff;
    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: #fff;
    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(255, 103, 0, .12);
}

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

body.wilo-guest.wilo-template-supportticketsubmit-steptwo .wilo-support-form .md-editor .md-header {
    min-height: 48px;
    padding: 7px 9px;
    border-bottom: 1px solid #eef1f3;
    background: #fafbfc;
}

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: #e1e5e8;
    color: #59616a;
    background: #fff;
}

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 #eef1f3;
    color: var(--wilo-muted);
    background: #fafbfc;
    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: #fff;
    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 #e2e6ea;
    border-radius: 14px;
    color: var(--wilo-ink);
    background: #fff;
    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: #fff;
    box-shadow: 0 10px 24px rgba(255, 103, 0, .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: #f5f7f9;
    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: #fff;
    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(255, 103, 0, .55);
    box-shadow: 0 0 0 3px rgba(255, 103, 0, .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: #fff;
    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(255, 103, 0, .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 #edf0f2;
    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: #fff1e7;
    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: #fff;
    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 #edf0f2;
    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: #fff;
    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: #fff1e7;
}

.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: #fff;
    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: #fff;
    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: #3f4850;
    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: #fff;
}

.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;
    }
}

/* 1.0.34: professional split-screen client login */
body.wilo-template-login {
    overflow-x: hidden;
    background: #fff;
}

body.wilo-template-login .wilo-public-header,
body.wilo-template-login .wilo-site-footer {
    display: none;
}

body.wilo-template-login section#main-body.wilo-main-body {
    min-height: 100vh;
    min-height: 100svh;
    margin: 0;
    padding: 0;
    background: #fff;
}

body.wilo-template-login .wilo-content-container,
body.wilo-template-login .wilo-content-container > .row {
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
    margin: 0;
    padding: 0;
}

body.wilo-template-login .wilo-content-container > .row > .main-content {
    display: block;
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
    margin: 0;
    padding: 0;
}

body.wilo-template-login .logincontainer.wilo-auth-shell {
    display: grid;
    overflow: visible;
    width: 100%;
    max-width: none;
    min-height: 100vh;
    min-height: 100svh;
    margin: 0;
    padding: 0;
    grid-template-columns: minmax(520px, 50.8%) minmax(520px, 49.2%);
    border: 0;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
}

body.wilo-template-login .wilo-auth-story {
    position: relative;
    display: grid;
    overflow: hidden;
    min-width: 0;
    min-height: 100vh;
    min-height: 100svh;
    padding: 42px clamp(42px, 4.2vw, 70px) 38px;
    grid-template-rows: auto minmax(300px, 1fr) auto auto;
    align-items: center;
    gap: 20px;
    color: #fff;
    background:
        radial-gradient(circle at 62% 43%, rgba(255, 103, 0, .12), transparent 28%),
        linear-gradient(145deg, #1c2023 0%, #121416 100%);
}

body.wilo-template-login .wilo-auth-story::before {
    position: absolute;
    z-index: 0;
    inset: 0;
    background:
        linear-gradient(rgba(255, 255, 255, .026) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .026) 1px, transparent 1px);
    background-size: 38px 38px;
    content: "";
    mask-image: linear-gradient(145deg, #000 8%, transparent 82%);
    -webkit-mask-image: linear-gradient(145deg, #000 8%, transparent 82%);
}

body.wilo-template-login .wilo-auth-story::after {
    display: none;
}

.wilo-auth-brand {
    position: relative;
    z-index: 4;
    display: inline-flex;
    width: max-content;
    max-width: 100%;
    align-items: center;
    gap: 22px;
    color: #fff !important;
}

.wilo-auth-brand img {
    display: block;
    width: clamp(210px, 18vw, 268px);
    max-width: 62%;
    height: auto;
}

.wilo-auth-brand span {
    padding-left: 22px;
    border-left: 1px solid rgba(255, 255, 255, .32);
    color: rgba(255, 255, 255, .92);
    font-size: 16px;
    white-space: nowrap;
}

.wilo-auth-visual {
    position: relative;
    z-index: 2;
    width: min(560px, 100%);
    height: clamp(310px, 43vh, 450px);
    margin: 0 auto;
    filter: drop-shadow(0 26px 38px rgba(0, 0, 0, .26));
}

.wilo-auth-platform {
    position: absolute;
    left: 50%;
    width: 68%;
    height: 36%;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 26px;
    background: linear-gradient(145deg, rgba(83, 88, 91, .34), rgba(20, 22, 24, .9));
    box-shadow: inset 0 -3px 0 rgba(255, 103, 0, .7);
    transform: translateX(-50%) skewY(-8deg);
}

.wilo-auth-platform-back {
    bottom: 14%;
    opacity: .72;
}

.wilo-auth-platform-front {
    bottom: 6%;
    width: 76%;
    height: 31%;
    box-shadow: inset 0 -3px 0 rgba(255, 103, 0, .92), 0 17px 42px rgba(0, 0, 0, .3);
}

.wilo-auth-cloud {
    position: absolute;
    z-index: 1;
    top: 7%;
    left: 50%;
    width: 56%;
    height: 48%;
    color: rgba(29, 32, 35, .96);
    text-align: center;
    transform: translateX(-50%);
}

.wilo-auth-cloud > i {
    color: rgba(29, 32, 35, .96);
    text-shadow:
        -1px -1px 0 rgba(255, 255, 255, .54),
        1px 1px 0 rgba(255, 103, 0, .62),
        0 15px 40px rgba(255, 103, 0, .13);
    font-size: clamp(150px, 18vw, 235px);
}

.wilo-auth-server-stack {
    position: absolute;
    top: 48%;
    left: 50%;
    display: grid;
    width: 94px;
    gap: 5px;
    transform: translate(-50%, -50%);
}

.wilo-auth-server-stack b {
    display: flex;
    height: 34px;
    padding: 0 12px;
    align-items: center;
    gap: 6px;
    border: 2px solid var(--wilo-orange);
    border-radius: 5px;
    background: rgba(24, 26, 28, .92);
    box-shadow: 0 0 22px rgba(255, 103, 0, .18);
}

.wilo-auth-server-stack b > i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--wilo-orange);
}

.wilo-auth-data-panel {
    position: absolute;
    z-index: 3;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .54);
    border-radius: 10px;
    background: rgba(43, 47, 50, .92);
    box-shadow: 0 14px 32px rgba(0, 0, 0, .3);
    backdrop-filter: blur(8px);
}

.wilo-auth-data-panel-main {
    top: 45%;
    left: 50%;
    width: 190px;
    height: 132px;
    padding: 22px;
    transform: translateX(-50%);
}

.wilo-auth-data-panel-main span {
    display: block;
    width: 56%;
    height: 5px;
    margin-bottom: 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .56);
}

.wilo-auth-data-panel-main span:nth-child(2) {
    width: 42%;
}

.wilo-auth-data-panel-main b {
    position: absolute;
    right: 20px;
    bottom: 21px;
    left: 20px;
    height: 43px;
    border-bottom: 1px solid rgba(255, 255, 255, .22);
    background:
        linear-gradient(132deg, transparent 0 18%, rgba(255, 103, 0, .82) 19% 21%, transparent 22% 38%, rgba(255, 255, 255, .55) 39% 41%, transparent 42% 58%, rgba(255, 103, 0, .82) 59% 61%, transparent 62%);
}

.wilo-auth-data-panel-left {
    top: 53%;
    left: 13%;
    width: 118px;
    height: 88px;
    padding: 18px;
}

.wilo-auth-data-panel-right {
    top: 57%;
    right: 12%;
    width: 112px;
    height: 76px;
    padding: 17px;
}

.wilo-auth-data-panel-left i,
.wilo-auth-data-panel-right i {
    float: left;
    margin: 2px 12px 24px 0;
    color: rgba(255, 255, 255, .82);
    font-size: 22px;
}

.wilo-auth-data-panel-left span,
.wilo-auth-data-panel-right span {
    display: block;
    width: 55%;
    height: 4px;
    margin: 7px 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .42);
}

body.wilo-template-login .wilo-auth-story-copy {
    position: relative;
    z-index: 4;
    width: min(570px, 100%);
    margin: 0 auto;
}

body.wilo-template-login .wilo-auth-story h1 {
    max-width: none;
    margin: 0;
    color: #fff;
    font-size: clamp(38px, 4vw, 60px);
    line-height: 1.04;
    letter-spacing: -.055em;
}

body.wilo-template-login .wilo-auth-story-copy > p {
    max-width: 510px;
    margin: 22px 0 0;
    color: rgba(255, 255, 255, .7);
    font-size: 17px;
    line-height: 1.6;
}

body.wilo-template-login .wilo-auth-story-footer {
    position: relative;
    z-index: 4;
    width: min(570px, 100%);
    margin: 2px auto 0;
    color: rgba(255, 255, 255, .6);
    font-size: 13px;
}

body.wilo-template-login .wilo-auth-story-footer i {
    color: var(--wilo-orange);
    font-size: 16px;
}

body.wilo-template-login .wilo-auth-access {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 100vh;
    min-height: 100svh;
    padding: 96px clamp(40px, 5vw, 86px) 42px;
    align-items: center;
    background: #fff;
}

.wilo-auth-utilities {
    position: absolute;
    z-index: 3;
    top: 38px;
    right: clamp(38px, 5vw, 80px);
    display: flex;
    align-items: center;
    gap: 10px;
}

.wilo-auth-utilities a {
    display: inline-flex;
    min-height: 42px;
    padding: 0 12px;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    color: #282c30 !important;
    font-size: 13px;
}

.wilo-auth-utilities a:hover,
.wilo-auth-utilities a:focus {
    color: var(--wilo-orange) !important;
    background: var(--wilo-orange-soft);
}

.wilo-auth-utilities i {
    font-size: 16px;
}

body.wilo-template-login .wilo-auth-access-inner {
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
}

.wilo-auth-form-frame {
    width: 100%;
    padding: 42px 40px 40px;
    border: 1px solid #dfe3e7;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 16px 46px rgba(20, 24, 28, .055);
}

body.wilo-template-login .wilo-auth-heading {
    display: block;
    margin: 0 0 34px;
    text-align: center;
}

body.wilo-template-login .wilo-auth-heading h2 {
    margin: 0;
    color: #101214;
    font-size: 31px;
    line-height: 1.18;
}

body.wilo-template-login .wilo-auth-heading p {
    margin: 8px 0 0;
    color: #68717b;
    font-size: 14px;
    line-height: 1.5;
}

body.wilo-template-login .wilo-auth-access .alert {
    margin-bottom: 24px;
    padding: 14px 16px;
    border-radius: 10px;
    font-size: 13px;
}

body.wilo-template-login .wilo-auth-form .form-group {
    margin-bottom: 24px;
}

body.wilo-template-login .wilo-auth-form .form-group > label {
    margin-bottom: 9px;
    color: #2e3439;
    font-size: 14px;
}

body.wilo-template-login .wilo-auth-input > i {
    left: 18px;
    width: 20px;
    color: #89919a;
    font-size: 17px;
}

body.wilo-template-login .wilo-auth-input .form-control {
    height: 56px;
    padding: 12px 18px 12px 52px;
    border: 1px solid #d8dde2;
    border-radius: 10px;
    color: #171a1d;
    background: #fff;
    box-shadow: none;
    font-size: 15px;
}

body.wilo-template-login .wilo-auth-password .form-control {
    padding-right: 56px;
}

body.wilo-template-login .wilo-auth-input .form-control:focus {
    border-color: var(--wilo-orange);
    box-shadow: 0 0 0 3px rgba(255, 103, 0, .11);
}

.wilo-auth-password-toggle {
    position: absolute;
    z-index: 3;
    top: 50%;
    right: 6px;
    display: inline-flex;
    width: 44px;
    height: 44px;
    padding: 0;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    color: #747d86;
    background: transparent;
    transform: translateY(-50%);
}

.wilo-auth-password-toggle:hover,
.wilo-auth-password-toggle:focus {
    color: var(--wilo-orange);
    background: var(--wilo-orange-soft);
}

body.wilo-template-login .wilo-auth-options {
    margin: 0 0 26px;
    font-size: 13px;
}

body.wilo-template-login .wilo-auth-remember input {
    width: 18px;
    height: 18px;
}

body.wilo-template-login .wilo-auth-submit {
    min-height: 56px;
    border: 0;
    border-radius: 10px;
    background: var(--wilo-orange);
    box-shadow: 0 12px 28px rgba(255, 103, 0, .2);
    font-size: 16px;
}

body.wilo-template-login .wilo-auth-submit:hover,
body.wilo-template-login .wilo-auth-submit:focus {
    background: var(--wilo-orange-strong);
}

body.wilo-template-login .wilo-auth-divider {
    margin: 28px 0 20px;
    font-size: 12px;
}

body.wilo-template-login .wilo-auth-providers,
body.wilo-template-login .wilo-auth-providers .provider-prelinking,
body.wilo-template-login .wilo-auth-providers .providerLinkingFeedback {
    font-size: 13px;
}

.wilo-auth-support-links {
    display: grid;
    margin-top: 28px;
    gap: 14px;
}

.wilo-auth-support-links p {
    display: grid;
    margin: 0;
    grid-template-columns: 22px max-content max-content;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: #555e66;
    font-size: 13px;
}

.wilo-auth-support-links i {
    color: #2c3136;
    font-size: 17px;
    text-align: center;
}

@media (max-width: 1120px) {
    body.wilo-template-login .logincontainer.wilo-auth-shell {
        grid-template-columns: minmax(430px, 46%) minmax(520px, 54%);
    }

    body.wilo-template-login .wilo-auth-story {
        padding-right: 38px;
        padding-left: 38px;
    }

    .wilo-auth-brand {
        gap: 16px;
    }

    .wilo-auth-brand span {
        padding-left: 16px;
        font-size: 14px;
    }
}

@media (max-width: 900px) {
    body.wilo-template-login .logincontainer.wilo-auth-shell {
        display: block;
        min-height: 100vh;
        min-height: 100svh;
    }

    body.wilo-template-login .wilo-auth-story {
        display: block;
        min-height: 170px;
        padding: 30px 28px;
    }

    .wilo-auth-brand img {
        width: 220px;
    }

    body.wilo-template-login .wilo-auth-visual {
        position: absolute;
        z-index: 1;
        right: -32px;
        bottom: -82px;
        width: 300px;
        height: 245px;
        margin: 0;
        opacity: .62;
    }

    body.wilo-template-login .wilo-auth-visual .wilo-auth-platform,
    body.wilo-template-login .wilo-auth-visual .wilo-auth-data-panel {
        display: none;
    }

    body.wilo-template-login .wilo-auth-visual .wilo-auth-cloud {
        top: 6%;
        width: 80%;
    }

    body.wilo-template-login .wilo-auth-story-copy,
    body.wilo-template-login .wilo-auth-story-footer {
        display: none;
    }

    body.wilo-template-login .wilo-auth-access {
        min-height: calc(100vh - 170px);
        min-height: calc(100svh - 170px);
        padding: 46px 24px 30px;
        flex-direction: column;
    }

    body.wilo-template-login .wilo-auth-access-inner {
        order: 1;
    }

    .wilo-auth-utilities {
        position: static;
        order: 2;
        width: 100%;
        max-width: 520px;
        margin: 28px auto 0;
        padding-top: 20px;
        justify-content: center;
        border-top: 1px solid #eceff1;
    }
}

@media (max-width: 600px) {
    body.wilo-template-login .wilo-auth-story {
        min-height: 126px;
        padding: 24px 20px;
    }

    .wilo-auth-brand {
        gap: 13px;
    }

    .wilo-auth-brand img {
        width: 194px;
        max-width: 60%;
    }

    .wilo-auth-brand span {
        padding-left: 13px;
        font-size: 13px;
    }

    body.wilo-template-login .wilo-auth-visual {
        right: -70px;
        bottom: -110px;
        width: 245px;
        opacity: .45;
    }

    body.wilo-template-login .wilo-auth-access {
        min-height: calc(100vh - 126px);
        min-height: calc(100svh - 126px);
        padding: 34px 18px 26px;
    }

    .wilo-auth-form-frame {
        padding: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    body.wilo-template-login .wilo-auth-heading {
        margin-bottom: 30px;
    }

    body.wilo-template-login .wilo-auth-heading h2 {
        font-size: 28px;
    }

    body.wilo-template-login .wilo-auth-heading p {
        font-size: 13px;
    }

    body.wilo-template-login .wilo-auth-input .form-control {
        height: 55px;
        font-size: 15px;
    }

    body.wilo-template-login .wilo-auth-options {
        gap: 12px;
        font-size: 12px;
    }

    .wilo-auth-support-links {
        margin-top: 28px;
        gap: 16px;
    }

    .wilo-auth-support-links p {
        grid-template-columns: 22px minmax(0, 1fr) auto;
        justify-content: stretch;
        font-size: 12px;
    }

    .wilo-auth-utilities {
        justify-content: space-between;
        gap: 2px;
    }

    .wilo-auth-utilities a {
        padding-right: 8px;
        padding-left: 8px;
        font-size: 12px;
    }
}

@media (max-width: 380px) {
    .wilo-auth-brand span {
        font-size: 12px;
    }

    body.wilo-template-login .wilo-auth-options {
        align-items: flex-start;
        flex-direction: column;
    }

    .wilo-auth-support-links p {
        grid-template-columns: 20px minmax(0, 1fr);
    }

    .wilo-auth-support-links p a {
        grid-column: 2;
    }
}

/* Commercial account-creation gateway (public registration disabled) */
body.wilo-registration-gateway {
    background: #f7f8fa;
}

body.wilo-registration-gateway .wilo-main-body {
    min-height: auto;
    padding: 38px 24px 48px;
    background:
        radial-gradient(circle at 77% 8%, rgba(255, 103, 0, .055), transparent 28%),
        #f7f8fa;
}

body.wilo-registration-gateway .wilo-content-container {
    max-width: 1280px;
    margin: 0 auto;
}

body.wilo-registration-gateway .wilo-content-container > .row.wilo-has-context-menu {
    display: block;
    margin: 0;
}

body.wilo-registration-gateway .wilo-has-context-menu > .wilo-page-heading,
body.wilo-registration-gateway .wilo-has-context-menu > .wilo-context-menu,
body.wilo-registration-gateway .wilo-has-context-menu > .clearfix {
    display: none !important;
}

body.wilo-registration-gateway .wilo-has-context-menu > .main-content,
body.wilo-registration-gateway .wilo-content-container > .row > .main-content {
    width: 100% !important;
    margin: 0;
    padding: 0;
    float: none !important;
}

.wilo-register-gateway {
    width: 100%;
    color: #1b1e21;
}

.wilo-register-hero {
    position: relative;
    display: grid;
    min-height: 430px;
    overflow: hidden;
    padding: 48px 56px;
    grid-template-columns: minmax(0, 1.03fr) minmax(420px, .97fr);
    align-items: center;
    gap: 34px;
    border: 1px solid #e4e7ea;
    border-radius: 20px;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, .98), rgba(255, 255, 255, .88)),
        #fff;
    box-shadow: 0 18px 55px rgba(24, 28, 33, .07);
}

.wilo-register-hero::before {
    position: absolute;
    inset: 0 0 0 54%;
    opacity: .48;
    background-image:
        linear-gradient(rgba(255, 103, 0, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 103, 0, .055) 1px, transparent 1px);
    background-size: 32px 32px;
    content: "";
    mask-image: linear-gradient(90deg, transparent, #000 35%, #000);
}

.wilo-register-copy,
.wilo-register-illustration {
    position: relative;
    z-index: 1;
}

.wilo-register-eyebrow {
    display: inline-flex;
    margin-bottom: 15px;
    align-items: center;
    gap: 9px;
    color: var(--wilo-orange);
    font-size: 12px;
    letter-spacing: .04em;
    line-height: 1.2;
    text-transform: uppercase;
}

.wilo-register-eyebrow::before {
    width: 28px;
    height: 2px;
    border-radius: 2px;
    background: var(--wilo-orange);
    content: "";
}

.wilo-register-copy h1 {
    max-width: 610px;
    margin: 0 0 18px;
    color: #15181b;
    font-size: clamp(38px, 3.45vw, 56px);
    letter-spacing: -.055em;
    line-height: 1.02;
}

.wilo-register-copy p {
    max-width: 610px;
    margin: 0 0 13px;
    color: #66707a;
    font-size: 15px;
    letter-spacing: -.035em;
    line-height: 1.65;
}

.wilo-register-copy .wilo-register-lead {
    color: #3f474f;
    font-size: 17px;
}

.wilo-register-actions {
    display: flex;
    margin-top: 28px;
    align-items: center;
    gap: 22px;
}

body.wilo-body a.wilo-register-primary {
    display: inline-flex;
    min-width: 170px;
    min-height: 54px;
    padding: 0 22px;
    align-items: center;
    justify-content: center;
    gap: 18px;
    border: 1px solid var(--wilo-orange);
    border-radius: 10px;
    color: #fff;
    background: var(--wilo-orange);
    box-shadow: 0 12px 26px rgba(255, 103, 0, .2);
    font-size: 15px;
}

body.wilo-body a.wilo-register-primary:hover,
body.wilo-body a.wilo-register-primary:focus {
    border-color: var(--wilo-orange-strong);
    color: #fff;
    background: var(--wilo-orange-strong);
    box-shadow: 0 15px 30px rgba(242, 87, 0, .24);
    transform: translateY(-2px);
}

.wilo-register-login-link {
    display: inline-flex;
    min-height: 44px;
    padding: 0 4px;
    align-items: center;
    gap: 9px;
    color: #353b41 !important;
    border-bottom: 2px solid #ffd5bb;
    font-size: 14px;
}

.wilo-register-login-link:hover,
.wilo-register-login-link:focus {
    color: var(--wilo-orange) !important;
    border-bottom-color: var(--wilo-orange);
}

.wilo-register-illustration {
    display: flex;
    min-height: 330px;
    align-items: center;
    justify-content: center;
}

.wilo-register-illustration img {
    position: relative;
    z-index: 2;
    display: block;
    width: min(100%, 560px);
    height: auto;
    filter: drop-shadow(0 22px 22px rgba(21, 24, 27, .1));
}

.wilo-register-visual-glow {
    position: absolute;
    z-index: 0;
    width: 390px;
    height: 250px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 103, 0, .14), rgba(255, 103, 0, 0) 68%);
    filter: blur(3px);
}

.wilo-register-secure-badge {
    position: absolute;
    z-index: 3;
    right: 3%;
    bottom: 13%;
    display: inline-flex;
    min-height: 40px;
    padding: 0 14px;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(255, 103, 0, .15);
    border-radius: 20px;
    color: #343b42;
    background: rgba(255, 255, 255, .93);
    box-shadow: 0 10px 26px rgba(24, 28, 33, .1);
    font-size: 12px;
    backdrop-filter: blur(10px);
}

.wilo-register-secure-badge i {
    color: var(--wilo-orange);
}

.wilo-register-steps {
    display: grid;
    margin: 16px 0;
    padding: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    list-style: none;
    border: 1px solid #e4e7ea;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 34px rgba(24, 28, 33, .045);
}

.wilo-register-steps li {
    position: relative;
    display: grid;
    min-height: 104px;
    padding: 21px 25px;
    grid-template-columns: 34px 42px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
}

.wilo-register-steps li + li::before {
    position: absolute;
    top: 19px;
    bottom: 19px;
    left: 0;
    width: 1px;
    background: #e8ebee;
    content: "";
}

.wilo-register-step-number {
    display: inline-flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--wilo-orange);
    background: var(--wilo-orange-soft);
    font-size: 15px;
}

.wilo-register-steps li > i {
    display: inline-flex;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border: 1px solid #e8ebee;
    border-radius: 50%;
    color: #33393f;
    font-size: 17px;
}

.wilo-register-steps strong,
.wilo-register-steps small {
    display: block;
}

.wilo-register-steps strong {
    margin-bottom: 4px;
    color: #23272b;
    font-size: 14px;
}

.wilo-register-steps small {
    color: #727b84;
    font-size: 12px;
    line-height: 1.45;
}

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

.wilo-register-benefits article {
    display: grid;
    min-height: 132px;
    padding: 24px;
    grid-template-columns: 54px minmax(0, 1fr);
    align-items: start;
    gap: 17px;
    border: 1px solid #e4e7ea;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 32px rgba(24, 28, 33, .04);
}

.wilo-register-benefit-icon {
    display: inline-flex;
    width: 54px;
    height: 54px;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    color: var(--wilo-orange);
    background: var(--wilo-orange-soft);
    font-size: 21px;
}

.wilo-register-benefits h2 {
    margin: 2px 0 7px;
    color: #22262a;
    font-size: 16px;
    line-height: 1.25;
}

.wilo-register-benefits p {
    margin: 0;
    color: #717a83;
    font-size: 12px;
    line-height: 1.55;
}

.wilo-register-affiliate {
    position: relative;
    display: grid;
    min-height: 148px;
    overflow: hidden;
    padding: 27px 30px;
    grid-template-columns: 76px minmax(0, 1fr) minmax(235px, auto);
    align-items: center;
    gap: 26px;
    border: 1px solid #24282c;
    border-radius: 18px;
    color: #fff;
    background:
        radial-gradient(circle at 11% 50%, rgba(255, 103, 0, .21), transparent 19%),
        linear-gradient(110deg, #191c1f, #202428);
    box-shadow: 0 15px 38px rgba(19, 22, 25, .14);
}

.wilo-register-affiliate::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    background: var(--wilo-orange);
    content: "";
}

.wilo-register-affiliate.is-highlighted {
    border-color: rgba(255, 103, 0, .72);
    box-shadow: 0 0 0 4px rgba(255, 103, 0, .11), 0 18px 42px rgba(19, 22, 25, .17);
}

.wilo-register-affiliate-icon {
    display: inline-flex;
    width: 76px;
    height: 76px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 22px;
    color: var(--wilo-orange);
    background: rgba(255, 255, 255, .055);
    font-size: 30px;
}

.wilo-register-affiliate-copy {
    min-width: 0;
}

.wilo-register-affiliate-copy > span {
    display: block;
    margin-bottom: 6px;
    color: #ff9149;
    font-size: 11px;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.wilo-register-affiliate h2 {
    margin: 0 0 8px;
    color: #fff;
    font-size: 22px;
    line-height: 1.22;
}

.wilo-register-affiliate p {
    max-width: 690px;
    margin: 0;
    color: rgba(255, 255, 255, .67);
    font-size: 13px;
    line-height: 1.55;
}

body.wilo-body a.wilo-register-whatsapp {
    display: inline-flex;
    min-width: 235px;
    min-height: 58px;
    padding: 0 18px;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border: 1px solid #22b75f;
    border-radius: 11px;
    color: #fff;
    background: #20ad59;
    box-shadow: 0 12px 25px rgba(32, 173, 89, .17);
}

body.wilo-body a.wilo-register-whatsapp:hover,
body.wilo-body a.wilo-register-whatsapp:focus {
    border-color: #169849;
    color: #fff;
    background: #169849;
    transform: translateY(-2px);
}

.wilo-register-whatsapp > i {
    font-size: 25px;
}

.wilo-register-whatsapp span,
.wilo-register-whatsapp strong,
.wilo-register-whatsapp small {
    display: block;
}

.wilo-register-whatsapp strong {
    margin-bottom: 2px;
    font-size: 14px;
}

.wilo-register-whatsapp small {
    color: rgba(255, 255, 255, .76);
    font-size: 10px;
}

@media (max-width: 1080px) {
    .wilo-register-hero {
        padding: 44px 40px;
        grid-template-columns: minmax(0, 1.05fr) minmax(330px, .95fr);
    }

    .wilo-register-copy h1 {
        font-size: 42px;
    }

    .wilo-register-steps li {
        padding-right: 18px;
        padding-left: 18px;
        grid-template-columns: 32px minmax(0, 1fr);
        gap: 11px;
    }

    .wilo-register-steps li > i {
        display: none;
    }

    .wilo-register-affiliate {
        grid-template-columns: 68px minmax(0, 1fr) minmax(220px, auto);
        gap: 20px;
    }

    .wilo-register-affiliate-icon {
        width: 68px;
        height: 68px;
    }
}

@media (max-width: 840px) {
    body.wilo-registration-gateway .wilo-main-body {
        padding: 24px 18px 36px;
    }

    .wilo-register-hero {
        min-height: 0;
        padding: 42px 34px 22px;
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    .wilo-register-hero::before {
        inset: 45% 0 0;
        mask-image: linear-gradient(180deg, transparent, #000 35%, #000);
    }

    .wilo-register-copy {
        text-align: center;
    }

    .wilo-register-eyebrow {
        justify-content: center;
    }

    .wilo-register-copy h1,
    .wilo-register-copy p {
        margin-right: auto;
        margin-left: auto;
    }

    .wilo-register-actions {
        justify-content: center;
    }

    .wilo-register-illustration {
        min-height: 260px;
    }

    .wilo-register-illustration img {
        width: min(92%, 470px);
    }

    .wilo-register-secure-badge {
        right: 14%;
        bottom: 8%;
    }

    .wilo-register-steps,
    .wilo-register-benefits {
        grid-template-columns: minmax(0, 1fr);
    }

    .wilo-register-steps li {
        min-height: 88px;
        grid-template-columns: 34px 42px minmax(0, 1fr);
        padding: 17px 22px;
    }

    .wilo-register-steps li > i {
        display: inline-flex;
    }

    .wilo-register-steps li + li::before {
        inset: 0 22px auto;
        width: auto;
        height: 1px;
    }

    .wilo-register-benefits article {
        min-height: 0;
    }

    .wilo-register-affiliate {
        grid-template-columns: 64px minmax(0, 1fr);
    }

    .wilo-register-affiliate-icon {
        width: 64px;
        height: 64px;
    }

    body.wilo-body a.wilo-register-whatsapp {
        width: 100%;
        grid-column: 1 / -1;
    }
}

@media (max-width: 600px) {
    body.wilo-registration-gateway .wilo-main-body {
        padding: 16px 12px 28px;
    }

    .wilo-register-hero {
        padding: 32px 20px 16px;
        border-radius: 16px;
    }

    .wilo-register-eyebrow {
        font-size: 10px;
    }

    .wilo-register-copy h1 {
        margin-bottom: 16px;
        font-size: 34px;
        line-height: 1.05;
    }

    .wilo-register-copy .wilo-register-lead {
        font-size: 15px;
    }

    .wilo-register-copy p {
        font-size: 13px;
    }

    .wilo-register-actions {
        margin-top: 24px;
        flex-direction: column;
        gap: 10px;
    }

    body.wilo-body a.wilo-register-primary,
    .wilo-register-login-link {
        width: 100%;
    }

    .wilo-register-login-link {
        justify-content: center;
        border: 0;
    }

    .wilo-register-illustration {
        min-height: 220px;
    }

    .wilo-register-secure-badge {
        right: 4%;
        bottom: 5%;
    }

    .wilo-register-steps,
    .wilo-register-benefits {
        margin-bottom: 12px;
    }

    .wilo-register-steps li {
        grid-template-columns: 32px minmax(0, 1fr);
        padding: 17px;
    }

    .wilo-register-steps li > i {
        display: none;
    }

    .wilo-register-benefits article {
        padding: 20px;
        grid-template-columns: 48px minmax(0, 1fr);
    }

    .wilo-register-benefit-icon {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        font-size: 18px;
    }

    .wilo-register-affiliate {
        padding: 24px 20px;
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
        border-radius: 16px;
        text-align: center;
    }

    .wilo-register-affiliate-icon {
        width: 58px;
        height: 58px;
        margin: 0 auto;
        border-radius: 18px;
        font-size: 25px;
    }

    .wilo-register-affiliate h2 {
        font-size: 20px;
    }

    body.wilo-body a.wilo-register-whatsapp {
        min-width: 0;
        grid-column: auto;
    }
}

/* cPanel hosting client area — v1.0.37 */
body.wilo-cpanel-service-view .wilo-cpanel-dashboard {
    --wilo-cpanel-surface: #fff;
    --wilo-cpanel-soft: #f6f8fa;
    --wilo-cpanel-line: #e4e8ec;
}

body.wilo-cpanel-service-view .wilo-cpanel-panel {
    position: relative;
    margin-bottom: 22px;
    overflow: hidden;
    border: 1px solid var(--wilo-cpanel-line);
    border-radius: 18px;
    background: var(--wilo-cpanel-surface);
    box-shadow: 0 14px 36px rgba(24, 29, 34, .07);
}

body.wilo-cpanel-service-view .wilo-cpanel-panel > .panel-heading {
    min-height: 67px;
    padding: 17px 22px;
    border: 0;
    border-bottom: 1px solid var(--wilo-cpanel-line);
    border-radius: 0;
    background: #fff;
}

body.wilo-cpanel-service-view .wilo-cpanel-panel > .panel-heading .panel-title,
body.wilo-cpanel-service-view .wilo-cpanel-panel > .panel-heading h1,
body.wilo-cpanel-service-view .wilo-cpanel-panel > .panel-heading h2,
body.wilo-cpanel-service-view .wilo-cpanel-panel > .panel-heading h3,
body.wilo-cpanel-service-view .wilo-cpanel-panel > .panel-heading h4 {
    display: flex;
    margin: 0;
    align-items: center;
    gap: 12px;
    color: #191c1f;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 32px;
}

.wilo-cpanel-heading-icon {
    display: inline-grid;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 10px;
    color: #ff6700;
    background: #fff0e6;
    font-size: 14px;
    place-items: center;
}

body.wilo-cpanel-service-view .wilo-cpanel-panel > .panel-body {
    padding: 24px;
}

body.wilo-cpanel-service-view .wilo-cpanel-panel--package {
    border-color: #252a2f;
    color: #fff;
    background:
        radial-gradient(circle at 88% 15%, rgba(255, 103, 0, .3), transparent 34%),
        linear-gradient(145deg, #121416 0%, #22272c 100%);
}

body.wilo-cpanel-service-view .wilo-cpanel-panel--package::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    z-index: 3;
    background: #ff6700;
    content: '';
}

body.wilo-cpanel-service-view .wilo-cpanel-panel--package > .panel-heading {
    border-bottom-color: rgba(255, 255, 255, .1);
    color: #fff;
    background: transparent;
}

body.wilo-cpanel-service-view .wilo-cpanel-panel--package > .panel-heading .panel-title,
body.wilo-cpanel-service-view .wilo-cpanel-panel--package > .panel-heading h1,
body.wilo-cpanel-service-view .wilo-cpanel-panel--package > .panel-heading h2,
body.wilo-cpanel-service-view .wilo-cpanel-panel--package > .panel-heading h3,
body.wilo-cpanel-service-view .wilo-cpanel-panel--package > .panel-heading h4 {
    color: #fff;
}

body.wilo-cpanel-service-view .wilo-cpanel-panel--package .wilo-cpanel-heading-icon {
    color: #fff;
    background: rgba(255, 103, 0, .22);
}

body.wilo-cpanel-service-view .wilo-cpanel-panel--package > .panel-body {
    position: relative;
    min-height: 205px;
    padding: 27px 145px 28px 27px;
    color: rgba(255, 255, 255, .8);
    text-align: left !important;
}

body.wilo-cpanel-service-view .wilo-cpanel-panel--package .panel-body .text-center,
body.wilo-cpanel-service-view .wilo-cpanel-panel--package .panel-body [class*="col-"] {
    text-align: left !important;
}

body.wilo-cpanel-service-view .wilo-cpanel-panel--package .panel-body h1,
body.wilo-cpanel-service-view .wilo-cpanel-panel--package .panel-body h2,
body.wilo-cpanel-service-view .wilo-cpanel-panel--package .panel-body h3,
body.wilo-cpanel-service-view .wilo-cpanel-panel--package .panel-body h4,
body.wilo-cpanel-service-view .wilo-cpanel-panel--package .panel-body strong {
    color: #fff;
}

body.wilo-cpanel-service-view .wilo-cpanel-panel--package .panel-body h3,
body.wilo-cpanel-service-view .wilo-cpanel-panel--package .panel-body h4 {
    margin-top: 3px;
    margin-bottom: 8px;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.25;
}

body.wilo-cpanel-service-view .wilo-cpanel-panel--package .panel-body a:not(.btn) {
    color: #ff8d42;
}

.wilo-cpanel-package-visual {
    position: absolute;
    top: 50%;
    right: 24px;
    display: grid;
    width: 104px;
    height: 104px;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 31px;
    background: linear-gradient(145deg, #ff7c25, #e75800);
    box-shadow: 0 22px 45px rgba(0, 0, 0, .24), 0 0 0 10px rgba(255, 103, 0, .09);
    place-items: center;
    transform: translateY(-50%) rotate(3deg);
}

.wilo-cpanel-package-visual > span {
    position: relative;
    display: grid;
    width: 64px;
    height: 64px;
    place-items: center;
}

.wilo-cpanel-package-visual .fa-cloud {
    color: rgba(255, 255, 255, .3);
    font-size: 61px;
}

.wilo-cpanel-package-visual .fa-server {
    position: absolute;
    right: 0;
    bottom: 2px;
    color: #fff;
    font-size: 31px;
    filter: drop-shadow(0 5px 8px rgba(0, 0, 0, .2));
}

body.wilo-cpanel-service-view .wilo-cpanel-panel--package .btn {
    display: inline-flex;
    min-height: 42px;
    margin-top: 8px;
    padding: 10px 14px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 10px;
    color: #fff;
    background: rgba(255, 255, 255, .08);
    box-shadow: none;
}

body.wilo-cpanel-service-view .wilo-cpanel-panel--package .btn-primary,
body.wilo-cpanel-service-view .wilo-cpanel-panel--package .btn-success,
body.wilo-cpanel-service-view .wilo-cpanel-panel--package .btn-info {
    border-color: #ff6700;
    background: #ff6700;
}

body.wilo-cpanel-service-view .wilo-cpanel-panel--package .btn:hover,
body.wilo-cpanel-service-view .wilo-cpanel-panel--package .btn:focus {
    border-color: #ff6700;
    color: #fff;
    background: #ff6700;
    transform: translateY(-1px);
}

.wilo-cpanel-button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

body.wilo-cpanel-service-view .wilo-cpanel-panel--usage > .panel-body {
    padding: 16px;
}

body.wilo-cpanel-service-view .wilo-cpanel-panel--usage .panel-body > .row {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
}

.wilo-cpanel-usage-metric {
    position: relative;
    min-height: 205px;
    padding: 21px 14px !important;
    border-radius: 14px;
    background: #f7f9fb;
    text-align: center;
}

.wilo-cpanel-usage-metric + .wilo-cpanel-usage-metric {
    border-left: 8px solid #fff;
}

.wilo-cpanel-usage-metric h3,
.wilo-cpanel-usage-metric h4 {
    margin: 0 0 12px;
    color: #3d444b;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.wilo-cpanel-usage-metric canvas {
    max-width: 112px;
    max-height: 112px;
}

.wilo-cpanel-usage-metric p {
    margin: 9px 0 0;
    color: #1b1e21;
    font-size: 15px;
    font-weight: 700;
}

body.wilo-cpanel-service-view .wilo-cpanel-panel--usage .text-muted {
    display: block;
    margin: 13px 0 0;
    color: #7a838b;
    font-size: 11px;
    text-align: center;
}

body.wilo-cpanel-service-view .wilo-cpanel-panel--shortcuts > .panel-body {
    padding: 15px;
}

body.wilo-cpanel-service-view .wilo-cpanel-panel--shortcuts .panel-body > .row {
    display: grid;
    margin: 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

body.wilo-cpanel-service-view .wilo-cpanel-panel--shortcuts .wilo-cpanel-shortcut-column {
    width: auto !important;
    min-width: 0;
    padding: 0 !important;
    float: none !important;
}

body.wilo-cpanel-service-view a.wilo-cpanel-shortcut {
    display: flex;
    width: 100%;
    min-height: 126px;
    padding: 16px 10px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    border: 1px solid #e8ebee;
    border-radius: 14px;
    color: #33393f;
    background: #fafbfc;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
}

body.wilo-cpanel-service-view a.wilo-cpanel-shortcut img {
    width: auto;
    max-width: 58px;
    height: 54px;
    max-height: 54px;
    object-fit: contain;
    transition: filter .18s ease, transform .18s ease;
}

body.wilo-cpanel-service-view a.wilo-cpanel-shortcut:hover,
body.wilo-cpanel-service-view a.wilo-cpanel-shortcut:focus {
    border-color: rgba(255, 103, 0, .5);
    color: #d95400;
    background: #fff7f2;
    box-shadow: 0 10px 24px rgba(255, 103, 0, .1);
    transform: translateY(-2px);
}

body.wilo-cpanel-service-view a.wilo-cpanel-shortcut:hover img,
body.wilo-cpanel-service-view a.wilo-cpanel-shortcut:focus img {
    filter: saturate(1.08);
    transform: scale(1.06);
}

body.wilo-cpanel-service-view .wilo-cpanel-panel--email > .panel-body {
    padding: 24px;
}

body.wilo-cpanel-service-view .wilo-cpanel-dashboard .form-group label {
    margin-bottom: 8px;
    color: #40474e;
    font-size: 13px;
    font-weight: 700;
}

body.wilo-cpanel-service-view .wilo-cpanel-dashboard .form-control {
    min-height: 48px;
    padding: 11px 14px;
    border: 1px solid #dfe4e8;
    border-radius: 10px;
    color: #202428;
    background: #fff;
    box-shadow: none;
    font-size: 15px;
}

body.wilo-cpanel-service-view .wilo-cpanel-dashboard .form-control:focus {
    border-color: #ff6700;
    box-shadow: 0 0 0 3px rgba(255, 103, 0, .12);
}

body.wilo-cpanel-service-view .wilo-cpanel-dashboard .btn-primary,
body.wilo-cpanel-service-view .wilo-cpanel-dashboard .btn-success,
body.wilo-cpanel-service-view .wilo-cpanel-dashboard .btn-info {
    border-color: #ff6700;
    background: #ff6700;
}

body.wilo-cpanel-service-view .wilo-context-menu a.wilo-cpanel-action-link {
    display: flex;
    align-items: center;
    gap: 12px;
}

.wilo-cpanel-action-icon {
    display: inline-grid;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 10px;
    color: #ff6700;
    background: #fff1e8;
    font-size: 13px;
    place-items: center;
}

body.wilo-cpanel-service-view .wilo-context-menu a.wilo-cpanel-action-link:hover .wilo-cpanel-action-icon,
body.wilo-cpanel-service-view .wilo-context-menu a.wilo-cpanel-action-link:focus .wilo-cpanel-action-icon,
body.wilo-cpanel-service-view .wilo-context-menu a.wilo-cpanel-action-link.active .wilo-cpanel-action-icon {
    color: #fff;
    background: #ff6700;
}

@media (max-width: 1199px) {
    body.wilo-cpanel-service-view .wilo-cpanel-panel--shortcuts .panel-body > .row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    body.wilo-cpanel-service-view .wilo-cpanel-panel--shortcuts .panel-body > .row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.wilo-cpanel-service-view .wilo-cpanel-panel--package > .panel-body {
        padding-right: 130px;
    }

    .wilo-cpanel-package-visual {
        right: 20px;
        width: 90px;
        height: 90px;
        border-radius: 27px;
    }
}

@media (max-width: 767px) {
    body.wilo-cpanel-service-view .wilo-cpanel-panel {
        margin-bottom: 16px;
        border-radius: 15px;
    }

    body.wilo-cpanel-service-view .wilo-cpanel-panel > .panel-heading {
        min-height: 60px;
        padding: 13px 16px;
    }

    body.wilo-cpanel-service-view .wilo-cpanel-panel > .panel-heading .panel-title,
    body.wilo-cpanel-service-view .wilo-cpanel-panel > .panel-heading h1,
    body.wilo-cpanel-service-view .wilo-cpanel-panel > .panel-heading h2,
    body.wilo-cpanel-service-view .wilo-cpanel-panel > .panel-heading h3,
    body.wilo-cpanel-service-view .wilo-cpanel-panel > .panel-heading h4 {
        font-size: 16px;
    }

    body.wilo-cpanel-service-view .wilo-cpanel-panel--package > .panel-body {
        min-height: 190px;
        padding: 23px 116px 23px 20px;
    }

    .wilo-cpanel-package-visual {
        right: 16px;
        width: 78px;
        height: 78px;
        border-radius: 23px;
    }

    .wilo-cpanel-package-visual > span {
        transform: scale(.8);
    }

    body.wilo-cpanel-service-view .wilo-cpanel-panel--usage .panel-body > .row {
        display: block;
    }

    .wilo-cpanel-usage-metric {
        width: 100%;
        min-height: 185px;
    }

    .wilo-cpanel-usage-metric + .wilo-cpanel-usage-metric {
        margin-top: 10px;
        border-left: 0;
    }
}

@media (max-width: 520px) {
    body.wilo-cpanel-service-view .wilo-cpanel-panel--package > .panel-body {
        padding-right: 20px;
    }

    .wilo-cpanel-package-visual {
        display: none;
    }

    body.wilo-cpanel-service-view .wilo-cpanel-panel--shortcuts .panel-body > .row {
        grid-template-columns: minmax(0, 1fr);
    }

    body.wilo-cpanel-service-view a.wilo-cpanel-shortcut {
        min-height: 92px;
        padding: 14px 16px;
        justify-content: flex-start;
        flex-direction: row;
        gap: 14px;
        text-align: left;
    }

    body.wilo-cpanel-service-view a.wilo-cpanel-shortcut img {
        width: 46px;
        height: 46px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.wilo-cpanel-service-view a.wilo-cpanel-shortcut,
    body.wilo-cpanel-service-view a.wilo-cpanel-shortcut img {
        transition: none;
    }

    body.wilo-cpanel-service-view a.wilo-cpanel-shortcut:hover,
    body.wilo-cpanel-service-view a.wilo-cpanel-shortcut:focus {
        transform: none;
    }
}