/*
 * Watch the Dot 2026: the WHMCS client area styled to match watchthedot.com.
 * Loaded automatically by Twenty-One after its own CSS (includes/head.tpl → custom.css).
 * Brand values are copied from the website theme's theme.json: change them there first, then here.
 */

:root {
	--wtd-ink: #22307a;
	--wtd-blue: #1b6fb5;
	--wtd-blue-dark: #155a93;
	--wtd-text: #262a36;
	--wtd-muted: #5a6074;
	--wtd-line: #dfe3ec;
	--wtd-mist: #eef2f8;
	--wtd-paper: #fafbfd;
	--wtd-white: #ffffff;
	--wtd-good: #12805c;
	--wtd-warn: #b54708;
	--wtd-bad: #b42318;
	--wtd-radius: 12px;
	--wtd-font-heading: "Avenir Next", "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
	--wtd-font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--wtd-wide: 1180px;
}

/* ---------- Base ---------- */
body,
body.primary-bg-color {
	background: var(--wtd-paper);
	color: var(--wtd-text);
	font-family: var(--wtd-font-body);
	font-size: 1rem;
	line-height: 1.6;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: var(--wtd-font-heading);
	font-weight: 700;
	color: var(--wtd-ink);
	line-height: 1.15;
	letter-spacing: -0.01em;
}
h1, .h1 { font-size: clamp(1.75rem, 3vw, 2.25rem); }
h2, .h2 { font-size: clamp(1.35rem, 2.2vw, 1.75rem); }
h3, .h3 { font-size: 1.25rem; }
a { color: var(--wtd-blue-dark); }
a:hover, a:focus { color: var(--wtd-ink); }
.text-muted, small.text-muted { color: var(--wtd-muted) !important; }
.container { max-width: var(--wtd-wide); }
:focus-visible { outline: 3px solid var(--wtd-blue); outline-offset: 2px; }


/* ---------- Header: the same as watchthedot.com, plus the ink "Client portal" bar ---------- */
#header.header { background: var(--wtd-white); box-shadow: none; border: 0; }
#header .wtd-mainbar { background: var(--wtd-white); padding-block: 1.1rem; border-bottom: 1px solid var(--wtd-line); }
#header .wtd-mainbar .container { flex-wrap: wrap; }
#header .wtd-logo { display: inline-flex; line-height: 0; padding: 0; }
#header .wtd-logo img { width: clamp(170px, 22vw, 240px); height: auto; max-height: none; }
#header .wtd-mainbar .navbar-nav { gap: 1.5rem; }
#header .wtd-mainbar .navbar-nav > li > a { color: var(--wtd-ink); font-weight: 500; padding: 0 !important; display: block; text-decoration: none; white-space: nowrap; }
#header .wtd-mainbar .navbar-nav > li > a:hover,
#header .wtd-mainbar .navbar-nav .active > a,
#header .wtd-mainbar .navbar-nav .show > a { color: var(--wtd-blue-dark); text-decoration: underline; text-underline-offset: 0.3em; background: transparent; }
#header .wtd-cta { background: var(--wtd-blue); color: var(--wtd-white); border-radius: 999px; padding: 0.5rem 1.2rem; font-weight: 600; white-space: nowrap; border: 0; }
#header .wtd-cta:hover, #header .wtd-cta:focus { background: var(--wtd-ink); color: var(--wtd-white); }
#header .wtd-menu-toggle { color: var(--wtd-ink); border: 1px solid var(--wtd-line); border-radius: 999px; background: var(--wtd-white); padding: 0.4rem 0.6rem; }
#header .wtd-menu-toggle:hover { border-color: var(--wtd-blue); color: var(--wtd-blue-dark); }
/* Twenty-One shows an empty "More" item once its overflow script has run; hide it when empty. */
#header .collapsable-dropdown:not(:has(.collapsable-dropdown-menu > *)) { display: none !important; }
#header .dropdown-menu { border: 1px solid var(--wtd-line); border-radius: var(--wtd-radius); box-shadow: 0 10px 28px rgba(34, 48, 122, 0.1); padding: 0.35rem; min-width: 13rem; }
#header .dropdown-item { border-radius: 6px; color: var(--wtd-text); }
#header .dropdown-item:hover, #header .dropdown-item:focus { background: var(--wtd-mist); color: var(--wtd-ink); }
#header li.dropdown-item { padding: 0; }
#header li.dropdown-item > a.dropdown-item { padding: 0.45rem 0.7rem !important; }

/* The portal bar: tells clients they're in the client portal; holds notifications, account and basket. */
#header .wtd-portalbar { background: var(--wtd-ink); color: var(--wtd-white); padding-block: 0.3rem; font-size: 0.9rem; }
#header .wtd-portalbar .container { flex-wrap: nowrap; gap: 0.75rem; }
#header .wtd-portalbar__label { font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.8rem; white-space: nowrap; padding-right: 0.75rem; border-right: 1px solid rgba(255, 255, 255, 0.25); }
#header .wtd-portalbar__label i { color: #8fc3ee; }
#header .wtd-portalbar__right { display: flex; align-items: center; gap: 0.25rem; flex-wrap: nowrap; }
#header .wtd-portalbar .active-client { align-items: center; gap: 0.1rem; }
#header .wtd-portalbar__muted { color: rgba(255, 255, 255, 0.7); }
#header .wtd-portalbar__btn,
#header .wtd-portalbar .navbar-nav > li > a { color: rgba(255, 255, 255, 0.9); background: transparent; border: 0; padding: 0.3rem 0.5rem !important; font-size: 0.9rem; text-decoration: none; white-space: nowrap; }
#header .wtd-portalbar__btn:hover,
#header .wtd-portalbar .navbar-nav > li > a:hover,
#header .wtd-portalbar .navbar-nav .show > a { color: var(--wtd-white); text-decoration: underline; text-underline-offset: 0.2em; }
#header .wtd-portalbar .btn-active-client span { color: var(--wtd-white); font-weight: 600; }
#header .wtd-portalbar .cart-btn .badge { background: var(--wtd-blue); color: var(--wtd-white); border-radius: 999px; }
#header .wtd-portalbar .dropdown-menu { font-size: 0.95rem; }

/* ---------- Breadcrumb and page body ---------- */
.master-breadcrumb { background: transparent; border: 0; }
.master-breadcrumb .breadcrumb { background: transparent; padding: 1rem 0 0; margin: 0; font-size: 0.875rem; }
.master-breadcrumb .breadcrumb-item a { color: var(--wtd-muted); }
.master-breadcrumb .breadcrumb-item.active { color: var(--wtd-text); }
#main-body { background: transparent; padding-block: 1.5rem 3rem; }
.header-lined h1, .header-lined h2 { color: var(--wtd-ink); border: 0; }

/* ---------- Buttons: pill-shaped, as on the website ---------- */
.btn { border-radius: 999px; font-weight: 600; padding: 0.55rem 1.25rem; transition: background-color 0.15s, color 0.15s, border-color 0.15s; }
.btn-sm { padding: 0.35rem 0.9rem; }
.btn-lg { padding: 0.75rem 1.6rem; }
.btn-primary,
.btn-success,
.btn-info { background: var(--wtd-blue); border-color: var(--wtd-blue); color: var(--wtd-white); }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary:not(:disabled):not(.disabled):active,
.btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success:not(:disabled):not(.disabled):active,
.btn-info:hover, .btn-info:focus { background: var(--wtd-ink); border-color: var(--wtd-ink); color: var(--wtd-white); }
.btn-default,
.btn-secondary,
.btn-light,
.btn-outline-primary { background: transparent; border: 2px solid var(--wtd-blue); color: var(--wtd-blue-dark); }
.btn-default:hover, .btn-secondary:hover, .btn-light:hover, .btn-outline-primary:hover,
.btn-outline-primary:not(:disabled):not(.disabled):active { background: var(--wtd-ink); border-color: var(--wtd-ink); color: var(--wtd-white); }
.btn-danger { background: var(--wtd-bad); border-color: var(--wtd-bad); }
.btn-link { color: var(--wtd-blue-dark); border-radius: 0; }

/* ---------- Cards, sidebar, lists ---------- */
.card { border: 1px solid var(--wtd-line); border-radius: var(--wtd-radius); box-shadow: none; background: var(--wtd-white); }
.card-header { background: var(--wtd-white); border-bottom: 1px solid var(--wtd-line); border-radius: var(--wtd-radius) var(--wtd-radius) 0 0 !important; }
.card-header .card-title, .card-title { color: var(--wtd-ink); font-family: var(--wtd-font-heading); font-weight: 700; }
.card-footer { background: var(--wtd-paper); border-top: 1px solid var(--wtd-line); }
.sidebar .card { margin-bottom: 1.25rem; }
.sidebar .card-header { background: var(--wtd-mist); }
.sidebar .card-header .card-title { font-size: 0.95rem; }
.list-group-item { border-color: var(--wtd-line); color: var(--wtd-text); }
.list-group-item.active, .list-group-item.active:hover { background: var(--wtd-mist); border-color: var(--wtd-line); color: var(--wtd-ink); font-weight: 600; }
.list-group-item-action:hover { background: var(--wtd-paper); color: var(--wtd-ink); }
.sidebar .list-group-item.active,
.sidebar .list-group-item.active:focus,
.sidebar .list-group-item.active:hover { background: var(--wtd-mist); border-color: var(--wtd-line); color: var(--wtd-ink); font-weight: 600; box-shadow: inset 3px 0 0 var(--wtd-blue); }
.sidebar .list-group-item .badge { background: var(--wtd-mist); color: var(--wtd-ink); }
.page-link { color: var(--wtd-blue-dark); border-color: var(--wtd-line); }
.page-link:hover { background: var(--wtd-mist); color: var(--wtd-ink); border-color: var(--wtd-line); }
.page-item.active .page-link { background: var(--wtd-blue); border-color: var(--wtd-blue); color: var(--wtd-white); }
.tiles .tile { border-radius: var(--wtd-radius); border: 1px solid var(--wtd-line); background: var(--wtd-white); }
.tiles .tile .stat { color: var(--wtd-ink); font-family: var(--wtd-font-heading); }
.tiles .tile .highlight { background: var(--wtd-blue) !important; }

/* ---------- Forms ---------- */
.form-control, .custom-select { border: 1px solid var(--wtd-line); border-radius: 8px; color: var(--wtd-text); background-color: var(--wtd-white); }
.form-control:focus, .custom-select:focus { border-color: var(--wtd-blue); box-shadow: 0 0 0 3px rgba(27, 111, 181, 0.18); }
label, .col-form-label { font-weight: 600; color: var(--wtd-text); }
.form-text, .help-block { color: var(--wtd-muted); }
.input-group-text { background: var(--wtd-mist); border-color: var(--wtd-line); }
.custom-control-input:checked ~ .custom-control-label::before { background-color: var(--wtd-blue); border-color: var(--wtd-blue); }

/* ---------- Tables ---------- */
.table { color: var(--wtd-text); }
.table thead th { border-bottom: 1px solid var(--wtd-line); border-top: 0; color: var(--wtd-muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
.table td, .table th { border-top-color: var(--wtd-line); }
.table-hover tbody tr:hover, table.table-list tbody tr:hover td { background: var(--wtd-paper); }
.table-container, .dataTables_wrapper { border-radius: var(--wtd-radius); }

/* ---------- Alerts and badges ---------- */
.alert { border-radius: var(--wtd-radius); border: 1px solid var(--wtd-line); }
.alert-info { background: var(--wtd-mist); color: var(--wtd-ink); border-color: #c9d4ea; }
.alert-success { background: #ecfdf3; color: #05603a; border-color: #abefc6; }
.alert-warning { background: #fffaeb; color: #93370d; border-color: #fedf89; }
.alert-danger { background: #fef3f2; color: #912018; border-color: #fecdca; }
.badge { border-radius: 999px; font-weight: 600; padding: 0.3em 0.65em; }
.label.status, .status { border-radius: 999px; }
.status-active, .label-active, .status-paid { background: var(--wtd-good) !important; }
.status-unpaid, .status-overdue { background: var(--wtd-bad) !important; }
.status-pending { background: var(--wtd-warn) !important; }

/* ---------- Home page ---------- */
.wtd-home__intro { margin: 0.5rem 0 1.75rem; max-width: 46rem; }
.wtd-home__intro h1 { margin-bottom: 0.5rem; }
.wtd-lede { font-size: 1.15rem; color: var(--wtd-muted); }
.wtd-tile { display: flex; flex-direction: column; gap: 0.25rem; height: 100%; padding: 1.25rem 1.25rem 1.1rem; background: var(--wtd-white); border: 1px solid var(--wtd-line); border-radius: var(--wtd-radius); color: var(--wtd-text); text-decoration: none; transition: border-color 0.15s, transform 0.15s; }
.wtd-tile:hover, .wtd-tile:focus { border-color: var(--wtd-blue); color: var(--wtd-text); text-decoration: none; transform: translateY(-1px); }
.wtd-tile i { font-size: 1.6rem; color: var(--wtd-blue); margin-bottom: 0.35rem; }
.wtd-tile strong { color: var(--wtd-ink); font-family: var(--wtd-font-heading); font-size: 1.1rem; }
.wtd-tile span { color: var(--wtd-muted); font-size: 0.9rem; }
.wtd-home__store, .wtd-home__domains { margin-top: 1.5rem; }
.wtd-home__store h2, .wtd-home__domains h2 { margin-bottom: 1rem; }
.wtd-home__domains .home-domain-search { background: var(--wtd-mist); border-radius: var(--wtd-radius); padding: 1.5rem; margin: 0; }
.wtd-home__domains .home-domain-search .container { max-width: none; padding: 0; }

/* ---------- Order form (standard_cart) ---------- */
body #order-standard_cart .header-lined h1 { color: var(--wtd-ink); font-size: clamp(1.75rem, 3vw, 2.25rem); }
body #order-standard_cart .products .product { border: 1px solid var(--wtd-line); border-radius: var(--wtd-radius); background: var(--wtd-white); padding: 0; overflow: hidden; display: flex; flex-direction: column; height: calc(100% - 1.5rem); }
body #order-standard_cart .products .product header { background: var(--wtd-white); color: var(--wtd-ink); border-bottom: 1px solid var(--wtd-line); padding: 1.1rem 1.25rem 0.9rem; }
body #order-standard_cart .products .product header span { font-family: var(--wtd-font-heading); font-weight: 700; font-size: 1.25rem; color: var(--wtd-ink); }
body #order-standard_cart .products .product div.product-desc { width: 100%; padding: 1rem 1.25rem; color: var(--wtd-text); float: none; }
body #order-standard_cart .products .product div.product-desc { font-size: 0.95rem; line-height: 1.5; }
body #order-standard_cart .products .product div.product-desc ul { padding-left: 0; margin: 0; }
body #order-standard_cart .products .product div.product-desc li { list-style: none; position: relative; padding-left: 1.6rem; margin: 0 0 0.4rem; font-size: 0.95rem; }
body #order-standard_cart .products .product div.product-desc li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--wtd-blue); font-weight: 700; }
body #order-standard_cart .products .product div.product-desc br { display: none; }
body #order-standard_cart .products .product div.product-desc p:empty { display: none; }
body #order-standard_cart .products .product div.product-pricing { width: 100%; padding: 0 1.25rem 1.25rem; text-align: left; float: none; margin-top: auto; }
body #order-standard_cart .products .product div.product-pricing .price { color: var(--wtd-ink); font-family: var(--wtd-font-heading); font-weight: 700; font-size: 1.75rem; }
body #order-standard_cart .products .product footer { width: 100%; padding: 0 1.25rem 1.25rem; float: none; text-align: left; }
body #order-standard_cart .btn-order-now { width: 100%; }
body #order-standard_cart .cart-sidebar .card-header, body #order-standard_cart .panel-sidebar .panel-heading { background: var(--wtd-mist); }
body #order-standard_cart .order-summary { background: var(--wtd-mist); border: 1px solid var(--wtd-line); border-radius: var(--wtd-radius); color: var(--wtd-text); }
body #order-standard_cart .order-summary h2 { background: var(--wtd-ink); color: var(--wtd-white); border-radius: var(--wtd-radius) var(--wtd-radius) 0 0; font-size: 1.1rem; padding: 0.85rem 1rem; margin: 0; }
body #order-standard_cart .summary-container { background: transparent; border: 0; }
body #order-standard_cart .order-summary .total-due-today .amt { color: var(--wtd-ink); font-family: var(--wtd-font-heading); }
body #order-standard_cart .btn-checkout, body #order-standard_cart #btnCompleteOrder { background: var(--wtd-blue); border-color: var(--wtd-blue); color: var(--wtd-white); border-radius: 999px; }
body #order-standard_cart .btn-checkout:hover, body #order-standard_cart #btnCompleteOrder:hover { background: var(--wtd-ink); border-color: var(--wtd-ink); }
body #order-standard_cart .view-cart-items-header { background: var(--wtd-ink); color: var(--wtd-white); border-radius: var(--wtd-radius) var(--wtd-radius) 0 0; }
body #order-standard_cart .view-cart-items { border: 1px solid var(--wtd-line); border-radius: 0 0 var(--wtd-radius) var(--wtd-radius); }
body #order-standard_cart .sub-heading span { color: var(--wtd-ink); background: var(--wtd-paper); font-family: var(--wtd-font-heading); }
body #order-standard_cart .sub-heading { border-top-color: var(--wtd-line); }
body #order-standard_cart .field-container, body #order-standard_cart .product-info, body #order-standard_cart .addon-products .panel-addon { border-radius: var(--wtd-radius); border-color: var(--wtd-line); background: var(--wtd-white); }
body #order-standard_cart .product-info .product-title { color: var(--wtd-ink); font-family: var(--wtd-font-heading); }
body #order-standard_cart .account-select-container div.account { border-radius: var(--wtd-radius); }
body #order-standard_cart .account-select-container div.account.active { border-color: var(--wtd-blue); background: var(--wtd-mist); }

/* ---------- Footer: dark band, as on the website ---------- */
#footer.footer { background: var(--wtd-ink); color: rgba(255, 255, 255, 0.85); padding: 3.5rem 0 1.5rem; margin-top: 2rem; }
#footer a { color: var(--wtd-white); text-decoration: none; }
#footer a:hover { text-decoration: underline; }
#footer .wtd-logo img { width: 200px; height: auto; }
.wtd-footer__about { margin-top: 1rem; color: rgba(255, 255, 255, 0.8); max-width: 22rem; }
.wtd-footer__h { font-family: var(--wtd-font-body); font-size: 0.8rem !important; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.65) !important; margin-bottom: 0.75rem; }
.wtd-footer__links { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.4rem; font-size: 0.95rem; }
.wtd-footer__legal { border-top: 1px solid rgba(255, 255, 255, 0.18); padding-top: 1rem; margin-top: 1rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1.5rem; font-size: 0.875rem; color: rgba(255, 255, 255, 0.8); }
#footer .copyright { color: rgba(255, 255, 255, 0.7); font-size: 0.875rem; }
#footer .list-inline .btn { color: rgba(255, 255, 255, 0.85); background: transparent; border: 0; }


/* ---------- Collapsed menu (below 1200px, as on watchthedot.com) ---------- */
@media (max-width: 1199.98px) {
	#header .wtd-mainbar .container { flex-wrap: wrap; }
	#header .wtd-mainbar .navbar-collapse { flex-basis: 100%; }
	#header .wtd-mainbar .navbar-collapse.show,
	#header .wtd-mainbar .navbar-collapse.collapsing { padding-top: 0.75rem; }
	#header .wtd-mainbar .navbar-nav { gap: 0; }
	#header .wtd-mainbar .navbar-nav > li > a { padding: 0.8rem 0.25rem !important; font-size: 1.05rem; border-bottom: 1px solid var(--wtd-line); text-decoration: none; }
	#header .wtd-mainbar .navbar-nav > li > a:hover,
	#header .wtd-mainbar .navbar-nav .show > a { text-decoration: none; }
	#header .wtd-mainbar .dropdown-menu { border: 0; box-shadow: none; padding: 0.25rem 0 0.5rem 0.75rem; margin: 0; }
	#header .wtd-mainbar .dropdown-item { white-space: normal; font-size: 1rem; }
}

/* ---------- Phones ---------- */
@media (max-width: 575.98px) {
	#main-body { padding-top: 1rem; }
	.wtd-lede { font-size: 1.05rem; }
	#header .wtd-portalbar__label { padding-right: 0.5rem; }
	.table-responsive, .dataTables_wrapper { overflow-x: auto; }
}

/* ---------- Invoice page (viewinvoice.tpl) ---------- */
.invoice-container { border: 1px solid var(--wtd-line); border-radius: var(--wtd-radius); box-shadow: none; }
.wtd-invoice-logo img { width: 220px; height: auto; }
.invoice-container .invoice-header h3, .invoice-container .card-title { color: var(--wtd-ink); }
.invoice-container .card-header { background: var(--wtd-mist); }

/* ---------- Service alert banner (hook: watchthedot.php, feed from watchthedot.com) ---------- */
.wtd-alert-bar { color: #fff; font-size: 0.95rem; }
.wtd-alert-bar__inner { max-width: var(--wtd-wide); margin: 0 auto; padding: 0.6rem 15px; }
.wtd-alert-bar a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 0.2em; }
.wtd-alert-bar--info { background: var(--wtd-blue-dark); }
.wtd-alert-bar--warning { background: #b54708; }
.wtd-alert-bar--critical { background: #b42318; }

/* ---------- DNS management: domain on other nameservers (clientareadomaindns.tpl) ---------- */
.wtd-dns-elsewhere { background: var(--wtd-mist); border-radius: var(--wtd-radius); padding: 1.25rem 1.5rem; }
.wtd-dns-elsewhere h4 { color: var(--wtd-ink); font-size: 1.15rem; margin-bottom: 0.75rem; }
.wtd-dns-elsewhere ul { margin: 0 0 1rem; }
.wtd-dns-elsewhere code { color: var(--wtd-ink); background: var(--wtd-white); padding: 0.1rem 0.35rem; border-radius: 4px; }