/* CapConnect brand theme — child of six-improved (Bootstrap 3 / Six markup).
   Palette mirrors support.capconnect.com. Parent custom.css is imported so
   existing six-improved customisations keep working. */
@import url("../../six-improved/css/custom.css");

:root {
  --cc-primary: #324a6d; --cc-dark: #1d2f49; --cc-light: #eef3fa; --cc-accent: #1b79ea;
  --cc-accent-dark: #0e5fc4; --cc-secondary: #eaf7fd; --cc-success: #38a169; --cc-warning: #d69e2e;
  --cc-danger: #e53e3e; --cc-text: #1f2d3d; --cc-muted: #5b6b80; --cc-border: #d9e2ef;
  --cc-gradient: linear-gradient(135deg, #0e5fc4, #1b79ea);
  --cc-gradient-hover: linear-gradient(135deg, #0c52a8, #1568d0);
  --cc-shadow: 0 4px 20px rgba(50, 74, 109, .08);
  --cc-shadow-hover: 0 8px 32px rgba(50, 74, 109, .14);
  --cc-radius: 10px; --cc-radius-input: 8px;
}

/* ---- Base ---- */
body { font-family: "Outfit", "Cairo", "Open Sans", sans-serif; color: var(--cc-text); background: var(--cc-light); font-size: 15px; }
html[dir="rtl"] body, html[lang^="ar"] body { font-family: "Cairo", "Outfit", sans-serif; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3 { font-family: "Outfit", "Cairo", sans-serif; color: var(--cc-primary); font-weight: 600; }
a { color: var(--cc-accent-dark); }
a:hover, a:focus { color: var(--cc-primary); }
section#main-body { background: transparent; padding-top: 28px; padding-bottom: 32px; min-height: 400px; }

/* ---- Header ---- */
section#header { background: #fff; box-shadow: 0 2px 12px rgba(50, 74, 109, .08); border: 0; }
section#header .top-nav > li > a, section#header .top-nav a { color: var(--cc-primary); font-weight: 500; }
section#header .top-nav > li > a:hover { color: var(--cc-accent); text-decoration: none; }
section#header .top-nav .label-info, section#header .badge { background: var(--cc-accent); color: #fff; }
section#header .search { border: 1px solid var(--cc-border); border-radius: 20px; background: var(--cc-light); overflow: hidden; }
section#header .search:focus-within { border-color: var(--cc-accent); box-shadow: 0 0 0 3px rgba(27, 121, 234, .15); }
section#header .search .form-control, section#header .search .btn { background: transparent; border: 0; box-shadow: none; }
section#header .shopping-cart-btn, #cartItemCount { border-radius: var(--cc-radius-input); }
#cartItemCount, .badge-info { background: var(--cc-accent); }

/* Main menu */
section#main-menu { background: var(--cc-primary); border: 0; }
section#main-menu .navbar-main, .navbar-main { background: var(--cc-primary); border: 0; border-radius: 0; margin-bottom: 0; }
.navbar-main .navbar-nav > li > a { color: #eaf0f9; font-weight: 500; border-radius: 6px; white-space: nowrap; }
.navbar-main .navbar-nav > li > a:hover, .navbar-main .navbar-nav > li > a:focus,
.navbar-main .navbar-nav > .open > a, .navbar-main .navbar-nav > .open > a:hover, .navbar-main .navbar-nav > .open > a:focus {
  background: rgba(255, 255, 255, .12); color: #fff;
}
.navbar-main .navbar-toggle .icon-bar { background: #fff; }
.navbar-main .dropdown-menu, .dropdown-menu { border: 0; border-radius: var(--cc-radius); box-shadow: var(--cc-shadow-hover); padding: 6px; }
.dropdown-menu > li > a { border-radius: 6px; color: var(--cc-text); padding: 8px 14px; }
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { background: var(--cc-light); color: var(--cc-primary); }
.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover { background: var(--cc-accent); color: #fff; }

/* Page header + breadcrumb */
div.header-lined { border-bottom: 1px solid var(--cc-border); margin-bottom: 24px; }
div.header-lined h1 { color: var(--cc-primary); font-weight: 600; }
div.header-lined h1 small { color: var(--cc-muted); }
div.header-lined .breadcrumb { background: transparent; padding-left: 0; }
div.header-lined .breadcrumb > .active { color: var(--cc-muted); }

/* ---- Panels (cards) ---- */
.panel, .panel-default { border: 1px solid var(--cc-border); border-radius: var(--cc-radius); box-shadow: var(--cc-shadow); overflow: hidden; background: #fff; margin-bottom: 24px; }
.panel-default > .panel-heading, .panel-heading { background: var(--cc-light); color: var(--cc-primary); border-bottom: 1px solid var(--cc-border); padding: 14px 20px; }
.panel-title { color: var(--cc-primary); font-weight: 600; }
.panel-body { padding: 18px 20px; }
.panel-footer { background: var(--cc-light); border-top: 1px solid var(--cc-border); padding: 10px 20px; }
.panel-accent-blue > .panel-heading, .panel-accent-gold > .panel-heading, .panel-accent-green > .panel-heading,
.panel-accent-red > .panel-heading, .panel-accent-orange > .panel-heading { background: var(--cc-light); }
.panel-accent-blue { border-top: 3px solid var(--cc-accent); }
.panel-accent-green { border-top: 3px solid var(--cc-success); }
.panel-accent-gold, .panel-accent-orange { border-top: 3px solid var(--cc-warning); }
.panel-accent-red { border-top: 3px solid var(--cc-danger); }

/* Sidebar */
.panel-sidebar { border-color: var(--cc-border); font-size: 14.5px; margin-bottom: 20px; }
.panel-sidebar > .panel-heading { background: var(--cc-primary); border: 0; padding: 14px 20px; }
.panel-sidebar .panel-title { color: #fff; font-family: "Outfit", sans-serif; font-weight: 600; font-size: 1.05em; }
.panel-sidebar .panel-title i, .panel-sidebar .panel-minimise { color: #fff; opacity: .85; }
.panel-sidebar > .panel-footer { background: var(--cc-light); }
.list-group-item { border-color: var(--cc-border); padding: 11px 20px; color: var(--cc-text); }
a.list-group-item:hover, button.list-group-item:hover { background: var(--cc-light); color: var(--cc-primary); }
.list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus {
  background: var(--cc-accent); border-color: var(--cc-accent); color: #fff;
}
.list-group-item.active .badge { background: #fff; color: var(--cc-accent); }
.list-group-item > .badge { background: var(--cc-primary); }

/* Home tiles: the .tile is a Bootstrap column, so the card look goes on its inner link */
.tiles { margin: 0 -8px 12px; }
.tiles .tile { background: transparent !important; border: 0 !important; padding: 0 8px 16px; cursor: pointer; }
.tiles .tile:hover { background: transparent !important; }
.tiles .tile > a { display: block; position: relative; background: #fff; border: 1px solid var(--cc-border); border-radius: var(--cc-radius); box-shadow: var(--cc-shadow); padding: 18px 22px; transition: .2s; }
.tiles .tile:hover > a { transform: translateY(-2px); box-shadow: var(--cc-shadow-hover); }
.tile .icon { color: var(--cc-accent); opacity: .9; top: 14px; right: 18px; }
.tile .stat { color: var(--cc-primary); font-weight: 600; }
.tile .title { color: var(--cc-muted); }
.tile .highlight { margin-top: 10px; }

/* Home panels spacing */
.client-home-panels .panel > .panel-heading { padding: 14px 20px; background: #fff; }
.client-home-panels .panel > .panel-body { padding: 4px 20px 16px; }
.client-home-panels .panel > .panel-body p { padding: 8px 0; }
.client-home-panels .panel > .list-group .list-group-item { padding: 12px 20px; }
.client-home-panels .panel > .panel-footer { padding: 10px 20px; }

/* ---- Buttons ---- */
.btn { border-radius: var(--cc-radius-input); font-weight: 500; padding: 8px 18px; transition: .15s; }
.btn-sm, .btn-xs { padding: 5px 12px; }
.btn-primary { background: var(--cc-gradient); border-color: var(--cc-accent-dark); color: #fff; }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary {
  background: var(--cc-gradient-hover); border-color: #0c52a8; color: #fff;
}
.btn-default { background: #fff; border: 1px solid var(--cc-border); color: var(--cc-primary); }
.btn-default:hover, .btn-default:focus, .btn-default:active { background: var(--cc-light); border-color: var(--cc-primary); color: var(--cc-primary); }
.btn-info { background: var(--cc-accent); border-color: var(--cc-accent); }
.btn-success { background: var(--cc-success); border-color: var(--cc-success); }
.btn-warning { background: var(--cc-warning); border-color: var(--cc-warning); }
.btn-danger { background: var(--cc-danger); border-color: var(--cc-danger); }
.btn-link { color: var(--cc-accent-dark); }

/* ---- Forms ---- */
.form-control, .custom-select { border: 1px solid var(--cc-border); border-radius: var(--cc-radius-input); height: 40px; box-shadow: none; }
textarea.form-control { height: auto; }
.form-control:focus { border-color: var(--cc-accent); box-shadow: 0 0 0 3px rgba(27, 121, 234, .15); }
.input-group-addon { background: var(--cc-light); border-color: var(--cc-border); color: var(--cc-primary); }
label, .control-label { color: var(--cc-primary); font-weight: 500; }
.form-group { margin-bottom: 18px; }

/* ---- Tables / tabs / pagination ---- */
.table > thead > tr > th { background: var(--cc-light); color: var(--cc-primary); border-bottom: 2px solid var(--cc-border); font-weight: 600; padding: 12px 14px; }
.table > tbody > tr > td { padding: 12px 14px; vertical-align: middle; border-color: var(--cc-border); }
.table-hover > tbody > tr:hover, .table-list tbody tr:hover { background: var(--cc-secondary); }
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { color: var(--cc-primary); border-bottom: 2px solid var(--cc-accent); font-weight: 600; }
.nav-pills > li.active > a, .nav-pills > li.active > a:hover { background: var(--cc-accent); }
.pagination > li > a, .pagination > li > span { color: var(--cc-accent-dark); border-color: var(--cc-border); }
.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover { background: var(--cc-accent); border-color: var(--cc-accent); color: #fff; }

/* ---- Status labels ---- */
.label { border-radius: 20px; padding: .35em .85em; font-weight: 600; font-size: 12px; }
.label-primary { background: var(--cc-primary); }
.label-info { background: var(--cc-accent); }
.label-success, .status-active, .status-paid, .status-completed { background: #dcfce7 !important; color: #166534 !important; }
.label-warning, .status-pending, .status-unpaid, .status-payment-pending, .status-answered { background: #fef3c7 !important; color: #92400e !important; }
.label-danger, .status-suspended, .status-terminated, .status-cancelled, .status-overdue, .status-expired, .status-fraud, .status-collections { background: #fee2e2 !important; color: #991b1b !important; }

/* ---- Alerts ---- */
.alert { border-radius: var(--cc-radius); padding: 14px 18px; }
.alert-info { background: var(--cc-secondary); border-color: #b9dff2; color: var(--cc-primary); }
.alert-success { background: #dcfce7; border-color: #a7e5bb; color: #166534; }
.alert-warning { background: #fef3c7; border-color: #f4dc8a; color: #92400e; }
.alert-danger { background: #fee2e2; border-color: #f7b4b4; color: #991b1b; }

/* ---- Home banner / domain search ---- */
section#home-banner { background: linear-gradient(135deg, var(--cc-dark), var(--cc-primary) 60%, var(--cc-accent-dark)); color: #fff; }
section#home-banner h2, section#home-banner p { color: #fff; }

/* ---- Modals ---- */
.modal-content { border: 0; border-radius: var(--cc-radius); box-shadow: var(--cc-shadow-hover); }
.modal-header { background: var(--cc-light); border-bottom: 1px solid var(--cc-border); border-radius: var(--cc-radius) var(--cc-radius) 0 0; }
.modal-title { color: var(--cc-primary); }

/* ---- Login ---- */
.logincontainer .panel, .login-form .panel { box-shadow: var(--cc-shadow-hover); }

/* ---- Footer ---- */
section#footer { background: var(--cc-dark); color: #c8d5e8; border: 0; padding: 28px 0 22px; margin-top: 0; }
section#footer a, section#footer .btn, section#footer .btn-link { color: #dbe6f5; }
section#footer a:hover { color: #fff; text-decoration: none; }
section#footer p.copyright, section#footer .copyright { color: #93a6c0; }
section#footer .nav > li > a { padding: 6px 16px 6px 0; }

::selection { background: rgba(27, 121, 234, .25); }
@media (max-width: 767px) { section#main-body { padding-top: 18px; } }

/* ---- Notifications as a bell icon (replaces the "Notifications ▾" text link) ---- */
section#header .top-nav #accountNotifications {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0; font-size: 0; line-height: 1; border-radius: 50%;
  background: var(--cc-light); color: var(--cc-primary); border: 1px solid var(--cc-border);
}
section#header .top-nav #accountNotifications:hover { background: #fff; color: var(--cc-accent); box-shadow: var(--cc-shadow); }
section#header .top-nav #accountNotifications::before {
  content: "\f0f3"; font-family: "Font Awesome 5 Pro"; font-weight: 900; font-size: 17px;
}
section#header .top-nav #accountNotifications .caret { display: none; }
section#header .top-nav #accountNotifications .label {
  position: absolute; top: 4px; right: 4px; width: 10px; height: 10px; padding: 0; overflow: hidden;
  font-size: 0; border-radius: 50%; background: var(--cc-danger); border: 2px solid #fff; box-sizing: content-box;
}

/* =========================================================
   Round 2 fixes
   ========================================================= */
/* Header top-nav: readable Logout button, tidy spacing */
section#header .top-nav { display: flex; align-items: center; gap: 10px; }
section#header .top-nav > li { padding: 0; margin: 0; float: none; }
section#header .top-nav > li.primary-action { border: 0; padding-left: 0; margin-left: 4px; }
section#header .top-nav > li.primary-action > a.btn,
section#header .top-nav > li.primary-action > a.btn:visited {
  background: var(--cc-gradient); color: #fff !important; border: 0; border-radius: var(--cc-radius-input);
  padding: 9px 20px; font-weight: 500; line-height: 1.2;
}
section#header .top-nav > li.primary-action > a.btn:hover { background: var(--cc-gradient-hover); color: #fff !important; text-decoration: none; }
section#header .top-nav > li > a.btn-logged-in-admin { color: var(--cc-primary); font-size: 1.3em; padding: 4px 8px; background: transparent; border: 0; }

/* Status pills: compact, borderless */
.label.status, span.status, .table-list .label.status {
  display: inline-block; border: 0 !important; border-radius: 20px; padding: 4px 14px !important;
  font-size: 12px; line-height: 1.5; font-weight: 600; min-width: 0; width: auto; box-shadow: none;
}
.status-grace, .status-pending-registration, .status-redemption, .status-pending-transfer { background: #fef3c7 !important; color: #92400e !important; }
.status-transferred-away, .status-onhold, .status-customer-reply { background: var(--cc-secondary) !important; color: var(--cc-primary) !important; }

/* DataTables header: light instead of dark grey */
.dataTables_wrapper .dataTables_info, div.dataTables_wrapper div.dataTables_info {
  background: #fff !important; color: var(--cc-muted); border: 0; padding: 18px 20px !important; font-weight: 500; font-size: 14px;
}
.dataTables_wrapper .dataTables_filter label { padding: 10px 14px; }
.dataTables_wrapper .dataTables_filter label .form-control {
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%235b6b80' stroke-width='2' stroke-linecap='round'><circle cx='8.5' cy='8.5' r='6'/><path d='M13 13l5 5'/></svg>") no-repeat 14px center;
  background-size: 16px; border: 1px solid var(--cc-border); border-radius: var(--cc-radius-input);
  padding: 8px 12px 8px 42px !important; height: 40px; width: 240px; font-size: 14px;
}
.dataTables_wrapper table.table-list thead th,
.dataTables_wrapper table.table-list thead th:nth-child(even) { border-bottom: 2px solid var(--cc-accent); font-weight: 600; background: var(--cc-light); }
.dataTables_wrapper table.table-list thead th.sorting_asc, .dataTables_wrapper table.table-list thead th.sorting_desc { background: var(--cc-secondary); }
div.listtable, .table-container { background: #fff; border: 1px solid var(--cc-border); border-radius: var(--cc-radius); box-shadow: var(--cc-shadow); overflow: hidden; }
.dataTables_wrapper .dataTables_length label, .dataTables_wrapper .dataTables_paginate { padding: 12px 20px; }

/* Hook-built blocks (domains/services/tickets): match brand */
.domains-sidebar-top, .services-sidebar-top, .tickets-sidebar-top, .domains-toolbar {
  background: #fff !important; border: 1px solid var(--cc-border) !important; border-radius: var(--cc-radius) !important; box-shadow: var(--cc-shadow);
}
.domains-toolbar .dt-action { border-radius: var(--cc-radius-input); border-color: var(--cc-border); color: var(--cc-primary); }

/* Page title: smaller, brand-like */
div.header-lined h1 { font-size: 30px; margin: 10px 0 8px; }
div.header-lined .breadcrumb { margin-bottom: 12px; font-size: 13px; }

/* =========================================================
   Typography scale (Outfit runs large/heavy — tighten it)
   ========================================================= */
html { font-size: 14px; }
body { font-size: 14px; line-height: 1.55; font-weight: 400; -webkit-font-smoothing: antialiased; }
h1, .h1 { font-size: 26px; font-weight: 600; letter-spacing: -.2px; line-height: 1.25; }
h2, .h2 { font-size: 22px; font-weight: 600; line-height: 1.3; }
h3, .h3 { font-size: 18px; font-weight: 600; }
h4, .h4 { font-size: 16px; font-weight: 600; }
h5, .h5, h6, .h6 { font-size: 14px; font-weight: 600; }
div.header-lined h1 { font-size: 26px; margin: 6px 0 10px; }
div.header-lined .breadcrumb { font-size: 12.5px; }
div.header-lined { padding-bottom: 6px; }
small, .small { font-size: 12.5px; }
.lead { font-size: 16px; }

/* Header + menu */
section#header .top-nav, section#header .top-nav a { font-size: 13.5px; }
section#header .logo img, .navbar-brand img { max-height: 40px !important; height: 40px !important; }
section#header { padding: 14px 0 !important; }
.navbar-main .navbar-nav > li > a { font-size: 14px; font-weight: 500; padding: 17px 13px; letter-spacing: 0; }
.navbar-main .dropdown-menu > li > a { font-size: 13.5px; }

/* Panels, sidebar, lists */
.panel-title, .panel-heading { font-size: 15px; font-weight: 600; }
.panel-sidebar .panel-title { font-size: 14.5px; font-weight: 500; }
.panel-sidebar { font-size: 13.5px; }
.list-group-item { font-size: 13.5px; }
.client-home-panels .panel { font-size: 13.5px; }
.client-home-panels .panel > .panel-heading .panel-title { font-size: 15px; }
.panel-body, .panel-body p { font-size: 13.5px; }

/* Tiles */
.tile .stat { font-size: 34px; font-weight: 500; }
.tile .title { font-size: 11.5px; font-weight: 600; letter-spacing: .4px; }
.tile .icon { font-size: 40px; }

/* Controls */
.btn { font-size: 13.5px; }
.btn-sm { font-size: 12.5px; }
.form-control, .dataTables_wrapper .dataTables_filter label .form-control { font-size: 13.5px; }
label, .control-label { font-size: 13.5px; font-weight: 500; }
.table { font-size: 13.5px; }
.table > thead > tr > th { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; font-weight: 600; }
.label, .label.status, span.status { font-size: 11.5px; }
.badge { font-size: 11px; font-weight: 600; }
.alert { font-size: 13.5px; }
section#footer, section#footer a { font-size: 13.5px; }
.modal-title { font-size: 17px; }

/* Bell icon: make sure icon font wins over the global font hook */
section#header .top-nav #accountNotifications::before { font-family: "Font Awesome 5 Pro" !important; font-weight: 900 !important; }

@media (max-width: 767px) {
  h1, div.header-lined h1 { font-size: 22px; }
  .tile .stat { font-size: 30px; }
}

/* =========================================================
   Colour balance: replace leftover Six teal/grey with brand palette
   ========================================================= */
/* Menu: "Bonjour, …" account tab used Six teal (#043d5f) */
.navbar-main li.account { background-color: var(--cc-dark); }
.navbar-main li.account > a { color: #fff; }
/* Sidebar active item was dark grey */
.panel-sidebar a.list-group-item.active, .panel-sidebar a.list-group-item.active:focus, .panel-sidebar a.list-group-item.active:hover,
.panel-sidebar .list-group-item.active {
  background: var(--cc-accent) !important; border-color: var(--cc-accent) !important; color: #fff !important;
}
.panel-sidebar .list-group-item.active i, .panel-sidebar .list-group-item.active .badge { color: #fff; }
.panel-sidebar .list-group-item.active .badge { background: rgba(255, 255, 255, .25); }
.panel-sidebar .list-group-item.disabled, .panel-sidebar .list-group-item.disabled:hover { background: #f7f9fc; color: #9aa7b8; }
/* Page title + breadcrumb: Six used #058 / #ccc / #888 */
div.header-lined h1 { color: var(--cc-primary); border-bottom: 1px solid var(--cc-border); font-weight: 600; }
div.header-lined .breadcrumb li a { color: var(--cc-accent-dark); }
div.header-lined .breadcrumb > .active { color: var(--cc-muted); }
.breadcrumb > li + li:before { color: #9aa7b8; }
/* Read-only / disabled inputs: soft brand tint, not neutral grey */
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control, select.form-control[disabled] {
  background: var(--cc-light); color: var(--cc-muted); border-color: var(--cc-border); opacity: 1; cursor: not-allowed;
}
/* Hairlines / table rules / leftover greys */
hr { border-color: var(--cc-border); }
.table > thead > tr > th, .table > tbody > tr > td, .table > tbody + tbody { border-color: var(--cc-border); }
.list-group-item { border-color: var(--cc-border); }
.panel-sidebar .list-group-item { background: #fff; color: var(--cc-text); }
.panel-sidebar a.list-group-item:hover { background: var(--cc-light); color: var(--cc-primary); }
/* Success buttons: brand green, consistent everywhere */
.btn-success, .btn-success:focus { background: var(--cc-success); border-color: #2f855a; }
.btn-success:hover { background: #2f855a; border-color: #276749; }
/* Links inside content */
.panel-body a:not(.btn), .table a:not(.btn) { color: var(--cc-accent-dark); }
.panel-body a:not(.btn):hover, .table a:not(.btn):hover { color: var(--cc-primary); }
/* Product-status text colours (Six defaults) → brand */
.product-status-active { color: var(--cc-success); }
.product-status-pending { color: var(--cc-warning); }
.product-status-suspended, .product-status-terminated, .product-status-cancelled { color: var(--cc-danger); }
/* Checkbox / radio accent */
input[type="checkbox"], input[type="radio"] { accent-color: var(--cc-accent); }

/* Controls inside panels must never overflow the card (e.g. addon select on product details) */
.panel-body select.form-control, .panel-body .form-control, .panel-body .custom-select { width: 100%; max-width: 100%; box-sizing: border-box; }
.panel-body .btn-block, .panel-body .btn.btn-default.btn-block { max-width: 100%; box-sizing: border-box; }
.panel-body { overflow-wrap: anywhere; }
.panel-body .input-group { max-width: 100%; }

/* Hook-built filter chips (domains/services): brand-aligned status colours */
.ds-link, .ss-link { font-family: "Outfit", sans-serif; font-weight: 500; font-size: 13px; background: #fff; }
.ds-link[data-status="active"], .ss-link[data-status="active"] { border-color: var(--cc-success) !important; color: var(--cc-success) !important; }
.ds-link[data-status="active"] .badge, .ss-link[data-status="active"] .badge { background: var(--cc-success) !important; color: #fff !important; }
.ds-link[data-status="active"]:hover, .ds-link[data-status="active"].active,
.ss-link[data-status="active"]:hover, .ss-link[data-status="active"].active { background: var(--cc-success) !important; color: #fff !important; }
.ds-link[data-status="expiring"], .ds-link[data-status="grace"], .ss-link[data-status="grace"] { border-color: var(--cc-warning) !important; color: #b7791f !important; }
.ds-link[data-status="expiring"] .badge, .ds-link[data-status="grace"] .badge, .ss-link[data-status="grace"] .badge { background: var(--cc-warning) !important; color: #fff !important; }
.ds-link[data-status="expiring"]:hover, .ds-link[data-status="expiring"].active,
.ds-link[data-status="grace"]:hover, .ds-link[data-status="grace"].active { background: var(--cc-warning) !important; color: #fff !important; }
.ds-link[data-status="expired"], .ss-link[data-status="expired"] { border-color: var(--cc-danger) !important; color: var(--cc-danger) !important; }
.ds-link[data-status="expired"] .badge, .ss-link[data-status="expired"] .badge { background: var(--cc-danger) !important; color: #fff !important; }
.ds-link[data-status="expired"]:hover, .ds-link[data-status="expired"].active,
.ss-link[data-status="expired"]:hover, .ss-link[data-status="expired"].active { background: var(--cc-danger) !important; color: #fff !important; }
.ds-link[data-status="all"], .ds-link[data-status="pending"], .ds-link[data-status="cancelled"], .ds-link[data-status="transferred"] { border-color: var(--cc-primary) !important; color: var(--cc-primary) !important; }
.ds-link[data-status="all"] .badge, .ds-link[data-status="pending"] .badge, .ds-link[data-status="cancelled"] .badge, .ds-link[data-status="transferred"] .badge { background: var(--cc-primary) !important; color: #fff !important; }
.ds-link[data-status="all"]:hover, .ds-link[data-status="all"].active { background: var(--cc-primary) !important; color: #fff !important; }
/* Bulk-action buttons above the table */
.domains-toolbar .dt-label { color: var(--cc-muted); font-weight: 600; letter-spacing: .5px; }
.domains-toolbar.has-selection .dt-action:not(.disabled):hover { background: var(--cc-accent); border-color: var(--cc-accent); color: #fff; }

/* =========================================================
   DNS Manager module (capconnect_dns) — brand overrides
   ========================================================= */
.cc-dns-client .panel-primary { border: 1px solid var(--cc-border) !important; border-top: 3px solid var(--cc-accent) !important; }
.cc-dns-client .panel-primary > .panel-heading { background: var(--cc-primary) !important; color: #fff !important; border: 0 !important; }
.cc-dns-client .panel-primary > .panel-heading .panel-title, .cc-dns-client .panel-primary > .panel-heading * { color: #fff !important; }
.cc-dns-client .btn-primary, .cc-dns-client .btn-primary:focus { background: var(--cc-gradient) !important; border-color: var(--cc-accent-dark) !important; color: #fff !important; }
.cc-dns-client .btn-primary:hover, .cc-dns-client .btn-primary:active { background: var(--cc-gradient-hover) !important; color: #fff !important; }
.cc-dns-client .btn-danger { background: #fff; color: var(--cc-danger); border: 1px solid var(--cc-danger); }
.cc-dns-client .btn-danger:hover { background: var(--cc-danger); color: #fff; }
.cc-dns-client .btn-xs { padding: 4px 12px; font-size: 12px; }
.cc-dns-client a { color: var(--cc-accent-dark); }
.cc-dns-domain-title, .cc-dns-header h2 { color: var(--cc-primary) !important; font-weight: 600; }

/* Sync banner */
.cc-dns-sync-banner { border-radius: var(--cc-radius) !important; border: 1px solid var(--cc-border) !important; padding: 14px 18px !important; }
.cc-dns-sync-banner.cc-dns-sync-synced { background: #f0fbf4 !important; border-color: #b7e4c7 !important; color: #166534 !important; }
.cc-dns-sync-banner.cc-dns-sync-pending, .cc-dns-sync-banner.cc-dns-sync-partial { background: #fffbeb !important; border-color: #f4dc8a !important; color: #92400e !important; }
.cc-dns-sync-banner.cc-dns-sync-failed { background: #fef2f2 !important; border-color: #f7b4b4 !important; color: #991b1b !important; }

/* Record-type badges: one calm palette instead of seven random colours */
.cc-dns-type-badge { border-radius: 6px !important; font-size: 11.5px !important; font-weight: 600 !important; letter-spacing: .4px; padding: 4px 10px !important; background: var(--cc-light) !important; color: var(--cc-primary) !important; border: 1px solid var(--cc-border); }
.cc-dns-type-a, .cc-dns-type-aaaa { background: #e8f1fe !important; color: var(--cc-accent-dark) !important; border-color: #c4dbfb; }
.cc-dns-type-cname { background: #e6f6ec !important; color: #166534 !important; border-color: #b7e4c7; }
.cc-dns-type-mx { background: #fef3c7 !important; color: #92400e !important; border-color: #f4dc8a; }
.cc-dns-type-txt { background: #eef0fb !important; color: #4338ca !important; border-color: #d0d5f5; }
.cc-dns-type-srv { background: #fee2e2 !important; color: #991b1b !important; border-color: #f7b4b4; }
.cc-dns-type-caa { background: var(--cc-secondary) !important; color: #0e7490 !important; border-color: #b9dff2; }
.cc-dns-type-ns { background: var(--cc-light) !important; color: var(--cc-muted) !important; }

/* Records table */
.cc-dns-records-table > thead > tr > th { background: var(--cc-light); color: var(--cc-primary); }
.cc-dns-records-table > tbody > tr:nth-child(odd) { background: #fff; }
.cc-dns-records-table > tbody > tr:nth-child(even) { background: #fafcff; }
.cc-dns-records-table tbody tr:hover { background: var(--cc-secondary) !important; }
.cc-dns-records-table td .btn + .btn { margin-top: 0; margin-left: 4px; }
.cc-dns-records-table td { white-space: nowrap; }
.cc-dns-records-table td.cc-cell-actions, .cc-dns-records-table td:last-child { white-space: nowrap; }

/* Add-record form: button never clips, controls align */
.cc-dns-client .panel-body .btn-block { white-space: normal; padding: 10px 14px; }
.cc-dns-client .input-group-addon { background: var(--cc-light); color: var(--cc-muted); }
.cc-dns-preset-card { border: 1px solid var(--cc-border) !important; border-radius: var(--cc-radius) !important; box-shadow: var(--cc-shadow); }
.cc-dns-preset-card:hover { border-color: var(--cc-accent) !important; box-shadow: var(--cc-shadow-hover); }
.cc-dns-toast.cc-dns-toast-success { background: var(--cc-success); }
.cc-dns-toast.cc-dns-toast-error { background: var(--cc-danger); }
.cc-dns-toast.cc-dns-toast-warning { background: var(--cc-warning); }
.cc-dns-toast.cc-dns-toast-info { background: var(--cc-accent); }

/* =========================================================
   Icons: lighter Font Awesome Pro weights + brand colours
   (solid 900 glyphs looked heavy next to Outfit)
   ========================================================= */
/* Row action buttons (wrench / globe / gear / caret) */
.table-list .btn-group .btn, .table .btn-group .btn { background: #fff; border: 1px solid var(--cc-border); padding: 6px 11px; color: var(--cc-primary); }
.table-list .btn-group .btn:first-child, .table .btn-group .btn:first-child { border-radius: var(--cc-radius-input) 0 0 var(--cc-radius-input); }
.table-list .btn-group .btn:last-child, .table .btn-group .btn:last-child { border-radius: 0 var(--cc-radius-input) var(--cc-radius-input) 0; }
.table-list .btn-group .btn i, .table .btn-group .btn i { font-weight: 300 !important; font-size: 15px; color: var(--cc-primary); }
.table-list .btn-group .btn:hover, .table .btn-group .btn:hover { background: var(--cc-accent); border-color: var(--cc-accent); }
.table-list .btn-group .btn:hover i, .table .btn-group .btn:hover i { color: #fff; }
.table-list .btn-group .caret, .table .btn-group .caret { border-top-color: var(--cc-primary); }
.table-list .btn-group .btn:hover .caret { border-top-color: #fff; }

/* Domains bulk toolbar (hook) */
.domains-toolbar .dt-action i { font-weight: 300 !important; font-size: 14px; margin-right: 4px; }

/* Sidebar + panel header icons: regular weight, softer */
.panel-heading i.fas, .panel-title i.fas, .panel-sidebar .panel-title i { font-weight: 400 !important; }
.panel-sidebar .list-group-item i.fas, .panel-sidebar .list-group-item i.far, .panel-sidebar .list-group-item i.fal { font-weight: 300 !important; color: var(--cc-muted); width: 20px; text-align: center; }
.panel-sidebar .list-group-item.active i { color: #fff !important; }
.panel-sidebar a.list-group-item:hover i { color: var(--cc-accent); }
.panel-sidebar .panel-minimise { font-weight: 400 !important; }
.client-home-panels .panel-title i { color: var(--cc-accent); font-weight: 400 !important; }

/* Home tiles + shortcut icons */
.tile .icon i { font-weight: 300 !important; }

/* Top header icons */
section#header .top-nav #accountNotifications::before { font-weight: 400 !important; }
section#header .top-nav > li > a.btn-logged-in-admin i, section#header .top-nav a i { font-weight: 400 !important; }

/* DataTables sort arrows: smaller, brand-tinted */
table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:after,
.dataTables_wrapper .sorting:after, .dataTables_wrapper .sorting_asc:after, .dataTables_wrapper .sorting_desc:after { color: var(--cc-accent); opacity: .55; font-weight: 300; font-size: 13px; }
.dataTables_wrapper .sorting_asc:after, .dataTables_wrapper .sorting_desc:after { opacity: 1; }

/* Generic: toolbar / button icons and status check marks */
.btn i.fas, .btn i.far { font-weight: 400; }
.fa-check.text-success, td .fa-check, .fas.fa-check { font-weight: 400; color: var(--cc-success); }
.label i, .badge i { font-weight: 400; }

/* =========================================================
   Round 3: glyphicons → light FA icons; calmer, more harmonious colours
   ========================================================= */
/* (blanket .glyphicon override removed — see mapped list at the end of the file) */
.glyphicon-globe:before { content: "\f0ac" !important; }
.glyphicon-cog:before { content: "\f013" !important; }
.glyphicon-user:before { content: "\f007" !important; }
.glyphicon-refresh:before { content: "\f021" !important; }
.glyphicon-lock:before { content: "\f023" !important; }
.glyphicon-ok:before { content: "\f00c" !important; }
.glyphicon-remove:before { content: "\f00d" !important; }
.glyphicon-plus:before { content: "\f067" !important; }
.glyphicon-search:before { content: "\f002" !important; }
.glyphicon-envelope:before { content: "\f0e0" !important; }
.glyphicon-pencil:before { content: "\f303" !important; }
.glyphicon-trash:before { content: "\f2ed" !important; }
.glyphicon-download:before, .glyphicon-download-alt:before { content: "\f019" !important; }
.glyphicon-arrow-right:before { content: "\f061" !important; }
.glyphicon-arrow-left:before { content: "\f060" !important; }
.glyphicon-chevron-right:before { content: "\f054" !important; }
.glyphicon-chevron-left:before { content: "\f053" !important; }
.glyphicon-info-sign:before { content: "\f05a" !important; }
.glyphicon-exclamation-sign:before { content: "\f06a" !important; }
.glyphicon-list:before { content: "\f03a" !important; }
.glyphicon-edit:before { content: "\f044" !important; }
.glyphicon-cloud:before { content: "\f0c2" !important; }
.btn .glyphicon { font-size: 15px; color: var(--cc-primary); }
.btn:hover .glyphicon { color: #fff; }
.dropdown-menu .glyphicon { width: 18px; color: var(--cc-muted); margin-right: 4px; }
.dropdown-menu > li > a:hover .glyphicon { color: var(--cc-accent); }

/* Filter chips: neutral navy outline; colour lives only in the small count badge */
.ds-link, .ss-link, .ds-link[data-status], .ss-link[data-status] {
  border: 1px solid var(--cc-border) !important; color: var(--cc-primary) !important; background: #fff !important; box-shadow: none;
}
.ds-link:hover, .ss-link:hover, .ds-link[data-status]:hover, .ss-link[data-status]:hover {
  border-color: var(--cc-accent) !important; background: var(--cc-secondary) !important; color: var(--cc-primary) !important;
}
.ds-link.active, .ss-link.active, .ds-link[data-status].active, .ss-link[data-status].active {
  background: var(--cc-primary) !important; border-color: var(--cc-primary) !important; color: #fff !important;
}
.ds-link .badge, .ss-link .badge { background: var(--cc-light) !important; color: var(--cc-primary) !important; }
.ds-link[data-status="active"] .badge, .ss-link[data-status="active"] .badge { background: #dcfce7 !important; color: #166534 !important; }
.ds-link[data-status="expiring"] .badge, .ds-link[data-status="grace"] .badge, .ss-link[data-status="grace"] .badge { background: #fef3c7 !important; color: #92400e !important; }
.ds-link[data-status="expired"] .badge, .ss-link[data-status="expired"] .badge { background: #fee2e2 !important; color: #991b1b !important; }
.ds-link.active .badge, .ss-link.active .badge { background: rgba(255,255,255,.22) !important; color: #fff !important; }

/* Table: quieter, single-accent look */
.fas.fa-check, td .fa-check { color: var(--cc-accent); }
.dataTables_wrapper table.table-list thead th, .dataTables_wrapper table.table-list thead th:nth-child(even) { border-bottom: 1px solid var(--cc-border); }
.dataTables_wrapper table.table-list thead th.sorting_asc, .dataTables_wrapper table.table-list thead th.sorting_desc { box-shadow: inset 0 -2px 0 var(--cc-accent); }
.table > tbody > tr:nth-child(even) > td { background: #fafcff; }
input[type="checkbox"]:checked { accent-color: var(--cc-primary); }
.label.status.status-active, .status-active { background: #e6f6ec !important; color: #166534 !important; }

/* ANRT labels from the hook */
.anrt-label { border-radius: 20px !important; font-size: 11px !important; font-weight: 600 !important; }
.anrt-verified { background: #e6f6ec !important; color: #166534 !important; border: 1px solid #b7e4c7 !important; }

/* Page chrome: white cards on a very light tint, subtle shadow only */
body { background: #f4f7fb; }
.panel, .tiles .tile > a, .dataTables_wrapper, div.listtable, .table-container { box-shadow: 0 1px 3px rgba(50, 74, 109, .06), 0 4px 16px rgba(50, 74, 109, .05); }

/* =========================================================
   Bulk domain management (clientarea.php?action=bulkdomain)
   Legacy Bootstrap-2 markup: control-group / controls / btn-large
   ========================================================= */
form.form-horizontal[action*="action=bulkdomain"] {
  background: #fff; border: 1px solid var(--cc-border); border-radius: var(--cc-radius);
  box-shadow: var(--cc-shadow); padding: 28px 32px; max-width: 880px; margin: 0 0 24px;
}
form[action*="action=bulkdomain"] > p { color: var(--cc-text); line-height: 1.6; margin: 0 0 12px; }
form[action*="action=bulkdomain"] br { display: none; }
form[action*="action=bulkdomain"] > p[align="center"], form[action*="action=bulkdomain"] fieldset p[align="center"] {
  text-align: center; margin: 24px 0 0; display: flex; justify-content: center; gap: 12px; flex-wrap: wrap;
}

/* Affected domains list */
form[action*="action=bulkdomain"] blockquote {
  background: var(--cc-light); border: 1px solid var(--cc-border); border-left: 4px solid var(--cc-accent);
  border-radius: var(--cc-radius-input); padding: 14px 20px; margin: 8px 0 22px; font-size: 14px; color: var(--cc-primary); font-weight: 500; line-height: 1.9;
  max-height: 220px; overflow: auto;
}

/* Radio choices become selectable rows */
form[action*="action=bulkdomain"] p > label.full.control-label {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; float: none; padding: 12px 16px; margin: 0 0 8px;
  border: 1px solid var(--cc-border); border-radius: var(--cc-radius-input); background: #fff; cursor: pointer; font-weight: 500; color: var(--cc-primary);
}
form[action*="action=bulkdomain"] p > label.full.control-label:hover { border-color: var(--cc-accent); background: var(--cc-secondary); }
form[action*="action=bulkdomain"] input.radio.inline { margin: 0; position: static; float: none; width: 16px; height: 16px; accent-color: var(--cc-accent); }

/* Nameserver / contact fields */
form[action*="action=bulkdomain"] fieldset { border: 0; padding: 0; margin: 12px 0 0; min-width: 0; }
form[action*="action=bulkdomain"] .control-group { display: flex; align-items: center; gap: 16px; margin: 0 0 14px; padding: 0; border: 0; }
form[action*="action=bulkdomain"] fieldset.control-group { display: block; }
form[action*="action=bulkdomain"] .control-group > .control-label {
  flex: 0 0 190px; width: 190px; float: none; text-align: left; padding: 0; margin: 0; color: var(--cc-primary); font-weight: 500; font-size: 13.5px;
}
form[action*="action=bulkdomain"] .controls { flex: 1 1 auto; margin: 0; padding: 0; min-width: 0; }
form[action*="action=bulkdomain"] .controls input[type="text"], form[action*="action=bulkdomain"] .controls select, form[action*="action=bulkdomain"] input.input-xlarge,
form[action*="action=bulkdomain"] input[type="text"] {
  width: 100%; height: 42px; padding: 8px 14px; border: 1px solid var(--cc-border); border-radius: var(--cc-radius-input);
  background: #fff; color: var(--cc-text); font-size: 14px; box-shadow: none; box-sizing: border-box;
}
form[action*="action=bulkdomain"] input[type="text"]:focus, form[action*="action=bulkdomain"] select:focus { border-color: var(--cc-accent); outline: 0; box-shadow: 0 0 0 3px rgba(27,121,234,.15); }
form[action*="action=bulkdomain"] input[disabled] { background: var(--cc-light); color: var(--cc-muted); cursor: not-allowed; }
form[action*="action=bulkdomain"] .onecol { background: var(--cc-light); border: 1px solid var(--cc-border); border-radius: var(--cc-radius-input); padding: 18px 20px; margin: 0 0 18px; }

/* Buttons */
form[action*="action=bulkdomain"] .btn-large, a.btn-large { padding: 11px 28px; font-size: 14.5px; border-radius: var(--cc-radius-input); }
form[action*="action=bulkdomain"] .btn-success { background: var(--cc-success); border-color: #2f855a; color: #fff; }
form[action*="action=bulkdomain"] .btn-danger { background: #fff; border: 1px solid var(--cc-danger); color: var(--cc-danger); }
form[action*="action=bulkdomain"] .btn-danger:hover { background: var(--cc-danger); color: #fff; }

/* Legacy BS2 alerts (alert-error) */
.alert-error { background: #fee2e2; border-color: #f7b4b4; color: #991b1b; }
.alert.alert-success p, .alert.alert-error p { margin: 0; }

@media (max-width: 767px) {
  form.form-horizontal[action*="action=bulkdomain"] { padding: 18px; }
  form[action*="action=bulkdomain"] .control-group { flex-direction: column; align-items: stretch; gap: 6px; }
  form[action*="action=bulkdomain"] .control-group > .control-label { flex: none; width: auto; }
}

/* Sidebar count badges: readable soft pills */
.list-group-item > .badge, .panel-sidebar .list-group-item .badge, .panel-sidebar .badge {
  background: var(--cc-light) !important; color: var(--cc-primary) !important; font-weight: 600; border: 1px solid var(--cc-border);
  min-width: 28px; padding: 3px 9px; border-radius: 20px; line-height: 1.3;
}
.panel-sidebar .list-group-item.active .badge, .list-group-item.active > .badge {
  background: rgba(255, 255, 255, .22) !important; color: #fff !important; border-color: transparent;
}

/* =========================================================
   Round 4: slim filter bar + clean table header
   ========================================================= */
/* Filter chips bar: compact, no big empty box */
.domains-sidebar-top, .services-sidebar-top, .tickets-sidebar-top {
  display: flex !important; flex-wrap: wrap; align-items: center; gap: 8px 20px !important;
  padding: 10px 14px !important; margin-bottom: 14px !important; min-height: 0 !important;
}
.domains-sidebar-top .ds-section, .services-sidebar-top .ss-section { flex: 0 0 auto !important; min-width: 0 !important; margin: 0 !important; }
.domains-sidebar-top .ds-section-title, .services-sidebar-top .ss-section-title { display: none; }
.domains-sidebar-top .ds-links, .services-sidebar-top .ss-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.ds-link, .ss-link { padding: 6px 14px !important; margin: 0 !important; line-height: 1.3; }
.domains-sidebar-top + .domains-toolbar, .domains-toolbar { margin-top: 0 !important; }

/* Table header: label left-aligned over left-aligned data, arrow clear of the next column */
.dataTables_wrapper table.table-list thead th { white-space: nowrap; padding: 14px 34px 14px 14px !important; position: relative; vertical-align: middle; text-align: left; }
.dataTables_wrapper table.table-list thead th:first-child { padding-right: 14px !important; }
.dataTables_wrapper table.table-list thead th.sorting:after, .dataTables_wrapper table.table-list thead th.sorting_asc:after,
.dataTables_wrapper table.table-list thead th.sorting_desc:after, .dataTables_wrapper table.table-list thead th.sorting:before,
.dataTables_wrapper table.table-list thead th.sorting_asc:before, .dataTables_wrapper table.table-list thead th.sorting_desc:before {
  right: 10px !important; left: auto !important; top: 50% !important; transform: translateY(-50%);
}
/* No lone blue underline under the sorted column — tint only */
.dataTables_wrapper table.table-list thead th.sorting_asc, .dataTables_wrapper table.table-list thead th.sorting_desc { box-shadow: none !important; background: var(--cc-secondary); }
.dataTables_wrapper table.table-list thead th, .dataTables_wrapper table.table-list thead th:nth-child(even) { border-bottom: 1px solid var(--cc-border) !important; }
/* Body cells follow header alignment */
.dataTables_wrapper table.table-list tbody td { text-align: left; }
.dataTables_wrapper table.table-list tbody td:first-child { text-align: center; }

/* =========================================================
   Round 5: services list product cell (icon + name) and rule precedence
   (hook <style> blocks load after this file, so use body-prefixed selectors)
   ========================================================= */
body .services-fw-active #tableServicesList thead th,
body #tableServicesList thead th { text-align: left; border-bottom: 1px solid var(--cc-border) !important; box-shadow: none !important; background: var(--cc-light); color: var(--cc-primary); }
body #tableServicesList thead th.sorting_asc, body #tableServicesList thead th.sorting_desc { background: var(--cc-secondary); }
body #tableServicesList tbody td { text-align: left; vertical-align: middle; padding: 16px 14px; }
body #tableServicesList tbody td:first-child { width: 64px; text-align: center; padding-left: 20px; padding-right: 6px; }
/* service-type icon: soft rounded tile instead of a heavy blue glyph */
body #tableServicesList tbody td:first-child i, body #tableServicesList tbody td:first-child .glyphicon, body #tableServicesList tbody td:first-child img {
  display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px;
  background: var(--cc-secondary); color: var(--cc-accent-dark); font-size: 17px; font-weight: 300 !important; object-fit: contain; padding: 0;
}
/* product name + domain */
body #tableServicesList tbody td strong { display: block; color: var(--cc-primary); font-weight: 600; font-size: 14.5px; line-height: 1.3; }
body #tableServicesList tbody td a { color: var(--cc-accent-dark); font-weight: 500; font-size: 13px; }
body #tableServicesList tbody td a:hover { color: var(--cc-primary); }
body #tableServicesList tbody td small, body #tableServicesList tbody td .text-muted { color: var(--cc-muted); }

/* Filter bar precedence (hook sets padding/background inline later) */
body .services-sidebar-top, body .domains-sidebar-top, body .tickets-sidebar-top {
  padding: 10px 14px !important; background: #fff !important; border-radius: var(--cc-radius) !important; gap: 8px 16px !important;
}
body .services-sidebar-top .ss-section, body .domains-sidebar-top .ds-section { flex: 0 0 auto !important; min-width: 0 !important; }

/* Days-left label under expiry dates (js/expiry-days.js) */
.cc-days { display: block; margin-top: 3px; font-size: 11.5px; font-weight: 600; line-height: 1.2; letter-spacing: .1px; }
.cc-days-ok { color: var(--cc-muted); font-weight: 500; }
.cc-days-warn { color: #b7791f; }
.cc-days-soon { color: #c05621; }
.cc-days-expired { color: var(--cc-danger); }
.cc-days-soon::before, .cc-days-expired::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: 5px; vertical-align: 1px; }

/* =========================================================
   Round 6: footer sticks to the bottom; page-title block de-duplicated
   ========================================================= */
html { min-height: 100%; background: var(--cc-dark); }
body { min-height: 100vh; display: flex; flex-direction: column; background: #f4f7fb; }
body > section#main-body { flex: 1 0 auto; width: 100%; }
body > section#footer { flex-shrink: 0; margin-top: auto; }
body > section#header, body > section#main-menu, body > section#home-banner { flex-shrink: 0; }

/* One divider, one title: drop the h1 underline and the current-page crumb that repeats the h1 */
div.header-lined h1 { border-bottom: 0 !important; padding-bottom: 0; margin-bottom: 4px; }
div.header-lined { border-bottom: 1px solid var(--cc-border); padding-bottom: 12px; margin-bottom: 26px; }
div.header-lined .breadcrumb { margin: 0; padding-top: 4px; }
div.header-lined .breadcrumb > li.active { display: none; }
div.header-lined .breadcrumb > li:nth-last-child(2):after { content: none; }

/* Back-to-top button in brand colours */
section#footer .back-to-top { background: rgba(255, 255, 255, .12); border-radius: var(--cc-radius-input); color: #fff; }
section#footer .back-to-top:hover { background: var(--cc-accent); }
section#footer .back-to-top i { color: #fff; }

/* Ticket department picker (submit_ticket_ui hook): brand-aligned, no heavy left bar */
body .dept-card { border: 1px solid var(--cc-border) !important; border-radius: var(--cc-radius) !important; box-shadow: var(--cc-shadow); background: #fff; }
body .dept-card:hover { border-color: var(--cc-accent) !important; box-shadow: var(--cc-shadow-hover); transform: translateY(-1px); }
body .dept-card-icon { background: var(--cc-secondary) !important; color: var(--cc-accent-dark) !important; border-radius: 12px; }
body .dept-card:hover .dept-card-icon { background: var(--cc-accent) !important; color: #fff !important; }
body .dept-card-title { color: var(--cc-primary) !important; }
body .dept-card-desc { color: var(--cc-muted) !important; }
body .dept-card-arrow { color: #9aa7b8 !important; }
body .dept-card:hover .dept-card-arrow { color: var(--cc-accent) !important; }
.dept-header p, .dept-header { color: var(--cc-muted); }

/* =========================================================
   Glyphicons → Font Awesome Pro (light). Per-icon so any unmapped glyph keeps its original font.
   ========================================================= */
.glyphicon.glyphicon-globe,
.glyphicon.glyphicon-cog,
.glyphicon.glyphicon-user,
.glyphicon.glyphicon-refresh,
.glyphicon.glyphicon-lock,
.glyphicon.glyphicon-ok,
.glyphicon.glyphicon-remove,
.glyphicon.glyphicon-plus,
.glyphicon.glyphicon-search,
.glyphicon.glyphicon-envelope,
.glyphicon.glyphicon-pencil,
.glyphicon.glyphicon-trash,
.glyphicon.glyphicon-download,
.glyphicon.glyphicon-download-alt,
.glyphicon.glyphicon-arrow-right,
.glyphicon.glyphicon-arrow-left,
.glyphicon.glyphicon-chevron-right,
.glyphicon.glyphicon-chevron-left,
.glyphicon.glyphicon-info-sign,
.glyphicon.glyphicon-exclamation-sign,
.glyphicon.glyphicon-list,
.glyphicon.glyphicon-edit,
.glyphicon.glyphicon-cloud,
.glyphicon.glyphicon-bold,
.glyphicon.glyphicon-italic,
.glyphicon.glyphicon-header,
.glyphicon.glyphicon-link,
.glyphicon.glyphicon-picture,
.glyphicon.glyphicon-th-list,
.glyphicon.glyphicon-eye-open,
.glyphicon.glyphicon-eye-close,
.glyphicon.glyphicon-question-sign,
.glyphicon.glyphicon-warning-sign,
.glyphicon.glyphicon-file,
.glyphicon.glyphicon-upload,
.glyphicon.glyphicon-import,
.glyphicon.glyphicon-export,
.glyphicon.glyphicon-folder-open,
.glyphicon.glyphicon-folder-close,
.glyphicon.glyphicon-password,
.glyphicon.glyphicon-comment,
.glyphicon.glyphicon-asterisk,
.glyphicon.glyphicon-code,
.glyphicon.glyphicon-quote-left,
.glyphicon.glyphicon-align-left,
.glyphicon.glyphicon-minus,
.glyphicon.glyphicon-star,
.glyphicon.glyphicon-calendar,
.glyphicon.glyphicon-time,
.glyphicon.glyphicon-print,
.glyphicon.glyphicon-copy,
.glyphicon.glyphicon-share,
.glyphicon.glyphicon-new-window { font-family: "Font Awesome 5 Pro" !important; font-weight: 300 !important; font-style: normal; line-height: 1; }
.glyphicon.glyphicon-globe:before,
.glyphicon.glyphicon-cog:before,
.glyphicon.glyphicon-user:before,
.glyphicon.glyphicon-refresh:before,
.glyphicon.glyphicon-lock:before,
.glyphicon.glyphicon-ok:before,
.glyphicon.glyphicon-remove:before,
.glyphicon.glyphicon-plus:before,
.glyphicon.glyphicon-search:before,
.glyphicon.glyphicon-envelope:before,
.glyphicon.glyphicon-pencil:before,
.glyphicon.glyphicon-trash:before,
.glyphicon.glyphicon-download:before,
.glyphicon.glyphicon-download-alt:before,
.glyphicon.glyphicon-arrow-right:before,
.glyphicon.glyphicon-arrow-left:before,
.glyphicon.glyphicon-chevron-right:before,
.glyphicon.glyphicon-chevron-left:before,
.glyphicon.glyphicon-info-sign:before,
.glyphicon.glyphicon-exclamation-sign:before,
.glyphicon.glyphicon-list:before,
.glyphicon.glyphicon-edit:before,
.glyphicon.glyphicon-cloud:before,
.glyphicon.glyphicon-bold:before,
.glyphicon.glyphicon-italic:before,
.glyphicon.glyphicon-header:before,
.glyphicon.glyphicon-link:before,
.glyphicon.glyphicon-picture:before,
.glyphicon.glyphicon-th-list:before,
.glyphicon.glyphicon-eye-open:before,
.glyphicon.glyphicon-eye-close:before,
.glyphicon.glyphicon-question-sign:before,
.glyphicon.glyphicon-warning-sign:before,
.glyphicon.glyphicon-file:before,
.glyphicon.glyphicon-upload:before,
.glyphicon.glyphicon-import:before,
.glyphicon.glyphicon-export:before,
.glyphicon.glyphicon-folder-open:before,
.glyphicon.glyphicon-folder-close:before,
.glyphicon.glyphicon-password:before,
.glyphicon.glyphicon-comment:before,
.glyphicon.glyphicon-asterisk:before,
.glyphicon.glyphicon-code:before,
.glyphicon.glyphicon-quote-left:before,
.glyphicon.glyphicon-align-left:before,
.glyphicon.glyphicon-minus:before,
.glyphicon.glyphicon-star:before,
.glyphicon.glyphicon-calendar:before,
.glyphicon.glyphicon-time:before,
.glyphicon.glyphicon-print:before,
.glyphicon.glyphicon-copy:before,
.glyphicon.glyphicon-share:before,
.glyphicon.glyphicon-new-window:before { font-family: "Font Awesome 5 Pro" !important; font-weight: 300 !important; }
.glyphicon-globe:before { content: "\f0ac" !important; }
.glyphicon-cog:before { content: "\f013" !important; }
.glyphicon-user:before { content: "\f007" !important; }
.glyphicon-refresh:before { content: "\f021" !important; }
.glyphicon-lock:before { content: "\f023" !important; }
.glyphicon-ok:before { content: "\f00c" !important; }
.glyphicon-remove:before { content: "\f00d" !important; }
.glyphicon-plus:before { content: "\f067" !important; }
.glyphicon-search:before { content: "\f002" !important; }
.glyphicon-envelope:before { content: "\f0e0" !important; }
.glyphicon-pencil:before { content: "\f303" !important; }
.glyphicon-trash:before { content: "\f2ed" !important; }
.glyphicon-download:before { content: "\f019" !important; }
.glyphicon-download-alt:before { content: "\f019" !important; }
.glyphicon-arrow-right:before { content: "\f061" !important; }
.glyphicon-arrow-left:before { content: "\f060" !important; }
.glyphicon-chevron-right:before { content: "\f054" !important; }
.glyphicon-chevron-left:before { content: "\f053" !important; }
.glyphicon-info-sign:before { content: "\f05a" !important; }
.glyphicon-exclamation-sign:before { content: "\f06a" !important; }
.glyphicon-list:before { content: "\f0ca" !important; }
.glyphicon-edit:before { content: "\f044" !important; }
.glyphicon-cloud:before { content: "\f0c2" !important; }
.glyphicon-bold:before { content: "\f032" !important; }
.glyphicon-italic:before { content: "\f033" !important; }
.glyphicon-header:before { content: "\f1dc" !important; }
.glyphicon-link:before { content: "\f0c1" !important; }
.glyphicon-picture:before { content: "\f03e" !important; }
.glyphicon-th-list:before { content: "\f0cb" !important; }
.glyphicon-eye-open:before { content: "\f06e" !important; }
.glyphicon-eye-close:before { content: "\f070" !important; }
.glyphicon-question-sign:before { content: "\f059" !important; }
.glyphicon-warning-sign:before { content: "\f071" !important; }
.glyphicon-file:before { content: "\f15b" !important; }
.glyphicon-upload:before { content: "\f093" !important; }
.glyphicon-import:before { content: "\f56f" !important; }
.glyphicon-export:before { content: "\f56e" !important; }
.glyphicon-folder-open:before { content: "\f07c" !important; }
.glyphicon-folder-close:before { content: "\f07b" !important; }
.glyphicon-password:before { content: "\f084" !important; }
.glyphicon-comment:before { content: "\f075" !important; }
.glyphicon-asterisk:before { content: "\f069" !important; }
.glyphicon-code:before { content: "\f121" !important; }
.glyphicon-quote-left:before { content: "\f10d" !important; }
.glyphicon-align-left:before { content: "\f036" !important; }
.glyphicon-minus:before { content: "\f068" !important; }
.glyphicon-star:before { content: "\f005" !important; }
.glyphicon-calendar:before { content: "\f133" !important; }
.glyphicon-time:before { content: "\f017" !important; }
.glyphicon-print:before { content: "\f02f" !important; }
.glyphicon-copy:before { content: "\f0c5" !important; }
.glyphicon-share:before { content: "\f064" !important; }
.glyphicon-new-window:before { content: "\f35d" !important; }

/* Markdown editor (ticket reply / new ticket): bigger, comfortable text and clean toolbar */
.md-editor { border: 1px solid var(--cc-border); border-radius: var(--cc-radius); overflow: hidden; background: #fff; margin-top: 6px; }
.md-editor > .md-header { background: var(--cc-light); border-bottom: 1px solid var(--cc-border); padding: 10px 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.md-editor > .md-header .btn-group { margin: 0; }
.md-editor > .md-header .btn { padding: 6px 12px; min-width: 38px; background: #fff; border: 1px solid var(--cc-border); color: var(--cc-primary); }
.md-editor > .md-header .btn:hover { background: var(--cc-accent); border-color: var(--cc-accent); }
.md-editor > .md-header .btn:hover .glyphicon { color: #fff; }
.md-editor > .md-header .btn-primary { background: var(--cc-gradient); color: #fff; border-color: var(--cc-accent-dark); }
.md-editor > .md-header .btn-primary .glyphicon { color: #fff; margin-right: 4px; }
.md-editor > textarea, .md-editor textarea.markdown-editor, textarea.markdown-editor, .md-input {
  font-size: 15px !important; line-height: 1.65; padding: 16px 18px !important; min-height: 260px; color: var(--cc-text); border: 0 !important; box-shadow: none !important; width: 100%; background: #fff;
}
.md-editor .md-footer { padding: 8px 14px; color: var(--cc-muted); font-size: 12.5px; background: #fff; border-top: 1px solid var(--cc-border); }
.md-editor.active { border-color: var(--cc-accent); box-shadow: 0 0 0 3px rgba(27,121,234,.12); }
label[for="inputMessage"], #inputMessage ~ label { display: block; margin-bottom: 8px; }

/* Fix: Six sets html/body {height:100%}; with the flex footer rule long pages overflowed onto the footer.
   Let the page grow with its content and use min-height for the short-page case. */
html { height: auto !important; min-height: 100%; }
body { height: auto !important; min-height: 100vh; }
body > section#main-body { min-height: 350px; overflow: visible; }

/* =========================================================
   Open-ticket form (submitticket.php?step=3): aligned grid, readable fields
   Rows: [Nom | Courriel] / [Objet] / [Département | Service lié | Priorité] / Message / Pièces jointes
   ========================================================= */
form[action*="step=3"][enctype] { max-width: 980px; }
form[action*="step=3"][enctype] > .row { display: flex; flex-wrap: wrap; gap: 0 20px; margin: 0 0 6px; }
form[action*="step=3"][enctype] > .row > [class*="col-"] {
  float: none; width: auto; max-width: none; flex: 1 1 0; min-width: 0; padding: 0; margin: 0 0 18px;
}
form[action*="step=3"][enctype] > .row > [class*="col-"]:only-child { flex-basis: 100%; }
/* middle select (Service lié) gets more room when there are three fields */
form[action*="step=3"][enctype] > .row > [class*="col-"]:nth-child(2):nth-last-child(2) { flex-grow: 1.5; }
@media (max-width: 767px) { form[action*="step=3"][enctype] > .row > [class*="col-"] { flex: 1 1 100%; } }

form[action*="step=3"][enctype] label { display: block; margin: 0 0 7px; font-size: 14px; font-weight: 600; color: var(--cc-primary); }
form[action*="step=3"][enctype] .form-control, form[action*="step=3"][enctype] select.form-control {
  height: 46px; padding: 0 16px; font-size: 15px; line-height: 44px; color: var(--cc-text);
  border: 1px solid var(--cc-border); border-radius: var(--cc-radius-input); background-color: #fff; box-shadow: none; width: 100%;
}
form[action*="step=3"][enctype] select.form-control { padding-right: 38px; line-height: normal; text-overflow: ellipsis; }
form[action*="step=3"][enctype] .form-control:focus { border-color: var(--cc-accent); box-shadow: 0 0 0 3px rgba(27,121,234,.15); }
form[action*="step=3"][enctype] .form-control[disabled], form[action*="step=3"][enctype] .form-control.disabled {
  background: var(--cc-light); color: var(--cc-muted); border-color: var(--cc-border);
}
form[action*="step=3"][enctype] > .form-group { margin: 0 0 20px; }
form[action*="step=3"][enctype] textarea.form-control { height: auto; line-height: 1.65; padding: 16px 18px !important; font-size: 15px; }

/* Attachments row: file input + "add more" aligned, hint underneath */
form[action*="step=3"][enctype] > .row.form-group > .col-sm-12, form[action*="step=3"][enctype] > .row.form-group > .ticket-attachments-message { flex: 0 0 100%; }
form[action*="step=3"][enctype] > .row.form-group > .col-sm-9 { flex: 1 1 0; }
form[action*="step=3"][enctype] > .row.form-group > .col-sm-3 { flex: 0 0 170px; }
form[action*="step=3"][enctype] input[type="file"].form-control { height: auto; line-height: 1.4; padding: 10px 14px; }
form[action*="step=3"][enctype] .ticket-attachments-message { font-size: 12.5px; color: var(--cc-muted); margin-top: -8px; }

/* Actions */
form[action*="step=3"][enctype] > p.text-center { display: flex; justify-content: center; gap: 12px; margin-top: 26px; }
form[action*="step=3"][enctype] > p.text-center .btn { padding: 11px 32px; font-size: 14.5px; }

/* =========================================================
   Round 7: breadcrumb, sort arrows, table header tint, row alignment, back-to-top
   ========================================================= */
/* Breadcrumb: show the full trail again (current page muted) */
div.header-lined .breadcrumb > li.active { display: inline-block !important; color: var(--cc-muted); }
div.header-lined .breadcrumb > li:nth-last-child(2):after { content: "/" !important; }

/* Sort arrows: sit right after their own column label, light FA icons (no Glyphicons) */
body table.dataTable thead .sorting:after, body table.dataTable thead .sorting_asc:after, body table.dataTable thead .sorting_desc:after,
body .dataTables_wrapper table.table-list thead th.sorting:after, body .dataTables_wrapper table.table-list thead th.sorting_asc:after, body .dataTables_wrapper table.table-list thead th.sorting_desc:after {
  position: static !important; display: inline-block !important; transform: none !important; margin-left: 8px; vertical-align: middle;
  font-family: "Font Awesome 5 Pro" !important; font-weight: 300 !important; font-size: 13px; color: #9aa7b8; opacity: 1 !important;
}
body table.dataTable thead .sorting:after { content: "\f0dc" !important; }
body table.dataTable thead .sorting_asc:after { content: "\f0de" !important; color: var(--cc-accent); font-weight: 900 !important; }
body table.dataTable thead .sorting_desc:after { content: "\f0dd" !important; color: var(--cc-accent); font-weight: 900 !important; }
body .dataTables_wrapper table.table-list thead th.sorting:before, body .dataTables_wrapper table.table-list thead th.sorting_asc:before, body .dataTables_wrapper table.table-list thead th.sorting_desc:before { content: none !important; }
body .dataTables_wrapper table.table-list thead th { padding-right: 14px !important; }

/* No tinted "selected" header cells — all headers identical */
body .dataTables_wrapper table.table-list thead th.sorting_asc, body .dataTables_wrapper table.table-list thead th.sorting_desc,
body #tableServicesList thead th.sorting_asc, body #tableServicesList thead th.sorting_desc, body #tableDomainsList thead th.sorting_asc, body #tableDomainsList thead th.sorting_desc {
  background: var(--cc-light) !important; box-shadow: none !important;
}

/* Rows: every cell vertically centred, product name + domain tight */
body .dataTables_wrapper table.table-list tbody td, body #tableServicesList tbody td, body #tableDomainsList tbody td { vertical-align: middle !important; }
body #tableServicesList tbody td br { display: none; }
body #tableServicesList tbody td strong { display: block; margin: 0 0 2px; line-height: 1.25; }
body #tableServicesList tbody td strong + a, body #tableServicesList tbody td a { display: inline-block; line-height: 1.3; }

/* Back-to-top: brand button */
body section#footer a.back-to-top { float: right; }
body section#footer a.back-to-top i {
  background: rgba(255, 255, 255, .14) !important; color: #fff !important; opacity: 1 !important;
  border-radius: 10px !important; padding: 13px 15px !important; transition: .15s;
}
body section#footer a.back-to-top:hover i { background: var(--cc-accent) !important; }

/* =========================================================================
   BRIEF PASS (refinement layer — no structural redesign)
   Tokens from the CAP CONNECT brief; every earlier rule that uses var(--cc-*)
   inherits them automatically.
   ========================================================================= */
:root {
  --cc-primary: #324a6d;        /* brand dark blue: branding, icons, secondary elements */
  --cc-navy: #1f314b;           /* headings + important text */
  --cc-dark: #1f314b;
  --cc-accent: #1463c9;         /* primary blue: buttons, active states, links */
  --cc-accent-dark: #0f52a8;    /* hover */
  --cc-light: #edf4ff;          /* pale blue: selected states, subtle backgrounds */
  --cc-secondary: #edf4ff;
  --cc-text: #34445c;           /* muted slate body text */
  --cc-muted: #5f6f86;
  --cc-border: #d6e2f2;         /* light blue-grey borders */
  --cc-gradient: #1463c9;       /* primary actions: solid blue */
  --cc-gradient-hover: #0f52a8;
  --cc-radius: 16px;            /* cards 12–20px */
  --cc-radius-input: 10px;
  --cc-shadow: 0 1px 2px rgba(31, 49, 75, .05), 0 4px 14px rgba(31, 49, 75, .05);
  --cc-shadow-hover: 0 2px 4px rgba(31, 49, 75, .06), 0 8px 24px rgba(31, 49, 75, .09);
}

/* ---- Typography: readable body, no thin or tiny text ---- */
html { font-size: 16px; }
body { font-size: 16px; line-height: 1.6; color: var(--cc-text); font-weight: 400;
  background: linear-gradient(180deg, #edf4ff 0, #f6f9ff 360px, #f6f9ff 100%) no-repeat, #f6f9ff; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, div.header-lined h1, .panel-title, .modal-title { color: var(--cc-navy); letter-spacing: -.01em; }
h1, div.header-lined h1 { font-size: 28px; font-weight: 650; }
h2 { font-size: 23px; } h3 { font-size: 19px; } h4 { font-size: 17px; }
small, .small, .text-muted, .help-block { font-size: 13.5px; }
.panel-body, .panel-body p, .list-group-item, .table, .alert, section#footer, section#footer a { font-size: 15px; }
.panel-sidebar, .panel-sidebar .list-group-item { font-size: 15px; }
.panel-title, .panel-heading, .client-home-panels .panel-title, .panel-sidebar .panel-title { font-size: 16px; font-weight: 600; }
.navbar-main .navbar-nav > li > a { font-size: 15px; }
.navbar-main .dropdown-menu > li > a, .dropdown-menu > li > a { font-size: 14.5px; }
section#header .top-nav, section#header .top-nav a { font-size: 14.5px; }
.btn { font-size: 15px; } .btn-sm { font-size: 14px; }
.form-control, label, .control-label, .dataTables_wrapper .dataTables_filter label .form-control { font-size: 15.5px; }
label, .control-label { font-weight: 600; color: var(--cc-navy); }
.table > thead > tr > th { font-size: 13px; letter-spacing: .3px; color: var(--cc-navy); }
.label, .label.status, span.status, .badge, .cc-days, .anrt-label { font-size: 13px; }
.tile .title { font-size: 13px; } .tile .stat { font-size: 36px; }
.breadcrumb, div.header-lined .breadcrumb { font-size: 14px; }
.ds-link, .ss-link { font-size: 14.5px; }

/* ---- Colour roles ---- */
a { color: var(--cc-accent); } a:hover, a:focus { color: var(--cc-accent-dark); }
.navbar-main .navbar-nav > li > a:hover, .navbar-main .navbar-nav > .open > a { background: rgba(255, 255, 255, .12); }
section#main-menu, .navbar-main, .panel-sidebar > .panel-heading { background: var(--cc-primary); }
section#footer, .navbar-main li.account { background: var(--cc-navy); }
.panel-sidebar a.list-group-item.active, .list-group-item.active, .nav-pills > li.active > a, .pagination > .active > a, .pagination > .active > span { background: var(--cc-accent) !important; border-color: var(--cc-accent) !important; color: #fff !important; }
.list-group-item-action:hover, a.list-group-item:hover, .dropdown-menu > li > a:hover { background: var(--cc-light); color: var(--cc-navy); }
.table > thead > tr > th, body .dataTables_wrapper table.table-list thead th { background: var(--cc-light) !important; }
.table-hover > tbody > tr:hover, .table-list tbody tr:hover { background: #f3f8ff; }

/* ---- Components: white cards, subtle borders, 12–20px radius, restrained shadows ---- */
.panel, .panel-default, .modal-content, .dataTables_wrapper, div.listtable, .table-container,
.tiles .tile > a, .domains-sidebar-top, .services-sidebar-top, .tickets-sidebar-top, .domains-toolbar, form.form-horizontal[action*="action=bulkdomain"] {
  border-radius: var(--cc-radius) !important; border-color: var(--cc-border); box-shadow: var(--cc-shadow);
}
.panel-heading { background: var(--cc-light); }
.btn-primary, .cc-dns-client .btn-primary { background: var(--cc-accent) !important; border-color: var(--cc-accent) !important; color: #fff !important; }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .cc-dns-client .btn-primary:hover { background: var(--cc-accent-dark) !important; border-color: var(--cc-accent-dark) !important; }
section#header .top-nav > li.primary-action > a.btn { background: var(--cc-accent); }
section#header .top-nav > li.primary-action > a.btn:hover { background: var(--cc-accent-dark); }
.btn-default, .btn-secondary { background: #fff; color: var(--cc-accent); border: 1px solid var(--cc-accent); }
.btn-default:hover, .btn-default:focus { background: var(--cc-light); color: var(--cc-accent-dark); border-color: var(--cc-accent-dark); }
/* icon-only toolbar/row buttons stay quiet (navy outline) so primary actions stand out */
.table-list .btn-group .btn, .domains-toolbar .dt-action, .md-editor > .md-header .btn { color: var(--cc-primary); border-color: var(--cc-border); }
.btn-link { color: var(--cc-accent); }
.tiles .tile .icon, .tile .icon, .client-home-panels .panel-title i { color: var(--cc-primary); }
/* status colours reserved for meaning */
.status-active, .label-success, .label.status.status-active { background: #e3f6ea !important; color: #146c36 !important; }
.status-pending, .status-unpaid, .label-warning { background: #fff3d1 !important; color: #8a5a00 !important; }
.status-suspended, .status-terminated, .status-cancelled, .status-overdue, .status-expired, .label-danger { background: #fde8e8 !important; color: #a12626 !important; }

/* ---- Subtle decoration: pale-blue gradient hero strip + dotted rule ---- */
div.header-lined { border-bottom: 1px dashed #c3d4ea; }
section#home-banner { background: linear-gradient(135deg, #1f314b, #324a6d 60%, #1463c9); }

/* ---- Accessibility ---- */
a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible, .list-group-item:focus-visible, .navbar-main a:focus-visible {
  outline: 3px solid #6aa8ff !important; outline-offset: 2px; box-shadow: none;
}
.form-control:focus, select:focus { border-color: var(--cc-accent); box-shadow: 0 0 0 3px rgba(20, 99, 201, .22); }
.sr-only-focusable:focus, .skip-link:focus { position: static; }
/* errors beside fields */
.has-error .form-control, .form-control.error, input.error { border-color: #c53030; background: #fff7f7; }
.has-error .help-block, label.error, .help-block.with-errors { color: #a12626; font-size: 13.5px; font-weight: 500; display: block; margin-top: 6px; }
.has-error .control-label { color: #a12626; }

/* touch targets */
.btn, .form-control, select.form-control, .list-group-item, .navbar-main .navbar-nav > li > a, .dropdown-menu > li > a, .pagination > li > a, .pagination > li > span { min-height: 44px; }
.btn-xs, .btn-sm, .cc-dns-client .btn-xs { min-height: 36px; }
.list-group-item { display: block; }
.dropdown-menu > li > a { padding-top: 11px; padding-bottom: 11px; }

/* ---- Responsive: no page-wide horizontal scroll, tables scroll inside their card ---- */
img, video, iframe, .panel, .container { max-width: 100%; }
.table-container, .dataTables_wrapper, .table-responsive { max-width: 100%; }
@media (max-width: 991px) {
  .table-container, .dataTables_wrapper, div.listtable { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-list, #tableDomainsList, #tableServicesList { min-width: 640px; }
  .navbar-main .navbar-nav > li > a { padding: 12px 16px; white-space: normal; }
  .navbar-main .navbar-toggle { border: 1px solid rgba(255,255,255,.5); border-radius: 10px; min-height: 44px; min-width: 48px; }
  section#header .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
  section#header .top-nav { order: 2; float: none; }
  section#header .logo { order: 1; float: none; }
  .md-editor > .md-header { gap: 6px; }
}
@media (max-width: 575px) {
  html { font-size: 15.5px; } h1, div.header-lined h1 { font-size: 24px; }
  .tiles .tile { padding-left: 6px; padding-right: 6px; }
  form[action*="step=3"][enctype] > p.text-center, form[action*="action=bulkdomain"] p[align="center"] { flex-direction: column; }
  form[action*="step=3"][enctype] > p.text-center .btn { width: 100%; }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .tiles .tile:hover > a, .dept-card:hover, .panel:hover { transform: none !important; }
}
.btn-group-sm > .btn, .table .btn-group .btn { min-height: 38px; }

/* Fixes: ticket form edges + breadcrumb separator */
/* Bootstrap's .row clearfix pseudo-elements become flex items (each adds a 20px gap) → remove them in the grid rows */
form[action*="step=3"][enctype] > .row::before, form[action*="step=3"][enctype] > .row::after,
form[action*="action=bulkdomain"] .row::before, form[action*="action=bulkdomain"] .row::after { content: none !important; display: none !important; }
form[action*="step=3"][enctype] > .row { margin-left: 0 !important; margin-right: 0 !important; width: 100%; }
form[action*="step=3"][enctype] > .row > [class*="col-"] { padding-left: 0 !important; padding-right: 0 !important; }
/* last field in each row ends on the same right edge as Objet / Message */
form[action*="step=3"][enctype] .form-control { max-width: 100%; }
/* Breadcrumb: one "/" between items (Bootstrap draws it with li+li:before) */
div.header-lined .breadcrumb > li:after, div.header-lined .breadcrumb > li:nth-last-child(2):after { content: none !important; display: none !important; }

/* Cart > domain choice cards: real spacing, one border, readable text (base rule leaves only 2px between cards) */
#order-standard_cart .domain-selection-options .option {
  margin: 0 0 12px !important; padding: 16px 22px !important; border: 1px solid var(--cc-border, #d6e2f2) !important;
  border-radius: 14px !important; background: #fff !important; box-shadow: 0 1px 2px rgba(31, 49, 75, .05) !important; transition: border-color .15s, background .15s;
}
#order-standard_cart .domain-selection-options .option:hover { border-color: var(--cc-accent, #1463c9) !important; background: #f6faff !important; }
#order-standard_cart .domain-selection-options .option-selected { background: var(--cc-light, #edf4ff) !important; border-color: var(--cc-accent, #1463c9) !important; box-shadow: 0 0 0 3px rgba(20, 99, 201, .12) !important; }
#order-standard_cart .domain-selection-options .option label { font-size: 16px; font-weight: 500; color: var(--cc-navy, #1f314b); margin: 0; line-height: 1.5; cursor: pointer; }
#order-standard_cart .domain-selection-options .option-selected label { font-weight: 600; }
#order-standard_cart .domain-selection-options .option .iradio_square-blue, #order-standard_cart .domain-selection-options .option .icheckbox_square-blue { margin-right: 12px; }
#order-standard_cart .domain-selection-options .domains-row { margin-top: 12px; }

/* =========================================================
   Domain details / tabbed detail pages (.main-content > .tab-content > .tab-pane)
   Overview becomes a card with a clean label / value grid
   ========================================================= */
.main-content > .tab-content > .tab-pane {
  background: #fff; border: 1px solid var(--cc-border); border-radius: var(--cc-radius); box-shadow: var(--cc-shadow); padding: 26px 32px 30px; margin-bottom: 24px;
}
.main-content > .tab-content > .tab-pane > h3:first-child { margin: 0 0 18px; padding-bottom: 14px; border-bottom: 1px solid var(--cc-border); font-size: 20px; color: var(--cc-navy); }

/* label / value rows */
#tabOverview > .row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 36px; margin: 0; padding: 0; border-bottom: 1px solid #e6eef9; }
#tabOverview > .row:last-of-type { border-bottom: 0; }
#tabOverview > .row::before, #tabOverview > .row::after { content: none !important; display: none !important; }
#tabOverview > .row > [class*="col-"] { float: none; width: auto; max-width: none; margin: 0 !important; padding: 16px 0 !important; font-size: 16px; line-height: 1.5; color: var(--cc-navy); min-width: 0; overflow-wrap: anywhere; }
#tabOverview > .row > [class*="col-"]:only-child { grid-column: 1 / -1; }
#tabOverview > .row > [class*="col-"] > h4 { margin: 0 0 4px; font-size: 13px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase; color: var(--cc-muted); }
#tabOverview > .row > [class*="col-"] > h4 strong { font-weight: 600; }
#tabOverview > .row a { font-weight: 500; }
#tabOverview #statusDisplayLabel { margin-left: 4px; }
#tabOverview .ssl-info img, #tabOverview img[data-type="domain"] { vertical-align: -3px; }
@media (max-width: 767px) { #tabOverview > .row { grid-template-columns: 1fr; } #tabOverview > .row > [class*="col-"] { padding: 12px 0 !important; } .main-content > .tab-content > .tab-pane { padding: 20px; } }

/* "What do you want to do today?" → action buttons (Renew is the primary action) */
#tabOverview > h4 { margin: 28px 0 14px; padding-top: 22px; border-top: 1px solid var(--cc-border); font-size: 17px; color: var(--cc-navy); }
#tabOverview > ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
#tabOverview > ul > li { margin: 0; }
#tabOverview > ul > li > a { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 20px; border: 1px solid var(--cc-accent); border-radius: var(--cc-radius-input); color: var(--cc-accent); font-weight: 600; font-size: 15px; text-decoration: none; background: #fff; transition: background .15s; }
#tabOverview > ul > li > a:hover { background: var(--cc-light); color: var(--cc-accent-dark); }
#tabOverview > ul > li > a[href*="renewal"], #tabOverview > ul > li > a[href*="domain-renew"] { background: var(--cc-accent); color: #fff; }
#tabOverview > ul > li > a[href*="renewal"]:hover, #tabOverview > ul > li > a[href*="domain-renew"]:hover { background: var(--cc-accent-dark); color: #fff; }

/* Other tabs inside the card: comfortable spacing */
.main-content > .tab-content > .tab-pane h2.text-center { font-size: 20px; }
.main-content > .tab-content > .tab-pane .form-horizontal .form-group { margin-bottom: 16px; }
.main-content > .tab-content > .tab-pane .moduleoutput { margin-top: 18px; }

/* DNS records table: fit inside the card (Supprimer button was clipped) */
.cc-dns-client .panel { overflow: hidden; }
.cc-dns-client .panel .table-responsive, .cc-dns-client .panel-body { overflow-x: auto; }
.cc-dns-records-table { width: 100%; table-layout: auto; }
.cc-dns-records-table td { white-space: normal !important; overflow-wrap: anywhere; word-break: break-word; vertical-align: middle !important; }
.cc-dns-records-table td:first-child, .cc-dns-records-table .cc-cell-type { white-space: nowrap !important; width: 1%; }
.cc-dns-records-table td:nth-last-child(2) { width: 1%; white-space: nowrap !important; }   /* priority */
.cc-dns-records-table td:last-child, .cc-dns-records-table th:last-child { white-space: nowrap !important; width: 1%; text-align: right; padding-right: 20px; }
.cc-dns-records-table td:last-child .btn { display: inline-block; margin: 0 0 0 6px; vertical-align: middle; }
.cc-dns-records-table td:last-child .btn:first-child { margin-left: 0; }
.cc-dns-records-table .cc-dns-record-content { max-width: 420px; }
@media (max-width: 767px) { .cc-dns-records-table { min-width: 720px; } }

/* Header controls: same height, centred on one line (bell / Quitter / admin-return icon) */
section#header .top-nav { align-items: center !important; }
section#header .top-nav > li { display: flex; align-items: center; }
section#header .top-nav #accountNotifications { width: 44px; height: 44px; min-height: 44px; }
section#header .top-nav > li.primary-action > a.btn { display: inline-flex; align-items: center; justify-content: center; height: 44px; min-height: 44px; padding: 0 22px; line-height: 1; }
section#header .top-nav > li > a.btn-logged-in-admin {
  display: inline-flex !important; align-items: center; justify-content: center; width: 44px; height: 44px; min-height: 44px; padding: 0 !important;
  border: 1px solid var(--cc-border) !important; border-radius: 50%; background: #fff !important; color: var(--cc-primary); font-size: 17px !important; margin: 0 !important;
}
section#header .top-nav > li > a.btn-logged-in-admin:hover { background: var(--cc-light) !important; border-color: var(--cc-accent) !important; color: var(--cc-accent); }
section#header .top-nav > li > a.btn-logged-in-admin i { margin: 0; line-height: 1; }
section#header .top-nav > li > a.choose-language, section#header .top-nav > li > a[data-toggle="popover"]:not(#accountNotifications) { display: inline-flex; align-items: center; min-height: 44px; }

/* Sidebar: softer headers (pale blue + navy text) instead of heavy dark-navy blocks */
body .panel-sidebar > .panel-heading { background: var(--cc-light) !important; border-bottom: 1px solid var(--cc-border) !important; }
body .panel-sidebar .panel-title, body .panel-sidebar .panel-title * { color: var(--cc-navy) !important; }
body .panel-sidebar .panel-title i, body .panel-sidebar .panel-title .fas, body .panel-sidebar .panel-title .far, body .panel-sidebar .panel-title .fal { color: var(--cc-accent) !important; opacity: 1; }
body .panel-sidebar .panel-minimise, body .panel-sidebar .panel-heading .fa-chevron-up, body .panel-sidebar .panel-heading .fa-chevron-down { color: var(--cc-muted) !important; opacity: 1; }
body .panel-sidebar { border: 1px solid var(--cc-border); }
/* Active item: soft pale-blue with a blue edge instead of a solid bright block */
body .panel-sidebar a.list-group-item.active, body .panel-sidebar a.list-group-item.active:hover, body .panel-sidebar a.list-group-item.active:focus,
body .panel-sidebar .list-group-item.active {
  background: #e3eeff !important; color: var(--cc-accent-dark) !important; font-weight: 600;
  border-color: var(--cc-border) !important; box-shadow: inset 4px 0 0 var(--cc-accent);
}
body .panel-sidebar .list-group-item.active i { color: var(--cc-accent) !important; }
body .panel-sidebar .list-group-item.active .badge { background: #fff !important; color: var(--cc-accent-dark) !important; border: 1px solid var(--cc-border); }

/* List pages (domains / services / tickets / invoices): the tab pane is NOT a card — the table already is one */
.main-content > .tab-content > .tab-pane:has(.table-container),
.main-content > .tab-content > .tab-pane:has(.dataTables_wrapper),
.main-content > .tab-content > .tab-pane:has(table.table-list),
.main-content > .tab-content > .tab-pane:has(.domains-toolbar) {
  background: transparent; border: 0; box-shadow: none; padding: 0; border-radius: 0; margin-bottom: 24px;
}

/* =========================================================
   Home panels: header buttons no longer float into the body
   ========================================================= */
.panel-heading { display: block; }
.panel-heading::before, .panel-heading::after { content: ""; display: table; clear: both; }
.panel-heading .panel-title { display: flex !important; align-items: center; gap: 10px; margin: 0; width: 100%; }
.panel-heading .panel-title .btn, .panel-heading .panel-title .pull-right, .panel-heading .panel-title .panel-minimise,
.panel-heading .panel-title a.btn { float: none !important; margin-left: auto !important; flex: 0 0 auto; }
.panel-heading .panel-title .btn { min-height: 34px; min-width: 34px; padding: 4px 10px; display: inline-flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--cc-border); color: var(--cc-primary); }
.panel-heading .panel-title .btn:hover { background: var(--cc-accent); border-color: var(--cc-accent); color: #fff; }
.panel-heading .panel-title .btn i { color: inherit !important; font-weight: 400; margin: 0; }
.panel-heading .panel-title > i:first-child, .panel-heading .panel-title > .fas:first-child { flex: 0 0 auto; }
/* lists/bodies always take the full card width */
.client-home-panels .panel > .list-group, .client-home-panels .panel > .panel-body, .client-home-panels .panel > .panel-footer { width: 100%; clear: both; }
.client-home-panels .panel > .list-group { margin: 0; max-height: 300px; overflow-y: auto; border: 0 !important; border-top: 1px solid var(--cc-border) !important; }

/* One calm accent for all home panels (was orange / navy / teal / green / grey) */
.client-home-panels .panel, .client-home-panels .panel-accent-blue, .client-home-panels .panel-accent-green, .client-home-panels .panel-accent-gold,
.client-home-panels .panel-accent-orange, .client-home-panels .panel-accent-red, .client-home-panels .panel-accent-asbestos, .client-home-panels .panel-accent-teal,
.client-home-panels .panel-accent-midnight, .client-home-panels [class*="panel-accent-"] { border-top: 3px solid var(--cc-accent) !important; }

/* Register-a-domain box: input, then a clean segmented control underneath */
.client-home-panels #registerDomainPanel .panel-body { padding: 18px 20px 20px; }
.client-home-panels #registerDomainPanel .input-group { display: block; }
.client-home-panels #registerDomainPanel .input-group .form-control { width: 100%; float: none; margin-bottom: 12px; border-radius: var(--cc-radius-input) !important; }
.client-home-panels #registerDomainPanel .input-group-btn { display: flex; width: 100%; gap: 0; }
.client-home-panels #registerDomainPanel .input-group-btn .btn, .client-home-panels #registerDomainPanel .input-group-btn input[type="submit"] { flex: 1 1 0; width: 50%; margin: 0; }
.client-home-panels #registerDomainPanel .btn-success { background: var(--cc-accent) !important; border-color: var(--cc-accent) !important; color: #fff !important; border-radius: var(--cc-radius-input) 0 0 var(--cc-radius-input) !important; }
.client-home-panels #registerDomainPanel .btn-default, .client-home-panels #registerDomainPanel .btn-primary { background: #fff !important; color: var(--cc-accent) !important; border: 1px solid var(--cc-accent) !important; border-radius: 0 var(--cc-radius-input) var(--cc-radius-input) 0 !important; }


/* Domains list: selectable rows */
#tableDomainsList tbody tr { cursor: pointer; transition: background .12s; }
#tableDomainsList tbody tr.cc-row-selected > td, .dataTables_wrapper table.table-list tbody tr.cc-row-selected > td { background: #e8f1ff !important; }
#tableDomainsList tbody tr.cc-row-selected > td:first-child { box-shadow: inset 4px 0 0 var(--cc-accent); }
#tableDomainsList tbody tr.cc-row-selected:hover > td { background: #dfeaff !important; }
#tableDomainsList tbody tr:not(.cc-row-selected):hover > td { background: #f3f8ff; }
#tableDomainsList input.domids { width: 18px; height: 18px; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { #tableDomainsList tbody tr { transition: none; } }

/* Buttons inside panels/sidebars: long French labels wrap instead of being clipped */
.panel-sidebar .panel-footer, .panel-sidebar .panel-body { padding: 14px 16px; }
.panel .btn-block, .panel-sidebar .btn, .panel-footer .btn, .panel-body .btn-block {
  white-space: normal !important; overflow-wrap: anywhere; height: auto; line-height: 1.35; padding: 11px 16px; text-align: center;
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; max-width: 100%; box-sizing: border-box;
}
.panel .btn-block i, .panel-sidebar .btn i { flex: 0 0 auto; }
/* Sidebar panel titles with a wrapped label: keep icon top-aligned with the first line */
.panel-sidebar .panel-title { align-items: flex-start !important; line-height: 1.35; }
.panel-sidebar .panel-title > i:first-child { margin-top: 3px; }
.panel-sidebar .panel-title .panel-minimise { margin-top: 3px; }

/* =========================================================
   Tickets list (tickets_fullwidth hook): same calm palette as domains/services
   ========================================================= */
body .tickets-topbar {
  background: #fff !important; border: 1px solid var(--cc-border) !important; border-radius: var(--cc-radius) !important; box-shadow: var(--cc-shadow);
  padding: 14px 18px !important; align-items: center;
}
body .tickets-filters-title, body .tickets-actions-title { color: var(--cc-muted) !important; font-size: 12.5px !important; letter-spacing: .5px; }
/* filter chips: neutral; colour only in the count badge */
body .tickets-filter-link, body .tickets-filter-link[data-status] {
  background: #fff !important; color: var(--cc-primary) !important; border: 1px solid var(--cc-border) !important; font-size: 14.5px; font-weight: 500; box-shadow: none;
}
body .tickets-filter-link:hover, body .tickets-filter-link[data-status]:hover { border-color: var(--cc-accent) !important; background: var(--cc-secondary) !important; color: var(--cc-primary) !important; }
body .tickets-filter-link.active, body .tickets-filter-link[data-status].active { background: var(--cc-primary) !important; border-color: var(--cc-primary) !important; color: #fff !important; }
body .tickets-filter-link .badge { background: var(--cc-light) !important; color: var(--cc-primary) !important; font-weight: 600; }
body .tickets-filter-link[data-status="open"] .badge { background: #e3eeff !important; color: var(--cc-accent-dark) !important; }
body .tickets-filter-link[data-status="answered"] .badge { background: #e3f6ea !important; color: #146c36 !important; }
body .tickets-filter-link[data-status="reply"] .badge, body .tickets-filter-link[data-status="customer-reply"] .badge { background: #fff3d1 !important; color: #8a5a00 !important; }
body .tickets-filter-link[data-status="closed"] .badge { background: #eef1f6 !important; color: #5f6f86 !important; }
body .tickets-filter-link.active .badge { background: rgba(255,255,255,.22) !important; color: #fff !important; }
/* quick actions: outlined, icons in brand colours (no green) */
body .tickets-action-link { background: #fff !important; color: var(--cc-accent) !important; border: 1px solid var(--cc-accent) !important; border-radius: var(--cc-radius-input) !important; font-weight: 600; font-size: 14.5px; min-height: 44px; }
body .tickets-action-link:hover { background: var(--cc-accent) !important; color: #fff !important; border-color: var(--cc-accent) !important; }
body .tickets-action-link i, body .tickets-action-link .fas, body .tickets-action-link .far { color: inherit !important; font-weight: 400; }
body .tickets-action-link:first-of-type { background: var(--cc-accent) !important; color: #fff !important; }   /* "Ouvrir un ticket" = primary action */
body .tickets-action-link:first-of-type:hover { background: var(--cc-accent-dark) !important; border-color: var(--cc-accent-dark) !important; }

/* ticket status pills (table + ticket view) */
.status-open, .label.status-open { background: #e3eeff !important; color: var(--cc-accent-dark) !important; }
.status-answered, .label.status-answered { background: #e3f6ea !important; color: #146c36 !important; }
.status-customer-reply, .label.status-customer-reply, .status-in-progress { background: #fff3d1 !important; color: #8a5a00 !important; }
.status-closed, .label.status-closed, .status-on-hold { background: #eef1f6 !important; color: #5f6f86 !important; }
body #tableTicketsList .label.status { font-weight: 600; }
body.tickets-fw-active .tk-subject { color: var(--cc-navy); }
body.tickets-fw-active .tk-meta, body.tickets-fw-active .tk-meta * { color: var(--cc-muted) !important; }
body.tickets-fw-active #tableTicketsList thead th { background: var(--cc-light) !important; color: var(--cc-navy); }
body.tickets-fw-active #tableTicketsList tbody tr:hover td { background: #f3f8ff; }

/* =========================================================
   Ticket view (viewticket.php): conversation cards, reply box, sidebar polish
   ========================================================= */
/* conversation */
.ticket-replies-wrap { gap: 18px; }
.ticket-reply {
  background: #fff; border: 1px solid var(--cc-border); border-radius: var(--cc-radius); box-shadow: var(--cc-shadow); overflow: hidden; margin: 0 0 18px; padding: 0;
}
.ticket-reply .user {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; padding: 16px 22px; margin: 0; background: #f6f9ff; border-bottom: 1px solid var(--cc-border); color: var(--cc-navy);
}
.ticket-reply .user > i.fas { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--cc-light); color: var(--cc-primary); font-size: 17px; font-weight: 400; flex: 0 0 auto; padding: 0; opacity: 1; }
.ticket-reply .user .name { font-size: 16px; font-weight: 600; color: var(--cc-navy); display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ticket-reply .user .type { font-size: 13.5px; color: var(--cc-muted); font-weight: 400; margin-left: 0; display: block; flex-basis: 100%; padding-left: 52px; margin-top: -6px; }
.ticket-reply .date { float: none; position: absolute; right: 22px; top: 22px; font-size: 13.5px; color: var(--cc-muted); }
.ticket-reply { position: relative; }
.ticket-reply .message { padding: 22px 26px 24px; font-size: 16px; line-height: 1.7; color: var(--cc-text); background: #fff; }
.ticket-reply .message p { margin: 0 0 12px; }
/* staff replies stand out: pale-blue header + blue edge */
.ticket-reply.staff { border-left: 4px solid var(--cc-accent); }
.ticket-reply.staff .user { background: #eaf2ff; }
.ticket-reply.staff .user > i.fas { background: var(--cc-accent); color: #fff; }
/* role pills */
.ticket-reply .label[class*="requestor-type"] { font-size: 12.5px; font-weight: 600; padding: 3px 11px; border-radius: 20px; background: #e3eeff !important; color: var(--cc-accent-dark) !important; }
.ticket-reply .label.requestor-type-operator { background: var(--cc-primary) !important; color: #fff !important; }
.ticket-reply .label.requestor-type-guest, .ticket-reply .label.requestor-type-subaccount { background: #eef1f6 !important; color: var(--cc-muted) !important; }
.ticket-reply .attachments { padding: 14px 26px 18px; border-top: 1px solid #e6eef9; background: #fafcff; }
.ticket-reply .attachments a { font-weight: 500; }

/* reply box (collapsible panel) */
.panel-info.panel-collapsable, .panel-info.hidden-print { border: 1px solid var(--cc-border); background: #fff; }
.panel-info > .panel-heading, .panel-info.panel-collapsable > .panel-heading { background: #fff !important; color: var(--cc-navy) !important; border: 0 !important; padding: 18px 24px; cursor: pointer; }
.panel-info.panel-collapsable > .panel-heading .panel-title { color: var(--cc-navy) !important; font-size: 17px; }
.panel-info.panel-collapsable > .panel-heading .panel-title i { color: var(--cc-accent); }
.panel-info.panel-collapsable > .panel-heading .collapse-icon { float: none !important; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; background: var(--cc-light); color: var(--cc-accent); display: inline-flex; align-items: center; justify-content: center; }
.panel-info.panel-collapsable { position: relative; }
.panel-info.panel-collapsable:not(.panel-collapsed) > .panel-heading { border-bottom: 1px solid var(--cc-border) !important; }
.panel-info.panel-collapsable > .panel-body { padding: 24px; }
.panel-info.panel-collapsable > .panel-heading:hover { background: #f6f9ff !important; }

/* sidebar: action buttons + CC recipients form */
.panel-sidebar .panel-footer { display: flex; gap: 10px; flex-wrap: wrap; background: #fff; border-top: 1px solid var(--cc-border); }
.panel-sidebar .panel-footer .btn { flex: 1 1 130px; width: auto; }
.panel-sidebar .panel-footer .btn-success { background: var(--cc-accent) !important; border-color: var(--cc-accent) !important; color: #fff !important; }
.panel-sidebar .panel-footer .btn-danger { background: #fff !important; color: #a12626 !important; border: 1px solid #e6b5b5 !important; }
.panel-sidebar .panel-footer .btn-danger:hover { background: #fde8e8 !important; }
.panel-sidebar .panel-footer .btn.disabled, .panel-sidebar .panel-footer .btn[disabled] { opacity: .55; }
.panel-sidebar .input-group { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.panel-sidebar .input-group .form-control { width: 100% !important; float: none; border-radius: var(--cc-radius-input) !important; }
.panel-sidebar .input-group-btn { display: block; width: 100%; }
.panel-sidebar .input-group-btn .btn, .panel-sidebar .input-group-btn input[type="submit"] { width: 100%; writing-mode: horizontal-tb; white-space: normal; border-radius: var(--cc-radius-input) !important; }
.panel-sidebar .panel-body form { width: 100%; }
.panel-sidebar .panel-body { overflow: visible; }
.panel-sidebar .label { font-size: 12.5px; }

/* closed / status banner */
.alert-warning { background: #fff8e1; border-color: #f4dc8a; color: #7a4b00; text-align: left; }
@media (max-width: 767px) { .ticket-reply .date { position: static; padding: 0 22px 12px; } .ticket-reply .user .type { padding-left: 0; margin-top: 0; } }

/* =========================================================
   Language modal (js/language-modal.js)
   ========================================================= */
.cc-lang-modal .modal-dialog { max-width: 520px; margin: 90px auto 20px; }
.cc-lang-modal .modal-content { border: 0; border-radius: 20px; box-shadow: 0 20px 60px rgba(31, 49, 75, .22); overflow: hidden; }
.cc-lang-modal .modal-header { background: linear-gradient(180deg, #edf4ff, #fff); border: 0; padding: 26px 28px 8px; }
.cc-lang-modal .modal-title { font-size: 20px; font-weight: 650; color: var(--cc-navy); display: flex; align-items: center; gap: 10px; }
.cc-lang-modal .modal-title i { color: var(--cc-accent); font-weight: 300; font-size: 22px; }
.cc-lang-modal .close { position: absolute; right: 18px; top: 18px; width: 36px; height: 36px; border-radius: 50%; background: #fff; border: 1px solid var(--cc-border); color: var(--cc-primary); opacity: 1; font-size: 22px; line-height: 1; text-shadow: none; }
.cc-lang-modal .close:hover { background: var(--cc-light); }
.cc-lang-hint { margin: 6px 0 0; font-size: 14px; color: var(--cc-muted); }
.cc-lang-modal .modal-body { padding: 14px 28px 28px; }
.cc-lang-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cc-lang-option {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; padding: 12px 16px;
  border: 1px solid var(--cc-border); border-radius: 12px; background: #fff; color: var(--cc-navy); font-size: 16px; font-weight: 500; text-decoration: none; transition: border-color .15s, background .15s;
}
.cc-lang-option:hover, .cc-lang-option:focus { border-color: var(--cc-accent); background: #f6faff; color: var(--cc-navy); text-decoration: none; }
.cc-lang-option.is-current { border-color: var(--cc-accent); background: #e8f1ff; font-weight: 600; }
.cc-lang-option.is-current i { color: var(--cc-accent); font-size: 18px; }
@media (max-width: 480px) { .cc-lang-grid { grid-template-columns: 1fr; } .cc-lang-modal .modal-dialog { margin: 60px 12px 20px; } }
@media (prefers-reduced-motion: reduce) { .cc-lang-option { transition: none; } }

/* header language trigger: quiet pill with globe, no boxed focus */
section#header .top-nav a.choose-language { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border-radius: 22px; border: 1px solid transparent; font-weight: 500; color: var(--cc-primary); }
section#header .top-nav a.choose-language::before { content: "\f0ac"; font-family: "Font Awesome 5 Pro"; font-weight: 300; font-size: 16px; color: var(--cc-accent); }
section#header .top-nav a.choose-language:hover { background: var(--cc-light); border-color: var(--cc-border); }
section#header .top-nav a.choose-language:focus:not(:focus-visible) { outline: 0; box-shadow: none; }
/* old popover, if it ever shows */
.language-popover { display: none !important; }

/* Fix: home panel titles — header button is first in the markup, so order it last (title stays left) */
.panel-heading .panel-title .btn, .panel-heading .panel-title .pull-right, .panel-heading .panel-title .panel-minimise, .panel-heading .panel-title a.btn { order: 99; }
.panel-heading .panel-title { justify-content: flex-start; text-align: left; }
/* one accent colour for the home tiles' underline bars (was blue/green/red/orange) */
.tile .highlight, .tiles .tile .highlight { background: var(--cc-accent) !important; opacity: .9; }

/* =========================================================
   Editor focus: one clean ring around the whole editor (no bars inside the textarea)
   ========================================================= */
.md-editor textarea:focus, .md-editor textarea:focus-visible, textarea.markdown-editor:focus, textarea.markdown-editor:focus-visible,
.md-editor .md-input:focus { outline: 0 !important; box-shadow: none !important; border: 0 !important; }
.md-editor { transition: border-color .15s, box-shadow .15s; }
.md-editor:focus-within, .md-editor.active { border-color: var(--cc-accent) !important; box-shadow: 0 0 0 4px rgba(20, 99, 201, .16) !important; }
.md-editor:focus-within > .md-header, .md-editor.active > .md-header { background: #f1f7ff; }
/* text selection inside the editor is visible */
.md-editor textarea::selection, .md-input::selection { background: #b9d6ff; color: var(--cc-navy); }
/* fields in the reply form: same ring behaviour as the rest of the site */
.panel-info .form-control:focus { border-color: var(--cc-accent); box-shadow: 0 0 0 3px rgba(20, 99, 201, .18); outline: 0 !important; }
@media (prefers-reduced-motion: reduce) { .md-editor { transition: none; } }

/* =========================================================
   Sidebar footer buttons (ticket info: Répondre / Fermer): clean grid, never split a word
   ========================================================= */
.panel-sidebar .panel-footer { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px; padding: 16px; }
.panel-sidebar .panel-footer .btn, .panel-sidebar .panel-footer a.btn, .panel-sidebar .panel-footer input.btn {
  width: 100% !important; min-width: 0; height: auto; min-height: 46px; padding: 11px 12px; margin: 0;
  display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; text-align: center; font-size: 15px; line-height: 1.25;
  white-space: normal !important; overflow-wrap: break-word !important; word-break: normal !important; hyphens: manual;
}
.panel-sidebar .panel-footer .btn i { flex: 0 0 auto; margin: 0; }
/* a single button spans the full row */
.panel-sidebar .panel-footer .btn:only-child { grid-column: 1 / -1; }
/* any word-wrapping rule elsewhere must not split words */
.panel .btn-block, .panel-sidebar .btn, .panel-footer .btn, .panel-body .btn-block { overflow-wrap: break-word !important; word-break: normal !important; }
.panel-sidebar .panel-footer .btn-success { background: var(--cc-accent) !important; border-color: var(--cc-accent) !important; color: #fff !important; font-weight: 600; box-shadow: 0 1px 2px rgba(20, 99, 201, .25); }
.panel-sidebar .panel-footer .btn-success:hover { background: var(--cc-accent-dark) !important; border-color: var(--cc-accent-dark) !important; }
.panel-sidebar .panel-footer .btn-danger { background: #fff !important; color: #8a3a3a !important; border: 1px solid var(--cc-border) !important; font-weight: 500; }
.panel-sidebar .panel-footer .btn-danger:hover { background: #fdf0f0 !important; border-color: #e6b5b5 !important; color: #a12626 !important; }
@media (max-width: 380px) { .panel-sidebar .panel-footer { grid-template-columns: 1fr; } }

/* =========================================================
   FORMS — site-wide polish
   ========================================================= */
/* ---- fields ---- */
.form-control, select.form-control, textarea.form-control, input.form-control {
  background-color: #fff; border: 1px solid #c9d8ec; border-radius: var(--cc-radius-input); color: var(--cc-navy);
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.form-control::placeholder { color: #8296b0; opacity: 1; }
.form-control:hover:not([disabled]):not([readonly]):not(:focus) { border-color: #9db6d6; }
/* ONE focus ring (border + soft halo); no second browser outline for mouse/typing focus */
.form-control:focus, select.form-control:focus, textarea.form-control:focus,
.form-control:focus-visible, select.form-control:focus-visible, textarea.form-control:focus-visible, input.form-control:focus-visible {
  outline: 0 !important; border-color: var(--cc-accent) !important; box-shadow: 0 0 0 4px rgba(20, 99, 201, .15) !important; background-color: #fff;
}
/* custom dropdown arrow (native chevron is tiny and inconsistent) */
select.form-control, .custom-select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: 42px !important; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235f6f86' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 16px;
}
select.form-control:focus { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231463c9' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>"); }
select.form-control[multiple], select.form-control[size] { background-image: none; padding-right: 16px !important; }
textarea.form-control { resize: vertical; min-height: 120px; line-height: 1.6; }
/* locked / read-only fields look intentionally locked */
.form-control[disabled], .form-control[readonly], .form-control.disabled { background-color: #f1f6fd !important; color: #5f6f86 !important; border-color: #dbe6f4 !important; cursor: not-allowed; box-shadow: none !important; }
/* file input */
input[type="file"].form-control { padding: 8px 12px; line-height: 1.4; height: auto; }
input[type="file"]::file-selector-button { margin-right: 14px; padding: 8px 16px; border: 1px solid var(--cc-accent); border-radius: 8px; background: #fff; color: var(--cc-accent); font: inherit; font-weight: 600; cursor: pointer; transition: background .15s; }
input[type="file"]::file-selector-button:hover { background: var(--cc-light); }
/* checkboxes / radios */
input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; accent-color: var(--cc-accent); vertical-align: -3px; cursor: pointer; margin-right: 6px; }
.checkbox label, .radio label, label.checkbox-inline, label.radio-inline { font-weight: 500; cursor: pointer; }

/* ---- labels, help, validation ---- */
label, .control-label { font-weight: 600; color: var(--cc-navy); margin-bottom: 7px; }
.form-group { margin-bottom: 20px; }
.help-block, .form-text, small.text-muted { color: var(--cc-muted); font-size: 13.5px; line-height: 1.5; margin-top: 6px; }
.has-error .form-control, .form-control.error { border-color: #c53030 !important; background-color: #fff8f8; }
.has-error .form-control:focus { box-shadow: 0 0 0 4px rgba(197, 48, 48, .15) !important; }
.has-error .help-block, label.error { color: #a12626; font-weight: 500; }
.has-error .help-block::before, label.error::before { content: "\f06a"; font-family: "Font Awesome 5 Pro"; font-weight: 400; margin-right: 6px; }
.has-success .form-control { border-color: #2f855a; }
.has-feedback .form-control-feedback { height: 46px; line-height: 46px; }
.input-group-addon { background: #f1f6fd; border: 1px solid #c9d8ec; color: var(--cc-muted); border-radius: var(--cc-radius-input); }
.input-group .form-control:not(:first-child):not(:last-child) { border-radius: 0 !important; }
.input-group .form-control:first-child { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.input-group .form-control:last-child { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }

/* ---- grouping: main forms sit in a white card with clear sections ---- */
.main-content > form[role="form"]:not(.form-inline), form[action*="step=3"][enctype] {
  background: #fff; border: 1px solid var(--cc-border); border-radius: var(--cc-radius); box-shadow: var(--cc-shadow); padding: 28px 32px 30px; margin-bottom: 26px;
}
.main-content > form[role="form"] fieldset { border: 0; padding: 0; margin: 0 0 8px; }
.main-content > form[role="form"] legend { font-size: 17px; font-weight: 650; color: var(--cc-navy); border: 0; padding: 0 0 12px; margin: 0 0 18px; border-bottom: 1px solid var(--cc-border); }
/* submit row */
.main-content > form[role="form"] .form-group.text-center, .main-content > form[role="form"] p.text-center { border-top: 1px solid #e6eef9; margin-top: 26px; padding-top: 24px; }
.main-content > form[role="form"] .btn-primary { min-width: 160px; }
@media (max-width: 767px) { .main-content > form[role="form"]:not(.form-inline), form[action*="step=3"][enctype] { padding: 20px 18px 22px; } }
/* ticket form: remove the now-redundant max-width gap, keep the grid */
form[action*="step=3"][enctype] { max-width: 980px; }
form[action*="step=3"][enctype] .form-control { background-color: #fff; }
/* editor border matches fields */
.md-editor { border-color: #c9d8ec; }

/* =========================================================
   Header cart button (logged-in) — round button with item count, same family as the bell
   ========================================================= */
section#header .top-nav .cc-cart-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--cc-light); border: 1px solid var(--cc-border); color: var(--cc-primary); font-size: 17px; padding: 0; text-decoration: none;
}
section#header .top-nav .cc-cart-btn:hover { background: #fff; color: var(--cc-accent); box-shadow: var(--cc-shadow); }
section#header .top-nav .cc-cart-btn i { font-weight: 300; line-height: 1; margin: 0; }
section#header .top-nav .cc-cart-count {
  position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--cc-accent); color: #fff;
  font-size: 12px; font-weight: 700; line-height: 20px; text-align: center; border: 2px solid #fff; box-sizing: content-box;
}
section#header .top-nav .cc-cart-count.cc-cart-empty { background: #9aa7b8; }

/* =========================================================
   Sidebar footers / bodies (HTML comes from WHMCS core): kill floats, offsets and clearfix leftovers
   so buttons and the CC form always fill the panel width
   ========================================================= */
.panel-sidebar .panel-footer::before, .panel-sidebar .panel-footer::after,
.panel-sidebar .panel-footer div::before, .panel-sidebar .panel-footer div::after,
.panel-sidebar .panel-body div::before, .panel-sidebar .panel-body div::after { content: none !important; display: none !important; }
/* wrappers vanish; their buttons become direct items of the footer grid */
.panel-sidebar .panel-footer div, .panel-sidebar .panel-footer form, .panel-sidebar .panel-footer .row, .panel-sidebar .panel-footer [class*="col-"],
.panel-sidebar .panel-footer .pull-left, .panel-sidebar .panel-footer .pull-right { display: contents !important; float: none !important; }
.panel-sidebar .panel-footer .btn { float: none !important; margin: 0 !important; width: 100% !important; }
/* CC recipients / sidebar forms: one full-width column, no offsets */
.panel-sidebar .panel-body, .panel-sidebar .panel-body form { width: 100%; }
.panel-sidebar .panel-body .row { margin: 0 !important; display: block; }
.panel-sidebar .panel-body [class*="col-"], .panel-sidebar .panel-body .pull-left, .panel-sidebar .panel-body .pull-right {
  float: none !important; width: 100% !important; max-width: 100% !important; margin: 0 0 10px !important; padding: 0 !important; left: 0 !important; right: 0 !important;
}
.panel-sidebar .panel-body [class*="col-"][class*="offset"] { margin-left: 0 !important; }
.panel-sidebar .panel-body .input-group, .panel-sidebar .panel-body .input-group-btn, .panel-sidebar .panel-body .form-control, .panel-sidebar .panel-body .btn { width: 100% !important; max-width: 100% !important; box-sizing: border-box; }
.panel-sidebar .panel-body .btn { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; }
/* existing CC list above the form */
.panel-sidebar .panel-body ul { list-style: none; padding: 0; margin: 0 0 12px; }
.panel-sidebar .panel-body ul li { padding: 8px 0; border-bottom: 1px solid #e6eef9; word-break: break-word; }

/* =========================================================
   List footers ("Show N entries" + pager) — clean white bar instead of a grey strip
   ========================================================= */
body .dataTables_wrapper .dataTables_length, body div.dataTables_wrapper div.dataTables_length {
  background: transparent !important; float: left; font-size: 14px; color: var(--cc-muted); padding: 0; margin: 16px 0 0;
}
body .dataTables_wrapper .dataTables_length label, body div.dataTables_wrapper div.dataTables_length label {
  display: inline-flex; align-items: center; gap: 10px; padding: 0 !important; margin: 0; color: var(--cc-muted); font-weight: 500;
}
body .dataTables_wrapper .dataTables_length label .form-control, body div.dataTables_wrapper div.dataTables_length select {
  display: inline-block; width: auto !important; min-width: 78px; height: 40px !important; min-height: 40px; padding: 0 34px 0 14px !important;
  border: 1px solid #c9d8ec !important; border-radius: var(--cc-radius-input); background-color: #fff; color: var(--cc-navy); font-size: 15px; line-height: 38px;
}
body .dataTables_wrapper .dataTables_paginate, body div.dataTables_wrapper div.dataTables_paginate { float: right; padding: 0 !important; margin: 16px 0 0; background: transparent; }
body .dataTables_wrapper .dataTables_paginate ul.pagination { display: inline-flex; gap: 6px; margin: 0; padding: 0; }
body .dataTables_wrapper .dataTables_paginate .pagination > li { float: none; display: inline-flex; }
body .dataTables_wrapper .dataTables_paginate .pagination > li > a, body .dataTables_wrapper .dataTables_paginate .pagination > li > span {
  display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 14px !important; margin: 0 !important;
  border: 1px solid var(--cc-border) !important; border-radius: 10px !important; background: #fff; color: var(--cc-primary); font-size: 14.5px; font-weight: 500; line-height: 1; float: none;
}
body .dataTables_wrapper .dataTables_paginate .pagination > li > a:hover { background: var(--cc-light); border-color: var(--cc-accent) !important; color: var(--cc-accent-dark); }
body .dataTables_wrapper .dataTables_paginate .pagination > .active > a, body .dataTables_wrapper .dataTables_paginate .pagination > .active > span {
  background: var(--cc-accent) !important; border-color: var(--cc-accent) !important; color: #fff !important; font-weight: 600;
}
body .dataTables_wrapper .dataTables_paginate .pagination > .disabled > a, body .dataTables_wrapper .dataTables_paginate .pagination > .disabled > span { color: #9aa7b8; background: #f7f9fc; cursor: not-allowed; }
.dataTables_wrapper { padding-bottom: 20px; }
.dataTables_wrapper::after { content: ""; display: table; clear: both; }
@media (max-width: 575px) { body .dataTables_wrapper .dataTables_length, body .dataTables_wrapper .dataTables_paginate { float: none; width: 100%; } body .dataTables_wrapper .dataTables_paginate { margin-top: 12px; } }

/* Services table: I hid every <br> in the cells; keep it only in the product cell so "120.00dhs / Annually" stays on two lines */
body #tableServicesList tbody td:not(:nth-child(2)) br { display: revert; }
body #tableServicesList tbody td small { display: block; margin-top: 2px; color: var(--cc-muted); }

/* =========================================================
   Selected filter chips (domains / services / tickets): soft, not a heavy dark block
   ========================================================= */
body .ds-link.active, body .ss-link.active, body .tickets-filter-link.active,
body .ds-link[data-status].active, body .ss-link[data-status].active, body .tickets-filter-link[data-status].active {
  background: #e3eeff !important; border-color: var(--cc-accent) !important; color: var(--cc-accent-dark) !important;
  font-weight: 600; box-shadow: 0 0 0 3px rgba(20, 99, 201, .12) !important;
}
body .ds-link.active:hover, body .ss-link.active:hover, body .tickets-filter-link.active:hover,
body .ds-link[data-status].active:hover, body .ss-link[data-status].active:hover, body .tickets-filter-link[data-status].active:hover {
  background: #d8e8ff !important; border-color: var(--cc-accent-dark) !important; color: var(--cc-accent-dark) !important;
}
/* the radio dot in a selected chip turns solid blue */
.ds-link.active i, .ss-link.active i, .tickets-filter-link.active i, .ds-link.active .fa-circle, .ss-link.active .fa-circle { color: var(--cc-accent) !important; }
.ds-link.active i::before, .ss-link.active i::before, .tickets-filter-link.active i::before { content: "\f192"; font-weight: 900; }  /* dot-circle */
/* count badge in a selected chip: white pill, blue number */
body .ds-link.active .badge, body .ss-link.active .badge, body .tickets-filter-link.active .badge,
body .ds-link[data-status].active .badge, body .ss-link[data-status].active .badge, body .tickets-filter-link[data-status].active .badge {
  background: #fff !important; color: var(--cc-accent-dark) !important; border: 1px solid #b9d3fb;
}
/* one focus treatment for chips: no extra dark outline on click, a clear ring for keyboard only */
.ds-link:focus, .ss-link:focus, .tickets-filter-link:focus { outline: 0 !important; }
.ds-link:focus-visible, .ss-link:focus-visible, .tickets-filter-link:focus-visible { outline: 3px solid #6aa8ff !important; outline-offset: 2px; }
.ds-link, .ss-link, .tickets-filter-link { transition: background .15s, border-color .15s, box-shadow .15s; }
@media (prefers-reduced-motion: reduce) { .ds-link, .ss-link, .tickets-filter-link { transition: none; } }

/* =========================================================
   CART (view cart): item rows, Empty Cart, header bars — brand-aligned
   ========================================================= */
body #order-standard_cart .view-cart-items-header, body #order-standard_cart .order-summary h2 {
  background: #edf4ff !important; color: #1f314b !important; border: 1px solid #d6e2f2; border-bottom: 0; text-shadow: none;
  font-size: 15px; font-weight: 650; letter-spacing: 0; padding: 14px 20px !important; margin: 0; text-align: left;
}
body #order-standard_cart .view-cart-items-header { border-radius: 14px 14px 0 0; }
body #order-standard_cart .order-summary h2 { border-radius: 14px 14px 0 0; font-size: 17px; }
body #order-standard_cart .view-cart-items-header .col-sm-4, body #order-standard_cart .view-cart-items-header [class*="col-"] { color: #1f314b; }
body #order-standard_cart .view-cart-items { border: 1px solid #d6e2f2; border-radius: 0 0 14px 14px; background: #fff; box-shadow: 0 1px 2px rgba(31,49,75,.05), 0 4px 14px rgba(31,49,75,.05); overflow: hidden; }
body #order-standard_cart .view-cart-items .item { padding: 20px 22px; border-bottom: 1px solid #e6eef9; background: #fff; }
body #order-standard_cart .view-cart-items .item:nth-child(even) { background: #fff; }
body #order-standard_cart .view-cart-items .item:last-child { border-bottom: 0; }

/* product block: title, then domain + Configure on one tidy line */
body #order-standard_cart .view-cart-items .item .col-sm-7 { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
body #order-standard_cart .view-cart-items .item-title { display: block; margin: 0; font-size: 17px; font-weight: 650; color: #1f314b; line-height: 1.3; }
body #order-standard_cart .view-cart-items .item-group { display: block; margin: 0; font-size: 14px; color: #5f6f86; }
body #order-standard_cart .view-cart-items .item-domain {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0; font-size: 17px; font-weight: 600; color: #0f52a8; overflow-wrap: anywhere;
}
body #order-standard_cart .view-cart-items .sc-domain-configure-link, body #order-standard_cart .view-cart-items .item-title .btn-link {
  display: inline-flex !important; align-items: center; gap: 6px; float: none !important; margin: 0 !important; padding: 5px 12px !important;
  font-size: 13px; font-weight: 600; color: #1463c9 !important; background: #fff; border: 1px solid #c9d8ec; border-radius: 8px; text-decoration: none;
}
body #order-standard_cart .view-cart-items .sc-domain-configure-link:hover { background: #edf4ff; border-color: #1463c9; }
/* price column */
body #order-standard_cart .view-cart-items .item-price { font-size: 17px; font-weight: 650; color: #1f314b; }
body #order-standard_cart .view-cart-items .item-price .cycle { font-size: 13px; font-weight: 400; color: #5f6f86; }
body #order-standard_cart .view-cart-items .item-price .renewal.cycle { font-size: 12.5px; }
body #order-standard_cart .view-cart-items .btn-remove-from-cart { color: #8a96a8 !important; border-radius: 50%; width: 32px; height: 32px; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; }
body #order-standard_cart .view-cart-items .btn-remove-from-cart:hover { background: #fde8e8; color: #a12626 !important; }

/* Empty Cart: quiet outlined button, not a big red block */
body #order-standard_cart .empty-cart { text-align: right; margin: 14px 0 22px; }
body #order-standard_cart .empty-cart .btn, body #order-standard_cart #btnEmptyCart {
  background: #fff !important; color: #8a3a3a !important; border: 1px solid #e3c3c3 !important; border-radius: 10px; padding: 9px 16px !important;
  font-size: 14px; font-weight: 500; box-shadow: none; display: inline-flex; align-items: center; gap: 8px;
}
body #order-standard_cart .empty-cart .btn:hover, body #order-standard_cart #btnEmptyCart:hover { background: #fdf0f0 !important; border-color: #d99a9a !important; color: #a12626 !important; }

/* order summary card */
body #order-standard_cart .order-summary { border: 1px solid #d6e2f2; border-radius: 14px; box-shadow: 0 1px 2px rgba(31,49,75,.05), 0 4px 14px rgba(31,49,75,.05); overflow: hidden; background: #fff; }
body #order-standard_cart .order-summary .summary-container { padding: 6px 20px 20px; }
body #order-standard_cart .order-summary .total-due-today .amt { font-size: 32px; font-weight: 700; color: #1f314b; }
body #order-standard_cart .order-summary .btn-checkout, body #order-standard_cart #checkout { background: #1463c9 !important; border-color: #1463c9 !important; color: #fff !important; min-height: 48px; font-size: 16px; border-radius: 10px; }
body #order-standard_cart .order-summary .btn-checkout:hover, body #order-standard_cart #checkout:hover { background: #0f52a8 !important; }
body #order-standard_cart .btn-continue-shopping, body #order-standard_cart .order-summary a.btn-link { color: #1463c9 !important; font-weight: 500; }

/* =========================================================
   CC Recipients box: one stacked form, no empty strip, no stray icon
   ========================================================= */
#frmAddCcEmail { display: flex !important; flex-direction: column; gap: 10px; width: 100%; margin: 0; padding: 0; }
#frmAddCcEmail * { float: none !important; }
#frmAddCcEmail div, #frmAddCcEmail span.input-group-btn, #frmAddCcEmail .input-group, #frmAddCcEmail .form-group { display: contents !important; }
#frmAddCcEmail .form-control, #frmAddCcEmail input[type="text"], #frmAddCcEmail input[type="email"] {
  display: block; width: 100% !important; max-width: 100% !important; height: 46px; border-radius: var(--cc-radius-input) !important; box-sizing: border-box; margin: 0 !important;
}
#frmAddCcEmail .btn, #frmAddCcEmail input[type="submit"], #frmAddCcEmail button {
  display: inline-flex !important; width: 100% !important; max-width: 100% !important; min-height: 46px; align-items: center; justify-content: center; margin: 0 !important; border-radius: var(--cc-radius-input) !important;
  background: #fff !important; color: var(--cc-accent) !important; border: 1px solid var(--cc-accent) !important; font-weight: 600;
}
#frmAddCcEmail .btn:hover, #frmAddCcEmail input[type="submit"]:hover { background: var(--cc-accent) !important; color: #fff !important; }
#divCcEmailFeedback { margin: 0 0 12px !important; border-radius: 10px; font-size: 14px; }
/* existing recipients: tidy rows with the remove icon on the right */
.panel-sidebar .ticket-cc-email { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid #e6eef9; word-break: break-word; }
.panel-sidebar .delete-cc-email { cursor: pointer; color: #8a96a8; flex: 0 0 auto; }
.panel-sidebar .delete-cc-email:hover { color: #a12626; }
/* empty list wrappers collapse; an icon with nothing next to it is not shown */
.panel-sidebar .list-group:empty, .panel-sidebar .panel-body:empty { display: none !important; }
.panel-sidebar .panel-body :is(div, span, p):has(> i:only-child):not(.input-group-btn):not(.ticket-cc-email) { display: none !important; }
.panel-sidebar { overflow: hidden; margin-bottom: 22px; }

/* Header cart icon: solid enough to read at a glance */
section#header .top-nav .cc-cart-btn { color: var(--cc-primary); background: #fff; border-color: #c9d8ec; }
section#header .top-nav .cc-cart-btn i, section#header .top-nav .cc-cart-btn .fal { font-weight: 400 !important; font-size: 19px; color: var(--cc-primary) !important; }
section#header .top-nav .cc-cart-btn:hover i { color: var(--cc-accent) !important; }
section#header .top-nav .cc-cart-count { top: -6px; right: -6px; }

/* =========================================================
   CART — item grid, price block, summary and promo area
   ========================================================= */
body #order-standard_cart .view-cart-items-header > .row, body #order-standard_cart .view-cart-items .item > .row { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 18px; margin: 0; }
body #order-standard_cart .view-cart-items-header > .row::before, body #order-standard_cart .view-cart-items-header > .row::after,
body #order-standard_cart .view-cart-items .item > .row::before, body #order-standard_cart .view-cart-items .item > .row::after { content: none !important; display: none !important; }
body #order-standard_cart .view-cart-items-header > .row > [class*="col-"], body #order-standard_cart .view-cart-items .item > .row > [class*="col-"] { float: none; width: auto; padding: 0; min-width: 0; }
/* column 1 = product (flexible), 2 = price (fixed), 3 = remove (fixed) */
body #order-standard_cart .view-cart-items-header > .row > [class*="col-"]:nth-child(1), body #order-standard_cart .view-cart-items .item > .row > [class*="col-"]:nth-child(1) { flex: 1 1 auto; }
body #order-standard_cart .view-cart-items-header > .row > [class*="col-"]:nth-child(2), body #order-standard_cart .view-cart-items .item > .row > [class*="col-"]:nth-child(2) { flex: 0 0 230px; text-align: right; }
body #order-standard_cart .view-cart-items-header > .row > [class*="col-"]:nth-child(3), body #order-standard_cart .view-cart-items .item > .row > [class*="col-"]:nth-child(3) { flex: 0 0 36px; text-align: right; }
body #order-standard_cart .view-cart-items .item-price { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; text-align: right; }
body #order-standard_cart .view-cart-items .item-price > span:first-child { font-size: 22px; font-weight: 700; color: #1f314b; line-height: 1.1; }
body #order-standard_cart .view-cart-items .item-price .dropdown, body #order-standard_cart .view-cart-items .item-price .btn-group { margin: 0; }
body #order-standard_cart .view-cart-items .item-price .btn.dropdown-toggle, body #order-standard_cart .view-cart-items .item-price select { background: #fff !important; border: 1px solid #c9d8ec !important; border-radius: 10px; color: #1f314b !important; min-height: 40px; padding: 6px 14px; font-weight: 600; }
body #order-standard_cart .view-cart-items .item-price .btn.dropdown-toggle:hover { border-color: #1463c9 !important; }
body #order-standard_cart .view-cart-items .item-price .renewal.cycle { display: block; margin-top: 2px; }
@media (max-width: 767px) {
  body #order-standard_cart .view-cart-items .item > .row { flex-wrap: wrap; gap: 12px; }
  body #order-standard_cart .view-cart-items .item > .row > [class*="col-"]:nth-child(2) { flex: 1 1 100%; text-align: left; }
  body #order-standard_cart .view-cart-items .item-price { align-items: flex-start; text-align: left; }
}

/* summary: calmer rows, clearer total, full-width checkout */
body #order-standard_cart .order-summary .summary-container { font-size: 15px; }
body #order-standard_cart .order-summary .subtotal, body #order-standard_cart .order-summary .bordered-totals div { padding: 10px 0; }
body #order-standard_cart .order-summary .bordered-totals { border-top: 1px solid #e6eef9; border-bottom: 1px solid #e6eef9; margin: 8px 0; }
body #order-standard_cart .order-summary .recurring-charges { color: #5f6f86; font-size: 14px; font-style: normal; }
body #order-standard_cart .order-summary .recurring-charges * { font-style: normal !important; }
body #order-standard_cart .order-summary .total-due-today { text-align: right; padding: 14px 0 4px; }
body #order-standard_cart .order-summary .total-due-today span:not(.amt) { display: block; color: #5f6f86; font-size: 14px; margin-top: 2px; }
body #order-standard_cart .order-summary .btn-checkout, body #order-standard_cart #checkout { width: 100%; margin: 14px 0 6px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
body #order-standard_cart .order-summary .text-center a, body #order-standard_cart .order-summary .btn-continue-shopping { display: inline-block; margin-top: 4px; }

/* promo code / tax tabs under the items */
body #order-standard_cart .view-cart-tabs .nav-tabs { border-bottom: 1px solid #d6e2f2; display: flex; gap: 6px; margin: 22px 0 0; }
body #order-standard_cart .view-cart-tabs .nav-tabs > li { float: none; margin: 0; }
body #order-standard_cart .view-cart-tabs .nav-tabs > li > a { border: 1px solid transparent; border-radius: 10px 10px 0 0; padding: 11px 18px; color: #5f6f86; font-weight: 600; font-size: 14.5px; background: transparent; }
body #order-standard_cart .view-cart-tabs .nav-tabs > li.active > a, body #order-standard_cart .view-cart-tabs .nav-tabs > li.active > a:hover { background: #fff; border-color: #d6e2f2; border-bottom-color: #fff; color: #1463c9; margin-bottom: -1px; }
body #order-standard_cart .view-cart-tabs .tab-content, body #order-standard_cart .view-cart-tabs .tab-pane { background: #fff; }
body #order-standard_cart .view-cart-tabs .tab-content { border: 1px solid #d6e2f2; border-top: 0; border-radius: 0 0 14px 14px; padding: 20px 22px; }
body #order-standard_cart .view-cart-tabs .tab-pane { padding: 0; border: 0; box-shadow: none; margin: 0; }
body #order-standard_cart .view-cart-promotion-code, body #order-standard_cart .promo-code, body #order-standard_cart input[name="promocode"] { height: 46px; border: 1px solid #c9d8ec; border-radius: 10px; padding: 0 14px; font-size: 15px; }
body #order-standard_cart .btn-default { background: #fff !important; color: #1463c9 !important; border: 1px solid #1463c9 !important; }
body #order-standard_cart .btn-default:hover { background: #edf4ff !important; }

/* =========================================================
   HOME — service buttons, attention panels, register-domain form
   ========================================================= */
/* Primary service button ("Log in to cPanel"): solid brand blue so it is the obvious action */
body .div-service-buttons .btn-group-secondary > .btn-custom-action, body .div-service-buttons .btn-group-secondary > .btn.btn-default.btn-custom-action {
  background: var(--cc-accent) !important; border: 1px solid var(--cc-accent) !important; color: #fff !important; font-weight: 600; font-size: 14.5px;
  min-height: 44px; padding: 8px 18px; border-radius: var(--cc-radius-input) 0 0 var(--cc-radius-input) !important; display: inline-flex; align-items: center; gap: 10px;
}
body .div-service-buttons .btn-group-secondary > .btn-custom-action:hover { background: var(--cc-accent-dark) !important; border-color: var(--cc-accent-dark) !important; }
body .div-service-buttons .btn-group-secondary:only-child > .btn-custom-action { border-radius: var(--cc-radius-input) !important; }
body .div-service-buttons .btn-group-secondary .btn-group > .dropdown-toggle { background: var(--cc-accent) !important; border: 1px solid var(--cc-accent-dark) !important; border-left-color: rgba(255,255,255,.35) !important; min-height: 44px; border-radius: 0 var(--cc-radius-input) var(--cc-radius-input) 0 !important; }
body .div-service-buttons .btn-group-secondary .btn-group > .dropdown-toggle .caret { border-top-color: #fff; }
body .div-service-buttons .btn-custom-action.disabled, body .div-service-buttons .btn-custom-action[disabled] { opacity: .55; }
/* "View Details": clear secondary */
body .div-service-buttons .btn-group-primary > .dropdown-toggle { display: none; }
body .div-service-buttons a.btn, body .div-service-buttons .btn-view-details { min-height: 44px; display: inline-flex; align-items: center; background: #fff !important; color: var(--cc-accent) !important; border: 1px solid var(--cc-accent) !important; font-weight: 600; }
body .div-service-buttons a.btn:hover { background: var(--cc-light) !important; }
body .div-service-buttons { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }

/* brand icons (cPanel / Webmail) */
.cc-ico-cpanel::before, .cc-ico-webmail::before { content: ""; display: inline-block; width: 22px; height: 22px; flex: 0 0 22px; background-repeat: no-repeat; background-size: contain; vertical-align: middle; margin-right: 8px; }
.cc-ico-cpanel::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect width='24' height='24' rx='6' fill='%23ffffff'/><text x='12' y='16.4' text-anchor='middle' font-family='Arial,Helvetica,sans-serif' font-weight='700' font-size='12.5' fill='%23ff6c2c'>cP</text></svg>"); }
.cc-ico-webmail::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231463c9' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='14' rx='3' fill='%23ffffff'/><polyline points='3 8 12 14 21 8'/></svg>"); }
li.cc-ico-cpanel::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect width='24' height='24' rx='6' fill='%23ff6c2c'/><text x='12' y='16.4' text-anchor='middle' font-family='Arial,Helvetica,sans-serif' font-weight='700' font-size='12.5' fill='%23ffffff'>cP</text></svg>"); width: 20px; height: 20px; }

/* Panels that need attention are RED: expiring domains, overdue/unpaid invoices, expiring card */
[menuitemname="Domains Expiring Soon"], [menuitemname="Overdue Invoices"], [menuitemname="Unpaid Invoices"], [menuitemname="Credit Card Expiring Soon"],
.client-home-panels .panel-accent-red {
  border: 1px solid #f0c4c4 !important; border-top: 4px solid #d93a3a !important; background: #fff;
  box-shadow: 0 1px 2px rgba(163, 38, 38, .08), 0 6px 18px rgba(217, 58, 58, .10) !important;
}
[menuitemname="Domains Expiring Soon"] > .panel-heading, [menuitemname="Overdue Invoices"] > .panel-heading, [menuitemname="Unpaid Invoices"] > .panel-heading,
[menuitemname="Credit Card Expiring Soon"] > .panel-heading, .client-home-panels .panel-accent-red > .panel-heading { background: #fff3f3 !important; border-bottom: 1px solid #f3d3d3 !important; }
[menuitemname="Domains Expiring Soon"] .panel-title, [menuitemname="Overdue Invoices"] .panel-title, [menuitemname="Unpaid Invoices"] .panel-title,
[menuitemname="Credit Card Expiring Soon"] .panel-title, .client-home-panels .panel-accent-red .panel-title { color: #a12626 !important; }
[menuitemname="Domains Expiring Soon"] .panel-title i, [menuitemname="Overdue Invoices"] .panel-title i, [menuitemname="Unpaid Invoices"] .panel-title i,
[menuitemname="Credit Card Expiring Soon"] .panel-title i { color: #d93a3a !important; }
[menuitemname="Domains Expiring Soon"] .panel-body, [menuitemname="Overdue Invoices"] .panel-body, [menuitemname="Credit Card Expiring Soon"] .panel-body { color: #7a2222; font-weight: 500; }
[menuitemname="Domains Expiring Soon"] .panel-footer, [menuitemname="Overdue Invoices"] .panel-footer, [menuitemname="Credit Card Expiring Soon"] .panel-footer { background: #fff3f3; border-top: 1px solid #f3d3d3; }
[menuitemname="Domains Expiring Soon"] .btn, [menuitemname="Overdue Invoices"] .btn, [menuitemname="Credit Card Expiring Soon"] .btn { background: #d93a3a !important; border-color: #d93a3a !important; color: #fff !important; }
[menuitemname="Domains Expiring Soon"] .btn:hover, [menuitemname="Overdue Invoices"] .btn:hover { background: #b92c2c !important; }
/* a small "needs attention" dot next to the title */
[menuitemname="Domains Expiring Soon"] .panel-title::after, [menuitemname="Overdue Invoices"] .panel-title::after, [menuitemname="Credit Card Expiring Soon"] .panel-title::after {
  content: ""; width: 9px; height: 9px; border-radius: 50%; background: #d93a3a; box-shadow: 0 0 0 4px rgba(217, 58, 58, .18); margin-left: 4px; flex: 0 0 auto; order: 5;
}

/* Register a New Domain: input on its own row, two equal buttons beneath */
[menuitemname="Register a New Domain"] .panel-body, #registerDomainPanel .panel-body { padding: 18px 20px 22px; }
[menuitemname="Register a New Domain"] form, #registerDomainPanel form { display: flex; flex-direction: column; gap: 12px; margin: 0; }
[menuitemname="Register a New Domain"] .input-group, #registerDomainPanel .input-group, [menuitemname="Register a New Domain"] .input-group-btn, #registerDomainPanel .input-group-btn { display: contents !important; float: none !important; }
[menuitemname="Register a New Domain"] .form-control, #registerDomainPanel .form-control { width: 100% !important; float: none !important; height: 48px; border-radius: var(--cc-radius-input) !important; margin: 0 !important; }
[menuitemname="Register a New Domain"] .btn, [menuitemname="Register a New Domain"] input[type="submit"], #registerDomainPanel .btn, #registerDomainPanel input[type="submit"] { float: none !important; width: 100% !important; margin: 0 !important; min-height: 46px; border-radius: var(--cc-radius-input) !important; font-weight: 600; }
[menuitemname="Register a New Domain"] .input-group-btn, #registerDomainPanel .input-group-btn { }
[menuitemname="Register a New Domain"] form::after, #registerDomainPanel form::after { content: none; }
@media (min-width: 480px) {
  [menuitemname="Register a New Domain"] form, #registerDomainPanel form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  [menuitemname="Register a New Domain"] .form-control, #registerDomainPanel .form-control { grid-column: 1 / -1; }
}
[menuitemname="Register a New Domain"] .btn-success, [menuitemname="Register a New Domain"] .btn-primary, #registerDomainPanel .btn-success, #registerDomainPanel .btn-primary { background: var(--cc-accent) !important; border-color: var(--cc-accent) !important; color: #fff !important; }
[menuitemname="Register a New Domain"] .btn-default, #registerDomainPanel .btn-default { background: #fff !important; color: var(--cc-accent) !important; border: 1px solid var(--cc-accent) !important; }

/* Home: knowledge-base search box removed (CSS only; the form still exists in the template) */
form[action*="action=kbsearch"], .home-kb-search { display: none !important; }

/* =========================================================
   STORE / pricing page (hosting_pricing_ui hook): brand palette, calmer headers
   ========================================================= */
body.pricing-improved .pricing-cat-nav {
  background: #fff !important; border: 1px solid var(--cc-border) !important; border-radius: var(--cc-radius) !important; box-shadow: var(--cc-shadow);
  padding: 14px 18px !important; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
}
body.pricing-improved .pricing-cat-nav a {
  background: #fff !important; color: var(--cc-primary) !important; border: 1px solid var(--cc-border) !important; border-radius: 22px !important;
  padding: 10px 20px !important; font-size: 15px; font-weight: 500; text-decoration: none; transition: border-color .15s, background .15s;
}
body.pricing-improved .pricing-cat-nav a:hover { border-color: var(--cc-accent) !important; background: var(--cc-secondary) !important; color: var(--cc-primary) !important; }
body.pricing-improved .pricing-cat-nav a.active { background: #e3eeff !important; border-color: var(--cc-accent) !important; color: var(--cc-accent-dark) !important; font-weight: 600; box-shadow: 0 0 0 3px rgba(20,99,201,.12); }

/* plan cards */
body.pricing-improved .product { border: 1px solid var(--cc-border) !important; border-top: 4px solid var(--cc-accent) !important; border-radius: var(--cc-radius) !important; background: #fff !important; box-shadow: var(--cc-shadow) !important; overflow: hidden; transition: box-shadow .15s, transform .15s; }
body.pricing-improved .product:hover { box-shadow: var(--cc-shadow-hover) !important; transform: translateY(-2px); }
body.pricing-improved .product header, body.pricing-improved .product.featured header { background: #edf4ff !important; color: var(--cc-navy) !important; border-bottom: 1px solid var(--cc-border) !important; padding: 18px 20px !important; }
body.pricing-improved .product header span, body.pricing-improved .product header h3, body.pricing-improved .product header * { color: var(--cc-navy) !important; font-weight: 650; font-size: 20px; text-shadow: none; }
body.pricing-improved .product.featured { border-color: var(--cc-accent) !important; box-shadow: 0 0 0 3px rgba(20,99,201,.14), var(--cc-shadow) !important; }
body.pricing-improved .product .feature-value, body.pricing-improved .product li strong, body.pricing-improved .product .product-desc strong { color: var(--cc-accent-dark) !important; font-weight: 700; }
body.pricing-improved .product .product-desc, body.pricing-improved .product li { color: var(--cc-text); font-size: 15px; }
body.pricing-improved .product footer { background: #f8fbff !important; border-top: 1px solid var(--cc-border) !important; }
body.pricing-improved .product .product-pricing .price { color: var(--cc-navy) !important; font-size: 28px; font-weight: 750; }
body.pricing-improved .product .product-pricing small, body.pricing-improved .product .product-pricing .cycle { color: var(--cc-muted) !important; font-size: 13.5px; }
body.pricing-improved .product .btn-order-now { background: var(--cc-accent) !important; border-color: var(--cc-accent) !important; color: #fff !important; border-radius: var(--cc-radius-input) !important; min-height: 46px; padding: 10px 24px; font-size: 15.5px; font-weight: 600; }
body.pricing-improved .product .btn-order-now:hover { background: var(--cc-accent-dark) !important; border-color: var(--cc-accent-dark) !important; }
body.pricing-improved h1, body.pricing-improved .header-lined h1 { color: var(--cc-navy); }

/* ---- Header basket: icon clearly visible, count badge moved up off the icon ---- */
section#header .top-nav .cc-cart-btn { overflow: visible; }
section#header .top-nav .cc-cart-btn i, section#header .top-nav .cc-cart-btn .fal, section#header .top-nav .cc-cart-btn .fas {
  font-weight: 900 !important; font-size: 18px; color: var(--cc-primary) !important; position: relative; top: 1px; left: -1px;
}
section#header .top-nav .cc-cart-count {
  top: -12px !important; right: -9px !important; min-width: 22px; height: 22px; padding: 0 6px; font-size: 12px; line-height: 22px; border: 2px solid #fff; z-index: 2;
}

/* ---- Red attention panel: red top edge must win over the generic blue accent ---- */
body .client-home-panels [menuitemname="Domains Expiring Soon"], body .client-home-panels [menuitemname="Overdue Invoices"],
body .client-home-panels [menuitemname="Unpaid Invoices"], body .client-home-panels [menuitemname="Credit Card Expiring Soon"],
body .client-home-panels .panel[class*="panel-accent-red"] {
  border-top: 4px solid #d93a3a !important; border-left-color: #f0c4c4 !important; border-right-color: #f0c4c4 !important; border-bottom-color: #f0c4c4 !important;
}

/* ---- cPanel mark: just a white "cP" over the button (no tile, no colour) ---- */
body .cc-ico-cpanel::before {
  content: "cP" !important; background: none !important; width: auto !important; height: auto !important; flex: 0 0 auto;
  font-family: "Outfit", Arial, sans-serif; font-weight: 800; font-size: 17px; letter-spacing: -.5px; line-height: 1; color: #fff; margin-right: 9px; vertical-align: baseline;
}
body li.cc-ico-cpanel::before { color: var(--cc-accent); font-size: 15px; margin-right: 8px; }

/* =========================================================
   STORE: categories on ONE line + spec lists
   ========================================================= */
body.pricing-improved .pricing-cat-nav {
  flex-wrap: nowrap !important; justify-content: safe center; overflow-x: auto; gap: 8px !important; padding: 12px 16px !important; scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}
body.pricing-improved .pricing-cat-nav a { flex: 0 0 auto; white-space: nowrap; padding: 9px 16px !important; font-size: 14.5px !important; }
@media (max-width: 991px) { body.pricing-improved .pricing-cat-nav { justify-content: flex-start; } }

/* plan card titles: smaller, no heavy look */
body.pricing-improved .product header, body.pricing-improved .product header * { font-size: 18px !important; line-height: 1.3; font-weight: 650 !important; }
body.pricing-improved .product header { padding: 16px 20px !important; min-height: 76px; display: flex; align-items: center; justify-content: center; text-align: center; }
/* equal-height cards, pricing pinned to the bottom */
body.pricing-improved .product { display: flex; flex-direction: column; }
body.pricing-improved .product .product-desc { flex: 1 1 auto; padding: 8px 22px 16px !important; font-size: 15px; }
body.pricing-improved .product footer { flex: 0 0 auto; }

/* spec list */
.cc-specs { list-style: none; margin: 0; padding: 0; text-align: left; }
.cc-specs li { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; border-bottom: 1px dashed #dbe6f4; font-size: 15px; line-height: 1.45; color: var(--cc-text); }
.cc-specs li:last-child { border-bottom: 0; }
.cc-specs li i { flex: 0 0 22px; width: 22px; text-align: center; margin-top: 2px; font-size: 16px; font-weight: 300; color: var(--cc-accent); }
.cc-specs li span { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; }
.cc-specs li.cc-spec-main { font-weight: 650; color: var(--cc-navy); font-size: 16px; padding-top: 14px; }
.cc-specs li.cc-spec-main i { color: var(--cc-primary); }

/* Home: header action buttons with text (e.g. "Renew Now") — icon and label spaced apart */
.panel-heading .panel-title .btn { gap: 9px; padding: 6px 16px !important; }
.panel-heading .panel-title .btn i, .panel-heading .panel-title .btn .fas, .panel-heading .panel-title .btn .far { margin: 0 !important; }
.panel-heading .panel-title .btn:not(:has(span, :not(i))) { padding: 4px 10px !important; }   /* icon-only buttons stay compact */

/* Status labels inside lists (e.g. "Closed" on recent tickets): small and quiet */
.client-home-panels .list-group-item .label, .list-group-item .label, #tableTicketsList .label {
  display: inline-block; font-size: 11.5px !important; font-weight: 600; line-height: 1.5; padding: 2px 9px !important; margin-left: 8px; border-radius: 20px;
  vertical-align: 2px; letter-spacing: .1px;
}
.client-home-panels .list-group-item .label-default, .list-group-item .label.status-closed, .list-group-item .label[class*="closed"] { background: #eef1f6 !important; color: #5f6f86 !important; }
.client-home-panels .list-group-item .label-info, .list-group-item .label.status-open { background: #e3eeff !important; color: var(--cc-accent-dark) !important; }
.client-home-panels .list-group-item .label-success, .list-group-item .label.status-answered { background: #e3f6ea !important; color: #146c36 !important; }
.client-home-panels .list-group-item .label-warning, .list-group-item .label.status-customer-reply { background: #fff3d1 !important; color: #8a5a00 !important; }

/* Sidebar link lists (Raccourcis, Support, Actions…): icon on the left, one tidy row per link */
.panel-sidebar .list-group-item { display: flex !important; align-items: center; gap: 12px; padding: 12px 18px; font-size: 14.5px; line-height: 1.35; min-height: 48px; }
.panel-sidebar .list-group-item i.sidebar-menu-item-icon, .panel-sidebar .list-group-item > i { order: -1; flex: 0 0 22px; width: 22px; text-align: center; margin: 0; float: none !important; font-size: 16px; color: var(--cc-primary); }
.panel-sidebar .list-group-item .badge { order: 3; margin-left: auto; float: none !important; }
.panel-sidebar .list-group-item.active i { color: var(--cc-accent) !important; }
.panel-sidebar .panel-heading { padding: 14px 18px; min-height: 52px; display: flex; align-items: center; }
.panel-sidebar .panel-heading .panel-title { margin: 0; }
.panel-sidebar .panel-title { align-items: center !important; }
.panel-sidebar .panel-title > i:first-child, .panel-sidebar .panel-title .panel-minimise { margin-top: 0; }

/* =========================================================
   CHECKOUT — clearer sections, selectable cards, prominent total & action
   ========================================================= */
body #order-standard_cart .sub-heading, body #order-standard_cart .sub-heading-borderless { margin: 34px 0 18px; text-align: left; height: auto; border: 0; position: relative; }
body #order-standard_cart .sub-heading::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: #d6e2f2; z-index: 0; }
body #order-standard_cart .sub-heading span, body #order-standard_cart .sub-heading-borderless span {
  position: relative; z-index: 1; display: inline-block; margin-left: 0; padding: 0 14px 0 0; background: #f6f9ff; color: #1f314b; font-size: 18px; font-weight: 650; text-transform: none; top: 0;
}
/* account chooser: selectable cards */
body #order-standard_cart .account-select-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin: 0; }
body #order-standard_cart .account-select-container::before, body #order-standard_cart .account-select-container::after { display: none; }
body #order-standard_cart .account-select-container > [class*="col-"] { width: auto; float: none; padding: 0; }
body #order-standard_cart .account { background: #fff; border: 1px solid #d6e2f2; border-radius: 14px; padding: 18px 20px; box-shadow: 0 1px 2px rgba(31,49,75,.05); transition: border-color .15s, box-shadow .15s; cursor: pointer; height: 100%; margin: 0; }
body #order-standard_cart .account:hover { border-color: #1463c9; }
body #order-standard_cart .account.active, body #order-standard_cart .account:has(input:checked) { border-color: #1463c9; background: #f3f8ff; box-shadow: 0 0 0 3px rgba(20,99,201,.14); }
body #order-standard_cart .account .address, body #order-standard_cart .account address { color: #5f6f86; font-size: 14px; line-height: 1.55; margin-top: 6px; }
body #order-standard_cart .account .currency-badge, body #order-standard_cart .account .label { background: #e3eeff !important; color: #0f52a8 !important; font-size: 11.5px; padding: 3px 10px; border-radius: 20px; margin-left: 8px; }
body #order-standard_cart .account label, body #order-standard_cart .account-select-container label { font-size: 15.5px; font-weight: 600; color: #1f314b; margin: 0; }
/* total due: calm, big figure, not a green alert */
body #order-standard_cart #totalDueToday { background: #fff !important; border: 1px solid #d6e2f2 !important; border-left: 4px solid #1463c9 !important; border-radius: 14px; color: #5f6f86 !important; font-size: 16px; padding: 20px 24px; text-align: left; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; box-shadow: 0 1px 2px rgba(31,49,75,.05), 0 4px 14px rgba(31,49,75,.05); }
body #order-standard_cart #totalDueToday strong, body #order-standard_cart #totalDueToday .amt, body #order-standard_cart #totalCartPrice { font-size: 30px; font-weight: 700; color: #1f314b !important; }
/* credit box and radio options */
body #order-standard_cart .apply-credit-container { background: #fff; border: 1px solid #d6e2f2; border-radius: 14px; padding: 22px 24px; box-shadow: 0 1px 2px rgba(31,49,75,.05); }
body #order-standard_cart .apply-credit-container p { font-size: 15.5px; color: #1f314b; margin-bottom: 14px; }
body #order-standard_cart .apply-credit-container label.radio-inline, body #order-standard_cart .apply-credit-container .radio-inline { display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 14px 16px; margin: 0 0 10px; border: 1px solid #d6e2f2; border-radius: 12px; font-size: 14.5px; line-height: 1.5; color: #34445c; cursor: pointer; font-weight: 500; }
body #order-standard_cart .apply-credit-container label:has(input:checked) { border-color: #1463c9; background: #f3f8ff; color: #1f314b; }
/* payment method chips */
body #order-standard_cart #paymentGatewaysContainer label.radio-inline { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; margin: 0 10px 10px 0; border: 1px solid #d6e2f2; border-radius: 12px; background: #fff; font-weight: 600; color: #1f314b; cursor: pointer; }
body #order-standard_cart #paymentGatewaysContainer label.radio-inline:has(input:checked) { border-color: #1463c9; background: #f3f8ff; box-shadow: 0 0 0 3px rgba(20,99,201,.12); }
/* terms + primary action */
body #order-standard_cart #accepttos { width: 20px; height: 20px; accent-color: #1463c9; vertical-align: -4px; }
body #order-standard_cart .checkbox-inline { font-size: 15px; color: #34445c; display: inline-flex; align-items: center; gap: 10px; padding-left: 0; }
body #order-standard_cart #btnCompleteOrder { min-width: 280px; min-height: 54px; font-size: 17px; font-weight: 650; background: #1463c9 !important; border: 0 !important; color: #fff !important; border-radius: 12px; box-shadow: 0 6px 16px rgba(20,99,201,.28); display: inline-flex; align-items: center; justify-content: center; gap: 12px; }
body #order-standard_cart #btnCompleteOrder:hover { background: #0f52a8 !important; }
body #order-standard_cart #btnCompleteOrder[disabled], body #order-standard_cart #btnCompleteOrder.disabled { opacity: .55; box-shadow: none; }
body #order-standard_cart .checkout-security-msg { border-radius: 12px; }
@media (max-width: 575px) { body #order-standard_cart #btnCompleteOrder { width: 100%; min-width: 0; } body #order-standard_cart #totalDueToday { flex-direction: column; align-items: flex-start; } }

/* Row action dropdowns must escape the table card (it had overflow:hidden for the rounded corners) */
@media (min-width: 992px) {
  .table-container, .dataTables_wrapper, div.listtable, .main-content > .tab-content > .tab-pane { overflow: visible !important; }
  .dataTables_wrapper table.table-list { overflow: visible !important; }
  .dataTables_wrapper table.table-list thead th:first-child { border-top-left-radius: var(--cc-radius); }
  .dataTables_wrapper table.table-list thead th:last-child { border-top-right-radius: var(--cc-radius); }
}
.table-list .btn-group.open, .table-list .btn-group.open .dropdown-menu { z-index: 1050; }
.table-list .dropdown-menu { min-width: 240px; margin-top: 6px; border: 1px solid var(--cc-border); }
/* the caret button: same look as its siblings, no grey fill */
.table-list .btn-group .dropdown-toggle, .table-list .btn-group .btn.dropdown-toggle:focus, .table-list .btn-group.open .dropdown-toggle {
  background: #fff !important; border: 1px solid var(--cc-border) !important; box-shadow: none !important; color: var(--cc-primary);
}
.table-list .btn-group .dropdown-toggle:hover, .table-list .btn-group.open .dropdown-toggle { background: var(--cc-accent) !important; border-color: var(--cc-accent) !important; }
.table-list .btn-group .dropdown-toggle:hover .caret, .table-list .btn-group.open .dropdown-toggle .caret { border-top-color: #fff; }

/* icons added by js/sidebar-icons.js use the same style as the native ones */
.panel-sidebar .list-group-item i.sidebar-menu-item-icon { font-weight: 300 !important; font-size: 16px; }

/* .ma domains: contact editing locked (js/ma-contacts-lock.js) */
.cc-locked, a.cc-locked, li.cc-locked > a, #tabOverview > ul > li > a.cc-locked {
  opacity: .5; cursor: not-allowed !important; pointer-events: auto; filter: grayscale(.4);
}
#tabOverview > ul > li > a.cc-locked { background: #f1f6fd !important; border-color: #c9d8ec !important; color: #5f6f86 !important; text-decoration: line-through; text-decoration-color: rgba(95,111,134,.5); }
.dropdown-menu > li.cc-locked > a, .panel-sidebar a.list-group-item.cc-locked { color: #8a96a8 !important; background: transparent !important; }

/* Registrar lock status (js/lock-status.js) */
.cc-lock-status { text-align: center; padding: 30px 20px 26px; margin: 8px auto 26px; max-width: 560px; border-radius: 18px; border: 1px solid; }
.cc-lock-status .cc-lock-icon { width: 120px; height: 120px; margin: 0 auto 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 54px; }
.cc-lock-status .cc-lock-title { font-size: 24px; font-weight: 700; margin-bottom: 6px; }
.cc-lock-status .cc-lock-sub { font-size: 15px; color: #5f6f86; max-width: 440px; margin: 0 auto; line-height: 1.5; }
.cc-lock-status.is-locked { background: #f1fbf5; border-color: #b7e4c7; }
.cc-lock-status.is-locked .cc-lock-icon { background: #dcf5e6; color: #1f8f4e; box-shadow: 0 0 0 10px rgba(31,143,78,.08); }
.cc-lock-status.is-locked .cc-lock-title { color: #146c36; }
.cc-lock-status.is-unlocked { background: #fff5f5; border-color: #f3c6c6; }
.cc-lock-status.is-unlocked .cc-lock-icon { background: #fde2e2; color: #d93a3a; box-shadow: 0 0 0 10px rgba(217,58,58,.08); }
.cc-lock-status.is-unlocked .cc-lock-title { color: #a12626; }
/* the action button beneath: lock = green, unlock = quiet outline */
#tabReglock .btn-success { background: #1f8f4e !important; border-color: #1f8f4e !important; min-width: 220px; }
#tabReglock .btn-danger { background: #fff !important; color: #a12626 !important; border: 1px solid #e6b5b5 !important; min-width: 220px; }
#tabReglock .alert-info { text-align: left; }

/* Breadcrumb: no "Accueil / Portal Home" first crumb (the logo and menu already go home) */
div.header-lined .breadcrumb > li:first-child { display: none !important; }
div.header-lined .breadcrumb > li:nth-child(2):before { content: none !important; display: none !important; }

/* One icon per sidebar link: if WHMCS already drew one, hide the extra */
.panel-sidebar .list-group-item > i:first-of-type:has(~ i) { display: none !important; }

/* =========================================================
   Ticket information card: label on top (small, muted), value below, nothing clipped
   ========================================================= */
body [menuitemname="Ticket Information"] .list-group-item,
body .panel-sidebar:has(.panel-footer .btn-success) .list-group-item {
  display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start; gap: 4px; padding: 14px 20px !important; min-height: 0; line-height: 1.4;
}
body [menuitemname="Ticket Information"] .list-group-item > *, body .panel-sidebar:has(.panel-footer .btn-success) .list-group-item > * { float: none !important; margin: 0 !important; max-width: 100%; text-align: left; }
/* the label (first text/element) */
body [menuitemname="Ticket Information"] .list-group-item .list-info-title,
body [menuitemname="Ticket Information"] .list-group-item > :first-child:not(.label):not(.badge) { font-size: 12px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: #5f6f86; }
/* the value */
body [menuitemname="Ticket Information"] .list-group-item .list-info-text,
body [menuitemname="Ticket Information"] .list-group-item > :last-child:not(:first-child) { font-size: 15.5px; font-weight: 500; color: #1f314b; overflow-wrap: anywhere; }
/* role / status pills wrap onto their own line instead of being cut off */
body [menuitemname="Ticket Information"] .list-group-item .label { display: inline-block; font-size: 11.5px !important; padding: 2px 10px !important; margin: 2px 0 0 !important; max-width: 100%; white-space: normal; border-radius: 20px; }
body [menuitemname="Ticket Information"] .list-group-item .label-success, body [menuitemname="Ticket Information"] .list-group-item [class*="requestor-type"] { background: #e3eeff !important; color: #0f52a8 !important; }
body [menuitemname="Ticket Information"] .panel-footer { border-top: 1px solid var(--cc-border); }

/* CC recipients: clean stacked form (built by js/cc-form.js) */
#frmAddCcEmail { display: block !important; width: 100%; padding: 4px 0 0; }
#frmAddCcEmail .cc-cc-form { display: flex; flex-direction: column; gap: 10px; width: 100%; }
#frmAddCcEmail .cc-cc-form input.form-control, #frmAddCcEmail .cc-cc-form input[type="text"], #frmAddCcEmail .cc-cc-form input[type="email"] {
  width: 100% !important; max-width: 100% !important; height: 46px !important; min-height: 46px; padding: 0 14px; font-size: 14.5px; box-sizing: border-box; margin: 0 !important;
}
#frmAddCcEmail .cc-cc-form .btn, #frmAddCcEmail .cc-cc-form button, #frmAddCcEmail .cc-cc-form input[type="submit"] {
  width: 100% !important; height: 44px !important; min-height: 44px !important; max-height: 44px; padding: 0 16px; margin: 0 !important; display: inline-flex !important; align-items: center; justify-content: center; line-height: 1;
}
#frmAddCcEmail .cc-cc-form input.form-control { display: block !important; flex: 0 0 auto; }
.panel-sidebar [menuitemname="Ticket CC Recipients"] .panel-body, .panel-sidebar .panel-body:has(#frmAddCcEmail) { padding: 14px 18px 18px !important; }

/* CC recipients: single button + modal */
.cc-add-cc-btn { width: 100%; min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; margin: 6px 0 0; background: #fff !important; color: var(--cc-accent) !important; border: 1px solid var(--cc-accent) !important; font-weight: 600; border-radius: var(--cc-radius-input); }
.cc-add-cc-btn:hover { background: var(--cc-light) !important; }
.cc-fb-hidden { display: none !important; }
.cc-cc-modal .modal-dialog { max-width: 460px; margin: 110px auto 20px; }
.cc-cc-modal .modal-content { border: 0; border-radius: 18px; box-shadow: 0 20px 60px rgba(31,49,75,.22); overflow: hidden; }
.cc-cc-modal .modal-header { background: linear-gradient(180deg, #edf4ff, #fff); border: 0; padding: 24px 26px 6px; }
.cc-cc-modal .modal-title { font-size: 19px; font-weight: 650; color: var(--cc-navy); display: flex; align-items: center; gap: 10px; }
.cc-cc-modal .modal-title i { color: var(--cc-accent); font-weight: 300; }
.cc-cc-modal .close { position: absolute; right: 16px; top: 16px; width: 34px; height: 34px; border-radius: 50%; background: #fff; border: 1px solid var(--cc-border); opacity: 1; text-shadow: none; color: var(--cc-primary); font-size: 21px; line-height: 1; }
.cc-cc-hint { margin: 6px 0 0; font-size: 14px; color: var(--cc-muted); }
.cc-cc-modal .modal-body { padding: 16px 26px 6px; }
.cc-cc-modal label { display: block; margin-bottom: 8px; }
.cc-cc-modal .form-control { height: 48px; }
.cc-cc-msg { min-height: 22px; margin-top: 10px; font-size: 14px; font-weight: 500; }
.cc-cc-msg.is-error { color: #a12626; }
.cc-cc-msg.is-ok { color: #146c36; }
.cc-cc-modal .modal-footer { border: 0; padding: 14px 26px 24px; display: flex; gap: 10px; justify-content: flex-end; }
.cc-cc-modal .modal-footer .btn { min-width: 110px; }
@media (max-width: 480px) { .cc-cc-modal .modal-dialog { margin: 60px 12px 20px; } .cc-cc-modal .modal-footer .btn { flex: 1; } }
.cc-add-cc-btn { display: flex !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box; white-space: normal; text-align: center; flex-direction: row; padding: 10px 16px; }
.cc-add-cc-btn i { flex: 0 0 auto; margin: 0 !important; }

/* =========================================================
   Featured TLD cards (domain search page): compact logos, brand price footer
   ========================================================= */
body #order-standard_cart .featured-tlds-container .row { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 0; }
body #order-standard_cart .featured-tld {
  background: #fff; border: 1px solid #d6e2f2; border-radius: 14px; overflow: hidden; margin: 0 0 6px; text-align: center;
  box-shadow: 0 1px 2px rgba(31,49,75,.05), 0 4px 14px rgba(31,49,75,.05); transition: box-shadow .15s, transform .15s, border-color .15s;
}
body #order-standard_cart .featured-tld:hover { border-color: #1463c9; box-shadow: 0 2px 4px rgba(31,49,75,.06), 0 8px 24px rgba(31,49,75,.10); transform: translateY(-2px); }
body #order-standard_cart .featured-tld .img-container { display: flex; align-items: center; justify-content: center; height: 110px; padding: 18px 24px; background: #fff; }
body #order-standard_cart .featured-tld .img-container img { max-height: 64px; max-width: 150px; width: auto; height: auto; object-fit: contain; display: block; }
body #order-standard_cart .featured-tld .price { padding: 12px 16px; font-size: 16px; font-weight: 650; color: #1f314b !important; background: #f4f8ff !important; border-top: 1px solid #d6e2f2; line-height: 1.3; }
/* one calm footer colour instead of green / blue / yellow */
body #order-standard_cart .featured-tld .price.ma, body #order-standard_cart .featured-tld .price.com, body #order-standard_cart .featured-tld .price.net,
body #order-standard_cart .featured-tld .price.org, body #order-standard_cart .featured-tld .price.info, body #order-standard_cart .featured-tld .price.me { background: #f4f8ff !important; color: #1f314b !important; }
body #order-standard_cart .featured-tld .price::before { content: ""; }
@media (min-width: 992px) { body #order-standard_cart .featured-tlds-container .col-lg-4 { max-width: 260px; } }
@media (max-width: 575px) { body #order-standard_cart .featured-tld .img-container { height: 90px; } body #order-standard_cart .featured-tld .img-container img { max-height: 52px; } }

/* =========================================================
   MOBILE — cart / domain search / header (<= 767px)
   ========================================================= */
@media (max-width: 767px) {
  /* header: logo + compact controls on one tidy row, menu toggle clear */
  section#header { padding: 10px 0 !important; }
  section#header .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
  section#header .logo img { height: 30px !important; max-height: 30px !important; }
  section#header .top-nav { display: flex; align-items: center; gap: 6px; margin: 0; padding: 0; }
  section#header .top-nav .choose-language, section#header .top-nav a.choose-language { padding: 0 8px; font-size: 13px; }
  section#header .top-nav > li.primary-action > a.btn { padding: 0 14px; height: 40px; min-height: 40px; font-size: 14px; }
  section#header .top-nav .cc-cart-btn, section#header .top-nav #accountNotifications, section#header .top-nav > li > a.btn-logged-in-admin { width: 40px; height: 40px; min-height: 40px; }
  body { font-size: 15.5px; }

  /* domain search hero */
  body #order-standard_cart .header-lined { padding: 0 4px; }
  body #order-standard_cart .sc-domain-hero-title, body #order-standard_cart .header-lined h1 { font-size: 24px !important; line-height: 1.25; }
  body #order-standard_cart .sc-domain-hero-subtitle { font-size: 14.5px; }
  body #order-standard_cart .domain-checker-bg { padding: 18px 14px !important; border-radius: 14px; }
  body #order-standard_cart .domain-checker-container .row > [class*="col-"] { width: 100% !important; margin-left: 0 !important; padding-left: 0; padding-right: 0; float: none; }
  body #order-standard_cart .input-group-box, body #order-standard_cart .domain-checker-bg .input-group { display: flex !important; flex-direction: column; gap: 10px; background: transparent; border: 0; box-shadow: none; padding: 0; }
  body #order-standard_cart .domain-checker-bg .input-group .form-control { width: 100% !important; height: 52px !important; font-size: 16px; border-radius: 12px !important; border: 1px solid #c9d8ec; }
  body #order-standard_cart .domain-checker-bg .input-group-btn, body #order-standard_cart .domain-checker-bg .input-group-append { display: block !important; width: 100%; }
  body #order-standard_cart .domain-checker-bg .btn, body #order-standard_cart #btnCheckAvailability { width: 100% !important; min-height: 50px; font-size: 16px; border-radius: 12px !important; margin: 0 !important; }

  /* results */
  body #order-standard_cart .domain-checker-result-headline { padding: 0 4px; text-align: center; }
  body #order-standard_cart .domain-checker-result-headline .domain-price { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
  body #order-standard_cart .domain-checker-result-headline .btn-add-to-cart { width: 100%; min-height: 48px; }
  body #order-standard_cart .domain-lookup-primary-results, body #order-standard_cart .spotlight-tlds, body #order-standard_cart .suggested-domains { padding: 14px; border-radius: 12px; }
  body #order-standard_cart .domain-suggestions .domain-suggestion { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 0; }
  body #order-standard_cart .domain-suggestions .domain-suggestion .btn { margin-left: auto; min-height: 40px; }

  /* featured TLD cards: 3 across, compact */
  body #order-standard_cart .featured-tlds-container .row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0; }
  body #order-standard_cart .featured-tlds-container .row > [class*="col-"] { width: auto !important; max-width: none !important; padding: 0 !important; margin: 0 !important; float: none; }
  body #order-standard_cart .featured-tlds-container .row > .col-sm-2, body #order-standard_cart .featured-tlds-container .row > .col-sm-4 { display: none; }
  body #order-standard_cart .featured-tld .img-container { height: 64px; padding: 8px; }
  body #order-standard_cart .featured-tld .img-container img { max-height: 34px; max-width: 80px; }
  body #order-standard_cart .featured-tld .price { font-size: 13px; padding: 8px 4px; }

  /* cart body uses the full width; sidebar categories collapse above */
  body #order-standard_cart .cart-body, body #order-standard_cart .cart-sidebar { float: none !important; width: 100% !important; padding-left: 0; padding-right: 0; }
  body #order-standard_cart .cart-sidebar { margin-bottom: 16px; }

  /* stepper */
  body .cart-progress, body #order-standard_cart .progress-steps { padding: 0 6px; }
  /* tabs / forms inside the cart stack nicely */
  body #order-standard_cart .view-cart-items .item { padding: 16px; }
  body #order-standard_cart .order-summary { margin-top: 18px; }
  body #order-standard_cart .btn-checkout, body #order-standard_cart #checkout { width: 100%; }
  /* tap targets */
  body #order-standard_cart .btn, body #order-standard_cart .form-control, body #order-standard_cart select { min-height: 46px; }
  section#footer { text-align: center; padding: 22px 0; }
  section#footer .back-to-top { float: none; display: inline-block; margin-top: 10px; }
}
@media (max-width: 380px) { body #order-standard_cart .featured-tlds-container .row { grid-template-columns: repeat(2, 1fr); } }

/* =========================================================
   MOBILE LIST TABLES -> CARDS (domains, services, tickets, invoices)  <= 767px
   ========================================================= */
@media (max-width: 767px) {
  .table-container, .dataTables_wrapper, div.listtable { overflow: visible !important; border: 0 !important; box-shadow: none !important; background: transparent !important; padding: 0 !important; }
  .table-list, #tableDomainsList, #tableServicesList, #tableTicketsList { min-width: 0 !important; width: 100% !important; border: 0 !important; background: transparent; }
  table.cc-cards thead { display: none; }
  table.cc-cards, table.cc-cards tbody { display: block; width: 100%; }
  table.cc-cards tbody tr {
    display: block; background: #fff; border: 1px solid var(--cc-border); border-radius: 14px; box-shadow: var(--cc-shadow); margin: 0 0 14px; padding: 6px 0; position: relative; overflow: visible;
  }
  table.cc-cards tbody tr.cc-row-selected { border-color: var(--cc-accent); background: #f3f8ff; box-shadow: 0 0 0 3px rgba(20,99,201,.14); }
  table.cc-cards tbody tr.cc-row-selected > td { background: transparent !important; box-shadow: none !important; }
  table.cc-cards tbody td {
    display: flex !important; align-items: center; justify-content: space-between; gap: 14px; width: 100% !important; padding: 10px 16px !important; border: 0 !important; border-bottom: 1px solid #eef3fa !important;
    text-align: right !important; background: transparent !important; min-height: 0; white-space: normal; overflow-wrap: anywhere;
  }
  table.cc-cards tbody td:last-child { border-bottom: 0 !important; }
  table.cc-cards tbody td[style*="display: none"], table.cc-cards tbody td.hidden, table.cc-cards tbody td.dtr-hidden { display: none !important; }
  table.cc-cards tbody td::before {
    content: attr(data-label); flex: 0 0 38%; max-width: 38%; text-align: left; font-size: 11.5px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--cc-muted);
  }
  /* first data cell (domain / product / subject) becomes the card title */
  table.cc-cards tbody td[data-col="1"] { font-size: 17px; font-weight: 650; justify-content: flex-start; text-align: left !important; flex-wrap: wrap; border-bottom: 1px solid var(--cc-border) !important; padding-top: 14px !important; padding-bottom: 12px !important; }
  table.cc-cards tbody td[data-col="1"]::before { display: none; }
  /* checkbox cell sits top-right of the card */
  #tableDomainsList tbody td[data-col="0"] { position: absolute; top: 8px; right: 8px; width: auto !important; padding: 8px !important; border: 0 !important; z-index: 2; }
  #tableDomainsList tbody td[data-col="0"]::before { display: none; }
  #tableDomainsList tbody td[data-col="1"] { padding-right: 52px !important; }
  /* icon-only / label-less cells (service icon, actions) */
  table.cc-cards tbody td[data-label=""]::before { display: none; }
  table.cc-cards tbody td:has(.btn-group) { justify-content: flex-end; padding-top: 12px !important; }
  table.cc-cards tbody td:has(.btn-group)::before { display: none; }
  table.cc-cards .btn-group .btn { min-height: 44px; min-width: 46px; }
  .cc-days { display: inline-block; margin: 0 0 0 8px; }

  /* toolbar above the table */
  .domains-sidebar-top, .services-sidebar-top, .tickets-sidebar-top { padding: 10px !important; }
  .domains-sidebar-top .ds-links, .services-sidebar-top .ss-links, .tickets-filter-links { flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; scrollbar-width: none; }
  .ds-link, .ss-link, .tickets-filter-link { flex: 0 0 auto; white-space: nowrap; }
  .domains-toolbar { flex-wrap: wrap !important; gap: 8px !important; padding: 10px !important; }
  .domains-toolbar .dt-action { flex: 1 1 calc(50% - 8px); justify-content: center; min-height: 44px; }
  .domains-toolbar .dt-label, .domains-toolbar .dt-count { flex: 1 1 100%; text-align: left; }

  /* search / length / pager */
  .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_paginate { float: none !important; width: 100%; margin: 0 0 10px; text-align: left; }
  .dataTables_wrapper .dataTables_filter label, .dataTables_wrapper .dataTables_filter label .form-control { width: 100% !important; min-width: 0; padding: 0; }
  .dataTables_wrapper .dataTables_filter label .form-control { padding: 8px 12px 8px 42px !important; height: 46px; }
  div.dataTables_wrapper div.dataTables_info, .dataTables_wrapper .dataTables_info { padding: 4px 2px !important; background: transparent !important; }
  .dataTables_wrapper .dataTables_paginate ul.pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
  .dataTables_wrapper .dataTables_paginate { margin-top: 6px; }
}

/* =========================================================
   MOBILE fixes: header row + TLD cards grid
   ========================================================= */
@media (max-width: 767px) {
  /* header: logo on its own row (left), controls on a full-width row beneath */
  section#header .container { display: flex !important; flex-wrap: wrap; align-items: center; gap: 10px 8px; }
  section#header a.logo, section#header .logo { order: 1; float: none !important; flex: 1 0 100%; display: block; text-align: left; margin: 0; }
  section#header .logo img { height: 34px !important; max-height: 34px !important; width: auto !important; }
  section#header .top-nav { order: 2; float: none !important; flex: 1 0 100%; width: 100%; display: flex !important; align-items: center; justify-content: space-between; gap: 8px; padding: 0; margin: 0; }
  section#header .top-nav > li { margin: 0; padding: 0; float: none; }
  section#header .top-nav .cc-cart-count { min-width: 18px; height: 18px; line-height: 18px; font-size: 11px; padding: 0 5px; top: -6px !important; right: -6px !important; border-width: 2px; }
  section#main-menu .navbar-main { min-height: 0; }
  section#main-menu .navbar-header { padding: 8px 0; }
  .navbar-main .navbar-toggle { margin: 0; float: right; }

  /* TLD cards: reliable 3-column grid, spacer columns removed, nothing clipped */
  body #order-standard_cart .featured-tlds-container, body #order-standard_cart .featured-tlds-container > .row { margin: 0 !important; padding: 0 !important; width: 100% !important; max-width: 100% !important; overflow: visible; }
  body #order-standard_cart .featured-tlds-container > .row { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  body #order-standard_cart .featured-tlds-container > .row::before, body #order-standard_cart .featured-tlds-container > .row::after { display: none !important; content: none !important; }
  body #order-standard_cart .featured-tlds-container > .row > div:empty, body #order-standard_cart .featured-tlds-container > .row > .col-sm-2, body #order-standard_cart .featured-tlds-container > .row > .col-sm-4 { display: none !important; }
  body #order-standard_cart .featured-tlds-container > .row > [class*="col-"] { width: 100% !important; max-width: 100% !important; flex: none; padding: 0 !important; margin: 0 !important; float: none !important; position: static; }
  body #order-standard_cart .featured-tld { margin: 0; height: 100%; }
  body #order-standard_cart .domain-checker-container, body #order-standard_cart .domain-checker-bg { margin-left: 0; margin-right: 0; max-width: 100%; }
  body #order-standard_cart .cart-body { overflow: visible; }
}

/* =========================================================
   MOBILE round 2: no sideways overflow, tidy header row, slim menu bar
   ========================================================= */
@media (max-width: 767px) {
  html, body { overflow-x: hidden; max-width: 100vw; }
  section#main-body .container, section#header .container, section#main-menu .container, section#footer .container { padding-left: 16px; padding-right: 16px; width: 100%; max-width: 100%; margin: 0; }
  body #order-standard_cart { margin: 0 !important; padding: 0 0 30px !important; overflow-x: clip; max-width: 100%; }
  body #order-standard_cart .row { margin-left: 0 !important; margin-right: 0 !important; }
  body #order-standard_cart .cart-body, body #order-standard_cart .cart-sidebar, body #order-standard_cart .secondary-cart-body { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; max-width: 100% !important; }
  body #order-standard_cart .domain-checker-container { margin: 0 0 18px !important; }
  body #order-standard_cart .domain-checker-bg { width: 100%; box-sizing: border-box; }
  body #order-standard_cart .domain-checker-bg .input-group { width: 100%; max-width: 100%; margin: 0; }
  body #order-standard_cart .domain-checker-bg .input-group .form-control { max-width: 100%; box-sizing: border-box; }
  body #order-standard_cart .featured-tlds-container { padding: 0; margin: 0; }

  /* header controls: language on the left, the rest grouped on the right with even gaps */
  section#header .top-nav { justify-content: flex-start !important; gap: 8px !important; }
  section#header .top-nav > li:first-child { margin-right: auto; }
  section#header .top-nav .tooltip, .tooltip { display: none !important; }   /* admin-return tooltip overflowed the screen */
  section#header .top-nav > li.primary-action > a.btn { height: 40px; min-height: 40px; padding: 0 16px; }

  /* menu bar: slim, toggle aligned with the page padding */
  section#main-menu { min-height: 0; }
  section#main-menu .navbar-main { min-height: 0; margin: 0; }
  section#main-menu .navbar-main > .container { display: flex; flex-wrap: wrap; align-items: center; }
  section#main-menu .navbar-header { float: none; width: 100%; margin: 0; padding: 8px 0; display: flex; justify-content: flex-end; }
  section#main-menu .navbar-toggle { float: none; margin: 0; min-height: 44px; min-width: 52px; display: inline-flex; align-items: center; justify-content: center; }
  section#main-menu .navbar-collapse { width: 100%; padding: 0; border: 0; box-shadow: none; }
  section#main-menu .navbar-collapse.collapse:not(.in) { display: none; }
  section#main-menu .navbar-nav { margin: 0 -16px; }
  section#main-menu .navbar-nav > li > a { padding: 14px 20px; border-top: 1px solid rgba(255,255,255,.1); white-space: normal; }
}

/* =========================================================
   Domain search box: fully visible, clear border, full width
   ========================================================= */
body #order-standard_cart .domain-checker-bg { background: linear-gradient(180deg, #edf4ff, #f8fbff) !important; border: 1px solid #c9d8ec !important; border-radius: 16px; padding: 34px 24px !important; box-shadow: 0 1px 2px rgba(31,49,75,.05), 0 6px 20px rgba(31,49,75,.06); }
body #order-standard_cart .domain-checker-container .col-md-8, body #order-standard_cart .domain-checker-container [class*="col-md-offset"] { width: 100% !important; max-width: 760px !important; margin-left: auto !important; margin-right: auto !important; float: none !important; }
body #order-standard_cart .domain-checker-bg .input-group { width: 100%; max-width: 100%; display: flex; gap: 10px; background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
body #order-standard_cart .domain-checker-bg .input-group .form-control, body #order-standard_cart .domain-checker-bg input[name="domain"] {
  flex: 1 1 auto; width: 100% !important; min-width: 0; height: 56px !important; padding: 0 20px; font-size: 17px; color: #1f314b; background: #fff !important;
  border: 2px solid #1463c9 !important; border-radius: 12px !important; box-shadow: 0 2px 8px rgba(20,99,201,.12) !important; opacity: 1 !important; visibility: visible !important;
}
body #order-standard_cart .domain-checker-bg input[name="domain"]::placeholder { color: #5f6f86 !important; opacity: 1 !important; }
body #order-standard_cart .domain-checker-bg input[name="domain"]:focus { box-shadow: 0 0 0 4px rgba(20,99,201,.2) !important; outline: 0; }
body #order-standard_cart .domain-checker-bg .input-group-btn, body #order-standard_cart .domain-checker-bg .input-group-append { flex: 0 0 auto; display: flex; width: auto; }
body #order-standard_cart .domain-checker-bg #btnCheckAvailability { height: 56px !important; min-width: 150px; padding: 0 28px; font-size: 16.5px; font-weight: 650; border-radius: 12px !important; background: #1463c9 !important; border: 0 !important; color: #fff !important; box-shadow: 0 6px 16px rgba(20,99,201,.28); }
body #order-standard_cart .domain-checker-bg #btnCheckAvailability:hover { background: #0f52a8 !important; }
@media (max-width: 767px) {
  body #order-standard_cart .domain-checker-bg { padding: 16px 12px !important; }
  body #order-standard_cart .domain-checker-bg .input-group { flex-direction: column; }
  body #order-standard_cart .domain-checker-bg .input-group-btn, body #order-standard_cart .domain-checker-bg .input-group-append { width: 100%; }
  body #order-standard_cart .domain-checker-bg #btnCheckAvailability { width: 100% !important; }
  body #order-standard_cart .domain-checker-bg input[name="domain"] { height: 54px !important; font-size: 16px; }
}

/* Round 3: single card around the search, even hamburger, slim menu bar */
body #order-standard_cart .domain-checker-container { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
body #order-standard_cart .domain-checker-container .domain-checker-bg > *, body #order-standard_cart .domain-checker-container form, body #order-standard_cart .domain-checker-container .row { background: transparent !important; border: 0 !important; box-shadow: none !important; }
body #order-standard_cart .domain-checker-bg .input-group-box { border: 0 !important; box-shadow: none !important; background: transparent !important; padding: 0 !important; }
body #order-standard_cart .domain-checker-bg input[name="domain"] { box-shadow: none !important; }
body #order-standard_cart .domain-checker-bg input[name="domain"]:focus { box-shadow: 0 0 0 4px rgba(20,99,201,.2) !important; }
@media (max-width: 767px) {
  .navbar-main .navbar-toggle { padding: 0 !important; width: 52px; height: 44px; display: inline-flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border: 1px solid rgba(255,255,255,.45); border-radius: 10px; background: transparent; }
  .navbar-main .navbar-toggle .icon-bar { display: block; width: 22px !important; height: 2px !important; margin: 0 !important; background: #fff; border-radius: 2px; float: none; }
  .navbar-main .navbar-toggle .icon-bar + .icon-bar { margin-top: 0 !important; }
  section#main-menu .navbar-header { padding: 6px 0 !important; min-height: 0; }
}

/* =========================================================
   MOBILE LIST CARDS — strict rebuild (overrides every earlier cell/row rule)
   ========================================================= */
@media (max-width: 767px) {
  html body table.cc-cards, html body table.cc-cards tbody { display: block !important; width: 100% !important; max-width: 100% !important; table-layout: auto; }
  html body table.cc-cards thead { display: none !important; }
  html body table.cc-cards tbody tr {
    display: grid !important; grid-template-columns: minmax(0, 1fr); width: 100% !important; box-sizing: border-box;
    background: #fff; border: 1px solid var(--cc-border); border-radius: 14px; box-shadow: var(--cc-shadow); margin: 0 0 14px; padding: 0; position: relative; overflow: visible;
  }
  html body table.cc-cards tbody tr > td {
    display: grid !important; grid-template-columns: minmax(96px, 36%) minmax(0, 1fr); align-items: center; column-gap: 12px;
    width: auto !important; min-width: 0 !important; max-width: 100% !important; box-sizing: border-box; float: none !important;
    padding: 11px 16px !important; margin: 0 !important; border: 0 !important; border-bottom: 1px solid #eef3fa !important; background: transparent !important;
    text-align: left !important; white-space: normal !important; word-break: normal !important; overflow-wrap: anywhere; height: auto !important;
  }
  html body table.cc-cards tbody tr > td::before {
    content: attr(data-label); display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--cc-muted); white-space: normal; word-break: normal; overflow-wrap: normal; max-width: none; flex: none;
  }
  html body table.cc-cards tbody tr > td:last-child { border-bottom: 0 !important; }
  html body table.cc-cards tbody tr > td[data-label=""]::before, html body table.cc-cards tbody tr > td:not([data-label])::before { content: none; display: none; }
  html body table.cc-cards tbody tr > td[data-label=""], html body table.cc-cards tbody tr > td:not([data-label]) { grid-template-columns: minmax(0, 1fr); }
  /* title cell */
  html body table.cc-cards tbody tr > td[data-col="1"] { display: block !important; font-size: 17px; font-weight: 650; padding: 16px 56px 14px 16px !important; border-bottom: 1px solid var(--cc-border) !important; }
  html body table.cc-cards tbody tr > td[data-col="1"]::before { display: none !important; content: none; }
  /* checkbox */
  html body #tableDomainsList tbody tr > td[data-col="0"] { position: absolute !important; top: 10px; right: 8px; display: block !important; width: auto !important; padding: 8px !important; border: 0 !important; z-index: 3; }
  html body #tableDomainsList tbody tr > td[data-col="0"]::before { display: none !important; content: none; }
  /* actions row */
  html body table.cc-cards tbody tr > td:has(.btn-group) { display: flex !important; justify-content: flex-start; padding: 12px 16px !important; }
  html body table.cc-cards tbody tr > td:has(.btn-group)::before { display: none !important; content: none; }
  html body table.cc-cards tbody tr > td .btn-group { display: inline-flex; }
  /* status pill / days-left stay on one line */
  html body table.cc-cards .label, html body table.cc-cards .cc-days { display: inline-block; margin: 0; }
  html body table.cc-cards .cc-days { margin-left: 8px; }

  /* bulk-action buttons: real buttons with text, not empty ovals */
  html body .domains-toolbar { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px !important; padding: 12px !important; border-radius: 14px !important; }
  html body .domains-toolbar .dt-label, html body .domains-toolbar .dt-count { grid-column: 1 / -1; display: block !important; font-size: 13px; }
  html body .domains-toolbar .dt-action {
    display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; width: 100% !important; height: auto !important; min-height: 46px; padding: 8px 10px !important;
    border-radius: 12px !important; font-size: 14px !important; line-height: 1.2; white-space: normal; text-align: center; overflow: visible; text-indent: 0; color: var(--cc-primary);
  }
  html body .domains-toolbar .dt-action i { font-size: 15px !important; margin: 0 !important; flex: 0 0 auto; }
  html body .domains-toolbar .dt-action:last-of-type:nth-child(odd) { grid-column: 1 / -1; }
}

/* =========================================================
   MOBILE LIST CARDS v3 — label/value wrappers added by js/table-cards.js (flex row, no grid on cells)
   ========================================================= */
.cc-cell { display: contents; }
.cc-lbl { display: none; }
@media (max-width: 767px) {
  html body table.cc-cards tbody tr { display: block !important; }
  html body table.cc-cards tbody tr > td { display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; padding: 0 !important; border: 0 !important; border-bottom: 1px solid #eef3fa !important; text-align: left !important; }
  html body table.cc-cards tbody tr > td::before { content: none !important; display: none !important; }
  html body table.cc-cards .cc-cell { display: flex !important; align-items: center; justify-content: space-between; gap: 14px; width: 100%; padding: 12px 16px; box-sizing: border-box; }
  html body table.cc-cards .cc-lbl { display: block !important; flex: 0 0 40%; max-width: 40%; font-size: 11.5px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--cc-muted); white-space: normal; word-break: normal; overflow-wrap: normal; }
  html body table.cc-cards .cc-val { flex: 1 1 auto; min-width: 0; text-align: right; white-space: normal; word-break: normal; overflow-wrap: anywhere; font-size: 15px; color: var(--cc-navy); }
  html body table.cc-cards .cc-val .cc-days { display: block; margin: 3px 0 0; text-align: right; }
  html body table.cc-cards .cc-val .label { display: inline-block; }
  /* title cell */
  html body table.cc-cards tbody tr > td[data-col="1"] .cc-cell { display: block !important; padding: 16px 56px 14px 16px; }
  html body table.cc-cards tbody tr > td[data-col="1"] .cc-lbl { display: none !important; }
  html body table.cc-cards tbody tr > td[data-col="1"] .cc-val { text-align: left; font-size: 17px; font-weight: 650; }
  html body table.cc-cards tbody tr > td[data-col="1"] { border-bottom: 1px solid var(--cc-border) !important; }
  /* checkbox cell */
  html body #tableDomainsList tbody tr > td[data-col="0"] { position: absolute !important; top: 10px; right: 6px; width: auto !important; border: 0 !important; z-index: 3; }
  html body #tableDomainsList tbody tr > td[data-col="0"] .cc-lbl { display: none !important; }
  html body #tableDomainsList tbody tr > td[data-col="0"] .cc-cell { padding: 8px 10px; }
  /* actions */
  html body table.cc-cards .cc-cell:has(.btn-group) { justify-content: flex-start; }
  html body table.cc-cards .cc-cell:has(.btn-group) .cc-lbl { display: none !important; }
  html body table.cc-cards .cc-cell:has(.btn-group) .cc-val { text-align: left; }
  html body table.cc-cards tbody tr > td:empty, html body table.cc-cards .cc-cell:has(.cc-lbl:empty) .cc-lbl { display: none !important; }
}
@media (max-width: 767px) { html body table.cc-cards tbody tr > td > .cc-days { display: block; margin: -6px 0 0; padding: 0 16px 12px; text-align: right; } }

/* Row action buttons (wrench / globe / gear / caret): centre every icon in an equal 44px cell */
html body .table-list .btn-group, html body table.cc-cards .btn-group { display: inline-flex !important; align-items: stretch; vertical-align: middle; }
html body .table-list .btn-group > .btn, html body table.cc-cards .btn-group > .btn, html body table.cc-cards .btn-group > .btn-group > .btn {
  display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 46px; min-width: 46px; height: 44px !important; min-height: 44px !important; padding: 0 !important; margin: 0 !important; line-height: 1 !important; float: none !important;
}
html body .table-list .btn-group > .btn i, html body table.cc-cards .btn-group > .btn i { margin: 0 !important; padding: 0 !important; line-height: 1 !important; display: block; position: static; }
html body .table-list .btn-group > .btn .caret, html body table.cc-cards .btn-group .btn .caret { margin: 0 !important; display: block; }
html body .table-list .btn-group > .btn + .btn { margin-left: -1px !important; }

/* Beat the hooks' column rules (width:10% !important, font-size:0 on auto-renew, fixed last-column width) on mobile cards */
@media (max-width: 767px) {
  html body.domains-fw-active table#tableDomainsList.cc-cards tbody tr > td,
  html body.services-fw-active table#tableServicesList.cc-cards tbody tr > td,
  html body.tickets-fw-active table#tableTicketsList.cc-cards tbody tr > td,
  html body.domains-fw-active table#tableDomainsList.cc-cards tbody tr > td:nth-child(n) {
    width: 100% !important; max-width: 100% !important; min-width: 0 !important; font-size: 15px !important; text-align: left !important; display: block !important; white-space: normal !important;
  }
  html body.domains-fw-active table#tableDomainsList.cc-cards tbody tr > td:nth-child(5) .cc-val { font-size: 15px !important; }
  html body.domains-fw-active table#tableDomainsList.cc-cards tbody tr > td:nth-child(5) .cc-val i { font-size: 17px !important; }
  html body.domains-fw-active table#tableDomainsList.cc-cards tbody tr > td:last-child { width: 100% !important; text-align: left !important; }
  html body.domains-fw-active table#tableDomainsList.cc-cards tbody tr > td[data-col="0"] { width: auto !important; position: absolute !important; }
  html body.domains-fw-active table#tableDomainsList.cc-cards .btn-group { width: auto !important; }
  html body.domains-fw-active table#tableDomainsList.cc-cards thead th { display: none !important; }
}

/* =========================================================
   MOBILE: row actions shown inline (no dropdown) — wrench/globe/gear + every menu action as a button
   ========================================================= */
@media (max-width: 767px) {
  html body table.cc-cards .cc-cell:has(.btn-group) { display: block !important; padding: 14px 16px 16px; }
  html body table.cc-cards .cc-val:has(.btn-group) { text-align: left; }
  html body table.cc-cards .btn-group { display: flex !important; flex-wrap: wrap; width: 100% !important; gap: 8px; position: static !important; }
  html body table.cc-cards .btn-group > .btn { flex: 0 0 auto; border-radius: 10px !important; margin: 0 !important; }
  /* the caret toggle is no longer needed */
  html body table.cc-cards .btn-group > .dropdown-toggle, html body table.cc-cards .btn-group > .btn-group > .dropdown-toggle { display: none !important; }
  /* the menu becomes a visible two-column list of action buttons */
  html body table.cc-cards .btn-group .dropdown-menu {
    display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; position: static !important; float: none !important; transform: none !important; width: 100% !important; min-width: 0 !important;
    margin: 6px 0 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; opacity: 1 !important; visibility: visible !important; flex: 1 1 100%;
  }
  html body table.cc-cards .btn-group .dropdown-menu > li { display: block !important; list-style: none; margin: 0; padding: 0; }
  html body table.cc-cards .btn-group .dropdown-menu > li.divider, html body table.cc-cards .btn-group .dropdown-menu > li.dropdown-header { display: none !important; }
  html body table.cc-cards .btn-group .dropdown-menu > li > a {
    display: flex !important; align-items: center; gap: 8px; min-height: 46px; padding: 8px 10px !important; background: #fff; border: 1px solid var(--cc-border); border-radius: 10px;
    font-size: 13px !important; font-weight: 500; line-height: 1.25; text-transform: none !important; letter-spacing: 0 !important; white-space: normal; color: var(--cc-primary) !important; text-align: left; opacity: 1 !important;
  }
  html body table.cc-cards .btn-group .dropdown-menu > li > a i, html body table.cc-cards .btn-group .dropdown-menu > li > a .glyphicon { flex: 0 0 18px; color: var(--cc-accent); font-size: 15px; margin: 0 !important; text-align: center; }
  html body table.cc-cards .btn-group .dropdown-menu > li.disabled > a, html body table.cc-cards .btn-group .dropdown-menu > li.cc-locked > a { opacity: .45 !important; background: #f4f7fb; }
  html body table.cc-cards .btn-group .dropdown-menu > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Logged-out header: cart + register icons, login button with icon */
section#header .top-nav .cc-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--cc-light); border: 1px solid #c9d8ec; color: var(--cc-primary); text-decoration: none; }
section#header .top-nav .cc-icon-btn i { font-size: 18px; font-weight: 400; margin: 0; }
section#header .top-nav .cc-icon-btn:hover { background: #fff; color: var(--cc-accent); box-shadow: var(--cc-shadow); }
section#header .top-nav .cc-login-btn { display: inline-flex; align-items: center; gap: 10px; }
section#header .top-nav .cc-login-btn i { font-size: 15px; }
@media (max-width: 480px) { section#header .top-nav .cc-login-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } section#header .top-nav .cc-login-btn { width: 44px; padding: 0; justify-content: center; } }

/* =========================================================
   LOGIN page — one centred card, full-width action, social sign-in below
   ========================================================= */
.logincontainer { max-width: 480px; margin: 20px auto 40px; background: #fff; border: 1px solid var(--cc-border); border-radius: 20px; box-shadow: 0 2px 4px rgba(31,49,75,.05), 0 16px 40px rgba(31,49,75,.08); padding: 34px 36px 30px; width: 100%; }
.logincontainer .header-lined { border: 0; margin: 0 0 22px; text-align: center; padding: 0; }
.logincontainer .header-lined h1 { font-size: 28px; margin: 0 0 4px; border: 0; }
.logincontainer .header-lined h1 small { display: block; font-size: 14.5px; font-weight: 400; color: var(--cc-muted); margin-top: 6px; white-space: normal; }
.logincontainer .header-lined .breadcrumb { display: none; }
.logincontainer > .row, .logincontainer.with-social > .row { display: flex !important; flex-direction: column; margin: 0 !important; gap: 0; }
.logincontainer > .row::before, .logincontainer > .row::after { display: none !important; content: none !important; }
.logincontainer > .row > [class*="col-"] { float: none !important; width: 100% !important; max-width: 100% !important; padding: 0 !important; border: 0 !important; }
.logincontainer .form-group { margin-bottom: 18px; }
.logincontainer .form-control { height: 50px; font-size: 16px; }
.logincontainer label { font-size: 14.5px; }
/* remember me */
.logincontainer .checkbox { margin: 4px 0 22px; }
.logincontainer .checkbox label { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; color: var(--cc-text); cursor: pointer; padding-left: 0; }
.logincontainer .checkbox input[type="checkbox"] { position: static; margin: 0; width: 18px; height: 18px; }
/* actions: big Connexion button, forgot-password as a quiet link beneath */
.logincontainer .login-form div[align="center"] { display: flex; flex-direction: column; align-items: stretch; gap: 14px; text-align: center; }
.logincontainer #login { width: 100%; min-height: 52px; font-size: 16.5px; font-weight: 650; border-radius: 12px; box-shadow: 0 6px 16px rgba(20,99,201,.25); }
.logincontainer .login-form .btn-default { background: transparent !important; border: 0 !important; box-shadow: none; color: var(--cc-accent) !important; font-weight: 500; min-height: 0; padding: 4px; }
.logincontainer .login-form .btn-default:hover { text-decoration: underline; background: transparent !important; }
/* social sign-in: separated by an "or"-style rule, centred */
.logincontainer.with-social > .row > [class*="col-"]:last-child:not(.hidden) { margin-top: 26px; padding-top: 24px !important; border-top: 1px solid var(--cc-border) !important; display: flex; flex-direction: column; align-items: center; position: relative; }
.logincontainer .providerLinkingFeedback { margin-bottom: 10px; }
.logincontainer .btn-social, .logincontainer .social-signin-btn { width: 100%; justify-content: center; }
.logincontainer iframe { max-width: 100%; }
@media (max-width: 575px) { .logincontainer { border-radius: 16px; padding: 24px 18px 22px; margin: 8px 0 30px; border-left: 0; border-right: 0; } }

/* Account menu (js/account-menu.js) */
.navbar-main .navbar-right > li > a.cc-user-toggle { display: inline-flex !important; align-items: center; gap: 8px; padding-top: 12px; padding-bottom: 12px; }
.navbar-main .navbar-right > li > a.cc-user-toggle i.fa-user-circle { font-size: 24px; font-weight: 300; line-height: 1; }
.navbar-main .navbar-right .dropdown-menu { min-width: 230px; right: 0; left: auto; }
.navbar-main .navbar-right .dropdown-menu > li > a { display: flex; align-items: center; gap: 12px; }
.navbar-main .navbar-right .dropdown-menu > li > a i.cc-nav-ico { flex: 0 0 20px; width: 20px; text-align: center; font-size: 16px; font-weight: 300; color: var(--cc-accent); margin: 0; }

/* Guest account icon: logo-blue tile with a white icon */
.navbar-main .navbar-right > li > a.cc-user-toggle {
  background: #1a74e6 !important; color: #fff !important; border-radius: 12px; margin: 8px 0; padding: 8px 14px !important; min-height: 44px; gap: 8px; box-shadow: 0 2px 8px rgba(26,116,230,.35);
}
.navbar-main .navbar-right > li > a.cc-user-toggle i, .navbar-main .navbar-right > li > a.cc-user-toggle .fa-user-circle { color: #fff !important; font-weight: 400; font-size: 24px; }
.navbar-main .navbar-right > li > a.cc-user-toggle .caret { border-top-color: #fff; margin-left: 2px; }
.navbar-main .navbar-right > li > a.cc-user-toggle:hover, .navbar-main .navbar-right > li.open > a.cc-user-toggle { background: #0f52a8 !important; }

/* Guest account tile: full height of the bar, edge to edge (no gap above/below), like the "Bonjour" tab */
@media (min-width: 768px) {
  .navbar-main .navbar-right > li:last-child > a.cc-user-toggle, .navbar-main .navbar-right > li > a.cc-user-toggle {
    margin: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 17px 24px !important; min-height: 0 !important; height: 100%; display: inline-flex !important; align-items: center; justify-content: center; gap: 8px;
  }
  .navbar-main .navbar-right > li:has(> a.cc-user-toggle) { display: flex; align-self: stretch; }
  .navbar-main .navbar-right { display: flex; align-items: stretch; margin-right: 0; }
  .navbar-main .navbar-collapse { display: flex !important; align-items: stretch; }
  .navbar-main .navbar-collapse > .navbar-nav { float: none; margin: 0; display: flex; align-items: stretch; }
  .navbar-main .navbar-collapse > .navbar-right { margin-left: auto; }
}
/* the admin "return" tooltip must never cover the menu */
.tooltip { z-index: 1000; pointer-events: none; }

/* Fix: restore the standard navbar layout (undo flex experiment), keep the tile full height via padding */
@media (min-width: 768px) {
  html body .navbar-main .navbar-collapse { display: block !important; }
  html body .navbar-main .navbar-collapse > .navbar-nav { display: block; float: left; margin: 0; }
  html body .navbar-main .navbar-collapse > .navbar-nav.navbar-right { float: right !important; margin: 0 !important; display: block; }
  html body .navbar-main .navbar-right > li { float: left; display: block; align-self: auto; }
  html body .navbar-main .navbar-right > li:has(> a.cc-user-toggle) { display: block; }
  html body .navbar-main .navbar-right > li > a.cc-user-toggle {
    display: flex !important; align-items: center; justify-content: center; margin: 0 !important; height: auto; min-height: 0 !important; padding: 17px 24px !important; border-radius: 0 !important; box-shadow: none !important;
  }
}

/* Guest account tile: same navy as the bar; slightly lighter on hover/open */
html body .navbar-main .navbar-right > li > a.cc-user-toggle { background: transparent !important; box-shadow: none !important; color: #fff !important; }
html body .navbar-main .navbar-right > li > a.cc-user-toggle:hover, html body .navbar-main .navbar-right > li > a.cc-user-toggle:focus,
html body .navbar-main .navbar-right > li.open > a.cc-user-toggle { background: rgba(255, 255, 255, .12) !important; }
/* login card: remove the leftover vertical divider line */
.logincontainer .login-form, .logincontainer [class*="col-"], .logincontainer .col-sm-7, .logincontainer .col-sm-12 { border: 0 !important; border-right: 0 !important; box-shadow: none !important; }
.logincontainer [class*="col-"]::before, .logincontainer [class*="col-"]::after, .logincontainer .login-form::before, .logincontainer .login-form::after { display: none !important; content: none !important; }

/* =========================================================
   Footer: secure payment logos (all white)
   ========================================================= */
.cc-secure-pay { padding: 6px 0 26px; margin-bottom: 20px; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.cc-secure-title { font-size: 17px; font-weight: 600; color: #fff; margin: 0 0 22px; }
.cc-pay-logos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 26px; }
.cc-pay-logos li { display: flex; align-items: center; justify-content: center; margin: 0; padding: 0; }
.cc-pay-logos img { display: block; height: 34px; width: auto; max-width: 150px; object-fit: contain; opacity: .88; transition: opacity .15s; }
.cc-pay-logos img:hover { opacity: 1; }
.cc-pay-logos img.cc-pay-mono { filter: brightness(0) invert(1); }
.cc-pay-logos li:nth-child(1) img, .cc-pay-logos li:nth-child(6) img { height: 38px; }
.cc-pay-logos li:nth-child(4) img { height: 40px; }
@media (max-width: 767px) { .cc-pay-logos { justify-content: center; gap: 18px 24px; } .cc-pay-logos img { height: 28px; max-width: 110px; } .cc-secure-title { text-align: center; } }