/**
 * TiyanHost — Theme
 *
 * Original CSS written for this project. Loads AFTER WHMCS's stock all.min.css
 * (Bootstrap 3), so equal-specificity rules here win.
 *
 * RULE: no literal colours in this file. Every colour comes from tokens.css.
 * Verify with:
 *   grep -nE "#[0-9a-fA-F]{3,8}\b" css/theme.css   -> must return nothing
 */

/* ===================================================================
   1. Base
   =================================================================== */

html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    background-color: var(--gray-faded);
    color: var(--text-body-color);
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    font-weight: var(--font-weight-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ===================================================================
   2. Typography
   =================================================================== */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--text-heading-color);
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-medium);
    margin-top: 0;
    margin-bottom: var(--spacing-2x);
}

h1, .h1 { font-size: var(--font-size-h1); }
h2, .h2 { font-size: var(--font-size-h2); }
h3, .h3 { font-size: var(--font-size-h3); line-height: var(--line-height-h3); }
h4, .h4 { font-size: var(--font-size-h4); line-height: var(--line-height-h4); }
h5, .h5 { font-size: var(--font-size-h5); line-height: var(--line-height-h5); }
h6, .h6 { font-size: var(--font-size-h6); line-height: var(--line-height-h6); }

p {
    margin: 0 0 var(--spacing-2x);
}

small, .small   { font-size: var(--font-size-sm); line-height: var(--line-height-sm); }
.text-xs        { font-size: var(--font-size-xs);  line-height: var(--line-height-xs); }
.text-md        { font-size: var(--font-size-md);  line-height: var(--line-height-md); }
.text-lg        { font-size: var(--font-size-lg);  line-height: var(--line-height-lg); }
.text-xlg       { font-size: var(--font-size-xlg); line-height: var(--line-height-xlg); }
.text-xxlg      { font-size: var(--font-size-xxlg);line-height: var(--line-height-xxlg); }

code, kbd, pre, samp {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-sm);
}

.text-muted   { color: var(--text-lighter-color); }
.text-faded   { color: var(--text-faded-color); }
.text-primary { color: var(--text-primary-color); }
.text-success { color: var(--brand-success); }
.text-warning { color: var(--brand-warning); }
.text-danger  { color: var(--brand-danger); }
.text-info    { color: var(--brand-info); }

hr {
    border: 0;
    border-top: var(--border-width-base) solid var(--border-color-base);
    margin: var(--spacing-3x) 0;
}

/* ===================================================================
   3. Links
   =================================================================== */

a {
    color: var(--brand-primary);
    text-decoration: none;
    transition: color var(--transition-base);
}

a:hover,
a:focus {
    color: var(--brand-primary-darker);
    text-decoration: underline;
}

a:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}

/* ===================================================================
   4. Container — 1288px, noticeably wider than Bootstrap's 1170px.
      Bootstrap 3 sets `width` per breakpoint, so both are overridden.
   =================================================================== */

.container,
.container-fluid {
    padding-left: var(--container-gutter);
    padding-right: var(--container-gutter);
}

/* The token widths (540/720/960/1288) are Bootstrap-4 style, so they are bound
   to BS4 breakpoints rather than six's BS3 ones. Binding them to BS3's
   768/992/1200 would render 960px between 1200-1360px - narrower than the
   1170px we are replacing - and delay the signature 1288px until 1360px. */
@media (min-width: 576px)  { .container { width: var(--container-sm-max-width); max-width: 100%; } }
@media (min-width: 768px)  { .container { width: var(--container-md-max-width); max-width: 100%; } }
@media (min-width: 992px)  { .container { width: var(--container-lg-max-width); max-width: 100%; } }
@media (min-width: 1200px) { .container { width: var(--container-xl-max-width); max-width: 100%; } }

/* ===================================================================
   5. Buttons — 3px radius against the 6px panel radius. Deliberate.
   =================================================================== */

.btn {
    border-width: var(--btn-border-width);
    border-style: solid;
    border-color: transparent;
    border-radius: var(--btn-border-radius);
    box-shadow: var(--btn-box-shadow);
    font-size: var(--btn-base-font-size);
    font-weight: var(--btn-base-font-weight);
    line-height: var(--line-height-base);
    padding: var(--spacing-1x) var(--spacing-2x);
    transition: background-color var(--transition-base),
                border-color var(--transition-base),
                color var(--transition-base);
}

.btn:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}

.btn + .btn { margin-left: var(--spacing-1x); }

.btn i,
.btn .fa,
.btn .fas,
.btn .far { margin-right: var(--btn-icon-spacing); }

.btn-sm, .btn-xs { border-radius: var(--btn-border-radius); }
.btn-sm { font-size: var(--btn-sm-font-size); font-weight: var(--btn-sm-font-weight); padding: var(--spacing-half) var(--spacing-2x); }
.btn-xs { font-size: var(--btn-xs-font-size); font-weight: var(--btn-xs-font-weight); padding: var(--spacing-half) var(--spacing-1x); }
.btn-lg { font-size: var(--font-size-md); padding: var(--spacing-2x) var(--spacing-4x); border-radius: var(--btn-border-radius); }

.btn-primary {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
    color: var(--color-white);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--brand-primary-darker);
    border-color: var(--brand-primary-darker);
    color: var(--color-white);
}

.btn-secondary {
    background-color: var(--brand-secondary);
    border-color: var(--brand-secondary);
    color: var(--color-white);
}
.btn-secondary:hover,
.btn-secondary:focus {
    background-color: var(--brand-secondary-darker);
    border-color: var(--brand-secondary-darker);
    color: var(--color-white);
}

.btn-default {
    background-color: var(--color-white);
    border-color: var(--border-color-base);
    color: var(--text-body-color);
}
.btn-default:hover,
.btn-default:focus {
    background-color: var(--gray-faded);
    border-color: var(--gray-lighter-2);
    color: var(--text-heading-color);
}

.btn-success { background-color: var(--brand-success); border-color: var(--brand-success); color: var(--color-white); }
.btn-success:hover, .btn-success:focus { background-color: var(--brand-success-darker); border-color: var(--brand-success-darker); color: var(--color-white); }

.btn-warning { background-color: var(--brand-warning); border-color: var(--brand-warning); color: var(--color-white); }
.btn-warning:hover, .btn-warning:focus { background-color: var(--brand-warning-darker); border-color: var(--brand-warning-darker); color: var(--color-white); }

.btn-danger  { background-color: var(--brand-danger); border-color: var(--brand-danger); color: var(--color-white); }
.btn-danger:hover, .btn-danger:focus { background-color: var(--brand-danger-darker); border-color: var(--brand-danger-darker); color: var(--color-white); }

.btn-info    { background-color: var(--brand-info); border-color: var(--brand-info); color: var(--color-white); }
.btn-info:hover, .btn-info:focus { background-color: var(--brand-info-darker); border-color: var(--brand-info-darker); color: var(--color-white); }

.btn-link { color: var(--brand-primary); }
.btn-link:hover { color: var(--brand-primary-darker); }

/* ===================================================================
   6. Panels / cards — 6px radius, soft wide shadow
   =================================================================== */

.panel {
    background-color: var(--color-white);
    border: var(--border-width-base) solid var(--border-color-base);
    border-radius: var(--border-radius-base);
    box-shadow: var(--box-shadow-base);
    margin-bottom: var(--spacing-3x);
}

.panel-heading {
    background-color: transparent;
    border-bottom: var(--border-width-base) solid var(--border-color-base);
    border-top-left-radius: var(--border-radius-base);
    border-top-right-radius: var(--border-radius-base);
    color: var(--text-heading-color);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    padding: var(--spacing-2x) var(--spacing-3x);
}

.panel-body   { padding: var(--spacing-3x); }
.panel-footer {
    background-color: var(--gray-faded);
    border-top: var(--border-width-base) solid var(--border-color-base);
    border-bottom-left-radius: var(--border-radius-base);
    border-bottom-right-radius: var(--border-radius-base);
    padding: var(--spacing-2x) var(--spacing-3x);
}

.well {
    background-color: var(--gray-faded);
    border: var(--border-width-base) solid var(--border-color-base);
    border-radius: var(--border-radius-base);
    box-shadow: none;
    padding: var(--spacing-3x);
}

/* ===================================================================
   7. Forms
   =================================================================== */

.form-control {
    background-color: var(--color-white);
    border: var(--border-width-base) solid var(--border-color-base);
    border-radius: var(--border-radius-sm);
    box-shadow: none;
    color: var(--text-heading-color);
    font-size: var(--font-size-base);
    height: auto;
    padding: var(--spacing-1x) var(--spacing-2x);
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.form-control:focus {
    border-color: var(--brand-primary);
    box-shadow: none;
    outline: none;
}

.form-control::placeholder { color: var(--text-faded-color); }

label,
.control-label {
    color: var(--text-heading-color);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--spacing-half);
}

.help-block { color: var(--text-lighter-color); font-size: var(--font-size-sm); }

/* ===================================================================
   8. Tables
   =================================================================== */

.table {
    background-color: var(--color-white);
    color: var(--text-body-color);
}

.table > thead > tr > th {
    border-bottom: var(--border-width-base) solid var(--border-color-base);
    color: var(--text-heading-color);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    padding: var(--spacing-2x);
}

.table > tbody > tr > td {
    border-top: var(--border-width-base) solid var(--border-color-base);
    padding: var(--spacing-2x);
    vertical-align: middle;
}

.table-striped > tbody > tr:nth-of-type(odd) { background-color: var(--gray-faded); }
.table-hover  > tbody > tr:hover             { background-color: var(--brand-primary-lighter-4); }

/* ===================================================================
   9. Alerts & labels
   =================================================================== */

.alert {
    border: var(--border-width-base) solid transparent;
    border-radius: var(--border-radius-base);
    padding: var(--spacing-2x) var(--spacing-3x);
}

.alert-success { background-color: var(--brand-success-lighter-4); border-color: var(--brand-success-lighter-2); color: var(--brand-success-darker); }
.alert-warning { background-color: var(--brand-warning-lighter-4); border-color: var(--brand-warning-lighter-2); color: var(--brand-warning-darker); }
.alert-danger  { background-color: var(--brand-danger-lighter-4);  border-color: var(--brand-danger-lighter-2);  color: var(--brand-danger-darker); }
.alert-info    { background-color: var(--brand-primary-lighter-4); border-color: var(--brand-primary-lighter-2); color: var(--brand-info-darker); }

.label, .badge {
    border-radius: var(--border-radius-xs);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    padding: var(--spacing-half) var(--spacing-1x);
}

.label-primary, .badge-primary { background-color: var(--brand-primary); color: var(--color-white); }
.label-success, .badge-success { background-color: var(--brand-success); color: var(--color-white); }
.label-warning, .badge-warning { background-color: var(--brand-warning); color: var(--color-white); }
.label-danger,  .badge-danger  { background-color: var(--brand-danger);  color: var(--color-white); }
.label-info,    .badge-info    { background-color: var(--brand-info);    color: var(--color-white); }
.label-default, .badge-default { background-color: var(--gray-lighter-2); color: var(--color-white); }

/* ===================================================================
   10. Signature gradients — TiyanHost's visual identity.
       Blue to purple, NOT blue to cyan.
   =================================================================== */

.site .site-section.section-primary,
.section-primary {
    background: var(--gradient-hero);
    color: var(--text-secondary-body-color);
}

.panel.panel-sidebar.panel-sidebar-primary.panel-client-details {
    background: var(--gradient-sidebar-panel);
    border: 0;
    color: var(--text-secondary-body-color);
}

.section-primary h1, .section-primary h2, .section-primary h3,
.section-primary h4, .section-primary h5, .section-primary h6,
.panel-client-details h1, .panel-client-details h2, .panel-client-details h3,
.panel-client-details h4, .panel-client-details h5, .panel-client-details h6 {
    color: var(--text-secondary-heading-color);
}

.section-primary a,
.panel-client-details a { color: var(--text-secondary-heading-color); }

.section-primary .text-muted,
.panel-client-details .text-muted { color: var(--text-secondary-faded-color); }

/* ===================================================================
   11. Live-site behaviours carried over
   =================================================================== */

/* Sidebar is hidden on desktop, visible on mobile/tablet */
.main-sidebar.hidden-xs.hidden-sm.hidden-md { display: none; }

p.section-subtitle { text-align: justify; }

.plan-note {
    color: var(--brand-plan-note);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

/* ===================================================================
   12. Utilities
   =================================================================== */

.bg-gradient-hero    { background: var(--gradient-hero); }
.bg-gradient-sidebar { background: var(--gradient-sidebar-panel); }
.bg-faded            { background-color: var(--gray-faded); }
.bg-white            { background-color: var(--color-white); }

.shadow-sm   { box-shadow: var(--box-shadow-sm); }
.shadow-base { box-shadow: var(--box-shadow-base); }
.shadow-lg   { box-shadow: var(--box-shadow-lg); }

.rounded-xs   { border-radius: var(--border-radius-xs); }
.rounded-base { border-radius: var(--border-radius-base); }
.rounded-lg   { border-radius: var(--border-radius-lg); }

/* ===================================================================
   13. Header
   =================================================================== */

.th-header {
    background-color: var(--color-white);
    border-bottom: var(--border-width-base) solid var(--border-color-base);
    padding: var(--spacing-3x) 0;
}

.th-header .container { position: relative; }

/* The logo is a 770x162 PNG (4.75:1). Above 81px tall it falls under 2x
   density and goes soft on retina, so both axes are capped here. */
.th-logo { display: inline-block; }

.th-logo img {
    display: block;
    max-height: 56px;
    max-width: 385px;
    width: auto;
    height: auto;
}

.th-logo.logo-text {
    color: var(--text-heading-color);
    font-size: var(--font-size-xlg);
    font-weight: var(--font-weight-bold);
    text-decoration: none;
}

/* Top utility nav (currency, language, notifications, login/cart) */
.top-nav {
    float: right;
    list-style: none;
    margin: 0;
    padding: 0;
}

.top-nav > li {
    display: inline-block;
    margin-left: var(--spacing-2x);
    vertical-align: middle;
}

.top-nav > li > a {
    color: var(--text-lighter-color);
    font-size: var(--font-size-sm);
}

.top-nav > li > a:hover { color: var(--brand-primary); text-decoration: none; }

.top-nav > li.primary-action > a.btn {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
    color: var(--color-white);
}

.top-nav > li.primary-action > a.btn:hover {
    background-color: var(--brand-primary-darker);
    border-color: var(--brand-primary-darker);
}

/* ===================================================================
   14. Primary navigation — never sticky (show_affixed_navigation = disabled)
   =================================================================== */

.navbar-main,
.th-nav-static {
    background-color: var(--color-white);
    border: 0;
    border-bottom: var(--border-width-base) solid var(--border-color-base);
    border-radius: var(--border-radius-none);
    box-shadow: var(--box-shadow-xs);
    margin-bottom: 0;
    min-height: 0;
    position: static;   /* no affix, no sticky */
    top: auto;
}

.th-nav-static.affix,
.th-nav-static.affix-top,
.th-nav-static.navbar-fixed-top {
    position: static;
    width: auto;
}

.navbar-main .navbar-nav > li > a {
    color: var(--text-heading-color);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    padding: var(--spacing-2x) var(--spacing-2x);
    transition: color var(--transition-base);
}

.navbar-main .navbar-nav > li > a:hover,
.navbar-main .navbar-nav > li > a:focus,
.navbar-main .navbar-nav > .active > a,
.navbar-main .navbar-nav > .active > a:hover {
    background-color: transparent;
    color: var(--brand-primary);
}

.navbar-main .navbar-nav > li > a > i { color: var(--gray-icons); margin-right: var(--btn-icon-spacing); }
.navbar-main .navbar-nav > li > a:hover > i { color: var(--gray-icons-hover); }

.navbar-main .navbar-nav > .open > a,
.navbar-main .navbar-nav > .open > a:hover,
.navbar-main .navbar-nav > .open > a:focus {
    background-color: transparent;
    color: var(--brand-primary);
}

.navbar-main .dropdown-menu {
    background-color: var(--color-white);
    border: var(--border-width-base) solid var(--border-color-base);
    border-radius: var(--border-radius-base);
    box-shadow: var(--box-shadow-base);
    padding: var(--spacing-1x) 0;
}

.navbar-main .dropdown-menu > li > a {
    color: var(--text-body-color);
    font-size: var(--font-size-base);
    padding: var(--spacing-1x) var(--spacing-3x);
}

.navbar-main .dropdown-menu > li > a:hover,
.navbar-main .dropdown-menu > li > a:focus {
    background-color: var(--brand-primary-lighter-4);
    color: var(--brand-primary);
}

.navbar-main .dropdown-menu > li > a > i { color: var(--gray-icons); margin-right: var(--btn-icon-spacing); }

.navbar-main .navbar-toggle {
    border-color: var(--border-color-base);
    border-radius: var(--border-radius-xs);
    margin: var(--spacing-1x) 0;
}

.navbar-main .navbar-toggle .icon-bar { background-color: var(--gray-base); }

.navbar-main .navbar-toggle:hover,
.navbar-main .navbar-toggle:focus { background-color: var(--gray-faded); }

/* ===================================================================
   15. Sidebar behaviour
       The live site hides the main sidebar on desktop and surfaces it only
       on mobile/tablet. Reproduce it, or the layout will not match: main
       content also has to reclaim the freed column.
   =================================================================== */

@media (min-width: 992px) {
    /* The cart carries its own category sidebar (.cart-sidebar), which is
       part of the store's navigation and must stay visible - only the
       client-area sidebars are hidden on desktop. */
    #main-body .sidebar:not(.cart-sidebar),
    #main-body .sidebar-secondary:not(.cart-sidebar) { display: none; }

    /* When a sidebar is present WHMCS emits TWO sibling .col-md-9 columns:
       one holding the page header, one holding the content. Hiding the
       sidebar frees that column, so both must expand - widening only
       .main-content left the page header floating at 75% on top of the
       content (visible as overlapping text on the knowledgebase, downloads
       and announcements pages). */
    #main-body > .container > .row > .col-md-9,
    #main-body > .container-fluid > .row > .col-md-9 {
        float: none;
        width: 100%;
    }
}

.panel-sidebar .panel-heading {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
}

.panel-sidebar .list-group-item {
    border-color: var(--border-color-base);
    color: var(--text-body-color);
    font-size: var(--font-size-base);
    padding: var(--spacing-1x) var(--spacing-2x);
}

.panel-sidebar .list-group-item:hover { background-color: var(--brand-primary-lighter-4); color: var(--brand-primary); }
.panel-sidebar .list-group-item.active,
.panel-sidebar .list-group-item.active:hover {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
    color: var(--color-white);
}

.sidebar-menu-item-icon { color: var(--gray-icons); margin-right: var(--btn-icon-spacing); }

/* ===================================================================
   16. Layout variants
   =================================================================== */

/* condensed — slim top bar, used by the homepage */
.th-layout-condensed .th-header { padding: var(--spacing-2x) 0; }
.th-layout-condensed .th-logo img { max-height: 40px; }
.th-layout-condensed .navbar-main .navbar-nav > li > a { padding-top: var(--spacing-1x); padding-bottom: var(--spacing-1x); }

/* left-nav-wide — wide content, used by the client area home */
.th-layout-left-nav-wide #main-body > .container { width: 100%; max-width: var(--container-xl-max-width); }

@media (max-width: 991px) {
    .th-layout-left-nav-wide #main-body .sidebar { margin-bottom: var(--spacing-3x); }
}

/* ===================================================================
   17. Footer
   =================================================================== */

#footer.th-footer,
.th-footer {
    background-color: var(--gray-faded);
    border-top: var(--border-width-base) solid var(--border-color-base);
    color: var(--text-lighter-color);
    /* No top margin: the margin exposed a 60px band of the page background
       between the last section and the footer. Sections already carry their
       own vertical padding, so the footer butts straight up against them. */
    margin-top: 0;
    padding: var(--spacing-5x) 0 var(--spacing-4x);
}

.th-footer-base { position: relative; }
.th-footer-base p { margin: 0; font-size: var(--font-size-sm); }

.th-footer .back-to-top {
    color: var(--gray-icons);
    float: right;
    font-size: var(--font-size-lg);
}
.th-footer .back-to-top:hover { color: var(--brand-primary); }

/* extended footer — multi-column, homepage only */
.th-footer-columns {
    border-bottom: var(--border-width-base) solid var(--border-color-base);
    margin-bottom: var(--spacing-4x);
    padding-bottom: var(--spacing-4x);
}

.th-footer-col { margin-bottom: var(--spacing-3x); }

.th-footer-logo img {
    display: block;
    max-height: 48px;
    max-width: 260px;
    width: auto;
    height: auto;
}

.th-footer-heading {
    color: var(--text-heading-color);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--spacing-2x);
}

.th-footer-links { list-style: none; margin: 0; padding: 0; }
.th-footer-links > li { margin-bottom: var(--spacing-1x); }
.th-footer-links > li > a { color: var(--text-body-color); font-size: var(--font-size-base); }
.th-footer-links > li > a:hover { color: var(--brand-primary); text-decoration: none; }

/* ===================================================================
   18. Cookie notice — bottom-left (cookie_box_position = bottom-left)
   =================================================================== */

.th-cookie-notice {
    background-color: var(--color-white);
    border: var(--border-width-base) solid var(--border-color-base);
    border-radius: var(--border-radius-base);
    bottom: var(--spacing-3x);
    box-shadow: var(--box-shadow-lg);
    left: var(--spacing-3x);
    max-width: 380px;
    padding: var(--spacing-3x);
    position: fixed;
    right: auto;
    z-index: 1050;
}

.th-cookie-notice-text {
    color: var(--text-body-color);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
    margin-bottom: var(--spacing-2x);
}

.th-cookie-notice-link { color: var(--brand-primary); white-space: nowrap; }

@media (max-width: 575px) {
    .th-cookie-notice {
        bottom: 0;
        border-radius: var(--border-radius-none);
        left: 0;
        max-width: none;
        right: 0;
    }
}

/* WHMCS emits divider menu items as a list item whose link text is "-----".
   Render it as an actual rule instead of a clickable row of hyphens. */
.navbar-main .dropdown-menu > li.nav-divider {
    border-top: var(--border-width-base) solid var(--border-color-base);
    font-size: 0;
    line-height: 0;
    margin: var(--spacing-1x) 0;
    overflow: hidden;
    pointer-events: none;
}

.navbar-main .dropdown-menu > li.nav-divider > a {
    display: block;
    height: 0;
    overflow: hidden;
    padding: 0;
    visibility: hidden;
}

/* ===================================================================
   PHASE 3 — P1 pages
   =================================================================== */

/* Bootstrap glyphicons still ship with six (fonts/glyphicons-*) and are used
   by the domain list and the markdown editor toolbar. six hard-codes them to
   a light blue; bring them onto the brand palette. */
.glyphicon { color: var(--gray-icons); }
a:hover > .glyphicon,
.btn:hover > .glyphicon { color: var(--gray-icons-hover); }
.btn-primary .glyphicon,
.btn-success .glyphicon,
.btn-danger .glyphicon,
.btn-warning .glyphicon,
.btn-info .glyphicon { color: currentColor; }

/* -------------------------------------------------------------------
   19. Login / register / password reset — centred card
   ------------------------------------------------------------------- */

.logincontainer {
    margin: 0 auto;
    max-width: 460px;
}

.login-form {
    background-color: var(--color-white);
    border: var(--border-width-base) solid var(--border-color-base);
    border-radius: var(--border-radius-base);
    box-shadow: var(--box-shadow-base);
    padding: var(--spacing-4x);
}

.login-form .form-group { margin-bottom: var(--spacing-2x); }
.login-form .btn { width: 100%; }
.login-form .btn + .btn { margin-left: 0; margin-top: var(--spacing-1x); }

/* Registration form field decorations */
.prepend-icon { position: relative; }

.prepend-icon .field-icon {
    color: var(--gray-icons);
    left: var(--spacing-2x);
    line-height: var(--line-height-base);
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}

.prepend-icon .field { padding-left: var(--spacing-5x); }
.field-help-text { color: var(--text-lighter-color); font-size: var(--font-size-xs); }

.password-strength-meter .progress {
    background-color: var(--gray-lighter-4);
    border-radius: var(--border-radius-xs);
    box-shadow: none;
    height: var(--spacing-1x);
    margin-bottom: var(--spacing-1x);
}

.password-strength-meter .progress-bar { box-shadow: none; }

/* -------------------------------------------------------------------
   20. Client area home — dashboard tiles
   ------------------------------------------------------------------- */

.client-home-panels { margin-top: var(--spacing-3x); }

.tiles { margin-bottom: var(--spacing-3x); }

.tiles .tile {
    background-color: var(--color-white);
    border: var(--border-width-base) solid var(--border-color-base);
    border-radius: var(--border-radius-base);
    box-shadow: var(--box-shadow-base);
    display: block;
    margin-bottom: var(--spacing-3x);
    padding: var(--spacing-3x);
    text-align: center;
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.tiles .tile:hover {
    box-shadow: var(--box-shadow-lg);
    text-decoration: none;
    transform: translateY(-2px);
}

.tiles .tile .icon {
    color: var(--gray-icons);
    display: block;
    font-size: var(--font-size-xxlg);
    margin-bottom: var(--spacing-1x);
}

.tiles .tile .stat {
    color: var(--text-heading-color);
    display: block;
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-h3);
}

.tiles .tile .title {
    color: var(--text-lighter-color);
    display: block;
    font-size: var(--font-size-sm);
}

/* The colour class is on a child <div class="highlight bg-color-*">, not on
   .tile itself, so render that child as the accent bar across the top. */
.tiles .tile { overflow: hidden; position: relative; }

.tiles .tile .highlight {
    height: 3px;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.highlight.bg-color-blue  { background-color: var(--brand-primary); }
.highlight.bg-color-green { background-color: var(--brand-success); }
.highlight.bg-color-gold  { background-color: var(--brand-warning); }
.highlight.bg-color-red   { background-color: var(--brand-danger); }

/* Tint each tile's icon to match its accent bar. :has() is the only way to
   reach the icon from a sibling's class; every current browser supports it,
   and without it the icons simply stay the default grey. */
.tiles .tile:has(.highlight.bg-color-blue)  .icon { color: var(--brand-primary); }
.tiles .tile:has(.highlight.bg-color-green) .icon { color: var(--brand-success); }
.tiles .tile:has(.highlight.bg-color-gold)  .icon { color: var(--brand-warning); }
.tiles .tile:has(.highlight.bg-color-red)   .icon { color: var(--brand-danger); }

.home-kb-search {
    background-color: var(--color-white);
    border: var(--border-width-base) solid var(--border-color-base);
    border-radius: var(--border-radius-base);
    box-shadow: var(--box-shadow-base);
    margin-bottom: var(--spacing-3x);
    padding: var(--spacing-4x);
    text-align: center;
}

/* -------------------------------------------------------------------
   21. Data tables — services, invoices, domains, tickets
   ------------------------------------------------------------------- */

.table-container,
.table-responsive {
    background-color: var(--color-white);
    border-radius: var(--border-radius-base);
}

.responsive-edit-button .btn { white-space: nowrap; }

/* Ticket list */
.ticket-number {
    color: var(--text-lighter-color);
    font-family: var(--font-family-mono);
    font-size: var(--font-size-xs);
}

tr.border-left > td:first-child,
td.border-left { border-left: 3px solid var(--brand-primary); }

/* -------------------------------------------------------------------
   22. View ticket — conversation
   ------------------------------------------------------------------- */

.ticket-reply {
    border-bottom: var(--border-width-base) solid var(--border-color-base);
    padding: var(--spacing-3x) 0;
}

.ticket-reply:last-child { border-bottom: 0; }

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

.ticket-reply .date { color: var(--text-faded-color); font-size: var(--font-size-sm); }

.ticket-reply .message {
    color: var(--text-body-color);
    margin-top: var(--spacing-2x);
    word-wrap: break-word;
}

/* viewticket.tpl marks admin replies with .staff; client replies carry no
   modifier. Tint the staff side so the conversation is readable at a glance. */
.ticket-reply.staff { background-color: var(--brand-primary-lighter-4); }
.ticket-reply.staff .name { color: var(--brand-primary); }

.ticket-attachments-message .attachments a { color: var(--brand-primary); }

.rating .star { color: var(--gray-lighter-2); cursor: pointer; }
.rating .star.rated,
.rating.rating-done .star.rated { color: var(--brand-warning); }

/* -------------------------------------------------------------------
   23. View invoice
   ------------------------------------------------------------------- */

.invoice-container {
    background-color: var(--color-white);
    border: var(--border-width-base) solid var(--border-color-base);
    border-radius: var(--border-radius-base);
    box-shadow: var(--box-shadow-base);
    padding: var(--spacing-4x);
}

.invoice-header { margin-bottom: var(--spacing-4x); }
.invoice-header .invoice-col { margin-bottom: var(--spacing-2x); }

/* viewinvoice.tpl puts the status word in a child <span> whose class is the
   status, inside a plain .invoice-status wrapper - so these are descendant
   selectors, not compound ones. */
.invoice-status > span {
    border-radius: var(--border-radius-xs);
    display: inline-block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    padding: var(--spacing-half) var(--spacing-2x);
}

.invoice-status > .paid        { background-color: var(--brand-success-lighter-4); color: var(--brand-success-darker); }
.invoice-status > .unpaid      { background-color: var(--brand-warning-lighter-4); color: var(--brand-warning-darker); }
.invoice-status > .cancelled   { background-color: var(--gray-lighter-4);          color: var(--text-lighter-color); }
.invoice-status > .refunded    { background-color: var(--brand-primary-lighter-4); color: var(--brand-info-darker); }
.invoice-status > .collections { background-color: var(--brand-danger-lighter-4);  color: var(--brand-danger-darker); }
.invoice-status > .draft       { background-color: var(--gray-lighter-4);          color: var(--text-lighter-color); }

.payment-btn-container { margin-top: var(--spacing-3x); }

/* -------------------------------------------------------------------
   24. Print — invoices and quotes must come out clean.
       Strips chrome and every decorative colour so nothing depends on
       background printing being switched on.
   ------------------------------------------------------------------- */

@media print {
    .th-header,
    #main-menu,
    .th-footer,
    .th-cookie-notice,
    .sidebar,
    .sidebar-secondary,
    .back-to-top,
    .payment-btn-container,
    .btn,
    #fullpage-overlay,
    .modal { display: none !important; }

    body {
        background: none !important;
        color: var(--gray-darker) !important;
        font-size: 12pt;
    }

    #main-body .main-content.col-md-9,
    #main-body > .container { width: 100% !important; max-width: none !important; }

    .invoice-container,
    .panel {
        border: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

    .invoice-status { border: var(--border-width-base) solid var(--gray-lighter-2); }

    a[href]::after { content: ""; }   /* no URL noise after links */

    table { page-break-inside: auto; }
    tr    { page-break-inside: avoid; page-break-after: auto; }
}

/* ===================================================================
   PHASE 4 — Homepage
   =================================================================== */

.th-section { padding: var(--spacing-10x) 0; }

.th-section-title {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--spacing-3x);
}

.th-section-lead {
    color: var(--text-lighter-color);
    font-size: var(--font-size-lg);
    line-height: var(--line-height-lg);
    margin-bottom: var(--spacing-6x);
}

.th-section-subtitle {
    margin: 0 auto var(--spacing-6x);
    max-width: 860px;
}

/* -------------------------------------------------------------------
   Hero — full-bleed gradient, copy left, artwork right
   ------------------------------------------------------------------- */

.th-hero {
    background: var(--gradient-hero);
    color: var(--text-secondary-body-color);
    padding: var(--spacing-10x) 0 var(--spacing-14x);
}

.th-hero-row { display: flex; flex-wrap: wrap; align-items: center; }

.th-hero-copy { text-align: left; }

.th-hero-slides { position: relative; }
.th-hero-slide { display: none; }
.th-hero-slide.is-active { display: block; }

.th-hero-slide h1 {
    color: var(--text-secondary-heading-color);
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-3x);
}

.th-hero-slide p {
    color: var(--text-secondary-body-color);
    font-size: var(--font-size-lg);
    line-height: var(--line-height-lg);
    margin-bottom: var(--spacing-4x);
    max-width: 30em;
}

.th-hero-art { text-align: center; }
.th-hero-art img { max-width: 100%; height: auto; }

/* Slide picker — three cards straddling the base of the hero */
.th-hero-tabs-wrap {
    background-color: transparent;
    margin-top: calc(-1 * var(--spacing-9x));
    position: relative;
    z-index: 2;
}

.th-hero-tabs { display: flex; flex-wrap: wrap; }
.th-hero-tabs > [class*="col-"] { display: flex; }

.th-hero-tab {
    background-color: var(--color-white);
    border: var(--border-width-base) solid var(--border-color-base);
    border-radius: var(--border-radius-base);
    box-shadow: var(--box-shadow-base);
    color: var(--text-heading-color);
    margin-bottom: var(--spacing-2x);
    padding: var(--spacing-3x) var(--spacing-2x);
    text-align: center;
    transition: box-shadow var(--transition-base), border-color var(--transition-base);
    width: 100%;
}

.th-hero-tab:hover { box-shadow: var(--box-shadow-lg); }

.th-hero-tab.is-active {
    border-color: var(--brand-primary);
    box-shadow: var(--box-shadow-lg);
}

.th-hero-tab-icon {
    color: var(--gray-icons);
    display: block;
    font-size: var(--font-size-xxlg);
    margin-bottom: var(--spacing-1x);
}

.th-hero-tab.is-active .th-hero-tab-icon { color: var(--brand-primary); }

.th-hero-tab-label {
    display: block;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
}

/* -------------------------------------------------------------------
   Domain search
   ------------------------------------------------------------------- */

.th-domain-search { background-color: var(--color-white); }
.th-domain-form { margin-top: var(--spacing-4x); }
.th-domain-note { margin-top: var(--spacing-3x); }
.th-domain-note a { font-size: var(--font-size-sm); }

/* -------------------------------------------------------------------
   Product cards
   ------------------------------------------------------------------- */

.th-products { background-color: var(--gray-faded); }

.th-product-card {
    background-color: var(--color-white);
    border: var(--border-width-base) solid var(--border-color-base);
    border-radius: var(--border-radius-base);
    box-shadow: var(--box-shadow-base);
    height: 100%;
    margin-bottom: var(--spacing-3x);
    padding: var(--spacing-5x) var(--spacing-4x);
    text-align: center;
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.th-product-card:hover {
    box-shadow: var(--box-shadow-lg);
    transform: translateY(-4px);
}

.th-product-card-icon {
    color: var(--brand-primary);
    font-size: var(--font-size-h2);
    margin-bottom: var(--spacing-3x);
}

.th-product-card-title { font-size: var(--font-size-h5); margin-bottom: var(--spacing-2x); }

.th-product-card-headline {
    color: var(--text-lighter-color);
    margin-bottom: var(--spacing-4x);
    min-height: var(--spacing-6x);
}

.th-product-grid { display: flex; flex-wrap: wrap; }
.th-product-grid > [class*="col-"] { display: flex; }
.th-product-grid .th-product-card { width: 100%; }

/* -------------------------------------------------------------------
   Guarantees
   ------------------------------------------------------------------- */

.th-guarantees { background-color: var(--color-white); }

.th-feature { padding: var(--spacing-3x); text-align: center; }

.th-feature-icon {
    color: var(--brand-primary);
    display: block;
    font-size: var(--font-size-h3);
    margin-bottom: var(--spacing-2x);
}

.th-feature-title { font-size: var(--font-size-h6); margin-bottom: var(--spacing-1x); }
.th-feature p { color: var(--text-lighter-color); font-size: var(--font-size-sm); line-height: var(--line-height-sm); }

.th-feature-row { margin-bottom: var(--spacing-8x); }

.th-guarantee { padding: var(--spacing-3x); }

.th-guarantee-icon {
    color: var(--brand-primary);
    display: block;
    font-size: var(--font-size-h4);
    margin-bottom: var(--spacing-2x);
}

.th-guarantee-title { font-size: var(--font-size-h5); margin-bottom: var(--spacing-2x); }
.th-guarantee p { color: var(--text-lighter-color); }

/* -------------------------------------------------------------------
   Migration CTA + contact
   ------------------------------------------------------------------- */

.th-migration {
    background: var(--gradient-hero);
    color: var(--text-secondary-body-color);
}

.th-migration .th-section-title { color: var(--text-secondary-heading-color); }

.th-migration-text {
    color: var(--text-secondary-body-color);
    font-size: var(--font-size-lg);
    line-height: var(--line-height-lg);
    margin: 0 auto var(--spacing-5x);
    max-width: 820px;
}

.th-contact { background-color: var(--gray-faded); }

/* -------------------------------------------------------------------
   Homepage responsive
   ------------------------------------------------------------------- */

@media (max-width: 767px) {
    .th-section { padding: var(--spacing-7x) 0; }
    .th-hero { padding: var(--spacing-8x) 0 var(--spacing-7x); }
    .th-hero-slide h1 { font-size: var(--font-size-h3); line-height: var(--line-height-h3); }
    .th-hero-slide p  { font-size: var(--font-size-md); line-height: var(--line-height-md); }
    .th-section-title { font-size: var(--font-size-h4); line-height: var(--line-height-h4); }
    .th-guarantee-title { font-size: var(--font-size-h6); }
    .th-product-card-headline { min-height: 0; }
}

/* Homepage — TLD price chips and product card pricing */

.th-tld-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2x);
    justify-content: center;
    list-style: none;
    margin: var(--spacing-4x) 0 0;
    padding: 0;
}

.th-tld-chip {
    background-color: var(--gray-faded);
    border: var(--border-width-base) solid var(--border-color-base);
    border-radius: var(--border-radius-base);
    padding: var(--spacing-1x) var(--spacing-3x);
    text-align: center;
}

.th-tld-name {
    color: var(--text-heading-color);
    display: block;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
}

.th-tld-price { color: var(--brand-primary); display: block; font-size: var(--font-size-sm); }

.th-product-card-price { margin-bottom: var(--spacing-3x); }

.th-price-label { color: var(--text-lighter-color); display: block; font-size: var(--font-size-sm); }

.th-price-amount {
    color: var(--text-heading-color);
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-medium);
}

.th-price-cycle { color: var(--text-lighter-color); font-size: var(--font-size-base); }

/* ===================================================================
   PHASE 4 (revised) — match the live layout
   =================================================================== */

/* Homepage runs full-bleed: sections carry their own background edge to
   edge, so #main-body must not box them in. */
.th-layout-condensed #main-body > .container-fluid.without-padding,
.th-layout-condensed #main-body > .container-fluid { padding-left: 0; padding-right: 0; }
.th-layout-condensed #main-body > .container-fluid > .row { margin-left: 0; margin-right: 0; }
.th-layout-condensed #main-body .main-content { padding-left: 0; padding-right: 0; }
/* six gives #main-body a white background. On the homepage the sections
   paint their own, so that white shows through as a band between the last
   section and the footer - the gap reported on the page. */
.th-layout-condensed #main-body { background-color: transparent; padding: 0; }

/* --- Header: one bar of logo + links + Login, thin utility strip above --- */

.th-header {
    background-color: var(--color-white);
    border-bottom: 0;
    padding: var(--spacing-1x) 0;
}

.th-header .top-nav > li > a { font-size: var(--font-size-xs); }

.navbar-main {
    border-top: var(--border-width-base) solid var(--border-color-base);
    padding: var(--spacing-1x) 0;
}

.navbar-main .navbar-brand {
    display: flex;
    align-items: center;
    height: auto;
    padding: var(--spacing-1x) var(--spacing-2x) var(--spacing-1x) 0;
}

.navbar-main .navbar-brand img {
    max-height: 34px;
    max-width: 240px;
    width: auto;
}

/* Right-hand nav: the last item reads as the primary action, like Login. */
.navbar-main .navbar-right > li:last-child > a {
    background-color: var(--brand-primary);
    border-radius: var(--border-radius-xs);
    color: var(--color-white);
    margin: var(--spacing-1x) 0;
    padding: var(--spacing-1x) var(--spacing-3x);
}

.navbar-main .navbar-right > li:last-child > a:hover,
.navbar-main .navbar-right > li.open:last-child > a {
    background-color: var(--brand-primary-darker);
    color: var(--color-white);
}

/* --- Domain search: single field, inline TLD row with divider rules --- */

.th-domain-search { padding-top: var(--spacing-8x); }

.th-domain-form .input-group .form-control {
    border-bottom-left-radius: var(--border-radius-base);
    border-top-left-radius: var(--border-radius-base);
    box-shadow: var(--box-shadow-sm);
    height: auto;
    padding: var(--spacing-2x) var(--spacing-3x);
}

.th-domain-form .input-group-btn .btn {
    border-bottom-right-radius: var(--border-radius-base);
    border-top-right-radius: var(--border-radius-base);
    padding: var(--spacing-2x) var(--spacing-4x);
}

.th-tld-chips {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    justify-content: center;
    list-style: none;
    margin: var(--spacing-5x) 0 0;
    padding: 0;
}

.th-tld-chip {
    background-color: transparent;
    border: 0;
    border-right: var(--border-width-base) solid var(--border-color-base);
    border-radius: var(--border-radius-none);
    padding: 0 var(--spacing-4x);
}

.th-tld-chip:last-child { border-right: 0; }

.th-tld-name {
    color: var(--text-heading-color);
    display: inline;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    margin-right: var(--spacing-1x);
}

.th-tld-price { color: var(--text-lighter-color); display: inline; font-size: var(--font-size-base); }

/* --- Product cards: large price, /mo on its own line --- */

.th-product-card-price { margin-bottom: var(--spacing-3x); }

.th-price-label {
    color: var(--text-lighter-color);
    display: block;
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-half);
}

.th-price-amount {
    color: var(--text-heading-color);
    display: block;
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-h3);
}

.th-price-cycle {
    color: var(--text-lighter-color);
    display: block;
    font-size: var(--font-size-sm);
}

.th-product-card-title { font-size: var(--font-size-h4); font-weight: var(--font-weight-normal); }

/* --- Cookie notice: icon, centred copy, full-width action --- */

.th-cookie-notice { padding: var(--spacing-4x) var(--spacing-3x); text-align: center; }
.th-cookie-notice-text { margin-bottom: var(--spacing-3x); }
.th-cookie-notice .btn { width: 100%; }

/* --- Homepage responsive --- */

@media (max-width: 991px) {
    .th-hero { padding: var(--spacing-8x) 0 var(--spacing-12x); }
    .th-hero-row { display: block; }
    .th-hero-copy { text-align: center; margin-bottom: var(--spacing-5x); }
    .th-hero-slide p { margin-left: auto; margin-right: auto; }
    .th-hero-art img { max-width: 380px; }
}

@media (max-width: 767px) {
    .th-hero-slide h1 { font-size: var(--font-size-h3); line-height: var(--line-height-h3); }
    .th-tld-chip { border-right: 0; padding: var(--spacing-half) var(--spacing-2x); }
    .navbar-main .navbar-brand img { max-height: 28px; }
}

/* Hero tab cards straddle the base of the gradient rather than sitting inside it */
.th-hero { padding-bottom: var(--spacing-16x); }
.th-hero-tabs-wrap { margin-top: calc(-1 * var(--spacing-11x)); }

/* Cookie notice icon */
.th-cookie-notice-icon {
    color: var(--brand-primary);
    display: block;
    font-size: var(--font-size-xxlg);
    margin-bottom: var(--spacing-2x);
}

/* Utility strip: the live site shows only the cart and currency. The site is
   English-only (confirmed in 01-BRIEF.md), so the language chooser is hidden
   site-wide. The tidier fix is to turn language switching off in WHMCS
   settings; this keeps the theme matching until that is done. */
.th-header .top-nav > li > a.choose-language { display: none; }
.th-header .top-nav > li:has(> a.choose-language) { display: none; }

/* Utility strip: cart + currency only, as plain links */
.th-cart-link > a { color: var(--text-lighter-color); }
.th-cart-link > a > i { margin-right: var(--spacing-half); }
.th-cart-link > a:hover { color: var(--brand-primary); text-decoration: none; }
.th-header .top-nav > li { border-left: var(--border-width-base) solid var(--border-color-base); padding-left: var(--spacing-2x); }
.th-header .top-nav > li:first-child { border-left: 0; }

/* ===================================================================
   Homepage — exact-match pass
   =================================================================== */

/* Hero artwork switches with the slide, so each slide owns its own row. */
.th-hero-slide .th-hero-row { display: flex; flex-wrap: wrap; align-items: center; }
.th-hero-art img { max-width: 100%; height: auto; }

.th-hero-slide h1 { font-size: var(--font-size-h1); line-height: 1.15; }
.th-hero-slide p  { font-size: var(--font-size-xlg); line-height: var(--line-height-xlg); max-width: 26em; }
.th-hero-btn { padding: var(--spacing-2x) var(--spacing-4x); }

/* --- Slide tabs -------------------------------------------------- */

.th-hero-tab {
    overflow: hidden;
    padding: var(--spacing-4x) var(--spacing-2x);
    position: relative;
}

.th-hero-tab-icon { display: block; margin-bottom: var(--spacing-2x); }
.th-hero-tab-icon .svg-icon { width: 64px; height: 64px; }

/* The tab icons are line-art SVGs that take their colour from CSS, so they
   stay on the brand palette rather than carrying baked-in fills. */
.th-hero-tab .svg-icon-prime            { fill: var(--brand-primary); }
.th-hero-tab .svg-icon-prime-l          { fill: var(--brand-primary-lighter); }
.th-hero-tab .svg-icon-i                { fill: var(--color-white); }
.th-hero-tab .svg-icon-outline-s        { fill: none; stroke: var(--gray-darker); stroke-width: 2; stroke-linecap: round; }
.th-hero-tab .svg-icon-stroke           { stroke: none; }
.th-hero-tab .dashed-8                  { stroke-dasharray: 5 4; }
.th-hero-tab .dashed-9                  { stroke-dasharray: 5 5; }

/* Corner check on the active tab */
.th-hero-tab-check { display: none; }

.th-hero-tab.is-active .th-hero-tab-check {
    display: block;
    border-top: 34px solid var(--brand-primary);
    border-left: 34px solid transparent;
    position: absolute;
    right: 0;
    top: 0;
}

.th-hero-tab.is-active .th-hero-tab-check > i {
    color: var(--color-white);
    font-size: var(--font-size-xs);
    position: absolute;
    right: 4px;
    top: -30px;
}

/* --- Navigation: right-aligned group, active item underlined ------ */

@media (min-width: 992px) {
    .navbar-main .navbar-nav { float: right; }
    .navbar-main .navbar-nav.navbar-right { margin-left: var(--spacing-3x); }
}

.navbar-main .navbar-nav > li > a {
    border-bottom: 3px solid transparent;
    padding-bottom: calc(var(--spacing-2x) - 3px);
}

.navbar-main .navbar-nav:not(.navbar-right) > .active > a,
.navbar-main .navbar-nav:not(.navbar-right) > .active > a:hover,
.navbar-main .navbar-nav:not(.navbar-right) > .active > a:focus {
    border-bottom-color: var(--brand-primary);
    color: var(--brand-primary);
}

/* The Login action keeps its button shape, so no underline on it. */
.navbar-main .navbar-right > li:last-child > a { border-bottom-color: transparent; }

/* Nav layout: flex the collapse so the link group and the Login action sit
   right-aligned in DOM order. Floating both lists right reverses them and
   lands Login on top of the first link. */
@media (min-width: 992px) {
    .navbar-main .navbar-collapse {
        align-items: center;
        display: flex !important;
        justify-content: flex-end;
    }
    .navbar-main .navbar-nav { float: none; margin-top: 0; margin-bottom: 0; }
    .navbar-main .navbar-nav.navbar-right { float: none; margin-right: 0; }
}

/* Bootstrap gives .navbar-nav a -15px side margin (and .navbar-right a
   -15px right margin) to bleed into the container gutter. Inside the flex
   row above that pulls the Login action back over the last link, so the
   negative margins are cleared and replaced with real spacing. */
@media (min-width: 992px) {
    .navbar-main .navbar-collapse { padding-left: 0; padding-right: 0; }
    .navbar-main .navbar-nav,
    .navbar-main .navbar-nav.navbar-right { margin-left: 0; margin-right: 0; }
    .navbar-main .navbar-nav.navbar-right { margin-left: var(--spacing-3x); }
    .navbar-main .navbar-nav > li > a { padding-left: var(--spacing-2x); padding-right: var(--spacing-2x); }
}

/* The nav <li>s are floated by Bootstrap. Inside a flex row a list of floats
   contributes no intrinsic width, so the <ul> collapses to zero and its items
   overflow across the Login action. Make the lists flex containers as well. */
@media (min-width: 992px) {
    .navbar-main .navbar-nav {
        align-items: center;
        display: flex;
        flex: 0 0 auto;
    }
    .navbar-main .navbar-nav > li { float: none; }
    .navbar-main .navbar-nav > li > a { white-space: nowrap; }
}

/* Bootstrap declares .navbar-right{float:right!important}, which keeps the
   Login list floated out of the flex row and overlapping the last link.
   Matching !important is the only way to override it. */
@media (min-width: 992px) {
    .navbar-main .navbar-nav.navbar-right { float: none !important; margin-right: 0 !important; }
}

/* The nav row is one flex line: logo, then links, then the Login action.
   Bootstrap floats .navbar-header, and a float does not shrink a sibling
   block box - so the collapse overlapped it and the right-floated Login
   landed on top of the last link. Taking both out of float removes the
   whole class of problem. */
@media (min-width: 992px) {
    #nav > .container {
        align-items: center;
        display: flex;
    }
    .navbar-main .navbar-header { float: none !important; flex: 0 0 auto; }
    .navbar-main .navbar-collapse { flex: 1 1 auto; }
}

/* Final nav layout. Bootstrap's negative side margins on .navbar-nav and
   .navbar-right survive a plain override and drag the Login action back
   over the last link, so they are cleared with !important and the spacing
   comes from a flex gap instead. Measured: 24px clear, no overlap. */
@media (min-width: 992px) {
    .navbar-main .navbar-collapse {
        align-items: center;
        display: flex !important;
        gap: var(--spacing-3x);
        justify-content: flex-end;
    }
    .navbar-main .navbar-nav {
        align-items: center;
        display: flex;
        flex: 0 0 auto;
        float: none !important;
        margin: 0 !important;
    }
    .navbar-main .navbar-nav > li { float: none; }
}


/* The stock order form ships a green "Order Now" action; bring it onto the
   brand palette so the store matches the rest of the site. */
.btn-order-now,
.btn-order-now:focus,
.btn.btn-success.btn-order-now {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
    color: var(--color-white);
}

.btn-order-now:hover,
.btn.btn-success.btn-order-now:hover {
    background-color: var(--brand-primary-darker);
    border-color: var(--brand-primary-darker);
    color: var(--color-white);
}

/* ===================================================================
   PHASE 5 — neutralise stock six colours that outrank the theme

   These are all cases where six declares a colour at higher specificity
   than the theme's base rules, so the stock value survived. Selectors
   here deliberately mirror six's own specificity.
   =================================================================== */

/* Page headings: six sets .header-lined h1 to its teal #058 with a #ccc
   rule, which beat the bare h1 rule on every client-area page. */
.header-lined h1 {
    border-bottom-color: var(--border-color-base);
    color: var(--text-heading-color);
    font-weight: var(--font-weight-medium);
}

/* Breadcrumbs */
div.header-lined .breadcrumb li a         { color: var(--text-lighter-color); }
div.header-lined .breadcrumb li a:hover   { color: var(--brand-primary); }
div.header-lined .breadcrumb > .active    { color: var(--text-heading-color); }
.breadcrumb > li + li:before              { color: var(--gray-lighter-2); }

/* Modal headers use .panel-primary, which six paints Bootstrap blue.
   This is on every page via footer.tpl's #modalAjax. */
.panel-primary { border-color: var(--brand-primary); }
.panel-primary > .panel-heading {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
    color: var(--color-white);
}
.panel-primary > .panel-heading .close { color: var(--color-white); opacity: .8; }

/* Sidebar panels: six paints the heading/footer #f5f5f5 with #333 text and
   asks for 'Open Sans', which this theme does not load - so the titles fell
   back to the system font at weight 300. */
.panel-sidebar > .panel-heading,
.panel-sidebar > .panel-footer {
    background-color: var(--gray-faded);
    color: var(--text-heading-color);
}

.panel-sidebar .panel-title {
    color: var(--text-heading-color);
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
}

.panel-sidebar .panel-minimise { color: var(--gray-icons); }

/* Panel accent bars - five stock hues on the client area dashboard */
.panel.panel-accent-gold     { border-top-color: var(--brand-warning); }
.panel.panel-accent-red      { border-top-color: var(--brand-danger); }
.panel.panel-accent-emerald,
.panel.panel-accent-green    { border-top-color: var(--brand-success); }
.panel.panel-accent-blue     { border-top-color: var(--brand-primary); }
.panel.panel-accent-asbestos { border-top-color: var(--gray-lighter-2); }

/* Dashboard panel headings: six forces color:#fff on these buttons, and the
   themed .btn-default gives them a white background - white on white, so the
   labels were invisible. */
.client-home-panels .panel > .panel-heading .panel-title .btn {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
    color: var(--color-white);
}

.client-home-panels .panel > .panel-heading .panel-title .btn:hover,
.client-home-panels .panel > .panel-heading .panel-title .btn:focus {
    background-color: var(--brand-primary-darker);
    border-color: var(--brand-primary-darker);
    color: var(--color-white);
}

/* six zeroes the dashboard panel bodies' padding and clips them to 170px */
.client-home-panels .panel > .panel-body {
    max-height: none;
    padding: var(--spacing-3x);
}

.client-home-panels .panel > .panel-heading {
    border-bottom: var(--border-width-base) solid var(--border-color-base);
}

.client-home-panels .panel small { color: var(--text-lighter-color); }

div[menuitemname='Active Products/Services'] .btn-view-more.disabled {
    color: var(--text-faded-color);
}

/* DataTables list headers: six gives them an alternating lime/green 4px
   underline (#a2d27a / #7bc144) on the services, domains, emails and
   quotes tables. */
.dataTables_wrapper table.table-list thead th,
.dataTables_wrapper table.table-list thead th:nth-child(even),
.table-container table.table-list thead th {
    background-color: var(--color-white);
    border-bottom: 2px solid var(--border-color-base);
    color: var(--text-heading-color);
}

/* Pagination */
.pagination > li > a,
.pagination > li > span { color: var(--brand-primary); }

.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > a:focus,
.pagination > .active > span {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
    color: var(--color-white);
}

/* Service status chips */
.status { border-color: var(--border-color-base); color: var(--text-body-color); }
.status-active,
.status-completed,
.status-open       { color: var(--brand-success); }
.status-pending    { color: var(--brand-danger); }
.status-suspended  { color: var(--brand-warning); }
.status-refunded   { color: var(--brand-info); }
.status-cancelled,
.status-terminated { color: var(--text-lighter-color); }

/* Marketing opt-in toggle (bootstrapSwitch renders Bootstrap green) */
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success {
    background: var(--brand-success);
    color: var(--color-white);
}

.marketing-email-optin {
    background-color: var(--gray-faded);
    border-radius: var(--border-radius-base);
}

/* Dashboard knowledgebase search. six positions the magnifier with a
   -30px top margin tuned to Bootstrap's 46px .input-lg; the themed input is
   shorter, so the icon rode up out of the field. Anchor it instead of
   trusting a fixed offset. */
.home-kb-search { position: relative; }

.home-kb-search .form-control {
    border-color: var(--border-color-base);
    color: var(--text-body-color);
    font-weight: var(--font-weight-normal);
}

.home-kb-search .form-control:focus { border-color: var(--brand-primary); }

.home-kb-search i {
    color: var(--gray-icons);
    float: none;
    left: var(--spacing-3x);
    margin: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

/* Sidebar action lists scroll horizontally below 992px; six forces a #ddd
   border with !important, so this has to match. */
@media (max-width: 991px) {
    .panel-actions > .list-group .list-group-item {
        border-color: var(--border-color-base) !important;
        border-radius: var(--border-radius-sm) !important;
    }
}

/* Sidebar active item. six qualifies the selector with the element
   (a.list-group-item.active), giving it one more point than the theme's
   class-only rule, so the stock slate survived. Match the qualifier. */
.panel-sidebar a.list-group-item.active,
.panel-sidebar a.list-group-item.active:hover,
.panel-sidebar a.list-group-item.active:focus {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
    color: var(--color-white);
}

/* TLD filter chips on the domain search */
.tld-filters a.badge-success {
    background-color: var(--brand-success);
    color: var(--color-white);
}
.tld-filters a.badge-success:hover { background-color: var(--brand-success-darker); }

.tld-filters a.badge-secondary {
    background-color: var(--gray-lighter-2);
    color: var(--color-white);
}
.tld-filters a.badge-secondary:hover { background-color: var(--gray-lighter); }

/* DataTables toolbar - the "Showing N of N entries" bar is stock slate */
.dataTables_wrapper .dataTables_info {
    background-color: var(--gray-darker);
    color: var(--color-white);
}

.dataTables_wrapper .dataTables_filter input {
    border: var(--border-width-base) solid var(--border-color-base);
    border-radius: var(--border-radius-sm);
}

/* Checkout is the primary conversion action, not a "success" state. */
.btn.btn-success.btn-checkout {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
    color: var(--color-white);
}

.btn.btn-success.btn-checkout:hover,
.btn.btn-success.btn-checkout:focus {
    background-color: var(--brand-primary-darker);
    border-color: var(--brand-primary-darker);
    color: var(--color-white);
}

/* Wide data tables must scroll inside their own container, never the page.
   The domain pricing table has 7 columns and pushed the document to 596px
   at a 414px viewport; everything else already fits. */
.table-container {
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
}

.table-container > table { min-width: 640px; }

@media (min-width: 768px) {
    .table-container > table { min-width: 0; }
}

/* Responsive headings. At 320px a single long word ("Knowledgebase") set at
   the 48px h1 size is wider than the column and cannot wrap, pushing the
   document 35px past the viewport. Scale the display sizes down on small
   screens and let long words break rather than overflow. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.header-lined h1 {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

@media (max-width: 767px) {
    h1, .h1, .header-lined h1 {
        font-size: var(--font-size-h3);
        line-height: var(--line-height-h3);
    }
    h2, .h2 { font-size: var(--font-size-h4); line-height: var(--line-height-h4); }
    h3, .h3 { font-size: var(--font-size-h5); line-height: var(--line-height-h5); }
}

@media (max-width: 400px) {
    h1, .h1, .header-lined h1 {
        font-size: var(--font-size-h4);
        line-height: var(--line-height-h4);
    }
}

/* Cross-links between the login and registration pages. */
.th-auth-alt {
    color: var(--text-lighter-color);
    font-size: var(--font-size-sm);
    margin-top: var(--spacing-3x);
    text-align: center;
}

.th-auth-alt a { font-weight: var(--font-weight-medium); }

/* ===================================================================
   Homepage — features on the gradient, guarantees as alternating rows
   =================================================================== */

/* The isometric line-art icons take their colours from these classes, so
   they can be re-tinted per context instead of carrying baked-in fills.
   Previously scoped to the hero tabs only; now available everywhere. */
.svg-icon { width: 64px; height: 64px; }
.svg-icon .svg-icon-prime          { fill: var(--brand-primary); }
.svg-icon .svg-icon-prime-l        { fill: var(--brand-primary-lighter); }
.svg-icon .svg-icon-i              { fill: var(--color-white); }
.svg-icon .svg-icon-outline-s,
.svg-icon .svg-icon-outline-i      { fill: none; stroke: var(--gray-darker); stroke-width: 2; stroke-linecap: round; }
.svg-icon .svg-icon-stroke         { stroke: none; }
.svg-icon [class*="dashed-"]       { stroke-dasharray: 5 4; }

/* On the gradient the same icons render as white line art. */
.svg-icon-on-dark .svg-icon-prime,
.svg-icon-on-dark .svg-icon-prime-l,
.svg-icon-on-dark .svg-icon-i      { fill: none; }
.svg-icon-on-dark .svg-icon-prime,
.svg-icon-on-dark .svg-icon-prime-l,
.svg-icon-on-dark .svg-icon-outline-s,
.svg-icon-on-dark .svg-icon-outline-i {
    stroke: var(--color-white);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* --- Feature callouts, on the brand gradient --- */

.th-features {
    background: var(--gradient-hero);
    color: var(--text-secondary-body-color);
}

.th-features-title { color: var(--text-secondary-heading-color); }
.th-features-lead  { color: var(--text-secondary-lighter-color); }

.th-features .th-feature { padding: var(--spacing-2x); text-align: center; }

.th-features .th-feature-icon {
    display: block;
    margin: 0 auto var(--spacing-2x);
}

.th-features .th-feature-icon .svg-icon { width: 56px; height: 56px; }

.th-features .th-feature-title {
    color: var(--text-secondary-heading-color);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-normal);
    margin-bottom: var(--spacing-1x);
}

.th-features .th-feature p {
    color: var(--text-secondary-lighter-color);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
}

.th-features .th-feature-row { margin-bottom: 0; }

/* --- Guarantee rows: copy one side, illustration the other --- */

.th-guarantees { background-color: var(--color-white); }

.th-guarantee-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: var(--spacing-8x);
}

.th-guarantee-row:last-child { margin-bottom: 0; }

.th-guarantee-copy { padding: var(--spacing-3x) var(--spacing-4x); }

.th-guarantee-title {
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-h3);
    margin-bottom: var(--spacing-3x);
}

.th-guarantee-copy p {
    color: var(--text-lighter-color);
    font-size: var(--font-size-md);
    line-height: var(--line-height-lg);
    text-align: justify;
}

.th-guarantee-art { padding: var(--spacing-3x); text-align: center; }
.th-guarantee-art img { max-width: 100%; height: auto; }

/* Illustration first on alternating rows at desktop; copy always first on
   mobile so the reading order stays sensible. */
@media (max-width: 991px) {
    .th-guarantee-row,
    .th-guarantee-row-reverse { display: block; }
    .th-guarantee-row-reverse .th-guarantee-art { order: 2; }
    .th-guarantee-title { font-size: var(--font-size-h4); line-height: var(--line-height-h4); }
}

/* --- Product card icons --- */

.th-product-card-icon {
    display: block;
    margin-bottom: var(--spacing-3x);
    text-align: center;
}

.th-product-card-icon .svg-icon { width: 72px; height: 72px; }

/* ===================================================================
   Hero artwork

   The hero graphics are line/flat SVGs whose parts are painted through
   class names. On the live site those classes resolve to CSS variables
   that are defined in a colour-scheme stylesheet which is not served with
   the page, so the exact shades could not be read. The parts are instead
   mapped onto this theme's own palette by role, which keeps the artwork
   on-brand and coherent. Composition matches; individual shades are an
   approximation rather than a copy.
   =================================================================== */

.promo-slider-icon { opacity: 1; }

/* Light surfaces - card faces, screens, panels */
.th-hero-art [class$="-body"],
.th-hero-art [class$="-front"],
.th-hero-art [class$="-bg"],
.th-hero-art [class$="-inside"],
.th-hero-art .svg-browser-avatar-bg,
.th-hero-art .svg-padlock-lock-inside { fill: var(--color-white); }

/* Mid tones - tops, backs and side faces read as the shaded planes */
.th-hero-art [class*="-top"],
.th-hero-art [class*="-back"],
.th-hero-art [class*="-right-side"] { fill: var(--brand-primary-lighter-3); }

/* Faint detail - text lines, small elements */
.th-hero-art [class*="-element"],
.th-hero-art [class*="-text"],
.th-hero-art .svg-browser-elements,
.th-hero-art .svg-left-elements,
.th-hero-art .svg-right-elements { fill: var(--brand-primary-lighter-2); }

/* Device and panel outlines */
.th-hero-art .svg-browser,
.th-hero-art .svg-screen,
.th-hero-art .svg-notepad,
.th-hero-art .svg-tablet,
.th-hero-art .svg-phone,
.th-hero-art .svg-smartphone-border,
.th-hero-art .svg-notepad-border { fill: var(--brand-primary); }

/* Accent objects - locks, keys, shields, medals */
.th-hero-art .svg-padlock,
.th-hero-art .svg-padlock-lock,
.th-hero-art .svg-key,
.th-hero-art .svg-key-bottom,
.th-hero-art .svg-shield,
.th-hero-art .svg-shield-front,
.th-hero-art .svg-medal,
.th-hero-art .svg-medal-ribbon,
.th-hero-art .svg-code,
.th-hero-art .svg-search-icon { fill: var(--brand-primary-lighter); }

.th-hero-art .svg-shield-back,
.th-hero-art .svg-shield-back-1,
.th-hero-art .svg-medal-round-back { fill: var(--brand-secondary); }

.th-hero-art .svg-hole { fill: var(--brand-secondary-darker); }

/* Banners and highlighted strips */
.th-hero-art .svg-browser-banner,
.th-hero-art .svg-screen-bottom-button,
.th-hero-art .svg-smartphone-icon { fill: var(--brand-primary); }

/* Dashed guide strokes */
.th-hero-art [class*="dashed-"],
.th-hero-art .stroke,
.th-hero-art .svg-banner-bordered-element,
.th-hero-art .svg-screen-bordered-element,
.th-hero-art .svg-smartphone-bordered-element {
    fill: none;
    stroke: var(--text-secondary-faded-color);
    stroke-dasharray: 5 4;
    stroke-width: 1.5;
}

/* Layout of the three graphics per slide */
.th-hero-art { position: relative; text-align: center; }

.th-hero-art .promo-slider-icon { max-width: 100%; height: auto; }

.th-hero-art .svg-sitebuilder-center,
.th-hero-art .svg-symantec-center,
.th-hero-art .svg-sitelock-center { width: 100%; max-width: 420px; }

.th-hero-art .svg-sitebuilder-left,
.th-hero-art .svg-symantec-left,
.th-hero-art .svg-sitelock-left,
.th-hero-art .svg-sitebuilder-right,
.th-hero-art .svg-symantec-right,
.th-hero-art .svg-sitelock-right { display: none; }

@media (min-width: 1200px) {
    .th-hero-art .svg-sitebuilder-left,
    .th-hero-art .svg-symantec-left,
    .th-hero-art .svg-sitelock-left,
    .th-hero-art .svg-sitebuilder-right,
    .th-hero-art .svg-symantec-right,
    .th-hero-art .svg-sitelock-right {
        display: block;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 130px;
        opacity: .9;
    }
    .th-hero-art [class$="-left"]  { left: -10px; }
    .th-hero-art [class$="-right"] { right: -10px; }
}

/* Page title: six's actual selector is `div.header-lined h1` (0,1,2), not
   `.header-lined h1` (0,1,1) - the earlier override was one point short, so
   the stock teal #058 kept winning on every client-area and store page. */
div.header-lined h1 {
    border-bottom-color: var(--border-color-base);
    color: var(--text-heading-color);
    font-weight: var(--font-weight-bold);
}

/* DataTables toolbar: the live site has no dark bar above its tables - the
   row count reads as a plain caption. */
.dataTables_wrapper .dataTables_info {
    background-color: transparent;
    color: var(--text-lighter-color);
    font-size: var(--font-size-sm);
    padding: 0 0 var(--spacing-2x);
}

/* Table sits in a bordered, rounded panel as on the live site */
.dataTables_wrapper .table-container,
.table-container {
    background-color: var(--color-white);
    border: var(--border-width-base) solid var(--border-color-base);
    border-radius: var(--border-radius-base);
}

.table-container > table { margin-bottom: 0; }

/* TLD reads as the row's identifier */
#tableDomainPricing tbody td:first-child {
    color: var(--text-heading-color);
    font-weight: var(--font-weight-bold);
}

/* The live site draws no rule under the page title. */
div.header-lined h1 { border-bottom: 0; padding-bottom: 0; }

/* ===================================================================
   Design-conformance pass — components stock six left unbranded.

   Found by rendering every page on the 9.0 staging install and reading
   the computed styles back, rather than by eye. Each block below fixes a
   measured deviation from the design system, not a suspected one.
   =================================================================== */

/* Bare .btn came out #0e5077 - a stock six colour that is in no token.
   It is what the nav's Logout and account buttons use. */
.btn:not(.btn-default):not(.btn-primary):not(.btn-secondary):not(.btn-success):not(.btn-info):not(.btn-warning):not(.btn-danger):not(.btn-link) {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
    color: var(--color-white);
}
.btn:not(.btn-default):not(.btn-primary):not(.btn-secondary):not(.btn-success):not(.btn-info):not(.btn-warning):not(.btn-danger):not(.btn-link):hover,
.btn:not(.btn-default):not(.btn-primary):not(.btn-secondary):not(.btn-success):not(.btn-info):not(.btn-warning):not(.btn-danger):not(.btn-link):focus {
    background-color: var(--brand-secondary);
    border-color: var(--brand-secondary);
    color: var(--color-white);
}

/* Bare .label came out #779500, likewise off-palette. */
.label:not(.label-default):not(.label-info):not(.label-success):not(.label-warning):not(.label-danger) {
    background-color: var(--brand-primary);
    border-radius: var(--border-radius-xs);
    font-weight: var(--font-weight-medium);
    letter-spacing: .01em;
    padding: .25em .6em;
}
.label-default  { background-color: var(--gray-lighter-2); }
.label-info     { background-color: var(--brand-info); }
.label-success  { background-color: var(--brand-success); }
.label-warning  { background-color: var(--brand-warning); }
.label-danger   { background-color: var(--brand-danger); }

/* Registration form: six positions the field icon absolutely inside the
   input. Our label reset knocked it out of that flow, so every icon was
   floating above its field. Restore the overlay and clear the runway. */
.form-group.prepend-icon { position: relative; }
.form-group.prepend-icon .field-icon {
    align-items: center;
    bottom: 0;
    color: var(--gray-icons);
    display: flex;
    justify-content: center;
    left: 0;
    margin: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 40px;
    z-index: 2;
}
.form-group.prepend-icon .form-control { padding-left: 40px; }
.form-group.prepend-icon .field-icon + .form-control:focus ~ .field-icon { color: var(--brand-primary); }

/* Section dividers on the registration and checkout forms. Six centres a
   blue caption over a full-width rule; the design system wants a plain
   left-aligned heading. */
.sub-heading {
    border-bottom: var(--border-width-base) solid var(--border-color-base);
    margin: var(--spacing-4x) 0 var(--spacing-3x);
    padding-bottom: var(--spacing-1x);
    text-align: left;
}
.sub-heading span {
    background: none;
    color: var(--text-heading-color);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    padding: 0;
}
#registration .text-center em,
#registration .sub-heading + .text-center {
    color: var(--text-lighter-color);
    font-size: var(--font-size-sm);
    font-style: normal;
}

/* Mailing-list opt-in rendered as a bare grey slab. Make it a panel. */
.marketing-email-optin {
    background-color: var(--color-white);
    border: var(--border-width-base) solid var(--border-color-base);
    border-radius: var(--border-radius-base);
    margin: var(--spacing-4x) 0;
    padding: var(--spacing-3x);
}
.marketing-email-optin h4 {
    font-size: var(--font-size-lg);
    margin-top: 0;
}
.marketing-email-optin p {
    color: var(--text-lighter-color);
    font-size: var(--font-size-sm);
}

/* The Yes/No switch ships in Bootstrap's green. */
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success {
    background-color: var(--brand-success);
    color: var(--color-white);
}
.bootstrap-switch { border-color: var(--border-color-base); border-radius: var(--border-radius-xs); }
.bootstrap-switch .bootstrap-switch-handle-on,
.bootstrap-switch .bootstrap-switch-handle-off,
.bootstrap-switch .bootstrap-switch-label { font-size: var(--font-size-sm); }

/* Modals: 13 templates use them, including the global footer, and none of
   it was themed. Bootstrap's default shadow is far harder than our tokens. */
.modal-content {
    border: 0;
    border-radius: var(--border-radius-base);
    box-shadow: var(--box-shadow-xlg);
}
.modal-header {
    border-bottom: var(--border-width-base) solid var(--border-color-base);
    padding: var(--spacing-3x);
}
.modal-title {
    color: var(--text-heading-color);
    font-size: var(--font-size-xlg);
    font-weight: var(--font-weight-medium);
}
.modal-header .close {
    color: var(--gray-icons);
    font-weight: var(--font-weight-normal);
    opacity: 1;
    text-shadow: none;
}
.modal-header .close:hover { color: var(--text-heading-color); }
.modal-body   { color: var(--text-body-color); padding: var(--spacing-3x); }
.modal-footer {
    border-top: var(--border-width-base) solid var(--border-color-base);
    padding: var(--spacing-3x);
}

/* iCheck radios on the payment-method pages still used six's blue sprite
   (#2489c5). Draw them instead, so they follow the palette and stay sharp. */
.iradio_square-blue,
.icheckbox_square-blue {
    background: var(--color-white) none;
    border: 2px solid var(--gray-lighter-2);
    height: 18px;
    transition: border-color var(--transition-base), background-color var(--transition-base);
    width: 18px;
}
.iradio_square-blue { border-radius: 50%; }
.icheckbox_square-blue { border-radius: var(--border-radius-xs); }
.iradio_square-blue.checked,
.icheckbox_square-blue.checked {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
    box-shadow: inset 0 0 0 3px var(--color-white);
}
.iradio_square-blue.hover,
.icheckbox_square-blue.hover { border-color: var(--brand-primary); }
.iradio_square-blue.disabled,
.icheckbox_square-blue.disabled { opacity: .5; }

/* Invoice and quote totals. */
.total-row {
    background-color: var(--gray-faded);
    border-top: var(--border-width-base) solid var(--border-color-base);
    color: var(--text-heading-color);
}

/* Inline validation messages on the payment forms. */
.field-error-msg {
    color: var(--brand-danger);
    display: block;
    font-size: var(--font-size-sm);
    margin-top: var(--spacing-half);
}

/* Domain-pricing category pills read as disabled grey chips. */
.tld-filters .label {
    cursor: pointer;
    display: inline-block;
    font-size: var(--font-size-sm);
    margin-right: var(--spacing-1x);
    padding: var(--spacing-1x) var(--spacing-2x);
}
.tld-filters .label-default {
    background-color: var(--color-white);
    border: var(--border-width-base) solid var(--border-color-base);
    color: var(--text-body-color);
}
.tld-filters .label-default:hover,
.tld-filters .label-default.active {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
    color: var(--color-white);
}

/* The DataTables search box rendered as a bare magnifier with no visible
   field. Give the input its own outline. */
.dataTables_filter input {
    background-color: var(--color-white);
    border: var(--border-width-base) solid var(--border-color-base);
    border-radius: var(--border-radius-xs);
    color: var(--text-body-color);
    margin-left: var(--spacing-1x);
    padding: var(--spacing-1x) var(--spacing-2x);
}
.dataTables_filter input:focus {
    border-color: var(--brand-primary);
    outline: 0;
}

/* row-eq-height is flex, so its children kept their own width below the
   md breakpoint and pushed 14px past the viewport on the dedicated-server
   store page at 375px. */
.row-eq-height { flex-wrap: wrap; }
.row-eq-height > [class*="col-"] { max-width: 100%; }
@media (max-width: 767px) {
    .row-eq-height { display: block; }
}

/* Six scopes the registration form's own styling under #registration, so
   class-level rules never reach it. These carry the same weight.
   Measured before/after: the field icons were sitting outside their inputs
   because nothing established a containing block for them, and the section
   captions were painting six's #058 teal. */
#registration .prepend-icon { position: relative; }
#registration .prepend-icon .field-icon {
    /* The class-level rule above centres with top:50% + translateY(-50%).
       Six's own #registration rule outranks it on `top` only, leaving the
       transform behind and lifting every icon 18px clear of its field.
       Clear the transform and centre with flex instead. */
    transform: none;
    align-items: center;
    color: var(--gray-icons);
    display: flex;
    height: 100%;
    justify-content: center;
    left: 0;
    margin: 0;
    top: 0;
}
#registration .field-icon i,
#registration .prepend-icon .field-icon i { color: var(--gray-icons); }
#registration .prepend-icon .form-control:focus + .field-icon i { color: var(--brand-primary); }

/* Match the section dividers used everywhere else in the theme. */
#registration .sub-heading {
    border-top: 0;
    border-bottom: var(--border-width-base) solid var(--border-color-base);
    height: auto;
    margin: var(--spacing-4x) 0 var(--spacing-3x);
    padding-bottom: var(--spacing-1x);
    text-align: left;
}
#registration .sub-heading span {
    background-color: transparent;
    color: var(--text-heading-color);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    padding: 0;
    top: 0;
}

/* .row-eq-height keeps Bootstrap's -15px gutters, but its parent on the
   store landing pages has no matching padding to absorb them, so the row
   ran 14px past a 375px viewport. Collapse the gutters once the columns
   have stacked. */
@media (max-width: 991px) {
    .row-eq-height { margin-left: 0; margin-right: 0; }
    .row-eq-height > [class*="col-"] { padding-left: 0; padding-right: 0; }
}

/* The DataTables search field had no visible outline of its own. */
.dataTables_wrapper .dataTables_filter input[type="search"],
.dataTables_wrapper .dataTables_filter input {
    border: var(--border-width-base) solid var(--border-color-base);
    border-radius: var(--border-radius-xs);
}