/* ==========================================================================
   VONSUNG.IO — child theme of Twenty-One
   Brand: blue #1464aa (primary) · tint #d2ebfa · green #96c846 (sparingly)
   Font: Titillium Web · 4px corners · no gradients · icons, no emoji
   Sections: 1 tokens · 2 base · 3 header/footer · 4 components · 5 client area
             6 order form · 7 homepage · 8 Bootstrap 3 shim for older modules
             9 scrollbars
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
    --vs-blue: #1464aa;
    --vs-blue-dark: #0b3a66;
    --vs-blue-deep: #082a4a;
    --vs-blue-mid: #0f5592;
    --vs-tint: #d2ebfa;
    --vs-pale: #eef6fc;
    --vs-line: #c9dceb;
    --vs-text: #13243a;
    --vs-muted: #4b5d70;
    --vs-green: #96c846;
    --vs-radius: 4px;
    --primary: #1464aa;
}

/* 2. Base ------------------------------------------------------------------ */
body,
.primary-bg-color {
    font-family: 'Titillium Web', system-ui, -apple-system, 'Segoe UI', sans-serif;
    color: var(--vs-text);
    background-color: var(--vs-pale);
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: inherit; color: var(--vs-blue-dark); font-weight: 700; }
a { color: var(--vs-blue); }
a:hover, a:focus { color: var(--vs-blue-dark); }
.text-primary { color: var(--vs-blue) !important; }
.bg-primary { background-color: var(--vs-blue) !important; }
.text-muted { color: var(--vs-muted) !important; }
*:focus-visible { outline: 2px solid var(--vs-blue-dark); outline-offset: 2px; }

/* No gradients anywhere (striped progress bars, legacy order form badges) */
.progress-bar-striped, .bg-striped { background-image: none !important; }

/* 3. Header / footer --------------------------------------------------------- */
header.header { background: #fff; border-bottom: 1px solid var(--vs-line); }
header.header .topbar,
header.header .vs-contactbar {
    background-color: var(--vs-blue-deep);
    color: var(--vs-tint);
    padding: 6px 0;
    font-size: 14px;
}
header.header .vs-contactbar a,
header.header .topbar .btn,
header.header .topbar .active-client .btn,
header.header .topbar .active-client .input-group-text { color: var(--vs-tint); }
header.header .vs-contactbar a:hover { color: #fff; text-decoration: none; }
header.header .navbar a { color: var(--vs-text); }
header.header .navbar-nav a { font-size: 16px; font-weight: 600; }
header.header .main-navbar-wrapper { border-top: 1px solid var(--vs-pale); }
header.header .main-navbar-wrapper .navbar-nav > li > a:hover,
header.header .main-navbar-wrapper .navbar-nav > li.active > a { color: var(--vs-blue); }
header.header .toolbar .nav-link { border-color: var(--vs-line); color: var(--vs-blue); border-radius: var(--vs-radius); }
header.header .toolbar .nav-link:hover { color: var(--vs-blue-dark); background: var(--vs-pale); }
header.header .toolbar .nav-link .badge { background: var(--vs-blue); color: #fff; opacity: 1; }
header.header .search { border-color: var(--vs-line); border-radius: var(--vs-radius); }
header.header .search:focus-within { border-color: var(--vs-blue); }
header.header .dropdown-item.active, header.header .dropdown-item:active { background-color: var(--vs-tint); color: var(--vs-blue-dark); }
header.header .vs-btn-clientarea { color: #fff !important; font-weight: 600; padding: .5rem 1rem; }
.vs-wordmark { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 24px; letter-spacing: .5px; color: var(--vs-blue-dark); }
.vs-wordmark .vs-mark { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; background: var(--vs-blue); color: #fff; border-radius: var(--vs-radius); font-size: 22px; }
.vs-wordmark .vs-accent { color: var(--vs-blue); }


footer.footer { background-color: var(--vs-blue-deep); color: var(--vs-tint); padding: 56px 0 40px; font-size: 15px; }
footer.footer a, footer.footer .nav-link { color: var(--vs-tint); }
footer.footer a:hover { color: #fff; }
footer.footer h3 { color: #fff; font-size: 15px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 14px; }
footer.footer .vs-footer-brand { color: #fff; font-weight: 700; font-size: 22px; margin-bottom: 8px; }
footer.footer .vs-footer-cols li { margin-bottom: 8px; }
footer.footer .vs-footer-cols { border-bottom: 1px solid var(--vs-blue-mid); margin-bottom: 24px; padding-bottom: 8px; }
footer.footer .btn { background-color: var(--vs-blue-mid); border-radius: var(--vs-radius); }
footer.footer .copyright { color: var(--vs-tint); }

/* 4. Components ---------------------------------------------------------------- */
.btn, .form-control, .custom-select, .input-group-text, .card, .alert, .dropdown-menu,
.modal-content, .list-group, .badge, .label, .popover, .pagination .page-link, .nav-tabs .nav-link,
.tiles, .tile, .table-container { border-radius: var(--vs-radius); }
.input-group > .form-control:not(:last-child), .input-group > .input-group-prepend > .btn { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group > .input-group-append > .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; }

.btn { font-weight: 600; }
.btn-primary { background-color: var(--vs-blue); border-color: var(--vs-blue); color: #fff; }
.btn-primary:hover, .btn-primary:focus { background-color: var(--vs-blue-dark); border-color: var(--vs-blue-dark); color: #fff; }
.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active { background-color: var(--vs-blue-deep); border-color: var(--vs-blue-deep); }
.btn-outline-primary { color: var(--vs-blue); border-color: var(--vs-blue); border-width: 2px; }
.btn-outline-primary:hover { background-color: var(--vs-blue); border-color: var(--vs-blue); color: #fff; }
.btn-default { background: #fff; border: 1px solid var(--vs-line); color: var(--vs-text); }
.btn-default:hover { background: var(--vs-pale); border-color: var(--vs-blue); color: var(--vs-blue-dark); }
.btn-info { background-color: var(--vs-blue-mid); border-color: var(--vs-blue-mid); }
/* Green only for success/confirmation actions */
.btn-success { background-color: var(--vs-green); border-color: var(--vs-green); color: var(--vs-blue-deep); }
.btn-success:hover { background-color: #84b336; border-color: #84b336; color: var(--vs-blue-deep); }
.badge-info, .label-info { background-color: var(--vs-blue); }
.badge-success, .label-success, .label-active { background-color: var(--vs-green); color: var(--vs-blue-deep); }

.form-control:focus, .custom-select:focus { border-color: var(--vs-blue); box-shadow: 0 0 0 .2rem rgba(20, 100, 170, .2); }
.custom-control-input:checked ~ .custom-control-label::before { background-color: var(--vs-blue); border-color: var(--vs-blue); }
.page-item.active .page-link { background-color: var(--vs-blue); border-color: var(--vs-blue); }
.page-link { color: var(--vs-blue); }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { background-color: var(--vs-blue); }
.nav-tabs .nav-link.active { color: var(--vs-blue-dark); border-top: 2px solid var(--vs-blue); }
.alert-info { background: var(--vs-tint); border-color: var(--vs-line); color: var(--vs-blue-dark); }
.progress-bar { background-color: var(--vs-blue); }

.card { border-color: var(--vs-line); }
.card-header { background: #fff; border-bottom-color: var(--vs-line); }
.card-title { color: var(--vs-blue-dark); }

/* Sidebar */
.card-sidebar .card-header { background: var(--vs-blue-dark); color: #fff; border-radius: var(--vs-radius) var(--vs-radius) 0 0; }
.card-sidebar .card-header .card-title { color: #fff; font-size: 17px; }
.card-sidebar .list-group-item.active,
.card-sidebar .list-group-item.active:hover { background-color: var(--vs-tint); border-color: var(--vs-line); color: var(--vs-blue-dark); box-shadow: inset 4px 0 0 var(--vs-blue); }
.card-sidebar .list-group-item.active .badge { background: var(--vs-blue); color: #fff; }

/* 5. Client area ------------------------------------------------------------- */
.tiles .tile { background: #fff; border: 1px solid var(--vs-line); margin: 0 -1px -1px 0; }
.tiles .tile .stat { color: var(--vs-text); font-weight: 700; }
.tiles .tile .title { color: var(--vs-muted); }
.tiles .tile i { color: var(--vs-tint); }
.tiles .tile:hover i { color: var(--vs-blue); }
.tiles .tile .highlight { background-color: var(--vs-blue) !important; }
.client-home-cards .card-header, .client-home-panels .card-header { background: #fff; }
.client-home-cards .card-header .card-title, .client-home-panels .card-header .card-title { color: var(--vs-blue-dark); }

.label-status, .status { border-radius: var(--vs-radius); }
.status-active, .label.active { background-color: var(--vs-green); color: var(--vs-blue-deep); }

/* Support tickets */
.ticket-reply { border-color: var(--vs-line); }
.ticket-reply.staff { border-left: 4px solid var(--vs-blue); }
.ticket-reply.staff .posted-by { background: var(--vs-pale); }
.requestor-badge { border-radius: var(--vs-radius); }
.vs-escalation .vs-esc-item { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; }
.vs-escalation .vs-esc-item i { color: var(--vs-blue); margin-top: 4px; }
.vs-escalation .vs-esc-current { margin-top: 8px; padding: 10px; background: var(--vs-tint); color: var(--vs-blue-dark); border-radius: var(--vs-radius); }

/* 6. Order form (standard_cart) ---------------------------------------------- */
#order-standard_cart .products .product { border-color: var(--vs-line); border-radius: var(--vs-radius); }
#order-standard_cart .products .product header { background: var(--vs-pale); }
#order-standard_cart .products .product header span { color: var(--vs-blue-dark); font-weight: 700; }
#order-standard_cart .order-summary { background-color: var(--vs-blue-dark); border-bottom-color: var(--vs-blue-dark); border-radius: var(--vs-radius); }
#order-standard_cart .summary-container { background-color: #fff; }
#order-standard_cart .order-summary .total-due-today .amt { color: var(--vs-blue-dark); }
#order-standard_cart .panel-addon-selected .panel-add { background-color: var(--vs-blue); }
#order-standard_cart .btn-checkout { background-color: var(--vs-blue); border-color: var(--vs-blue); }
.domain-checker-container { background: var(--vs-blue) !important; border-radius: var(--vs-radius); }
.domain-checker-bg { background-image: none !important; }
.domain-checker-container .input-group-box { border-radius: var(--vs-radius); }
#order-standard_cart .domain-checker-result-headline .domain-available { color: var(--vs-blue-dark); }
#order-standard_cart .spotlight-tlds .spotlight-tld .spotlight-tld-hot,
#order-standard_cart .spotlight-tlds .spotlight-tld .spotlight-tld-new,
#order-standard_cart .spotlight-tlds .spotlight-tld .spotlight-tld-sale { background: var(--vs-blue) !important; border-radius: var(--vs-radius); }

/* 7. Homepage ------------------------------------------------------------------- */
.vs-home-body { padding: 0 !important; background: #fff; }
.vs-home-body .vs-home-row { display: block; margin: 0; }
.vs-home-body .primary-content { padding: 0; max-width: 100%; flex: none; width: 100%; }
.vs-section { padding: 80px 0; background: #fff; }
.vs-eyebrow { margin: 0 0 12px; font-size: 15px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--vs-tint); }
.vs-eyebrow-blue { color: var(--vs-blue); }
.vs-h2 { font-size: 38px; line-height: 1.15; margin: 0 0 40px; }
.vs-grid { display: grid; gap: 24px; }
.vs-grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.vs-cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
.vs-btn-light { background: #fff; color: var(--vs-blue-dark) !important; border: 2px solid #fff; }
.vs-btn-light:hover { background: var(--vs-tint); border-color: var(--vs-tint); }
.vs-btn-outline-light { background: transparent; color: #fff !important; border: 2px solid #fff; }
.vs-btn-outline-light:hover { background: rgba(255, 255, 255, .12); }

.vs-hero { background: var(--vs-blue); color: #fff; padding: 80px 0; }
.vs-hero-inner { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; }
.vs-hero-copy { flex: 999 1 520px; min-width: 0; }
.vs-hero h1 { color: #fff; font-size: 50px; line-height: 1.1; margin: 0 0 16px; }
.vs-lead { font-size: 19px; color: var(--vs-tint); max-width: 620px; margin: 0 0 32px; }
.vs-hero-points { list-style: none; padding: 0; margin: 32px 0 0; display: flex; flex-wrap: wrap; gap: 8px 28px; color: var(--vs-tint); }
.vs-hero-points i { margin-right: 6px; }
.vs-hero-art { flex: 1 1 280px; max-width: 380px; height: 320px; position: relative; }
.vs-sq { position: absolute; display: block; }
.vs-sq-1 { left: 0; top: 0; width: 52%; height: 46%; background: var(--vs-tint); }
.vs-sq-2 { left: 14%; top: 22%; width: 72%; height: 58%; background: var(--vs-blue-dark); }
.vs-sq-3 { right: 0; bottom: 0; width: 44%; height: 38%; background: var(--vs-green); }

.vs-card { border: 1px solid var(--vs-line); border-radius: var(--vs-radius); padding: 28px; display: flex; flex-direction: column; gap: 12px; background: #fff; }
.vs-card h3 { font-size: 22px; margin: 0; }
.vs-card p { margin: 0; color: var(--vs-muted); font-size: 16px; line-height: 1.5; }
.vs-icon { width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center; background: var(--vs-tint); color: var(--vs-blue); font-size: 24px; border-radius: var(--vs-radius); }
.vs-icon-solid { background: var(--vs-blue); color: #fff; }
.vs-icon-outline { flex: none; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--vs-tint); color: var(--vs-tint); font-size: 22px; border-radius: var(--vs-radius); }

.vs-domain-band { background: var(--vs-tint); padding: 56px 0; }
.vs-domain-inner { display: flex; flex-wrap: wrap; gap: 24px 48px; align-items: center; }
.vs-domain-copy { flex: 1 1 300px; }
.vs-domain-copy h2 { font-size: 32px; margin: 0 0 8px; }
.vs-domain-copy p { margin: 0; font-size: 17px; }
.vs-domain-form { flex: 2 1 460px; min-width: 0; }
.vs-domain-form .form-control { height: 56px; font-size: 18px; border-color: #fff; }
.vs-domain-form .btn { height: 56px; padding: 0 28px; font-size: 17px; }
.vs-domain-form .vs-btn-transfer { border-color: #fff; }
.vs-tld-list { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 8px; font-size: 15px; }
.vs-tld-list li { background: #fff; padding: 6px 12px; border-radius: var(--vs-radius); color: var(--vs-blue-dark); }

.vs-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); border: 1px solid var(--vs-line); border-radius: var(--vs-radius); overflow: hidden; }
.vs-plan { padding: 32px; display: flex; flex-direction: column; gap: 16px; border-right: 1px solid var(--vs-line); background: #fff; }
.vs-plan:last-child { border-right: 0; }
.vs-plan-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.vs-plan h3 { font-size: 22px; margin: 0; }
.vs-plan-price { font-size: 38px; font-weight: 700; margin: 0; color: var(--vs-text); }
.vs-plan-price span { font-size: 16px; font-weight: 400; color: var(--vs-muted); }
.vs-plan ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.vs-plan ul i { color: var(--vs-blue); margin-right: 6px; }
.vs-plan-featured { background: var(--vs-blue-dark); color: #fff; }
.vs-plan-featured h3, .vs-plan-featured .vs-plan-price { color: #fff; }
.vs-plan-featured .vs-plan-price span, .vs-plan-featured ul i { color: var(--vs-tint); }
.vs-tag { background: var(--vs-green); color: var(--vs-blue-deep); font-size: 13px; font-weight: 700; padding: 4px 10px; text-transform: uppercase; letter-spacing: 1px; border-radius: var(--vs-radius); }

.vs-benefits { background: var(--vs-blue-dark); color: #fff; padding: 64px 0; }
.vs-benefit { display: flex; gap: 16px; }
.vs-benefit h3 { color: #fff; font-size: 20px; margin: 0 0 6px; }
.vs-benefit p { color: var(--vs-tint); margin: 0; }

.vs-split { display: flex; flex-wrap: wrap; gap: 48px; }
.vs-split-main { flex: 999 1 520px; min-width: 0; }
.vs-news { display: flex; gap: 24px; padding: 24px 0; border-top: 1px solid var(--vs-line); }
.vs-news:last-child { border-bottom: 1px solid var(--vs-line); }
.vs-news-date { flex: none; width: 72px; height: 72px; background: var(--vs-tint); color: var(--vs-blue-dark); display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; text-transform: uppercase; line-height: 1.1; border-radius: var(--vs-radius); }
.vs-news-date i { font-size: 26px; }
.vs-news h3 { font-size: 20px; margin: 0 0 6px; }
.vs-news h3 a { color: var(--vs-text); }
.vs-news p { margin: 0; color: var(--vs-muted); }
.vs-help-box { flex: 1 1 300px; background: var(--vs-tint); padding: 36px; display: flex; flex-direction: column; gap: 14px; border-radius: var(--vs-radius); align-self: flex-start; }
.vs-help-box h2 { font-size: 26px; margin: 0; }
.vs-help-box p { margin: 0; }
.vs-help-box .btn { margin: 0; }

.vs-cta-band { background: var(--vs-blue); color: #fff; padding: 56px 0; }
.vs-cta-band h2 { color: #fff; font-size: 32px; margin: 0 0 6px; }
.vs-cta-band p { color: var(--vs-tint); margin: 0; font-size: 17px; }

@media (max-width: 575.98px) {
    header.header .navbar > .container { flex-wrap: nowrap; }
    header.header .navbar-brand { min-width: 0; }
    header.header .logo-img { max-width: 170px; }
    .vs-wordmark { font-size: 19px; gap: 8px; }
    .vs-wordmark .vs-mark { width: 32px; height: 32px; font-size: 18px; }
}
@media (max-width: 767.98px) {
    .vs-hero { padding: 56px 0; }
    .vs-hero h1 { font-size: 36px; }
    .vs-hero-art { display: none; }
    .vs-section { padding: 56px 0; }
    .vs-h2 { font-size: 30px; margin-bottom: 28px; }
    .vs-plan { border-right: 0; border-bottom: 1px solid var(--vs-line); }
    .vs-domain-form .input-group { flex-wrap: nowrap; }
    .vs-domain-form .btn { padding: 0 16px; }
}

/* 8. Bootstrap 3 shim — keeps older addons/registrars/gateways that output
      BS3 markup (panels, col-xs, input-group-btn, labels) looking right ------- */
.panel { margin-bottom: 20px; background: #fff; border: 1px solid var(--vs-line); border-radius: var(--vs-radius); }
.panel-heading { padding: 10px 15px; border-bottom: 1px solid var(--vs-line); border-radius: var(--vs-radius) var(--vs-radius) 0 0; }
.panel-title { margin: 0; font-size: 17px; }
.panel-body { padding: 15px; }
.panel-footer { padding: 10px 15px; background: var(--vs-pale); border-top: 1px solid var(--vs-line); border-radius: 0 0 var(--vs-radius) var(--vs-radius); }
.panel-default > .panel-heading { background: var(--vs-pale); color: var(--vs-text); }
.panel-primary { border-color: var(--vs-blue); }
.panel-primary > .panel-heading { background: var(--vs-blue); color: #fff; }
.panel-info > .panel-heading { background: var(--vs-tint); color: var(--vs-blue-dark); }
.panel-success > .panel-heading { background: #eef6e0; color: #3d5a12; }
.panel-warning > .panel-heading { background: #fff4d6; color: #6b4d00; }
.panel-danger > .panel-heading { background: #fbe3e3; color: #8a1f1f; }
.well { min-height: 20px; padding: 19px; margin-bottom: 20px; background: var(--vs-pale); border: 1px solid var(--vs-line); border-radius: var(--vs-radius); }
.input-group-btn { display: flex; }
.input-group-btn > .btn { border-radius: 0; }
.input-group-btn:last-child > .btn { border-top-right-radius: var(--vs-radius); border-bottom-right-radius: var(--vs-radius); }
.input-lg { height: calc(1.5em + 1rem + 2px); padding: .5rem 1rem; font-size: 1.25rem; }
.input-sm { height: calc(1.5em + .5rem + 2px); padding: .25rem .5rem; font-size: .875rem; }
.help-block { display: block; margin-top: 5px; color: var(--vs-muted); font-size: 14px; }
.form-horizontal .form-group { display: flex; flex-wrap: wrap; margin-left: -15px; margin-right: -15px; }
.pull-right { float: right !important; }
.pull-left { float: left !important; }
.center-block { display: block; margin-left: auto; margin-right: auto; }
.img-responsive { display: block; max-width: 100%; height: auto; }
.hidden { display: none !important; }
@media (max-width: 767.98px) { .hidden-xs { display: none !important; } }
@media (min-width: 768px) and (max-width: 991.98px) { .hidden-sm { display: none !important; } }
@media (min-width: 992px) and (max-width: 1199.98px) { .hidden-md { display: none !important; } }
@media (min-width: 1200px) { .hidden-lg { display: none !important; } }
.label-primary { background: var(--vs-blue); color: #fff; }
.glyphicon { display: none; }
/* col-xs-* (BS4 uses .col-*) and BS3 offsets */
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 { position: relative; width: 100%; padding-right: 15px; padding-left: 15px; }
.col-xs-1 { flex: 0 0 8.333333%; max-width: 8.333333%; } .col-xs-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
.col-xs-3 { flex: 0 0 25%; max-width: 25%; } .col-xs-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
.col-xs-5 { flex: 0 0 41.666667%; max-width: 41.666667%; } .col-xs-6 { flex: 0 0 50%; max-width: 50%; }
.col-xs-7 { flex: 0 0 58.333333%; max-width: 58.333333%; } .col-xs-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
.col-xs-9 { flex: 0 0 75%; max-width: 75%; } .col-xs-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
.col-xs-11 { flex: 0 0 91.666667%; max-width: 91.666667%; } .col-xs-12 { flex: 0 0 100%; max-width: 100%; }
@media (min-width: 768px) {
    .col-sm-offset-1 { margin-left: 8.333333%; } .col-sm-offset-2 { margin-left: 16.666667%; } .col-sm-offset-3 { margin-left: 25%; } .col-sm-offset-4 { margin-left: 33.333333%; }
    .col-md-offset-1 { margin-left: 8.333333%; } .col-md-offset-2 { margin-left: 16.666667%; } .col-md-offset-3 { margin-left: 25%; } .col-md-offset-4 { margin-left: 33.333333%; }
}
@media (min-width: 992px) {
    .col-lg-offset-1 { margin-left: 8.333333%; } .col-lg-offset-2 { margin-left: 16.666667%; } .col-lg-offset-3 { margin-left: 25%; } .col-lg-offset-4 { margin-left: 33.333333%; }
}

/* 9. Scrollbars — scrolling still works, the grey bar is hidden ---------------- */
.table-responsive, .table-container, .dataTables_wrapper, .dropdown-menu, .client-alerts,
.overflow-auto, .modal-body, pre, .collapsable-card-body, .list-group, .card-body,
#order-standard_cart .summary-container, .vs-chat-log {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.table-responsive::-webkit-scrollbar, .table-container::-webkit-scrollbar, .dataTables_wrapper::-webkit-scrollbar,
.dropdown-menu::-webkit-scrollbar, .client-alerts::-webkit-scrollbar, .overflow-auto::-webkit-scrollbar,
.modal-body::-webkit-scrollbar, pre::-webkit-scrollbar, .collapsable-card-body::-webkit-scrollbar,
.list-group::-webkit-scrollbar, .card-body::-webkit-scrollbar,
#order-standard_cart .summary-container::-webkit-scrollbar, .vs-chat-log::-webkit-scrollbar { display: none; }


/* 10. Layout width & spacing — wider, less condensed ------------------------------ */
body { font-size: 16px; }
.container { padding-left: 24px; padding-right: 24px; }
@media (min-width: 1200px) { .container { max-width: 1280px; } }
@media (min-width: 1440px) { .container { max-width: 1400px; } }
@media (max-width: 575.98px) { .container { padding-left: 16px; padding-right: 16px; } }
#main-body { padding: 32px 0 64px; }
.vs-home-body#main-body { padding: 0; }
.sidebar { margin-bottom: 24px; }
.primary-content .card-body { padding: 24px; }
.card { margin-bottom: 24px; }
.card-header { padding: 16px 20px; }
.card-footer { background: #fff; border-top-color: var(--vs-line); padding: 12px 20px; }
.card-footer:empty { display: none; }
.list-group-item { padding: .85rem 1.25rem; border-color: var(--vs-line); }
.card-sidebar .list-group-item { padding: .75rem 1.25rem; font-size: 15px; }
.table th, .table td { padding: .9rem 1rem; vertical-align: middle; border-color: var(--vs-line); }
.table thead th { background: var(--vs-pale); color: var(--vs-muted); font-weight: 600; font-size: 14px; border-bottom-width: 1px; }
.primary-content h1, .primary-content .h1 { font-size: 30px; }
.form-control, .custom-select { min-height: 44px; }
.btn { padding: .55rem 1.1rem; }
.btn-sm { padding: .35rem .8rem; }
.card[class*="card-accent-"] { border-top: 3px solid var(--vs-blue); }

/* 11. Breadcrumb ------------------------------------------------------------------ */
.master-breadcrumb { background: #fff; border-bottom: 1px solid var(--vs-line); }
.master-breadcrumb .breadcrumb,
.vs-breadcrumb { background: transparent; margin: 0; padding: 14px 0; font-size: 14px; flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.vs-breadcrumb::-webkit-scrollbar { display: none; }
.vs-breadcrumb .breadcrumb-item { display: inline-flex; align-items: center; padding-left: 0; }
.vs-breadcrumb .breadcrumb-item + .breadcrumb-item::before { content: "\203A"; float: none; padding: 0 12px; color: var(--vs-line); font-size: 20px; line-height: 1; }
.vs-breadcrumb a { color: var(--vs-blue); font-weight: 600; text-decoration: none; }
.vs-breadcrumb a:hover { color: var(--vs-blue-dark); text-decoration: underline; }
.vs-breadcrumb .fa-home { font-size: 16px; }
.vs-breadcrumb .breadcrumb-item.active { color: var(--vs-muted); }

/* 12. Client area dashboard -------------------------------------------------------- */
.vs-dash-head { display: flex; flex-wrap: wrap; gap: 16px 24px; justify-content: space-between; align-items: flex-end; margin-bottom: 24px; }
.vs-dash-hello { margin: 0; color: var(--vs-muted); font-size: 16px; }
.vs-dash-name { margin: 0; font-size: 32px; line-height: 1.15; }
.vs-dash-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.vs-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; margin-bottom: 28px; }
.vs-stat { display: flex; align-items: center; gap: 16px; padding: 20px; background: #fff; border: 1px solid var(--vs-line); border-radius: var(--vs-radius); color: var(--vs-text); text-decoration: none; transition: border-color .15s; }
.vs-stat:hover { border-color: var(--vs-blue); text-decoration: none; color: var(--vs-text); }
.vs-stat-icon { flex: none; width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center; background: var(--vs-tint); color: var(--vs-blue); font-size: 22px; border-radius: var(--vs-radius); }
.vs-stat-alert .vs-stat-icon { background: var(--vs-blue); color: #fff; }
.vs-stat-num { display: block; font-size: 30px; font-weight: 700; line-height: 1.1; }
.vs-stat-label { display: block; color: var(--vs-muted); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
.client-home-cards .card-header .card-title { font-size: 18px; }
.client-home-cards .card-header .btn { padding: .3rem .75rem; font-size: 13px; }
.client-home-cards .list-group-item { border-left: 0; border-right: 0; }

/* 13. On/off switches (Single Sign-On, marketing emails…) — fixed geometry so they never wrap */
.bootstrap-switch { display: inline-block; position: relative; overflow: hidden; vertical-align: middle; width: 110px !important; height: 40px; border: 1px solid var(--vs-line); border-radius: var(--vs-radius); background: #fff; cursor: pointer; }
.bootstrap-switch .bootstrap-switch-container { display: flex !important; width: 165px !important; transition: margin-left .2s ease; }
.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-container { margin-left: 0 !important; }
.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-container { margin-left: -55px !important; }
.bootstrap-switch .bootstrap-switch-handle-on,
.bootstrap-switch .bootstrap-switch-handle-off,
.bootstrap-switch .bootstrap-switch-label { flex: none; display: block; width: 55px !important; height: 38px; line-height: 38px; padding: 0 !important; text-align: center; font-size: 14px; font-weight: 700; border: 0; border-radius: 0; }
.bootstrap-switch .bootstrap-switch-handle-on,
.bootstrap-switch .bootstrap-switch-handle-on[class*="bootstrap-switch-"] { background: var(--vs-blue); color: #fff; }
.bootstrap-switch .bootstrap-switch-handle-off,
.bootstrap-switch .bootstrap-switch-handle-off[class*="bootstrap-switch-"] { background: var(--vs-pale); color: var(--vs-muted); }
.bootstrap-switch .bootstrap-switch-label { background: #fff; box-shadow: inset 1px 0 0 var(--vs-line), inset -1px 0 0 var(--vs-line); }
.bootstrap-switch.bootstrap-switch-focused { border-color: var(--vs-blue); box-shadow: 0 0 0 .2rem rgba(20, 100, 170, .2); }
.bootstrap-switch.bootstrap-switch-disabled { opacity: .55; cursor: default; }
.bootstrap-switch input[type="checkbox"], .bootstrap-switch input[type="radio"] { position: absolute !important; top: 0; left: 0; margin: 0; z-index: -1; opacity: 0; }

/* 14. Legal pages (terms, privacy) --------------------------------------------------- */
.vs-legal-head { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; padding: 28px 32px; background: #fff; border: 1px solid var(--vs-line); border-radius: var(--vs-radius); margin-bottom: 24px; }
.vs-legal-head h1 { margin: 0; font-size: 34px; }
.vs-legal-meta { margin: 4px 0 0; color: var(--vs-muted); font-size: 15px; }
.vs-legal-body { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 24px; align-items: start; }
.vs-legal-toc { position: sticky; top: 20px; max-height: calc(100vh - 40px); overflow-y: auto; background: #fff; border: 1px solid var(--vs-line); border-radius: var(--vs-radius); padding: 20px; scrollbar-width: none; }
.vs-legal-toc::-webkit-scrollbar { display: none; }
.vs-legal-toc summary { font-weight: 700; color: var(--vs-blue-dark); cursor: pointer; list-style: none; }
.vs-legal-toc summary::-webkit-details-marker { display: none; }
.vs-legal-toc ol { margin: 12px 0 0; padding-left: 22px; font-size: 14px; }
.vs-legal-toc li { margin-bottom: 8px; color: var(--vs-muted); }
.vs-legal-toc a { color: var(--vs-text); }
.vs-legal-toc a:hover { color: var(--vs-blue); }
.vs-legal-content { background: #fff; border: 1px solid var(--vs-line); border-radius: var(--vs-radius); padding: 8px 40px 24px; font-size: 16px; line-height: 1.75; color: var(--vs-text); }
.vs-legal-section { padding: 28px 0; border-bottom: 1px solid var(--vs-pale); scroll-margin-top: 20px; }
.vs-legal-section:last-child { border-bottom: 0; }
.vs-legal-section h2 { display: flex; align-items: center; gap: 12px; font-size: 22px; margin: 0 0 14px; }
.vs-legal-num { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 6px; background: var(--vs-tint); color: var(--vs-blue-dark); font-size: 15px; border-radius: var(--vs-radius); }
.vs-legal-section h3 { font-size: 18px; margin: 20px 0 10px; }
.vs-legal-section p { margin: 0 0 12px; }
.vs-legal-section ol, .vs-legal-section ul { padding-left: 22px; margin: 0 0 12px; }
.vs-legal-section li { margin-bottom: 10px; }
.vs-legal-section li ul { margin-top: 8px; }
.vs-legal-section li ul li { margin-bottom: 4px; }
.vs-legal-help { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; margin-top: 24px; padding: 24px 28px; background: var(--vs-tint); border-radius: var(--vs-radius); }
.vs-legal-help h2 { font-size: 20px; margin: 0 0 4px; }
.vs-legal-help p { margin: 0; }
@media (min-width: 992px) { .vs-legal-toc summary { pointer-events: none; } }
@media (max-width: 991.98px) {
    .vs-legal-body { grid-template-columns: 1fr; }
    .vs-legal-toc { position: static; max-height: none; }
}
@media (max-width: 575.98px) {
    .vs-legal-head { padding: 20px; }
    .vs-legal-head h1 { font-size: 26px; }
    .vs-legal-content { padding: 4px 20px 16px; font-size: 15.5px; }
}
@media print {
    .vs-legal-toc, .vs-legal-help, .vs-legal-head .btn { display: none !important; }
    .vs-legal-body { display: block; }
}

/* 15. Knowledgebase ----------------------------------------------------------------- */
.vs-kb-hero { background: var(--vs-tint); border-radius: var(--vs-radius); padding: 40px; margin-bottom: 32px; }
.vs-kb-hero h1 { margin: 0 0 6px; font-size: 34px; }
.vs-kb-hero > p { margin: 0 0 20px; color: var(--vs-text); font-size: 17px; }
.vs-kb-hero-sm { padding: 32px 40px; }
.vs-kb-search { display: flex; position: relative; max-width: 760px; background: #fff; border: 1px solid var(--vs-blue); border-radius: var(--vs-radius); overflow: hidden; }
.vs-kb-search .form-control, .vs-kb-search .custom-select, .vs-kb-search .btn { height: 54px; border: 0; border-radius: 0; font-size: 17px; }
.vs-kb-search .form-control:focus, .vs-kb-search .custom-select:focus { box-shadow: none; }
.vs-kb-search .vs-kb-topic { flex: 0 0 200px; border-right: 1px solid var(--vs-line); background-color: var(--vs-pale); font-weight: 600; color: var(--vs-blue-dark); }
.vs-kb-search .form-control { flex: 1; min-width: 0; }
.vs-kb-search .btn { padding: 0 24px; }
.vs-kb-search-icon { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--vs-muted); pointer-events: none; }
.vs-kb-searchall { margin-top: 10px; font-size: 15px; }
.vs-kb-searchall .btn-link { font-weight: 600; }
.vs-kb-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.vs-chip { display: inline-block; padding: 6px 14px; background: #fff; border: 1px solid var(--vs-line); border-radius: var(--vs-radius); color: var(--vs-blue-dark); font-size: 14px; font-weight: 600; }
.vs-chip:hover { border-color: var(--vs-blue); color: var(--vs-blue); text-decoration: none; }
.vs-kb-heading { font-size: 22px; margin: 0 0 16px; }
.vs-kb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-bottom: 36px; }
.vs-kb-cat { display: flex; align-items: flex-start; gap: 16px; height: 100%; padding: 20px; background: #fff; border: 1px solid var(--vs-line); border-radius: var(--vs-radius); color: var(--vs-text); }
.vs-kb-cat:hover { border-color: var(--vs-blue); text-decoration: none; color: var(--vs-text); }
.vs-kb-cat .vs-icon { flex: none; width: 46px; height: 46px; font-size: 20px; }
.vs-kb-cat-body { flex: 1; min-width: 0; }
.vs-kb-cat-name { display: block; font-size: 18px; font-weight: 700; color: var(--vs-blue-dark); }
.vs-kb-cat-desc { display: block; color: var(--vs-muted); font-size: 15px; margin-top: 2px; }
.vs-kb-cat-count { display: block; margin-top: 8px; color: var(--vs-blue); font-size: 13px; font-weight: 700; }
.vs-kb-cat-arrow { color: var(--vs-line); margin-top: 6px; }
.vs-kb-cat:hover .vs-kb-cat-arrow { color: var(--vs-blue); }
.vs-kb-list { background: #fff; border: 1px solid var(--vs-line); border-radius: var(--vs-radius); margin-bottom: 24px; }
.vs-kb-item { display: flex; align-items: flex-start; gap: 14px; padding: 16px 20px; border-bottom: 1px solid var(--vs-line); color: var(--vs-text); }
.vs-kb-item:last-child { border-bottom: 0; }
.vs-kb-item:hover { background: var(--vs-pale); text-decoration: none; color: var(--vs-text); }
.vs-kb-item-icon { color: var(--vs-blue); font-size: 18px; margin-top: 3px; }
.vs-kb-item-body { flex: 1; min-width: 0; }
.vs-kb-item-title { display: block; font-weight: 700; font-size: 16px; }
.vs-kb-item-text { display: block; color: var(--vs-muted); font-size: 14px; margin-top: 2px; }
.vs-kb-empty { padding: 20px; color: var(--vs-muted); }
.vs-kb-article .card-body { padding: 32px 40px; }
.vs-kb-article h1 { font-size: 30px; line-height: 1.25; }
.vs-prose { font-size: 16.5px; line-height: 1.75; }
.vs-prose h2, .vs-prose h3, .vs-prose h4 { margin: 28px 0 12px; }
.vs-prose img { max-width: 100%; height: auto; border: 1px solid var(--vs-line); border-radius: var(--vs-radius); }
.vs-prose pre, .vs-prose code { background: var(--vs-pale); border-radius: var(--vs-radius); }
.vs-prose pre { padding: 14px 16px; }
.vs-prose table { width: 100%; margin: 16px 0; }
.vs-prose table td, .vs-prose table th { border: 1px solid var(--vs-line); padding: 8px 12px; }
.vs-kb-vote { margin-top: 28px; padding: 20px 24px; background: var(--vs-pale); border-radius: var(--vs-radius); }
.vs-kb-vote h4 { font-size: 18px; margin: 0 0 12px; }
.vs-kb-vote .btn { margin-right: 8px; }
@media (max-width: 575.98px) {
    .vs-kb-hero, .vs-kb-hero-sm { padding: 24px 20px; }
    .vs-kb-hero h1 { font-size: 26px; }
    .vs-kb-search { flex-wrap: wrap; }
    .vs-kb-search .vs-kb-topic { flex: 1 1 100%; border-right: 0; border-bottom: 1px solid var(--vs-line); }
    .vs-kb-search .btn { padding: 0 18px; }
    .vs-kb-article .card-body { padding: 20px; }
}

/* 16. Homepage "view all services" card ------------------------------------------- */
.vs-card-all { background: var(--vs-blue-dark); border-color: var(--vs-blue-dark); color: #fff; text-decoration: none; }
.vs-card-all:hover { background: var(--vs-blue-deep); color: #fff; text-decoration: none; }
.vs-card-all h3 { color: #fff; }
.vs-card-all p { color: var(--vs-tint); }
.vs-card-all .vs-icon-solid { background: #fff; color: var(--vs-blue-dark); }
.vs-card-link { font-weight: 700; color: #fff; display: inline-flex; align-items: center; gap: 8px; }

/* 17. Small screens — client area ---------------------------------------------------- */
@media (max-width: 767.98px) {
    #main-body { padding: 20px 0 40px; }
    .vs-dash-head { align-items: flex-start; }
    .vs-dash-name { font-size: 26px; }
    .vs-dash-actions { width: 100%; }
    .vs-dash-actions .btn { flex: 1 1 auto; }
    .vs-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .vs-stat { padding: 14px; gap: 12px; }
    .vs-stat-icon { width: 42px; height: 42px; font-size: 18px; }
    .vs-stat-num { font-size: 24px; }
    .primary-content .card-body { padding: 18px; }
    .table-container, .table-responsive { overflow-x: auto; }
}