/* HOSTOWEB custom.css — preserved legacy styles + 2026 customer area refresh. */

@font-face {
    font-family: 'Quicksand';
    font-display: swap;
    font-style: normal;
    font-weight: 300;
    src: local('Quicksand Light'), local(Quicksand-Light), url(https://fonts.gstatic.com/s/quicksand/v9/6xKodSZaM9iE8KbpRA_pgHYYT8L_.woff2) format("woff2")
}

@font-face {
    font-family: 'Quicksand';
    font-display: swap;
    font-style: normal;
    font-weight: 400;
    src: local('Quicksand Regular'), local(Quicksand-Regular), url(https://fonts.gstatic.com/s/quicksand/v9/6xKtdSZaM9iE8KbpRA_hK1QN.woff2) format("woff2")
}

@font-face {
    font-family: 'Quicksand';
    font-style: normal;
    font-display: swap;
    font-weight: 500;
    src: local('Quicksand Medium'), local(Quicksand-Medium), url(https://fonts.gstatic.com/s/quicksand/v9/6xKodSZaM9iE8KbpRA_p2HcYT8L_.woff2) format("woff2")
}

@font-face {
    font-family: 'Quicksand';
    font-display: swap;
    font-style: normal;
    font-weight: 700;
    src: local('Quicksand Bold'), local(Quicksand-Bold), url(https://fonts.gstatic.com/s/quicksand/v9/6xKodSZaM9iE8KbpRA_pkHEYT8L_.woff2) format("woff2")
}

@font-face {
    font-family: 'Poppins';
    font-display: swap;
    font-style: normal;
    font-weight: 300;
    src: local('Poppins Light'), local(Poppins-Light), url(https://fonts.gstatic.com/s/poppins/v6/pxiByp8kv8JHgFVrLDz8Z1xlFQ.woff2) format("woff2")
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-display: swap;
    font-weight: 400;
    src: local('Poppins Regular'), local(Poppins-Regular), url(https://fonts.gstatic.com/s/poppins/v6/pxiEyp8kv8JHgFVrJJfecg.woff2) format("woff2")
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-display: swap;
    font-weight: 500;
    src: local('Poppins Medium'), local(Poppins-Medium), url(https://fonts.gstatic.com/s/poppins/v6/pxiByp8kv8JHgFVrLGT9Z1xlFQ.woff2) format("woff2")
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-display: swap;
    font-weight: 600;
    src: local('Poppins SemiBold'), local(Poppins-SemiBold), url(https://fonts.gstatic.com/s/poppins/v6/pxiByp8kv8JHgFVrLEj6Z1xlFQ.woff2) format("woff2")
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-display: swap;
    font-weight: 700;
    src: local('Poppins Bold'), local(Poppins-Bold), url(https://fonts.gstatic.com/s/poppins/v6/pxiByp8kv8JHgFVrLCz7Z1xlFQ.woff2) format("woff2")
}

body {
    font-size: 14px;
    font-family: 'Quicksand', sans-serif;
    font-weight: 500;
    line-height: 1.55;
    color: #253b58;
    -webkit-font-smoothing: antialiased;
}

.tiles .tile {
    background-color: #ffffff;
}

header.header .navbar-nav a {
    font-size: 13px;
    font-weight: 500;
}

.h1,
h1 {
    font-size: 1.5rem;
}

h5 {
    font-size: 1rem;
    color: #174561;
    font-weight: 600;
}

.form-control {
    font-size: .9rem;
}

.product-details h4 {
    font-size: 0.9rem;
    font-weight: 600;
    color: #174561;
}

.btn:not(:disabled):not(.disabled) {
    cursor: pointer;
}

.alert-info {
    font-size: .8rem;
}

.card {
    border-radius: 11px;
}

/* Removed legacy border on Bootstrap .no-gutters (it broke grid layouts). */

#order-standard_cart .order-summary {
    margin: 0 0 20px 0 !important;
    padding: 0 !important;
    background-color: #164461 !important;
    border-bottom: 3px solid #9fce30 !important;
    border-radius: 4px !important;
}

.card-body .card-title {
    margin: 0 0 16px 0;
    padding: 0 0 12px;
    font-size: 16px;
    text-transform: none;
    border-bottom: 1px solid #e7edf4;
    color: #183a5c;
    font-weight: 700;
}

.card-header .card-title {
    margin: 0;
    padding: 0;
    font-size: 14px;
    color: #183a5c;
    font-weight: 700;
}

.card-body {
    font-size: .9rem;
}

.client-home-cards .card {
    font-size: .8em;
}

.nav-tabs {
    font-size: 12px !important;
    font-weight: 600 !important;
}

.primary-content .card-body {
    font-size: .9rem;
    font-weight: 400;
}

.input-group>.input-group-append:last-child>.btn:not(:last-child):not(.dropdown-toggle),
.input-group>.input-group-append:last-child>.input-group-text:not(:last-child),
.input-group>.input-group-append:not(:last-child)>.btn,
.input-group>.input-group-append:not(:last-child)>.input-group-text,
.input-group>.input-group-prepend>.btn,
.input-group>.input-group-prepend>.input-group-text {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    font-size: .8rem;
}

.input-group>.input-group-append>.btn,
.input-group>.input-group-append>.input-group-text,
.input-group>.input-group-prepend:first-child>.btn:not(:first-child),
.input-group>.input-group-prepend:first-child>.input-group-text:not(:first-child),
.input-group>.input-group-prepend:not(:first-child)>.btn,
.input-group>.input-group-prepend:not(:first-child)>.input-group-text {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    font-size: .8rem;
}

.input-group>.custom-file,
.input-group>.custom-select,
.input-group>.form-control,
.input-group>.form-control-plaintext {
    position: relative;
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
    margin-bottom: 0;
    font-size: .8rem;
}

table.dataTable>thead>tr>td:not(.sorting_disabled),
table.dataTable>thead>tr>th:not(.sorting_disabled) {
    padding-right: 27px;
}

.primary-bg-color {
    background-color: #ffffff;
}

header.header {
    background-color: #fff;
    background-image: url("https://www.hostoweb.com/img/header/management.jpg");
    background-position: bottom;
}

header.header .topbar {
    background-color: #fff0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding: 5px;
}

header.header .logo-img {
    max-height: 70px;
    margin-top: 30px;
    margin-bottom: 30px;
}

header.header .main-navbar-wrapper .navbar-collapse {
    padding: .5rem 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 0.6rem;
    padding-bottom: 0.8rem;
    margin-top: 0.3rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

header.header .search {
    width: 325px;
    border: 0;
}

#nav>li>a {
    color: #fff;
}

.cs {
    color: #fff !important;
}

header.header .toolbar .nav-link .badge {
    background: #88d417;
    padding: 0px 6px;
    border-radius: 40px;
    font-size: 10px;
    font-weight: 600;
    color: #2a4958;
    position: absolute;
    line-height: 15px;
    top: 0;
    right: 0;
}

.master-breadcrumb {
    background-color: #e9ecef;
    border-top: 4px solid #9fce30;
    border-bottom: 1px solid #e1e1e1;
}

.master-breadcrumb .breadcrumb {
    margin: 0;
    padding: 9px 0;
    font-size: .7rem;
    text-transform: uppercase;
    font-weight: 600;
}

footer.footer {
    background: url(https://cache.hostoweb.com/images/bgfooter.png) top;
}

#footer p {
    padding-top: 12px;
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    color: #ffffff;
}

footer.footer {
    margin: 0;
    padding: 20px 0 20px;
    background-color: #404040;
    color: #eee;
    font-size: .9rem;
    border-top: 4px solid #9fce30;
}

header.header .toolbar .nav-link {
    border: 0;
}

.btn-group-lg>.btn,
.btn-lg {
    font-size: 1rem;
}

.sidebar .list-group {
    font-size: .8em;
}

#order-standard_cart .cart-sidebar .list-group-item {
    font-size: 0.8rem;
}

#order-standard_cart .panel-addon .panel-body {
    border-radius: 4px;
    padding-bottom: 10px;
}

#order-standard_cart .panel-addon {
    font-size: .8em;
    text-align: center;
    background-color: #fff;
    padding-top: 20px;
}

.input-group-lg>.custom-select,
.input-group-lg>.form-control,
.input-group-lg>.input-group-append>.btn,
.input-group-lg>.input-group-append>.input-group-text,
.input-group-lg>.input-group-prepend>.btn,
.input-group-lg>.input-group-prepend>.input-group-text {
    padding: .5rem 1rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .3rem;
    border-top-left-radius: 0.3rem;
    border-bottom-left-radius: 0.3rem;
}

.form-control::placeholder {
    color: #6c757d;
    opacity: 1;
    font-size: 12px;
}

/* Icon colors inherit from their parent. Legacy global .fa-*::before overrides
   were removed because they recolored buttons and action controls. */

.affiliate-stat {
    margin: 0;
    margin-bottom: 0px;
    padding: 15px;
    font-size: .8rem;
    text-align: center;
}

.cart-body .header-lined {
    font-size: 18px;
    border-bottom: 1px solid #9fce30;
    color: #184561;
    font-weight: 600;
    margin-bottom: 10px;
}

/* Legacy HOSTOWEB footer additions */
.footer-section-banner {
    padding: 70px 0;
    background: #00345e;
    color: #fff;
}

.centre-support-title {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.centre-support-text {
    color: #fff;
    font-size: 16px;
    font-weight: normal;
    line-height: 27px;
}

.centre-support-links {
    text-align: center;
}

.centre-support-links a {
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 500;
    padding: 12px 30px;
    font-size: 13px;
    border-radius: 10px;
    margin: 5px 5px;
    display: -webkit-inline-box;
}

.centre-support-links a.sign-btn {
    background: #88d417;
    color: #00345e;
    font-weight: 600;
}

.centre-support-links a.sign-btn:hover {
    background: #318814;
    color: #fff;
}

.centre-support-links a.log-btn {
    background: #fff;
    color: #2f950c;
    font-weight: 600;
}

.centre-support-links a.log-btn:hover {
    background: #e2e6e8;
    color: #24690e;
}

.footer-section {
    padding: 50px 0 30px;
    background: #04223e;
    color: #fff;
    border-top: 4px solid #9fce30;
}

.quiq-links-footer-title {
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    letter-spacing: 0.5px;
    font-size: 17px;
    margin-bottom: 20px;
}

.quiq-links-footer-ul li {
    list-style: none;
    position: relative;
    padding: 4px 0;
}

.quiq-links-footer-ul li:after {
    position: absolute;
    content: '';
    width: 4px;
    height: 4px;
    background: #49cc1d;
    left: -19px;
    top: 0;
    bottom: 0;
    margin: auto;
    border-radius: 1px;
}

.quiq-links-footer-ul li a {
    color: #fcfcfd;
    font-weight: 500;
    line-height: 25px;
    font-size: 14px;
    text-transform: capitalize;
    text-decoration: none;
}

.quiq-links-footer-ul li a:hover {
    color: #b3b7d4;
    text-decoration: none;
}

.secure-img-footer-area span {
    display: block;
    font-size: 12px;
    margin-top: 10px;
    color: #9eaeb5;
}

.footer-contact-method {
    margin-top: 25px;
}

.footer-contact-method a {
    background: #fff;
    padding: 8px 20px 12px;
    display: block;
    border-radius: 5px;
    position: relative;
    text-decoration: none !important;
    overflow: hidden;
    margin-top: 15px;
}

.footer-contact-method a span {
    font-weight: 600;
    letter-spacing: 0.5px;
    font-size: 13px;
    margin-bottom: 20px;
    color: #607D8B;
    text-transform: uppercase;
}

.footer-contact-method a b {
    font-weight: 600;
    letter-spacing: 0.5px;
    font-size: 14px;
    color: #006495;
    display: block;
}

@-moz-document url-prefix() {
    .footer-contact-method a span {
        font-weight: 500;
    }
    .footer-contact-method a b {
        font-weight: 500;
    }
}

.footer-contact-method a i {
    position: absolute;
    font-size: 50px;
    bottom: -5px;
    color: #33334f;
    right: -5px;
    opacity: 0.2;
}

.footer-area-under [class^="col-md-"] {
    padding-left: 0;
    padding-right: 10px;
}

.footer-area-under .footer-logo-blue {
    width: 160px;
}

.footer-social-icons {
    margin-top: 30px;
}

.footer-social-icons a {
    background: #22253e;
    width: 24px;
    height: 24px;
    display: inline-block;
    text-align: center;
    line-height: 24px;
    color: #fff;
    font-size: 12px;
    border-radius: 20px;
    margin-right: 8px;
    opacity: 0.8;
}

.footer-social-icons a:hover {
    opacity: 1;
}

.under-footer-ullist {
    margin-bottom: 0;
    margin-top: 15px
}

.under-footer-ullist li {
    list-style: none;
    padding: 2px 0;
}

.under-footer-ullist li a {
    color: #969cc1;
    font-weight: 500;
    line-height: 25px;
    font-size: 13px;
    text-decoration: none;
    text-transform: uppercase;
}

.under-footer-ullist li a:hover {
    color: #b4b8d6;
    text-decoration: none;
}

.final-footer-area-text {
    color: #eaecf6;
    font-size: 13px;
    line-height: 25px;
    padding-top: 15px;
}

.footer-lang-changer .menu-btn-changer {
    color: #969cc1;
    font-weight: 500;
    font-size: 13px;
    text-decoration: none;
    text-transform: capitalize;
    margin-left: 15px;
}

.footer-lang-changer .menu-btn-changer:hover {
    color: #b4b8d6;
    text-decoration: none;
}

.footer-lang-changer .menu-btn-changer i {
    font-size: 16px;
    margin-right: 5px;
}

.footer-lang-changer .menu-btn-changer img {
    width: 16px;
    margin-top: -3px;
    margin-right: 5px;
}

.lang-changer-drop-up {
    float: left;
    background-color: #335f82;
    border-radius: 10px;
    padding-bottom: 10px;
    padding-right: 10px;
    padding-top: 5px;
    color: white;
}

.dropupmenulagchanger.dropdown-menu {
    top: -15px !important;
}

.dropupmenulagchanger.dropdown-menu a {
    color: #6a709b;
    font-weight: 500;
    font-size: 13px;
    text-decoration: none;
    text-transform: capitalize;
}

.dropupmenulagchanger.dropdown-menu:after {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 7px 6px 0 6px;
    border-color: #ffffff transparent transparent transparent;
    position: absolute;
    left: 26px;
    bottom: -7px;
}

#order-standard_cart .view-cart-items .item-domain {
    font-size: 14px;
    color: #178230 !important;
    font-weight: 500;
}

#order-standard_cart .btn-checkout {
    padding: 15px 34px;
    font-weight: 600;
    font-size: 0.95rem;
}
.irs-from::after, .irs-to::after, .irs-single::after {

    position: absolute;
    display: block;
    content: "";
    bottom: -6px;
    left: 50%;
    width: 0;
    height: 0;
    margin-left: -3px;
    overflow: hidden;
    border: 3px solid transparent;
        border-top-color: transparent;
    border-top-color: #20b426;
    font-size: 1rem;

}
.irs-from, .irs-to, .irs-single {

    font-size: 13px !important;
    font-weight: bold !important;

}
.irs-grid-text {
    color: #369 !important;
    font-weight: bold !important;
    font-size: 0.65rem !important;
}
#btnCompleteProductConfig {
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 3px;
    padding: 15px;
}
#totalCartPrice {
    font-size: 17px;
  }
  #btnCompleteOrder {
    font-size: 0.9rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
  }
  #order-standard_cart .sub-heading {
    height: 0;
    border-top: 1px solid #a0baca;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 30px;
    font-weight: 500;
  }

/* ========================================================================
   HOSTOWEB / 2026 CLIENT AREA VISUAL SYSTEM
   Harmonizes native WHMCS pages with the custom Domains, Services and VPS UI.
   No DataTables JavaScript, columns or WHMCS actions are changed here.
   Theme-scoped widgets (#htw-domains, #htw-services, #htw-vps) keep their
   more specific component styles. In particular, NEVER hide .w-hidden globally:
   the main WHMCS table itself can carry that class before DataTables starts.
   ======================================================================== */
:root {
    --htw-ink: #203a5c;
    --htw-navy: #173c60;
    --htw-navy-deep: #102b49;
    --htw-primary: #2563c8;
    --htw-primary-hover: #1c50aa;
    --htw-primary-tint: #eef4ff;
    --htw-lime: #9fce30;
    --htw-green: #14875b;
    --htw-border: #e1e9f2;
    --htw-muted: #72849b;
    --htw-surface: #fff;
    --htw-subtle: #f6f9fc;
    --htw-radius: 10px;
    --htw-shadow: 0 4px 22px rgba(26, 54, 86, .045);
}

/* Base typography — preserve Quicksand and the existing branded header. */
.primary-content { min-width: 0; }
.primary-content p,
.primary-content li,
.primary-content .form-control,
.primary-content .custom-select { line-height: 1.55; }
.primary-content h1,
.primary-content h2,
.primary-content h3,
.primary-content h4,
.primary-content h5 { color: var(--htw-navy); font-weight: 700; }
.primary-content .header-lined h1,
.header-lined h1 { color: var(--htw-navy); font-size: 22px; font-weight: 700; }
.primary-content a:not(.btn):hover { text-decoration: none; }
:where(.primary-content, .sidebar) a:focus-visible,
:where(.primary-content, .sidebar) button:focus-visible,
:where(.primary-content, .sidebar) input:focus-visible,
:where(.primary-content, .sidebar) select:focus-visible {
    outline: 2px solid #4483df;
    outline-offset: 2px;
}

/* Cards and module panels. Keep CSS theme wrappers intact. */
.primary-content .card,
.client-home-cards .card,
.sidebar .card {
    border: 1px solid var(--htw-border);
    border-radius: var(--htw-radius);
    background: var(--htw-surface);
    box-shadow: var(--htw-shadow);
    overflow: visible;
}
.primary-content .card > .card-header,
.sidebar .card > .card-header {
    background: #f9fbfe;
    border-bottom: 1px solid var(--htw-border);
    border-radius: 10px 10px 0 0;
    color: var(--htw-navy);
    font-size: 13px;
    font-weight: 700;
    padding: 13px 18px;
}
.primary-content .card > .card-body { padding: 19px 10px; }
.primary-content .card > .card-footer {
    background: #fbfcfe;
    border-top: 1px solid var(--htw-border);
    border-radius: 0 0 10px 10px;
}

.recent-ticket .truncate {
    white-space: collapse !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

.primary-content .card-body .card-title {
    color: var(--htw-navy);
    border-bottom: 1px solid var(--htw-border);
    font-size: 15px;
    line-height: 1.4;
    padding-bottom: 11px;
    margin-bottom: 15px;
}
.primary-content .panel.panel-default {
    background: #fff;
    border: 1px solid var(--htw-border);
    border-radius: var(--htw-radius);
    box-shadow: var(--htw-shadow);
}
.primary-content .panel.panel-default > .panel-heading {
    border-bottom: 1px solid var(--htw-border);
    background: #f9fbfe;
    border-radius: 10px 10px 0 0;
    color: var(--htw-navy);
    font-weight: 700;
}

/* Buttons: smaller, consistent radii, but no forced sizing on icons/modals. */
.btn {
    border-radius: 7px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.45;
    padding: 8px 13px;
    transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
}
.btn-sm, .btn-group-sm > .btn { font-size: 11px; padding: 6px 10px; }
.btn-lg, .btn-group-lg > .btn { font-size: 14px; padding: 11px 19px; }
.btn-primary { background: var(--htw-primary); border-color: var(--htw-primary); color: #fff; }
.btn-primary:hover, .btn-primary:focus, .btn-primary:not(:disabled):not(.disabled):active {
    background: var(--htw-primary-hover); border-color: var(--htw-primary-hover); color:#fff;
}
.btn-default, .btn-secondary {
    background: #fff; border: 1px solid #d5e0eb; color: #425a77;
}
.btn-default:hover, .btn-secondary:hover { background: #f3f7fc; border-color: #b9cde5; color: #1e4f86; }
.btn-success { background: var(--htw-green); border-color: var(--htw-green); color: #fff; }
.btn-success:hover { background: #106d49; border-color: #106d49; color: #fff; }
.btn-info { background: #eaf3ff; border-color: #c9dff8; color: #2057a3; }
.btn-info:hover { background: #dbeaff; border-color: #a7c7ed; color: #164b91; }
.btn-outline-primary { border-color: #c1d4f0; color: var(--htw-primary); background: #fff; }
.btn-outline-primary:hover { border-color: var(--htw-primary); background: var(--htw-primary); color:#fff; }
.btn-danger { border-radius:7px; }
.btn:disabled, .btn.disabled { cursor: not-allowed; }
.btn-group > .btn:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.btn-group > .btn:not(:last-child):not(.dropdown-toggle) { border-top-right-radius: 0; border-bottom-right-radius: 0; }

/* Forms and select controls (no changes to field names or validation). */
.form-control, .custom-select, select.form-control {
    color: #2c4260;
    border: 1px solid #d8e3ee;
    border-radius: 7px;
    background-color: #fff;
    font-family: inherit;
    font-size: 13px;
    box-shadow: none;
}
.form-control:not(textarea), select.form-control, .custom-select { min-height: 36px; }
.form-control:focus, .custom-select:focus {
    border-color: #93b9e9;
    box-shadow: 0 0 0 3px rgba(37, 99, 200, .095);
}
.form-control::placeholder { color: #98a5b5; opacity: 1; font-size: 12px; }
.form-group label, .col-form-label { color: #526782; font-size: 12px; font-weight: 700; }
.form-text, .text-muted, small.text-muted { color: var(--htw-muted) !important; }
.input-group-text { color: #61738b; border-color: #d8e3ee; background: #f6f9fd; font-size: 12px; }
.custom-control-input:checked ~ .custom-control-label::before { background:var(--htw-primary); border-color:var(--htw-primary); }

/* Side navigation and tab navigation. */
.sidebar .list-group { font-size: 12px; }
.sidebar .list-group-item {
    color: #526781;
    background: #fff;
    border-color: #e9eff6;
    font-size: 12px;
    font-weight: 650;
    padding: 10px 13px;
}
.sidebar .list-group-item:hover { color: #174b86; background: #f6f9fe; }
.sidebar .list-group-item.active {
    color: #2059ad;
    background: #eef4ff;
    border-color: #cfe0f8;
    font-weight: 750;
}
.nav-tabs { border-bottom: 1px solid var(--htw-border); font-size: 12px !important; font-weight: 700 !important; gap: 2px; }
.nav-tabs .nav-link { color: #71839a; border-radius: 7px 7px 0 0; padding: 10px 13px; }
.nav-tabs .nav-link:hover { color: var(--htw-primary); background: #f8fbff; border-color: transparent; }
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
    color: #1e559b; background: #fff; border-color: var(--htw-border) var(--htw-border) #fff;
}
.master-breadcrumb { background: #f5f8fc; border-top: 3px solid var(--htw-lime); border-bottom: 1px solid var(--htw-border); }
.master-breadcrumb .breadcrumb { padding: 10px 0; font-size: 11px; font-weight: 700; }
.master-breadcrumb .breadcrumb a { color: #526d8d; }

.breadcrumb {background-color: #f5f8fc !important;}
    
.client-home-cards .card-header .btn {
  color: #284859;
  border: 0;
  background-color: #a3d21f;
  font-weight: 800;
}

/* Native WHMCS tables: tight, readable, and never clipped by a global rule. */
.primary-content .table-container { max-width: 100%; }
.primary-content table.table-list,
.primary-content table.table:not(.table-borderless) { color: #3b516d; font-size: 12px; }
.primary-content table.table-list thead th,
.primary-content table.table:not(.table-borderless) thead th {
    color: #687c97;
    font-size: 11px;
    font-weight: 700;
    background: #f7f9fc;
    border-bottom: 1px solid #dfe7f1;
    vertical-align: middle;
    padding: 12px 14px;
}
.primary-content table.table-list tbody td,
.primary-content table.table:not(.table-borderless) tbody td {
    padding: 12px 14px;
    border-top: 1px solid #edf1f6;
    vertical-align: middle;
}
.primary-content table.table-list tbody tr:hover,
.primary-content table.table-hover tbody tr:hover { background: #fafcff; }
.primary-content .table thead th.sorting,
.primary-content .table thead th.sorting_asc,
.primary-content .table thead th.sorting_desc { padding-right: 27px; }
/* Do not hide .w-hidden; WHMCS and DataTables use it on the table itself. */

/* DataTables controls without altering their DOM, initialization or sorting. */
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_info { color: #71849c; font-size: 12px; }
.dataTables_wrapper .dataTables_filter input {
    min-height: 35px; border: 1px solid #d7e2ed; border-radius: 7px;
    box-shadow: none; font-size: 12px; padding: 7px 11px;
}
.dataTables_wrapper .dataTables_filter input:focus { border-color: #97baea; box-shadow: 0 0 0 3px rgba(37,99,200,.08); }
.dataTables_wrapper .dataTables_length select { border: 1px solid #d7e2ed; border-radius: 7px; color: #3d526d; }
.pagination { gap: 4px; }
.pagination .page-item .page-link {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 33px; min-height: 33px; padding: 5px 9px;
    border: 1px solid #dce5f0; border-radius: 6px; background: #fff;
    color: #506782; font-weight: 650; font-size: 12px; box-shadow: none;
}
.pagination .page-item.active .page-link { background: var(--htw-primary); border-color: var(--htw-primary); color: #fff; }
.pagination .page-item:not(.disabled):not(.active) .page-link:hover { color: #2058b0; background: #f0f6ff; }
.pagination .page-item.disabled .page-link { background: #f7f9fc; color: #aab6c5; }
.dataTables_wrapper .dataTables_paginate .paginate_button:not(.page-item) {
    border: 1px solid #dce5f0; border-radius: 6px; color: #526b86;
    font-weight: 650; font-size: 12px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current:not(.page-item) { background: var(--htw-primary); color: #fff !important; border-color: var(--htw-primary); }

/* Service status, notices, and badges. */
.label.status, .badge { font-size: 11px; font-weight: 700; border-radius: 5px; }
.label.status { display: inline-block; padding: 5px 8px; line-height: 1.25; }
.alert { border-radius: 9px; font-size: 12px; line-height: 1.55; padding: 12px 15px; }
.alert-info { color:#245b96; border-color:#d0e2fa; background:#f2f7ff; }
.alert-success { color:#11633f; border-color:#bfe1ce; background:#eff9f2; }
.alert-warning { color:#885f20; border-color:#f0dfb8; background:#fffaf0; }
.alert-danger { color:#a53c3c; border-color:#f4cccc; background:#fff5f5; }

/* Modal dialogs: consistent spacing, not oversized. */
.modal-content { border-radius: 12px; border: 1px solid #e1e9f3; box-shadow: 0 24px 70px rgba(12,38,70,.16); }
.modal-header { border-bottom-color: var(--htw-border); padding: 16px 20px; }
.modal-header .modal-title { color: var(--htw-navy); font-size: 16px; font-weight: 700; }
.modal-body { padding: 20px; }
.modal-footer { border-top-color: var(--htw-border); padding: 12px 20px; }

/* Keep order-form specific styling owned by #order-standard_cart above. */
@media (max-width: 767px) {
    .primary-content .card > .card-body { padding: 15px; }
    .primary-content .card > .card-header { padding: 12px 15px; }
    .primary-content .header-lined h1 { font-size: 19px; }
    .primary-content table.table-list thead th,
    .primary-content table.table:not(.table-borderless) thead th,
    .primary-content table.table-list tbody td,
    .primary-content table.table:not(.table-borderless) tbody td { padding: 10px 11px; }
    .dataTables_wrapper .dataTables_filter input { max-width: 100%; }
    .pagination { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
    .btn, .sidebar .list-group-item { transition: none; }
}

/* ============================================================================
   HOSTOWEB 2026 — FOOTER WEBSITE MATCH (WHMCS)
   Ported specifically from htw-core.min.css in the supplied website bundle.
   Self-contained: do NOT load the full site CSS or the site JS inside WHMCS.
   Existing custom.css styles and page-specific WHMCS functionality stay intact.
   ============================================================================ */
.htw-footer,.htw-footer-payments {
    --htw-footer-navy: #01132b;
    --htw-footer-lime: #a2e326;
    --htw-footer-muted: #9cb0c0;
    font-family: Poppins,system-ui,sans-serif;
}

.htw-footer__container {
    width: min(1200px,calc(100% - 48px));
    margin: 0 auto;
}

.htw-footer-payments {
    background: #f4f7f8;
    border-top: 1px solid #e3eaeb;
    border-bottom: 1px solid #e1e9ec;
    position: relative;
    width: 100%;
}

.htw-footer-payments__inner {
    display: grid;
    grid-template-columns: minmax(300px,1fr) minmax(0,1.12fr);
    align-items: center;
    gap: 60px;
    padding: 36px 0 38px;
}

.htw-footer-payments__copy {
    display: flex;
    align-items: center;
    gap: 20px;
    min-width: 0;
}

.htw-footer-payments__icon {
    width: 58px;
    height: 58px;
    flex: none;
    display: grid;
    place-items: center;
    color: #4b7912;
    background: #e6f3d6;
    border: 1px solid #d4e9bd;
    border-radius: 15px;
    font-size: 23px;
}

.htw-footer-payments__copy>div,.htw-footer__links {
    min-width: 0;
}

.htw-footer__eyebrow {
    display: block;
    color: #587d25;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.9px;
    line-height: 1.4;
    margin-bottom: 7px;
}

.htw-footer-payments h2 {
    color: #123344;
    font-weight: 800;
    letter-spacing: -.65px;
    line-height: 1.35;
    margin: 0;
    font-size: 17px;
}

.htw-footer-payments p {
    font-size: 11px;
    color: #697f8a;
    line-height: 1.7;
    margin: 7px 0 0;
}

.htw-footer-payments__logos {
    display: grid;
    grid-template-columns: repeat(6,minmax(0,1fr));
    gap: 9px;
    min-width: 0;
}

.htw-footer-payments__method {
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e0e8ea;
    border-radius: 10px;
    height: 63px;
    padding: 10px;
    min-width: 0;
    box-shadow: 0 3px 14px rgba(0,27,43,.025);
}

.htw-footer-payments__method img {
    display: block;
    width: 100%;
    max-width: 97px;
    max-height: 34px;
    height: auto;
    object-fit: contain;
}

.htw-footer-payments__fallback {
    color: #667b86;
    letter-spacing: -.2px;
    white-space: nowrap;
    font-size: 11px;
    font-weight: 800;
    text-align: center;
}

.htw-footer {
    position: relative;
    width: 100%;
    background: #01132b;
    color: #fff;
    border-top: 0;
}

.htw-footer__top {
    display: grid;
    grid-template-columns: minmax(235px,1.27fr) repeat(4,minmax(0,1fr));
    gap: 42px;
    padding: 50px 0 30px;
}

.htw-footer__brand {
    min-width: 0;
    padding-right: 25px;
}

.htw-footer__brand-logo {
    display: inline-block;
    max-width: 180px;
}

.htw-footer__brand-logo img {
    display: block;
    max-width: 100%;
    width: 200px;
    height: auto;
    max-height: 70px;
    object-fit: contain;
    object-position: left center;
}

.htw-footer__brand-copy {
    font-size: 13px;
    line-height: 1.85;
    color: #a9bfcd;
    margin: 0 0 23px;
    font-weight: 400;
}

.htw-footer__brand-copy strong {
    color: #fff;
    font-weight: 500;
}

.htw-footer__brand-meta {
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 11px;
    letter-spacing: 1.3px;
    color: #96adbd;
    font-weight: 800;
    white-space: nowrap;
}

.htw-footer__brand-meta img {
    max-width: 180px;
}

.htw-footer__live-dot {
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #a2e326;
    box-shadow: 0 0 0 4px #a2e32620;
}

.htw-footer__meta-separator {
    color: #54738a;
}

.htw-footer__social {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 28px;
}

.htw-footer__social a {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid #284052;
    background: #0c263a;
    border-radius: 9px;
    color: #d3e2e8;
    font-size: 13px;
    transition: background .18s,color .18s,border-color .18s;
}

.htw-footer__social a:focus-visible,.htw-footer__social a:hover {
    background: #a2e326;
    border-color: #a2e326;
    color: #041929;
}

.htw-footer__links h2 {
    margin: 5px 0 23px;
    font-size: 11px;
    line-height: 1.5;
    font-weight: 800;
    letter-spacing: 1.05px;
    color: #edf8fa;
    text-transform: uppercase;
}

.htw-footer__links li,.htw-footer__links ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.htw-footer__links h2::after {
    display: block;
    content: "";
    height: 2px;
    width: 22px;
    margin-top: 15px;
    border-radius: 8px;
    background: #a2e326;
}

.htw-footer__links ul {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.htw-footer__links a {
    color: #a7bac8;
    font-size: 11.5px;
    line-height: 1.55;
    font-weight: 500;
    transition: color .16s,padding-left .16s;
    display: inline-block;
}

.htw-footer__links a:focus-visible,.htw-footer__links a:hover {
    color: #a2e326;
    padding-left: 3px;
}

.htw-footer__contact-strip {
    border-top: 1px solid #263a4c;
    border-bottom: 1px solid #263a4c;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    padding: 23px 0;
}

.htw-footer__contact-label {
    display: flex;
    align-items: center;
    gap: 15px;
    min-width: 0;
}

.htw-footer__contact-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 44px;
    height: 44px;
    border: 1px solid #42602b;
    border-radius: 12px;
    background: #a2e32616;
    color: #a2e326;
    font-size: 17px;
}

.htw-footer__contact-label strong {
    display: block;
    color: #eaf3f5;
    font-size: 12px;
    line-height: 1.5;
    font-weight: 750;
}

.htw-footer__contact-label small {
    display: block;
    font-size: 11px;
    color: #819caa;
    margin-top: 3px;
    line-height: 1.5;
}

.htw-footer__phone {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    color: #fff !important;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .1px;
    white-space: nowrap;
}

.htw-footer__phone img {
    width: 21px;
    height: 16px;
    object-fit: contain;
}

.htw-footer__phone i {
    margin-left: 10px;
    color: #a2e326;
    font-size: 11px;
    transition: transform .18s;
}

.htw-footer__phone:hover {
    color: #a2e326 !important;
}

.htw-footer__phone:hover i {
    transform: translateX(4px);
}

.htw-footer__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    min-height: 92px;
    padding: 21px 0;
}

.htw-footer__bottom-left {
    display: flex;
    align-items: center;
    gap: 26px;
    min-width: 0;
}

.htw-footer__hosted {
    width: 160px;
    max-width: 160px;
    height: auto;
    max-height: 49px;
    object-fit: contain;
}

.htw-footer__copyright {
    font-size: 11px;
    color: #bbcdd8;
    font-weight: 500;
    line-height: 1.7;
}

.htw-footer__language {
    position: relative;
    flex: none;
}

.htw-footer__language-trigger {
    font-size: 11px;
    display: flex;
    align-items: center;
    gap: 9px;
    color: #b3c6d2 !important;
    font-weight: 650;
    border: 1px solid #2b4659;
    border-radius: 9px;
    padding: 10px 13px;
    background: #0a253b;
    transition: color .16s,border-color .16s;
}

.htw-footer__language-trigger:hover {
    color: #fff !important;
    border-color: #58798a;
}

.htw-footer__language-trigger::after {
    margin-left: 9px;
}

.htw-footer__language-options {
    min-width: 155px;
    max-width: 220px;
    padding: 6px;
    background: #fff;
    border: 1px solid #edf2f3;
    border-radius: 10px;
    box-shadow: 0 12px 35px #00132933;
}

.htw-footer__language .htw-footer__language-options {
    display: none;
}

.htw-footer__language .htw-footer__language-options.show,.htw-footer__language.show .htw-footer__language-options {
    display: block;
}

.htw-footer__language-options a {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 10px;
    font-size: 11px;
    color: #173548 !important;
    border-radius: 7px;
    font-weight: 650;
}

.htw-footer__language-options a:hover {
    background: #f1f8e9;
    color: #4b7511 !important;
}

.htw-footer__language-options img {
    width: 17px;
    height: 17px;
    object-fit: contain;
}

.htw-footer a:focus-visible {
    outline: #a2e326 solid 2px;
    outline-offset: 3px;
}

@media (max-width:1100px) {
    .htw-footer__top {
        grid-template-columns: repeat(3,minmax(0,1fr));
        gap: 38px 30px;
        padding: 65px 0;
    }

    .htw-footer__brand {
        grid-column: 1/-1;
        padding: 0;
        max-width: 560px;
    }

    .htw-footer__brand-copy {
        margin: 17px 0;
    }

    .htw-footer__social {
        margin-top: 17px;
    }

    .htw-footer-payments__inner {
        gap: 25px;
        grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr);
    }

    .htw-footer-payments__logos {
        gap: 6px;
    }
}

@media (max-width:767px) {
    .htw-footer__container {
        width: min(100% - 36px,580px);
    }

    .htw-footer-payments__inner {
        grid-template-columns: 1fr;
        gap: 23px;
        padding: 35px 0;
    }

    .htw-footer-payments__copy {
        gap: 14px;
    }

    .htw-footer-payments__icon {
        width: 48px;
        height: 48px;
        font-size: 19px;
    }

    .htw-footer-payments h2 {
        font-size: 15px;
    }

    .htw-footer-payments__logos {
        grid-template-columns: repeat(3,minmax(0,1fr));
        gap: 8px;
    }

    .htw-footer-payments__method {
        height: 56px;
    }

    .htw-footer__top {
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 35px 23px;
        padding: 55px 0 42px;
    }

    .htw-footer__brand,.htw-footer__links:last-child {
        grid-column: 1/0;
    }

    .htw-footer__brand-logo img,.htw-footer__brand-meta img {
        width: 165px;
    }

    .htw-footer__brand-copy {
        font-size: 12px;
    }

    .htw-footer__links h2 {
        font-size: 10px;
        letter-spacing: .5px;
        margin-bottom: 20px;
    }

    .htw-footer__links a {
        font-size: 11px;
    }

    .htw-footer__contact-strip {
        align-items: flex-start;
        flex-direction: column;
        gap: 17px;
        padding: 21px 0;
    }

    .htw-footer__bottom {
        align-items: flex-start;
        flex-direction: column;
        gap: 19px;
        padding: 24px 0 30px;
    }

    .htw-footer__bottom-left {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .htw-footer__hosted {
        max-width: 105px;
    }
}

@media (max-width:370px) {
    .htw-footer__top {
        column-gap: 15px;
    }

    .htw-footer__links a {
        font-size: 10.5px;
    }

    .htw-footer-payments__logos {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}

@media (prefers-reduced-motion:reduce) {
    .htw-footer a {
        transition: none !important;
    }
}

/* Isolate the website footer's box-model and links from global WHMCS themes. */
.htw-footer, .htw-footer-payments,
.htw-footer *, .htw-footer *::before, .htw-footer *::after,
.htw-footer-payments *, .htw-footer-payments *::before, .htw-footer-payments *::after {
    box-sizing: border-box;
}
.htw-footer a, .htw-footer-payments a {
    text-decoration: none !important;
}
.htw-footer__links h2, .htw-footer-payments h2 {
    font-family: Poppins, system-ui, sans-serif;
}
/* WHMCS retains its own native modal for both language and currency. */
.htw-footer__currency {
    padding-left: 9px;
    margin-left: 1px;
    border-left: 1px solid #355269;
    font-size: 10px;
    font-weight: 750;
    color: #a2e326;
    letter-spacing: 0.25px;
}
.htw-footer__language-trigger:focus {
    text-decoration: none;
}
.htw-footer__brand-meta img {
    height: auto;
    display: block;
}

.htw-support-cta-section {
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    border: 0;
    background: #01142b;
    color: #fff;
    font-family: Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    overflow: hidden;
    margin-top: 50px !important;

}

.htw-support-cta {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr) minmax(270px, 355px);
    gap: 30px;
    align-items: center;
    width: min(1220px, calc(100% - 48px));
    min-height: 260px;
    margin: 0 auto;
    padding: 0
}

.htw-support-cta__person {
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0
}

.htw-support-cta__person img {
    display: block;
    width: 170px;
    max-width: 100%;
    height: auto;
    max-height: 215px;
    object-fit: contain;
    object-position: center center;
    margin: 0
}

.htw-support-cta__intro {
    min-width: 0;
    padding: 32px 0
}

.htw-support-cta__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    color: #c5e99c;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.4px;
    line-height: 1.5
}

.htw-support-cta__status {
    width: 7px;
    height: 7px;
    flex: none;
    border-radius: 50%;
    background: #a2e326;
    box-shadow: 0 0 0 5px rgba(162, 227, 38, .12)
}

.htw-support-cta__intro h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(27px, 2.6vw, 36px);
    line-height: 1.23;
    letter-spacing: -1px;
    font-weight: 800
}

.htw-support-cta__intro h2 em {
    color: #a2e326;
    font-style: normal
}

.htw-support-cta__intro p {
    max-width: 550px;
    margin: 14px 0 0;
    color: #e3ebf0;
    font-size: 14px;
    line-height: 1.85
}

.htw-support-cta__intro p strong {
    color: #fff;
    font-weight: 700
}

.htw-support-cta__channels {
    display: grid;
    gap: 10px;
    width: 100%;
    max-width: 355px;
    justify-self: end;
    padding: 20px 0;
    min-width: 0
}

.htw-support-cta__channel {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    min-width: 0;
    min-height: 69px;
    padding: 12px 13px;
    border: 1px solid rgba(255, 255, 255, .23);
    border-radius: 11px;
    background: rgba(255, 255, 255, .055);
    color: #fff;
    text-decoration: none !important;
    transition: border-color .2s, background .2s
}

.htw-support-cta__channel:focus-visible,
.htw-support-cta__channel:hover {
    color: #fff;
    border-color: #a2e326;
    background: rgba(162, 227, 38, .12);
    text-decoration: none
}

.htw-support-cta__channel:focus-visible {
    outline: #a2e326 solid 2px;
    outline-offset: 3px
}

.htw-support-cta__icon {
    display: grid;
    place-items: center;
    flex: 0 0 37px;
    width: 37px;
    height: 37px;
    border-radius: 10px;
    background: rgba(162, 227, 38, .14);
    color: #a2e326;
    font-size: 17px
}

.htw-support-cta__channel-text {
    display: block;
    flex: 1 1 auto;
    min-width: 0
}

.htw-support-cta__channel-label {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 3px 10px;
    margin: 0 0 6px;
    color: #bfced5;
    font-size: 11px;
    line-height: 1.4;
    font-weight: 800
}

.htw-support-cta__channel-label small {
    color: #a2e326;
    font-size: 9px;
    font-weight: 750;
    letter-spacing: 0
}

.htw-support-cta__channel-text strong {
    display: block;
    color: #fff;
    font-size: clamp(13px, 1.3vw, 17px);
    line-height: 1.35;
    font-weight: 800;
    overflow-wrap: anywhere
}

.htw-support-cta__arrow {
    color: #a2e326;
    flex: none;
    font-size: 19px;
    line-height: 1
}

@media (max-width:1050px) {
    .htw-support-cta {
        grid-template-columns: 145px minmax(0, 1fr) minmax(250px, 320px);
        gap: 22px
    }

    .htw-support-cta__person img {
        width: 145px
    }

    .htw-support-cta__channels {
        max-width: 320px
    }

    .htw-support-cta__intro h2 {
        font-size: 28px
    }
}

@media (max-width:800px) {
    .htw-support-cta {
        grid-template-columns: 116px minmax(0, 1fr);
        grid-template-areas: "person intro" "person channels";
        gap: 0 22px;
        width: calc(100% - 36px);
        min-height: 0
    }

    .htw-support-cta__person {
        grid-area: person
    }

    .htw-support-cta__person img {
        width: 116px;
        max-height: 345px
    }

    .htw-support-cta__intro {
        grid-area: intro;
        padding: 28px 0 8px
    }

    .htw-support-cta__channels {
        grid-area: channels;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        max-width: none;
        width: 100%;
        justify-self: stretch;
        padding: 12px 0 25px
    }

    .htw-support-cta__channel {
        padding: 12px;
        min-height: 94px;
        gap: 9px
    }

    .htw-support-cta__arrow {
        display: none
    }

    .htw-support-cta__icon {
        flex-basis: 34px;
        width: 34px;
        height: 34px;
        font-size: 14px
    }
}

@media (max-width:767.98px) {
    .htw-support-cta {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "intro" "channels";
        width: calc(100% - 36px);
        min-height: 0;
        gap: 0
    }

    .htw-support-cta__person {
        display: none !important
    }

    .htw-support-cta__intro {
        padding: 30px 0 5px
    }

    .htw-support-cta__channels {
        width: 100%;
        max-width: none;
        justify-self: stretch;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 15px 0 28px
    }

    .htw-support-cta__channel {
        min-height: 72px
    }
}

@media (max-width:600px) {
    .htw-support-cta {
        width: calc(100% - 28px)
    }

    .htw-support-cta__intro h2 {
        font-size: clamp(23px, 6vw, 29px)
    }

    .htw-support-cta__intro p {
        font-size: 11px;
        line-height: 1.75
    }

    .htw-support-cta__eyebrow {
        font-size: 9px;
        letter-spacing: .7px
    }

    .htw-support-cta__channels {
        grid-template-columns: 1fr;
        padding: 13px 0 22px
    }

    .htw-support-cta__channel {
        min-height: 67px;
        padding: 10px
    }

    .htw-support-cta__channel-label {
        margin-bottom: 4px
    }

    .htw-support-cta__channel-text strong {
        font-size: 13px
    }
}