/*
 * CyberNet box layout
 * Thin outline + corner accents (top-left / bottom-right), square edges.
 * All colors come from the active Lagom color scheme (--brand-primary*, --gray-*).
 * Loaded automatically by includes/head.tpl after theme.css.
 * Restore: delete this file.
 */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500;700&display=swap');

:root,
.lagom-dark-mode {
    --cyb-line:            var(--brand-primary-lighter-3);
    --cyb-line-hover:      var(--brand-primary-lighter-2);
    --cyb-corner:          var(--brand-primary);
    --cyb-corner-size:     13px;
    --cyb-corner-width:    2px;
    --cyb-mono:            'IBM Plex Mono', ui-monospace, 'Courier New', monospace;
    --cyb-title-size:      13px;  /* panel title font size */

    /* Panels */
    --panel-border:        1px solid var(--cyb-line);
    --panel-border-radius: 0px;
    --panel-box-shadow:    none;

    /* Dashboard tiles */
    --tile-border:         1px solid var(--cyb-line);
    --tile-border-radius:  0px;
    --tile-box-shadow:     none;
    --tile-hover-shadow:   none;

    /* Sidebar panels: framed card instead of transparent */
    --panel-sidebar-bg:                        var(--ui-block-bg);
    --panel-sidebar-border:                    1px solid var(--cyb-line);
    --panel-sidebar-heading-padding:           14px 20px 12px;
    --panel-sidebar-body-padding:              16px 20px;
    --panel-sidebar-footer-padding:            0 20px 20px;
    --panel-sidebar-margin-bottom:             24px;
    --panel-sidebar-list-group-bg:             transparent;
    --panel-sidebar-list-group-border:         none;
    --panel-sidebar-list-group-border-radius:  0px;
    --panel-sidebar-list-group-box-shadow:     none;

    /* Tables (Services, Domains, Invoices, Tickets...) */
    --table-container-border:        1px solid var(--cyb-line);
    --table-container-border-radius: 0px;
    --table-container-box-shadow:    none;

    /* Summary boxes (Add Funds, order summary) */
    --panel-summary-shadow:          none;
    --panel-summary-border-radius:   0px;

    /* Store / pricing packages */
    --package-border:        1px solid var(--cyb-line);
    --package-border-radius: 0px;
    --package-block-shadow:  none;
}

/* ---------- Corner accents ---------- */

.panel,
.tiles .tile,
.package,
.search-box,
.table-container {
    position: relative;
}

.panel:not(.panel-sidebar-primary):not(.panel-sidebar-secondary):not(.panel-summary-primary):not(.panel-summary-secondary):not(.panel-switch)::before,
.panel:not(.panel-sidebar-primary):not(.panel-sidebar-secondary):not(.panel-summary-primary):not(.panel-summary-secondary):not(.panel-switch)::after,
.tiles .tile::before,
.tiles .tile::after,
.package::before,
.package::after,
.search-box::before,
.search-box::after,
.table-container::before,
.table-container::after {
    content: '';
    position: absolute;
    z-index: 2;
    width: var(--cyb-corner-size);
    height: var(--cyb-corner-size);
    pointer-events: none;
}

.panel:not(.panel-sidebar-primary):not(.panel-sidebar-secondary):not(.panel-summary-primary):not(.panel-summary-secondary):not(.panel-switch)::before,
.tiles .tile::before,
.package::before,
.search-box::before,
.table-container::before {
    top: -1px;
    left: -1px;
    border-top: var(--cyb-corner-width) solid var(--cyb-corner);
    border-left: var(--cyb-corner-width) solid var(--cyb-corner);
}

.panel:not(.panel-sidebar-primary):not(.panel-sidebar-secondary):not(.panel-summary-primary):not(.panel-summary-secondary):not(.panel-switch)::after,
.tiles .tile::after,
.package::after,
.search-box::after,
.table-container::after {
    right: -1px;
    bottom: -1px;
    border-right: var(--cyb-corner-width) solid var(--cyb-corner);
    border-bottom: var(--cyb-corner-width) solid var(--cyb-corner);
}

/* Auth pages (login / register / reset) have their own card design */
.cybAuthShell .panel::before,
.cybAuthShell .panel::after {
    content: none !important;
}

/* Hover: outline picks up the brand tint */
a.panel:hover,
a.tile:hover,
.tiles .tile:hover,
.package:hover {
    border-color: var(--cyb-line-hover);
}

/* ---------- Sidebar panels ---------- */

.panel-sidebar:not(.panel-summary) {
    border-radius: 0;
}

.panel-sidebar:not(.panel-summary):not(.panel-client-details) > .panel-heading {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--cyb-line);
}

.panel-sidebar:not(.panel-summary):not(.panel-client-details) > .panel-heading .panel-title {
    width: 100%;
}

/* Body followed by a link list: avoid doubled spacing */
.panel-sidebar:not(.panel-summary) > .panel-body + .list-group {
    padding-top: 0;
}

.panel-sidebar:not(.panel-summary) > .panel-body > .btn-block:last-child,
.panel-sidebar:not(.panel-summary) > .panel-body > p:last-child {
    margin-bottom: 0;
}

/* Styled groups (Operating Hours, KB Suggestions, Recent Tickets, Attachments...):
   same framed card; the inner list/form drops its own frame and padding */
.panel-sidebar.panel-styled-group > .panel-body {
    padding: 0;
}

.panel-sidebar.panel-styled-group > .panel-body + .list-group,
.panel-sidebar.panel-styled-group > .list-group {
    padding: 0;
}

.panel-sidebar.panel-styled-group .list-group > .list-group-item:first-child {
    border-top: 0;
}

.panel-sidebar.panel-styled-group .list-group > .list-group-item {
    border-radius: 0;
}

.panel-sidebar.panel-styled-group .kb-suggestion-form {
    padding: 20px;
}

.panel-sidebar .kb-suggestion-form .form-control,
.panel-sidebar .kb-suggestion-form .search-field .form-control {
    border-radius: 0;
}

/* Account box ("Your Info"): Lagom hides its heading and pads the box itself.
   Keep that, and cancel the sidebar body/footer padding so it is not doubled. */
.panel-sidebar.panel-client-details {
    border-radius: 0;
}

.panel-sidebar.panel-client-details > .panel-body {
    padding: 0;
}

.panel-sidebar.panel-client-details > .panel-footer {
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
}

/* No colored background: primary/secondary account box looks like the other white panels */
.panel-sidebar.panel-client-details.panel-sidebar-primary,
.panel-sidebar.panel-client-details.panel-sidebar-secondary {
    --primary-block-bg:                              var(--ui-block-bg);
    --primary-block-border:                          1px solid var(--cyb-line);
    --primary-block-title-color:                     var(--text-heading-color);
    --primary-block-total-font-color:                var(--text-body-color);
    --primary-block-text-color:                      var(--text-body-color);
    --primary-block-divider-color:                   var(--cyb-line);
    --primary-block-link-color:                      var(--link-color);
    --primary-block-link-hover-color:                var(--link-hover-color);
    --primary-block-btn-outline-color:               var(--btn-default-color);
    --primary-block-btn-outline-border-color:        var(--btn-default-border);
    --primary-block-btn-outline-hover-color:         var(--brand-primary);
    --primary-block-btn-outline-hover-bg:            var(--brand-primary-lighter-4);
    --primary-block-btn-outline-hover-border-color:  var(--brand-primary);
    --primary-block-btn-outline-active-bg:           var(--brand-primary-lighter-4);
    --primary-block-btn-outline-active-border-color: var(--brand-primary);
    --secondary-block-bg:                            var(--ui-block-bg);
    --secondary-block-border:                        1px solid var(--cyb-line);
    --secondary-block-title-color:                   var(--text-heading-color);
    --secondary-block-divider-color:                 var(--cyb-line);
    background: var(--ui-block-bg);
    color: var(--text-body-color);
}

.panel-sidebar.panel-client-details {
    border: 1px solid var(--cyb-line);
    box-shadow: none;
}

.panel-sidebar.panel-client-details strong {
    color: var(--text-heading-color);
}

/* Corner accents for the account box (all styles) */
.panel-sidebar.panel-client-details::before,
.panel-sidebar.panel-client-details::after {
    content: '';
    position: absolute;
    z-index: 2;
    width: var(--cyb-corner-size);
    height: var(--cyb-corner-size);
    pointer-events: none;
}

.panel-sidebar.panel-client-details::before {
    top: -1px;
    left: -1px;
    border-top: var(--cyb-corner-width) solid var(--cyb-corner);
    border-left: var(--cyb-corner-width) solid var(--cyb-corner);
}

.panel-sidebar.panel-client-details::after {
    right: -1px;
    bottom: -1px;
    border-right: var(--cyb-corner-width) solid var(--cyb-corner);
    border-bottom: var(--cyb-corner-width) solid var(--cyb-corner);
}

/* ---------- Tables ---------- */

/* Table nested in a panel: the panel already has the corners */
.panel .table-container::before,
.panel .table-container::after {
    content: none;
}

.table-container .pagination > li > a,
.table-container .pagination > li > span,
.table-container .dataTables_length .form-control,
.table-container .dataTables_filter .form-control {
    border-radius: 0;
}

/* Hidden title icon is followed by   which shows as a leading space.
   Pull the text back by one monospace character (+ letter-spacing). */
.panel-sidebar .panel-heading .panel-title > i:first-child:not(.panel-minimise) {
    font-family: var(--cyb-mono);
    font-size: inherit;
    margin-left: calc(-1ch - 1.5px);
}

/* Sidebar "Register a New Domain" (panel-register): Lagom pads the box itself
   and gives it radius + shadow; use the same frame as the other sidebar panels */
.panel-sidebar:not(.panel-summary).panel-register,
.panel-sidebar:not(.panel-summary).panel-register.panel-sidebar-default {
    padding: 0;
    border: 1px solid var(--cyb-line);
    border-radius: 0;
    box-shadow: none;
    background: var(--ui-block-bg);
}

.panel-sidebar:not(.panel-summary).panel-register .input-group {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--cyb-line);
    border-radius: 0;
    background: var(--ui-block-bg);
    transition: border-color var(--transition-base);
}

.panel-sidebar:not(.panel-summary).panel-register .input-group:focus-within {
    border-color: var(--brand-primary);
}

.panel-sidebar:not(.panel-summary).panel-register .input-group-addon {
    display: flex;
    align-items: center;
    width: auto;
    padding: 0 0 0 14px;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}

.panel-sidebar:not(.panel-summary).panel-register .input-group-addon i {
    color: var(--brand-primary);
}

.panel-sidebar:not(.panel-summary).panel-register .input-group .form-control,
.panel-sidebar:not(.panel-summary).panel-register .input-group .form-control:hover,
.panel-sidebar:not(.panel-summary).panel-register .input-group .form-control:focus {
    flex: 1 1 auto;
    min-width: 0;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

.panel-sidebar:not(.panel-summary).panel-register .btn {
    border-radius: 0;
}

/* ---------- Support PIN widget (SupportPin addon, sidebar) ---------- */
/* One box per digit, CSS only. Monospace glyphs are 1ch wide; letter-spacing
   fills the rest of each cell and a repeating background draws the boxes.
   Width is fixed to (digits x cell), read from data-mask length, so it does not
   depend on whether the browser adds letter-spacing after the last digit. */

[id^="supportpin-sidebar-value-"] {
    --pin-cell:  1.8em;
    --pin-gap:   6px;
    --pin-space: calc(var(--pin-cell) - 1ch);
    --pin-len:   6;
    box-sizing: border-box;
    display: block !important;
    width: calc(var(--pin-len) * var(--pin-cell)) !important;
    max-width: none;
    overflow: hidden;
    margin: 4px auto 16px !important;
    padding: 0 0 0 calc(var(--pin-space) / 2) !important;
    font-family: var(--cyb-mono) !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 2.2em !important;
    letter-spacing: var(--pin-space) !important;
    text-align: left !important;
    white-space: nowrap;
    color: var(--text-heading-color);
    background:
        linear-gradient(to right,
            transparent calc(var(--pin-gap) / 2 + 1px),
            var(--ui-block-bg) 0,
            var(--ui-block-bg) calc(var(--pin-cell) - var(--pin-gap) / 2 - 1px),
            transparent 0)
            0 1px / var(--pin-cell) calc(100% - 2px) repeat-x,
        linear-gradient(to right,
            transparent calc(var(--pin-gap) / 2),
            var(--cyb-line) 0,
            var(--cyb-line) calc(var(--pin-cell) - var(--pin-gap) / 2),
            transparent 0)
            0 0 / var(--pin-cell) 100% repeat-x;
}
[id^="supportpin-sidebar-value-"][data-mask="\2022 \2022 \2022 \2022"] { --pin-len: 4; }
[id^="supportpin-sidebar-value-"][data-mask="\2022 \2022 \2022 \2022 \2022"] { --pin-len: 5; }
[id^="supportpin-sidebar-value-"][data-mask="\2022 \2022 \2022 \2022 \2022 \2022"] { --pin-len: 6; }
[id^="supportpin-sidebar-value-"][data-mask="\2022 \2022 \2022 \2022 \2022 \2022 \2022"] { --pin-len: 7; }
[id^="supportpin-sidebar-value-"][data-mask="\2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022"] { --pin-len: 8; }
[id^="supportpin-sidebar-value-"][data-mask="\2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022"] { --pin-len: 9; }
[id^="supportpin-sidebar-value-"][data-mask="\2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022"] { --pin-len: 10; }
[id^="supportpin-sidebar-value-"][data-mask="\2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022"] { --pin-len: 11; }
[id^="supportpin-sidebar-value-"][data-mask="\2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022"] { --pin-len: 12; }

/* Revealed PIN: digits in brand color, boxes tinted */
[id^="supportpin-sidebar-value-"][data-shown="1"] {
    color: var(--brand-primary);
}

.panel-sidebar:has([id^="supportpin-sidebar-value-"]) .panel-body {
    text-align: center;
}

.panel-sidebar:has([id^="supportpin-sidebar-value-"]) .panel-body .btn {
    border-radius: 0 !important;
    font-family: inherit !important;
    box-shadow: none !important;
}

.panel-sidebar:has([id^="supportpin-sidebar-value-"]) .panel-body .btn-primary,
.panel-sidebar:has([id^="supportpin-sidebar-value-"]) .panel-body .btn-success {
    border-color: var(--brand-primary) !important;
    background: var(--brand-primary) !important;
    color: #fff !important;
}

.panel-sidebar:has([id^="supportpin-sidebar-value-"]) .panel-body .btn-primary:hover,
.panel-sidebar:has([id^="supportpin-sidebar-value-"]) .panel-body .btn-success:hover {
    border-color: var(--brand-primary-darker) !important;
    background: var(--brand-primary-darker) !important;
}

.panel-sidebar:has([id^="supportpin-sidebar-value-"]) .panel-body .btn-default {
    border: 1px solid var(--cyb-line) !important;
    background: var(--ui-block-bg) !important;
    color: var(--text-heading-color) !important;
}

.panel-sidebar:has([id^="supportpin-sidebar-value-"]) .panel-body .btn-default:hover {
    border-color: var(--brand-primary) !important;
    color: var(--brand-primary) !important;
}

/* ---------- Empty states ("No Domains Registered With Us", etc.) ---------- */

.message.message-no-data {
    position: relative;
    border: 1px solid var(--cyb-line);
    border-radius: 0;
    box-shadow: none;
}

.message.message-no-data::before,
.message.message-no-data::after {
    content: '';
    position: absolute;
    z-index: 2;
    width: var(--cyb-corner-size);
    height: var(--cyb-corner-size);
    pointer-events: none;
}

.message.message-no-data::before {
    top: -1px;
    left: -1px;
    border-top: var(--cyb-corner-width) solid var(--cyb-corner);
    border-left: var(--cyb-corner-width) solid var(--cyb-corner);
}

.message.message-no-data::after {
    right: -1px;
    bottom: -1px;
    border-right: var(--cyb-corner-width) solid var(--cyb-corner);
    border-bottom: var(--cyb-corner-width) solid var(--cyb-corner);
}

/* Empty state inside another framed block: no second frame */
.panel .message.message-no-data,
.table-container .message.message-no-data,
.list-group .message.message-no-data,
.search-field .message.message-no-data,
.message.message-no-data.message-no-border {
    border: 0;
}

.panel .message.message-no-data::before,
.panel .message.message-no-data::after,
.table-container .message.message-no-data::before,
.table-container .message.message-no-data::after,
.list-group .message.message-no-data::before,
.list-group .message.message-no-data::after,
.search-field .message.message-no-data::before,
.search-field .message.message-no-data::after,
.message.message-no-data.message-no-border::before,
.message.message-no-data.message-no-border::after {
    content: none;
}

.message.message-no-data .btn {
    border-radius: 0;
}

/* ---------- Invoice (View Invoice, Mass Pay) ---------- */

.invoice {
    --table-border-color:        var(--cyb-line);
    --table-th-font-color:       var(--text-lighter-color);
    position: relative;
    border: 1px solid var(--cyb-line);
    border-radius: 0;
    box-shadow: none;
}

.invoice::before,
.invoice::after {
    content: '';
    position: absolute;
    z-index: 2;
    width: var(--cyb-corner-size);
    height: var(--cyb-corner-size);
    pointer-events: none;
}

.invoice::before {
    top: -1px;
    left: -1px;
    border-top: var(--cyb-corner-width) solid var(--cyb-corner);
    border-left: var(--cyb-corner-width) solid var(--cyb-corner);
}

.invoice::after {
    right: -1px;
    bottom: -1px;
    border-right: var(--cyb-corner-width) solid var(--cyb-corner);
    border-bottom: var(--cyb-corner-width) solid var(--cyb-corner);
}

/* Header: title + status, separated from the rest */
.invoice > .section:has(.invoice-title) {
    padding-bottom: 28px;
    border-bottom: 1px solid var(--cyb-line);
}

.invoice > .section + .section {
    margin-top: 32px;
}

.invoice-title {
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 16px;
    font-size: var(--font-size-h3);
    line-height: var(--line-height-h3);
    font-weight: var(--font-weight-medium);
}

.invoice-title .label {
    margin-left: 0;
    border-radius: 0;
    font-family: var(--cyb-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.invoice .list-info li {
    padding: 6px 0;
}

.invoice .list-info li:not(:last-of-type) {
    border-bottom: 1px dashed var(--cyb-line);
}

.invoice .list-info-text {
    font-family: var(--cyb-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--text-lighter-color);
}

.invoice .list-info-title {
    margin-bottom: 0;
    color: var(--text-heading-color);
    text-align: right;
}

/* Section headings: Pay To, Invoiced To, Invoice Items, Ledger */
.invoice .section h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    font-family: var(--cyb-mono);
    font-size: var(--cyb-title-size);
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-heading-color);
}

.invoice .section h3::before {
    content: '';
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    background: var(--brand-primary);
}

.invoice address {
    line-height: 1.7;
    color: var(--text-body-color);
}

/* Tables */
.invoice .table > thead > tr > th {
    border-bottom: 1px solid var(--cyb-line);
    font-family: var(--cyb-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--text-lighter-color);
}

.invoice .sub-total-row.first td {
    border-top: 1px solid var(--cyb-line);
}

.invoice .total-row td {
    border-top: 1px solid var(--cyb-line);
    border-bottom: 1px solid var(--cyb-line);
    background: var(--brand-primary-lighter-4);
    color: var(--text-heading-color);
}

.invoice .total-row td:last-child {
    color: var(--brand-primary);
}

.invoice .well,
.invoice .notes .notes-body {
    border-radius: 0;
    border-color: var(--cyb-line);
}

/* Amount column (last column) right-aligned; labels of totals line up next to it */
.invoice .table > thead > tr > th:last-child,
.invoice .table > tbody > tr > td:last-child:not([colspan]) {
    text-align: right;
}

.invoice .sub-total-row > td:nth-last-child(2),
.invoice .total-row > td:nth-last-child(2) {
    text-align: right;
}

/* Mass Pay: nested per-invoice table sits inside a padded cell;
   drop its outer padding so amounts line up with the AMOUNT header */
.table-masspay .table > tbody > tr > td:last-child {
    padding-right: 0;
}

/* Mass Pay */
.table-masspay .masspay-title {
    display: inline-flex;
    align-items: center;
    font-weight: var(--font-weight-medium);
}

.table-masspay > tbody > tr:not(.sub-total-row):not(.total-row) > td {
    border-top: 1px solid var(--cyb-line);
}

@media (max-width: 767px) {
    .invoice .list-info-title {
        text-align: left;
    }

    .invoice > .section:has(.invoice-title) .col-md-5 {
        margin-top: 16px;
    }
}

/* ---------- Ticket messages (View Ticket) ---------- */

.ticket-reply {
    overflow: visible;
    border: 1px solid var(--cyb-line);
    border-radius: 0;
    background: var(--ui-block-bg);
}

/* Replace Lagom's left stripe with the corner accents */
.ticket-reply::before,
.ticket-reply::after {
    content: '';
    position: absolute;
    z-index: 2;
    top: auto;
    bottom: auto;
    width: var(--cyb-corner-size);
    height: var(--cyb-corner-size);
    background: none;
    pointer-events: none;
}

.ticket-reply::before {
    top: -1px;
    left: -1px;
    border-top: var(--cyb-corner-width) solid var(--cyb-corner);
    border-left: var(--cyb-corner-width) solid var(--cyb-corner);
}

.ticket-reply::after {
    right: -1px;
    bottom: -1px;
    border-right: var(--cyb-corner-width) solid var(--cyb-corner);
    border-bottom: var(--cyb-corner-width) solid var(--cyb-corner);
}

.ticket-reply.staff {
    background: var(--ui-block-bg);
}

.ticket-reply.staff::before {
    background: none;
}

.ticket-reply-top {
    border-bottom: 1px solid var(--cyb-line);
    background: var(--ui-block-bg);
}

/* Staff replies: tinted header so they stand out from customer messages */
.ticket-reply.staff .ticket-reply-top {
    background: var(--brand-primary-lighter-4);
}

.ticket-reply-top .user-info .name {
    font-weight: var(--font-weight-medium);
    color: var(--text-heading-color);
}

.ticket-reply-top .user-info .name > i {
    color: var(--brand-primary);
}

.ticket-reply-top .user-info .date {
    font-family: var(--cyb-mono);
    font-size: 12px;
    letter-spacing: .5px;
    color: var(--text-lighter-color);
}

.ticket-reply-top .user-label .label {
    border-radius: 0;
    font-family: var(--cyb-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.ticket-reply .ip-address {
    margin-top: 16px;
    padding-top: 10px;
    border-top: 1px dashed var(--cyb-line);
    font-family: var(--cyb-mono);
    font-size: 11px;
    color: var(--text-lighter-color);
}

.ticket-reply-attachments {
    border-top: 1px solid var(--cyb-line);
    background: var(--ui-block-bg);
}

.ticket-reply-attachments > strong {
    font-family: var(--cyb-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.ticket-reply-attachments ul li a {
    border: 1px solid var(--cyb-line);
    border-radius: 0;
}

.ticket-reply-attachments ul li a .attachment-container {
    border-top: 1px solid var(--cyb-line);
    background-color: var(--ui-block-bg);
}

.ticket-reply-attachments ul li a > i {
    color: var(--brand-primary);
}

/* ---------- Ticket reply tabs: CC Recipients / Attachments ---------- */

/* Icon + input groups: the wrapper draws the frame, the inner input must not */
.panel-ticket-reply .input-group-preicon,
.panel-ticket-reply .input-group-icons {
    border: 1px solid var(--cyb-line);
    border-radius: 0;
    background: var(--ui-block-bg);
}

.panel-ticket-reply .input-group-preicon:hover,
.panel-ticket-reply .input-group-icons:hover {
    border-color: var(--cyb-line-hover);
}

.panel-ticket-reply .input-group-preicon:has(input:focus, input:active) {
    border-color: var(--brand-primary);
}

.panel-ticket-reply .input-group-preicon .form-control,
.panel-ticket-reply .input-group-preicon .form-control:hover,
.panel-ticket-reply .input-group-preicon .form-control:focus,
.panel-ticket-reply .input-group-icons .form-control {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: 0;
}

.panel-ticket-reply .input-group-preicon .input-group-prepend {
    display: flex;
    align-items: center;
    align-self: stretch;
    padding: 0 0 0 14px;
}

.panel-ticket-reply .input-group-preicon .input-group-prepend i,
.panel-ticket-reply .input-group-icons .input-group-prepend i {
    color: var(--brand-primary);
}

.panel-ticket-reply .input-group-icons .form-control,
.panel-ticket-reply .input-group-icons .input-group-append,
.panel-ticket-reply .input-group-icons .input-group-prepend {
    border-radius: 0;
}

.panel-ticket-reply .input-group-icons .input-group-append {
    border-left: 1px solid var(--cyb-line);
}

/* Empty state box inside the tabs */
.panel-ticket-reply .tab-no-data {
    border: 1px dashed var(--cyb-line);
    border-radius: 0;
    background: var(--brand-primary-lighter-4);
    color: var(--text-body-color);
}

.panel-ticket-reply .btn,
.panel-ticket-reply input.btn {
    border-radius: 0;
}

/* ---------- Buttons rendered as <input> (Send Message, Cancel...) ---------- */
/* Lagom gives them a fixed height plus vertical padding and a tall line-height;
   <input> ignores flex centering, so the label sits low. Let the browser center it. */
input.btn[type="submit"],
input.btn[type="reset"],
input.btn[type="button"],
input[type="submit"]:not(.btn),
input[type="button"]:not(.btn) {
    padding-top: 0;
    padding-bottom: 0;
    line-height: normal;
}

/* ---------- Dashboard (Client Area Home) ---------- */

/* All home panels full width, stacked. Masonry takes its column width from
   .column-sizer, so a 100% sizer gives a single column. */
.client-home-panels > .column-sizer,
.client-home-panels > [data-panels-grid-item] {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
}

/* Register a New Domain: Lagom's own box (padding, shadow, overflow hidden).
   Make it a normal panel (left title + divider like Recent Support Tickets)
   and put input | Register | Transfer on one row. */
.client-home-panels .panel-domain-register {
    overflow: visible;
    padding: 0 !important;
    border: 1px solid var(--cyb-line);
    border-radius: 0;
    box-shadow: none;
    background: var(--ui-block-bg);
}

.client-home-panels .panel-domain-register .panel-heading {
    justify-content: flex-start !important;
    padding: var(--panel-heading-padding) !important;
    border-bottom: 1px solid var(--cyb-line) !important;
    background: var(--panel-default-heading-bg) !important;
}

.client-home-panels .panel-domain-register .panel-heading .panel-title {
    justify-content: flex-start !important;
    width: 100%;
    margin: 0 !important;
    color: var(--text-heading-color) !important;
    font-size: var(--cyb-title-size) !important;
    line-height: 1.4 !important;
    text-align: left !important;
}

.client-home-panels .panel-domain-register .panel-body {
    max-width: none;
    padding: var(--panel-body-padding) !important;
}

.client-home-panels .panel-domain-register .panel-footer {
    margin: 0 !important;
}

.client-home-panels .panel-domain-register .panel-body .input-group.margin-10 {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch;
    gap: 8px;
    margin: 0 !important;
}

.client-home-panels .panel-domain-register input[name=domain] {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: var(--ui-height-lg) !important;
    border: 1px solid var(--cyb-line) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-align: left !important;
}

.client-home-panels .panel-domain-register input[name=domain]:focus {
    border-color: var(--brand-primary) !important;
}

.client-home-panels .panel-domain-register .panel-body .input-group.margin-10 .input-group-btn,
.client-home-panels .panel-domain-register .panel-body .input-group.margin-10 .input-group-append {
    display: flex !important;
    flex: 0 0 auto;
    flex-direction: row !important;
    gap: 8px;
    width: auto !important;
    margin: 0 !important;
}

.client-home-panels .panel-domain-register .panel-body .input-group.margin-10 .btn {
    flex: 0 0 auto !important;
    height: var(--ui-height-lg) !important;
    margin: 0 !important;
    padding: 0 24px !important;
    border-radius: 0 !important;
    line-height: normal !important;
}

@media (max-width: 575px) {
    .client-home-panels .panel-domain-register .panel-body .input-group.margin-10 {
        flex-wrap: wrap !important;
    }

    .client-home-panels .panel-domain-register input[name=domain],
    .client-home-panels .panel-domain-register .panel-body .input-group.margin-10 .input-group-btn,
    .client-home-panels .panel-domain-register .panel-body .input-group.margin-10 .input-group-append {
        flex: 1 1 100% !important;
    }

    .client-home-panels .panel-domain-register .panel-body .input-group.margin-10 .btn {
        flex: 1 1 0 !important;
    }
}

/* ---------- Domain pages (Overview, Auto Renew, Registrar Lock, EPP Code, ...) ---------- */

/* Each top-level section (header + body) becomes a framed box */
:is(.page-clientareadomaindetails, .page-clientareadomaingetepp, .page-clientareadomaincontactinfo, .page-clientareadomaindns, .page-clientareadomainemailforwarding, .page-clientareadomainregisterns, .page-clientareadomainaddons) .main-content .section:has(> .section-header):not(.section .section) {
    position: relative;
    padding: 0;
    border: 1px solid var(--cyb-line);
    background: var(--ui-block-bg);
}

:is(.page-clientareadomaindetails, .page-clientareadomaingetepp, .page-clientareadomaincontactinfo, .page-clientareadomaindns, .page-clientareadomainemailforwarding, .page-clientareadomainregisterns, .page-clientareadomainaddons) .main-content .section:has(> .section-header):not(.section .section)::before,
:is(.page-clientareadomaindetails, .page-clientareadomaingetepp, .page-clientareadomaincontactinfo, .page-clientareadomaindns, .page-clientareadomainemailforwarding, .page-clientareadomainregisterns, .page-clientareadomainaddons) .main-content .section:has(> .section-header):not(.section .section)::after {
    content: '';
    position: absolute;
    z-index: 2;
    width: var(--cyb-corner-size);
    height: var(--cyb-corner-size);
    pointer-events: none;
}

:is(.page-clientareadomaindetails, .page-clientareadomaingetepp, .page-clientareadomaincontactinfo, .page-clientareadomaindns, .page-clientareadomainemailforwarding, .page-clientareadomainregisterns, .page-clientareadomainaddons) .main-content .section:has(> .section-header):not(.section .section)::before {
    top: -1px;
    left: -1px;
    border-top: var(--cyb-corner-width) solid var(--cyb-corner);
    border-left: var(--cyb-corner-width) solid var(--cyb-corner);
}

:is(.page-clientareadomaindetails, .page-clientareadomaingetepp, .page-clientareadomaincontactinfo, .page-clientareadomaindns, .page-clientareadomainemailforwarding, .page-clientareadomainregisterns, .page-clientareadomainaddons) .main-content .section:has(> .section-header):not(.section .section)::after {
    right: -1px;
    bottom: -1px;
    border-right: var(--cyb-corner-width) solid var(--cyb-corner);
    border-bottom: var(--cyb-corner-width) solid var(--cyb-corner);
}

:is(.page-clientareadomaindetails, .page-clientareadomaingetepp, .page-clientareadomaincontactinfo, .page-clientareadomaindns, .page-clientareadomainemailforwarding, .page-clientareadomainregisterns, .page-clientareadomainaddons) .main-content .section:has(> .section-header):not(.section .section) > .section-header {
    margin: 0;
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--cyb-line);
}

:is(.page-clientareadomaindetails, .page-clientareadomaingetepp, .page-clientareadomaincontactinfo, .page-clientareadomaindns, .page-clientareadomainemailforwarding, .page-clientareadomainregisterns, .page-clientareadomainaddons) .main-content .section:has(> .section-header):not(.section .section) > .section-body {
    padding: 24px;
}

:is(.page-clientareadomaindetails, .page-clientareadomaingetepp, .page-clientareadomaincontactinfo, .page-clientareadomaindns, .page-clientareadomainemailforwarding, .page-clientareadomainregisterns, .page-clientareadomainaddons) .main-content .section > .section-header .section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-family: var(--cyb-mono);
    font-size: var(--cyb-title-size);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-heading-color);
}

:is(.page-clientareadomaindetails, .page-clientareadomaingetepp, .page-clientareadomaincontactinfo, .page-clientareadomaindns, .page-clientareadomainemailforwarding, .page-clientareadomainregisterns, .page-clientareadomainaddons) .main-content .section > .section-header .section-title::before {
    content: '';
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    background: var(--brand-primary);
}

:is(.page-clientareadomaindetails, .page-clientareadomaingetepp, .page-clientareadomaincontactinfo, .page-clientareadomaindns, .page-clientareadomainemailforwarding, .page-clientareadomainregisterns, .page-clientareadomainaddons) .main-content .section > .section-header .section-desc {
    margin: 8px 0 0;
    color: var(--text-lighter-color);
}

:is(.page-clientareadomaindetails, .page-clientareadomaingetepp, .page-clientareadomaincontactinfo, .page-clientareadomaindns, .page-clientareadomainemailforwarding, .page-clientareadomainregisterns, .page-clientareadomainaddons) .main-content .alert,
.card:has(> .card-body > .card-title) .alert {
    border-radius: 0;
}

/* Auto Renew / Registrar Lock toggle row */
:is(.page-clientareadomaindetails, .page-clientareadomaingetepp, .page-clientareadomaincontactinfo, .page-clientareadomaindns, .page-clientareadomainemailforwarding, .page-clientareadomainregisterns, .page-clientareadomainaddons) .panel.panel-switch {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 1px dashed var(--cyb-line) !important;
    border-radius: 0;
    background: var(--brand-primary-lighter-4);
    box-shadow: none !important;
}

:is(.page-clientareadomaindetails, .page-clientareadomaingetepp, .page-clientareadomaincontactinfo, .page-clientareadomaindns, .page-clientareadomainemailforwarding, .page-clientareadomainregisterns, .page-clientareadomainaddons) .panel.panel-switch .panel-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 20px;
}

:is(.page-clientareadomaindetails, .page-clientareadomaingetepp, .page-clientareadomaincontactinfo, .page-clientareadomaindns, .page-clientareadomainemailforwarding, .page-clientareadomainregisterns, .page-clientareadomainaddons) .panel.panel-switch .switch-label {
    font-family: var(--cyb-mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--text-heading-color);
}

/* Overview: domain card + details */
.product-details .product-icon:not(.panel-default) {
    position: relative;
    border-radius: 0;
    box-shadow: none;
}

.product-details .product-info {
    position: relative;
    border: 1px solid var(--cyb-line);
    border-radius: 0;
    box-shadow: none;
}

.product-details .product-icon:not(.panel-default)::before,
.product-details .product-icon:not(.panel-default)::after,
.product-details .product-info::before,
.product-details .product-info::after {
    content: '';
    position: absolute;
    z-index: 2;
    width: var(--cyb-corner-size);
    height: var(--cyb-corner-size);
    pointer-events: none;
}

.product-details .product-icon:not(.panel-default)::before,
.product-details .product-info::before {
    top: -1px;
    left: -1px;
    border-top: var(--cyb-corner-width) solid var(--cyb-corner);
    border-left: var(--cyb-corner-width) solid var(--cyb-corner);
}

.product-details .product-icon:not(.panel-default)::after,
.product-details .product-info::after {
    right: -1px;
    bottom: -1px;
    border-right: var(--cyb-corner-width) solid var(--cyb-corner);
    border-bottom: var(--cyb-corner-width) solid var(--cyb-corner);
}

/* On the colored domain card the brand-colored corners would vanish */
.product-details .product-icon:not(.panel-default)::before,
.product-details .product-icon:not(.panel-default)::after {
    border-color: var(--brand-primary-lighter-2);
}

.product-details .product-info .list-info-v .list-info-title {
    font-family: var(--cyb-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--text-lighter-color);
}

.product-details .product-info .list-info-v li:not(:last-of-type) {
    padding-bottom: var(--ui-block-spacing-sm);
    border-bottom: 1px dashed var(--cyb-line);
}

/* ---------- Addon pages with a Bootstrap card (Domain Forwarding, DNSSec) ---------- */

.card:has(> .card-body > .card-title) {
    position: relative;
    border: 1px solid var(--cyb-line);
    border-radius: 0;
    box-shadow: none;
}

.card:has(> .card-body > .card-title)::before,
.card:has(> .card-body > .card-title)::after {
    content: '';
    position: absolute;
    z-index: 2;
    width: var(--cyb-corner-size);
    height: var(--cyb-corner-size);
    pointer-events: none;
}

.card:has(> .card-body > .card-title)::before {
    top: -1px;
    left: -1px;
    border-top: var(--cyb-corner-width) solid var(--cyb-corner);
    border-left: var(--cyb-corner-width) solid var(--cyb-corner);
}

.card:has(> .card-body > .card-title)::after {
    right: -1px;
    bottom: -1px;
    border-right: var(--cyb-corner-width) solid var(--cyb-corner);
    border-bottom: var(--cyb-corner-width) solid var(--cyb-corner);
}

.card:has(> .card-body > .card-title) > .card-body {
    padding: 0 24px 24px;
}

.card > .card-body > .card-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 -24px 24px;
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--cyb-line);
    font-family: var(--cyb-mono);
    font-size: var(--cyb-title-size);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-heading-color);
}

.card > .card-body > .card-title::before {
    content: '';
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    background: var(--brand-primary);
}

.card:has(> .card-body > .card-title) h5 {
    margin: 24px 0 12px;
    font-family: var(--cyb-mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--text-heading-color);
}

.card:has(> .card-body > .card-title) hr {
    margin: 0 0 16px;
    border: 0;
    border-top: 1px solid var(--cyb-line);
}

.card:has(> .card-body > .card-title) .table > thead > tr > th {
    border-bottom: 1px solid var(--cyb-line);
    font-family: var(--cyb-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--text-lighter-color);
}

.card:has(> .card-body > .card-title) .table-striped > tbody > tr:nth-of-type(odd) {
    background: var(--brand-primary-lighter-4);
}

.card:has(> .card-body > .card-title) .table td {
    border-color: var(--cyb-line);
    vertical-align: middle;
}

.card:has(> .card-body > .card-title) .form-control,
.card:has(> .card-body > .card-title) .input-group-text,
.card:has(> .card-body > .card-title) .input-group-addon,
.card:has(> .card-body > .card-title) .btn {
    border-radius: 0 !important;
}

.card:has(> .card-body > .card-title) .input-group-text,
.card:has(> .card-body > .card-title) .input-group-addon {
    border: 1px solid var(--cyb-line);
    background: var(--brand-primary-lighter-4);
    font-family: var(--cyb-mono);
    font-size: 13px;
    color: var(--text-heading-color);
}

/* ---------- Available Credit (sidebar, includes/hooks/CreditBalance.php) ---------- */

.panel-sidebar.panel-available-credit .credit-balance-amount {
    display: block;
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-bold);
    line-height: 1.3;
    color: var(--text-heading-color);
    word-break: break-word;
}

.panel-sidebar.panel-available-credit .credit-limits {
    margin: 14px 0 0;
    padding: 12px 0 0;
    list-style: none;
    border-top: 1px dashed var(--cyb-line);
}

.panel-sidebar.panel-available-credit .credit-limits li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 3px 0;
    font-size: 13px;
    color: var(--text-lighter-color);
}

.panel-sidebar.panel-available-credit .credit-limits li span:last-child {
    color: var(--text-heading-color);
    text-align: right;
    white-space: nowrap;
}

.panel-sidebar.panel-available-credit .panel-footer .btn {
    display: flex;
    width: 100%;
    border-radius: 0;
}

/* ---------- Summary boxes + attached note (Add Funds "non-refundable") ---------- */

.panel-summary:not(.panel-summary-primary):not(.panel-summary-secondary) {
    border: 1px solid var(--cyb-line);
}

.panel-summary .summary-total + .summary-content,
.panel-summary .panel-footer::after {
    border-top-color: var(--cyb-line);
}

/* Summary followed by its note: one box, the note is the bottom strip */
.panel-summary:has(+ .alert-panel) {
    margin-bottom: 0;
}

.panel-summary:not(.panel-summary-primary):not(.panel-summary-secondary):has(+ .alert-panel)::after {
    content: none;
}

.panel-summary + .alert-panel {
    position: relative;
    margin-top: -1px !important;
    padding: 12px 20px !important;
    border: 1px solid var(--cyb-line);
    border-top-style: dashed;
    border-radius: 0 !important;
    background: var(--brand-primary-lighter-4);
    color: var(--text-body-color);
}

.panel-summary + .alert-panel .alert-icon,
.panel-summary + .alert-panel i {
    margin-left: 0;
    color: var(--brand-primary);
}

.panel-summary + .alert-panel .alert-icon::before {
    top: auto;
}

.panel-summary + .alert-panel::after {
    content: '';
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: var(--cyb-corner-size);
    height: var(--cyb-corner-size);
    border-right: var(--cyb-corner-width) solid var(--cyb-corner);
    border-bottom: var(--cyb-corner-width) solid var(--cyb-corner);
    pointer-events: none;
}

/* ---------- Email Verified Pro addon (modules/addons/EmailVerifiedPro) ---------- */
/* The addon prints its own <style> inside the page; ".lagom" (body class) keeps
   these rules more specific so they win without editing the addon. */

.lagom .evp-page {
    --evp-primary:      var(--brand-primary);
    --evp-primary-dark: var(--brand-primary-darker);
    --evp-heading:      var(--text-heading-color);
    --evp-muted:        var(--text-lighter-color);
    --evp-border:       var(--cyb-line);
    --evp-soft:         var(--brand-primary-lighter-4);
    padding: 0;
    margin-bottom: var(--ui-block-spacing-lg);
}

.lagom .evp-card {
    position: relative;
    overflow: visible;
    border: 1px solid var(--cyb-line);
    border-radius: 0;
    box-shadow: none;
    background: var(--ui-block-bg);
}

.lagom .evp-card::before,
.lagom .evp-card::after {
    content: '';
    position: absolute;
    z-index: 2;
    width: var(--cyb-corner-size);
    height: var(--cyb-corner-size);
    pointer-events: none;
}

.lagom .evp-card::before {
    top: -1px;
    left: -1px;
    border-top: var(--cyb-corner-width) solid var(--cyb-corner);
    border-left: var(--cyb-corner-width) solid var(--cyb-corner);
}

.lagom .evp-card::after {
    right: -1px;
    bottom: -1px;
    border-right: var(--cyb-corner-width) solid var(--cyb-corner);
    border-bottom: var(--cyb-corner-width) solid var(--cyb-corner);
}

.lagom .evp-card__body {
    padding: 0;
}

/* Header */
.lagom .evp-hero {
    align-items: center;
    gap: 18px;
    padding: 22px 24px 20px;
    border-bottom: 1px solid var(--cyb-line);
}

.lagom .evp-hero__icon {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    border: 1px solid var(--cyb-line);
    border-radius: 0;
    background: var(--brand-primary-lighter-4);
    box-shadow: none;
    color: var(--brand-primary);
    font-size: 24px;
}

.lagom .evp-status {
    gap: 8px;
    margin-bottom: 6px;
    padding: 0;
    border-radius: 0;
    background: none;
    color: var(--brand-primary);
    font-family: var(--cyb-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.lagom .evp-hero__title {
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-bold);
    line-height: 1.3;
}

.lagom .evp-hero__description {
    margin-top: 4px;
    font-size: 14px;
    line-height: 1.6;
}

/* Form */
.lagom .evp-form-panel {
    margin: 24px 24px 0;
    padding: 20px;
    border: 1px solid var(--cyb-line);
    border-radius: 0;
    background: var(--brand-primary-lighter-4);
}

.lagom .evp-label {
    margin-bottom: 10px;
    font-family: var(--cyb-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.lagom .evp-input-group {
    display: flex;
    flex-wrap: nowrap;
}

.lagom .evp-input-group .input-group-addon,
.lagom .evp-input-group .evp-input {
    height: 48px;
    border: 1px solid var(--cyb-line) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: var(--ui-block-bg) !important;
}

.lagom .evp-input-group .input-group-addon {
    display: flex;
    flex: 0 0 48px;
    align-items: center;
    justify-content: center;
    width: 48px;
    padding: 0;
    color: var(--brand-primary) !important;
}

.lagom .evp-input-group .evp-input-icon {
    border-right: 0 !important;
}

.lagom .evp-input-group .evp-validation-icon {
    border-left: 0 !important;
}

/* Validation state shown by the icon color only */
.lagom .evp-input-group .input-group-addon.success {
    color: var(--brand-success) !important;
}

.lagom .evp-input-group .input-group-addon.danger {
    color: var(--brand-danger) !important;
}

.lagom .evp-input-group .evp-input {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--text-heading-color);
    font-family: var(--cyb-mono);
    font-size: 14px;
}

.lagom .evp-actions {
    margin-top: 18px;
}

.lagom .evp-btn {
    min-height: 44px;
    padding-right: 22px;
    padding-left: 22px;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.lagom .evp-btn--secondary {
    border-color: var(--cyb-line);
    background: var(--ui-block-bg);
}

.lagom .evp-btn--secondary:hover {
    border-color: var(--brand-primary);
    color: var(--brand-primary);
}

/* Note */
.lagom .evp-note {
    gap: 14px;
    margin: 16px 24px 24px;
    padding: 14px 16px;
    border: 1px dashed var(--cyb-line);
    border-radius: 0;
    background: var(--ui-block-bg);
}

.lagom .evp-note__icon {
    border: 1px solid var(--cyb-line);
    border-radius: 0;
    background: var(--brand-primary-lighter-4);
    color: var(--brand-primary);
}

.lagom .evp-note__content strong {
    font-family: var(--cyb-mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Verification code modal */
.lagom .evp-modal__content {
    border: 1px solid var(--cyb-line);
    border-radius: 0;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .16);
}

.lagom .evp-modal__header {
    border-bottom-color: var(--cyb-line);
}

.lagom .evp-modal__eyebrow {
    font-family: var(--cyb-mono);
    font-weight: 700;
    letter-spacing: 1.5px;
}

.lagom .evp-modal__eyebrow--danger {
    color: var(--brand-danger);
}

.lagom .evp-modal .modal-dialog {
    width: auto;
    max-width: 520px;
    margin: 60px auto;
}

.lagom .evp-modal__header {
    align-items: flex-start;
    padding: 20px 24px 16px;
}

.lagom .evp-modal__title {
    font-size: var(--font-size-h5);
    font-weight: var(--font-weight-bold);
}

.lagom .evp-modal__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: -4px -8px 0 16px;
    padding: 0;
    border: 1px solid transparent;
    float: none;
    font-size: 22px;
    line-height: 1;
}

.lagom .evp-modal__close:hover {
    border-color: var(--cyb-line);
    color: var(--brand-primary);
    opacity: 1;
}

.lagom .evp-modal__body {
    padding: 20px 24px 24px;
}

.lagom .evp-modal__description {
    margin-bottom: 20px;
    font-size: 13px;
}

.lagom .evp-response .alert {
    font-size: 13px;
}

/* One box per digit, CSS only (same technique as the Support PIN grid).
   The field stays a single <input>, so the addon script, paste and OTP autofill
   keep working. Digits come from maxlength="6".

   Layout (container query units, cqw = 1% of .evp-code-wrap width):
     cell    = (wrap + gap) / 6        period of one box + gap
     box     = cell - gap              square boxes, first flush left, last flush right
     spacing = cell - 1ch              letter-spacing so each digit advances one cell
     indent  = (spacing - gap) / 2     centres each digit inside its box
   The input is wider than the wrap by the trailing letter-spacing, so typing the
   last digit never scrolls the field; the wrap clips that empty strip. */
.lagom .evp-code-wrap {
    display: flex;
    justify-content: center;
    max-width: none;
    overflow: hidden;
}

.lagom .evp-code-input {
    --code-len:   6;
    --code-cell:  2.3em;
    --code-gap:   10px;
    --code-space: calc(var(--code-cell) - 1ch);
    --code-line:  var(--cyb-line);
    --code-fill:  var(--ui-block-bg);
    flex: 0 0 auto;
    box-sizing: border-box;
    width: calc(var(--code-len) * var(--code-cell) + var(--code-space) / 2 + 4px);
    max-width: none;
    height: 2.4em;
    padding: 0 0 0 calc((var(--code-space) - var(--code-gap)) / 2);
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: 0;
    color: var(--brand-primary);
    caret-color: var(--brand-primary);
    font-family: var(--cyb-mono);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: var(--code-space);
    text-align: left;
    background:
        repeating-linear-gradient(to right,
            transparent 0 1px,
            var(--code-fill) 1px calc(var(--code-cell) - var(--code-gap) - 1px),
            transparent calc(var(--code-cell) - var(--code-gap) - 1px) var(--code-cell))
            0 1px / calc(var(--code-len) * var(--code-cell)) calc(100% - 2px) no-repeat,
        repeating-linear-gradient(to right,
            var(--code-line) 0 calc(var(--code-cell) - var(--code-gap)),
            transparent calc(var(--code-cell) - var(--code-gap)) var(--code-cell))
            0 0 / calc(var(--code-len) * var(--code-cell)) 100% no-repeat !important;
    transition: none;
}

@supports (container-type: inline-size) {
    .lagom .evp-code-wrap {
        display: flex;
        justify-content: flex-start;
        container-type: inline-size;
        text-align: left;
        /* clip, not hidden: a hidden overflow box is still scrollable, and the
           browser would scroll it to follow the caret after the last digit */
        overflow: clip;
    }

    .lagom .evp-code-input {
        --code-gap:  clamp(6px, 2.2cqw, 12px);
        --code-cell: calc((100cqw + var(--code-gap)) / var(--code-len));
        width: calc(100cqw + (var(--code-space) + var(--code-gap)) / 2 + 4px);
        height: calc(var(--code-cell) - var(--code-gap));
        margin: 0 !important;
        font-size: clamp(18px, 6.2cqw, 32px);
    }
}

.lagom .evp-code-input:focus {
    --code-line: var(--brand-primary);
    --code-fill: var(--brand-primary-lighter-4);
}

.lagom .evp-code-input::placeholder {
    color: var(--brand-primary-lighter-2);
    letter-spacing: var(--code-space);
    opacity: 1;
}

/* Corner accents on the modal (the addon clips them with overflow:hidden) */
.lagom .evp-modal__content {
    position: relative;
    overflow: visible;
}

.lagom .evp-modal__content::before,
.lagom .evp-modal__content::after {
    content: '';
    position: absolute;
    z-index: 2;
    width: var(--cyb-corner-size);
    height: var(--cyb-corner-size);
    pointer-events: none;
}

.lagom .evp-modal__content::before {
    top: -1px;
    left: -1px;
    border-top: var(--cyb-corner-width) solid var(--cyb-corner);
    border-left: var(--cyb-corner-width) solid var(--cyb-corner);
}

.lagom .evp-modal__content::after {
    right: -1px;
    bottom: -1px;
    border-right: var(--cyb-corner-width) solid var(--cyb-corner);
    border-bottom: var(--cyb-corner-width) solid var(--cyb-corner);
}

/* "Code sent" note in theme colors */
.lagom .evp-response .alert-info {
    border: 1px solid var(--cyb-line);
    background: var(--brand-primary-lighter-4);
    color: var(--text-body-color);
}

.lagom .evp-response .alert-info strong {
    color: var(--brand-primary);
}

.lagom .evp-modal-actions {
    margin-top: 24px;
}

.lagom .evp-modal-actions .evp-btn {
    flex: 1 1 0;
    min-width: 0;
}

.lagom .evp-modal-actions #loccat,
.lagom .evp-modal-actions #loccat:disabled {
    border-color: var(--brand-primary) !important;
    background: var(--brand-primary) !important;
    color: #fff !important;
}

.lagom .evp-modal-actions #loccat:disabled {
    opacity: .45;
}

/* Resend is a secondary action: outline instead of a red block */
.lagom .evp-modal-actions #btnSendAgain {
    border: 1px solid var(--cyb-line);
    background: var(--ui-block-bg);
    color: var(--text-heading-color);
}

.lagom .evp-modal-actions #btnSendAgain:hover,
.lagom .evp-modal-actions #btnSendAgain:focus-visible {
    border-color: var(--brand-primary);
    background: var(--brand-primary-lighter-4);
    color: var(--brand-primary);
}

.lagom .evp-modal-actions #btnSendAgain:disabled {
    opacity: .6;
}

@media (max-width: 575px) {
    .lagom .evp-modal .modal-dialog {
        margin: 16px 12px;
    }

    .lagom .evp-modal__header {
        padding: 16px 16px 12px;
    }

    .lagom .evp-modal__body {
        padding: 16px;
    }


    .lagom .evp-modal-actions .evp-btn {
        flex: 0 0 auto;
        width: 100%;
    }
}


.lagom .evp-page .alert,
.lagom .evp-modal .alert {
    border-radius: 0;
}

@media (max-width: 767px) {
    .lagom .evp-hero {
        flex-direction: row;
        align-items: flex-start;
        gap: 14px;
        padding: 18px 16px 16px;
    }

    .lagom .evp-hero__icon {
        flex-basis: 44px;
        width: 44px;
        height: 44px;
        font-size: 19px;
    }

    .lagom .evp-hero__title {
        font-size: 19px;
    }

    .lagom .evp-form-panel {
        margin: 16px 16px 0;
        padding: 16px;
    }

    .lagom .evp-note {
        margin: 12px 16px 16px;
    }

    .lagom .evp-input-group .input-group-addon {
        flex-basis: 42px;
        width: 42px;
    }

    .lagom .evp-input-group .evp-input {
        font-size: 13px;
    }
}

@media (max-width: 380px) {
    .lagom .evp-hero {
        flex-direction: column;
    }

    .lagom .evp-input-group .evp-validation-icon {
        display: none;
    }

    .lagom .evp-input-group .evp-input {
        border-right: 1px solid var(--cyb-line) !important;
    }
}

/* ---------- Button spinner outside the auth pages (see includes/hooks/cybernet-evp-spinner.php) ---------- */

.lagom .evp-modal-actions #loccat.cybBtnLoading,
.lagom .evp-modal-actions #btnSendAgain.cybBtnLoading,
.cybBtnLoading {
    position: relative;
    pointer-events: none;
    cursor: progress;
    color: transparent !important;
}

.cybBtnLoading > * {
    visibility: hidden;
}

.cybBtnLoading::before {
    visibility: hidden;
}

.cybBtnLoading::after {
    content: '';
    visibility: visible;
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: cybBtnSpin .7s linear infinite;
}

.cybBtnLoading.btn-primary::after,
.cybBtnLoading.btn-danger::after,
.cybBtnLoading.btn-success::after {
    border-color: #fff;
    border-right-color: transparent;
}

.cybBtnLoading:not(.btn-primary):not(.btn-danger):not(.btn-success)::after,
#btnSendAgain.cybBtnLoading::after {
    border-color: var(--brand-primary);
    border-right-color: transparent;
}

@keyframes cybBtnSpin {
    to { transform: rotate(360deg); }
}

/* ---------- Knowledgebase "CyberNet" layout (core/pages/knowledgebase + knowledgebasecat, profile "cybernet") ---------- */

.cybKb-main .section + .section {
    margin-top: var(--ui-block-spacing-lg);
}

/* Category cards */
.cybKb-cats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.cybKb-cat {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px;
    border: 1px solid var(--cyb-line);
    background: var(--ui-block-bg);
    color: var(--text-body-color);
    text-decoration: none !important;
    transition: border-color var(--transition-base);
}

.cybKb-cat:hover,
.cybKb-cat:focus-visible {
    border-color: var(--brand-primary);
    outline: 0;
}

.cybKb-cat::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    width: var(--cyb-corner-size);
    height: var(--cyb-corner-size);
    border-top: var(--cyb-corner-width) solid var(--cyb-corner);
    border-left: var(--cyb-corner-width) solid var(--cyb-corner);
    pointer-events: none;
}

.cybKb-cat-icon {
    display: flex;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--cyb-line);
    background: var(--brand-primary-lighter-4);
    color: var(--brand-primary);
    font-size: 18px;
}

.cybKb-cat-body {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
}

.cybKb-cat-name {
    color: var(--text-heading-color);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    line-height: 1.35;
}

.cybKb-cat:hover .cybKb-cat-name {
    color: var(--brand-primary);
}

.cybKb-cat-desc {
    color: var(--text-lighter-color);
    font-size: 12px;
    line-height: 1.5;
}

.cybKb-cat-count {
    margin-top: 2px;
    color: var(--text-lighter-color);
    font-family: var(--cyb-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
}

/* Sidebar */
.cybKb-side .cybKbBox {
    margin-bottom: var(--ui-block-spacing-lg);
}

.cybKb-side .cybKbBox .panel-heading {
    border-bottom: 1px solid var(--cyb-line);
}

.cybKb-side .cybKbBox .list-group {
    max-height: 420px;
    margin: 0;
    overflow-y: auto;
}

.cybKb-side .cybKbBox .list-group > .list-group-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 20px;
    border: 0;
    border-top: 1px solid var(--cyb-line);
    border-radius: 0;
    color: var(--text-body-color);
    font-size: 13px;
    line-height: 1.45;
}

.cybKb-side .cybKbBox .list-group > .list-group-item:first-child {
    border-top: 0;
}

.cybKb-side .cybKbBox .list-group > .list-group-item:hover,
.cybKb-side .cybKbBox .list-group > .list-group-item.active {
    background: var(--brand-primary-lighter-4);
    color: var(--brand-primary);
}

.cybKb-side .cybKbBox .list-group > .list-group-item .badge {
    flex: 0 0 auto;
    border-radius: 0;
    background: var(--brand-primary-lighter-4);
    color: var(--brand-primary);
    font-family: var(--cyb-mono);
    font-size: 10px;
    font-weight: 700;
}

.cybKb-side .cybKbBox-articleMeta {
    flex: 0 0 auto;
    color: var(--text-lighter-color);
    font-family: var(--cyb-mono);
    font-size: 10px;
    white-space: nowrap;
}

.cybKb-side .cybKbBox-search .search-field {
    position: relative;
    margin-bottom: 10px;
}

.cybKb-side .cybKbBox-search .form-control {
    border-radius: 0;
}

.cybKb-side .cybKbBox-searchBtn {
    border-radius: 0;
}

.cybKb-side .cybKbBox-helpEyebrow {
    display: block;
    margin-bottom: 8px;
    color: var(--brand-primary);
    font-family: var(--cyb-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.cybKb-side .cybKbBox-helpText {
    margin-bottom: 14px;
    color: var(--text-lighter-color);
    font-size: 13px;
    line-height: 1.6;
}

.cybKb-side .cybKbBox-help .btn {
    border-radius: 0;
}

@media (max-width: 991px) {
    .cybKb-cats {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 767px) {
    .cybKb-side {
        margin-top: var(--ui-block-spacing-lg);
    }
}

/* ---------- Knowledgebase article cards ---------- */

.cybKb-posts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
}

.cybKb-post {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--cyb-line);
    background: var(--ui-block-bg);
    transition: border-color var(--transition-base);
}

.cybKb-post:hover {
    border-color: var(--brand-primary);
}

.cybKb-post::before,
.cybKb-post::after {
    content: '';
    position: absolute;
    z-index: 2;
    width: var(--cyb-corner-size);
    height: var(--cyb-corner-size);
    pointer-events: none;
}

.cybKb-post::before {
    top: -1px;
    left: -1px;
    border-top: var(--cyb-corner-width) solid var(--cyb-corner);
    border-left: var(--cyb-corner-width) solid var(--cyb-corner);
}

.cybKb-post::after {
    right: -1px;
    bottom: -1px;
    border-right: var(--cyb-corner-width) solid var(--cyb-corner);
    border-bottom: var(--cyb-corner-width) solid var(--cyb-corner);
}

.cybKb-post-media {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
    border-bottom: 1px solid var(--cyb-line);
    background: var(--brand-primary-lighter-4);
    color: var(--brand-primary-lighter-2);
    font-size: 40px;
    text-decoration: none !important;
}

.cybKb-post:hover .cybKb-post-media {
    color: var(--brand-primary);
}

.cybKb-post-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 18px 20px 16px;
}

.cybKb-post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-bottom: 12px;
    color: var(--text-lighter-color);
    font-family: var(--cyb-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .6px;
}

.cybKb-post-meta i {
    margin-right: 5px;
    color: var(--brand-primary);
}

.cybKb-post-title {
    margin: 0 0 10px;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    line-height: 1.35;
}

.cybKb-post-title a {
    color: var(--text-heading-color);
    text-decoration: none !important;
}

.cybKb-post:hover .cybKb-post-title a {
    color: var(--brand-primary);
}

.cybKb-post-excerpt {
    margin: 0 0 16px;
    color: var(--text-lighter-color);
    font-size: 13px;
    line-height: 1.6;
}

.cybKb-post-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px dashed var(--cyb-line);
}

.cybKb-post-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    color: var(--brand-primary) !important;
    font-family: var(--cyb-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    text-decoration: none !important;
}

.cybKb-post-more i {
    transition: transform var(--transition-base);
}

.cybKb-post:hover .cybKb-post-more i {
    transform: translateX(3px);
}

@media (max-width: 575px) {
    .cybKb-posts {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- Knowledgebase article (profile "cybernet") ---------- */

.cybKb-article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--cyb-line);
    color: var(--text-lighter-color);
    font-family: var(--cyb-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .6px;
}

.cybKb-article-meta i {
    margin-right: 6px;
    color: var(--brand-primary);
}

.cybKb-article .article-content {
    font-size: 14px;
    line-height: 1.75;
}

.cybKb-article .article-content img {
    max-width: 100%;
    height: auto;
}

.cybKb-article .article-content h1,
.cybKb-article .article-content h2,
.cybKb-article .article-content h3,
.cybKb-article .article-content h4 {
    margin: 26px 0 10px;
    color: var(--text-heading-color);
}

.cybKb-article .article-content pre,
.cybKb-article .article-content code {
    border-radius: 0;
    font-family: var(--cyb-mono);
}

.cybKb-article .article-content pre {
    padding: 14px 16px;
    border: 1px solid var(--cyb-line);
    background: var(--brand-primary-lighter-4);
    overflow-x: auto;
}

/* Share bar */
.cybKbShare {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 22px;
    margin-bottom: var(--ui-block-spacing-lg);
    padding: 18px 24px;
    border: 1px solid var(--cyb-line);
    background: var(--brand-primary-lighter-4);
}

.cybKbShare::before,
.cybKbShare::after {
    content: '';
    position: absolute;
    width: var(--cyb-corner-size);
    height: var(--cyb-corner-size);
    pointer-events: none;
}

.cybKbShare::before {
    top: -1px;
    left: -1px;
    border-top: var(--cyb-corner-width) solid var(--cyb-corner);
    border-left: var(--cyb-corner-width) solid var(--cyb-corner);
}

.cybKbShare::after {
    right: -1px;
    bottom: -1px;
    border-right: var(--cyb-corner-width) solid var(--cyb-corner);
    border-bottom: var(--cyb-corner-width) solid var(--cyb-corner);
}

.cybKbShare-label {
    color: var(--text-heading-color);
    font-family: var(--cyb-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.cybKbShare-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.cybKbShare-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--cyb-line);
    background: var(--ui-block-bg);
    color: var(--text-heading-color) !important;
    cursor: pointer;
    transition: all var(--transition-base);
}

.cybKbShare-link:hover,
.cybKbShare-link:focus-visible {
    border-color: var(--brand-primary);
    background: var(--brand-primary);
    color: #fff !important;
    outline: 0;
}

.cybKbShare-copied {
    position: absolute;
    top: -30px;
    left: 50%;
    padding: 3px 8px;
    transform: translateX(-50%);
    background: var(--text-heading-color);
    color: #fff;
    font-family: var(--cyb-mono);
    font-size: 10px;
    letter-spacing: .8px;
    white-space: nowrap;
}

.cybKbShare-copy.is-copied {
    border-color: var(--brand-success);
    background: var(--brand-success);
    color: #fff !important;
}

.cybKbShare-copy.is-copied .cybKbShare-copied {
    display: block !important;
}

/* Rating box */
.cybKb-rate .panel-body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.cybKb-rate form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}

.cybKb-rate .text {
    color: var(--text-heading-color);
    font-size: 14px;
}

.cybKb-rate .text span {
    display: block;
    margin-top: 4px;
    color: var(--text-lighter-color);
    font-family: var(--cyb-mono);
    font-size: 11px;
}

.cybKb-rate .btn {
    border-radius: 0;
}

@media (max-width: 575px) {
    .cybKbShare {
        padding: 16px;
    }

    .cybKbShare-link {
        width: 40px;
        height: 40px;
    }
}

/* ---------- Titles ---------- */

.panel-heading .panel-title,
.client-home-panels .panel .panel-heading .panel-title {
    font-size: var(--cyb-title-size);
    line-height: 1.4;
    font-family: var(--cyb-mono);
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

/* ---------- Search box (Knowledgebase, Downloads, Domain Search) ---------- */

.search-box,
.search-box.search-box-primary,
.search-box.search-box-secondary {
    border: 1px solid var(--cyb-line);
    border-radius: 0;
    box-shadow: none;
    background: var(--ui-block-bg);
}

.search-box .form-control,
.search-box .input-group,
.search-box.search-box-primary .form-control,
.search-box.search-box-secondary .form-control {
    border: 1px solid var(--cyb-line);
    border-radius: 0;
    background: var(--ui-block-bg);
    color: var(--text-heading-color);
    box-shadow: none;
}

.search-box .form-control:focus,
.search-box.search-box-primary .form-control:focus,
.search-box.search-box-secondary .form-control:focus {
    border-color: var(--brand-primary);
}

.search-box .form-control::placeholder,
.search-box.search-box-primary .form-control::placeholder,
.search-box.search-box-secondary .form-control::placeholder {
    color: var(--text-lighter-color);
}

.search-box .search-field-icon,
.search-box .search-field-icon > i,
.search-box.search-box-primary .search-field-icon > i,
.search-box.search-box-secondary .search-field-icon > i,
.search-box.search-box-primary .search-group .search-field .form-control:focus ~ .search-field-icon > i {
    color: var(--brand-primary);
}

.search-box .search-group .btn,
.search-box .domain-search-input.search-group-combined {
    border-radius: 0;
}

.search-box .btn-primary-faded,
.search-box .btn-primary-faded:focus,
.search-box .btn-primary {
    border-color: var(--brand-primary);
    background: var(--brand-primary);
    color: #fff;
    box-shadow: none;
}

.search-box .btn-primary-faded:hover,
.search-box .btn-primary:hover {
    border-color: var(--brand-primary-darker);
    background: var(--brand-primary-darker);
    color: #fff;
}

.search-box.search-box-primary .domain-search-input.search-group-combined,
.search-box.search-box-secondary .domain-search-input.search-group-combined {
    border: 1px solid var(--cyb-line);
    background: var(--ui-block-bg);
}