/* TechThisOut WHMCS theme overrides */
:root {
    --tto-white: #ffffff;
    --tto-dark: #171734;
    --tto-accent: #a965e4;
    --tto-blue: #4ebcee;
    --tto-blue-soft: #7bbded;
    --tto-text: #777797;
    --tto-muted: #b1b1c8;
    --tto-border: #d7d7ed;
    --tto-light: #f1fbff;
    --tto-panel-radius: 10px;
    --tto-control-radius: 6px;
    --tto-shadow: 0 18px 45px rgba(23, 23, 52, 0.08);

    --primary: var(--tto-dark);
    --primary-lifted: #222244;
    --primary-accented: #2d2d58;
    --secondary: var(--tto-text);
    --secondary-lifted: #626280;
    --secondary-accented: var(--tto-dark);
    --notice: var(--tto-accent);
    --notice-lifted: #9452ce;
    --notice-accented: #7435b1;
    --info: var(--tto-blue);
    --info-lifted: #35a9df;
    --info-accented: #238fbd;
    --text: var(--tto-dark);
    --text-muted: var(--tto-text);
    --text-lifted: var(--tto-text);
    --border: var(--tto-border);
    --border-muted: #ececf7;
    --bg-muted: var(--tto-light);
    --bg-inverted: var(--tto-dark);
    --rounding-sm: var(--tto-control-radius);
    --rounding-md: var(--tto-control-radius);
    --rounding-lg: var(--tto-panel-radius);
}

body {
    color: var(--tto-text);
    font-family: "DM Sans", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    background: var(--tto-white);
}

a { color: var(--tto-accent); transition: color .2s ease-in-out; }
a:hover, a:focus { color: var(--tto-blue); text-decoration: none; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--tto-dark); font-family: "DM Sans", Arial, sans-serif; font-weight: 700; }

.header.tto-header { background: var(--tto-white); box-shadow: 0 8px 30px rgba(23, 23, 52, .06); position: relative; z-index: 20; }
.tto-brandbar { background: var(--tto-white); border-bottom: 1px solid rgba(215, 215, 237, .65); }
.tto-logo { width: 200px; height: auto; }
.topbar { background: var(--tto-dark); color: var(--tto-muted); border: 0; }
.topbar .btn, .topbar a, .topbar .input-group-text { color: var(--tto-muted); }
.topbar .btn:hover, .topbar a:hover { color: var(--tto-white); }
.topbar .btn-active-client, .topbar .btn-return-to-admin { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); color: var(--tto-white); }
.main-navbar-wrapper.tto-main-navbar { background: var(--tto-white); border-bottom: 1px solid rgba(215, 215, 237, .65); }
.tto-main-navbar .navbar-nav > li > a, .tto-main-navbar .navbar-nav > .nav-item > .nav-link, .toolbar .nav-link { color: var(--tto-dark); font-size: 15px; font-weight: 600; padding: 18px 13px; text-transform: capitalize; }
.tto-main-navbar .navbar-nav > li > a:hover, .tto-main-navbar .navbar-nav > .nav-item > .nav-link:hover, .tto-main-navbar .navbar-nav > li.active > a, .tto-main-navbar .navbar-nav > li.open > a { color: var(--tto-accent); }
.tto-site-nav { gap: 2px; }
.tto-billing-nav { border-left: 1px solid var(--tto-border); padding-left: 14px; }
.navbar .dropdown-menu { border: 1px solid var(--tto-border); border-radius: var(--tto-panel-radius); box-shadow: var(--tto-shadow); padding: 10px; }
.dropdown-item, .dropdown-menu > li > a { color: var(--tto-dark); border-radius: var(--tto-control-radius); font-weight: 500; }
.dropdown-item:hover, .dropdown-item:focus, .dropdown-menu > li > a:hover { background: var(--tto-light); color: var(--tto-accent); }
.search .form-control { border-color: var(--tto-border); border-radius: 0 var(--tto-control-radius) var(--tto-control-radius) 0; color: var(--tto-dark); }
.search .btn { border-color: var(--tto-border); border-radius: var(--tto-control-radius) 0 0 var(--tto-control-radius); color: var(--tto-accent); }
.cart-btn { border: 1px solid var(--tto-border); border-radius: var(--tto-control-radius); }
.cart-btn .badge { background: linear-gradient(90deg, var(--tto-accent), var(--tto-blue-soft)); color: var(--tto-white); }

.master-breadcrumb { background: var(--tto-light); border-bottom: 1px solid rgba(215, 215, 237, .7); }
.breadcrumb { background: transparent; margin: 0; padding: 16px 0; }
.breadcrumb-item, .breadcrumb-item.active { color: var(--tto-text); }
.breadcrumb-item a { color: var(--tto-dark); font-weight: 600; }

#main-body { padding: 56px 0 70px; background: linear-gradient(180deg, #ffffff 0%, #f8fdff 100%); }
.primary-content > .card, .card, .panel, .list-group, .tile, .client-home-panels .card { border: 1px solid var(--tto-border); border-radius: var(--tto-panel-radius); box-shadow: var(--tto-shadow); }
.card-header, .panel-heading { background: var(--tto-white); border-bottom: 1px solid var(--tto-border); border-radius: var(--tto-panel-radius) var(--tto-panel-radius) 0 0 !important; }
.card-title, .panel-title { color: var(--tto-dark); font-weight: 700; }
.card-body, .panel-body { color: var(--tto-text); }
.card-accent-midnight-blue, .card-accent-teal, .card-accent-pomegranate, .card-accent-sun-flower, .card-accent-asbestos, .card-accent-green { background: var(--tto-white); border: 1px solid var(--tto-border); border-radius: var(--tto-panel-radius); box-shadow: var(--tto-shadow); color: var(--tto-dark); }
.action-icon-btns a:hover { color: var(--tto-accent); transform: translateY(-2px); }
.ico-container { background: linear-gradient(90deg, var(--tto-accent), var(--tto-blue-soft)); color: var(--tto-white); }

.btn, button, input, select, textarea, .form-control { border-radius: var(--tto-control-radius); font-family: "DM Sans", Arial, sans-serif; }
.btn-primary, .btn-success, .btn-info, .btn-order-now, .btn-block.btn-outline-primary:hover { background: linear-gradient(90deg, var(--tto-accent) 0%, var(--tto-blue-soft) 100%); border: 0; color: var(--tto-white) !important; font-weight: 700; box-shadow: 0 10px 24px rgba(169, 101, 228, .24); }
.btn-primary:hover, .btn-success:hover, .btn-info:hover, .btn-order-now:hover { background: var(--tto-dark); color: var(--tto-white) !important; }
.btn-outline-primary, .btn-default, .btn-outline-light { border-color: var(--tto-accent); color: var(--tto-accent); background: transparent; font-weight: 600; }
.btn-outline-primary:hover, .btn-default:hover, .btn-outline-light:hover { background: var(--tto-accent); border-color: var(--tto-accent); color: var(--tto-white); }
.btn-link { color: var(--tto-accent); }
.form-control { border-color: var(--tto-border); color: var(--tto-dark); min-height: 44px; }
.form-control:focus { border-color: var(--tto-accent); box-shadow: 0 0 0 .2rem rgba(169, 101, 228, .16); }
label, .control-label { color: var(--tto-dark); font-weight: 600; }

.alert { border: 0; border-radius: var(--tto-panel-radius); box-shadow: 0 10px 25px rgba(23,23,52,.05); }
.alert-info { background: #edf9fe; color: #1d6d8f; }
.alert-success { background: #effbf5; color: #117340; }
.alert-warning { background: #fff7ec; color: #8a5312; }
.alert-danger, .alert-error { background: #fff0f2; color: #a32034; }
.client-alerts a { color: var(--tto-dark); }
.client-alerts a:hover { color: var(--tto-accent); }

.table, table.dataTable { color: var(--tto-text); border-color: var(--tto-border); }
.table thead th, table.dataTable thead th, .view-cart-items-header { background: var(--tto-dark); color: var(--tto-white); border: 0; }
.table td, .table th { border-color: var(--tto-border); vertical-align: middle; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current, .pagination .page-item.active .page-link { background: linear-gradient(90deg, var(--tto-accent), var(--tto-blue-soft)); border-color: transparent; color: var(--tto-white) !important; }
.pagination .page-link { color: var(--tto-accent); border-color: var(--tto-border); }

.sidebar .card-sidebar { overflow: hidden; }
.sidebar .card-header { background: var(--tto-dark); }
.sidebar .card-header .card-title { color: var(--tto-white); font-size: 17px; }
.list-group-item { border-color: var(--tto-border); color: var(--tto-dark); }
.list-group-item.active, .list-group-item:hover { background: var(--tto-light); border-color: var(--tto-border); color: var(--tto-accent); }
.sidebar-menu-item-icon { color: var(--tto-accent); }

.modal-content { border: 0; border-radius: var(--tto-panel-radius); box-shadow: 0 30px 80px rgba(23,23,52,.22); }
.modal-header { background: var(--tto-dark); color: var(--tto-white); border-radius: var(--tto-panel-radius) var(--tto-panel-radius) 0 0; }
.modal-header .modal-title, .modal-header .close { color: var(--tto-white); }
.modal-localisation .modal-content { background: var(--tto-dark); color: var(--tto-muted); }
.modal-localisation h5, .modal-localisation .h5 { color: var(--tto-white); }
.modal-localisation .item { border-color: rgba(255,255,255,.16); color: var(--tto-muted); border-radius: var(--tto-control-radius); }
.modal-localisation .item.active, .modal-localisation .item:hover { background: linear-gradient(90deg, var(--tto-accent), var(--tto-blue-soft)); color: var(--tto-white); }

.domain-search { background: var(--tto-light); border-bottom: 1px solid var(--tto-border); }
.domain-search .input-group-wrapper { border-radius: var(--tto-panel-radius); box-shadow: var(--tto-shadow); }
.domain-pricing .tld-row, .spotlight-tlds .spotlight-tld { border-color: var(--tto-border); border-radius: var(--tto-panel-radius); }
.pricing-card-title, .price, .total-due-today .amt { color: var(--tto-dark); font-weight: 800; }

.kb-category, .announcement-single, .download-category, .ticket-reply, .ticket-details, .invoice-container { border-radius: var(--tto-panel-radius); border-color: var(--tto-border); box-shadow: var(--tto-shadow); }
.ticket-reply .user, .ticket-reply .admin { background: var(--tto-light); }
.invoice-summary, .invoice-container .invoice-status { border-radius: var(--tto-panel-radius); }

.store-promoted, .promo-banner, .marketconnect-promo, .mc-promo, [class*="marketconnect"], [class*="MarketConnect"] { display: none !important; }
a[href*="store/ssl"], a[href*="store/weebly"], a[href*="store/sitebuilder"], a[href*="store/sitelock"], a[href*="store/spamexperts"], a[href*="store/nordvpn"], a[href*="store/socialbee"], a[href*="store/marketgoo"], a[href*="store/xovinow"], a[href*="store/threesixtymonitoring"], a[href*="store/codeguard"], a[href*="store/ox"] { display: none !important; }

.tto-footer { background: var(--tto-dark); color: var(--tto-muted); padding-top: 70px; }
.tto-footer a { color: var(--tto-muted); }
.tto-footer a:hover { color: var(--tto-white); }
.tto-footer-cta { align-items: center; background: linear-gradient(90deg, var(--tto-accent), var(--tto-blue-soft)); border-radius: var(--tto-panel-radius); display: flex; gap: 24px; justify-content: space-between; margin-bottom: 56px; padding: 30px 36px; }
.tto-footer-cta h2 { color: var(--tto-white); font-size: 30px; margin: 0; }
.tto-footer-cta .btn-primary { background: var(--tto-white); color: var(--tto-dark) !important; box-shadow: none; }
.tto-footer-grid { display: grid; gap: 48px; grid-template-columns: minmax(260px, 1fr) minmax(360px, 1.35fr) auto; padding-bottom: 56px; }
.tto-footer-brand img { height: auto; margin-bottom: 20px; width: 200px; }
.tto-footer-brand p { max-width: 360px; }
.tto-footer h6 { color: var(--tto-white); font-size: 20px; margin-bottom: 18px; }
.tto-footer-link-cols { display: grid; gap: 32px; grid-template-columns: repeat(2, minmax(150px, 1fr)); }
.tto-footer li { margin-bottom: 10px; }
.tto-footer-social ul { display: flex; gap: 8px; }
.tto-footer-social li { margin: 0; }
.tto-footer-social a { align-items: center; background: linear-gradient(90deg, var(--tto-accent), var(--tto-blue-soft)); border-radius: 50%; color: var(--tto-white); display: flex; height: 40px; justify-content: center; width: 40px; }
.tto-footer-copyright { border-top: 1px solid rgba(255,255,255,.10); padding: 18px 0; }
.tto-footer-copyright p { color: var(--tto-muted); font-size: 15px; }

#fullpage-overlay .inner-wrapper { color: var(--tto-white); }

@media (max-width: 1199.98px) {
    .tto-main-navbar .navbar-collapse { padding: 16px 0; }
    .tto-billing-nav { border-left: 0; border-top: 1px solid var(--tto-border); margin-top: 10px; padding-left: 0; padding-top: 10px; }
    .tto-main-navbar .navbar-nav > li > a, .tto-main-navbar .navbar-nav > .nav-item > .nav-link { padding: 10px 0; }
}

@media (max-width: 991.98px) {
    .tto-footer-grid { grid-template-columns: 1fr; }
    .tto-footer-cta { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 575.98px) {
    .tto-logo, .tto-footer-brand img { width: 170px; }
    .tto-footer-link-cols { grid-template-columns: 1fr; }
    .tto-footer-cta { padding: 24px; }
    .tto-footer-cta h2 { font-size: 24px; }
}